@swisspost/design-system-styles 6.4.0 → 6.4.2

package/components/_index.scss

@@ -45,4 +45,4 @@
 @use 'datepicker';
 @use 'dropdown';
 @use 'floating-label';
-@use 'form-feedback';
+@use 'form-validation';

package/components/alert.scss

@@ -6,7 +6,6 @@
 @use './../themes/bootstrap/core' as *;
 
 @use './../mixins/notification' as notification-mx;
-@use './../placeholders/notification' as notification-ph;
 
 @use './../variables/breakpoints';
 @use './../variables/commons';
@@ -18,7 +17,7 @@
   @include notification-mx.notification-size(alert);
 
   &:not(.alert-action) {
-    @extend %notification-body;
+    @include notification-mx.notification-body(alert);
   }
 }
 
@@ -38,17 +37,14 @@
 
   > .alert-content {
     flex: 1 1 auto;
-    @extend %notification-body;
+    @include notification-mx.notification-body(alert);
   }
 
   > .alert-buttons {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-
-    > .btn {
-      margin-inline-start: notification.$notification-buttons-margin-start;
-    }
+    gap: notification.$notification-buttons-gap;
   }
 
   @include media-breakpoint-up(md) {

package/components/card.scss

@@ -172,40 +172,25 @@
   padding-left: 0.5rem;
 
   a {
-    display: inline-flexbox;
     display: inline-flex;
     align-items: center;
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-inline: spacing.$size-mini;
+    gap: spacing.$size-mini;
     color: color.$gray-60;
     text-decoration: none;
     -ms-flex-align: center;
 
     &::before {
-      @include icons-mixins.pi(3020, color.$gray-80);
+      @include icons-mixins.icon(3020);
       content: '';
       display: inline-block;
-      position: relative;
       width: icons.$icon-size-default;
       height: icons.$icon-size-default;
-      margin-right: spacing.$spacer * 0.5;
-
-      transition: animation.$transition-fade;
-      opacity: 0.8;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: contain;
-
-      vertical-align: middle;
     }
 
     &:hover,
     &:focus {
       color: color.$black;
-
-      &::before {
-        opacity: 1;
-      }
     }
   }
 }

package/components/datatable.scss

@@ -8,6 +8,7 @@
 @use './../variables/components/forms';
 
 @use './../mixins/button' as button-mixins;
+@use './../mixins/icons' as icons-mx;
 @use './../mixins/utilities';
 
 @use './../placeholders/text';
@@ -67,22 +68,18 @@
   width: spacing.$size-regular;
   height: spacing.$size-regular;
   margin-left: spacing.$size-mini;
-  background-repeat: no-repeat;
-  background-size: contain;
 
   &.datatable-icon-sort-unset {
-    background-image: datatable.$datatable-sort-unset-icon;
-    background-position: center top, center bottom;
+    @include icons-mx.icon(2127);
   }
 
-  &.datatable-icon-up {
-    background-image: datatable.$datatable-sort-asc-icon;
-    background-position: center center;
+  &.datatable-icon-up,
+  &.datatable-icon-down {
+    @include icons-mx.icon(2112);
   }
 
   &.datatable-icon-down {
-    background-image: datatable.$datatable-sort-desc-icon;
-    background-position: center center;
+    transform: rotate(180deg);
   }
 }
 

package/components/datepicker.scss

@@ -123,6 +123,9 @@ span.ngb-dp-navigation-chevron {
 }
 
 .ngb-dp-open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
   z-index: 5;
   top: forms.$input-border-width;
@@ -132,9 +135,14 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner;
   background: transparent;
 
