@swisspost/design-system-styles 6.6.0 → 6.6.1

package/_svg-icon-map.scss

@@ -559,6 +559,12 @@ $svg-icon-map: (
     "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M0 0'/%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/g%3E%3C/svg%3E",
   '3000':
     "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/g%3E%3C/svg%3E",
+  '2574':
+    "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m30.05 12.7-9.71-1.41L16 2.49l-4.34 8.8-9.71 1.41 7.03 6.85-1.66 9.67L16 24.65l8.68 4.57-1.66-9.67z'/%3E%3C/g%3E%3C/svg%3E",
+  '2573':
+    "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m30.95 15.99-4.12 4.1h-1.89l3.43-3.42h-8.39v-1.33h8.42l-3.44-3.44h1.89zM13.32 5.34a2.67 2.67 0 1 1 5.339-.001 2.67 2.67 0 0 1-5.339.001m1.34 0a1.34 1.34 0 1 0 2.68 0 1.34 1.34 0 0 0-2.68 0m1.29 5.74 3.38 6.52-.53.32c-.08.05-.69.4-1.48.4-.23 0-.47-.03-.72-.1-.79-.23-1.44-.83-1.91-1.77l-.12-.2-.37 1.36 2.96 5.13 1.49 7.08-3.83 1.06-1.43-6.67L12 21.73v8.94H0v-1.33h3.41l-1.6-1.61 5.75-5.88.71-2.48c-1.86-.81-1.78-2.65-1.47-3.52l1.33-4.71.11-.12c.97-1.05 1.78-1.74 2.44-2.18V2.66H0V1.33h12v6.81c.34-.11.58-.14.68-.13 1.23-.1 2.18.2 2.75.89.67.78.59 1.78.52 2.18m-5.28 18.25v-4.96c-.32.53-.68 1.04-.93 1.28l-3.7 3.68zm2.1-11.52 1.85-6.88s.17-.73-.21-1.18c-.36-.42-1.11-.45-1.68-.41-.04 0-1.22.12-3.41 2.46l-1.26 4.44c-.08.25-.37 1.29.57 1.82l1.46-5.12 2.11-1.64.82 1.05-1.76 1.37-2.51 8.8-5.06 5.18 1.04 1.04 4.08-4.05c.37-.37 1.12-1.62 1.19-2l1.36-4.83 3.34 5.96 1.15 5.38 1.26-.35-1.21-5.74zm4.74-.83-2.06-3.97-.39 1.44.81 1.37c.32.63.68 1 1.09 1.12.19.06.38.06.55.04'/%3E%3C/g%3E%3C/svg%3E",
+  '2572':
+    "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M30 20.91c.4-1.01.62-2.11.62-3.26 0-2.25-.83-4.3-2.2-5.87v-5.9c0-1.63-1.32-2.95-2.95-2.95H2.95A2.94 2.94 0 0 0 0 5.87v13.05c0 1.63 1.33 2.95 2.95 2.95h2.99l-.02 9.45 8.31-8.61a8.98 8.98 0 0 0 7.4 3.9c3.77 0 6.99-2.33 8.32-5.62H30zm-1.5-6.63h-2.31c-.32-1.43-.83-2.68-1.48-3.64 1.65.73 2.99 2.03 3.79 3.64M21 10.15v4.13h-2.52c.53-2.13 1.51-3.66 2.52-4.13m1.33.03c.99.49 1.96 2.01 2.48 4.11h-2.48zm-5.23 4.1h-2.31a7.7 7.7 0 0 1 3.79-3.64c-.65.96-1.16 2.21-1.48 3.64M14 17.64c0-.7.1-1.38.28-2.03h2.59c-.08.65-.13 1.33-.13 2.03s.05 1.37.13 2.02h-2.59c-.18-.64-.28-1.32-.28-2.02m4.08 0c0-.71.05-1.38.14-2.03H21v4.05h-2.78c-.09-.63-.14-1.31-.14-2.02M21 21v4.13c-1.01-.47-1.99-2-2.52-4.13zm1.33 4.11V21h2.48c-.52 2.1-1.48 3.61-2.48 4.11m0-5.44v-4.05h2.73a14.6 14.6 0 0 1 0 4.05zm4.08-4.05H29a7.466 7.466 0 0 1 0 4.05h-2.59c.08-.65.13-1.33.13-2.02 0-.7-.05-1.38-.13-2.03M7.27 28.03l.01-6.14v-1.34H2.95c-.89 0-1.62-.73-1.62-1.62V5.87c0-.89.73-1.62 1.62-1.62h22.52c.89 0 1.62.73 1.62 1.62v4.65a8.9 8.9 0 0 0-5.45-1.85 8.98 8.98 0 0 0-8.98 8.98c0 1.39.32 2.7.89 3.87zM14.79 21h2.32c.32 1.44.83 2.69 1.48 3.64a7.6 7.6 0 0 1-3.8-3.64m9.92 3.64c.65-.96 1.16-2.21 1.48-3.64h2.32a7.73 7.73 0 0 1-3.8 3.64'/%3E%3C/g%3E%3C/svg%3E",
   '2571':
     "data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='M10.67 23.49c-2.36 0-4.27 1.91-4.27 4.26s1.91 4.26 4.27 4.26 4.27-1.91 4.27-4.26a4.27 4.27 0 0 0-4.27-4.26m0 7.18c-1.62 0-2.93-1.31-2.93-2.93 0-1.61 1.32-2.93 2.93-2.93s2.93 1.31 2.93 2.93-1.32 2.93-2.93 2.93m17.41-19.49a2 2 0 0 0-1.99-1.87H10.67V4.27c0-.18.15-.33.33-.33h9v.61c0 1.15.95 2.1 2.1 2.1h3.23V5.28H28V3.95h-2.67V2.66H28V1.33h-2.67V0H22.1C20.95 0 20 .94 20 2.1v.51h-9c-.92 0-1.67.75-1.67 1.66v5.04h-8v1.33h8v7.98h-8v1.33h20v7.98h-4c0-.08-.01-1.68-.82-3.3-.77-1.54-2.41-3.37-5.85-3.37-3.45 0-5.09 1.92-5.85 3.54-.61 1.28-.76 2.55-.8 3.13H1.33v1.33h4v-1.01c0-.23.08-5.65 5.33-5.65s5.33 5.12 5.33 5.33v1.33h11.25c.55 0 1.08-.23 1.46-.63s.57-.94.54-1.5zM21.33 2.1c0-.42.35-.77.77-.77H24v3.99h-1.9c-.42 0-.77-.35-.77-.77zM10.67 18.63v-7.98h10.67v7.98zm17.06 9.1a.65.65 0 0 1-.49.21h-4.58v-17.3h3.42c.35 0 .64.27.66.63l1.17 15.96c.01.19-.05.36-.18.5'/%3E%3C/g%3E%3C/svg%3E",
   '2570':

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/floating-label.scss

@@ -4,6 +4,7 @@
 @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;
@@ -52,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 *
@@ -68,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 {
@@ -107,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;
 
@@ -121,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 {
@@ -135,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;
 
@@ -174,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,32 +16,51 @@
     }
   }
 
-  &.is-valid,
-  &.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);
+    }
 
-  &.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);
+    &.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() {
@@ -72,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

@@ -61,6 +61,14 @@
       background-repeat: no-repeat;
       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;
+      }
     }
   }
 
@@ -93,30 +101,43 @@
 
 .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);
 
-    &.is-valid {
-      padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
-      border-color: var(--post-success-green);
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
-      background-repeat: no-repeat;
-      background-position: right b.$input-height-inner-quarter center;
+    &:focus {
+      border-color: form-validation.$form-feedback-invalid-color;
+      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+    }
+  }
 
-      &.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)
-      }
+  &.is-valid {
+    border-color: var(--post-success-green);
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
 
-      &.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)
-      }
+    &:focus {
+      border-color: form-validation.$form-feedback-valid-color;
+      box-shadow: form-validation.$form-feedback-valid-box-shadow;
     }
+  }
 
-    &:focus {
-      border-color: form-validation.$form-feedback-invalid-color;
-      box-shadow: form-validation.$form-feedback-invalid-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.
     }
   }
 }

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/timepicker.scss

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