diff --git a/src/elements/core/styles/lists.scss b/src/elements/core/styles/lists.scss
index 1bd81299288..4e61bee88a1 100644
--- a/src/elements/core/styles/lists.scss
+++ b/src/elements/core/styles/lists.scss
@@ -8,3 +8,7 @@
.sbb-step-list {
@include lists.step-list;
}
+
+.sbb-checkup-list {
+ @include lists.checkup-list;
+}
diff --git a/src/elements/core/styles/mixins/lists.scss b/src/elements/core/styles/mixins/lists.scss
index c775b2c4bd9..bce2e86b16d 100644
--- a/src/elements/core/styles/mixins/lists.scss
+++ b/src/elements/core/styles/mixins/lists.scss
@@ -76,80 +76,76 @@
}
}
-@mixin step-list {
- --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(34)};
- --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
- --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
- --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+@mixin description-list {
+ // Support both top level usage (& is empty / falsy)
+ // and applied to a selector usage.
+ #{if(&, '&:where(dl)', 'dl')} {
+ @include typo.text-s--regular;
+
+ margin: 0;
+ padding: 0;
+ display: grid;
+
+ // Ensure that description is always attached to the label
+ grid-template-columns: auto minmax(20%, 1fr);
+ gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
+ color: var(--sbb-color-iron);
+
+ :is(dt, dd) {
+ margin: 0;
+ padding: 0;
+ }
+ }
+}
+
+@mixin base-marker-list {
+ --sbb-list-marker-dimensions: #{functions.px-to-rem-build(34)};
+ --sbb-list-marker-padding-inline: var(--sbb-spacing-responsive-xxs);
+ --sbb-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
// 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(
+ --sbb-list-text-to-marker-block-offset: calc(
0.5 *
(
- var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
+ var(--sbb-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
var(--sbb-text-font-size)
)
);
- --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
-
- &:where(.sbb-text-s) {
- --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
- }
-
- &:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
- --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
- }
&:where(.sbb-text-xl) {
@include mediaqueries.mq($from: medium) {
- --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(41)};
+ --sbb-list-marker-dimensions: #{functions.px-to-rem-build(41)};
}
}
list-style: none;
margin: 0;
padding: 0;
- counter-reset: steps;
/* stylelint-disable-next-line no-descending-specificity */
> li {
position: relative;
- counter-increment: steps;
- background-color: var(--sbb-color-milk);
- border-radius: var(--sbb-border-radius-4x);
- padding-block: calc(
- var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
- )
- var(--sbb-step-list-padding-block);
padding-inline: calc(
- var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) +
- var(--sbb-step-list-marker-to-text-gap)
+ var(--sbb-list-marker-padding-inline) + var(--sbb-list-marker-dimensions) +
+ var(--sbb-list-marker-to-text-gap)
)
- var(--sbb-step-list-padding-inline);
- min-height: calc(
- var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)
- );
+ var(--sbb-list-marker-padding-inline);
+ min-height: var(--sbb-list-marker-dimensions);
&::before {
@include typo.text-xxs--bold;
- content: counter(steps);
position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- height: var(--sbb-step-list-marker-dimensions);
- width: var(--sbb-step-list-marker-dimensions);
- margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
- inset-inline-start: var(--sbb-step-list-padding-inline);
- border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+ height: var(--sbb-list-marker-dimensions);
+ width: var(--sbb-list-marker-dimensions);
+ margin-block-start: calc(-1 * var(--sbb-list-text-to-marker-block-offset));
+ inset-inline-start: var(--sbb-list-marker-padding-inline);
border-radius: 50%;
- color: var(--sbb-color-charcoal);
}
+ li {
- margin-block-start: var(--sbb-step-list-vertical-gap);
+ margin-block-start: var(--sbb-list-marker-vertical-gap);
}
p {
@@ -163,24 +159,63 @@
}
}
-@mixin description-list {
- // Support both top level usage (& is empty / falsy)
- // and applied to a selector usage.
- #{if(&, '&:where(dl)', 'dl')} {
- @include typo.text-s--regular;
+// checkup-list mixin extending the base-step-list
+@mixin checkup-list {
+ @include base-marker-list;
+
+ --sbb-checkup-list-marker-icon: url('https://icons.app.sbb.ch/icons/circle-tick-medium.svg');
+ --sbb-checkup-list-marker-icon-color: var(--sbb-color-black);
+ --sbb-list-marker-vertical-gap: var(--sbb-spacing-fixed-2x);
+
+ > li::before {
+ content: '';
+ background-color: var(--sbb-checkup-list-marker-icon-color);
+ mask-image: var(--sbb-checkup-list-marker-icon);
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: 100%;
+ }
+}
- margin: 0;
- padding: 0;
- display: grid;
+// step-list mixin extending the base-step-list
+@mixin step-list {
+ @include base-marker-list;
- // Ensure that description is always attached to the label
- grid-template-columns: auto minmax(20%, 1fr);
- gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
- color: var(--sbb-color-iron);
+ --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+ --sbb-list-marker-vertical-gap: var(--sbb-spacing-fixed-1x);
- :is(dt, dd) {
- margin: 0;
- padding: 0;
+ &:where(.sbb-text-s) {
+ --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
+ }
+
+ &:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
+ --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
+ }
+
+ counter-reset: steps;
+
+ > li {
+ counter-increment: steps;
+ background-color: var(--sbb-color-milk);
+ border-radius: var(--sbb-border-radius-4x);
+ padding-block: calc(
+ var(--sbb-step-list-padding-block) + var(--sbb-list-text-to-marker-block-offset)
+ )
+ var(--sbb-step-list-padding-block);
+ padding-inline: calc(
+ var(--sbb-list-marker-padding-inline) + var(--sbb-list-marker-dimensions) +
+ var(--sbb-list-marker-to-text-gap)
+ )
+ var(--sbb-list-marker-padding-inline);
+ min-height: calc(var(--sbb-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block));
+
+ &::before {
+ content: counter(steps);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+ color: var(--sbb-color-charcoal);
}
}
}
diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts
index 71f1f2d3344..62203142a04 100644
--- a/src/storybook/styles/list/list.stories.ts
+++ b/src/storybook/styles/list/list.stories.ts
@@ -66,6 +66,43 @@ const StepsTemplate = (): TemplateResult => html`
)}
`;
+const CheckupTemplate = (): TemplateResult => html`
+ ${['xs', 's', 'm', 'l', 'xl'].map(
+ (textSize) => html`
+