@swisspost/design-system-styles 6.4.1 → 6.4.2

package/components/form-check.scss

@@ -1,6 +1,7 @@
 @forward './../variables/options';
 
 @use '../variables/color';
+@use '../variables/type';
 @use '../variables/spacing';
 @use '../variables/animation';
 @use '../variables/components/form-check';
@@ -17,6 +18,10 @@
     display: inline-flex;
   }
 
+  &-inline:not(:last-of-type) {
+    margin-right: form-check.$form-check-inline-margin-right;
+  }
+
   &-input,
   &-label {
     color: rgba(var(--post-contrast-color-rgb), 0.8);
@@ -78,7 +83,7 @@
       border-radius: 50%;
 
       &:checked::after {
-        margin: spacing.$size-micro;
+        border: spacing.$size-micro solid color.$white;
         background-color: currentColor;
         border-radius: inherit;
       }
@@ -86,14 +91,28 @@
 
     &[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;
     }
+
+    .form-check-sm & {
+      height: form-check.$form-check-input-size-sm;
+      width: form-check.$form-check-input-size-sm;
+
+      &[type='radio'] {
+        &:checked::after {
+          border-width: spacing.$size-line;
+        }
+      }
+    }
   }
 
   &-label {
     flex: 1;
+
+    .form-check-sm & {
+      font-size: type.$font-size-12;
+    }
   }
 }
 
@@ -123,7 +142,7 @@
       background-position-x: form-check.$form-switch-width;
 
       &::after {
-        mask: none;
+        @include icons-mx.remove-icon;
         background-color: form-check.$form-switch-color;
         border-color: form-check.$form-switch-checked-border-color;
         transform: translateX(2rem);

package/components/form-validation.scss

@@ -6,8 +6,10 @@
 
 @use './../mixins/color' as color-mx;
 @use './../mixins/utilities' as utilities-mx;
+@use './../mixins/form-validation' as form-validation-mx;
 @use './../variables/color';
 @use './../variables/components/form-validation';
+@use './../variables/components/forms';
 
 .invalid-feedback,
 .valid-feedback {
@@ -81,9 +83,14 @@
   }
 }
 
+.is-invalid ~ .invalid-feedback,
+.is-valid ~ .valid-feedback {
+  display: block;
+}
+
 .form-control,
 .form-select {
-  @include form-validation-state-selector(invalid) {
+  @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
 
     &:focus {
@@ -94,7 +101,7 @@
 }
 
 .form-check-input {
-  @include form-validation-state-selector(invalid) {
+  @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
 
     &:focus {

package/components/grid.scss

@@ -11,6 +11,85 @@
 @use './../variables/spacing';
 @use './../variables/grid';
 
+$container-padding-x-cache: 0;
+$container-fluid-padding-x-cache: 0;
+$gutter-x-cache: 0;
+
+.container {
+  padding-inline: var(--post-container-padding-x);
+}
+
+.container-fluid {
+  padding-inline: var(--post-container-fluid-padding-x);
+}
+
+@each $breakpoint in grid.$grid-breakpoints-list {
+  $container-padding-x: map.get(grid.$grid-container-padding, $breakpoint);
+  $container-fluid-padding-x: map.get(grid.$grid-container-fluid-padding, $breakpoint);
+  $gutter-x: map.get(grid.$grid-gutter-x, $breakpoint);
+
+  @if ($container-padding-x-cache != $container-padding-x) {
+    .container {
+      @if $breakpoint == 'xs' {
+        --post-container-padding-x: #{$container-padding-x};
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          --post-container-padding-x: #{$container-padding-x};
+        }
+      }
+    }
+  }
+
+  @if ($container-fluid-padding-x-cache != $container-fluid-padding-x) {
+    .container-fluid {
+      @if $breakpoint == 'xs' {
+        --post-container-fluid-padding-x: #{$container-fluid-padding-x};
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          --post-container-fluid-padding-x: #{$container-fluid-padding-x};
+        }
+      }
+    }
+  }
+
+  @if ($gutter-x-cache != $gutter-x) {
+    .row {
+      @if $breakpoint == 'xs' {
+        --bs-gutter-x: #{$gutter-x};
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          --bs-gutter-x: #{$gutter-x};
+        }
+      }
+    }
+  }
+
+  $container-padding-x-cache: $container-padding-x;
+  $container-fluid-padding-x-cache: $container-fluid-padding-x;
+  $gutter-x-cache: $gutter-x;
+}
+
+// redefine gutter-utilities, to override the custom gutter-width above
+@each $infix in grid.$grid-breakpoints-list {
+  @each $postfix, $gutter in $gutters {
+    @if $infix == 'xs' {
+      .g-#{$postfix},
+      .gx-#{$postfix} {
+        --bs-gutter-x: #{$gutter};
+      }
+    } @else {
+      @include media-breakpoint-up($infix) {
+        .g-#{$infix}-#{$postfix},
+        .gx-#{$infix}-#{$postfix} {
+          --bs-gutter-x: #{$gutter};
+        }
+      }
+    }
+  }
+}
+
+// legacy code
+
 .vertical-gutters {
   margin-bottom: grid.$grid-gutter-width * -1;
 
@@ -41,20 +120,6 @@ $container-cache: 0;
 
   // Ensure this breakpoint is only overwritten when the padding differs from the last breakpoint
   @if ($container-cache != $container-padding) {
-    // Loop over breakpoints and set custom-paddings to .container for each breakpoint
-    .container {
-      // If xs, don't add media-query
-      @if $breakpoint == 'xs' {
-        padding-right: $container-padding;
-        padding-left: $container-padding;
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          padding-right: $container-padding;
-          padding-left: $container-padding;
-        }
-      }
-    }
-
     .container-reset {
       @if $breakpoint == 'xs' {
         margin-right: -($container-padding);

package/components/intranet-header/_language-chooser.scss

@@ -10,7 +10,7 @@
   overflow-y: visible;
 
   .dropdown-item {
-    padding: spacing.$size-small-regular spacing.$size-large;
+    padding: spacing.$size-small-regular 0;
   }
 
   .language-menu {
@@ -23,6 +23,7 @@
       border-left: 0;
       border-radius: 0;
       text-align: center;
+      overflow: initial;
 
       &:last-child {
         border-right: 0;

package/components/intranet-header/_scaffolding.scss

@@ -44,7 +44,7 @@
 .intranet-header .title {
   overflow: hidden;
 
-  h2 {
+  h1 {
     overflow: hidden;
     font-size: 1.6rem; // Same as PostWeb
     text-overflow: ellipsis;

package/components/tabs/_tab-title.scss

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