diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss index 15163dae512..2beeaba5f7a 100644 --- a/packages/components/src/components/header/header.scss +++ b/packages/components/src/components/header/header.scss @@ -10,7 +10,7 @@ display: flex; flex-direction: column; position: relative; - min-block-size: component.$default-mobile-header-height; + min-block-size: component.$min-mobile-header-height; border-block-end: variables.$db-border-height-3xs solid colors.$db-current-color-border; @@ -105,7 +105,7 @@ &::before { position: inherit; - block-size: 100%; + block-size: variables.$db-sizing-md; margin-inline-start: variables.$db-spacing-fixed-lg; } } @@ -141,7 +141,7 @@ &::before { margin-inline: variables.$db-spacing-fixed-xs; position: inherit; - block-size: 100%; + block-size: variables.$db-sizing-md; } } @@ -229,7 +229,7 @@ } /* Only for Mobile */ -.db-header-drawer-navigation > .db-header-meta-navigation { +.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) { display: inherit; } diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index 7278650e0f6..48d41e91b39 100644 --- a/packages/components/src/components/navigation-item/navigation-item.scss +++ b/packages/components/src/components/navigation-item/navigation-item.scss @@ -161,7 +161,7 @@ overflow-y: auto; // additional #{$db-spacing-fixed-3xs} for border inset-block: calc( - #{component.$default-mobile-header-height} + #{variables.$db-spacing-fixed-3xs} + #{component.$min-mobile-header-height} + #{variables.$db-spacing-fixed-3xs} ) calc( #{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 + diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss index 573d751eef9..78641865d34 100644 --- a/packages/components/src/styles/_component.scss +++ b/packages/components/src/styles/_component.scss @@ -3,9 +3,8 @@ @use "@db-ui/foundations/build/scss/colors"; @use "@db-ui/foundations/build/scss/helpers"; -$default-mobile-header-height: var( - --db-sizing-fixed-mobile-header, - #{helpers.px-to-rem(56)} +$min-mobile-header-height: calc( + #{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs} ); $default-disabled: 0.4; diff --git a/packages/foundations/scss/default-theme.scss b/packages/foundations/scss/default-theme.scss index f18e5380ca1..bb41345d33c 100644 --- a/packages/foundations/scss/default-theme.scss +++ b/packages/foundations/scss/default-theme.scss @@ -111,7 +111,6 @@ --db-spacing-fixed-expressive-xl: 3rem; --db-spacing-fixed-expressive-2xl: 5rem; --db-spacing-fixed-expressive-3xl: 7.5rem; - --db-sizing-fixed-mobile-header: 3.5rem; --db-sizing-regular-3xl: 15rem; --db-sizing-regular-2xl: 10rem; --db-sizing-regular-xl: 6rem;