@swisspost/design-system-styles 6.3.0 → 6.4.1

package/components/stepper.scss

@@ -1,4 +1,5 @@
 @use './../mixins/size' as size-mx;
+@use './../mixins/icons' as icons-mx;
 @use './../mixins/utilities';
 
 @use './../variables/spacing';
@@ -35,63 +36,28 @@
 
 .stepper-item {
   counter-increment: step-index;
+  position: relative;
   display: flex;
   flex-direction: column;
-
-  &:first-child {
-    justify-self: start;
-    align-items: start;
-    transform: translateX(#{-0.5 * stepper.$stepper-indicator-height});
-  }
-
-  &:last-child {
-    justify-self: end;
-    align-items: end;
-    text-align: right;
-    margin-right: -0.5 * stepper.$stepper-indicator-height;
-  }
-
-  &:not(:first-child):not(:last-child) {
-    grid-column-end: span 2;
-    align-items: center;
-  }
-
-  &[aria-current] {
-    pointer-events: none;
-  }
+  transition: color 250ms;
 
   // Stepper indicator styles
   &::before {
     content: '';
     pointer-events: none;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: stepper.$stepper-indicator-height;
     width: stepper.$stepper-indicator-height;
-    line-height: stepper.$stepper-indicator-height - 2 * stepper.$stepper-indicator-border-width;
     margin-bottom: -1 * stepper.$stepper-indicator-height;
     color: stepper.$stepper-indicator-color;
     background-color: stepper.$stepper-indicator-bg;
-    background-image: stepper.$stepper-indicator-check-icon;
-    background-size: spacing.$size-large;
-    background-position: center;
-    background-repeat: no-repeat;
     border: stepper.$stepper-indicator-border-width solid stepper.$stepper-indicator-border-color;
     border-radius: 50%;
     font-size: stepper.$stepper-indicator-font-size;
     font-weight: stepper.$stepper-indicator-font-weight;
-    transition: background 250ms, color 250ms;
-  }
-
-  &[aria-current]::before,
-  &[aria-current] ~ &::before {
-    background-image: none;
-    content: counter(step-index);
-  }
-
-  &:hover::before {
-    color: stepper.$stepper-indicator-hover-color;
-    background-color: stepper.$stepper-indicator-hover-bg;
-    background-image: stepper.$stepper-indicator-hover-check-icon;
+    transition: background 250ms;
   }
 
   &[aria-current] ~ ::before {
@@ -102,9 +68,75 @@
   &:is(:focus-visible, :focus-within)::before {
     outline: stepper.$stepper-indicator-hover-outline;
   }
+
+  // Check icon (for completed steps only)
+  &::after {
+    @include icons-mx.icon(2105);
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0.5 * (stepper.$stepper-indicator-height - stepper.$stepper-indicator-check-icon-size);
+    height: stepper.$stepper-indicator-check-icon-size;
+    width: stepper.$stepper-indicator-check-icon-size;
+  }
+
+  &[aria-current],
+  &[aria-current] ~ & {
+    pointer-events: none;
+
+    &::before {
+      content: counter(step-index);
+    }
+
+    &::after {
+      content: unset;
+    }
+  }
+
+  // First stepper item - left aligned
+  &:first-child {
+    justify-self: start;
+    align-items: start;
+    transform: translateX(#{-0.5 * stepper.$stepper-indicator-height});
+
+    &::after {
+      left: 0.5 * (stepper.$stepper-indicator-height - stepper.$stepper-indicator-check-icon-size);
+    }
+  }
+
+  // Last stepper item - right aligned
+  &:last-child {
+    justify-self: end;
+    align-items: end;
+    text-align: right;
+    margin-right: -0.5 * stepper.$stepper-indicator-height;
+
+    &::after {
+      right: 0.5 * (stepper.$stepper-indicator-height - stepper.$stepper-indicator-check-icon-size);
+    }
+  }
+
+  // Other stepper items - centered
+  &:not(:first-child):not(:last-child) {
+    grid-column-end: span 2;
+    align-items: center;
+
+    &::after {
+      left: calc(50% - #{0.5 * stepper.$stepper-indicator-check-icon-size});
+    }
+  }
+
+  &:hover {
+    color: stepper.$stepper-indicator-hover-color;
+
+    &::before {
+      background-color: stepper.$stepper-indicator-hover-bg;
+    }
+  }
 }
 
 .stepper-link {
+  z-index: 1;
   padding-top: stepper.$stepper-indicator-height + stepper.$stepper-link-gap;
   text-decoration: none;
   color: stepper.$stepper-link-color;
@@ -155,7 +187,6 @@
       line-height: calc(#{stepper.$stepper-indicator-height} + 2 * #{spacing.$size-line});
       color: ButtonText;
       background-color: ButtonFace;
-      background-image: stepper.$stepper-indicator-hover-check-icon;
       border: 0;
       outline: spacing.$size-line solid VisitedText;
       outline-offset: -3 * spacing.$size-line;

package/components/subnavigation.scss

@@ -3,7 +3,6 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
 
-@use './../mixins';
 @use './../mixins/utilities';
 @use './../functions/utilities' as utility-functions;
 @use './../variables/components/subnavigation';
@@ -18,7 +17,7 @@ $module-name: 'subnavigation';
   background-color: subnavigation.$subnavigation-background-color;
 
   &::after {
-    @include mixins.full-width-underscore(
+    @include utilities.full-width-underscore(
       subnavigation.$subnavigation-border-bottom-color,
       subnavigation.$subnavigation-border-bottom-width
     );
@@ -96,7 +95,7 @@ $module-name: 'subnavigation';
     }
 
     &:not(.active)::after {
-      @include mixins.full-width-underscore(
+      @include utilities.full-width-underscore(
         #{subnavigation.$subnavigation-link-underscore-color-hover},
         #{subnavigation.$subnavigation-link-underscore-height}
       );
@@ -121,7 +120,7 @@ $module-name: 'subnavigation';
       font-weight: $font-weight-bold;
 
       &::after {
-        @include mixins.full-width-underscore(
+        @include utilities.full-width-underscore(
           #{subnavigation.$subnavigation-link-underscore-color-active},
           #{subnavigation.$subnavigation-link-underscore-height}
         );

package/components/tabs/_tab-title.scss

@@ -0,0 +1,152 @@
+@forward './../../variables/options';
+
+@use './../../mixins/color' as color-mx;
+@use './../../mixins/utilities' as utilities-mx;
+@use './../../variables/color';
+@use './../../variables/spacing';
+@use './../../variables/components/nav';
+
+.tab-title {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: nav.$nav-link-padding;
+  transition: background-color 100ms;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  outline-color: currentColor;
+  opacity: 0.7;
+  color: var(--post-contrast-color);
+  text-decoration: none;
+
+  &:focus {
+    background-color: unset;
+    color: var(--post-contrast-color);
+  }
+
+  &:hover {
+    opacity: 1;
+    background-color: nav.$nav-tabs-link-active-bg;
+    color: var(--post-contrast-color);
+  }
+
+  // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
+  &:focus-visible {
+    outline: transparent;
+    opacity: 1;
+    background-color: nav.$nav-tabs-link-active-bg;
+    color: var(--post-contrast-color);
+    box-shadow: none;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: nav.$nav-tabs-focus-box-shadow-width;
+      right: nav.$nav-tabs-focus-box-shadow-width - 1px;
+      bottom: 0;
+      left: nav.$nav-tabs-focus-box-shadow-width - 1px;
+      box-shadow: nav.$nav-tabs-focus-box-shadow;
+    }
+  }
+
+  &.active {
+    z-index: 1; // Lift above the line and make focus visible all around
+    border-right-color: nav.$nav-tabs-border-color;
+    border-left-color: nav.$nav-tabs-border-color;
+    opacity: 1;
+    background-color: nav.$nav-tabs-link-active-bg;
+    color: var(--post-contrast-color);
+    font-weight: 700;
+
+    // Create a line that does not suffer from border corner mitering
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      right: -1px;
+      left: -1px;
+      height: spacing.$size-micro;
+      background-color: nav.$nav-tabs-link-active-border-color;
+    }
+  }
+
+  // Tabs with dark backgrounds
+  @include color-mx.on-dark-background() {
+    &:hover {
+      background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+    }
+
+    &:focus-visible {
+      background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+    }
+  }
+
+  @include utilities-mx.high-contrast-mode() {
+    opacity: 1;
+    border-left-color: Canvas;
+    border-right-color: Canvas;
+    color: LinkText;
+
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      outline: spacing.$size-line solid Highlight;
+      outline-offset: -(spacing.$size-micro);
+    }
+
+    &.active {
+      border-left-color: ButtonText;
+      border-right-color: ButtonText;
+      color: Highlight;
+
+      &::before {
+        background-color: Highlight;
+      }
+    }
+  }
+}
+
+// Careful, this generates a lot of code
+@each $key, $color in color.$background-colors {
+  .bg-#{$key} {
+    .tab-title {
+      background-color: $color;
+
+      &.active {
+        background-color: $color;
+      }
+    }
+
+    .nav-item {
+      background-color: $color;
+    }
+  }
+}
+
+[class*='bg-'] .tab-title.active {
+  &:focus {
+    &::after {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  // write supports for selectors this way: https://stackoverflow.com/a/62666132
+  // need to include * otherwise it throws build error
+  @supports #{'\selector(*:focus-visible)'} {
+    &:focus {
+      &::after {
+        background-color: unset;
+      }
+    }
+
+    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
+    &:focus-visible {
+      &::after {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}

package/components/tabs/_tabs-wrapper.scss

@@ -0,0 +1,69 @@
+@forward './../../variables/options';
+
+@use './../../mixins/utilities' as utilities-mx;
+@use './../../variables/color';
+@use './../../variables/spacing';
+@use './../../variables/components/nav';
+
+.tabs-wrapper {
+  position: relative;
+  padding-top: spacing.$spacer;
+  border: 0;
+  background-color: color.$gray-background-light;
+
+  // Create a line that lies below the active but above the passive elements
+  // This way hover works smoothly with the background color
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: nav.$nav-tabs-border-color;
+  }
+
+  // Small hack to save a lot of code and provide a lot of flexibility to tabs coloring
+  .tabs {
+    background-color: transparent !important;
+  }
+
+  @include utilities-mx.high-contrast-mode() {
+    &::after {
+      background-color: ButtonBorder;
+    }
+  }
+}
+
+.tabs {
+  @include utilities-mx.reset-list;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  white-space: nowrap;
+
+  // Scrolling fix to make the tabs scroll a little more so the right most tab is not
+  // flush with the window border
+  &::after {
+    content: '';
+    display: block;
+    flex: 1 0 auto;
+    width: nav.$nav-link-padding-x;
+  }
+}
+
+.tab-content {
+  padding-top: spacing.$spacer;
+  padding-bottom: spacing.$spacer;
+}
+
+// Careful, this generates a lot of code
+@each $key, $color in color.$background-colors {
+  .bg-#{$key} {
+    .tabs-wrapper {
+      background-color: $color;
+    }
+  }
+}

package/components/tabs/index.scss

@@ -0,0 +1,2 @@
+@use 'tabs-wrapper';
+@use 'tab-title';

package/components/timepicker.scss

@@ -36,14 +36,10 @@
 
   .ngb-tp-chevron {
     &::before {
-      @include icon-mixins.pi('2051');
+      @include icon-mixins.icon('2051');
       width: map.get(button.$btn-icon-size-map, 'md');
       height: map.get(button.$btn-icon-size-map, 'md');
       transform: none;
-      border: 0;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: contain;
     }
 
     &.bottom::before {

package/components/toast.scss

@@ -5,7 +5,6 @@
 
 @use './../mixins/notification' as notification-mx;
 @use './../placeholders/close' as close-ph;
-@use './../placeholders/notification' as notification-ph;
 
 @use './../variables/commons';
 @use './../variables/spacing';
@@ -13,12 +12,17 @@
 
 .toast {
   @include notification-mx.notification-size(toast);
+  @include notification-mx.notification-body(toast);
   @include notification-mx.notification-dismissible(toast, 'toast-close-button');
-  @extend %notification-body;
 }
 
 .toast-close-button {
   @extend %btn-close;
+
+  // Hide ngx-toastr close-button and keep our. Only useful when toast is used programmatically with ngx-toastr.
+  > span {
+    display: none;
+  }
 }
 
 .toast-title {

package/components/topic-teaser.scss

@@ -4,13 +4,13 @@
 
 @use './../themes/bootstrap/core' as *;
 
-@use './../functions/icons';
 @use './../variables/color';
 @use './../variables/grid';
 @use './../variables/spacing';
 @use './../variables/type';
 @use './../variables/components/topic-teaser';
 @use './../mixins/size';
+@use './../mixins/icons' as icons-mx;
 
 .topic-teaser {
   &[class*='bg-'] {
@@ -119,10 +119,14 @@
       @include make-col($size);
     }
   }
+  @each $breakpoint, $gap in topic-teaser.$content-gap {
+    @include media-breakpoint-up($breakpoint) {
+      gap: $gap;
+    }
+  }
 
   @include media-breakpoint-up(rg) {
     flex-direction: row;
-    gap: var(--post-gutter-x);
   }
 }
 
@@ -160,27 +164,33 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.75rem 2rem 0.75rem 1rem;
-  transition: opacity 200ms, background-position 200ms;
+  padding: spacing.$size-small-regular spacing.$size-regular;
+  transition: opacity 200ms;
   border: 0;
   border-top: 1px solid rgba(var(--post-contrast-color-rgb), 0.2);
-  background-image: url(icons.get-colored-svg-url('2050', color.$white));
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  background-size: 1rem;
   text-decoration: none;
 
-  &[href]:hover {
-    background-position: right 0.5rem center;
+  &::after {
+    @include icons-mx.icon(2050);
+    content: '';
+    display: inline-block;
+    height: spacing.$size-regular;
+    width: spacing.$size-regular;
+    flex: 0 0 auto;
+    transform: translateX(#{spacing.$size-micro});
+    transition: transform 200ms;
+  }
+
+  &[href]:hover::after {
+    transform: translateX(#{spacing.$size-mini});
   }
 
   @include media-breakpoint-up(lg) {
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
+    padding-top: spacing.$size-small-large;
+    padding-bottom: spacing.$size-small-large;
   }
 }
 
 .topic-teaser.bg-light .link-list-item > a {
-  border-top: 1px solid color.$gray-10;
-  background-image: url(icons.get-colored-svg-url('2050', color.$gray-60));
+  border-top-color: color.$gray-10;
 }

package/functions/_icons.scss

@@ -1,10 +1,20 @@
 @use 'sass:map';
+@use 'sass:meta';
 
 @use './color';
 @use './utilities';
 @use './../variables/icons';
 
 @function add-fill-color($svg, $color) {
+  @if (meta.type-of($color) == string) {
+    @return set-svg-properties(
+      $svg,
+      (
+        'fill': $color,
+      )
+    );
+  }
+
   $opacity: alpha($color);
   $color: color.get-hex-string($color);
   $clean-color: utilities.replace('#{$color}', '#', '%23');