@siemens/element-theme 47.0.0

package/src/styles/bootstrap/_images.scss

@@ -0,0 +1,45 @@
+@use '../variables/spacers';
+@use './mixins/image';
+@use './variables';
+
+// Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
+.img-fluid {
+  @include image.img-fluid();
+}
+
+// Image thumbnails
+.img-thumbnail {
+  padding: variables.$thumbnail-padding;
+  background-color: variables.$thumbnail-bg;
+  border: variables.$thumbnail-border-width solid variables.$thumbnail-border-color;
+  border-radius: variables.$thumbnail-border-radius;
+  box-shadow: variables.$thumbnail-box-shadow;
+
+  // Keep them at most 100% wide
+  @include image.img-fluid();
+}
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-block-end: spacers.$spacer * 0.5;
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: variables.$figure-caption-font-size;
+  color: variables.$figure-caption-color;
+}

package/src/styles/bootstrap/_list-group.scss

@@ -0,0 +1,197 @@
+@use 'sass:map';
+
+@use '../variables/focus';
+@use '../variables/semantic-tokens';
+@use '../variables/typography';
+@use 'mixins/breakpoints';
+@use 'variables';
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 0;
+  border-radius: variables.$list-group-border-radius;
+}
+
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+
+  > li::before {
+    // Increments only this instance of the section counter
+    content: counters(section, '.') '. ';
+    counter-increment: section;
+  }
+}
+
+.list-group-item-action {
+  inline-size: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: variables.$list-group-action-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  // Hover state
+  &:is(:hover, :focus) {
+    z-index: 1; // Place hover/focus items above their siblings for proper border styling
+    color: variables.$list-group-action-hover-color;
+    text-decoration: none;
+    background-color: variables.$list-group-hover-bg;
+  }
+
+  &:focus-visible {
+    outline-offset: focus.$focus-style-outline-inside-offset;
+  }
+
+  &:active {
+    color: variables.$list-group-action-active-color;
+    background-color: variables.$list-group-action-active-bg;
+  }
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding-block: variables.$list-group-item-padding-y;
+  padding-inline: variables.$list-group-item-padding-x;
+  color: variables.$list-group-color;
+  text-decoration: none;
+  background-color: variables.$list-group-bg;
+  border: variables.$list-group-border-width solid variables.$list-group-border-color;
+  border-inline-width: 0;
+  margin: 0;
+
+  .list-group-item-heading {
+    color: variables.$headings-color;
+  }
+
+  &:first-child {
+    border-block-start: none;
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  &:last-child {
+    border-block-end-color: transparent;
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+
+  &:is(.disabled, :disabled) {
+    color: variables.$list-group-disabled-color;
+    pointer-events: none;
+    background-color: variables.$list-group-disabled-bg;
+  }
+
+  // Include both here for `<a>`s and `<button>`s
+  &.active {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: variables.$list-group-active-color;
+    background-color: variables.$list-group-active-bg;
+    border-color: variables.$list-group-active-border-color;
+  }
+
+  & + & {
+    border-block-start-width: 0;
+
+    &.active {
+      margin-block-start: -(variables.$list-group-border-width);
+      border-block-start-width: variables.$list-group-border-width;
+    }
+  }
+}
+
+.list-group-lg .list-group-item {
+  min-block-size: 64px;
+}
+
+.list-group-md .list-group-item {
+  min-block-size: 48px;
+}
+
+.list-header {
+  font-size: typography.$si-font-size-caption-1;
+  padding-block: variables.$list-group-item-padding-y;
+  padding-inline: variables.$list-group-item-padding-x;
+  color: variables.$headings-color;
+  margin-block-end: -1px;
+  border: 1px solid variables.$list-group-border-color;
+}
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  @include breakpoints.media-breakpoint-up($breakpoint) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+
+    .list-group-horizontal#{$infix} {
+      flex-direction: row;
+
+      > .list-group-item {
+        border-block-width: 0;
+
+        &:first-child {
+          border-end-start-radius: variables.$list-group-border-radius;
+          border-start-end-radius: 0;
+        }
+
+        &:last-child {
+          border-start-end-radius: variables.$list-group-border-radius;
+          border-end-start-radius: 0;
+        }
+
+        &.active {
+          margin-block-start: 0;
+        }
+
+        + .list-group-item {
+          border-inline-start-width: variables.$list-group-border-width;
+
+          &.active {
+            margin-inline-start: -(variables.$list-group-border-width);
+            border-inline-start-width: variables.$list-group-border-width;
+          }
+        }
+      }
+    }
+  }
+}
+
+.list-group-flush {
+  border-radius: 0;
+
+  > .list-group-item {
+    border-inline-width: 0;
+    border-block-width: 0 variables.$list-group-border-width;
+
+    &:last-child {
+      border-block-end-width: 0;
+    }
+  }
+}
+
+.list-group-item-secondary {
+  background-color: semantic-tokens.$element-ui-4;
+  color: semantic-tokens.$element-text-primary;
+}
+
+.list-group-item-success {
+  color: semantic-tokens.$element-text-success;
+  background: semantic-tokens.$element-base-success;
+}
+
+.list-group-item-warning {
+  color: semantic-tokens.$element-text-warning;
+  background: semantic-tokens.$element-base-warning;
+}
+
+.list-group-item-caution {
+  background-color: semantic-tokens.$element-base-caution;
+  color: semantic-tokens.$element-text-caution;
+}
+
+.list-group-item-danger {
+  color: semantic-tokens.$element-text-danger;
+  background: semantic-tokens.$element-base-danger;
+}
+
+.list-group-item-info {
+  color: semantic-tokens.$element-text-information;
+  background: semantic-tokens.$element-base-information;
+}

