@siemens/element-theme 47.0.0

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

@@ -0,0 +1,86 @@
+@use '../variables';
+
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:string';
+@use 'sass:meta';
+
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+  $values: map.get($utility, values);
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
+    $values: list.zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map.get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if meta.type-of($properties) == 'string' {
+      $properties: list.append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: if(
+      map.has-key($utility, class),
+      map.get($utility, class),
+      list.nth($properties, 1)
+    );
+    $property-class: if($property-class == null, '', $property-class);
+
+    // State params to generate pseudo-classes
+    $state: if(map.has-key($utility, state), map.get($utility, state), ());
+
+    $infix: if(
+      $property-class == '' and string.slice($infix, 1, 1) == '-',
+      string.slice($infix, 2),
+      $infix
+    );
+
+    // Don't prefix if value key is null (eg. with shadow class)
+    $property-class-modifier: if(
+      $key,
+      if($property-class == '' and $infix == '', '', '-') + $key,
+      ''
+    );
+
+    $is-css-var: map.get($utility, css-var);
+    $is-local-vars: map.get($utility, local-vars);
+
+    @if $value != null {
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{variables.$variable-prefix}#{$property-class}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{variables.$variable-prefix}#{$property-class}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $value in $is-local-vars {
+                --#{variables.$variable-prefix}#{$local-var}: #{$value};
+              }
+            }
+            #{$property}: $value if(variables.$enable-important-utilities, !important, null);
+          }
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              #{$property}: $value if(variables.$enable-important-utilities, !important, null);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+// stylelint-disable declaration-no-important
+
+// Hide content visually while keeping it accessible to assistive technologies
+//
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin visually-hidden() {
+  position: absolute !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Use to only display content when it's focused, or one of its child elements is focused
+// (i.e. when focus is within the element/container that the class was applied to)
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+
+@mixin visually-hidden-focusable() {
+  &:not(:focus):not(:focus-within) {
+    @include visually-hidden();
+  }
+}

package/src/styles/components/_application-header.scss

@@ -0,0 +1,244 @@
+@use '../bootstrap/mixins/breakpoints';
+@use '../bootstrap/variables' as bootstrap-variables;
+@use '../variables';
+@use '../variables/elevation';
+@use '../variables/semantic-tokens';
+@use '../variables/spacers';
+@use '../variables/typography';
+@use '../variables/zindex';
+
+@use 'sass:map';
+
+.has-application-header,
+.has-navbar-fixed-top {
+  padding-block-start: calc(
+    variables.$si-application-header-height + variables.$si-titlebar-spacing +
+      variables.$si-system-banner-spacing
+  );
+}
+
+.application-header {
+  display: flex;
+  flex-wrap: wrap;
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: calc(
+    var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)
+  );
+  z-index: zindex.$zindex-application-header;
+  background: semantic-tokens.$element-base-1;
+  min-block-size: variables.$si-application-header-height;
+  align-items: stretch;
+  border-block-end: 1px solid semantic-tokens.$element-ui-4;
+
+  // hide border when mobile styles are applied and either the dropdown-menu or header-toggle is shown
+  &:has(.dropdown-menu.show, .header-toggle.show) {
+    border-block-end: none;
+  }
+
+  // does not affect desktop styles, as in the desktop mode the dropdown-menu is rendered within the CDK overlay
+  .dropdown-menu {
+    order: 2;
+    flex-basis: 100%;
+    box-shadow: none;
+    border-block-start: 1px solid semantic-tokens.$element-ui-4;
+    margin-block: 0;
+    border-radius: 0;
+  }
+
+  // does not affect desktop styles, as in the desktop mode each dropdown-menu is rendered in a separate CDK overlay
+  :is(.header-navigation, .header-collapsible-actions, .dropdown-menu) .dropdown-menu {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    order: initial;
+
+    .dropdown-header {
+      padding-inline-start: 28px;
+    }
+  }
+}
+
+.header-brand {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+}
+
+.header-logo {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  box-sizing: content-box;
+  inline-size: semantic-tokens.$element-brand-logo-width;
+  min-block-size: semantic-tokens.$element-brand-logo-height;
+  content: #{semantic-tokens.$element-brand-logo} / semantic-tokens.$element-brand-logo-text;
+}
+
+.application-name {
+  font-size: typography.$si-font-size-body-1;
+  font-weight: typography.$si-font-weight-body-1;
+  padding: map.get(spacers.$spacers, 5);
+  white-space: nowrap;
+}
+
+%collapsible-expanded {
+  order: 2;
+  flex-basis: 100%;
+  display: flex;
+  flex-flow: column;
+  padding-block: map.get(spacers.$spacers, 4);
+  border-block-start: 1px solid semantic-tokens.$element-ui-4;
+}
+
+.header-navigation {
+  display: none;
+
+  .application-header.show-navigation & {
+    @extend %collapsible-expanded;
+  }
+}
+
+.header-collapsible-actions {
+  display: none;
+
+  &.show {
+    @extend %collapsible-expanded;
+  }
+}
+
+.header-actions {
+  display: contents;
+}
+
+.header-toggle {
+  color: semantic-tokens.$element-text-primary;
+  border: 0;
+  line-height: 0;
+  padding: map.get(spacers.$spacers, 4);
+  font-size: 32px;
+  background-color: transparent; // remove default button style
+
+  &:is(:hover, .show, :active) {
+    background: semantic-tokens.$element-base-1-hover;
+    text-decoration: none;
+  }
+}
+
+.header-item {
+  --si-header-item-border: transparent;
+  display: flex;
+  flex-basis: 0;
+  align-items: center;
+  position: relative;
+  color: semantic-tokens.$element-text-primary;
+  inline-size: 100%;
+  font-size: typography.$si-font-size-title-1;
+  line-height: typography.$si-line-height-title-1;
+  font-weight: typography.$si-font-weight-title-1;
+  padding-block: 15px;
+  padding-inline: map.get(spacers.$spacers, 5);
+  background: none;
+  box-shadow: none;
+  border: 0;
+  white-space: nowrap;
+
+  .icon {
+    margin-block: -3px;
+
+    ~ .item-title {
+      padding-inline-start: map.get(spacers.$spacers, 5);
+    }
+  }
+
+  .dropdown-caret {
+    display: none;
+  }
+
+  :is(.header-navigation, .header-collapsible-actions) & .dropdown-caret {
+    display: block;
+  }
+
+  &:hover {
+    color: semantic-tokens.$element-text-primary;
+    background-color: semantic-tokens.$element-base-1-hover;
+    text-decoration: none;
+  }
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline: 0;
+    block-size: map.get(spacers.$spacers, 2);
+    background: var(--si-header-item-border);
+  }
+
+  &.header-selection-item {
+    color: semantic-tokens.$element-action-secondary-text;
+    font-size: typography.$si-font-size-title-2;
+    font-weight: typography.$si-font-weight-title-2;
+    line-height: typography.$si-line-height-title-2;
+
+    &:hover {
+      color: semantic-tokens.$element-action-secondary-text-hover;
+    }
+  }
+}
+
+@each $breakpoint in map.keys(bootstrap-variables.$grid-breakpoints) {
+  @include breakpoints.media-breakpoint-up($breakpoint) {
+    .expand-#{$breakpoint} {
+      &.application-header {
+        flex-wrap: nowrap;
+      }
+
+      .header-brand {
+        display: flex;
+        flex: 1 1 33.333%;
+        justify-content: flex-start;
+      }
+
+      .header-navigation {
+        display: flex;
+        flex: 1 1 33.333%;
+        justify-content: center;
+
+        .header-item {
+          &.active {
+            color: semantic-tokens.$element-action-primary;
+            --si-header-item-border: #{semantic-tokens.$element-action-primary};
+          }
+
+          &:hover {
+            color: semantic-tokens.$element-action-primary-hover;
+            --si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
+          }
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        flex: 1 1 33.333%;
+        justify-content: flex-end;
+      }
+
+      .header-collapsible-actions {
+        display: contents;
+
+        .header-item .dropdown-caret {
+          display: none;
+        }
+      }
+
+      .header-toggle {
+        display: none;
+      }
+
+      .header-item {
+        inline-size: auto;
+        flex-basis: auto;
+      }
+    }
+  }
+}

