@swisspost/design-system-styles 6.5.1 → 6.6.1

package/components/accordion.scss

@@ -1,36 +1,21 @@
 @forward './../variables/options';
 
+@use './../mixins/accordion' as accordion-mx;
 @use './../mixins/button' as button-mx;
-@use './../mixins/color' as color-mx;
 @use './../mixins/focus' as focus-mx;
 @use './../mixins/icons' as icon-mx;
 @use './../mixins/type' as type-mx;
 @use './../mixins/utilities' as utility-mx;
 
-@use './../functions/contrast';
-@use './../variables/color';
 @use './../variables/components/accordion';
 
 .accordion-item {
+  @include accordion-mx.background-color;
   border-block: accordion.$accordion-border-width solid accordion.$accordion-border-color;
 
   & + & {
     border-block-start: 0;
   }
-
-  // make the accordion gray
-  @include color-mx.colored-background(color.$gray-background);
-
-  // make the accordion white on background colors close to the gray above (making sure it remains gray on a white background)
-  $accordion-contrast-on-white: contrast.contrast-ratio(color.$white, color.$gray-background);
-  @each $name, $color in color.$background-colors {
-    $accordion-contrast-on-color: contrast.contrast-ratio($color, color.$gray-background);
-    @if ($accordion-contrast-on-color < $accordion-contrast-on-white) {
-      .bg-#{$name} & {
-        @include color-mx.colored-background(color.$white);
-      }
-    }
-  }
 }
 
 .accordion-header {

package/components/card.scss

@@ -58,10 +58,13 @@
 
   .link-icon {
     text-decoration: none;
-  }
 
-  .link-icon .pi {
-    margin-right: 0.5rem;
+    .pi,
+    post-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.5rem;
+    }
   }
 
   > .list-group + .card-footer,

package/components/datatable.scss

@@ -94,6 +94,8 @@
   }
 
   .datatable-button {
+    display: flex;
+    align-items: center;
     @include button-mixins.reset-button;
     width: datatable.$datatable-button-width;
     height: datatable.$datatable-button-height;

package/components/floating-label.scss

@@ -4,12 +4,14 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as b;
 @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/spacing';
 @use './../variables/components/forms';
 @use './../variables/components/form-validation';
 
@@ -51,6 +53,7 @@
       padding-bottom: forms.$form-floating-input-padding-b;
 
       ~ label {
+        color: forms.$form-floating-label-color;
         padding-top: 0.7rem;
         max-width: calc(
           (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
@@ -67,6 +70,39 @@
         padding-top: forms.$form-floating-input-padding-t * 1.33;
       }
     }
+
+    &[type='week'],
+    &[type='month'],
+    &[type='date'],
+    &[type='time'] {
+      background-position: right b.$input-height-inner-quarter bottom 0.5rem;
+    }
+
+    &.form-control-sm {
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-regular);
+      }
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: forms.$form-floating-label-height-sm;
+      min-height: forms.$form-floating-label-height-sm;
+      padding-inline: forms.$form-floating-padding-x-sm;
+
+      ~ label {
+        font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        padding-top: forms.$form-floating-label-padding-t-sm;
+        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+      }
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        padding-top: forms.$form-floating-padding-y-sm * 2;
+
+        ~ label {
+          padding-top: forms.$form-floating-padding-y-sm;
+          font-size: forms.$form-floating-label-font-size-sm;
+        }
+      }
+    }
   }
 
   > .form-select {
@@ -106,8 +142,31 @@
       }
     }
 
+    &.form-select-sm {
+      padding-inline: forms.$form-floating-padding-x-sm;
+      padding-top: forms.$form-floating-padding-y-sm * 2;
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: forms.$form-floating-label-height-sm;
+      min-height: forms.$form-floating-label-height-sm;
+
+      ~ label {
+        padding-top: forms.$form-floating-padding-y-sm;
+        font-size: forms.$form-floating-label-font-size-sm;
+        padding-inline: forms.$form-floating-padding-x-sm;
+      }
+
+      // TODO: replace with :has
+      &:empty,
+      &.form-select-empty {
+        ~ label {
+          padding-top: forms.$form-floating-label-padding-t-sm;
+          font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        }
+      }
+    }
+
     &[multiple] {
-      padding-top: forms.$form-floating-input-padding-t * 1.5;
+      padding-top: spacing.$size-big;
       padding-bottom: 0;
       height: auto;
 
@@ -120,7 +179,21 @@
             2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
         );
         height: auto;
-        background: forms.$input-bg;
+        left: forms.$input-border-width * 3;
+      }
+
+      &.form-select-sm {
+        padding-top: forms.$form-floating-input-padding-t;
+
+        ~ label {
+          left: forms.$input-border-width * 2;
+        }
+      }
+
+      &:not(:disabled) {
+        ~ label {
+          background: forms.$input-bg;
+        }
       }
 
       &:empty {
@@ -134,33 +207,10 @@
         }
       }
     }
