diff --git a/src/elements/header/common/header-action.scss b/src/elements/header/common/header-action.scss index ed7d523477..0abe7fdbf5 100644 --- a/src/elements/header/common/header-action.scss +++ b/src/elements/header/common/header-action.scss @@ -72,7 +72,10 @@ text-decoration: none; min-height: var(--sbb-header-action-min-height); min-width: var(--sbb-header-action-min-width); - padding-inline: var(--sbb-header-action-padding-inline); + padding-inline: var( + --sbb-header-action-padding-inline-zero, + var(--sbb-header-action-padding-inline) + ); cursor: pointer; user-select: none; outline: none; @@ -145,7 +148,7 @@ // // Move it left by 12px in collapsed width. --sbb-header-first-item-margin-inline-start: #{sbb.px-to-rem-build(-12)}; - --sbb-header-action-padding-inline: 0; + --sbb-header-action-padding-inline-zero: 0; .sbb-header-action__text { @include sbb.screen-reader-only; diff --git a/src/elements/header/header/header.scss b/src/elements/header/header/header.scss index 734de973f6..20322ff842 100644 --- a/src/elements/header/header/header.scss +++ b/src/elements/header/header/header.scss @@ -107,21 +107,10 @@ margin-inline-start: var(--sbb-header-first-item-margin-inline-start); } -:host([size='s']) { - ::slotted(:is(sbb-header-button, sbb-header-link)) { +::slotted(:is(sbb-header-button, sbb-header-link)) { + :host([size='s']) & { --sbb-header-action-min-height: var(--sbb-size-element-xs); - } - - // The padding for header-action elements in size=s changes from `sbb-spacing-fixed-5x` to `sbb-spacing-fixed-4x`; - // however this is valid until the text is not hidden due to the `expandFrom` property, when the padding goes to 0. - // The following rule is applied in a complementary way to the rule in header-action.scss:L138 - // using the $from keyword to apply the correct pad. - @each $breakpoint, $value in sbb.$mq-breakpoints { - @include sbb.mq($from: #{$breakpoint}) { - ::slotted(:is(sbb-header-button, sbb-header-link)[expand-from='#{$breakpoint}']) { - --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x); - } - } + --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x); } }