diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index 573b8a562..83fd69c91 100644 --- a/apps/client/src/styles.scss +++ b/apps/client/src/styles.scss @@ -265,16 +265,6 @@ body { } } - .page { - &.has-tabs { - @media (min-width: 576px) { - .mat-mdc-tab-header { - background-color: rgba(var(--palette-foreground-base-dark), 0.02); - } - } - } - } - .svgMap-tooltip { background: var(--dark-background); diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss index 3cec572cc..f8a194651 100644 --- a/apps/client/src/styles/theme.scss +++ b/apps/client/src/styles/theme.scss @@ -293,24 +293,6 @@ $gf-typography: ( container-shape: 4px ) ); - - .page.has-tabs { - @include mat.tabs-overrides( - ( - container-height: 3rem - ) - ); - } - } - - @media (min-width: 576px) { - .page.has-tabs { - @include mat.tabs-overrides( - ( - container-height: 2rem - ) - ); - } } @include mat.badge-overrides( @@ -436,15 +418,6 @@ $gf-typography: ( ) ); } - - .page.has-tabs { - @include mat.tabs-overrides( - ( - active-indicator-height: 0, - label-text-tracking: normal - ) - ); - } } :root { 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 50ed2fb87..bed3596bb 100644 --- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss +++ b/libs/ui/src/lib/page-tabs/page-tabs.component.scss @@ -8,7 +8,9 @@ @include mat.tabs-overrides( ( - divider-height: 0 + active-indicator-height: 0, + divider-height: 0, + label-text-tracking: normal ) ); @@ -24,9 +26,23 @@ } } + @media (max-width: 575.98px) { + @include mat.tabs-overrides( + ( + container-height: 3rem + ) + ); + } + @media (min-width: 576px) { flex-direction: row-reverse; + @include mat.tabs-overrides( + ( + container-height: 2rem + ) + ); + ::ng-deep { .mat-mdc-tab-header { background-color: rgba(var(--palette-foreground-base), 0.02); @@ -44,3 +60,11 @@ } } } + +:host-context(.theme-dark) { + @media (min-width: 576px) { + .mat-mdc-tab-header { + background-color: rgba(var(--palette-foreground-base-dark), 0.02); + } + } +}