@swisspost/design-system-styles 6.3.0 → 6.4.1

package/components/form-check.scss

@@ -1,236 +1,153 @@
 @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/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;
-  }
-
-  &.form-check-inline {
+  &-inline {
     display: inline-flex;
   }
 
+  &-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,
-    &[type='checkbox']:checked,
-    &[type='checkbox']:indeterminate {
-      @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),
-    &[type='checkbox']:hover:not(:disabled) {
-      @include form-checks-mixins.form-check-color(form-check.$form-check-input-hover-color);
-    }
-  }
-
-  .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;
-  }
-
-  // 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));
+    &[type='checkbox'] {
+      &:checked::after {
+        @include icons-mx.icon(3035);
       }
 
-      &[type='radio']:checked {
-        background-image: url(icons.add-fill-color(
-          form-check.$form-check-radio-checked-bg-icon,
-          color.$white
-        ));
+      &:indeterminate::after {
+        @include icons-mx.icon(2039);
       }
+    }
 
-      // use color: graytext to highlight the text in the disabled color
-      &:disabled,
-      &[disabled] {
-        border-color: graytext !important;
-        opacity: 1;
+    &[type='radio'] {
+      border-radius: 50%;
 
-        ~ .form-check-label {
-          opacity: 1;
-          color: graytext !important;
-        }
+      &:checked::after {
+        margin: spacing.$size-micro;
+        background-color: currentColor;
+        border-radius: inherit;
       }
+    }
 
-      &:focus {
-        outline: 2px solid transparent;
-      }
+    &[disabled],
+    &[disabled] ~ .form-check-label {
+      opacity: 1; // Bootstrap reset
+      border-color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
+      color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
     }
   }
-}
 
-@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-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;
+      background-position-x: form-check.$form-switch-width;
 
-      // 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-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 {
+        mask: none;
+        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';
 

package/components/form-validation.scss

@@ -0,0 +1,116 @@
+@forward './../variables/options';
+
+@use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as *;
+@use './../themes/bootstrap/forms/validation' as bfv;
+
+@use './../mixins/color' as color-mx;
+@use './../mixins/utilities' as utilities-mx;
+@use './../variables/color';
+@use './../variables/components/form-validation';
+
+.invalid-feedback,
+.valid-feedback {
+  display: none;
+  width: 100%;
+  margin-block: form-validation.$form-feedback-margin-top 0;
+  padding: form-validation.$form-feedback-padding-y form-validation.$form-feedback-padding-x;
+  font-size: form-validation.$form-feedback-font-size;
+
+  @include utilities-mx.high-contrast-mode() {
+    color: HighlightText !important;
+    background-color: Highlight !important;
+    forced-color-adjust: none;
+  }
+}
+
+.invalid-feedback {
+  background: form-validation.$form-feedback-invalid-bg;
+  color: form-validation.$form-feedback-invalid-text;
+}
+
+.valid-feedback {
+  background: form-validation.$form-feedback-valid-bg;
+  color: form-validation.$form-feedback-valid-text;
+}
+
+.valid-feedback.custom-feedback {
+  background: form-validation.$form-feedback-custom-bg;
+  color: form-validation.$form-feedback-custom-text;
+}
+
+@each $state, $data in $form-validation-states {
+  $icon: map-get($data, 'icon');
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      padding-right: $input-height-inner;
+      background-image: escape-svg($icon);
+      background-repeat: no-repeat;
+      background-position: right $input-height-inner-quarter center;
+      background-size: form-validation.$form-feedback-icon-size;
+    }
+  }
+
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      padding-right: $input-height-inner;
+      background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+    }
+  }
+
+  .input-group {
+    > .form-control:not(:focus),
+    > .form-select:not(:focus),
+    > .form-floating:not(:focus-within) {
+      @include form-validation-state-selector($state) {
+        @if $state == 'valid' {
+          z-index: 3;
+        } @else if $state == 'invalid' {
+          z-index: 4;
+        }
+      }
+    }
+  }
+}
+
+.form-control,
+.form-select {
+  @include form-validation-state-selector(invalid) {
+    border-color: form-validation.$form-feedback-invalid-color;
+
+    &:focus {
+      border-color: form-validation.$form-feedback-invalid-color;
+      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+    }
+  }
+}
+
+.form-check-input {
+  @include form-validation-state-selector(invalid) {
+    border-color: form-validation.$form-feedback-invalid-color;
+
+    &:focus {
+      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+    }
+
+    ~ .form-check-label {
+      color: form-validation.$form-feedback-invalid-color;
+    }
+
+    @include color-mx.on-dark-background {
+      border-color: inherit;
+
+      ~ .form-check-label {
+        color: color.$white;
+      }
+    }
+  }
+}

