@siemens/element-theme 47.0.0

package/src/styles/bootstrap/forms/_validation.scss

@@ -0,0 +1,95 @@
+@use '../../variables/spacers';
+@use '../../variables/typography';
+@use '../variables';
+
+@use 'sass:map';
+
+// Override/enhance the form validation state mixin to also account for class
+// names provided by Angular´s validation.
+//
+// Note: the '.was-validated' selector used by Bootstrap is supposed to live
+// on the wrapping '<form>' element, so decide if this should be changed to
+// an appropriate Angular class that may get applied to a form after save.
+@mixin form-validation-state-selector($state) {
+  @if ($state == 'invalid') {
+    .was-validated &:#{$state},
+    &.ng-touched.ng-#{$state},
+    &.is-#{$state} {
+      @content;
+    }
+  } @else {
+    &.is-#{$state} {
+      @content;
+    }
+  }
+}
+
+%state-feedback {
+  font-size: variables.$form-feedback-font-size;
+  display: none;
+  inline-size: 100%;
+  line-height: typography.$si-line-height-caption-1;
+  margin-block: map.get(spacers.$spacers, 1);
+  margin-inline: map.get(spacers.$spacers, 1);
+}
+
+@mixin form-validation-state-enh($state, $color, $icon, $text-color) {
+  .#{$state}-feedback {
+    @extend %state-feedback;
+    color: $text-color;
+  }
+
+  :is(.form-control, .form-select, .form-control-wrapper) {
+    @include form-validation-state-selector($state) {
+      @if ($state and $icon) {
+        --si-feedback-icon: #{$icon};
+        --si-feedback-icon-offset: 1.5rem;
+      }
+
+      @if $color {
+        &:not(.no-validation):not(:hover),
+        &:not(.no-validation):focus {
+          --border-color: #{$color};
+        }
+      }
+
+      ~ .#{$state}-feedback {
+        display: flex !important; // stylelint-disable-line declaration-no-important
+        flex-direction: column;
+      }
+    }
+  }
+
+  .form-control-file {
+    @include form-validation-state-selector($state) {
+      ~ .#{$state}-feedback {
+        display: block;
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      ~ .#{$state}-feedback {
+        display: block;
+      }
+    }
+  }
+
+  .form-custom-control {
+    @include form-validation-state-selector($state) {
+      ~ .#{$state}-feedback {
+        display: block;
+      }
+    }
+  }
+}
+
+@each $state, $data in variables.$form-validation-states {
+  @include form-validation-state-enh(
+    $state,
+    map.get($data, color),
+    map.get($data, icon),
+    map.get($data, text-color)
+  );
+}

package/src/styles/bootstrap/helpers/_clearfix.scss

@@ -0,0 +1,5 @@
+@use '../mixins/clearfix';
+
+.clearfix {
+  @include clearfix.clearfix();
+}

package/src/styles/bootstrap/helpers/_position.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+
+@use '../../variables/zindex';
+@use '../mixins/breakpoints';
+@use '../variables';
+
+// Shorthand
+
+.fixed-top {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: 0;
+  z-index: zindex.$zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: zindex.$zindex-fixed;
+}
+
+// Responsive sticky top
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  @include breakpoints.media-breakpoint-up($breakpoint) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+
+    .sticky#{$infix}-top {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: zindex.$zindex-sticky;
+    }
+  }
+}

package/src/styles/bootstrap/helpers/_stacks.scss

@@ -0,0 +1,13 @@
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}

package/src/styles/bootstrap/helpers/_stretched-link.scss

@@ -0,0 +1,14 @@
+@use '../variables';
+
+//
+// Stretched link
+//
+
+.stretched-link {
+  &::#{variables.$stretched-link-pseudo-element} {
+    position: absolute;
+    inset: 0;
+    z-index: variables.$stretched-link-z-index;
+    content: '';
+  }
+}

package/src/styles/bootstrap/helpers/_text-truncation.scss

