@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -0,0 +1,133 @@
+@use './a11y';
+@use '../core/functions';
+
+// ----------------------------------------------------------------------------------------------------
+// Bullet Mixins: Achieve the styling of a bullet
+// ----------------------------------------------------------------------------------------------------
+
+@mixin pearl-chain-bullet-variables {
+  --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
+  --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
+  --sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
+  --sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));
+  --sbb-pearl-chain-bullet-color-irrelevant: light-dark(
+    var(--sbb-color-metal),
+    var(--sbb-color-granite)
+  );
+  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);
+  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-bullet-animation-duration: 1920ms;
+  --sbb-pearl-chain-bullet-animation-easing: ease-out;
+  --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(14.14)};
+  --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3.5)};
+  --sbb-pearl-chain-bullet-crossed-border-width: #{functions.px-to-rem-build(1.5)};
+}
+
+@mixin pearl-chain-bullet {
+  background: var(--sbb-pearl-chain-bullet-color);
+  color: var(--sbb-pearl-chain-bullet-color);
+  border-color: var(--sbb-pearl-chain-bullet-color);
+  border-radius: 100%;
+
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-bullet-color: CanvasText;
+  }
+}
+
+@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);
+}
+
+@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);
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+}
+
+@mixin pearl-chain-bullet-past {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);
+
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-bullet-color: GrayText !important;
+  }
+}
+
+@mixin pearl-chain-bullet-irrelevant {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-irrelevant);
+}
+
+@mixin pearl-chain-bullet-disruption {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-bullet-color: Highlight;
+  }
+}
+
+@mixin pearl-chain-bullet-skipped {
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    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);
+
+    @include a11y.if-forced-colors {
+      background: Highlight;
+    }
+  }
+}
+
+@mixin pearl-chain-bullet-skipped-stop {
+  --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(11.31)};
+  --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3)};
+
+  @include pearl-chain-bullet-stop;
+  @include pearl-chain-bullet-skipped;
+}
+
+@mixin pearl-chain-bullet-irrelevant-stop {
+  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);
+
+  @include pearl-chain-bullet-stop;
+}
+
+@mixin pearl-chain-bullet-position {
+  @include pearl-chain-bullet-start-end;
+  @include pearl-chain-bullet;
+  @include pearl-chain-bullet-disruption;
+
+  @keyframes pearl-chain-bullet-position-pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+    }
+
+    25% {
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+    }
+
+    50% {
+      box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
+        color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);
+    }
+
+    100% {
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+    }
+  }
+
+  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
+    var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+}

package/core/styles/mixins/popover.scss

@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------------------------------------
+// Popover Mixins
+// ----------------------------------------------------------------------------------------------------
+
+@mixin popover-reset {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  color: inherit;
+  pointer-events: none;
+}

package/core/styles/mixins/scrollbar.scss

@@ -0,0 +1,117 @@
+@use '../core/functions';
+
+@mixin scrollbar-rules {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
+
+  &::-webkit-scrollbar {
+    // Total width
+    width: var(--sbb-scrollbar-width);
+    height: var(--sbb-scrollbar-width);
+    background-color: var(--sbb-scrollbar-track-color, transparent);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: var(--sbb-scrollbar-track-color, transparent);
+  }
+
+  // Scrollbar itself
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--sbb-scrollbar-color, currentcolor);
+    border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid
+      transparent;
+    border-radius: var(--sbb-border-radius-4x);
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: var(--sbb-scrollbar-color-hover, currentcolor);
+      border-width: calc(
+        0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover))
+      );
+    }
+  }
+
+  // Hide button (top and bottom of the scrollbar)
+  &::-webkit-scrollbar-button,
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+
+  //  Styles for Firefox.
+  //  We have to use the `not` selector as Chrome supports both, the -webkit-* and the following properties.
+  //  As long as possible we use the -webkit-* approach as we have more styling possibilities there.
+  @supports not selector(::-webkit-scrollbar) {
+    // stylelint-disable-next-line block-no-redundant-nested-style-rules
+    & {
+      scrollbar-width: var(--sbb-scrollbar-width-firefox);
+      scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
+        var(--sbb-scrollbar-track-color, transparent);
+    }
+  }
+}
+
+@mixin scrollbar-variables--size-thin {
+  --sbb-scrollbar-thumb-width: #{functions.px-to-rem-build(2)};
+  --sbb-scrollbar-thumb-width-hover: #{functions.px-to-rem-build(4)};
+  --sbb-scrollbar-width-firefox: thin;
+}
+
+@mixin scrollbar-variables--size-thick {
+  --sbb-scrollbar-thumb-width: #{functions.px-to-rem-build(8)};
+  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
+  --sbb-scrollbar-width-firefox: auto;
+}
+
+@mixin scrollbar-variables--color-positive {
+  --sbb-scrollbar-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
+  );
+  --sbb-scrollbar-color-hover: light-dark(
+    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
+  );
+}
+
+@mixin scrollbar-variables--color-positive-track-visible {
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4);
+}
+
+@mixin scrollbar-variables--color-negative {
+  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
+  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
+}
+
+@mixin scrollbar-variables--color-negative-track-visible {
+  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
+}
+
+@mixin scrollbar-variables--track-invisible {
+  --sbb-scrollbar-track-color: transparent;
+}
+
+@mixin scrollbar-variables($size: thin, $negative: false, $track-visible: false) {
+  @if $size == thin {
+    @include scrollbar-variables--size-thin;
+  } @else {
+    @include scrollbar-variables--size-thick;
+  }
+
+  @if $negative {
+    @include scrollbar-variables--color-negative;
+  } @else {
+    @include scrollbar-variables--color-positive;
+  }
+
+  @if $track-visible and $negative {
+    @include scrollbar-variables--color-negative-track-visible;
+  } @else if $track-visible {
+    @include scrollbar-variables--color-positive-track-visible;
+  } @else {
+    @include scrollbar-variables--track-invisible;
+  }
+}
+
+@mixin scrollbar($size: thin, $negative: false, $track-visible: false) {
+  @include scrollbar-variables($size, $negative, $track-visible);
+  @include scrollbar-rules;
+}

