@swisspost/design-system-styles 6.2.1 → 6.2.2

package/basics.scss

@@ -3,6 +3,7 @@
 @use './lic/bootstrap-license';
 
 @use 'components/base';
+@use 'components/elevation';
 @use 'components/type';
 @use 'components/utilities';
 @use 'components/sizing';

package/components/_index.scss

@@ -11,6 +11,7 @@
 @use 'card';
 @use 'carousel';
 @use 'close';
+@use 'elevation';
 @use 'form-range';
 @use 'form-select';
 @use 'datatable';

package/components/alert.scss

@@ -176,7 +176,7 @@
       align-self: stretch;
 
       .btn {
-        flex: 1 0 100%;
+        flex: 1 0 auto;
       }
     }
   }

package/components/elevation.scss

@@ -0,0 +1,7 @@
+@use '../variables/elevation';
+
+@each $key, $value in elevation.$elevation-map {
+  .#{$key} {
+    box-shadow: #{$value};
+  }
+}

package/components/floating-label.scss

@@ -19,15 +19,16 @@
     left: forms.$input-border-width;
     margin: 0;
     padding-inline: forms.$form-floating-padding-x;
-    padding-block: calc(
+    padding-top: calc(
       #{forms.$input-border-width} + #{forms.$form-floating-label-height * 0.5} - #{forms.$form-floating-label-font-size *
         type.$line-height-copy * 0.5}
     );
-    height: forms.$form-floating-label-height;
+    padding-bottom: 0;
     border: 0;
     color: forms.$form-floating-label-color;
     font-size: forms.$form-floating-label-font-size;
     width: auto;
+    height: auto;
     max-width: calc(100% - (forms.$input-border-width * 2));
     white-space: nowrap;
     overflow: hidden;

package/components/icons.scss

@@ -41,7 +41,7 @@
   }
 }
 
-@each $name, $path in vars.$svg-icon-map {
+@each $name in vars.$legacy-icon-set {
   .pi-#{$name} {
     @include icon-mixin.pi($name);
   }

package/components/stepper.scss

@@ -48,7 +48,7 @@
     justify-self: end;
     align-items: end;
     text-align: right;
-    transform: translateX(#{0.5 * stepper.$stepper-indicator-height});
+    margin-right: -0.5 * stepper.$stepper-indicator-height;
   }
 
   &:not(:first-child):not(:last-child) {

package/components/tabs.scss

@@ -86,6 +86,7 @@
       opacity: 1;
       background-color: nav.$nav-tabs-link-active-bg;
       color: var(--post-contrast-color);
+      box-shadow: none;
 
       &::after {
         content: '';

package/components/tooltip.scss

@@ -3,21 +3,39 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/tooltip' as bt;
 
+@use './../variables/components/tooltips';
+
 // There's a 1px-gap between the arrow and the tooltip-body.
 // We can fix that by moving the arrow to the opposite direction, according to the tooltip-positioning (position top -> move direction bottom etc)
 
-.bs-tooltip-top .arrow {
-  bottom: 1px;
+.bs-tooltip-top {
+  margin-bottom: tooltips.$tooltip-arrow-height !important;
+
+  .arrow {
+    bottom: 1px;
+  }
 }
 
-.bs-tooltip-right .arrow {
-  left: 1px;
+.bs-tooltip-end {
+  margin-left: tooltips.$tooltip-arrow-height !important;
+
+  .arrow {
+    left: 1px;
+  }
 }
 
-.bs-tooltip-bottom .arrow {
-  top: 1px;
+.bs-tooltip-bottom {
+  margin-top: tooltips.$tooltip-arrow-height !important;
+
+  .arrow {
+    top: 1px;
+  }
 }
 
-.bs-tooltip-left .arrow {
-  right: 1px;
+.bs-tooltip-start {
+  margin-right: tooltips.$tooltip-arrow-height !important;
+
+  .arrow {
+    right: 1px;
+  }
 }

package/components/utilities.scss

@@ -1,6 +1,7 @@
 @forward './../variables/options';
 
 @use 'sass:map';
+@use 'sass:color' as sass-color;
 @use 'sass:list';
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
@@ -66,6 +67,7 @@ span.spacer {
 @each $name, $color in color.$background-colors {
   .bg-#{$name} {
     --post-bg-rgb: #{color-fn.rgb-values($color)};
+
     @extend %color-background-rgba;
 
     @if (contrast-fn.light-or-dark($color) == 'dark') {

package/functions/_icons.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use 'sass:string';
-@use './../variables/icons';
+
+@use './color';
 @use './utilities';
-@use './../functions/color';
+@use './../variables/icons';
 
 @function add-fill-color($svg, $color) {
   $opacity: alpha($color);
@@ -47,25 +47,29 @@
 }
 
 @function get-colored-svg-url($icon-name, $color) {
-  $pathdefinition: map.get(icons.$svg-icon-map, #{$icon-name});
+  $svg-url: '';
 
-  @if (not map.has-key(icons.$svg-icon-map, #{$icon-name})) {
+  @if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
+    $svg-url: map.get(icons.$svg-icon-map, #{$icon-name});
+  } @else if(map.has-key(icons.$svg-unofficial-icon-map, #{$icon-name})) {
+    $svg-url: icons.$svg-pre-path +
+      map.get(icons.$svg-unofficial-icon-map, #{$icon-name}) +
+      icons.$svg-post-path;
+  } @else {
     @error "Icon '#{$icon-name}' does not exist.";
   }
 
-  $svg-url: add-fill-color(icons.$svg-pre-path + $pathdefinition + icons.$svg-post-path, $color);
-
-  @return $svg-url;
+  @return add-fill-color($svg-url, $color);
 }
 
 @function get-pre-colored-svg-url($icon-name) {
-  $pathdefinition: map.get(icons.$svg-pre-colored-icon-map, #{$icon-name});
+  $path-definition: map.get(icons.$svg-pre-colored-icon-map, #{$icon-name});
 
   @if (not map.has-key(icons.$svg-pre-colored-icon-map, #{$icon-name})) {
     @error "Icon '#{$icon-name}' does not exist.";
   }
 
-  $svg-url: icons.$svg-pre-path + $pathdefinition + icons.$svg-post-path;
+  $svg-url: icons.$svg-pre-path + $path-definition + icons.$svg-post-path;
 
   @return $svg-url;
 }