From 9cbfa036c5c72474f67b55c19e3d27d97eb37263 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Thu, 19 Dec 2024 14:19:04 +0100 Subject: [PATCH] fix: remove leading inline padding from icon list (#3311) Before, in the icon list there was an unintentional padding which this PR removes. --- src/elements/core/styles/mixins/lists.scss | 135 +++++++++++++++------ 1 file changed, 100 insertions(+), 35 deletions(-) diff --git a/src/elements/core/styles/mixins/lists.scss b/src/elements/core/styles/mixins/lists.scss index d6b3a4a83a..3306f98967 100644 --- a/src/elements/core/styles/mixins/lists.scss +++ b/src/elements/core/styles/mixins/lists.scss @@ -96,6 +96,7 @@ } } +// @deprecated Will be removed with next major version @mixin base-marker-list( $dimensions, $padding-inline, @@ -159,49 +160,84 @@ } @mixin icon-list { - @include base-marker-list( - $dimensions: '--sbb-icon-list-dimensions', - $padding-inline: '--sbb-icon-list-padding-inline', - $to-text-gap: '--sbb-icon-list-to-text-gap', - $vertical-gap: '--sbb-icon-list-vertical-gap', - $text-to-marker-block-offset: '--sbb-icon-list-text-to-marker-block-offset' + --sbb-icon-list-marker-icon: url('data:image/svg+xml,'); + --sbb-icon-list-marker-icon-color: currentcolor; + --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x); + --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small); + --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x); + + // Additional space from overall li padding to the text because text + // has to be centered to marker number. + --sbb-icon-list-text-to-marker-block-offset: calc( + 0.5 * + ( + var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) * + var(--sbb-text-font-size) + ) ); - & { - --sbb-icon-list-marker-icon: url('data:image/svg+xml,'); - --sbb-icon-list-marker-icon-color: currentcolor; - --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x); - --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small); - --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x); - } + list-style: none; + margin: 0; + padding: 0; - > li::before { - content: ''; - background-color: var(--sbb-icon-list-marker-icon-color); - mask-image: var(--sbb-icon-list-marker-icon); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 100%; + // stylelint-disable-next-line no-descending-specificity + > li { + position: relative; + padding-inline: calc(var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) 0; + min-height: var(--sbb-icon-list-dimensions); + + + li { + margin-block-start: var(--sbb-icon-list-vertical-gap); + } + + p { + margin-block: 0; + } + + // P has to be redefined to be more specific + > * + p { + margin-block-start: var(--sbb-spacing-responsive-xxxs); + } + + &::before { + content: ''; + position: absolute; + width: var(--sbb-icon-list-dimensions); + height: var(--sbb-icon-list-dimensions); + margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset)); + inset-inline-start: 0; + background-color: var(--sbb-icon-list-marker-icon-color); + mask-image: var(--sbb-icon-list-marker-icon); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 100%; + } } } @mixin step-list { - @include base-marker-list( - $dimensions: '--sbb-step-list-dimensions', - $padding-inline: '--sbb-step-list-padding-inline', - $to-text-gap: '--sbb-step-list-to-text-gap', - $vertical-gap: '--sbb-step-list-vertical-gap', - $text-to-marker-block-offset: '--sbb-step-list-text-to-marker-block-offset' + --sbb-step-list-dimensions: #{functions.px-to-rem-build(34)}; + --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs); + --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs); + --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x); + --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x); + --sbb-step-list-border-radius: var(--sbb-border-radius-4x); + + // Additional space from overall li padding to the text because text + // has to be centered to marker number. + --sbb-step-list-text-to-marker-block-offset: calc( + 0.5 * + ( + var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) * + var(--sbb-text-font-size) + ) ); - & { - --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x); - --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x); - --sbb-step-list-border-radius: var(--sbb-border-radius-4x); - - counter-reset: steps; - color: var(--sbb-color-iron); - } + list-style: none; + margin: 0; + padding: 0; + counter-reset: steps; + color: var(--sbb-color-iron); &:where(.sbb-text-s) { --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x); @@ -211,7 +247,15 @@ --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x); } + &:where(.sbb-text-xl) { + @include mediaqueries.mq($from: medium) { + --sbb-step-list-dimensions: #{functions.px-to-rem-build(41)}; + } + } + + // stylelint-disable-next-line no-descending-specificity > li { + position: relative; counter-increment: steps; background-color: var(--sbb-color-milk); padding-block: calc( @@ -226,12 +270,33 @@ min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block)); &::before { + @include typo.text-xxs--bold; + content: counter(steps); + position: absolute; display: flex; align-items: center; justify-content: center; - border: var(--sbb-border-width-1x) solid var(--sbb-color-cement); + height: var(--sbb-step-list-dimensions); + width: var(--sbb-step-list-dimensions); + margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset)); + inset-inline-start: var(--sbb-step-list-padding-inline); color: var(--sbb-color-charcoal); + border: var(--sbb-border-width-1x) solid var(--sbb-color-cement); + border-radius: 50%; + } + + + li { + margin-block-start: var(--sbb-step-list-vertical-gap); + } + + p { + margin-block: 0; + } + + // P has to be redefined to be more specific + > * + p { + margin-block-start: var(--sbb-spacing-responsive-xxxs); } &:first-of-type {