-  .pi-3203,
+  // DEPRECATED
   .pi-calendar {
-    @include icons-mx.pi(3203);
+    @include icons-mx.icon(3203);
+  }
+
+  .pi-calendar,
+  .pi-3203,
+  post-icon {
     width: datepicker.$ngb-dp-icon-size;
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
@@ -146,7 +154,8 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner-sm;
 
   .pi-3203,
-  .pi-calendar {
+  .pi-calendar,
+  post-icon {
     width: datepicker.$ngb-dp-icon-size-sm;
     height: datepicker.$ngb-dp-icon-size-sm;
   }
@@ -163,7 +172,8 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner-lg;
 
   .pi-3203,
-  .pi-calendar {
+  .pi-calendar,
+  post-icon {
     width: datepicker.$ngb-dp-icon-size-lg;
     height: datepicker.$ngb-dp-icon-size-lg;
   }

package/components/dropdown.scss

@@ -3,13 +3,23 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/dropdown' as bd;
 
-@use './../functions/icons';
+@use './../placeholders/close';
 @use './../variables/color';
 @use './../variables/commons';
+@use './../variables/icons';
 @use './../variables/spacing';
-@use './../placeholders/dropdown';
+@use './../mixins/icons' as icons-mx;
 @use './../mixins/utilities';
 
+%toggler-icon {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-left: 0.5rem;
+  border: 0;
+}
+
 .dropdown,
 .dropup {
   .dropdown-menu {
@@ -43,76 +53,19 @@
   }
 }
 
-$gray-arrow-down: icons.get-colored-svg-url('2052', color.$gray-80);
-$white-arrow-down: icons.get-colored-svg-url('2052', color.$white);
-$gray-arrow-up: icons.get-colored-svg-url('2051', color.$gray-80);
-$white-arrow-up: icons.get-colored-svg-url('2051', color.$white);
-$hcm-arrow-down: icons.get-colored-svg-url('2052', buttonText);
-$hcm-arrow-up: icons.get-colored-svg-url('2052', buttonText);
-
 .dropdown-toggle {
   &::after {
     @extend %toggler-icon;
-    background-image: url($gray-arrow-down);
-    @include utilities.high-contrast-mode() {
-      background-image: url($hcm-arrow-down);
-    }
+    @include icons-mx.icon(2052);
   }
 
-  &.btn-primary::after {
-    background-image: url($white-arrow-down);
-    @include utilities.high-contrast-mode() {
-      background-image: url($hcm-arrow-down);
-    }
+  &[aria-expanded='true']::after,
+  .dropup &::after {
+    transform: rotate(180deg);
   }
 
-  &[aria-expanded='true'] {
-    &::after {
-      background-image: url($gray-arrow-up);
-      @include utilities.high-contrast-mode() {
-        background-image: url($hcm-arrow-up);
-      }
-    }
-
-    &.btn-primary::after {
-      background-image: url($white-arrow-up);
-      @include utilities.high-contrast-mode() {
-        background-image: url($hcm-arrow-up);
-      }
-    }
-  }
-
-  .dropup & {
-    &::after {
-      @extend %toggler-icon;
-      background-image: url($gray-arrow-up);
-      @include utilities.high-contrast-mode() {
-        background-image: url($hcm-arrow-up);
-      }
-    }
-
-    &.btn-primary::after {
-      background-image: url($white-arrow-up);
-      @include utilities.high-contrast-mode() {
-        background-image: url($hcm-arrow-up);
-      }
-    }
-
-    &[aria-expanded='true'] {
-      &::after {
-        background-image: url($gray-arrow-down);
-        @include utilities.high-contrast-mode() {
-          background-image: url($hcm-arrow-down);
-        }
-      }
-
-      &.btn-primary::after {
-        background-image: url($white-arrow-down);
-        @include utilities.high-contrast-mode() {
-          background-image: url($hcm-arrow-down);
-        }
-      }
-    }
+  .dropup &[aria-expanded='true']::after {
+    transform: rotate(0deg);
   }
 }
 

package/components/floating-label.scss

@@ -4,13 +4,14 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/forms' as bf;
+@use './../themes/bootstrap/forms/floating-labels' as bffl;
+@use './../themes/bootstrap/forms/form-control' as bffc;
 @use './../mixins/forms' as forms-mx;
 @use './../mixins/utilities' as utilities-mx;
 
 @use './../variables/type';
 @use './../variables/components/forms';
-@use './../variables/components/form-feedback';
+@use './../variables/components/form-validation';
 
 .form-floating {
   > label {
@@ -162,7 +163,7 @@
       ~ label {
         width: calc(
           100% - (forms.$input-border-width * 2) - forms.$form-floating-padding-x -
-            form-feedback.$form-feedback-icon-offset - form-feedback.$form-feedback-icon-size
+            form-validation.$form-feedback-icon-offset - form-validation.$form-feedback-icon-size
         );
       }
 
@@ -174,8 +175,8 @@
               (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
               (forms.$input-border-width * forms.$form-floating-label-upscale * 2) -
               (forms.$form-floating-padding-x * forms.$form-floating-label-upscale) -
-              (form-feedback.$form-feedback-icon-offset * forms.$form-floating-label-upscale) -
-              (form-feedback.$form-feedback-icon-size * forms.$form-floating-label-upscale)
+              (form-validation.$form-feedback-icon-offset * forms.$form-floating-label-upscale) -
+              (form-validation.$form-feedback-icon-size * forms.$form-floating-label-upscale)
           );
         }
       }

package/components/form-check.scss

@@ -1,236 +1,172 @@
 @forward './../variables/options';
 
-@use 'sass:math';
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/forms/form-check' as bfc;
-
-@use './../variables/color';
-@use './../variables/spacing';
-@use './../variables/components/form-check';
-@use './../variables/components/form-switch';
-@use './../variables/components/button';
-@use './../mixins/form-checks' as form-checks-mixins;
-@use './../mixins/utilities';
-@use './../functions/icons' as fi;
-@use './../functions/icons';
+@use '../variables/color';
+@use '../variables/type';
+@use '../variables/spacing';
+@use '../variables/animation';
+@use '../variables/components/form-check';
+@use '../mixins/icons' as icons-mx;
 
 .form-check {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  row-gap: form-check.$form-check-row-gap;
+  column-gap: form-check.$form-check-column-gap;
+  margin-bottom: form-check.$form-check-margin-bottom;
 
-  &-reverse {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
+  &-inline {
+    display: inline-flex;
   }
 
-  &.form-check-inline {
-    display: inline-flex;
+  &-inline:not(:last-of-type) {
+    margin-right: form-check.$form-check-inline-margin-right;
   }
 
+  &-input,
   &-label {
-    flex: 1;
-    padding: form-check.$form-check-label-padding-start;
+    color: rgba(var(--post-contrast-color-rgb), 0.8);
+    transition: color animation.$transition-base-timing;
 
-    &.order-first {
-      flex: 0 0 auto;
-      padding: form-check.$form-check-label-padding-end;
+    &:not([disabled]) {
+      cursor: pointer;
     }
 
-    .form-check-input:disabled ~ & {
-      cursor: default;
+    &:hover:not([disabled]),
+    &:hover:not([disabled]) ~ &-label {
+      color: var(--post-contrast-color);
     }
   }
 
   &-input {
-    flex: 0 0 auto;
-    margin-top: 0;
+    display: inline-flex;
+    flex: 0 auto;
+    appearance: none;
+    background: none;
+    height: form-check.$form-check-input-size;
+    width: form-check.$form-check-input-size;
+    border: form-check.$form-check-input-border-width solid
+      rgba(var(--post-contrast-color-rgb), 0.8);
 
-    &:not(:disabled) {
-      cursor: form-check.$form-check-label-cursor;
+    &:focus {
+      outline: none;
+      border-color: currentColor;
+      box-shadow: form-check.$form-check-input-focus-box-shadow;
     }
 
-    &[type='radio']:checked:not(.is-invalid),
-    &[type='checkbox']:checked:not(.is-invalid),
-    &[type='checkbox']:indeterminate:not(.is-invalid) {
-      @include form-checks-mixins.form-check-color(form-check.$form-check-input-checked-color);
+    &::after {
+      content: '';
+      display: block;
+      flex: 1;
     }
 
-    .was-validated &:valid ~ .form-check-label,
-    &.is-valid ~ .form-check-label {
-      color: form-check.$form-check-label-color;
-    }
+    &:checked,
+    &:indeterminate {
+      color: var(--post-contrast-color);
+      border-color: var(--post-contrast-color);
 
-    &.is-valid,
-    &.is-invalid {
-      &[type='radio']:checked,
-      &[type='checkbox']:checked,
-      &[type='checkbox']:indeterminate {
-        background-color: transparent;
+      ~ .form-check-label {
+        color: var(--post-contrast-color);
       }
     }
 
-    &[type='radio']:hover:not(:disabled):not(.is-invalid),
-    &[type='checkbox']:hover:not(:disabled):not(.is-invalid) {
-      @include form-checks-mixins.form-check-color(form-check.$form-check-input-hover-color);
+    &[type='checkbox'] {
+      &:checked::after {
+        @include icons-mx.icon(3035);
+      }
+
+      &:indeterminate::after {
+        @include icons-mx.icon(2039);
+      }
     }
-  }
 
-  .valid-feedback,
-  .invalid-feedback {
-    flex: 1 0 100%;
-    margin-top: form-check.$form-check-feedback-margin-top;
-    margin-left: -1 * form-check.$form-check-padding-start;
-  }
+    &[type='radio'] {
+      border-radius: 50%;
 
-  // Styles  to improve accessibility in high contrast mode
-  @include utilities.high-contrast-mode() {
-    &-input {
-      &[type='checkbox']:checked {
-        background-image: url(fi.get-colored-svg-url(2105, color.$white));
+      &:checked::after {
+        border: spacing.$size-micro solid color.$white;
+        background-color: currentColor;
+        border-radius: inherit;
       }
+    }
 
-      &[type='radio']:checked {
-        background-image: url(icons.add-fill-color(
-          form-check.$form-check-radio-checked-bg-icon,
-          color.$white
-        ));
-      }
+    &[disabled],
+    &[disabled] ~ .form-check-label {
+      border-color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
+      color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
+    }
 
-      // use color: graytext to highlight the text in the disabled color
-      &:disabled,
-      &[disabled] {
-        border-color: graytext !important;
-        opacity: 1;
+    .form-check-sm & {
+      height: form-check.$form-check-input-size-sm;
+      width: form-check.$form-check-input-size-sm;
 
-        ~ .form-check-label {
-          opacity: 1;
-          color: graytext !important;
+      &[type='radio'] {
+        &:checked::after {
+          border-width: spacing.$size-line;
         }
       }
-
-      &:focus {
-        outline: 2px solid transparent;
-      }
     }
   }
-}
 
-@each $colorname, $color in color.$background-colors {
-  .bg-#{$colorname} {
-    $color-contrast: color-contrast($color, form-check.$form-check-input-color);
-
-    @if ($color-contrast == color.$white) {
-      @include form-checks-mixins.form-check-variant(
-        color.$white,
-        rgba(color.$white, 0.6),
-        rgba(color.$white, 0.8)
-      );
-    } @else if($color-contrast == color.$black) {
-      @include form-checks-mixins.form-check-variant(
-        color.$black,
-        rgba(color.$black, 0.6),
-        rgba(color.$black, 0.8)
-      );
+  &-label {
+    flex: 1;
+
+    .form-check-sm & {
+      font-size: type.$font-size-12;
     }
   }
 }
 
 .form-switch {
-  .form-check-label {
-    padding: form-switch.$form-switch-label-padding-start;
-
-    &.order-first {
-      padding: form-switch.$form-switch-label-padding-end;
-    }
-  }
+  column-gap: form-check.$form-switch-column-gap;
 
   .form-check-input {
-    height: form-switch.$form-switch-height;
+    height: form-check.$form-switch-height;
+    width: form-check.$form-switch-width;
     border: 0;
-    outline-offset: button.$input-btn-focus-width * 1.5;
-    background-image: escape-svg(form-switch.$form-switch-bg-image),
-      form-switch.$form-switch-linear-gradient;
-    background-position: left center, right center;
-    background-size: form-switch.$form-switch-checked-bg-image-size,
-      form-switch.$form-switch-linear-gradient-size;
+    border-radius: form-check.$form-switch-width;
+    background-image: form-check.$form-switch-background-image;
+    background-size: 2 * form-check.$form-switch-width;
+    background-position-x: 0;
+    transition: background-color animation.$transition-base-timing,
+      background-position animation.$transition-base-timing;
 
-    &:focus {
-      background-image: escape-svg(form-switch.$form-switch-bg-image),
-        form-switch.$form-switch-linear-gradient;
-      box-shadow: none;
-      outline: button.$input-btn-focus-width solid var(--post-contrast-color, color.$black);
-    }
-
-    @supports selector(:focus-visible) {
-      &:focus {
-        outline-color: transparent;
-      }
-
-      &:focus-visible {
-        outline: button.$input-btn-focus-width solid var(--post-contrast-color, color.$black);
-      }
+    &::after {
+      max-width: form-check.$form-switch-height;
+      background-color: form-check.$form-switch-color;
+      border: form-check.$form-check-input-border-width solid form-check.$form-switch-border-color;
+      border-radius: 50%;
+      transition: transform animation.$transition-base-timing;
     }
 
     &:checked {
-      background-image: escape-svg(form-switch.$form-switch-checked-bg-image),
-        form-switch.$form-switch-linear-gradient;
-      background-position: right center, left center;
-    }
-
-    &:checked:focus {
-      background-image: escape-svg(form-switch.$form-switch-checked-bg-image),
-        form-switch.$form-switch-linear-gradient;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: form-switch.$form-switch-hover-bg;
-    }
-
-    @include utilities.high-contrast-mode() {
-      --post-success: ActiveText;
-
-      // linear-gradients or statements which contains linear-gradients are disabled in firefox
-      // so we have to repeat background-image statements here without linear-gradients
+      background-position-x: form-check.$form-switch-width;
 
-      background-image: escape-svg(form-switch.$form-switch-checked-bg-image);
-      background-color: Field;
-      border: button.$input-btn-focus-width solid FieldText;
-
-      &:focus {
-        background-image: escape-svg(form-switch.$form-switch-checked-bg-image);
-        border-color: FieldText;
-        outline: none;
+      &::after {
+        @include icons-mx.remove-icon;
+        background-color: form-check.$form-switch-color;
+        border-color: form-check.$form-switch-checked-border-color;
+        transform: translateX(2rem);
       }
+    }
 
-      &:hover:not(:disabled) {
-        border-color: Highlight;
-      }
+    &[disabled] {
+      background: form-check.$form-switch-disabled-bg;
 
-      &:focus-visible {
-        outline: button.$input-btn-focus-width solid Highlight;
+      &::after {
+        border-color: form-check.$form-switch-disabled-border-color;
       }
+    }
+  }
 
-      &:checked {
-        background-color: var(--post-success);
-        background-image: escape-svg(form-switch.$form-switch-checked-bg-image);
+  &:hover > .form-check-input:not([disabled]) {
+    background-color: rgba(var(--post-contrast-color-rgb), 0.1);
+  }
 
-        &:focus {
-          background-color: var(--post-success);
-          background-image: escape-svg(form-switch.$form-switch-checked-bg-image);
-        }
+  .form-check-label {
+    padding-top: form-check.$form-switch-label-padding-top;
 
-        &:hover:not(:disabled) {
-          background-color: var(--post-success);
-          border-color: Highlight;
-        }
-      }
+    &.order-first {
+      flex: 0 auto;
     }
   }
-
-  .valid-feedback,
-  .invalid-feedback {
-    margin-left: -1 * form-switch.$form-switch-padding-start;
-  }
 }

package/components/form-select.scss

@@ -2,7 +2,7 @@
 
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/forms' as bf;
+@use './../themes/bootstrap/forms/form-select' as bffs;
 @use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';