package/src/styles/bootstrap/_mixins.scss

@@ -0,0 +1,30 @@
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Deprecate
+@forward './mixins/deprecate';
+
+// Helpers
+@forward './mixins/breakpoints';
+@forward './mixins/image';
+@forward './mixins/visually-hidden';
+@forward './mixins/reset-text';
+@forward './mixins/text-truncate';
+
+// Utilities
+@forward './mixins/utilities';
+
+// Components
+@forward './mixins/backdrop';
+@forward './mixins/lists';
+@forward './mixins/table-row';
+
+// Skins
+@forward './mixins/gradients';
+@forward './mixins/transition';
+
+// Layout
+@forward './mixins/clearfix';
+@forward './mixins/container';
+@forward './mixins/grid';

package/src/styles/bootstrap/_modals.scss

@@ -0,0 +1,234 @@
+@use '../variables/spacers';
+@use '../variables/typography';
+@use '../variables/zindex';
+@use './functions';
+@use './mixins/backdrop';
+@use './mixins/breakpoints';
+@use './variables';
+
+@use 'sass:map';
+
+.modal {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  z-index: zindex.$zindex-modal;
+  display: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+  // See also https://github.com/twbs/bootstrap/issues/17695
+}
+
+.modal-dialog {
+  position: relative;
+  inline-size: auto;
+  margin: variables.$modal-dialog-margin;
+  // allow clicks to pass through for custom click handling to close modal
+  pointer-events: none;
+  // because of :focus-visible that shouldn't be visible
+  box-shadow: none !important; // stylelint-disable-line declaration-no-important
+
+  .modal.fade & {
+    transition: variables.$modal-transition;
+    transform: variables.$modal-fade-transform;
+  }
+
+  .modal.show & {
+    transform: variables.$modal-show-transform;
+  }
+
+  // When trying to close, animate focus to scale
+  .modal.modal-static & {
+    transform: variables.$modal-scale-transform;
+  }
+}
+
+.modal-dialog-scrollable {
+  block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2);
+
+  .modal-content {
+    max-block-size: 100%;
+    overflow: hidden;
+  }
+
+  .modal-body {
+    overflow-y: auto;
+  }
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-block-size: functions.subtract(100%, variables.$modal-dialog-margin * 2);
+}
+
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+  padding-block: variables.$modal-header-padding-y;
+  padding-inline: variables.$modal-header-padding-x;
+  border-start-start-radius: variables.$modal-content-inner-border-radius;
+  border-start-end-radius: variables.$modal-content-inner-border-radius;
+
+  .btn-close {
+    padding-block: variables.$modal-header-padding-y * 0.5;
+    padding-inline: variables.$modal-header-padding-x * 0.5;
+    margin: 0;
+  }
+
+  .icon {
+    font-size: 2rem;
+    margin-inline-end: map.get(spacers.$spacers, 4);
+  }
+
+  .modal-title {
+    flex: 1;
+  }
+}
+
+.modal-title {
+  font-size: typography.$si-font-size-title-1;
+  font-weight: typography.$si-font-weight-title-1;
+  line-height: variables.$modal-title-line-height;
+  margin-block-end: 0;
+}
+
+.modal-backdrop {
+  @include backdrop.overlay-backdrop(
+    zindex.$zindex-modal-backdrop,
+    variables.$modal-backdrop-bg,
+    variables.$modal-backdrop-opacity
+  );
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+  // counteract the pointer-events: none; in the .modal-dialog
+  color: variables.$modal-content-color;
+  pointer-events: auto;
+  background-color: variables.$modal-content-bg;
+  background-clip: padding-box;
+  border-radius: variables.$modal-content-border-radius;
+  box-shadow: variables.$modal-content-box-shadow-xs;
+  // Remove focus outline from opened modal
+  outline: 0;
+}
+
+.modal-body {
+  position: relative;
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when there should be a fixed height on `.modal-dialog`.
+  flex: 1 1 auto;
+  padding-block: map.get(spacers.$spacers, 5) variables.$modal-inner-padding;
+  // use margin instead of padding so that the scrollbar isn't on the edge of the dialog
+  margin-inline: variables.$modal-inner-padding;
+  padding-inline: 0;
+
+  .modal-dialog-scrollable & {
+    padding-block: 0;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  align-items: center; // vertically center
+  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+  padding: (variables.$modal-inner-padding - variables.$modal-footer-margin-between * 0.5);
+  border-end-start-radius: variables.$modal-content-inner-border-radius;
+  border-end-end-radius: variables.$modal-content-inner-border-radius;
+
+  // Place margin between footer elements
+  // This solution is far from ideal because of the universal selector usage,
+  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+  > * {
+    margin: (variables.$modal-footer-margin-between * 0.5);
+  }
+}
+
+@media (max-width: 400px) {
+  .modal-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+// Scale up the modal
+@include breakpoints.media-breakpoint-up(sm) {
+  // Automatically set modal's width for larger viewports
+  .modal-dialog {
+    max-inline-size: variables.$modal-md;
+    margin-block: variables.$modal-dialog-margin-y-sm-up;
+    margin-inline: auto;
+  }
+
+  .modal-dialog-scrollable {
+    block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2);
+  }
+
+  .modal-dialog-centered {
+    min-block-size: functions.subtract(100%, variables.$modal-dialog-margin-y-sm-up * 2);
+  }
+
+  .modal-content {
+    box-shadow: variables.$modal-content-box-shadow-sm-up;
+  }
+
+  .modal-sm {
+    max-inline-size: variables.$modal-sm;
+  }
+}
+
+@include breakpoints.media-breakpoint-up(lg) {
+  .modal-lg,
+  .modal-xl {
+    max-inline-size: variables.$modal-lg;
+  }
+}
+
+@include breakpoints.media-breakpoint-up(xl) {
+  .modal-xl {
+    max-inline-size: variables.$modal-xl;
+  }
+}
+
+// scss-docs-start modal-fullscreen-loop
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $postfix: if($infix != '', $infix + '-down', '');
+
+  @include breakpoints.media-breakpoint-down($breakpoint) {
+    .modal-fullscreen#{$postfix} {
+      inline-size: 100vw;
+      max-inline-size: none;
+      block-size: 100%;
+      margin: 0;
+
+      .modal-content {
+        block-size: 100%;
+        border: 0;
+      }
+
+      :is(.modal-header, .modal-content, .modal-footer) {
+        border-radius: 0;
+      }
+
+      .modal-body {
+        overflow-y: auto;
+      }
+    }
+  }
+}

