diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index 9d782235b..573b8a562 100644 --- a/apps/client/src/styles.scss +++ b/apps/client/src/styles.scss @@ -505,46 +505,6 @@ ngx-skeleton-loader { padding: 2rem 0; } } - - &.has-tabs { - gf-page-tabs { - height: calc(100svh - var(--mat-toolbar-standard-height)); - - .fab-container { - @media (max-width: 575.98px) { - bottom: 5rem; - } - } - - .mat-mdc-tab-nav-panel { - padding: 2rem 0; - } - - @include mat.tabs-overrides( - ( - divider-height: 0 - ) - ); - - @media (min-width: 576px) { - flex-direction: row-reverse; - - .mat-mdc-tab-header { - background-color: rgba(var(--palette-foreground-base), 0.02); - padding: 2rem 0; - width: 14rem; - - .mat-mdc-tab-links { - flex-direction: column; - - .mat-mdc-tab-link { - justify-content: flex-start; - } - } - } - } - } - } } .svgMap-tooltip { diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.scss b/libs/ui/src/lib/page-tabs/page-tabs.component.scss index c7bb7d24d..50ed2fb87 100644 --- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss +++ b/libs/ui/src/lib/page-tabs/page-tabs.component.scss @@ -1,5 +1,46 @@ +@use '@angular/material' as mat; + :host { display: flex; flex-direction: column; + height: calc(100svh - var(--mat-toolbar-standard-height)); width: 100%; + + @include mat.tabs-overrides( + ( + divider-height: 0 + ) + ); + + .fab-container { + @media (max-width: 575.98px) { + bottom: 5rem; + } + } + + ::ng-deep { + .mat-mdc-tab-nav-panel { + padding: 2rem 0; + } + } + + @media (min-width: 576px) { + flex-direction: row-reverse; + + ::ng-deep { + .mat-mdc-tab-header { + background-color: rgba(var(--palette-foreground-base), 0.02); + padding: 2rem 0; + width: 14rem; + + .mat-mdc-tab-links { + flex-direction: column; + + .mat-mdc-tab-link { + justify-content: flex-start; + } + } + } + } + } }