package/src/styles/components/_container-grid.scss

@@ -0,0 +1,99 @@
+@use '../bootstrap/mixins/breakpoints';
+@use '../bootstrap/mixins/grid';
+@use '../bootstrap/variables';
+
+// Extends the Bootstrap grid system with additional container classes which are
+// not based on media queries for their responsiveness. Instead, the size
+// classes are manually applied (or via JavaScript). Available classes:
+// si-container-xs, si-container-sm, si-container-md, si-container-lg
+//
+// This is implemented by resetting (actually setting to "defaults") the bootstrap
+// grid framework classes if we're in the context of a `container-*` class.
+
+%reset-col {
+  flex: unset;
+  inline-size: 100%;
+}
+
+@mixin reset-grid($breakpoint) {
+  $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+
+  @for $i from 1 through variables.$grid-columns {
+    .col#{$infix}-#{$i} {
+      @extend %reset-col;
+    }
+  }
+}
+
+@mixin make-grid($breakpoint) {
+  $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+
+  @for $i from 1 through variables.$grid-columns {
+    .col#{$infix}-#{$i} {
+      @include grid.make-col($i, variables.$grid-columns);
+    }
+  }
+
+  // `$columns - 1` because offsetting by the width of an entire row isn't possible
+  @for $i from 0 through (variables.$grid-columns - 1) {
+    // Avoid emitting useless .offset-0
+    @if $infix != '' and $i > 0 {
+      .offset#{$infix}-#{$i} {
+        @include grid.make-col-offset($i, variables.$grid-columns);
+      }
+    }
+  }
+}
+
+// reset grid
+.si-container-xs {
+  @include reset-grid(sm);
+}
+
+:is(.si-container-xs, .si-container-sm) {
+  @include reset-grid(md);
+}
+
+:is(.si-container-xs, .si-container-sm, .si-container-md) {
+  @include reset-grid(lg);
+}
+
+:is(.si-container-xs, .si-container-sm, .si-container-md, .si-container-lg) {
+  @include reset-grid(xl);
+}
+
+:is(.si-container-xs, .si-container-sm, .si-container-md, .si-container-lg, .si-container-xl) {
+  @include reset-grid(xxl);
+}
+
+// make grid
+:is(
+  .si-container-xs,
+  .si-container-sm,
+  .si-container-md,
+  .si-container-lg,
+  .si-container-xl,
+  .si-container-xxl
+) {
+  @include make-grid(xs);
+}
+
+:is(.si-container-sm, .si-container-md, .si-container-lg, .si-container-xl, .si-container-xxl) {
+  @include make-grid(sm);
+}
+
+:is(.si-container-md, .si-container-lg, .si-container-xl, .si-container-xxl) {
+  @include make-grid(md);
+}
+
+:is(.si-container-lg, .si-container-xl, .si-container-xxl) {
+  @include make-grid(lg);
+}
+
+:is(.si-container-xl, .si-container-xxl) {
+  @include make-grid(xl);
+}
+
+.si-container-xxl {
+  @include make-grid(xxl);
+}