@@ -0,0 +1,9 @@
+@use '../mixins/text-truncate';
+
+//
+// Text truncation
+//
+
+.text-truncate {
+  @include text-truncate.text-truncate();
+}

package/src/styles/bootstrap/helpers/_visually-hidden.scss

@@ -0,0 +1,10 @@
+@use '../mixins/visually-hidden';
+
+//
+// Visually hidden
+//
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  @include visually-hidden.visually-hidden();
+}

package/src/styles/bootstrap/mixins/_backdrop.scss

@@ -0,0 +1,19 @@
+// Shared between modals and offcanvases
+@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: $zindex;
+  inline-size: 100vw;
+  block-size: 100vh;
+  background-color: $backdrop-bg;
+
+  // Fade for backdrop
+  &.fade {
+    opacity: 0;
+  }
+
+  &.show {
+    opacity: $backdrop-opacity;
+  }
+}

package/src/styles/bootstrap/mixins/_breakpoints.scss

@@ -0,0 +1,136 @@
+@use '../variables';
+
+@use 'sass:list';
+@use 'sass:map';
+
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next(
+  $name,
+  $breakpoints: variables.$grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if not $n {
+    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+  }
+  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: variables.$grid-breakpoints) {
+  $max: map.get($breakpoints, $name);
+  @return if($max and $max > 0, $max - 0.02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: variables.$grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: variables.$grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max: breakpoint-max($next);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($next, $breakpoints) {
+      @content;
+    }
+  }
+}

package/src/styles/bootstrap/mixins/_clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix() {
+  &::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+}

package/src/styles/bootstrap/mixins/_container.scss

@@ -0,0 +1,7 @@
+@use '../variables';
+
+@mixin make-container($gutter: variables.$container-padding-x) {
+  inline-size: 100%;
+  padding-inline: var(--#{variables.$variable-prefix}gutter-x, #{$gutter});
+  margin-inline: auto;
+}

package/src/styles/bootstrap/mixins/_deprecate.scss

@@ -0,0 +1,12 @@
+@use '../variables';
+
+// Deprecate mixin
+//
+// This mixin can be used to deprecate mixins or functions.
+// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
+// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
+@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+  @if (variables.$enable-deprecation-messages != false and $ignore-warning != true) {
+    @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
+  }
+}

package/src/styles/bootstrap/mixins/_gradients.scss

