@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779890843

package/core/styles/features/core.scss

@@ -1,618 +0,0 @@
-$theme: 'standard' !default;
-
-@use 'sass:string';
-@use '../_index' as sbb;
-
-@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
-  $theme: $theme
-);
-
-@use '../../../alert/alert-group/alert-group.global' as alert-group with (
-  $theme: $theme
-);
-@use '../../../alert/alert/alert.global' as alert with (
-  $theme: $theme
-);
-@use '../../base-elements/selection-group-base-element.global' as selection-group with (
-  $theme: $theme
-);
-@use '../../../badge/badge.global' as badge;
-@use '../../../breadcrumb/breadcrumb-group/breadcrumb-group.global' as breadcrumb-group with (
-  $theme: $theme
-);
-@use '../../../breadcrumb/breadcrumb/breadcrumb.global' as breadcrumb with (
-  $theme: $theme
-);
-@use '../../../button/common/button-common.global' as button with (
-  $theme: $theme
-);
-@use '../../../button/common/mini-button-common.global' as mini-button with (
-  $theme: $theme
-);
-@use '../../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
-  $theme: $theme
-);
-@use '../../../calendar/calendar/calendar.global' as calendar with (
-  $theme: $theme
-);
-@use '../../../calendar/common/calendar-cell-base-element.global' as calendar-cell with (
-  $theme: $theme
-);
-@use '../../../card/card-badge/card-badge.global' as card-badge with (
-  $theme: $theme
-);
-@use '../../../card/card/card.global' as card with (
-  $theme: $theme
-);
-@use '../../../carousel/carousel/carousel.global' as carousel with (
-  $theme: $theme
-);
-@use '../../../checkbox/checkbox.global' as checkbox with (
-  $theme: $theme
-);
-@use '../../../checkbox/common/checkbox-common.global' as checkbox-common with (
-  $theme: $theme
-);
-@use '../../../chip-label/chip-label.global' as chip-label with (
-  $theme: $theme
-);
-@use '../../../chip/chip-group/chip-group.global' as chip-group with (
-  $theme: $theme
-);
-@use '../../../chip/chip/chip.global' as chip with (
-  $theme: $theme
-);
-@use '../../../clock/clock.global' as clock with (
-  $theme: $theme
-);
-@use '../../../container/container/container.global' as container with (
-  $theme: $theme
-);
-@use '../../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
-  $theme: $theme
-);
-@use '../../../dialog/dialog-close-button/dialog-close-button.global' as dialog-close-button with (
-  $theme: $theme
-);
-@use '../../../dialog/dialog-content/dialog-content.global' as dialog-content with (
-  $theme: $theme
-);
-@use '../../../dialog/dialog-title/dialog-title.global' as dialog-title with (
-  $theme: $theme
-);
-@use '../../../dialog/dialog/dialog.global' as dialog with (
-  $theme: $theme
-);
-@use '../../../divider/divider.global' as divider with (
-  $theme: $theme
-);
-@use '../../../expansion-panel/expansion-panel-content/expansion-panel-content.global' as
-  expansion-panel-content with (
-  $theme: $theme
-);
-@use '../../../expansion-panel/expansion-panel-header/expansion-panel-header.global' as
-  expansion-panel-header with (
-  $theme: $theme
-);
-@use '../../../expansion-panel/expansion-panel/expansion-panel.global' as expansion-panel with (
-  $theme: $theme
-);
-@use '../../../file-selector/common/file-selector.global' as file-selector with (
-  $theme: $theme
-);
-@use '../../../flip-card/flip-card-details/flip-card-details.global' as flip-card-details with (
-  $theme: $theme
-);
-@use '../../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
-  $theme: $theme
-);
-@use '../../../flip-card/flip-card/flip-card.global' as flip-card with (
-  $theme: $theme
-);
-@use '../../../footer/footer.global' as footer with (
-  $theme: $theme
-);
-@use '../../../form-field/error/error.global' as error with (
-  $theme: $theme
-);
-@use '../../../form-field/form-field/form-field.global' as form-field with (
-  $theme: $theme
-);
-@use '../../../header/common/header-action.global' as header-common with (
-  $theme: $theme
-);
-@use '../../../header/header-environment/header-environment.global' as header-environment with (
-  $theme: $theme
-);
-@use '../../../header/header/header.global' as header with (
-  $theme: $theme
-);
-@use '../../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
-  $theme: $theme
-);
-@use '../../../lead-container/lead-container.global' as lead-container with (
-  $theme: $theme
-);
-@use '../../../link/common/block-link.global' as block-link with (
-  $theme: $theme
-);
-@use '../../../loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle
-  with (
-  $theme: $theme
-);
-@use '../../../loading-indicator/loading-indicator.global' as loading-indicator with (
-  $theme: $theme
-);
-@use '../../../logo/logo.global' as logo with (
-  $theme: $theme
-);
-@use '../../../map-container/map-container.global' as map-container with (
-  $theme: $theme
-);
-@use '../../../menu/common/menu-action.global' as menu-action with (
-  $theme: $theme
-);
-@use '../../../menu/menu/menu.global' as menu with (
-  $theme: $theme
-);
-@use '../../../message/message.global' as message with (
-  $theme: $theme
-);
-@use '../../../mini-calendar/mini-calendar-day/mini-calendar-day.global' as mini-calendar-day with (
-  $theme: $theme
-);
-@use '../../../mini-calendar/mini-calendar-month/mini-calendar-month.global' as mini-calendar-month
-  with (
-  $theme: $theme
-);
-@use '../../../navigation/common/navigation-action.global' as navigation-action with (
-  $theme: $theme
-);
-@use '../../../navigation/navigation-list/navigation-list.global' as navigation-list with (
-  $theme: $theme
-);
-@use '../../../navigation/navigation-marker/navigation-marker.global' as navigation-marker with (
-  $theme: $theme
-);
-@use '../../../navigation/navigation-section/navigation-section.global' as navigation-section with (
-  $theme: $theme
-);
-@use '../../../navigation/navigation/navigation.global' as navigation with (
-  $theme: $theme
-);
-@use '../../../notification/notification.global' as notification with (
-  $theme: $theme
-);
-@use '../../../option/optgroup/optgroup.global' as optgroup with (
-  $theme: $theme
-);
-@use '../../../option/option-hint/option-hint.global' as option-hint with (
-  $theme: $theme
-);
-@use '../../../option/option-panel-common.global' as option-panel with (
-  $theme: $theme
-);
-@use '../../../option/option/option.global' as option with (
-  $theme: $theme
-);
-@use '../../../overlay/overlay.global' as overlay with (
-  $theme: $theme
-);
-@use '../../../paginator/common/paginator-common.global' as paginator-common with (
-  $theme: $theme
-);
-@use '../../../paginator/compact-paginator/compact-paginator.global' as compact-paginator with (
-  $theme: $theme
-);
-@use '../../../paginator/paginator/paginator.global' as paginator with (
-  $theme: $theme
-);
-@use '../../mixins/panel-common.global' as panel-common with (
-  $theme: $theme
-);
-@use '../../../popover/popover.global' as popover-component with (
-  $theme: $theme
-);
-@use '../../../radio-button/common/radio-button-common.global' as radio-button-common with (
-  $theme: $theme
-);
-@use '../../../select/select.global' as select with (
-  $theme: $theme
-);
-@use '../../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
-  $theme: $theme
-);
-@use '../../../selection-expansion-panel/selection-expansion-panel.global' as
-  selection-expansion-panel with (
-  $theme: $theme
-);
-@use '../../../sidebar/sidebar-close-button/sidebar-close-button.global' as sidebar-close-button
-  with (
-  $theme: $theme
-);
-@use '../../../sidebar/sidebar-container/sidebar-container.global' as sidebar-container with (
-  $theme: $theme
-);
-@use '../../../sidebar/sidebar/sidebar.global' as sidebar with (
-  $theme: $theme
-);
-@use '../../../signet/signet.global' as signet with (
-  $theme: $theme
-);
-@use '../../../slider/slider.global' as slider with (
-  $theme: $theme
-);
-@use '../../../status/status.global' as status with (
-  $theme: $theme
-);
-@use '../../../stepper/step-label/step-label.global' as step-label with (
-  $theme: $theme
-);
-@use '../../../stepper/stepper/stepper.global' as stepper with (
-  $theme: $theme
-);
-@use '../../../table/table.global' as table with (
-  $theme: $theme
-);
-@use '../../../tabs/common/tab-group-common.global' as tab-group-common with (
-  $theme: $theme
-);
-@use '../../../tabs/common/tab-label-common.global' as tab-label-common with (
-  $theme: $theme
-);
-@use '../../../tabs/tab-nav-bar/tab-nav-bar.global' as tab-nav-bar with (
-  $theme: $theme
-);
-@use '../../../tag/tag/tag.global' as tag with (
-  $theme: $theme
-);
-@use '../../../teaser-hero/teaser-hero.global' as teaser-hero with (
-  $theme: $theme
-);
-@use '../../../teaser-panel/teaser-panel.global' as teaser-panel with (
-  $theme: $theme
-);
-@use '../../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
-  $theme: $theme
-);
-@use '../../../teaser/teaser.global' as teaser with (
-  $theme: $theme
-);
-@use '../../../time-input/time-input.global' as time-input with (
-  $theme: $theme
-);
-@use '../../../timetable-form/timetable-form-details/timetable-form-details.global' as
-  timetable-form-details with (
-  $theme: $theme
-);
-@use '../../../timetable-form/timetable-form-field/timetable-form-field.global' as
-  timetable-form-field with (
-  $theme: $theme
-);
-@use '../../../timetable-form/timetable-form/timetable-form.global' as timetable-form with (
-  $theme: $theme
-);
-@use '../../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
-  $theme: $theme
-);
-@use '../../../title/title-common.global' as title-common with (
-  $theme: $theme
-);
-@use '../../../title/title.global' as title with (
-  $theme: $theme
-);
-@use '../../../toast/toast.global' as toast with (
-  $theme: $theme
-);
-@use '../../../toggle-check/toggle-check.global' as toggle-check with (
-  $theme: $theme
-);
-@use '../../../toggle/toggle-option/toggle-option.global' as toggle-option with (
-  $theme: $theme
-);
-@use '../../../toggle/toggle/toggle.global' as toggle with (
-  $theme: $theme
-);
-@use '../../../tooltip/tooltip.global' as tooltip with (
-  $theme: $theme
-);
-@use '../../../train/train-blocked-passage/train-blocked-passage.global' as train-blocked-passage
-  with (
-  $theme: $theme
-);
-@use '../../../train/train-formation/train-formation.global' as train-formation with (
-  $theme: $theme
-);
-@use '../../../train/train-wagon-common.global' as train-wagon-common with (
-  $theme: $theme
-);
-@use '../../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
-  $theme: $theme
-);
-
-@include sbb.box-sizing;
-
-// Core variables
-:root {
-  // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
-  @include sbb-css-tokens.base;
-
-  @include alert.base;
-  @include alert-group.base;
-  @include breadcrumb.base;
-  @include breadcrumb-group.base;
-  @include button.base;
-  @include mini-button.base;
-  @include mini-button-group.base;
-  @include calendar.base;
-  @include calendar-cell.base;
-  @include card.base;
-  @include card-badge.base;
-  @include carousel.base;
-  @include chip-label.base;
-  @include chip.base;
-  @include chip-group.base;
-  @include panel-common.base;
-  @include checkbox.base;
-  @include checkbox-common.base;
-  @include container.base;
-  @include sticky-bar.base;
-  @include clock.base;
-  @include dialog.base;
-  @include dialog-close-button.base;
-  @include divider.base;
-  @include error.base;
-  @include expansion-panel.base;
-  @include expansion-panel-content.base;
-  @include expansion-panel-header.base;
-  @include file-selector.base;
-  @include flip-card.base;
-  @include flip-card-details.base;
-  @include footer.base;
-  @include form-field.base;
-  @include header.base;
-  @include header-common.base;
-  @include header-environment.base;
-  @include icon-sidebar.base;
-  @include lead-container.base;
-  @include block-link.base;
-  @include loading-indicator.base;
-  @include loading-indicator-circle.base;
-  @include logo.base;
-  @include map-container.base;
-  @include menu.base;
-  @include menu-action.base;
-  @include message.base;
-  @include navigation.base;
-  @include navigation-action.base;
-  @include navigation-list.base;
-  @include navigation-marker.base;
-  @include navigation-section.base;
-  @include mini-calendar-day.base;
-  @include mini-calendar-month.base;
-  @include notification.base;
-  @include option.base;
-  @include option-hint.base;
-  @include option-panel.base;
-  @include optgroup.base;
-  @include overlay.base;
-  @include paginator-common.base;
-  @include paginator.base;
-  @include compact-paginator.base;
-  @include popover-component.base;
-  @include radio-button-common.base;
-  @include selection-group.base;
-  @include selection-action-panel.base;
-  @include selection-expansion-panel.base;
-  @include sidebar.base;
-  @include signet.base;
-  @include select.base;
-  @include slider.base;
-  @include status.base;
-  @include step-label.base;
-  @include stepper.base;
-  @include table.base;
-  @include tab-group-common.base;
-  @include tab-label-common.base;
-  @include train-blocked-passage.base;
-  @include train-formation.base;
-  @include train-wagon-common.base;
-  @include tag.base;
-  @include teaser.base;
-  @include teaser-hero.base;
-  @include teaser-panel.base;
-  @include teaser-product-common.base;
-  @include timetable-form.base;
-  @include timetable-form-details.base;
-  @include timetable-form-field.base;
-  @include timetable-occupancy.base;
-  @include time-input.base;
-  @include title-common.base;
-  @include toggle-check.base;
-  @include toggle.base;
-  @include toggle-option.base;
-  @include tooltip.base;
-  @include toast.base;
-  @include visual-checkbox.base;
-
-  @media (forced-colors: active) {
-    @include sbb-css-tokens.forced-colors;
-
-    @include alert.base-forced-colors;
-    @include breadcrumb.base-forced-colors;
-    @include card.base-forced-colors;
-    @include card-badge.base-forced-colors;
-    @include header-common.base-forced-colors;
-    @include expansion-panel-header.base-forced-colors;
-    @include form-field.base-forced-colors;
-    @include loading-indicator-circle.base-forced-colors;
-    @include logo.base-forced-colors;
-    @include visual-checkbox.base-forced-colors;
-    @include radio-button-common.base-forced-colors;
-    @include signet.base-forced-colors;
-    @include slider.base-forced-colors;
-    @include step-label.base-forced-colors;
-    @include tag.base-forced-colors;
-    @include toggle-check.base-forced-colors;
-    @include toggle.base-forced-colors;
-    @include train-blocked-passage.forced-colors;
-    @include train-formation.forced-colors;
-    @include train-wagon-common.forced-colors;
-  }
-
-  // Overlay
-  --sbb-overlay-default-z-index: 1000;
-
-  // Cursor
-  --sbb-cursor-default: default;
-  --sbb-cursor-pointer: pointer;
-
-  // Infinity border radius, can be used to achieve rounded border on start and end
-  --sbb-border-radius-infinity: calc(infinity * 1px);
-
-  // When the input modality is either mouse or touch,
-  // the focus outline should be hidden.
-  // We achieve this by setting the outline style to none.
-  // This is primarily to work around Safari bugs.
-  &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
-    --sbb-focus-outline-style: none;
-  }
-
-  @include sbb.mq($from: small) {
-    @include sbb-css-tokens.breakpoint-small;
-
-    @include alert.base-breakpoint-small;
-    @include dialog.base-breakpoint-small;
-    @include footer.base-breakpoint-small;
-    @include notification.base-breakpoint-small;
-  }
-
-  @include sbb.mq($from: large) {
-    @include sbb-css-tokens.breakpoint-large;
-
-    @include alert.base-breakpoint-large;
-    @include button.base-breakpoint-large;
-    @include chip-group.base-breakpoint-large;
-    @include flip-card.base-breakpoint-large;
-    @include form-field.base-breakpoint-large;
-    @include header.base-breakpoint-large;
-    @include navigation.base-breakpoint-large;
-    @include navigation-section.base-breakpoint-large;
-    @include menu.base-breakpoint-large;
-    @include teaser-panel.base-breakpoint-large;
-    @include teaser-product-common.base-breakpoint-large;
-    @include time-input.base-breakpoint-large;
-  }
-
-  @include sbb.mq($from: ultra) {
-    @include sbb-css-tokens.breakpoint-ultra;
-
-    @include lead-container.base-breakpoint-ultra;
-    @include map-container.base-breakpoint-ultra;
-    @include navigation.base-breakpoint-ultra;
-    @include navigation-section.base-breakpoint-ultra;
-    @include teaser-panel.base-breakpoint-ultra;
-  }
-}
-
-@include sbb.font-declarations;
-
-// Components global styles
-@include badge.rules;
-@include breadcrumb-group.rules;
-@include card.rules;
-@include container.rules;
-@include dialog-close-button.rules;
-@include dialog-content.rules;
-@include dialog-title.rules;
-@include flip-card.rules;
-@include flip-card-summary.rules;
-@include form-field.rules;
-@include header.rules;
-@include icon-sidebar.rules;
-@include lead-container.rules;
-@include message.rules;
-@include option.rules;
-@include select.rules;
-@include sidebar.rules;
-@include sidebar-close-button.rules;
-@include sidebar-container.rules;
-@include tab-nav-bar.rules;
-@include table.rules;
-@include teaser.rules;
-@include teaser-hero.rules;
-@include teaser-product-common.rules;
-@include timetable-form.rules;
-@include title.rules;
-@include toggle.rules;
-
-html {
-  @include sbb.text;
-
-  color-scheme: light dark;
-  color: var(--sbb-font-color-default);
-  background-color: var(--sbb-background-color-1);
-}
-
-// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
-::placeholder {
-  @include sbb.placeholder;
-}
-
-// Hiding components until they are instantiated
-:is(
-  sbb-autocomplete,
-  sbb-autocomplete-grid,
-  sbb-datepicker,
-  sbb-dialog,
-  sbb-menu,
-  sbb-navigation,
-  sbb-navigation-section,
-  sbb-overlay,
-  sbb-popover,
-  sbb-select,
-  sbb-skiplink-list,
-  sbb-toast,
-  sbb-tooltip
-):not(:defined) {
-  display: none;
-}
-
-img {
-  aspect-ratio: var(--sbb-image-aspect-ratio);
-  object-fit: var(--sbb-image-object-fit);
-  object-position: var(--sbb-image-object-position);
-}
-
-// Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
-// Apply the brightness effect on mouse hover
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
-  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
-  --sbb-teaser-image-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
-
-  &:hover {
-    @include sbb.hover-mq($hover: true) {
-      --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
-    }
-  }
-
-  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    // Although only the teaser has a scale property, we do it here, because this rule is
-    // more specific and overrides would not be respected.
-    will-change: filter, scale;
-    filter: brightness(var(--sbb-teaser-image-brightness, 1));
-    transition:
-      filter,
-      scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
-  }
-}
-
-.sbb-overlay-outlet {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-}