diff --git a/src/components/table-header/table-header.component.css b/src/components/table-header/table-header.component.css new file mode 100644 index 0000000..cfe9ce3 --- /dev/null +++ b/src/components/table-header/table-header.component.css @@ -0,0 +1,73 @@ +.nav-button button:nth-child(1) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.nav-button button:nth-child(2) { + border-radius: 0; +} + +.nav-button button:nth-child(3) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.nav-button button:not(:last-child) { + border-right: 1px solid var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12)); +} + +.nav-button mat-icon { + transform: scale(1.2); +} + +.app-table-header { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 15px; + grid-row-gap: 10px; + align-items: center; +} + +.app-table-header div { + display: flex; + align-items: center; +} + +.app-table-header div mat-icon { + margin: 0; +} + +.app-table-header div:nth-child(1) { + grid-area: 1 / 1 / 2 / 2; + justify-content: left; +} + +.app-table-header div:nth-child(2) { + grid-area: 1 / 2 / 2 / 4; + justify-content: center; +} + +.app-table-header div:nth-child(3) { + grid-area: 1 / 4 / 2 / 5; + justify-content: right; +} + +@media screen and (max-width: 782px) { + .app-table-header { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + } + + .app-table-header div:nth-child(1) { + grid-area: 1 / 1 / 2 / 2; + } + + .app-table-header div:nth-child(2) { + grid-area: 2 / 1 / 3 / 3; + } + + .app-table-header div:nth-child(3) { + grid-area: 1 / 2 / 2 / 3; + } +} diff --git a/src/components/table-header/table-header.component.html b/src/components/table-header/table-header.component.html new file mode 100644 index 0000000..435ec8b --- /dev/null +++ b/src/components/table-header/table-header.component.html @@ -0,0 +1,22 @@ +