-
-    &.form-select-sm {
-      padding-inline: forms.$form-floating-padding-x-sm;
-      padding-top: forms.$form-floating-padding-y-sm * 2;
-      font-size: forms.$form-floating-label-font-size-placeholder-sm;
-      height: forms.$form-floating-label-height-sm;
-      min-height: forms.$form-floating-label-height-sm;
-
-      ~ label {
-        padding-top: forms.$form-floating-padding-y-sm;
-        font-size: forms.$form-floating-label-font-size-sm;
-        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
-      }
-
-      // TODO: replace with :has
-      &:empty,
-      &.form-select-empty {
-        ~ label {
-          padding-top: forms.$form-floating-label-padding-t-sm;
-          font-size: forms.$form-floating-label-font-size-placeholder-sm;
-        }
-      }
-    }
   }
 
   > textarea.form-control {
-    padding-top: forms.$input-padding-y-lg * 1.5;
+    padding-top: forms.$input-padding-y-lg * 2;
     padding-bottom: forms.$input-padding-y-lg;
     height: auto;
 
@@ -173,7 +223,7 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: forms.$input-padding-y-lg * 1.5;
+      padding-top: forms.$input-padding-y-lg * 2;
       padding-bottom: forms.$input-padding-y-lg;
 
       ~ label {

package/components/form-select.scss

@@ -9,18 +9,6 @@
 @use './../variables/components/forms';
 @use './../variables/components/form-select' as form-select;
 
-.form-select-rg {
-  @include forms-mixins.form-control-rg;
-}
-
-.form-select-lg {
-  background-size: form-select.$form-select-bg-size;
-}
-
-.form-select-sm {
-  background-size: form-select.$form-select-bg-size-sm;
-}
-
 .form-select {
   &:not(:disabled) {
     &:hover {
@@ -28,33 +16,51 @@
     }
   }
 
-  &.success,
-  &.is-invalid {
-    background-position:
-      right b.$form-select-padding-x * 2.5 center,
-      b.$form-select-bg-position;
+  &:not([multiple]) {
+    &:disabled {
+      background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
 
-    &.form-select-lg {
+    &.is-valid,
+    &.is-invalid {
       background-position:
-        right b.$form-select-padding-x * 3 center,
+        right b.$form-select-padding-x * 2.5 center,
         b.$form-select-bg-position;
+
+      &.form-select-lg {
+        background-position:
+          right b.$form-select-padding-x * 3 center,
+          b.$form-select-bg-position;
+      }
     }
-  }
 
-  &:disabled {
-    background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
-  }
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
 
-  &.success {
-    border-color: var(--post-success-green);
-    background-image: b.escape-svg(form-select.$form-select-indicator-success),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    &.is-invalid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-error),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
   }
 
-  &.is-invalid {
-    background-image: b.escape-svg(form-select.$form-select-indicator-error),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  &[multiple] {
+    &.is-valid,
+    &.is-invalid {
+      background-position: right b.$form-select-padding-x * 1.5 center;
+    }
+
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        var(--bs-form-select-bg-icon, none);
+    }
+
+    &.is-invalid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-error),
+        var(--bs-form-select-bg-icon, none);
+    }
   }
 
   @include utilities.high-contrast-mode() {
@@ -73,3 +79,18 @@
     }
   }
 }
+
+.form-select-rg {
+  @include forms-mixins.form-rg;
+  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-sm {
+  @include forms-mixins.form-sm;
+  background-size: forms.$form-bg-size-sm; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-lg {
+  @include forms-mixins.form-lg;
+  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}

package/components/form-validation.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
+@use './../themes/bootstrap/core' as b;
 @use './../themes/bootstrap/forms/validation' as bfv;
 
 @use './../mixins/color' as color-mx;
@@ -12,6 +12,7 @@
 @use './../variables/color';
 @use './../variables/components/form-validation';
 @use './../variables/components/forms';
+@use './../variables/spacing';
 
 .invalid-feedback,
 .valid-feedback {
@@ -43,10 +44,10 @@
   color: form-validation.$form-feedback-custom-text;
 }
 
-@each $state, $data in $form-validation-states {
+@each $state, $data in b.$form-validation-states {
   $icon: map.get($data, 'icon');
 
-  @include form-validation-state-selector($state) {
+  @include b.form-validation-state-selector($state) {
     ~ .#{$state}-feedback,
     ~ .#{$state}-tooltip {
       display: block;
@@ -54,19 +55,27 @@
   }
 
   .form-control {
-    @include form-validation-state-selector($state) {
-      padding-right: $input-height-inner;
-      background-image: escape-svg($icon);
+    @include b.form-validation-state-selector($state) {
+      padding-right: b.$input-height-inner;
+      background-image: b.escape-svg($icon);
       background-repeat: no-repeat;
-      background-position: right $input-height-inner-quarter center;
+      background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
+
+      &.form-control-sm {
+        background-size: forms.$form-bg-size-sm;
+      }
+
+      &.form-control-lg {
+        background-size: forms.$form-bg-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;
+    @include b.form-validation-state-selector($state) {
+      padding-right: b.$input-height-inner;
+      background-position: top b.$input-height-inner-quarter right b.$input-height-inner-quarter;
     }
   }
 
@@ -74,7 +83,7 @@
     > .form-control:not(:focus),
     > .form-select:not(:focus),
     > .form-floating:not(:focus-within) {
-      @include form-validation-state-selector($state) {
+      @include b.form-validation-state-selector($state) {
         @if $state == 'valid' {
           z-index: 3;
         } @else if $state == 'invalid' {
@@ -92,14 +101,45 @@
 
 .form-control,
 .form-select {
-  @include form-validation-mx.form-validation-state-selector(invalid) {
+  &.is-invalid {
     border-color: form-validation.$form-feedback-invalid-color;
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
       box-shadow: form-validation.$form-feedback-invalid-box-shadow;
     }
   }
+
+  &.is-valid {
+    border-color: var(--post-success-green);
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+
+    &:focus {
+      border-color: form-validation.$form-feedback-valid-color;
+      box-shadow: form-validation.$form-feedback-valid-box-shadow;
+    }
+  }
+
+  &.is-invalid,
+  &.is-valid {
+    padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
+    background-repeat: no-repeat;
+    background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size.
+    background-position: right b.$input-height-inner-quarter center;
+
+    &.form-select-sm,
+    &.form-control-sm {
+      padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+      background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
+    }
+
+    &.form-select-lg,
+    &.form-control-lg {
+      padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+      background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
+    }
+  }
 }
 
 .form-check-input {

package/components/forms.scss

@@ -13,7 +13,15 @@
 @use './../themes/bootstrap/forms/input-group' as bfig;
 
 .form-control-rg {
-  @include form-mixins.form-control-rg;
+  @include form-mixins.form-rg;
+}
+
+.form-control-sm {
+  @include form-mixins.form-sm;
+}
+
+.form-control-lg {
+  @include form-mixins.form-lg;
 }
 
 select.form-control-rg:not([size]):not([multiple]) {
@@ -35,11 +43,6 @@ select.form-control-rg:not([size]):not([multiple]) {
   &[type='file'] {
     position: relative;
 
-    min-height: calc(
-      (1rem * forms.$input-line-height) + (forms.$input-padding-y * 2) +
-        (forms.$input-border-width * 2)
-    );
-
     &::file-selector-button {
       display: block;
       position: absolute;
@@ -108,11 +111,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-sm {
-      min-height: calc(
-        (1rem * forms.$input-line-height-sm) + (forms.$input-padding-y-sm * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-sm;
       }
@@ -130,11 +128,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-lg {
-      min-height: calc(
-        (1rem * forms.$input-line-height-lg) + (forms.$input-padding-y-lg * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-lg;
       }

package/components/grid.scss

@@ -88,8 +88,9 @@ $gutter-x-cache: 0;
   }
 }
 
-// legacy code
+//the following classes are all deprecated and wil be removed in next major version
 
+//deprecated
 .vertical-gutters {
   margin-bottom: grid.$grid-gutter-width * -1;
 
@@ -99,6 +100,7 @@ $gutter-x-cache: 0;
   }
 }
 
+//deprecated
 // border-gutters class is used to manipulate border collapse
 .row.border-gutters {
   margin-right: -(commons.$border-width);
@@ -113,8 +115,10 @@ $gutter-x-cache: 0;
   }
 }
 
+//deprecated
 $container-cache: 0;
 
+//deprecated
 @each $breakpoint in grid.$grid-breakpoints-list {
   $container-padding: map.get(grid.$grid-container-padding, $breakpoint);
 
@@ -153,6 +157,7 @@ $container-cache: 0;
     }
   }
 
+  //deprecated
   // Container fluid responsive needs to be written every time
   .container-fluid-#{$breakpoint} {
     @include media-breakpoint-only($breakpoint) {
@@ -161,5 +166,6 @@ $container-cache: 0;
     }
   }
 
+  //deprecated
   $container-cache: $container-padding;
 }

package/components/intranet-header/_layout.scss

@@ -0,0 +1,8 @@
+// Fix a regression after new version of grid
+sp-intranet-header ~ .container-fluid {
+  padding-left: 0;
+
+  > .row {
+    margin-left: 0;
+  }
+}

package/components/intranet-header/index.scss

@@ -7,6 +7,7 @@
 
 @use 'scaffolding';
 
+@use 'layout';
 @use 'top-navigation';
 @use 'sidebar';
 @use 'nav-overflow';

package/components/tabs/_tab-title.scss

@@ -6,7 +6,7 @@
 @use './../../variables/spacing';
 @use './../../variables/components/nav';
 
-.tab-title[role=tab]{
+.tab-title[role='tab'] {
   display: inline-block;
   position: relative;
   box-sizing: border-box;

package/components/timepicker.scss

@@ -76,7 +76,7 @@
   }
 
   .form-control {
-    @include form-mixins.form-control-rg;
+    @include form-mixins.form-rg;
   }
 }