package/src/styles/bootstrap/_nav.scss

@@ -0,0 +1,155 @@
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use './variables';
+
+@use 'sass:map';
+
+$nav-tabs-height: 40px;
+$nav-tabs-min-width: 100px;
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-inline-start: 0;
+  margin-block-end: 0;
+  list-style: none;
+
+  .nav-link {
+    &:hover {
+      color: semantic-tokens.$element-action-secondary-text-hover;
+      background: semantic-tokens.$element-action-secondary-hover;
+      border-color: semantic-tokens.$element-action-secondary-border-hover;
+    }
+  }
+}
+
+.nav-link {
+  display: block;
+  padding-block: variables.$nav-link-padding-y;
+  padding-inline: variables.$nav-link-padding-x;
+  font-size: variables.$nav-link-font-size;
+  font-weight: variables.$nav-link-font-weight;
+  color: variables.$nav-link-color;
+
+  &:is(:hover, :focus) {
+    color: variables.$nav-link-hover-color;
+    text-decoration: none;
+  }
+
+  // Disabled state lightens text
+  &.disabled {
+    color: variables.$nav-link-disabled-color;
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+.nav-tabs {
+  position: relative;
+  block-size: $nav-tabs-height;
+  line-height: 1.125rem;
+  border: 0;
+  flex-wrap: nowrap;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: variables.$nav-tabs-border-width;
+    background: semantic-tokens.$element-ui-4;
+  }
+
+  &:focus-visible::before {
+    // because otherwise the focus is cut off
+    background: semantic-tokens.$element-focus-default;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: $nav-tabs-height;
+    min-inline-size: $nav-tabs-min-width;
+    margin-block-end: -(variables.$nav-tabs-border-width);
+    background: none;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 0 0 variables.$nav-tabs-border-width;
+    border-start-start-radius: variables.$btn-border-radius;
+    border-start-end-radius: variables.$btn-border-radius;
+    cursor: pointer;
+
+    .badge {
+      margin-inline-start: map.get(spacers.$spacers, 1);
+      margin-block-start: -7px;
+      flex-shrink: 0;
+    }
+
+    &.active {
+      border-color: semantic-tokens.$element-action-secondary-border-hover;
+    }
+
+    &:hover {
+      isolation: isolate;
+    }
+
+    &.disabled {
+      color: variables.$nav-link-disabled-color;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  :is(.nav-link.active, .nav-item.show .nav-link) {
+    color: variables.$nav-tabs-link-active-color;
+  }
+
+  .dropdown-menu {
+    // Make dropdown border overlap tab border
+    margin-block-start: -(variables.$nav-tabs-border-width);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}
+
+//
+// Justified variants
+//
+
+.nav-fill {
+  > .nav-link,
+  .nav-item {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
+
+.nav-justified {
+  > .nav-link,
+  .nav-item {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}
+
+:is(.nav-fill, .nav-justified) {
+  .nav-item .nav-link {
+    inline-size: 100%; // Make sure button will grow
+  }
+}
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+
+  > .active {
+    display: block;
+  }
+}

package/src/styles/bootstrap/_pagination.scss

@@ -0,0 +1,58 @@
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use 'mixins/lists';
+
+@use 'sass:map';
+
+$page-button-size: 24px;
+
+.pagination {
+  display: flex;
+  margin: 0;
+  padding-block: map.get(spacers.$spacers, 4);
+  @include lists.list-unstyled();
+}
+
+.page-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ($page-button-size * 0.5);
+  min-inline-size: $page-button-size;
+  block-size: $page-button-size;
+  padding-block: 0;
+  padding-inline: map.get(spacers.$spacers, 2);
+  margin-inline: map.get(spacers.$spacers, 1);
+  background: transparent;
+  font-size: typography.$si-font-size-title-2;
+  font-weight: typography.$si-font-weight-title-2;
+  color: semantic-tokens.$element-text-primary;
+  border: 0;
+
+  &:is(.active, :hover:not(:disabled)):not(.separator) {
+    background: semantic-tokens.$element-base-1-selected;
+  }
+
+  &:has(.icon) {
+    padding-inline: 0;
+  }
+
+  &.disabled {
+    opacity: semantic-tokens.$element-action-disabled-opacity;
+  }
+
+  &.separator {
+    font-weight: normal;
+  }
+}
+
+.page-link {
+  cursor: pointer;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+}