@swisspost/design-system-styles 6.2.5 → 6.3.0

package/components/modal.scss

@@ -2,16 +2,16 @@
 
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/modal' as bm;
-@use './../themes/bootstrap/close' as bc;
 @use './../themes/bootstrap/core' as *;
 
-@use './../mixins/icons' as icon-mixin;
 @use './../mixins/scroll-shadows' as scroll-shadows-mixin;
-@use './../variables';
+
+@use './../variables/commons';
+@use './../variables/components/modal';
 
 .modal-content {
   border: 0;
-  box-shadow: variables.$box-shadow;
+  box-shadow: commons.$box-shadow;
 }
 
 post-ngb-modal-content {
@@ -20,8 +20,8 @@ post-ngb-modal-content {
 }
 
 .modal-body {
-  @include scroll-shadows-mixin.scroll-shadows-y(variables.$modal-content-bg);
-  padding: variables.$modal-body-padding;
+  @include scroll-shadows-mixin.scroll-shadows-y(modal.$modal-content-bg);
+  padding: modal.$modal-body-padding;
   overflow-y: auto;
 }
 
@@ -30,6 +30,14 @@ post-ngb-modal-content {
   border: 0;
 }
 
+.modal-header .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0;
+  margin: modal.$modal-btn-close-margin;
+}
+
 .modal-title:focus {
   outline: none; // Removes focus styles when you manually set focus to title with ngbAutofocus https://ng-github.io/#/components/modal/examples#focus
 }