package/core/styles/mixins/table.scss

@@ -0,0 +1,175 @@
+@use './typo';
+
+// SBB table mixin
+// Notes:
+// We cannot use `border-collapse` because in sticky variants it gets visually broken.
+// Therefore, we have to build the grid avoiding double borders.
+@mixin table {
+  @include table--m;
+  @include table--striped;
+
+  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+
+  border-spacing: 0;
+  caption-side: bottom;
+  color: var(--sbb-table-color);
+  table-layout: auto;
+
+  thead {
+    & > tr {
+      @include table-header-row;
+
+      &:first-of-type > th {
+        border-block-start: var(--sbb-table-border);
+      }
+
+      & > th {
+        @include table-header-cell;
+
+        &:first-of-type {
+          border-inline-start: var(--sbb-table-border);
+        }
+      }
+    }
+  }
+
+  tbody {
+    & > tr {
+      & > td {
+        @include table-data-cell;
+
+        &:first-of-type {
+          border-inline-start: var(--sbb-table-border);
+        }
+      }
+    }
+  }
+
+  caption {
+    @include table-caption;
+  }
+
+  // If there is no thead, add a top border to the first tbody row
+  // In Angular the CDK table always adds a thead even if there are no headers.
+  // Due to this fact we have to also insert `tr` in the `:has()` selector.
+  &:not(:has(thead tr)) tbody > tr:first-of-type > td {
+    border-block-start: var(--sbb-table-border);
+  }
+}
+
+@mixin table-header-row {
+  // If there is more than one header row, only the last one has the bottom border
+  &:last-of-type > th {
+    border-block-end: var(--sbb-table-border);
+  }
+}
+
+@mixin table-header-cell {
+  font-size: var(--sbb-table-header-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: bold;
+  background-color: var(--sbb-table-background-color);
+  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;
+}
+
+@mixin table-data-cell {
+  font-size: var(--sbb-table-data-cell-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: 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);
+}
+
+@mixin table-caption {
+  // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
+  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+  // Defaults are needed for cases where the caption is used outside a table
+  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+  text-align: left;
+}
+
+@mixin table-filter {
+  padding-block-start: 0 !important;
+}
+
+@mixin table--striped {
+  tbody tr:nth-child(odd) :is(th, td) {
+    @include table-row--striped;
+  }
+}
+
+@mixin table--unstriped {
+  tbody tr:nth-child(odd) :is(th, td) {
+    background-color: var(--sbb-table-background-color);
+  }
+}
+
+@mixin table-row--striped {
+  background-color: var(--sbb-table-row-striped-color);
+}
+
+@mixin table--negative {
+  --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-color: var(--sbb-color-1-negative);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
+  --sbb-table-caption-color: var(--sbb-color-cement);
+}
+
+@mixin table--m {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+
+@mixin table--s {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+}
+
+@mixin table--xs {
+  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+  --sbb-table-header-padding-block: 0;
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-block: 0;
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+}
+
+@mixin table--theme-iron {
+  --sbb-table-cell-color: var(--sbb-color-4);
+
+  tbody > tr > td {
+    color: var(--sbb-table-cell-color);
+  }
+}
+
+@mixin table--theme-iron-negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}

package/core/styles/mixins/timetable-form.scss

@@ -0,0 +1,63 @@
+@use '../core/functions';
+@use '../core/mediaqueries';
+
+@mixin sbb-timetable-form {
+  --sbb-timetable-form-content-max-width: #{functions.px-to-rem-build(740)};
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sbb-spacing-fixed-3x);
+  border-radius: var(--sbb-border-radius-4x);
+  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+  padding-inline: var(--sbb-spacing-fixed-5x);
+  background: linear-gradient(
+    to bottom,
+    var(--sbb-color-primary) 0 #{functions.px-to-rem-build(178)},
+    var(--sbb-background-color-3) #{functions.px-to-rem-build(178)} 100%
+  );
+
+  @include mediaqueries.mq($to: large) {
+    &:has(sbb-signet) {
+      padding-block-start: var(--sbb-spacing-fixed-4x);
+    }
+  }
+
+  sbb-signet {
+    width: var(--sbb-spacing-fixed-16x);
+    align-self: end;
+    margin-block-end: var(--sbb-spacing-fixed-2x);
+    margin-inline: 0;
+
+    @include mediaqueries.mq($from: large) {
+      position: absolute;
+      inset-block-start: var(--sbb-spacing-fixed-6x);
+      inset-inline-end: var(--sbb-spacing-fixed-6x);
+    }
+  }
+
+  & > * {
+    margin-inline: auto;
+    max-width: var(--sbb-timetable-form-content-max-width);
+    width: 100%;
+  }
+}
+
+@mixin timetable-form-block {
+  --sbb-form-field-focus-underline-z-index: 1;
+
+  width: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+    inset-inline: var(--sbb-form-field-padding-inline);
+    inset-block-end: 0;
+  }
+
+  sbb-datepicker-toggle {
+    margin-inline-end: var(--sbb-spacing-fixed-6x);
+  }
+}