@@ -0,0 +1,14 @@
+@use '../variables';
+
+@mixin gradient-striped($color: rgba(#fff, 0.15), $angle: 45deg) {
+  background-image: linear-gradient(
+    $angle,
+    $color 25%,
+    transparent 25%,
+    transparent 50%,
+    $color 50%,
+    $color 75%,
+    transparent 75%,
+    transparent
+  );
+}

package/src/styles/bootstrap/mixins/_grid.scss

@@ -0,0 +1,171 @@
+@use '../functions';
+@use '../variables';
+@use 'breakpoints';
+
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-row($gutter: variables.$grid-gutter-width) {
+  --#{variables.$variable-prefix}gutter-x: #{$gutter};
+  --#{variables.$variable-prefix}gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
+  margin-block-start: calc(
+    -1 * var(--#{variables.$variable-prefix}gutter-y)
+  ); // stylelint-disable-line function-disallowed-list
+  margin-inline: calc(
+    -0.5 * var(--#{variables.$variable-prefix}gutter-x)
+  ); // stylelint-disable-line function-disallowed-list
+}
+
+@mixin make-col-ready($gutter: variables.$grid-gutter-width) {
+  // Add box sizing if only the grid is loaded
+  box-sizing: if(
+    meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing,
+    border-box,
+    null
+  );
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we set the width
+  // later on to override this initial width.
+  flex-shrink: 0;
+  inline-size: 100%;
+  max-inline-size: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+  padding-inline: calc(
+    var(--#{variables.$variable-prefix}gutter-x) * 0.5
+  ); // stylelint-disable-line function-disallowed-list
+  margin-block-start: var(--#{variables.$variable-prefix}gutter-y);
+}
+
+@mixin make-col($size: false, $columns: variables.$grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    inline-size: math.percentage(functions.divide($size, $columns));
+  } @else {
+    flex: 1 1 0;
+    max-inline-size: 100%;
+  }
+}
+
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  inline-size: auto;
+}
+
+@mixin make-col-offset($size, $columns: variables.$grid-columns) {
+  $num: functions.divide($size, $columns);
+  margin-inline-start: if($num == 0, 0, math.percentage($num));
+}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 auto;
+    inline-size: functions.divide(100%, $count);
+  }
+}
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns(
+  $columns: variables.$grid-columns,
+  $gutter: variables.$grid-gutter-width,
+  $breakpoints: variables.$grid-breakpoints
+) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
+
+    @include breakpoints.media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      }
+
+      .row-cols#{$infix}-auto > * {
+        @include make-col-auto();
+      }
+
+      @if variables.$grid-row-columns > 0 {
+        @for $i from 1 through variables.$grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not($infix == '' and $i == 0) {
+            // Avoid emitting useless .offset-0
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+
+      // Gutters
+      //
+      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+      @each $key, $value in variables.$gutters {
+        .g#{$infix}-#{$key},
+        .gx#{$infix}-#{$key} {
+          --#{variables.$variable-prefix}gutter-x: #{$value};
+        }
+
+        .g#{$infix}-#{$key},
+        .gy#{$infix}-#{$key} {
+          --#{variables.$variable-prefix}gutter-y: #{$value};
+        }
+      }
+    }
+  }
+}
+
+@mixin make-cssgrid($columns: variables.$grid-columns, $breakpoints: variables.$grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
+
+    @include breakpoints.media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/bootstrap/mixins/_image.scss

@@ -0,0 +1,15 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-fluid {
+  // Part 1: Set a maximum relative to the parent
+  max-inline-size: 100%;
+  // Part 2: Override the height to auto, otherwise images will be stretched
+  // when setting a width and height attribute on the img element.
+  block-size: auto;
+}

package/src/styles/bootstrap/mixins/_lists.scss

@@ -0,0 +1,5 @@
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+  padding-inline-start: 0;
+  list-style: none;
+}

package/src/styles/bootstrap/mixins/_reset-text.scss

@@ -0,0 +1,18 @@
+@use '../variables';
+
+@mixin reset-text {
+  font-family: variables.$font-family-base;
+  // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
+  font-style: normal;
+  font-weight: variables.$font-weight-normal;
+  line-height: variables.$line-height-base;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+}

package/src/styles/bootstrap/mixins/_table-row.scss

@@ -0,0 +1,31 @@
+@use '../variables';
+
+@mixin table-variant($state, $background) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table-#{$state} {
+    &:last-child {
+      border-end-start-radius: variables.$border-radius;
+      border-end-end-radius: variables.$border-radius;
+
+      > *:first-child {
+        border-end-start-radius: inherit;
+      }
+
+      > *:last-child {
+        border-end-end-radius: inherit;
+      }
+    }
+
+    &,
+    > :is(th, td) {
+      background-color: $background;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover {
+    $hover-background: $background; // FIXME
+  }
+}

package/src/styles/bootstrap/mixins/_text-truncate.scss

@@ -0,0 +1,7 @@
+// Text truncate
+// Requires inline-block or block for proper styling
+@mixin text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/styles/bootstrap/mixins/_transition.scss

@@ -0,0 +1,28 @@
+@use '../variables';
+
+@use 'sass:list';
+
+// stylelint-disable property-disallowed-list
+@mixin transition($transition...) {
+  @if list.length($transition) == 0 {
+    $transition: variables.$transition-base;
+  }
+
+  @if list.length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
+  @if list.nth($transition, 1) != null {
+    transition: $transition;
+  }
+
+  @if list.nth($transition, 1) != null and list.nth($transition, 1) != none {
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+}