@@ -37,26 +45,26 @@ post-ngb-modal-content {
 @include media-breakpoint-up(sm) {
   post-ngb-modal-content {
     // prevents the modal from exceeding the height of the screen
-    max-height: calc(100vh - #{2 * variables.$modal-dialog-margin-y-sm-up});
+    max-height: calc(100vh - #{2 * modal.$modal-dialog-margin-y-sm-up});
   }
 
   // Right and left margins are set to "auto" from the sm breakpoint
   // Paddings below ensure minimal margins on medium screens
   .modal-dialog {
-    padding-right: variables.$modal-dialog-margin;
-    padding-left: variables.$modal-dialog-margin;
+    padding-right: modal.$modal-dialog-margin;
+    padding-left: modal.$modal-dialog-margin;
   }
 }
 
 @include media-breakpoint-down(sm) {
   post-ngb-modal-content {
     // make the modal cover the full height available on small screens
-    height: calc(100vh - #{2 * variables.$modal-dialog-margin});
+    height: calc(100vh - #{2 * modal.$modal-dialog-margin});
   }
 
   .modal-body,
   .modal-header {
-    padding-right: variables.$modal-header-padding-y;
-    padding-left: variables.$modal-header-padding-y;
+    padding-right: modal.$modal-header-padding-y;
+    padding-left: modal.$modal-header-padding-y;
   }
 }

package/components/stepper.scss

@@ -109,6 +109,7 @@
   text-decoration: none;
   color: stepper.$stepper-link-color;
   transition: color 250ms;
+  text-align: center;
 
   .stepper-item[aria-current] > & {
     color: stepper.$stepper-link-current-color;
@@ -116,7 +117,8 @@
     font-weight: stepper.$stepper-link-current-font-weight;
   }
 
-  &:hover {
+  @at-root a:hover#{&},
+    :focus-visible#{&} {
     color: stepper.$stepper-link-hover-color;
   }
 
@@ -127,12 +129,6 @@
 
 @include media-breakpoint-down(rg) {
   .stepper-item {
-    &[aria-current] .stepper-link {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
     &:not([aria-current]) .stepper-link {
       overflow: hidden;
       white-space: nowrap;

package/components/toast.scss

@@ -3,27 +3,81 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
 
-@use './../variables/components/toasts';
-@use './../variables/components/alert';
-@use './../components/close';
-@use './../functions/color' as color-fn;
-@use './../functions/contrast' as contrast-fn;
-@use './../placeholders/color' as color-ph;
-@use './../placeholders/notifications';
+@use './../mixins/notification' as notification-mx;
+@use './../placeholders/close' as close-ph;
+@use './../placeholders/notification' as notification-ph;
+
+@use './../variables/commons';
+@use './../variables/spacing';
+@use './../variables/components/notification';
+
+.toast {
+  @include notification-mx.notification-size(toast);
+  @include notification-mx.notification-dismissible(toast, 'toast-close-button');
+  @extend %notification-body;
+}
+
+.toast-close-button {
+  @extend %btn-close;
+}
+
+.toast-title {
+  @include notification-mx.notification-heading(toast);
+}
+
+@each $name, $color, $icon in notification.$notification-variants {
+  $selector: '.toast-#{$name}';
+
+  // the .toast-error class is needed because it is automatically added by the ngx-toastr library
+  @if $name == 'danger' {
+    $selector: '#{$selector}, .toast-error';
+  }
+
+  #{$selector} {
+    @include notification-mx.notification-variant($color, $icon);
+  }
+}
 
 // Positioning
+.toast-container {
+  position: fixed;
+  z-index: commons.$zindex-alert;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+
+  .toast {
+    width: 25rem;
+  }
+
+  @include media-breakpoint-down(md) {
+    .toast {
+      max-width: 25rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    right: spacing.$spacer;
+    left: spacing.$spacer;
+
+    .toast {
+      width: 100%;
+    }
+  }
+}
+
 .toast-top-center,
 .toast-top-full-width,
 .toast-top-left,
 .toast-top-right {
-  top: alert.$alert-margin;
+  top: spacing.$spacer;
 }
 
 .toast-bottom-center,
 .toast-bottom-full-width,
 .toast-bottom-right,
 .toast-bottom-left {
-  bottom: alert.$alert-margin;
+  bottom: spacing.$spacer;
 }
 
 .toast-top-left,
@@ -31,7 +85,7 @@
 .toast-top-full-width,
 .toast-bottom-full-width,
 .toast-center-left {
-  left: alert.$alert-margin;
+  left: spacing.$spacer;
 }
 
 .toast-top-right,
@@ -39,7 +93,7 @@
 .toast-top-full-width,
 .toast-bottom-full-width,
 .toast-center-right {
-  right: alert.$alert-margin;
+  right: spacing.$spacer;
 }
 
 .toast-top-center,
@@ -66,121 +120,3 @@
     width: 100% !important;
   }
 }
-
-// Base styling
-.toast-container {
-  @extend %notification-container;
-  position: fixed;
-  pointer-events: none;
-
-  * {
-    box-sizing: border-box;
-  }
-}
-
-.toast {
-  $effective-line-height: (alert.$alert-line-height * alert.$alert-font-size-small);
-
-  @extend %notification;
-
-  display: flex !important; // Needs to be important to override display styling by the ngx-toaster
-  width: alert.$alert-toast-width;
-
-  min-height: 2 * alert.$alert-toast-padding-y + 2 * $effective-line-height;
-
-  padding: alert.$alert-toast-padding-y alert.$alert-toast-padding-x;
-  padding-left: (alert.$alert-toast-padding-x * 2 + alert.$alert-toast-icon-size);
-
-  overflow: hidden;
-  background-position: alert.$alert-toast-padding-x center;
-
-  background-size: alert.$alert-toast-icon-size;
-  font-size: alert.$alert-font-size-small;
-  pointer-events: auto;
-
-  &.no-icon {
-    padding-left: alert.$alert-toast-padding-x;
-  }
-
-  &:hover {
-    opacity: 1;
-    box-shadow: alert.$alert-toast-box-shadow-hover;
-    cursor: pointer;
-  }
-
-  .toast-close-button {
-    @extend %notification-close;
-
-    padding: alert.$alert-toast-padding-y alert.$alert-toast-padding-x;
-  }
-
-  .toast-close-button,
-  .btn-close {
-    ~ .toast-message,
-    ~ .toast-title {
-      padding-right: calc(#{alert.$alert-toast-padding-x} + #{alert.$alert-close-icon-size});
-    }
-
-    + .toast-message {
-      font-weight: bold;
-    }
-  }
-}
-
-.toast-title {
-  @extend %notification-title;
-
-  font-size: alert.$alert-font-size-small;
-}
-
-.toast-message {
-  font-size: alert.$alert-font-size-small;
-  word-wrap: break-word;
-
-  a:hover {
-    text-decoration: none;
-  }
-}
-
-/* stylelint-disable */
-.toast-close-button {
-  @extend .btn-close;
-}
-/* stylelint-enable */
-
-// Variants
-
-@each $name, $color, $icon in alert.$alert-list {
-  .toast-#{$name} {
-    --post-bg-rgb: #{color-fn.rgb-values($color)};
-    @extend %notification-#{$name};
-
-    @if (contrast-fn.light-or-dark($color) == 'dark') {
-      @extend %color-background-dark-variables;
-    } @else {
-      @extend %color-background-light-variables;
-    }
-
-    .toast-close-button,
-    .btn-close {
-      @extend %notification-#{$name}-close;
-    }
-  }
-}
-
-// Responsive Design
-@include media-breakpoint-down(md) {
-  .toast-container .toast {
-    width: alert.$alert-toast-width-small-breakpoint;
-  }
-}
-@include media-breakpoint-down(sm) {
-  .toast-container {
-    right: alert.$alert-margin;
-    left: alert.$alert-margin;
-
-    .toast {
-      width: 100%;
-    }
-  }
-}

package/components/type.scss

@@ -114,3 +114,7 @@ code {
   color: inherit;
   font-size: inherit;
 }
+
+hr {
+  border-block-start-color: rgba(var(--post-contrast-color-rgb), 0.1);
+}

package/components/utilities.scss

@@ -6,13 +6,11 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/utilities' as bu; // TODO: Move Design System utilities to utilities folder.
+@use './../mixins/color' as color-mx;
 @use './../mixins/utilities';
 @use './../variables/color';
 @use './../variables/spacing';
 @use './../variables/grid';
-@use './../functions/color' as color-fn;
-@use './../functions/contrast' as contrast-fn;
-@use './../placeholders/color' as color-ph;
 
 .bold {
   font-weight: 700;
@@ -66,15 +64,7 @@ span.spacer {
 // Background Utility
 @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') {
-      @extend %color-background-dark-variables;
-    } @else {
-      @extend %color-background-light-variables;
-    }
+    @include color-mx.colored-background($color);
   }
 }
 

package/functions/_icons.scss

@@ -46,7 +46,7 @@
   @return $svg;
 }
 
-@function get-colored-svg-url($icon-name, $color) {
+@function get-svg-url($icon-name) {
   $svg-url: '';
 
   @if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
@@ -59,7 +59,11 @@
     @error "Icon '#{$icon-name}' does not exist.";
   }
 
-  @return add-fill-color($svg-url, $color);
+  @return $svg-url;
+}
+
+@function get-colored-svg-url($icon-name, $color) {
+  @return add-fill-color(get-svg-url($icon-name), $color);
 }
 
 @function get-pre-colored-svg-url($icon-name) {