From b4da001c39bb2124de2fd4300c73b3c64226f7ab Mon Sep 17 00:00:00 2001 From: Lukas Spirig Date: Tue, 27 Aug 2024 11:59:31 +0200 Subject: [PATCH] refactor: change all relevant CSS properties to logical properties --- .storybook/preview.ts | 33 +++++++++++++- .stylelintrc.json | 4 +- package.json | 1 + .../pearl-chain-time/pearl-chain-time.scss | 4 +- .../pearl-chain-vertical-item.scss | 15 +++---- .../pearl-chain-vertical.scss | 2 +- .../pearl-chain/pearl-chain.scss | 8 ++-- .../timetable-row/timetable-row.scss | 18 ++++---- src/elements/alert/alert/alert.scss | 8 ++-- .../autocomplete-grid-option.scss | 4 +- .../autocomplete-grid-row.scss | 2 +- .../autocomplete-base-element.scss | 2 +- .../breadcrumb-group/breadcrumb-group.scss | 4 +- src/elements/button/common/button-common.scss | 8 ++-- .../mini-button-group/mini-button-group.scss | 6 +-- src/elements/calendar/calendar.scss | 32 +++++++------- src/elements/card/card-badge/card-badge.scss | 2 +- src/elements/card/card/card.scss | 4 +- .../checkbox-group/checkbox-group.scss | 8 ++-- .../checkbox/common/checkbox-common.scss | 4 +- src/elements/clock/clock.scss | 4 +- .../container/container/container.scss | 4 +- .../container/sticky-bar/sticky-bar.scss | 6 +-- src/elements/core/styles/core.scss | 6 +-- src/elements/core/styles/mixins/a11y.scss | 4 +- src/elements/core/styles/mixins/badge.scss | 2 +- src/elements/core/styles/mixins/buttons.scss | 2 +- src/elements/core/styles/mixins/card.scss | 2 +- src/elements/core/styles/mixins/chip.scss | 2 +- src/elements/core/styles/mixins/helpers.scss | 18 ++++---- src/elements/core/styles/mixins/layout.scss | 4 +- src/elements/core/styles/mixins/lists.scss | 10 ++--- src/elements/core/styles/mixins/overlay.scss | 44 +++++++++---------- src/elements/core/styles/mixins/panel.scss | 4 +- .../styles/mixins/pearl-chain-bullet.scss | 20 ++++----- .../core/styles/mixins/scrollbar.scss | 4 +- src/elements/core/styles/mixins/table.scss | 18 ++++---- src/elements/core/styles/mixins/typo.scss | 4 +- src/elements/core/styles/normalize.scss | 4 +- .../datepicker-toggle/datepicker-toggle.scss | 2 +- src/elements/dialog/dialog/dialog.scss | 20 ++++----- src/elements/divider/divider.scss | 8 ++-- .../expansion-panel-header.scss | 8 ++-- src/elements/file-selector/file-selector.scss | 2 +- .../flip-card-summary/flip-card-summary.scss | 14 +++--- .../flip-card/flip-card/flip-card.scss | 14 +++--- src/elements/footer/footer.scss | 6 +-- src/elements/form-error/form-error.scss | 6 +-- .../form-field/form-field/form-field.scss | 24 +++++----- src/elements/header/common/header-action.scss | 10 ++--- src/elements/header/header/header.scss | 12 ++--- src/elements/icon/icon.scss | 4 +- src/elements/image/image.scss | 10 ++--- .../journey-header/journey-header.scss | 4 +- .../lead-container/lead-container.scss | 4 +- src/elements/link/common/block-link.scss | 4 +- src/elements/link/common/link.scss | 2 +- .../loading-indicator/loading-indicator.scss | 36 ++++++++------- src/elements/logo/logo.scss | 12 ++--- src/elements/map-container/map-container.scss | 8 ++-- src/elements/menu/common/menu-action.scss | 16 ++++--- src/elements/menu/menu/menu.scss | 28 +++++++----- src/elements/message/message.scss | 2 +- .../navigation/common/navigation-action.scss | 2 +- .../navigation-marker/navigation-marker.scss | 2 +- .../navigation-section.scss | 12 ++--- .../navigation/navigation/navigation.scss | 12 ++--- src/elements/notification/notification.scss | 22 +++++----- .../optgroup/optgroup-base-element.scss | 2 +- src/elements/option/option/option.scss | 4 +- src/elements/overlay/overlay.scss | 12 ++--- .../popover-trigger/popover-trigger.scss | 4 +- src/elements/popover/popover/popover.scss | 18 +++++--- .../common/radio-button-common.scss | 4 +- .../radio-button-group.scss | 6 +-- src/elements/select/select.scss | 2 +- .../selection-expansion-panel.scss | 2 +- src/elements/signet/signet.scss | 10 ++--- src/elements/skiplink-list/skiplink-list.scss | 4 +- src/elements/slider/slider.scss | 22 +++++----- .../stepper/step-label/step-label.scss | 8 ++-- src/elements/stepper/step/step.scss | 12 ++--- src/elements/stepper/stepper/stepper.scss | 18 ++++---- .../table/table-wrapper/table-wrapper.scss | 4 +- src/elements/tabs/tab-group/tab-group.scss | 6 +-- src/elements/tabs/tab-label/tab-label.scss | 10 ++--- src/elements/tag/tag-group/tag-group.scss | 2 +- src/elements/tag/tag/tag.scss | 8 ++-- src/elements/teaser-hero/teaser-hero.scss | 2 +- .../common/teaser-product-common.scss | 10 ++--- src/elements/teaser/teaser.scss | 8 ++-- src/elements/toast/toast.scss | 6 +-- src/elements/toggle-check/toggle-check.scss | 14 +++--- .../toggle/toggle-option/toggle-option.scss | 8 ++-- src/elements/toggle/toggle/toggle.scss | 14 +++--- .../train-blocked-passage.scss | 17 +++---- .../train-formation/train-formation.scss | 18 +++++--- .../train/train-wagon/train-wagon.scss | 14 +++--- src/elements/train/train/train.scss | 41 ++++++++++------- .../visual-checkbox/visual-checkbox.scss | 8 ++-- src/storybook/pages/home/home.scss | 35 ++++++++------- src/storybook/styles/layout/layout.scss | 2 +- .../styles/scrollbar/scrollbar-internal.scss | 6 +-- .../test-case/image-diff/image-diff.scss | 10 ++--- .../src/components/test-case/test-case.scss | 6 +-- yarn.lock | 5 +++ 106 files changed, 542 insertions(+), 477 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 02f4696a20..8505641522 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -27,6 +27,27 @@ const withBackgroundDecorator = makeDecorator({ }, }); +const withDirectionDecorator = makeDecorator({ + name: 'withDirection', + parameterName: 'direction', + skipIfNoParametersOrOptions: false, + wrapper: (getStory, context, { parameters }) => { + const direction = context.globals.direction as string; + const directionFactory = parameters as (context: StoryContext) => string; + + const rootElement = (context.canvasElement as unknown as HTMLElement).closest('html')!; + + // If no background function is set, remove background color. + if (!direction && !directionFactory) { + rootElement.removeAttribute('dir'); + } else { + rootElement.setAttribute('dir', directionFactory?.(context) ?? direction); + } + + return getStory(context); + }, +}); + const getViewportName = (key: string): string => key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase(); @@ -78,9 +99,19 @@ const parameters: Parameters = { }; const preview: Preview = { - decorators: [withBackgroundDecorator], + decorators: [withBackgroundDecorator, withDirectionDecorator], parameters, tags: ['autodocs'], + globalTypes: { + direction: { + description: 'Change direction', + defaultValue: 'ltr', + toolbar: { + icon: 'transfer', + items: ['ltr', 'rtl'], + }, + }, + }, }; export default preview; diff --git a/.stylelintrc.json b/.stylelintrc.json index 2da38741c4..3c4acdf41d 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,5 +1,6 @@ { "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"], + "plugins": ["stylelint-use-logical-spec"], "ignoreFiles": ["dist/**/*", "tools/generate-component/**/*.scss"], "rules": { "custom-property-pattern": "^_?(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$", @@ -49,6 +50,7 @@ ], "number-max-precision": 12, "value-no-vendor-prefix": [true, { "ignoreValues": ["box"] }], - "no-duplicate-selectors": null + "no-duplicate-selectors": null, + "liberty/use-logical-spec": true } } diff --git a/package.json b/package.json index 3b44f8cfe9..0bde5b49a5 100644 --- a/package.json +++ b/package.json @@ -137,6 +137,7 @@ "stylelint-config-prettier-scss": "1.0.0", "stylelint-config-standard-scss": "13.1.0", "stylelint-scss": "6.5.1", + "stylelint-use-logical-spec": "5.0.1", "ts-lit-plugin": "2.0.2", "typescript": "5.5.4", "typescript-eslint": "8.4.0", diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss index c640e6159d..bce57feeef 100644 --- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss +++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss @@ -22,7 +22,7 @@ flex-wrap: wrap; justify-content: space-between; align-items: center; - height: var(--sbb-pearl-chain-time-height); + block-size: var(--sbb-pearl-chain-time-height); } .sbb-pearl-chain__time-walktime, @@ -43,7 +43,7 @@ } .sbb-pearl-chain__time-walktime-prime-symbol { - float: right; + float: inline-end; } .sbb-pearl-chain__time-transfer { diff --git a/src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss b/src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss index 900b0d6e1e..29f8cbad2f 100644 --- a/src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss +++ b/src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss @@ -32,11 +32,11 @@ slot[name='right'], } slot[name='right'] { - width: var(--sbb-pearl-chain-vertical-right-item-width); + inline-size: var(--sbb-pearl-chain-vertical-right-item-width); } .sbb-pearl-chain-vertical-item__column--middle { - min-width: var( + min-inline-size: var( --sbb-pearl-chain-vertical-middle-item-min-width, --sbb-pearl-chain-vertical-middle-min-width ); @@ -61,19 +61,18 @@ slot[name='right']::slotted(*) { .sbb-pearl-chain-vertical-item__line { position: absolute; - bottom: 0; + inset-block: calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2) 0; inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start); transform: var(--sbb-pearl-chain-vertical-item-transform); - width: var(--sbb-border-width-2x); - inset-block-start: calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2); + inline-size: var(--sbb-border-width-2x); &::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0; - height: var(--sbb-pearl-chain-vertical-item-leg-status); - width: var(--sbb-pearl-chain-vertical-item-border-width); + block-size: var(--sbb-pearl-chain-vertical-item-leg-status); + inline-size: var(--sbb-pearl-chain-vertical-item-border-width); background-color: var(--sbb-pearl-chain-vertical-item-color-past); @include sbb.if-forced-colors { @@ -98,7 +97,7 @@ slot[name='right']::slotted(*) { } .sbb-pearl-chain-vertical-item__line--thin { - width: var(--sbb-pearl-chain-vertical-item-border-width-thin); + inline-size: var(--sbb-pearl-chain-vertical-item-border-width-thin); } .sbb-pearl-chain-vertical-item__line--default { diff --git a/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss b/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss index 476ab27f70..5efba338ff 100644 --- a/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss +++ b/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss @@ -11,5 +11,5 @@ .sbb-pearl-chain-vertical { display: table; - width: var(--sbb-pearl-chain-vertical-width); + inline-size: var(--sbb-pearl-chain-vertical-width); } diff --git a/src/elements-experimental/pearl-chain/pearl-chain.scss b/src/elements-experimental/pearl-chain/pearl-chain.scss index 1410edd64b..99345aa869 100644 --- a/src/elements-experimental/pearl-chain/pearl-chain.scss +++ b/src/elements-experimental/pearl-chain/pearl-chain.scss @@ -36,7 +36,7 @@ justify-content: space-between; flex-wrap: nowrap; color: var(--sbb-pearl-chain-color); - width: 100%; + inline-size: 100%; padding-block: calc( (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2 ); @@ -69,10 +69,10 @@ flex-shrink: 0; flex-grow: 0; position: relative; - height: var(--sbb-pearl-chain-height); + block-size: var(--sbb-pearl-chain-height); border-inline-end: var(--sbb-pearl-chain-spacing-small) solid Canvas; background-color: currentcolor; - width: var(--sbb-pearl-chain-leg-width); + inline-size: var(--sbb-pearl-chain-leg-width); display: flex; align-items: center; @@ -199,7 +199,7 @@ background-color: var(--sbb-pearl-chain-color-past); // --sbb-pearl-chain-leg-status: defined in .ts file - width: var(--sbb-pearl-chain-leg-status); + inline-size: var(--sbb-pearl-chain-leg-status); } .sbb-pearl-chain__position { diff --git a/src/elements-experimental/timetable-row/timetable-row.scss b/src/elements-experimental/timetable-row/timetable-row.scss index d3bed41590..bfd6786c98 100644 --- a/src/elements-experimental/timetable-row/timetable-row.scss +++ b/src/elements-experimental/timetable-row/timetable-row.scss @@ -37,7 +37,7 @@ } .sbb-timetable__row--quay-type { - float: left; + float: inline-start; } // resets lists @@ -138,12 +138,12 @@ li { } .sbb-loading__row { - width: 100%; + inline-size: 100%; border-radius: var(--sbb-border-radius-1x); - height: var(--sbb-timetable-row-height); + block-size: var(--sbb-timetable-row-height); @include sbb.mq($from: medium) { - height: #{sbb.px-to-rem-build(28)}; + block-size: #{sbb.px-to-rem-build(28)}; } @include sbb.if-forced-colors { @@ -158,12 +158,12 @@ li { } .sbb-loading__row:first-of-type { - height: var(--sbb-timetable-row-height-header); - width: 50%; + block-size: var(--sbb-timetable-row-height-header); + inline-size: 50%; } .sbb-loading__row:last-of-type { - height: var(--sbb-timetable-row-height-footer); + block-size: var(--sbb-timetable-row-height-footer); } .sbb-loading__badge { @@ -171,8 +171,8 @@ li { padding-inline-end: var(--sbb-spacing-fixed-6x); border-end-start-radius: var(--sbb-border-radius-4x); transform: skew(16deg, 0deg); - width: #{sbb.px-to-rem-build(115)}; - height: #{sbb.px-to-rem-build(20)}; + inline-size: #{sbb.px-to-rem-build(115)}; + block-size: #{sbb.px-to-rem-build(20)}; } @keyframes skeleton-pulse { diff --git a/src/elements/alert/alert/alert.scss b/src/elements/alert/alert/alert.scss index c90208b039..5a9a0d2fe8 100644 --- a/src/elements/alert/alert/alert.scss +++ b/src/elements/alert/alert/alert.scss @@ -101,7 +101,7 @@ $open-anim-opacity-to: 1; grid-template-columns: 1fr auto; align-items: center; gap: var(--sbb-alert-gap); - min-width: fit-content; + min-inline-size: fit-content; padding: var(--sbb-alert-padding); overflow: hidden; color: var(--sbb-alert-color); @@ -118,7 +118,7 @@ $open-anim-opacity-to: 1; display: flex; align-items: start; padding-block: var(--sbb-spacing-fixed-1x); - min-width: var(--sbb-alert-icon-size); + min-inline-size: var(--sbb-alert-icon-size); --sbb-icon-svg-width: var(--sbb-alert-icon-size); --sbb-icon-svg-height: var(--sbb-alert-icon-size); @@ -151,7 +151,7 @@ $open-anim-opacity-to: 1; display: flex; justify-content: flex-end; align-items: center; - height: 100%; + block-size: 100%; } .sbb-alert__close-button { @@ -165,7 +165,7 @@ $open-anim-opacity-to: 1; @include sbb.mq($from: small) { display: block; - height: calc(100% - (var(--sbb-spacing-fixed-1x) * 2)); + block-size: calc(100% - (var(--sbb-spacing-fixed-1x) * 2)); } } diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss index acb964f983..3e5efba089 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss @@ -59,8 +59,8 @@ .sbb-option__icon { display: flex; - min-width: var(--sbb-size-icon-ui-small); - min-height: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); + min-block-size: var(--sbb-size-icon-ui-small); color: var(--sbb-option-icon-color); :host(:not([data-slot-names~='icon'], [icon-name])) & { diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss index c6a77c7f8c..79949d5f57 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss +++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss @@ -48,7 +48,7 @@ ::slotted(sbb-autocomplete-grid-option) { flex: 1 1 auto; - margin-right: calc(-1 * var(--sbb-spacing-fixed-2x)); + margin-inline-end: calc(-1 * var(--sbb-spacing-fixed-2x)); } .sbb-autocomplete-grid-row { diff --git a/src/elements/autocomplete/autocomplete-base-element.scss b/src/elements/autocomplete/autocomplete-base-element.scss index 7c24cb8c52..3ba891f93a 100644 --- a/src/elements/autocomplete/autocomplete-base-element.scss +++ b/src/elements/autocomplete/autocomplete-base-element.scss @@ -137,7 +137,7 @@ @include sbb.if-forced-colors { border: var(--sbb-border-width-1x) solid CanvasText; - border-top: none; + border-block-start: none; } } diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.scss b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.scss index eb38a38793..24c4a50ed0 100644 --- a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.scss +++ b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.scss @@ -49,8 +49,8 @@ // line height and letter-spacing needed to match squares drawn in Figma. line-height: 0; letter-spacing: 0.01em; - width: var(--sbb-size-icon-ui-small); - height: var(--sbb-size-icon-ui-small); + inline-size: var(--sbb-size-icon-ui-small); + block-size: var(--sbb-size-icon-ui-small); border: var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color); border-radius: 50%; diff --git a/src/elements/button/common/button-common.scss b/src/elements/button/common/button-common.scss index 2b36dba67e..42e6e408fd 100644 --- a/src/elements/button/common/button-common.scss +++ b/src/elements/button/common/button-common.scss @@ -130,17 +130,17 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= // Reset for link variant text-decoration: none; - width: 100%; + inline-size: 100%; position: relative; display: flex; gap: var(--sbb-button-gap); align-items: center; justify-content: center; - text-align: left; + text-align: start; transition-duration: var(--sbb-button-transition-duration); transition-timing-function: var(--sbb-button-transition-easing-function); transition-property: color; - min-height: var(--sbb-button-min-height); + min-block-size: var(--sbb-button-min-height); border-radius: var(--sbb-button-border-radius); // The padding block value is only a minimal padding to preserve a padding if the content becomes larger than intended. @@ -190,7 +190,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= } :host(#{$icon-only}) & { - width: var(--sbb-button-min-height); + inline-size: var(--sbb-button-min-height); justify-content: center; } diff --git a/src/elements/button/mini-button-group/mini-button-group.scss b/src/elements/button/mini-button-group/mini-button-group.scss index ed234a28e2..adf9bab065 100644 --- a/src/elements/button/mini-button-group/mini-button-group.scss +++ b/src/elements/button/mini-button-group/mini-button-group.scss @@ -45,7 +45,7 @@ padding-block: var(--sbb-spacing-fixed-1x); padding-inline: var(--sbb-spacing-fixed-1x); - height: var(--sbb-size-icon-ui-small); + block-size: var(--sbb-size-icon-ui-small); } .sbb-mini-button-group { @@ -55,8 +55,8 @@ flex-wrap: nowrap; align-items: center; gap: var(--sbb-mini-button-group-gap); - width: fit-content; - min-height: var(--sbb-mini-button-group-min-height); + inline-size: fit-content; + min-block-size: var(--sbb-mini-button-group-min-height); background-color: var(--sbb-mini-button-group-background); border: var(--sbb-mini-button-group-border); border-radius: var(--sbb-border-radius-infinity); diff --git a/src/elements/calendar/calendar.scss b/src/elements/calendar/calendar.scss index a71b66a954..0bd2d619ef 100644 --- a/src/elements/calendar/calendar.scss +++ b/src/elements/calendar/calendar.scss @@ -7,7 +7,7 @@ display: block; // We add width definition to host, to make overwriting easy for consumers. - width: max-content; + inline-size: max-content; --sbb-calendar-cell-size: #{sbb.px-to-rem-build(40)}; --sbb-calendar-hover-shift: #{sbb.px-to-rem-build(1)}; @@ -46,13 +46,13 @@ } .sbb-calendar__wrapper { - width: 100%; + inline-size: 100%; display: block; transition-duration: var(--sbb-calendar-cell-transition-duration); } .sbb-calendar__controls { - width: 100%; + inline-size: 100%; display: inline-flex; align-items: center; gap: var(--sbb-spacing-fixed-2x); @@ -60,7 +60,7 @@ } .sbb-calendar__controls-month { - width: 100%; + inline-size: 100%; display: flex; gap: var(--sbb-calendar-tables-gap); } @@ -77,7 +77,7 @@ display: flex; align-items: center; margin: auto; - height: var(--sbb-calendar-control-view-change-height); + block-size: var(--sbb-calendar-control-view-change-height); text-transform: capitalize; cursor: pointer; padding-inline: var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x); @@ -148,9 +148,9 @@ } .sbb-calendar__table { - width: 100%; + inline-size: 100%; border-collapse: collapse; - height: max-content; + block-size: max-content; animation: { name: show; @@ -169,7 +169,7 @@ :host(:not([data-wide])) & { // Due to a Safari iOS rendering bug we need to define min-width as well. // Otherwise, after orientation change, there is a wrong width if placed in an sbb-dialog. - min-width: 100%; + min-inline-size: 100%; } } @@ -177,7 +177,7 @@ @include sbb.text-xs--regular; color: var(--sbb-calendar-header-color); - width: var(--sbb-calendar-cell-size); + inline-size: var(--sbb-calendar-cell-size); padding: 0; padding-block-end: var(--sbb-spacing-fixed-4x); @@ -195,7 +195,7 @@ @include sbb.button-reset; @include sbb.text-s--regular; - height: var(--sbb-calendar-cell-size); + block-size: var(--sbb-calendar-cell-size); color: var(--sbb-calendar-cell-color); cursor: pointer; position: relative; @@ -250,7 +250,7 @@ .sbb-calendar__day { border-radius: 50%; - width: var(--sbb-calendar-cell-size); + inline-size: var(--sbb-calendar-cell-size); &::before { border-radius: 50%; @@ -258,7 +258,7 @@ } .sbb-calendar__pill { - width: var(--sbb-calendar-wide-cell-size); + inline-size: var(--sbb-calendar-wide-cell-size); border-radius: var(--sbb-border-radius-infinity); &::before { @@ -268,12 +268,12 @@ .sbb-calendar__crossed-out::after { content: ''; - height: var(--sbb-calendar-cell-disabled-height); - width: var(--sbb-calendar-cell-disabled-width); + block-size: var(--sbb-calendar-cell-disabled-height); + inline-size: var(--sbb-calendar-cell-disabled-width); position: absolute; background-color: var(--sbb-calendar-cell-disabled-color); - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%) rotate(-45deg); } diff --git a/src/elements/card/card-badge/card-badge.scss b/src/elements/card/card-badge/card-badge.scss index ab6714a590..c723accb24 100644 --- a/src/elements/card/card-badge/card-badge.scss +++ b/src/elements/card/card-badge/card-badge.scss @@ -24,7 +24,7 @@ .sbb-card-badge-wrapper { display: flex; position: relative; - height: fit-content; + block-size: fit-content; justify-content: end; // Divider line to content diff --git a/src/elements/card/card/card.scss b/src/elements/card/card/card.scss index 1ac3036cba..7c42afd58f 100644 --- a/src/elements/card/card/card.scss +++ b/src/elements/card/card/card.scss @@ -89,8 +89,8 @@ } .sbb-card { - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; @include sbb.card; } diff --git a/src/elements/checkbox/checkbox-group/checkbox-group.scss b/src/elements/checkbox/checkbox-group/checkbox-group.scss index 4363e6089f..002a74557e 100644 --- a/src/elements/checkbox/checkbox-group/checkbox-group.scss +++ b/src/elements/checkbox/checkbox-group/checkbox-group.scss @@ -25,7 +25,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; --sbb-checkbox-group-checkbox-width: 100%; ::slotted(sbb-checkbox-panel) { - width: 100%; + inline-size: 100%; } } @@ -49,7 +49,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; // We need to unset the 100% width of the vertical mode if it starts to be horizontal ::slotted(sbb-checkbox-panel) { - width: initial; + inline-size: initial; } } @@ -64,7 +64,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; flex-direction: var(--sbb-checkbox-group-orientation); gap: var(--sbb-checkbox-group-gap); align-items: flex-start; - width: var(--sbb-checkbox-group-width); + inline-size: var(--sbb-checkbox-group-width); } .sbb-checkbox-group__error { @@ -77,5 +77,5 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; } ::slotted(sbb-checkbox) { - width: var(--sbb-checkbox-group-checkbox-width); + inline-size: var(--sbb-checkbox-group-checkbox-width); } diff --git a/src/elements/checkbox/common/checkbox-common.scss b/src/elements/checkbox/common/checkbox-common.scss index 85ddeed432..44cdacd1da 100644 --- a/src/elements/checkbox/common/checkbox-common.scss +++ b/src/elements/checkbox/common/checkbox-common.scss @@ -26,7 +26,7 @@ position: relative; display: block; - width: 100%; + inline-size: 100%; cursor: var(--sbb-checkbox-cursor); user-select: none; -webkit-tap-highlight-color: transparent; @@ -58,5 +58,5 @@ .sbb-checkbox__aligner { display: flex; align-items: center; - height: calc(1em * var(--sbb-typo-line-height-body-text)); + block-size: calc(1em * var(--sbb-typo-line-height-body-text)); } diff --git a/src/elements/clock/clock.scss b/src/elements/clock/clock.scss index beb04093dc..066db9b4fa 100644 --- a/src/elements/clock/clock.scss +++ b/src/elements/clock/clock.scss @@ -16,8 +16,8 @@ .sbb-clock { position: relative; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; aspect-ratio: 1 / 1; overflow: hidden; contain: content; diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index 27b441d9eb..50f14933dc 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -78,6 +78,6 @@ ::slotted(img[slot='image']) { object-fit: cover; - height: 100%; - width: 100%; + block-size: 100%; + inline-size: 100%; } diff --git a/src/elements/container/sticky-bar/sticky-bar.scss b/src/elements/container/sticky-bar/sticky-bar.scss index 163776d605..a860813df9 100644 --- a/src/elements/container/sticky-bar/sticky-bar.scss +++ b/src/elements/container/sticky-bar/sticky-bar.scss @@ -127,14 +127,14 @@ $intersector-overlapping: 1px; .sbb-sticky-bar__intersector { // In order to make the intersection observer work properly on windows the intersector needs to have a defined height - height: $intersector-overlapping; + block-size: $intersector-overlapping; &::after { content: ''; display: block; position: absolute; - width: 100%; - height: calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + $intersector-overlapping); + inline-size: 100%; + block-size: calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + $intersector-overlapping); background-color: transparent; pointer-events: none; transition: background-color var(--sbb-sticky-bar-fade-out-animation-duration) diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss index f1c9bb6630..cd9111af25 100644 --- a/src/elements/core/styles/core.scss +++ b/src/elements/core/styles/core.scss @@ -106,7 +106,7 @@ sbb-form-field { // Ensure stable breadcrumb height during hydrating sbb-breadcrumb-group:not(:defined) { display: block; - height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs)); + block-size: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs)); overflow: hidden; } @@ -124,9 +124,9 @@ sbb-title + p { } input[data-sbb-time-input] { - max-width: var(--sbb-time-input-max-width); + max-inline-size: var(--sbb-time-input-max-width); sbb-form-field[size='s'] & { - max-width: var(--sbb-time-input-s-max-width); + max-inline-size: var(--sbb-time-input-s-max-width); } } diff --git a/src/elements/core/styles/mixins/a11y.scss b/src/elements/core/styles/mixins/a11y.scss index b966a0b692..fb9286e60a 100644 --- a/src/elements/core/styles/mixins/a11y.scss +++ b/src/elements/core/styles/mixins/a11y.scss @@ -27,13 +27,13 @@ @mixin screen-reader-only { border: 0; clip: rect(0 0 0 0); - height: 1px; + block-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; - width: 1px; + inline-size: 1px; } @mixin scroll-margin-block-start { diff --git a/src/elements/core/styles/mixins/badge.scss b/src/elements/core/styles/mixins/badge.scss index 630fbab6ea..03f73f2376 100644 --- a/src/elements/core/styles/mixins/badge.scss +++ b/src/elements/core/styles/mixins/badge.scss @@ -10,5 +10,5 @@ border-radius: var(--sbb-border-radius-infinity); background-color: var(--sbb-color-red); color: var(--sbb-color-white); - min-width: fit-content; + min-inline-size: fit-content; } diff --git a/src/elements/core/styles/mixins/buttons.scss b/src/elements/core/styles/mixins/buttons.scss index 96f3d2dcf9..14d16597bf 100644 --- a/src/elements/core/styles/mixins/buttons.scss +++ b/src/elements/core/styles/mixins/buttons.scss @@ -95,7 +95,7 @@ #{$host-selector} { display: inline-block; -webkit-tap-highlight-color: transparent; - height: fit-content; + block-size: fit-content; // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. diff --git a/src/elements/core/styles/mixins/card.scss b/src/elements/core/styles/mixins/card.scss index d36e177e70..3e460cd0b6 100644 --- a/src/elements/core/styles/mixins/card.scss +++ b/src/elements/core/styles/mixins/card.scss @@ -170,5 +170,5 @@ @mixin card--wrapper { display: block; - height: 100%; + block-size: 100%; } diff --git a/src/elements/core/styles/mixins/chip.scss b/src/elements/core/styles/mixins/chip.scss index 5d34b1169e..5535cf5dad 100644 --- a/src/elements/core/styles/mixins/chip.scss +++ b/src/elements/core/styles/mixins/chip.scss @@ -48,7 +48,7 @@ display: inline-flex; align-items: center; justify-content: center; - height: calc( + block-size: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-padding-block) * 2 ); diff --git a/src/elements/core/styles/mixins/helpers.scss b/src/elements/core/styles/mixins/helpers.scss index 2bc9d87679..0dceb7cb0e 100644 --- a/src/elements/core/styles/mixins/helpers.scss +++ b/src/elements/core/styles/mixins/helpers.scss @@ -6,20 +6,20 @@ @mixin absolute-center-x-y { position: absolute; - top: 50%; - left: 50%; + inset-block-start: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); } @mixin absolute-center-x { position: absolute; - left: 50%; + inset-inline-start: 50%; transform: translateX(-50%); } @mixin absolute-center-y { position: absolute; - top: 50%; + inset-block-start: 50%; transform: translateY(-50%); } @@ -28,8 +28,8 @@ &::before { content: '\200B'; user-select: none; - width: 0; - height: 0; + inline-size: 0; + block-size: 0; } } @@ -40,7 +40,7 @@ content: '\a0'; display: block; visibility: hidden; - height: 0; + block-size: 0; overflow: hidden; } } @@ -50,8 +50,8 @@ opacity: 0; inset: 0; margin: 0; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; cursor: inherit; // Puts the element behind the parent while keeping it visible so that diff --git a/src/elements/core/styles/mixins/layout.scss b/src/elements/core/styles/mixins/layout.scss index ce19ed02f2..b86c311828 100644 --- a/src/elements/core/styles/mixins/layout.scss +++ b/src/elements/core/styles/mixins/layout.scss @@ -6,11 +6,11 @@ // If using page-spacing in flex context, // we would like to ensure it matches the width of the parent (should be full width). - width: 100%; + inline-size: 100%; @include mediaqueries.mq($from: ultra) { // Subtract padding to get real max-width - max-width: calc( + max-inline-size: calc( var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive) ); } diff --git a/src/elements/core/styles/mixins/lists.scss b/src/elements/core/styles/mixins/lists.scss index 9ef0869aec..8d41c2d3fc 100644 --- a/src/elements/core/styles/mixins/lists.scss +++ b/src/elements/core/styles/mixins/lists.scss @@ -61,8 +61,8 @@ content: '\2022'; // • position: absolute; display: flex; - height: 1em; - width: 1em; + block-size: 1em; + inline-size: 1em; align-items: center; justify-content: center; inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em)); @@ -127,7 +127,7 @@ var(--sbb-step-list-marker-to-text-gap) ) var(--sbb-step-list-padding-inline); - min-height: calc( + min-block-size: calc( var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block) ); @@ -149,8 +149,8 @@ display: flex; align-items: center; justify-content: center; - height: var(--sbb-step-list-marker-dimensions); - width: var(--sbb-step-list-marker-dimensions); + block-size: var(--sbb-step-list-marker-dimensions); + inline-size: 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); diff --git a/src/elements/core/styles/mixins/overlay.scss b/src/elements/core/styles/mixins/overlay.scss index 279a14f570..875f5275df 100644 --- a/src/elements/core/styles/mixins/overlay.scss +++ b/src/elements/core/styles/mixins/overlay.scss @@ -56,10 +56,10 @@ visibility: var(--sbb-options-panel-visibility); opacity: var(--sbb-options-panel-gap-fix-opacity); background-color: transparent; - width: var(--sbb-options-panel-width); - height: var(--sbb-options-panel-border-radius); - top: var(--sbb-options-panel-gap-fix-top); - left: var(--sbb-options-panel-position-x); + inline-size: var(--sbb-options-panel-width); + block-size: var(--sbb-options-panel-border-radius); + inset-block-start: var(--sbb-options-panel-gap-fix-top); + inset-inline-start: var(--sbb-options-panel-position-x); transform: var(--sbb-options-panel-gap-fix-transform); transition: opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function); @@ -73,9 +73,9 @@ background-color: transparent; border: none; border-radius: var(--sbb-options-panel-border-radius); - top: var(--sbb-options-panel-position-y); - left: var(--sbb-options-panel-position-x); - width: var(--sbb-options-panel-width); + inset-block-start: var(--sbb-options-panel-position-y); + inset-inline-start: var(--sbb-options-panel-position-x); + inline-size: var(--sbb-options-panel-width); transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function); @@ -84,8 +84,8 @@ content: ''; display: none; position: relative; - width: 100%; - height: var(--sbb-options-panel-origin-height); + inline-size: 100%; + block-size: var(--sbb-options-panel-origin-height); background-color: transparent; border-radius: var(--sbb-options-panel-border-radius); pointer-events: none; @@ -100,8 +100,8 @@ padding-block: var(--sbb-spacing-fixed-3x); padding-inline: 0; border-radius: var(--sbb-options-panel-options-border-radius); - max-height: var(--sbb-options-panel-max-height); - min-height: var(--sbb-options-panel-min-height); + max-block-size: var(--sbb-options-panel-max-height); + min-block-size: var(--sbb-options-panel-min-height); pointer-events: all; overflow-y: auto; animation: { @@ -120,8 +120,8 @@ .sbb-gap-fix-wrapper { position: relative; overflow: hidden; - width: $radius; - height: $radius; + inline-size: $radius; + block-size: $radius; background-color: transparent; } @@ -129,26 +129,26 @@ position: absolute; border-radius: 50%; border: calc($radius / 2) solid $color; - width: calc($radius * 3); - height: calc($radius * 3); - bottom: calc(($radius / 2) * -1); + inline-size: calc($radius * 3); + block-size: calc($radius * 3); + inset-block-end: calc(($radius / 2) * -1); } .sbb-gap-fix-corner#left { - left: calc(($radius / 2) * -1); + inset-inline-start: calc(($radius / 2) * -1); :host([dir='rtl']) & { - right: calc(($radius / 2) * -1); - left: unset; + inset-inline-start: unset; + inset-inline-end: calc(($radius / 2) * -1); } } .sbb-gap-fix-corner#right { - right: calc(($radius / 2) * -1); + inset-inline-end: calc(($radius / 2) * -1); :host([dir='rtl']) & { - left: calc(($radius / 2) * -1); - right: unset; + inset-inline-start: calc(($radius / 2) * -1); + inset-inline-end: unset; } } } diff --git a/src/elements/core/styles/mixins/panel.scss b/src/elements/core/styles/mixins/panel.scss index bd36ff34e2..2c0a9b39f7 100644 --- a/src/elements/core/styles/mixins/panel.scss +++ b/src/elements/core/styles/mixins/panel.scss @@ -46,8 +46,8 @@ flex-direction: column; justify-content: center; gap: var(--sbb-panel-gap); - width: var(--sbb-panel-width); - height: var(--sbb-panel-height); + inline-size: var(--sbb-panel-width); + block-size: var(--sbb-panel-height); padding-block: var(--sbb-panel-triangle-height); padding-inline: var(--sbb-panel-padding-inline); clip-path: polygon( diff --git a/src/elements/core/styles/mixins/pearl-chain-bullet.scss b/src/elements/core/styles/mixins/pearl-chain-bullet.scss index fdc7b67c94..0344e7d1b7 100644 --- a/src/elements/core/styles/mixins/pearl-chain-bullet.scss +++ b/src/elements/core/styles/mixins/pearl-chain-bullet.scss @@ -32,17 +32,17 @@ } @mixin pearl-chain-bullet-start-end { - min-height: var(--sbb-pearl-chain-bullet-size-start-end); - min-width: var(--sbb-pearl-chain-bullet-size-start-end); - height: var(--sbb-pearl-chain-bullet-size-start-end); - width: var(--sbb-pearl-chain-bullet-size-start-end); + min-block-size: var(--sbb-pearl-chain-bullet-size-start-end); + min-inline-size: var(--sbb-pearl-chain-bullet-size-start-end); + block-size: var(--sbb-pearl-chain-bullet-size-start-end); + inline-size: var(--sbb-pearl-chain-bullet-size-start-end); } @mixin pearl-chain-bullet-stop { - min-height: var(--sbb-pearl-chain-bullet-size-stop); - min-width: var(--sbb-pearl-chain-bullet-size-stop); - height: var(--sbb-pearl-chain-bullet-size-stop); - width: var(--sbb-pearl-chain-bullet-size-stop); + min-block-size: var(--sbb-pearl-chain-bullet-size-stop); + min-inline-size: var(--sbb-pearl-chain-bullet-size-stop); + block-size: var(--sbb-pearl-chain-bullet-size-stop); + inline-size: var(--sbb-pearl-chain-bullet-size-stop); border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor; background: Canvas; } @@ -78,8 +78,8 @@ transform: translate(-50%, -50%) rotate(45deg); border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas; background: var(--sbb-pearl-chain-bullet-color-disruption); - height: var(--sbb-pearl-chain-bullet-crossed-height); - width: var(--sbb-pearl-chain-bullet-crossed-width); + block-size: var(--sbb-pearl-chain-bullet-crossed-height); + inline-size: var(--sbb-pearl-chain-bullet-crossed-width); @include a11y.if-forced-colors { background: Highlight; diff --git a/src/elements/core/styles/mixins/scrollbar.scss b/src/elements/core/styles/mixins/scrollbar.scss index 06e22fa0a6..4c3dd0d628 100644 --- a/src/elements/core/styles/mixins/scrollbar.scss +++ b/src/elements/core/styles/mixins/scrollbar.scss @@ -5,8 +5,8 @@ &::-webkit-scrollbar { // Total width - width: var(--sbb-scrollbar-width); - height: var(--sbb-scrollbar-width); + inline-size: var(--sbb-scrollbar-width); + block-size: var(--sbb-scrollbar-width); background-color: var(--sbb-scrollbar-track-color, transparent); } diff --git a/src/elements/core/styles/mixins/table.scss b/src/elements/core/styles/mixins/table.scss index fe4c6decda..06d54d6df6 100644 --- a/src/elements/core/styles/mixins/table.scss +++ b/src/elements/core/styles/mixins/table.scss @@ -53,36 +53,36 @@ @mixin table-header-cell { @include typo.text-xs--bold; - border-bottom: var(--sbb-table-border); - border-right: var(--sbb-table-border); + border-block-end: var(--sbb-table-border); + border-inline-end: var(--sbb-table-border); padding-block: var(--sbb-table-header-padding-block); padding-inline: var(--sbb-table-header-padding-inline); - text-align: left; + text-align: start; // To avoid double border &:last-of-type { - border-right: none; + border-inline-end: none; } } @mixin table-data-row { // To avoid double borders &:first-of-type td { - border-top: none; + border-block-start: none; } } @mixin table-data-cell { @include typo.text-s--regular; - border-top: var(--sbb-table-border); - border-right: var(--sbb-table-border); + border-block-start: var(--sbb-table-border); + border-inline-end: var(--sbb-table-border); padding-block: var(--sbb-table-cell-padding-block); padding-inline: var(--sbb-table-cell-padding-inline); // To avoid double border &:last-of-type { - border-right: none; + border-inline-end: none; } } @@ -92,7 +92,7 @@ // Defaults are needed for cases where the caption is used outside a table color: var(--sbb-table-caption-color, var(--sbb-color-granite)); margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x)); - text-align: left; + text-align: start; } @mixin table--striped { diff --git a/src/elements/core/styles/mixins/typo.scss b/src/elements/core/styles/mixins/typo.scss index 45207fba16..d43ab0b56e 100644 --- a/src/elements/core/styles/mixins/typo.scss +++ b/src/elements/core/styles/mixins/typo.scss @@ -227,11 +227,11 @@ @mixin sub { @extend %sub-sup; - bottom: -0.36em; + inset-block-end: -0.36em; } @mixin sup { @extend %sub-sup; - top: -0.5em; + inset-block-start: -0.5em; } diff --git a/src/elements/core/styles/normalize.scss b/src/elements/core/styles/normalize.scss index 6079491980..4a8db3f51a 100644 --- a/src/elements/core/styles/normalize.scss +++ b/src/elements/core/styles/normalize.scss @@ -39,7 +39,7 @@ Grouping content */ hr { - height: 0; /* 1 */ + block-size: 0; /* 1 */ color: inherit; /* 2 */ } @@ -171,7 +171,7 @@ Correct the cursor style of increment and decrement buttons in Safari. ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; + block-size: auto; } /** diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.scss b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.scss index e88fd88325..ccb8299a7d 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.scss +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.scss @@ -14,7 +14,7 @@ sbb-popover-trigger { color: var(--sbb-datepicker-control-color); // Enables taking full height in order to shift the calendar position to the border bottom of the form field. - height: unset; + block-size: unset; } sbb-icon { diff --git a/src/elements/dialog/dialog/dialog.scss b/src/elements/dialog/dialog/dialog.scss index 1e48171696..206bcb771b 100644 --- a/src/elements/dialog/dialog/dialog.scss +++ b/src/elements/dialog/dialog/dialog.scss @@ -115,10 +115,10 @@ margin: auto; padding: 0; border: none; - width: var(--sbb-dialog-width); - height: var(--sbb-dialog-height); - max-width: var(--sbb-dialog-max-width); - max-height: var(--sbb-dialog-max-height); + inline-size: var(--sbb-dialog-width); + block-size: var(--sbb-dialog-height); + max-inline-size: var(--sbb-dialog-max-width); + max-block-size: var(--sbb-dialog-max-height); overflow: auto; color: var(--sbb-dialog-color); background-color: var(--sbb-dialog-background-color); @@ -145,17 +145,17 @@ @include sbb.mq($from: medium) { border-radius: var(--sbb-dialog-border-radius); overflow: hidden; - height: fit-content; + block-size: fit-content; } } .sbb-dialog__wrapper { display: flex; flex-direction: column; - width: var(--sbb-dialog-width); - height: var(--sbb-dialog-height); - max-width: var(--sbb-dialog-max-width); - max-height: var(--sbb-dialog-max-height); + inline-size: var(--sbb-dialog-width); + block-size: var(--sbb-dialog-height); + max-inline-size: var(--sbb-dialog-max-width); + max-block-size: var(--sbb-dialog-max-height); outline: none; position: fixed; word-break: break-word; @@ -163,7 +163,7 @@ @include sbb.mq($from: medium) { position: sticky; inset-block-start: 0; - height: auto; + block-size: auto; } } diff --git a/src/elements/divider/divider.scss b/src/elements/divider/divider.scss index cdece11213..5e0ec0fd65 100644 --- a/src/elements/divider/divider.scss +++ b/src/elements/divider/divider.scss @@ -11,7 +11,7 @@ } :host([orientation='vertical']) { - height: 100%; + block-size: 100%; } :host([negative]) { @@ -20,11 +20,11 @@ .sbb-divider { :host([orientation='horizontal']) & { - border-top: var(--sbb-divider-border-width) solid var(--sbb-divider-color); + border-block-start: var(--sbb-divider-border-width) solid var(--sbb-divider-color); } :host([orientation='vertical']) & { - height: 100%; - border-left: var(--sbb-divider-border-width) solid var(--sbb-divider-color); + block-size: 100%; + border-inline-start: var(--sbb-divider-border-width) solid var(--sbb-divider-color); } } diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss index 39b459ea00..f3dab916b0 100644 --- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss +++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss @@ -46,9 +46,9 @@ justify-content: space-between; align-items: center; gap: var(--sbb-expansion-panel-header-gap); - width: 100%; - padding: var(--sbb-expansion-panel-header-padding-block) - var(--sbb-expansion-panel-header-padding-inline); + inline-size: 100%; + padding-block: var(--sbb-expansion-panel-header-padding-block); + padding-inline: var(--sbb-expansion-panel-header-padding-inline); text-align: start; cursor: var(--sbb-expansion-panel-header-cursor); color: var(--sbb-expansion-panel-header-text-color); @@ -62,7 +62,7 @@ } .sbb-expansion-panel-header__icon { - width: var(--sbb-expansion-panel-icon-size); + inline-size: var(--sbb-expansion-panel-icon-size); --sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size); --sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size); diff --git a/src/elements/file-selector/file-selector.scss b/src/elements/file-selector/file-selector.scss index e6189633bb..16d14d5237 100644 --- a/src/elements/file-selector/file-selector.scss +++ b/src/elements/file-selector/file-selector.scss @@ -15,7 +15,7 @@ --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing); display: block; - width: #{sbb.px-to-rem-build(320)}; + inline-size: #{sbb.px-to-rem-build(320)}; } :host([disabled]) { diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss index bc4d3d1a14..69745f1c58 100644 --- a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss +++ b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss @@ -19,8 +19,8 @@ overflow: hidden; grid-template-columns: 1fr; grid-template-rows: auto 1fr; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; transition: all var(--sbb-flip-card-summary-transition-duration) ease-out; transition-delay: var(--sbb-flip-card-summary-transition-delay); @@ -61,7 +61,7 @@ } .sbb-flip-card-summary--image-wrapper { - max-height: var(--sbb-flip-card-min-height); + max-block-size: var(--sbb-flip-card-min-height); grid-area: 2 / 1 / 3 / 2; :host([image-alignment='after']) & { @@ -77,14 +77,14 @@ ::slotted(img) { object-fit: cover; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } ::slotted(sbb-image) { --sbb-image-border-radius: 0; --sbb-image-aspect-ratio: auto; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss index 432b02e863..cda28145c2 100644 --- a/src/elements/flip-card/flip-card/flip-card.scss +++ b/src/elements/flip-card/flip-card/flip-card.scss @@ -68,11 +68,11 @@ .sbb-flip-card { position: relative; display: flex; - height: 100%; + block-size: 100%; flex-flow: wrap; flex-direction: column; gap: var(--sbb-spacing-responsive-xs); - min-height: var(--sbb-flip-card-min-height); + min-block-size: var(--sbb-flip-card-min-height); background-color: var(--sbb-flip-card-background-color); border-radius: var(--sbb-flip-card-border-radius); transition: var(--sbb-flip-card-summary-transition-duration) ease-out; @@ -105,8 +105,8 @@ inset-inline-start: var(--sbb-spacing-responsive-s); inset-block-end: var(--sbb-spacing-responsive-s); background-color: var(--sbb-color-midnight); - width: var(--sbb-size-element-xs); - height: var(--sbb-size-element-xs); + inline-size: var(--sbb-size-element-xs); + block-size: var(--sbb-size-element-xs); // Use this large border radius to improve the appearance of the expanding dark background. border-radius: #{sbb.px-to-rem-build(256)}; @@ -116,8 +116,8 @@ opacity: 1; inset-inline-start: 0; inset-block-end: 0; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; border-radius: var(--sbb-flip-card-border-radius); transition-duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x)); } @@ -144,7 +144,7 @@ position: absolute; inset: 0; - width: 100%; + inline-size: 100%; border-radius: var(--sbb-flip-card-border-radius); cursor: pointer; diff --git a/src/elements/footer/footer.scss b/src/elements/footer/footer.scss index 9f5870118d..2a965a4cf4 100644 --- a/src/elements/footer/footer.scss +++ b/src/elements/footer/footer.scss @@ -71,7 +71,7 @@ } @include sbb.mq($from: wide) { - max-width: var(--sbb-footer-content-max-width); + max-inline-size: var(--sbb-footer-content-max-width); margin-inline: auto; grid-template-columns: repeat(4, 1fr); } @@ -82,7 +82,7 @@ } ::slotted(sbb-clock) { - width: var(--sbb-footer-clock-width); + inline-size: var(--sbb-footer-clock-width); grid-row: 1; @include sbb.mq($from: small) { @@ -104,7 +104,7 @@ @include sbb.mq($from: small) { grid-row: 3; grid-column: 1 / 4; - width: 100%; + inline-size: 100%; } @include sbb.mq($from: wide) { diff --git a/src/elements/form-error/form-error.scss b/src/elements/form-error/form-error.scss index 4e3313f8ca..9015bad27f 100644 --- a/src/elements/form-error/form-error.scss +++ b/src/elements/form-error/form-error.scss @@ -15,7 +15,7 @@ display: flex; align-items: flex-start; color: var(--sbb-form-error-color); - min-height: var(--sbb-form-error-height); + min-block-size: var(--sbb-form-error-height); @include sbb.text-xs--regular; @@ -31,7 +31,7 @@ .form-error__icon { display: flex; align-items: center; - height: var(--sbb-form-error-height); + block-size: var(--sbb-form-error-height); margin-inline-end: var(--sbb-spacing-fixed-1x); } @@ -43,5 +43,5 @@ .form-error__icon-svg { stroke: currentcolor; - height: var(--sbb-form-error-height); + block-size: var(--sbb-form-error-height); } diff --git a/src/elements/form-field/form-field/form-field.scss b/src/elements/form-field/form-field/form-field.scss index 62c6dd5f8b..9c25d902f6 100644 --- a/src/elements/form-field/form-field/form-field.scss +++ b/src/elements/form-field/form-field/form-field.scss @@ -63,8 +63,8 @@ } :host(:where(:not([width='collapse']))) { - min-width: #{sbb.px-to-rem-build(150)}; - width: min(#{sbb.px-to-rem-build(300)}, 100%); + min-inline-size: #{sbb.px-to-rem-build(150)}; + inline-size: min(#{sbb.px-to-rem-build(300)}, 100%); } :host([negative]) { @@ -221,8 +221,8 @@ gap: var(--sbb-form-field-gap); padding-inline: var(--sbb-form-field-padding-inline); border-radius: var(--sbb-form-field-border-radius); - min-height: var(--sbb-form-field-min-height); - max-height: var(--sbb-form-field-max-height); + min-block-size: var(--sbb-form-field-min-height); + max-block-size: var(--sbb-form-field-max-height); background-color: var(--sbb-form-field-background-color); position: relative; @@ -270,7 +270,7 @@ ::slotted(*[slot='prefix']), ::slotted(*[slot='suffix']) { display: flex; - min-width: var(--sbb-icon-svg-width); + min-inline-size: var(--sbb-icon-svg-width); margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2); } @@ -282,7 +282,7 @@ // As the calendar should be shown below the form field border, we have to stretch the toggle's height. ::slotted(sbb-datepicker-toggle) { - height: calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2); + block-size: calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2); } @include sbb.if-forced-colors { @@ -308,12 +308,12 @@ margin-block-start: var(--sbb-form-field-margin-block-start); // Prevents overflowing parent - min-width: 0; + min-inline-size: 0; } .sbb-form-field__label-spacer { display: flex; - height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text)); + block-size: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text)); // Moves label down and input up to meet positioning requirements margin-block-end: var(--sbb-form-field-spacer-margin-block-end); @@ -332,7 +332,7 @@ .sbb-form-field__label { display: flex; - max-width: 100%; + max-inline-size: 100%; cursor: default; position: absolute; inset-block-start: 0; @@ -413,7 +413,7 @@ // which appears in normalize css of several frameworks. outline: none !important; overflow: var(--sbb-form-field-overflow); - width: 100%; + inline-size: 100%; box-sizing: border-box; color: var(--sbb-form-field-text-color); @@ -467,7 +467,7 @@ // White-space break needed for Firefox white-space: break-spaces; overflow-y: auto; - min-height: calc((var(--sbb-typo-line-height-body-text) * 1em)); + min-block-size: calc((var(--sbb-typo-line-height-body-text) * 1em)); } :host([size='l']) & { @@ -481,7 +481,7 @@ .sbb-form-field__error { display: flex; - min-height: var(--sbb-form-field-error-min-height); + min-block-size: var(--sbb-form-field-error-min-height); margin-block-start: var( --sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start) diff --git a/src/elements/header/common/header-action.scss b/src/elements/header/common/header-action.scss index ed7d523477..8bb670d709 100644 --- a/src/elements/header/common/header-action.scss +++ b/src/elements/header/common/header-action.scss @@ -70,8 +70,8 @@ justify-content: center; color: var(--sbb-header-action-color); text-decoration: none; - min-height: var(--sbb-header-action-min-height); - min-width: var(--sbb-header-action-min-width); + min-block-size: var(--sbb-header-action-min-height); + min-inline-size: var(--sbb-header-action-min-width); padding-inline: var(--sbb-header-action-padding-inline); cursor: pointer; user-select: none; @@ -113,7 +113,7 @@ transition: transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing); will-change: transform; - max-width: 100%; + max-inline-size: 100%; } .sbb-header-action__icon { @@ -121,8 +121,8 @@ --sbb-icon-svg-stroke-color: currentcolor; --sbb-icon-svg-stroke-width: 1px; - min-width: var(--sbb-size-icon-ui-small); - min-height: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); + min-block-size: var(--sbb-size-icon-ui-small); line-height: 0; } diff --git a/src/elements/header/header/header.scss b/src/elements/header/header/header.scss index 7a4cccf205..e207a65151 100644 --- a/src/elements/header/header/header.scss +++ b/src/elements/header/header/header.scss @@ -7,7 +7,7 @@ display: block; // Setting the height here reserves the space for the header which will else be lost with fixed position. - height: var(--sbb-header-height); + block-size: var(--sbb-header-height); // Overwrites logo in slotted and default case --sbb-logo-height: #{sbb.px-to-rem-build(16)}; @@ -54,7 +54,8 @@ .sbb-header { position: var(--sbb-header-position); - inset: 0 var(--sbb-header-inset-inline-end) auto 0; + inset-block: 0 auto; + inset-inline: 0 var(--sbb-header-inset-inline-end); background: var(--sbb-color-white); z-index: var(--sbb-header-z-index, 10); transform: var(--sbb-header-transform); @@ -82,7 +83,7 @@ display: flex; align-items: center; justify-content: flex-start; - height: var(--sbb-header-height); + block-size: var(--sbb-header-height); :host(:not([expanded])) & { @include sbb.page-spacing; @@ -111,7 +112,7 @@ ::slotted(.sbb-header-shrinkable) { flex-shrink: 1; - min-width: 0; + min-inline-size: 0; } ::slotted(.sbb-header-spacer) { @@ -134,7 +135,8 @@ content: ''; display: block; position: absolute; - inset: var(--sbb-spacing-fixed-3x) 0; + inset-block: var(--sbb-spacing-fixed-3x); + inset-inline: 0; } // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. diff --git a/src/elements/icon/icon.scss b/src/elements/icon/icon.scss index ade5bf970a..fbcc68c749 100644 --- a/src/elements/icon/icon.scss +++ b/src/elements/icon/icon.scss @@ -26,8 +26,8 @@ } svg { - width: var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension)); - height: var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension)); + inline-size: var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension)); + block-size: var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension)); stroke: var(--sbb-icon-svg-stroke-color); stroke-width: var(--sbb-icon-svg-stroke-width); diff --git a/src/elements/image/image.scss b/src/elements/image/image.scss index 6d96e68738..058cb06a1e 100644 --- a/src/elements/image/image.scss +++ b/src/elements/image/image.scss @@ -80,7 +80,7 @@ flex-direction: column; gap: var(--sbb-spacing-fixed-4x); margin: 0; - height: 100%; + block-size: 100%; } .sbb-image__img { @@ -103,8 +103,8 @@ // To support transparent images, we need also to fade out the blurred lqip image. // This is not perfect in the case of a non transparent image, but does not look that bad. :is(.sbb-image__img, .sbb-image__blurred) { - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; object-fit: cover; object-position: var(--sbb-image-object-position); transition: opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing); @@ -114,8 +114,8 @@ display: flex; position: relative; overflow: hidden; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; aspect-ratio: var(--sbb-image-aspect-ratio); border-radius: var(--sbb-image-border-radius); } diff --git a/src/elements/journey-header/journey-header.scss b/src/elements/journey-header/journey-header.scss index f03a52ef53..11e3f793f9 100644 --- a/src/elements/journey-header/journey-header.scss +++ b/src/elements/journey-header/journey-header.scss @@ -20,7 +20,7 @@ sbb-title { sbb-icon { // Avoid layout shift after loading the icon - min-width: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); } .sbb-journey-header { @@ -28,7 +28,7 @@ sbb-icon { flex-wrap: wrap; align-items: center; column-gap: var(--sbb-journey-header-gap); - width: fit-content; + inline-size: fit-content; &[dir='rtl'] { sbb-icon { diff --git a/src/elements/lead-container/lead-container.scss b/src/elements/lead-container/lead-container.scss index b08d33c3e0..da52c12e18 100644 --- a/src/elements/lead-container/lead-container.scss +++ b/src/elements/lead-container/lead-container.scss @@ -34,7 +34,7 @@ ::slotted(:is(img[slot='image'], picture[slot='image'])) { display: block; - width: 100%; + inline-size: 100%; object-fit: cover; aspect-ratio: var(--sbb-lead-container-image-ratio); border-radius: var(--sbb-lead-container-image-border-radius); @@ -62,7 +62,7 @@ .sbb-lead-container-image { @include sbb.mq($from: ultra) { - max-width: calc( + max-inline-size: calc( var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive) ); margin-inline: auto; diff --git a/src/elements/link/common/block-link.scss b/src/elements/link/common/block-link.scss index 3a67bd65ad..c7efb7d314 100644 --- a/src/elements/link/common/block-link.scss +++ b/src/elements/link/common/block-link.scss @@ -30,8 +30,8 @@ .sbb-link__icon { position: relative; - height: calc(var(--sbb-typo-line-height-body-text) * 1em); - width: var(--sbb-size-icon-ui-small); + block-size: calc(var(--sbb-typo-line-height-body-text) * 1em); + inline-size: var(--sbb-size-icon-ui-small); flex: 0 0 auto; align-self: start; diff --git a/src/elements/link/common/link.scss b/src/elements/link/common/link.scss index 9299427d62..fb438eaa4c 100644 --- a/src/elements/link/common/link.scss +++ b/src/elements/link/common/link.scss @@ -20,7 +20,7 @@ display: flex; align-items: center; word-break: break-word; - width: 100%; + inline-size: 100%; cursor: pointer; padding: var(--sbb-link-padding, 0); outline: none; diff --git a/src/elements/loading-indicator/loading-indicator.scss b/src/elements/loading-indicator/loading-indicator.scss index 79f319f6f0..11c73ab4bf 100644 --- a/src/elements/loading-indicator/loading-indicator.scss +++ b/src/elements/loading-indicator/loading-indicator.scss @@ -40,8 +40,8 @@ :host([variant='circle']) .sbb-loading-indicator { display: inline-flex; - height: auto; - width: auto; + block-size: auto; + inline-size: auto; padding-inline: var(--sbb-loading-indicator-padding); padding-block: var(--sbb-loading-indicator-padding); vertical-align: middle; @@ -49,12 +49,13 @@ } :host([variant='circle']) .sbb-loading-indicator__animated-element { - width: 1.25em; - height: 1.25em; + inline-size: 1.25em; + block-size: 1.25em; display: inline-block; color: transparent; position: relative; - margin: 0 auto; + margin-block: 0; + margin-inline: auto; overflow: hidden; border-radius: 50%; background: var(--sbb-loading-indicator-circle-background); @@ -69,13 +70,13 @@ &::after { content: ''; - width: var(--sbb-loading-indicator-circle-animated-width); - height: var(--sbb-loading-indicator-circle-animated-height); + inline-size: var(--sbb-loading-indicator-circle-animated-width); + block-size: var(--sbb-loading-indicator-circle-animated-height); background: var(--sbb-loading-indicator-color); border-radius: var(--sbb-loading-indicator-circle-animated-border-radius); position: absolute; - top: 50%; - right: 0; + inset-block-start: 50%; + inset-inline-end: 0; transform: translateY(-50%); overflow: hidden; margin: auto; @@ -143,18 +144,19 @@ :host([variant='window']) .sbb-loading-indicator { display: flex; - height: var(--sbb-loading-indicator-window-height); + block-size: var(--sbb-loading-indicator-window-height); padding-block-start: var(--sbb-loading-indicator-window-padding-block-start); } :host([variant='window']) .sbb-loading-indicator__animated-element { - margin: 0 auto; + margin-block: 0; + margin-inline: auto; transform-origin: center; transform: translate3d(-3em, 0, 0); backface-visibility: hidden; transform-style: preserve-3d; - width: var(--sbb-loading-indicator-window-element-width); - height: var(--sbb-loading-indicator-window-element-height); + inline-size: var(--sbb-loading-indicator-window-element-width); + block-size: var(--sbb-loading-indicator-window-element-height); perspective: var(--sbb-loading-indicator-window-element-perspective); } @@ -178,9 +180,9 @@ background: var(--sbb-loading-indicator-color); backface-visibility: hidden; outline: var(--sbb-border-width-1x) solid rgb(0 0 0 / 0%); - width: var(--sbb-loading-indicator-window-last-span-width); - height: var(--sbb-loading-indicator-window-last-span-height); - margin-right: var(--sbb-loading-indicator-window-last-span-margin); + inline-size: var(--sbb-loading-indicator-window-last-span-width); + block-size: var(--sbb-loading-indicator-window-last-span-height); + margin-inline-end: var(--sbb-loading-indicator-window-last-span-margin); transform: var(--sbb-loading-indicator-window-last-span-transform); &:nth-child(1) { @@ -204,7 +206,7 @@ } &:last-child { - margin-right: 0; + margin-inline-end: 0; } } diff --git a/src/elements/logo/logo.scss b/src/elements/logo/logo.scss index 9f0dd7a574..7a6082c765 100644 --- a/src/elements/logo/logo.scss +++ b/src/elements/logo/logo.scss @@ -5,7 +5,7 @@ :host { display: block; - height: var(--sbb-logo-height); + block-size: var(--sbb-logo-height); --sbb-logo-panel-color: var(--sbb-color-red); --sbb-logo-panel-stroke-color: var(--sbb-color-red); @@ -44,18 +44,18 @@ justify-content: center; background-color: var(--sbb-logo-background-color); aspect-ratio: var(--sbb-logo-aspect-ratio); - height: 100%; - width: 100%; + block-size: 100%; + inline-size: 100%; } .sbb-logo .sbb-logo__svg-container { display: flex; - height: var(--sbb-logo-svg-container-height); + block-size: var(--sbb-logo-svg-container-height); } .sbb-logo svg { - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } #sbb-logo__word-mark { diff --git a/src/elements/map-container/map-container.scss b/src/elements/map-container/map-container.scss index 2a7aa46b0d..4bb37f94a3 100644 --- a/src/elements/map-container/map-container.scss +++ b/src/elements/map-container/map-container.scss @@ -38,13 +38,13 @@ grid-template-columns: max(var(--sbb-map-container-sidebar-width)) calc( 100% - var(--sbb-map-container-sidebar-width) ); - height: calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height))); + block-size: calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height))); } } .sbb-map-container__sidebar-button { position: fixed; - left: 50%; + inset-inline-start: 50%; inset-block-end: var(--sbb-spacing-fixed-5x); visibility: hidden; opacity: 0; @@ -79,7 +79,7 @@ & { grid-column: 1 / 3; grid-row: 2 / 3; - width: 100%; + inline-size: 100%; overflow: hidden auto; position: relative; border-start-end-radius: var(--sbb-map-container-border-radius); @@ -106,7 +106,7 @@ // We use "to: medium" to avoid resetting the styles @include sbb.mq($to: medium) { - height: var(--sbb-map-container-map-height); + block-size: var(--sbb-map-container-map-height); } @include sbb.mq($from: medium) { diff --git a/src/elements/menu/common/menu-action.scss b/src/elements/menu/common/menu-action.scss index 40f0fac485..d71f89a469 100644 --- a/src/elements/menu/common/menu-action.scss +++ b/src/elements/menu/common/menu-action.scss @@ -47,9 +47,10 @@ :is(.sbb-menu-button, .sbb-menu-link) { text-decoration: none; display: block; - width: 100%; + inline-size: 100%; color: var(--sbb-menu-action-color); - padding: var(--sbb-spacing-fixed-1x) var(--sbb-menu-action-outer-horizontal-padding); + padding-block: var(--sbb-spacing-fixed-1x); + padding-inline: var(--sbb-menu-action-outer-horizontal-padding); cursor: var(--sbb-menu-action-cursor); outline: none; } @@ -60,7 +61,8 @@ display: flex; align-items: center; gap: var(--sbb-menu-action-gap); - padding: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x); + padding-block: var(--sbb-spacing-fixed-1x); + padding-inline: var(--sbb-spacing-fixed-2x); border-radius: var(--sbb-menu-action-border-radius); user-select: none; -webkit-tap-highlight-color: transparent; @@ -83,8 +85,8 @@ .sbb-menu-action__icon { display: flex; - min-width: var(--sbb-size-icon-ui-small); - min-height: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); + min-block-size: var(--sbb-size-icon-ui-small); } .sbb-menu-action__label { @@ -99,8 +101,8 @@ @include sbb.badge; margin-inline-start: auto; - width: var(--sbb-spacing-fixed-4x); - max-height: var(--sbb-spacing-fixed-4x); + inline-size: var(--sbb-spacing-fixed-4x); + max-block-size: var(--sbb-spacing-fixed-4x); @include sbb.if-forced-colors { color: var(--sbb-menu-action-color); diff --git a/src/elements/menu/menu/menu.scss b/src/elements/menu/menu/menu.scss index b6bed2a035..e906677e05 100644 --- a/src/elements/menu/menu/menu.scss +++ b/src/elements/menu/menu/menu.scss @@ -70,7 +70,7 @@ position: fixed; pointer-events: none; inset: var(--sbb-menu-inset); - height: var(--sbb-menu-container-height); + block-size: var(--sbb-menu-container-height); z-index: var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index)); // Menu backdrop (only visible on mobile) @@ -80,7 +80,7 @@ pointer-events: all; position: fixed; inset: var(--sbb-menu-inset); - height: var(--sbb-menu-container-height); + block-size: var(--sbb-menu-container-height); background-color: var(--sbb-menu-backdrop-color); transition: { duration: var(--sbb-menu-animation-duration); @@ -94,8 +94,8 @@ display: none; opacity: 0; pointer-events: none; - max-width: var(--sbb-menu-max-width); - min-width: var(--sbb-menu-min-width); + max-inline-size: var(--sbb-menu-max-width); + min-inline-size: var(--sbb-menu-min-width); text-align: start; position: absolute; inset-inline-start: 0; @@ -130,18 +130,22 @@ } @include sbb.mq($from: medium) { + /* stylelint-disable liberty/use-logical-spec */ top: 0; bottom: unset; left: 0; right: unset; - max-height: fit-content; + /* stylelint-enable liberty/use-logical-spec */ + max-block-size: fit-content; border-radius: var(--sbb-menu-border-radius); :host(:not([data-state='closed'])) & { + /* stylelint-disable liberty/use-logical-spec */ top: var(--sbb-menu-position-y); left: var(--sbb-menu-position-x); - max-height: var(--sbb-menu-max-height); - min-height: var(--sbb-menu-min-height); + /* stylelint-enable liberty/use-logical-spec */ + max-block-size: var(--sbb-menu-max-height); + min-block-size: var(--sbb-menu-min-height); } } } @@ -150,7 +154,7 @@ @include sbb.scrollbar($negative: true); & { - max-height: var(--sbb-menu-max-height); + max-block-size: var(--sbb-menu-max-height); padding-block: var(--sbb-spacing-fixed-1x); overflow: auto; outline: none; @@ -160,15 +164,15 @@ &::after { content: ''; display: block; - height: var(--sbb-spacing-fixed-8x); + block-size: var(--sbb-spacing-fixed-8x); } @include sbb.mq($from: medium) { - max-height: fit-content; + max-block-size: fit-content; :host(:not([data-state='closed'])) & { - max-height: var(--sbb-menu-max-height); - min-height: var(--sbb-menu-min-height); + max-block-size: var(--sbb-menu-max-height); + min-block-size: var(--sbb-menu-min-height); } &::after { diff --git a/src/elements/message/message.scss b/src/elements/message/message.scss index 62c14cf321..7908573670 100644 --- a/src/elements/message/message.scss +++ b/src/elements/message/message.scss @@ -27,7 +27,7 @@ ::slotted([slot='image']) { margin-block: var(--sbb-message-image-margin-block); - width: 100%; + inline-size: 100%; } ::slotted([slot='subtitle']) { diff --git a/src/elements/navigation/common/navigation-action.scss b/src/elements/navigation/common/navigation-action.scss index ce387b57b1..f2044a8f42 100644 --- a/src/elements/navigation/common/navigation-action.scss +++ b/src/elements/navigation/common/navigation-action.scss @@ -57,7 +57,7 @@ sbb-icon { -webkit-tap-highlight-color: transparent; transition: color var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease; hyphens: auto; - text-align: left; + text-align: start; color: var(--sbb-navigation-action-color); outline: none; diff --git a/src/elements/navigation/navigation-marker/navigation-marker.scss b/src/elements/navigation/navigation-marker/navigation-marker.scss index e5ac08051e..f7cf681090 100644 --- a/src/elements/navigation/navigation-marker/navigation-marker.scss +++ b/src/elements/navigation/navigation-marker/navigation-marker.scss @@ -50,7 +50,7 @@ opacity: 0; inset-inline-start: var(--sbb-navigation-marker-position-x); inset-block-start: var(--sbb-navigation-marker-position-y); - width: var(--sbb-navigation-marker-width); + inline-size: var(--sbb-navigation-marker-width); border-block-start: var(--sbb-navigation-marker-border) solid var(--sbb-color-storm); margin-block: var(--sbb-navigation-marker-margin-block); transition: { diff --git a/src/elements/navigation/navigation-section/navigation-section.scss b/src/elements/navigation/navigation-section/navigation-section.scss index 5fed1907b2..a93c05e590 100644 --- a/src/elements/navigation/navigation-section/navigation-section.scss +++ b/src/elements/navigation/navigation-section/navigation-section.scss @@ -27,8 +27,8 @@ grid-column: var(--sbb-navigation-section-column); inset-inline-start: 0; inset-block-start: 0; - width: var(--sbb-navigation-section-width); - height: var(--sbb-navigation-section-height); + inline-size: var(--sbb-navigation-section-width); + block-size: var(--sbb-navigation-section-height); z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)); // Needed for backwards compatibility @@ -100,15 +100,15 @@ .sbb-navigation-section__container { pointer-events: var(--sbb-navigation-section-pointer-events); - height: var(--sbb-navigation-section-height); + block-size: var(--sbb-navigation-section-height); } .sbb-navigation-section { display: none; border: none; margin: 0; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; color: var(--sbb-color-white); background-color: transparent; padding: 0; @@ -137,7 +137,7 @@ @include sbb.scrollbar($negative: true); & { - height: 100%; + block-size: 100%; padding-block: var(--sbb-navigation-section-padding-block); outline: none; overflow-y: auto; diff --git a/src/elements/navigation/navigation/navigation.scss b/src/elements/navigation/navigation/navigation.scss index 8bb070ccd7..b28c49242d 100644 --- a/src/elements/navigation/navigation/navigation.scss +++ b/src/elements/navigation/navigation/navigation.scss @@ -131,7 +131,7 @@ @include transition(width); display: none; - width: var(--sbb-navigation-width); + inline-size: var(--sbb-navigation-width); grid-column: var(--sbb-navigation-grid-column); padding: 0; margin: 0; @@ -140,7 +140,7 @@ inset-block-start: 0; border: none; pointer-events: none; - height: var(--sbb-navigation-height); + block-size: var(--sbb-navigation-height); color: var(--sbb-color-white); background-color: var(--sbb-color-midnight); @@ -149,8 +149,8 @@ content: ''; position: absolute; - width: var(--sbb-navigation-expanded-width); - height: var(--sbb-navigation-height); + inline-size: var(--sbb-navigation-expanded-width); + block-size: var(--sbb-navigation-height); background: var(--sbb-color-midnight); } @@ -185,7 +185,7 @@ display: flex; justify-content: flex-end; position: absolute; - width: var(--sbb-navigation-expanded-width); + inline-size: var(--sbb-navigation-expanded-width); pointer-events: none; padding: var(--sbb-spacing-responsive-xs); z-index: calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1); @@ -204,7 +204,7 @@ flex-direction: column; gap: var(--sbb-spacing-responsive-xxl); position: relative; - height: var(--sbb-navigation-height); + block-size: var(--sbb-navigation-height); padding-inline: var(--sbb-navigation-padding-inline); padding-block: var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end); overflow-y: auto; diff --git a/src/elements/notification/notification.scss b/src/elements/notification/notification.scss index 22d5456bb3..27256a8cdb 100644 --- a/src/elements/notification/notification.scss +++ b/src/elements/notification/notification.scss @@ -117,20 +117,20 @@ $open-anim-height-to: calc( inset-inline-start: calc( var(--sbb-notification-base-radius) - var(--sbb-notification-border-width) ); - width: calc( + inline-size: calc( 100% - calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)) ); border: var(--sbb-notification-border); border-radius: var(--sbb-notification-border-radius); opacity: #{$open-anim-opacity-from}; - max-height: #{$open-anim-height-from}; + max-block-size: #{$open-anim-height-from}; margin: #{$open-anim-margin-from}; &::before { content: ''; position: absolute; - inset: calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) - calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1); + inset-block: calc(var(--sbb-notification-border-width) * -1); + inset-inline: calc(var(--sbb-notification-base-radius) * -1) var(--sbb-notification-base-radius); background-color: var(--sbb-notification-type-color); border: var(--sbb-notification-border); border-radius: var(--sbb-notification-base-radius); @@ -138,7 +138,7 @@ $open-anim-height-to: calc( :host(:is([data-state='opened'], [data-state='closing'])) & { opacity: #{$open-anim-opacity-to}; - max-height: #{$open-anim-height-to}; + max-block-size: #{$open-anim-height-to}; margin: #{$open-anim-margin-to}; } @@ -227,7 +227,7 @@ $open-anim-height-to: calc( display: flex; align-items: center; gap: var(--sbb-spacing-responsive-xxs); - height: 100%; + block-size: 100%; } .sbb-notification__divider { @@ -240,20 +240,20 @@ $open-anim-height-to: calc( @include sbb.mq($from: small) { display: block; - height: calc(100% - (var(--sbb-spacing-fixed-1x) * 2)); + block-size: calc(100% - (var(--sbb-spacing-fixed-1x) * 2)); } } @keyframes open { from { opacity: #{$open-anim-opacity-from}; - max-height: #{$open-anim-height-from}; + max-block-size: #{$open-anim-height-from}; margin: #{$open-anim-margin-from}; } to { opacity: #{$open-anim-opacity-to}; - max-height: #{$open-anim-height-to}; + max-block-size: #{$open-anim-height-to}; margin: #{$open-anim-margin-to}; } } @@ -272,10 +272,10 @@ $open-anim-height-to: calc( @keyframes close-height { from { - max-height: #{$open-anim-height-to}; + max-block-size: #{$open-anim-height-to}; } to { - max-height: #{$open-anim-height-from}; + max-block-size: #{$open-anim-height-from}; } } diff --git a/src/elements/option/optgroup/optgroup-base-element.scss b/src/elements/option/optgroup/optgroup-base-element.scss index f322973695..a6499c065d 100644 --- a/src/elements/option/optgroup/optgroup-base-element.scss +++ b/src/elements/option/optgroup/optgroup-base-element.scss @@ -65,5 +65,5 @@ .sbb-optgroup__icon-space { // Can be overridden by the 'preserve-icon-space' on the autocomplete display: var(--sbb-option-icon-container-display, none); - min-width: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); } diff --git a/src/elements/option/option/option.scss b/src/elements/option/option/option.scss index 9e1dbb3c1f..a1e69a263c 100644 --- a/src/elements/option/option/option.scss +++ b/src/elements/option/option/option.scss @@ -127,8 +127,8 @@ .sbb-option__icon { display: flex; - min-width: var(--sbb-size-icon-ui-small); - min-height: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); + min-block-size: var(--sbb-size-icon-ui-small); color: var(--sbb-option-icon-color); :host(:not([data-slot-names~='icon'], [icon-name])) & { diff --git a/src/elements/overlay/overlay.scss b/src/elements/overlay/overlay.scss index e193d182e2..6c6586fdcb 100644 --- a/src/elements/overlay/overlay.scss +++ b/src/elements/overlay/overlay.scss @@ -68,7 +68,7 @@ margin: auto; padding: 0; border: none; - height: var(--sbb-overlay-height); + block-size: var(--sbb-overlay-height); overflow: auto; color: var(--sbb-overlay-color); @@ -88,15 +88,15 @@ .sbb-overlay__wrapper { display: flex; flex-direction: column; - width: 100%; - height: var(--sbb-overlay-height); + inline-size: 100%; + block-size: var(--sbb-overlay-height); outline: none; position: fixed; @include sbb.mq($from: medium) { position: sticky; inset-block-start: 0; - height: auto; + block-size: auto; } } @@ -107,7 +107,7 @@ pointer-events: none; align-items: start; justify-content: space-between; - width: 100%; + inline-size: 100%; padding: var(--sbb-spacing-responsive-xs); padding-block-end: 0; z-index: 1; @@ -125,7 +125,7 @@ @include sbb.scrollbar-rules; & { - height: 100vh; + block-size: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } diff --git a/src/elements/popover/popover-trigger/popover-trigger.scss b/src/elements/popover/popover-trigger/popover-trigger.scss index f6387526f2..989542d4f1 100644 --- a/src/elements/popover/popover-trigger/popover-trigger.scss +++ b/src/elements/popover/popover-trigger/popover-trigger.scss @@ -102,6 +102,6 @@ } sbb-icon { - min-width: var(--sbb-size-icon-ui-small); - min-height: var(--sbb-size-icon-ui-small); + min-inline-size: var(--sbb-size-icon-ui-small); + min-block-size: var(--sbb-size-icon-ui-small); } diff --git a/src/elements/popover/popover/popover.scss b/src/elements/popover/popover/popover.scss index e260dcabd0..488110d728 100644 --- a/src/elements/popover/popover/popover.scss +++ b/src/elements/popover/popover/popover.scss @@ -43,10 +43,11 @@ content: ''; position: absolute; display: block; - width: var(--sbb-popover-arrow-size); - height: var(--sbb-popover-arrow-size); + inline-size: var(--sbb-popover-arrow-size); + block-size: var(--sbb-popover-arrow-size); + /* stylelint-disable-next-line liberty/use-logical-spec */ left: var(--sbb-popover-arrow-position-x); - bottom: calc(100% - calc(var(--sbb-popover-arrow-size) / 2)); + inset-block-end: calc(100% - calc(var(--sbb-popover-arrow-size) / 2)); background-color: var(--sbb-popover-background); border-radius: var(--sbb-border-radius-2x) 0; transform: rotate(45deg); @@ -66,15 +67,18 @@ display: none; position: var(--sbb-popover-position); pointer-events: all; + + /* stylelint-disable liberty/use-logical-spec */ top: var(--sbb-popover-position-y); bottom: unset; left: var(--sbb-popover-position-x); right: unset; + /* stylelint-enable liberty/use-logical-spec */ border: none; border-radius: var(--sbb-popover-border-radius); padding: 0; - max-width: var(--sbb-popover-max-width); - width: max-content; + max-inline-size: var(--sbb-popover-max-width); + inline-size: max-content; background-color: var(--sbb-popover-background); outline: none; @@ -112,7 +116,7 @@ } :host([data-position='above']) & { - top: calc(100% - calc(var(--sbb-popover-arrow-size) / 2)); + inset-block-start: calc(100% - calc(var(--sbb-popover-arrow-size) / 2)); } } @@ -151,7 +155,7 @@ :host([data-position='above']) & { &::before { - top: calc(100% - calc(var(--sbb-popover-arrow-size) / 2)); + inset-block-start: calc(100% - calc(var(--sbb-popover-arrow-size) / 2)); } } } diff --git a/src/elements/radio-button/common/radio-button-common.scss b/src/elements/radio-button/common/radio-button-common.scss index 12ff6e68d2..a578908742 100644 --- a/src/elements/radio-button/common/radio-button-common.scss +++ b/src/elements/radio-button/common/radio-button-common.scss @@ -93,8 +93,8 @@ &::after { content: ''; flex-shrink: 0; - width: var(--sbb-radio-button-dimension); - height: var(--sbb-radio-button-dimension); + inline-size: var(--sbb-radio-button-dimension); + block-size: var(--sbb-radio-button-dimension); border-radius: 50%; margin-block-start: var(--sbb-radio-button-icon-align); diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.scss b/src/elements/radio-button/radio-button-group/radio-button-group.scss index 2eb4e8dd86..4fbdaf8570 100644 --- a/src/elements/radio-button/radio-button-group/radio-button-group.scss +++ b/src/elements/radio-button/radio-button-group/radio-button-group.scss @@ -27,7 +27,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; --sbb-radio-button-group-width: 100%; ::slotted(sbb-radio-button-panel) { - width: 100%; + inline-size: 100%; } } @@ -47,7 +47,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; // We need to unset the 100% width of the vertical mode if it starts to be horizontal ::slotted(sbb-radio-button-panel) { - width: unset; + inline-size: unset; } } @@ -62,7 +62,7 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; flex-direction: var(--sbb-radio-button-group-orientation); gap: var(--sbb-radio-button-group-gap); align-items: flex-start; - width: var(--sbb-radio-button-group-width); + inline-size: var(--sbb-radio-button-group-width); } .sbb-radio-group__error { diff --git a/src/elements/select/select.scss b/src/elements/select/select.scss index d91b019c21..246b8ad34a 100644 --- a/src/elements/select/select.scss +++ b/src/elements/select/select.scss @@ -67,7 +67,7 @@ .sbb-select__trigger { @include sbb.ellipsis; - height: calc(1em * var(--sbb-typo-line-height-body-text)); + block-size: calc(1em * var(--sbb-typo-line-height-body-text)); } .sbb-select__trigger--placeholder { diff --git a/src/elements/selection-expansion-panel/selection-expansion-panel.scss b/src/elements/selection-expansion-panel/selection-expansion-panel.scss index 362809acc3..35a03155aa 100644 --- a/src/elements/selection-expansion-panel/selection-expansion-panel.scss +++ b/src/elements/selection-expansion-panel/selection-expansion-panel.scss @@ -59,7 +59,7 @@ $open-anim-opacity-to: 1; .sbb-selection-expansion-panel { flex: auto; position: relative; - width: 100%; + inline-size: 100%; background-color: var(--sbb-selection-expansion-panel-background); border-radius: var(--sbb-selection-expansion-panel-border-radius); diff --git a/src/elements/signet/signet.scss b/src/elements/signet/signet.scss index 46f9575ff5..1ab8d157f2 100644 --- a/src/elements/signet/signet.scss +++ b/src/elements/signet/signet.scss @@ -33,18 +33,18 @@ justify-content: center; background-color: var(--sbb-signet-background-color); aspect-ratio: var(--sbb-signet-aspect-ratio); - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } .sbb-signet .sbb-signet__svg-container { display: flex; - height: var(--sbb-signet-svg-container-height); + block-size: var(--sbb-signet-svg-container-height); } .sbb-signet svg { - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } #sbb-signet__icon { diff --git a/src/elements/skiplink-list/skiplink-list.scss b/src/elements/skiplink-list/skiplink-list.scss index 40ae6893ab..50ad0f80dd 100644 --- a/src/elements/skiplink-list/skiplink-list.scss +++ b/src/elements/skiplink-list/skiplink-list.scss @@ -25,12 +25,12 @@ & > :is(li, span) { @include sbb.shadow-level-5-hard; - height: var(--sbb-skiplink-list-height); + block-size: var(--sbb-skiplink-list-height); overflow: var(--sbb-skiplink-list-overflow); border-radius: var(--sbb-border-radius-4x); background-color: var(--sbb-skiplink-list-background); border: var(--sbb-skiplink-list-border); - width: fit-content; + inline-size: fit-content; &:focus-within { --sbb-skiplink-list-height: auto; diff --git a/src/elements/slider/slider.scss b/src/elements/slider/slider.scss index 0ceaafbb4f..e0c319d995 100644 --- a/src/elements/slider/slider.scss +++ b/src/elements/slider/slider.scss @@ -8,8 +8,8 @@ // which appears in normalize css of several frameworks. outline: none !important; display: inline-block; - min-width: #{sbb.px-to-rem-build(150)}; - width: min(#{sbb.px-to-rem-build(400)}, 100%); + min-inline-size: #{sbb.px-to-rem-build(150)}; + inline-size: min(#{sbb.px-to-rem-build(400)}, 100%); --sbb-slider-line-height: #{sbb.px-to-rem-build(4)}; --sbb-slider-value-fraction: 0; @@ -71,13 +71,13 @@ .sbb-slider__container { position: relative; - min-height: var(--sbb-size-icon-ui-small); + min-block-size: var(--sbb-size-icon-ui-small); flex-grow: 1; } .sbb-slider__range-input { position: absolute; - width: 100%; + inline-size: 100%; inset: 0; opacity: 0; margin: 0; @@ -86,8 +86,8 @@ .sbb-slider__line { @include sbb.absolute-center-y; - height: var(--sbb-slider-line-height); - width: 100%; + block-size: var(--sbb-slider-line-height); + inline-size: 100%; background-color: var(--sbb-slider-line-color); border-radius: var(--sbb-slider-line-height); overflow: hidden; @@ -96,22 +96,22 @@ .sbb-slider__selected-line { position: relative; - height: 100%; + block-size: 100%; background-color: var(--sbb-slider-selected-line-color); - width: calc(var(--sbb-slider-value-fraction) * 100%); + inline-size: calc(var(--sbb-slider-value-fraction) * 100%); } .sbb-slider__knob { @include sbb.absolute-center-y; @include sbb.shadow-level-5-hard; - width: var(--sbb-slider-knob-size); - height: var(--sbb-slider-knob-size); + inline-size: var(--sbb-slider-knob-size); + block-size: var(--sbb-slider-knob-size); inset-inline-start: calc( calc(var(--sbb-slider-value-fraction) * 100%) - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction) ); - transition-property: width, height; + transition-property: inline-size, block-size; transition-duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x)); transition-timing-function: ease-in; background-color: var(--sbb-slider-knob-color); diff --git a/src/elements/stepper/step-label/step-label.scss b/src/elements/stepper/step-label/step-label.scss index 5dd362e1d1..ffc840a04b 100644 --- a/src/elements/stepper/step-label/step-label.scss +++ b/src/elements/stepper/step-label/step-label.scss @@ -16,8 +16,8 @@ --sbb-step-label-gap: var(--sbb-spacing-fixed-4x); position: relative; - min-width: 0; - max-width: fit-content; + min-inline-size: 0; + max-inline-size: fit-content; &::before { @include sbb.text-xxs--regular; @@ -129,8 +129,8 @@ flex-shrink: 0; align-items: center; justify-content: center; - width: var(--sbb-step-label-prefix-size); - height: var(--sbb-step-label-prefix-size); + inline-size: var(--sbb-step-label-prefix-size); + block-size: var(--sbb-step-label-prefix-size); inset-block-start: calc( 1em * (var(--sbb-typo-line-height-body-text) / 2) + (var(--sbb-border-width-1x) / 2) - (var(--sbb-step-label-prefix-size) / 2) diff --git a/src/elements/stepper/step/step.scss b/src/elements/stepper/step/step.scss index 7c5cb84b0f..af16a4be03 100644 --- a/src/elements/stepper/step/step.scss +++ b/src/elements/stepper/step/step.scss @@ -36,17 +36,17 @@ :host([data-orientation='vertical']) & { margin-inline-start: var(--sbb-spacing-fixed-4x); opacity: 0; - height: 0; + block-size: 0; transition: - height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), + block-size var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing); } :host([data-selected][data-orientation='vertical']) & { opacity: 1; - height: var(--sbb-stepper-content-height); + block-size: var(--sbb-stepper-content-height); transition: - height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), + block-size var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); } @@ -56,11 +56,11 @@ @include sbb.text-m--regular; position: var(--sbb-step-position); - width: 100%; + inline-size: 100%; inset-block-start: var(--sbb-step-inset-block-start); opacity: var(--sbb-step-opacity); visibility: var(--sbb-step-visibility); - height: var(--sbb-step-height); + block-size: var(--sbb-step-height); color: var(--sbb-step-color); transition: { property: opacity, visibility; diff --git a/src/elements/stepper/stepper/stepper.scss b/src/elements/stepper/stepper/stepper.scss index 3a7968320c..3f630e3295 100644 --- a/src/elements/stepper/stepper/stepper.scss +++ b/src/elements/stepper/stepper/stepper.scss @@ -32,7 +32,7 @@ } .sbb-stepper { - width: 100%; + inline-size: 100%; } .sbb-stepper__labels { @@ -56,9 +56,9 @@ &::before { inset-block-end: calc(var(--sbb-stepper-border-width) * -1); - height: var(--sbb-stepper-marker-width); - width: var(--sbb-stepper-marker-size); - transition: width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); + block-size: var(--sbb-stepper-marker-width); + inline-size: var(--sbb-stepper-marker-size); + transition: inline-size var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); } } @@ -68,9 +68,9 @@ &::before { inset-block-start: 0; - width: var(--sbb-stepper-marker-width); - height: var(--sbb-stepper-marker-size); - transition: height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); + inline-size: var(--sbb-stepper-marker-width); + block-size: var(--sbb-stepper-marker-size); + transition: block-size var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); } } } @@ -79,8 +79,8 @@ position: relative; :host([orientation='horizontal']) & { - height: var(--sbb-stepper-content-height); - transition: height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); + block-size: var(--sbb-stepper-content-height); + transition: block-size var(--sbb-stepper-animation-duration) var(--sbb-animation-easing); } } diff --git a/src/elements/table/table-wrapper/table-wrapper.scss b/src/elements/table/table-wrapper/table-wrapper.scss index 78b7fcec60..b03da4ad50 100644 --- a/src/elements/table/table-wrapper/table-wrapper.scss +++ b/src/elements/table/table-wrapper/table-wrapper.scss @@ -10,7 +10,7 @@ } ::slotted(.sbb-table) { - width: 100%; + inline-size: 100%; } .sbb-table-wrapper { @@ -23,6 +23,6 @@ } :host([data-has-horizontal-scrollbar]) & { - padding-bottom: var(--sbb-spacing-fixed-1x); + padding-block-end: var(--sbb-spacing-fixed-1x); } } diff --git a/src/elements/tabs/tab-group/tab-group.scss b/src/elements/tabs/tab-group/tab-group.scss index 2f87d8194c..8da0403f98 100644 --- a/src/elements/tabs/tab-group/tab-group.scss +++ b/src/elements/tabs/tab-group/tab-group.scss @@ -19,12 +19,12 @@ .tab-content { margin-block-start: var(--sbb-spacing-responsive-m); - transition: height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing); + transition: block-size var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing); ::slotted(*) { visibility: hidden; opacity: 0; - height: 0; + block-size: 0; overflow: hidden; // If e.g. a block link with an absolute positioned element is slotted, there would be an visible space @@ -35,7 +35,7 @@ ::slotted(*[active]) { visibility: visible; opacity: 1; - height: fit-content; + block-size: fit-content; overflow: unset; transition: { duration: var(--sbb-tab-group-animation-duration); diff --git a/src/elements/tabs/tab-label/tab-label.scss b/src/elements/tabs/tab-label/tab-label.scss index bf9d0a352a..1aa311add8 100644 --- a/src/elements/tabs/tab-label/tab-label.scss +++ b/src/elements/tabs/tab-label/tab-label.scss @@ -22,7 +22,7 @@ --sbb-tab-label-amount-color: var(--sbb-color-metal); display: inline-block; - max-width: 100%; + max-inline-size: 100%; pointer-events: var(--sbb-tab-label-pointer-events); -webkit-tap-highlight-color: transparent; @@ -103,7 +103,7 @@ .sbb-tab-label { position: relative; margin: 0; - min-height: var(--sbb-tab-label-height); + min-block-size: var(--sbb-tab-label-height); display: flex; align-items: center; padding-inline: var(--sbb-tab-label-inline-padding); @@ -120,8 +120,8 @@ position: absolute; inset-inline-start: 0; inset-block-end: 0; - width: var(--sbb-tab-group-width); - height: var(--sbb-border-width-1x); + inline-size: var(--sbb-tab-group-width); + block-size: var(--sbb-border-width-1x); background-color: var(--sbb-color-cloud); } } @@ -131,7 +131,7 @@ content: ''; inset-inline: 0; inset-block-end: 0; - height: #{sbb.px-to-rem-build(3)}; + block-size: #{sbb.px-to-rem-build(3)}; background-color: var(--sbb-tab-label-color); transform: var(--sbb-tab-label-marker-transform); transition: { diff --git a/src/elements/tag/tag-group/tag-group.scss b/src/elements/tag/tag-group/tag-group.scss index 228343020c..4ac0774d84 100644 --- a/src/elements/tag/tag-group/tag-group.scss +++ b/src/elements/tag/tag-group/tag-group.scss @@ -19,5 +19,5 @@ // is handled in the component base class. .sbb-tag-group__list > :is(li, span) { display: flex; - max-width: 100%; + max-inline-size: 100%; } diff --git a/src/elements/tag/tag/tag.scss b/src/elements/tag/tag/tag.scss index f8eb948cdb..0e950a124f 100644 --- a/src/elements/tag/tag/tag.scss +++ b/src/elements/tag/tag/tag.scss @@ -9,7 +9,7 @@ // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; - max-width: 100%; + max-inline-size: 100%; --sbb-tag-border-radius: var(--sbb-border-radius-infinity); --sbb-tag-background-color: var(--sbb-color-white); @@ -102,8 +102,8 @@ position: relative; display: flex; align-items: center; - height: var(--sbb-tag-height); - max-width: 100%; + block-size: var(--sbb-tag-height); + max-inline-size: 100%; gap: var(--sbb-tag-gap); padding-inline: var(--sbb-tag-padding-inline); cursor: pointer; @@ -139,7 +139,7 @@ .sbb-tag__icon { display: flex; align-items: center; - height: calc(var(--sbb-typo-line-height-body-text) * 1em); + block-size: calc(var(--sbb-typo-line-height-body-text) * 1em); flex-shrink: 0; :host(:not([data-slot-names~='icon'], [icon-name])) & { diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements/teaser-hero/teaser-hero.scss index de288345e2..eb75895f3c 100644 --- a/src/elements/teaser-hero/teaser-hero.scss +++ b/src/elements/teaser-hero/teaser-hero.scss @@ -27,7 +27,7 @@ .sbb-teaser-hero { position: relative; display: block; - min-height: var(--sbb-panel-height); + min-block-size: var(--sbb-panel-height); // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { diff --git a/src/elements/teaser-product/common/teaser-product-common.scss b/src/elements/teaser-product/common/teaser-product-common.scss index a0755aa13e..58444f3f0c 100644 --- a/src/elements/teaser-product/common/teaser-product-common.scss +++ b/src/elements/teaser-product/common/teaser-product-common.scss @@ -54,8 +54,8 @@ ::slotted(img) { display: flex; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; object-fit: cover; aspect-ratio: 16 / 9; } @@ -64,7 +64,7 @@ ::slotted(sbb-image) { --sbb-image-border-radius: 0; - height: 100%; + block-size: 100%; } ::slotted(p.sbb-teaser-product--spacing) { @@ -132,7 +132,7 @@ @include sbb.mq($from: large) { align-content: center; - min-height: calc( + min-block-size: calc( var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block) ); } @@ -151,7 +151,7 @@ } @include sbb.mq($from: large) { - min-height: var(--sbb-teaser-product-container-padding-block); + min-block-size: var(--sbb-teaser-product-container-padding-block); padding-block: var(--sbb-spacing-responsive-xs); } } diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss index 370f03a3fa..ca8e18b14d 100644 --- a/src/elements/teaser/teaser.scss +++ b/src/elements/teaser/teaser.scss @@ -64,19 +64,19 @@ flex-flow: var(--sbb-teaser-flex-direction) nowrap; align-items: var(--sbb-teaser-align-items); gap: var(--sbb-teaser-gap); - max-width: 100%; + max-inline-size: 100%; } .sbb-teaser__text { overflow: hidden; - max-width: 100%; + max-inline-size: 100%; } ::slotted([slot='image']) { will-change: transform; display: block; object-fit: cover; - width: sbb.px-to-rem-build(300); + inline-size: sbb.px-to-rem-build(300); filter: brightness(var(--sbb-teaser-brightness, 1)); transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing); aspect-ratio: 4/3; @@ -105,7 +105,7 @@ .sbb-teaser__chip { display: block; - max-width: fit-content; + max-inline-size: fit-content; margin-block-end: var(--sbb-spacing-fixed-1x); :host(:not([data-slot-names~='chip'], [chip-content])) & { diff --git a/src/elements/toast/toast.scss b/src/elements/toast/toast.scss index 68519f6e08..81474e30c6 100644 --- a/src/elements/toast/toast.scss +++ b/src/elements/toast/toast.scss @@ -81,7 +81,7 @@ padding-block: var(--sbb-toast-padding-block); padding-inline: var(--sbb-toast-padding-inline); border-radius: var(--sbb-toast-border-radius); - max-width: var(--sbb-toast-max-width); + max-inline-size: var(--sbb-toast-max-width); display: flex; color: var(--sbb-toast-color); background-color: var(--sbb-toast-background-color); @@ -123,7 +123,7 @@ position: relative; // Since the action button has an absolute position, we have to "reserve" space - min-width: #{sbb.px-to-rem-build(40)}; + min-inline-size: #{sbb.px-to-rem-build(40)}; :host(:not([data-slot-names~='action'], [dismissible])) & { display: none; @@ -134,7 +134,7 @@ .sbb-toast__action-button { margin-inline: var(--sbb-spacing-fixed-2x); position: absolute; - top: #{sbb.px-to-rem-build(-10)}; // Center vertically the element + inset-block-start: #{sbb.px-to-rem-build(-10)}; // Center vertically the element } ::slotted(:is(sbb-link, sbb-link-button, sbb-link-static)) { diff --git a/src/elements/toggle-check/toggle-check.scss b/src/elements/toggle-check/toggle-check.scss index 7f3a898883..46762fb528 100644 --- a/src/elements/toggle-check/toggle-check.scss +++ b/src/elements/toggle-check/toggle-check.scss @@ -108,7 +108,7 @@ flex-direction: var(--sbb-toggle-check-flex-direction); gap: var(--sbb-toggle-check-gap); align-items: start; - width: 100%; + inline-size: 100%; :host([size='m']) & { @include sbb.text-m--regular; @@ -133,8 +133,8 @@ .sbb-toggle-check__track { display: inline-block; position: relative; - min-width: var(--sbb-toggle-check-width); - height: var(--sbb-toggle-check-height); + min-inline-size: var(--sbb-toggle-check-width); + block-size: var(--sbb-toggle-check-height); border-radius: var(--sbb-border-radius-infinity); background-color: var(--sbb-toggle-check-background-color); @@ -146,8 +146,8 @@ @include sbb.shadow-level-5-hard; @include sbb.absolute-center-y; - width: var(--sbb-toggle-check-circle-diameter); - height: var(--sbb-toggle-check-circle-diameter); + inline-size: var(--sbb-toggle-check-circle-diameter); + block-size: var(--sbb-toggle-check-circle-diameter); border: var(--sbb-border-width-1x) var(--sbb-toggle-check-circle-border-style) var(--sbb-toggle-check-circle-border-color); border-radius: 50%; @@ -161,8 +161,8 @@ .sbb-toggle-check__icon { @include sbb.absolute-center-x-y; - width: var(--sbb-size-icon-ui-small); - height: var(--sbb-size-icon-ui-small); + inline-size: var(--sbb-size-icon-ui-small); + block-size: var(--sbb-size-icon-ui-small); opacity: var(--sbb-toggle-check-icon-opacity); transition: opacity ease var(--sbb-toggle-check-animation-duration); } diff --git a/src/elements/toggle/toggle-option/toggle-option.scss b/src/elements/toggle/toggle-option/toggle-option.scss index 27c70fb6db..3d6094be7e 100644 --- a/src/elements/toggle/toggle-option/toggle-option.scss +++ b/src/elements/toggle/toggle-option/toggle-option.scss @@ -11,7 +11,7 @@ --sbb-toggle-option-line-height: calc(1em * var(--sbb-typo-line-height-body-text)); display: inline-block; - min-width: var(--sbb-toggle-min-width); + min-inline-size: var(--sbb-toggle-min-width); overflow: hidden; z-index: 1; } @@ -43,7 +43,7 @@ input[type='radio'] { display: flex; justify-content: center; align-items: center; - height: var(--sbb-toggle-height); + block-size: var(--sbb-toggle-height); padding-inline: var(--sbb-toggle-padding-inline); border-radius: var(--sbb-toggle-option-border-radius); color: var(--sbb-toggle-option-color); @@ -74,6 +74,6 @@ input[type='radio'] { sbb-icon, ::slotted(sbb-icon) { - min-width: var(--sbb-toggle-option-icon-min-size); - min-height: var(--sbb-toggle-option-icon-min-size); + min-inline-size: var(--sbb-toggle-option-icon-min-size); + min-block-size: var(--sbb-toggle-option-icon-min-size); } diff --git a/src/elements/toggle/toggle/toggle.scss b/src/elements/toggle/toggle/toggle.scss index 9e4b9d1e23..f2e833b24c 100644 --- a/src/elements/toggle/toggle/toggle.scss +++ b/src/elements/toggle/toggle/toggle.scss @@ -35,7 +35,7 @@ --sbb-toggle-width: 100%; ::slotted(sbb-toggle-option) { - width: 50%; + inline-size: 50%; } } @@ -68,10 +68,10 @@ position: relative; display: flex; align-items: center; - width: var(--sbb-toggle-width); - max-width: 100%; - min-width: calc(var(--sbb-toggle-min-width) * 2); - height: var(--sbb-toggle-height); + inline-size: var(--sbb-toggle-width); + max-inline-size: 100%; + min-inline-size: calc(var(--sbb-toggle-min-width) * 2); + block-size: var(--sbb-toggle-height); user-select: none; -webkit-tap-highlight-color: transparent; background: var(--sbb-color-cloud); @@ -87,8 +87,8 @@ var(--sbb-toggle-selected-option-border-color); border-radius: var(--sbb-toggle-border-radius); position: absolute; - max-width: 100%; - min-width: var(--sbb-toggle-min-width); + max-inline-size: 100%; + min-inline-size: var(--sbb-toggle-min-width); // Selected option exceeds toggle dimensions by 2x border width inset-block: calc(-2 * var(--sbb-toggle-border-width)); diff --git a/src/elements/train/train-blocked-passage/train-blocked-passage.scss b/src/elements/train/train-blocked-passage/train-blocked-passage.scss index ae39baa145..6b84e67408 100644 --- a/src/elements/train/train-blocked-passage/train-blocked-passage.scss +++ b/src/elements/train/train-blocked-passage/train-blocked-passage.scss @@ -24,21 +24,21 @@ &::before { content: ''; display: var(--sbb-train-formation-wagon-label-display, block); - height: calc(var(--sbb-font-size-text-s) * var(--sbb-typo-line-height-body-text)); + block-size: calc(var(--sbb-font-size-text-s) * var(--sbb-typo-line-height-body-text)); } } .sbb-train-blocked-passage__wrapper { - width: var(--sbb-train-blocked-passage-icon-dimension); + inline-size: var(--sbb-train-blocked-passage-icon-dimension); display: flex; justify-content: center; flex-direction: column; - height: var(--sbb-train-blocked-passage-height); + block-size: var(--sbb-train-blocked-passage-height); } .sbb-train-blocked-passage__icon { - width: 100%; - height: var(--sbb-train-blocked-passage-icon-dimension); + inline-size: 100%; + block-size: var(--sbb-train-blocked-passage-icon-dimension); border-radius: 50%; background-color: var(--sbb-train-blocked-passage-background-color); position: relative; @@ -48,10 +48,11 @@ &::before { content: ''; - width: var(--sbb-train-blocked-passage-icon-bar-width); - height: var(--sbb-train-blocked-passage-icon-bar-height); + inline-size: var(--sbb-train-blocked-passage-icon-bar-width); + block-size: var(--sbb-train-blocked-passage-icon-bar-height); border-radius: var(--sbb-train-blocked-passage-icon-bar-border-radius); background-color: var(--sbb-train-blocked-passage-bar-color); - margin: auto 0; + margin-block: auto; + margin-inline: 0; } } diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss index bce4d2ab4c..0478fa267c 100644 --- a/src/elements/train/train-formation/train-formation.scss +++ b/src/elements/train/train-formation/train-formation.scss @@ -39,7 +39,7 @@ &::after { content: ''; display: block; - width: var(--sbb-train-formation-inline-padding); + inline-size: var(--sbb-train-formation-inline-padding); background-color: var(--sbb-train-formation-background-color); } @@ -76,14 +76,15 @@ position: relative; display: inline-block; margin-block-end: var(--sbb-spacing-fixed-4x); - max-width: var(--_sector-width); + max-inline-size: var(--_sector-width); // Line behind the sector-label &::before { content: ''; position: absolute; - inset: 50% 0; - height: 1px; + inset-block: 50%; + inset-inline: 0; + block-size: 1px; background-color: var(--sbb-train-formation-sector-line-color); } } @@ -91,9 +92,12 @@ .sbb-train-formation__sector-sticky-wrapper { background-color: var(--sbb-train-formation-background-color); position: sticky; - inset: auto 0; - padding: 0 var(--sbb-spacing-fixed-1x); - margin: 0 var(--sbb-spacing-fixed-2x); + inset-block: auto; + inset-inline: 0; + padding-block: 0; + padding-inline: var(--sbb-spacing-fixed-1x); + margin-block: 0; + margin-inline: var(--sbb-spacing-fixed-2x); overflow: hidden; white-space: nowrap; } diff --git a/src/elements/train/train-wagon/train-wagon.scss b/src/elements/train/train-wagon/train-wagon.scss index cac5285574..d00aa2d2d0 100644 --- a/src/elements/train/train-wagon/train-wagon.scss +++ b/src/elements/train/train-wagon/train-wagon.scss @@ -26,7 +26,7 @@ display: flex; flex-direction: column; align-items: center; - width: var(--sbb-train-wagon-width); + inline-size: var(--sbb-train-wagon-width); gap: var(--sbb-train-wagon-gap); } @@ -38,7 +38,7 @@ 'label label' auto 'occupancy class' 1fr / 1fr 1fr; position: relative; - width: 100%; + inline-size: 100%; // Reserve space because there is no content in the closed wagon &::before { @@ -46,7 +46,7 @@ :host(:not([data-has-visible-wagon-content])) & { content: ''; grid-area: occupancy / span 2; - height: var(--sbb-train-wagon-height); + block-size: var(--sbb-train-wagon-height); } } @@ -56,8 +56,8 @@ position: absolute; inset-inline: 0; inset-block: auto 0; - width: var(--sbb-train-wagon-width); - height: var(--sbb-train-wagon-height); + inline-size: var(--sbb-train-wagon-width); + block-size: var(--sbb-train-wagon-height); border-radius: var(--sbb-train-wagon-shape-border-radius); :host([type='wagon']) & { @@ -72,7 +72,7 @@ .sbb-train-wagon__occupancy, .sbb-train-wagon__class { - height: var(--sbb-train-wagon-height); + block-size: var(--sbb-train-wagon-height); display: flex; align-items: center; } @@ -83,7 +83,7 @@ grid-area: label; text-align: center; display: var(--sbb-train-formation-wagon-label-display, inline-block); - min-height: calc(1em * var(--sbb-typo-line-height-body-text)); + min-block-size: calc(1em * var(--sbb-typo-line-height-body-text)); } .sbb-train-wagon__occupancy { diff --git a/src/elements/train/train/train.scss b/src/elements/train/train/train.scss index 2d6271dcb0..8287525440 100644 --- a/src/elements/train/train/train.scss +++ b/src/elements/train/train/train.scss @@ -33,7 +33,7 @@ display: flex; flex-direction: column; position: relative; - height: 100%; + block-size: 100%; } .sbb-train__wagons { @@ -50,17 +50,18 @@ margin-block: auto var(--sbb-train-direction-spacing); display: flex; position: relative; - width: 100%; + inline-size: 100%; } .sbb-train__direction-heading { z-index: 1; display: flex; position: sticky; - inset: auto 0; + inset-block: auto; + inset-inline: 0; flex-direction: column; - width: 100%; - max-width: var(--sbb-train-direction-width); + inline-size: 100%; + max-inline-size: var(--sbb-train-direction-width); margin: 0; color: var(--sbb-train-direction-label-color); font-size: inherit; @@ -70,9 +71,11 @@ .sbb-train__direction-indicator { z-index: 0; position: absolute; - top: calc(((0.5em * var(--sbb-typo-line-height-body-text))) + var(--sbb-train-direction-spacing)); + inset-block-start: calc( + ((0.5em * var(--sbb-typo-line-height-body-text))) + var(--sbb-train-direction-spacing) + ); inset-inline: 0; - height: var(--sbb-train-direction-line-width); + block-size: var(--sbb-train-direction-line-width); background-color: var(--sbb-train-direction-line-color); } @@ -91,10 +94,11 @@ .sbb-train__sticky-wrapper { position: sticky; - inset: auto 0; - width: 100%; - max-width: var(--sbb-train-direction-width); - height: var(--sbb-train-direction-line-width); + inset-block: auto; + inset-inline: 0; + inline-size: 100%; + max-inline-size: var(--sbb-train-direction-width); + block-size: var(--sbb-train-direction-line-width); display: flex; align-items: center; justify-content: space-between; @@ -102,8 +106,8 @@ // Direction indicator end-shape &::after { content: ''; - width: var(--sbb-train-direction-line-width); - height: var(--sbb-train-direction-indicator-end-height); + inline-size: var(--sbb-train-direction-line-width); + block-size: var(--sbb-train-direction-indicator-end-height); background-color: var(--sbb-train-direction-line-color); display: block; } @@ -111,21 +115,24 @@ .sbb-train__direction-label, .sbb-train__direction-station { - margin: 0 auto; + margin-block: 0; + margin-inline: auto; } .sbb-train__direction-label { - padding: 0 var(--sbb-train-direction-label-padding); + padding-block: 0; + padding-inline: var(--sbb-train-direction-label-padding); background-color: var(--sbb-train-direction-label-background); } .sbb-train__direction-station { @include sbb.text-xxs--regular; - max-width: 100%; + max-inline-size: 100%; text-overflow: ellipsis; overflow: hidden; - padding: 0 var(--sbb-train-direction-station-padding); + padding-block: 0; + padding-inline: var(--sbb-train-direction-station-padding); } .sbb-train__direction-label-sr { diff --git a/src/elements/visual-checkbox/visual-checkbox.scss b/src/elements/visual-checkbox/visual-checkbox.scss index 85bc1a9cdd..019772c46a 100644 --- a/src/elements/visual-checkbox/visual-checkbox.scss +++ b/src/elements/visual-checkbox/visual-checkbox.scss @@ -73,8 +73,8 @@ display: flex; align-items: center; justify-content: center; - width: var(--sbb-visual-checkbox-dimension); - height: var(--sbb-visual-checkbox-dimension); + inline-size: var(--sbb-visual-checkbox-dimension); + block-size: var(--sbb-visual-checkbox-dimension); border-radius: var(--sbb-border-radius-2x); border: var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color); @@ -102,8 +102,8 @@ .sbb-visual-checkbox__icon { display: inline-flex; - width: var(--sbb-visual-checkbox-dimension); - height: var(--sbb-visual-checkbox-dimension); + inline-size: var(--sbb-visual-checkbox-dimension); + block-size: var(--sbb-visual-checkbox-dimension); svg { margin: auto; diff --git a/src/storybook/pages/home/home.scss b/src/storybook/pages/home/home.scss index 3cd6526778..7f42e32dc4 100644 --- a/src/storybook/pages/home/home.scss +++ b/src/storybook/pages/home/home.scss @@ -7,7 +7,7 @@ section sbb-title { } .navigation-button { - width: fit-content; + inline-size: fit-content; } .timetable-section { @@ -19,8 +19,8 @@ section sbb-title { background-color: var(--sbb-color-white); border-radius: var(--sbb-border-radius-4x); - height: 21vh; - width: 100%; + block-size: 21vh; + inline-size: 100%; margin-block: $timetable-margin-block (-$timetable-margin-block); } @@ -50,8 +50,8 @@ section sbb-title { .card-product { display: flex; flex-direction: column; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; gap: var(--sbb-spacing-responsive-xxxs); sbb-icon { @@ -71,7 +71,7 @@ section sbb-title { } [data-sbb-button] { - width: fit-content; + inline-size: fit-content; } @include sbb.mq($from: small) { @@ -83,8 +83,8 @@ section sbb-title { .card-product-big { display: flex; flex-direction: column; - height: 100%; - width: 100%; + block-size: 100%; + inline-size: 100%; column-gap: var(--sbb-spacing-responsive-xxxs); [data-sbb-button] { @@ -141,17 +141,17 @@ section sbb-title { } .avatar-mock { - min-width: 72px; - width: 72px; - height: 72px; + min-inline-size: 72px; + inline-size: 72px; + block-size: 72px; background-color: var(--sbb-color-cloud); border-radius: 50%; display: flex; @include sbb.mq($from: small) { - min-width: 80px; - width: 80px; - height: 80px; + min-inline-size: 80px; + inline-size: 80px; + block-size: 80px; } } @@ -170,7 +170,7 @@ section sbb-title { } .all-purchased-tickets-button { - margin-right: auto; + margin-inline-end: auto; } .tickets-container { @@ -194,7 +194,7 @@ section sbb-title { display: flex; flex-direction: column; gap: var(--sbb-spacing-fixed-3x); - height: fit-content; + block-size: fit-content; } .teaser-hero { @@ -202,7 +202,8 @@ section sbb-title { } .footer-title { - margin: 0 0 var(--sbb-spacing-fixed-3x); + margin-block: 0 var(--sbb-spacing-fixed-3x); + margin-inline: 0; } .footer-text { diff --git a/src/storybook/styles/layout/layout.scss b/src/storybook/styles/layout/layout.scss index 3c40fe0bf8..366e3d1b58 100644 --- a/src/storybook/styles/layout/layout.scss +++ b/src/storybook/styles/layout/layout.scss @@ -5,7 +5,7 @@ .visualized-grid div { @include sbb.development-style; - height: 100px; + block-size: 100px; } .visualized-grid div { diff --git a/src/storybook/styles/scrollbar/scrollbar-internal.scss b/src/storybook/styles/scrollbar/scrollbar-internal.scss index 117de1d105..0351fe69c1 100644 --- a/src/storybook/styles/scrollbar/scrollbar-internal.scss +++ b/src/storybook/styles/scrollbar/scrollbar-internal.scss @@ -39,11 +39,11 @@ .overflow-container { padding: var(--sbb-spacing-responsive-xs); - width: 400px; - height: 300px; + inline-size: 400px; + block-size: 300px; overflow: auto; } .inner-box { - width: 500px; + inline-size: 500px; } diff --git a/src/visual-regression-app/src/components/test-case/image-diff/image-diff.scss b/src/visual-regression-app/src/components/test-case/image-diff/image-diff.scss index b81ffa982e..6641765956 100644 --- a/src/visual-regression-app/src/components/test-case/image-diff/image-diff.scss +++ b/src/visual-regression-app/src/components/test-case/image-diff/image-diff.scss @@ -27,7 +27,7 @@ } .app-image-container { - width: 100%; + inline-size: 100%; display: flex; align-items: start; justify-content: stretch; @@ -43,12 +43,12 @@ .app-image-failed { display: flex; flex: 1; - width: 100%; + inline-size: 100%; background-color: var(--sbb-color-white); } .app-image { - max-width: 100%; + max-inline-size: 100%; } .app-new-test-case-info { @@ -59,8 +59,8 @@ @include sbb.button-reset; display: flex; - width: 100%; - text-align: left; + inline-size: 100%; + text-align: start; cursor: pointer; &:focus-visible { diff --git a/src/visual-regression-app/src/components/test-case/test-case.scss b/src/visual-regression-app/src/components/test-case/test-case.scss index 49c8634a3e..7d71f91ce2 100644 --- a/src/visual-regression-app/src/components/test-case/test-case.scss +++ b/src/visual-regression-app/src/components/test-case/test-case.scss @@ -3,7 +3,7 @@ @include sbb.box-sizing; sbb-chip { - width: fit-content; + inline-size: fit-content; } sbb-title { @@ -43,9 +43,9 @@ sbb-title { position: absolute; inset-block-start: 0; inset-inline-start: 0; - height: var(--sbb-border-radius-2x); + block-size: var(--sbb-border-radius-2x); background-color: var(--sbb-color-black); - width: calc(var(--app-progress) * 100%); + inline-size: calc(var(--app-progress) * 100%); } .app-filter-and-toggle { diff --git a/yarn.lock b/yarn.lock index 24cd94686b..faa617ab73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9741,6 +9741,11 @@ stylelint-scss@6.5.1, stylelint-scss@^6.4.0: postcss-selector-parser "^6.1.1" postcss-value-parser "^4.2.0" +stylelint-use-logical-spec@5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.1.tgz#d5aa254d615d373f18214297c0b49a03a6ca5980" + integrity sha512-UfLB4LW6iG4r3cXxjxkiHQrFyhWFqt8FpNNngD+TyvgMWSokk5TYwTvBHS3atUvZhOogllTOe/PUrGE+4z84AA== + stylelint@16.9.0: version "16.9.0" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.9.0.tgz#81615c0608b9dc645486e08e35c6c9206e1ba132"