package/components/forms.scss

@@ -7,8 +7,10 @@
 @use './../mixins/utilities';
 @use './../mixins/forms' as form-mixins;
 
-@use './../themes/bootstrap/forms' as bf;
-@use './../themes/bootstrap/forms/input-group';
+@use './../themes/bootstrap/forms/labels' as bfl;
+@use './../themes/bootstrap/forms/form-text' as bfft;
+@use './../themes/bootstrap/forms/form-control' as bffc;
+@use './../themes/bootstrap/forms/input-group' as bfig;
 
 .form-control-rg {
   @include form-mixins.form-control-rg;

package/components/intranet-header/_logo.scss

@@ -8,10 +8,7 @@
   flex: 0 1 intranet-header.$header-content-size;
 }
 
-.header-logo-de,
-.header-logo-en,
-.header-logo-fr,
-.header-logo-it {
+.header-logo {
   display: block;
   padding: 0;
   width: intranet-header.$header-content-size;

package/components/intranet-header/_nav-overflow.scss

@@ -1,6 +1,6 @@
 @use './../../variables/color';
 @use './../../variables/commons';
-@use './../../functions/icons';
+@use './../../mixins/icons' as icons-mx;
 
 @use './../../themes/bootstrap/core' as *;
 @use './../../placeholders/dropdown';
@@ -14,13 +14,18 @@
     }
 
     > .nav-link::after {
-      @extend %toggler-icon;
-      background-image: url(icons.get-colored-svg-url('2051', color.$gray-80));
+      display: inline-flex;
+      align-items: center;
+
+      &::after {
+        @extend %toggler-icon;
+        @include icons-mx.icon(2051);
+      }
     }
 
     &.hidden {
       > .nav-link::after {
-        background-image: url(icons.get-colored-svg-url('2052', color.$gray-80)); // Angle downwards
+        transform: rotate(180deg);
       }
     }
   }

package/components/pagination.scss

@@ -5,9 +5,9 @@
 @use './../variables/components/pagination';
 @use './../variables/spacing';
 @use './../variables/commons';
+@use './../variables/icons';
 @use './../mixins/icons' as icon-mixin;
 @use './../mixins/utilities';
-@use './icons.scss';
 
 .pagination {
   .page-item {
@@ -34,32 +34,35 @@
         }
       }
 
+      &[aria-label='First'],
       &[aria-label='Previous'],
-      &[aria-label='Next'] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
+      &[aria-label='Next'],
+      &[aria-label='Last'] {
+        > span {
+          display: inline-block;
+          width: icons.$icon-size-default;
+          height: icons.$icon-size-default;
+        }
       }
 
-      &[aria-label='Previous'] span,
-      &[aria-label='Next'] span {
-        display: none;
+      &[aria-label='Previous'],
+      &[aria-label='Next'] {
+        > span {
+          @include icon-mixin.icon(2110);
+        }
       }
 
-      &[aria-label='Previous'] {
-        &::before {
-          @extend %pi;
-          @include icon-mixin.pi(2110, pagination.$pagination-color);
-          content: '';
+      &[aria-label='First'],
+      &[aria-label='Last'] {
+        > span {
+          @include icon-mixin.icon(2396);
         }
       }
 
-      &[aria-label='Next'] {
-        &::before {
-          @extend %pi;
-          @include icon-mixin.pi(2111, pagination.$pagination-color);
-          content: '';
+      &[aria-label='Next'],
+      &[aria-label='Last'] {
+        > span {
+          transform: rotate(180deg);
         }
       }
 

package/components/product-card.scss

@@ -49,7 +49,8 @@
     color: inherit;
     text-decoration: none;
 
-    > .pi {
+    > .pi,
+    > post-icon {
       flex-shrink: 0;
       width: 3rem;
       height: 3rem;
@@ -62,6 +63,9 @@
   }
 
   .post-card-favourit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
@@ -69,5 +73,6 @@
     border-radius: 0;
     background: transparent;
     box-shadow: none;
+    color: currentColor;
   }
 }