@swisspost/design-system-styles 5.4.1 → 6.1.0

package/components/accordion.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/accordion' as ba;
 
 @use './../mixins/type';

package/components/alert.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 @use './../variables/color';
 @use './../variables/commons';
@@ -23,8 +23,6 @@
 }
 
 .alert {
-  $effective-line-height: (alert.$alert-line-height * alert.$alert-font-size);
-
   @extend %notification;
 
   min-height: 2 * alert.$alert-padding-y + alert.$alert-icon-size;
@@ -84,8 +82,7 @@
   }
 }
 
-.alert-fixed-bottom,
-%alert-fixed {
+.alert-fixed-bottom {
   position: fixed;
   z-index: commons.$zindex-alert;
   bottom: 0;
@@ -129,8 +126,6 @@
 }
 
 .alert-action {
-  @extend %alert-fixed;
-
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;

package/components/badge.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/badge' as bb;
 @use './../themes/bootstrap/close' as bc; // Styles for the close icon
 

package/components/breadcrumb.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/breadcrumbs' as bb;
 
 @use './../variables/type';

package/components/button-group.scss

@@ -1,69 +1,45 @@
-@use './../variables/color';
+@forward './../variables/options';
+
+@use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as *;
+@use './../themes/bootstrap/button-group' as bg;
+
 @use './../mixins/utilities';
-@use './../placeholders/button';
+@use './../variables/color';
+@use './../variables/components/button';
 
 .btn-group {
-  display: inline-flex;
-  gap: 0.125rem;
   max-width: 100%;
 
-  .btn-primary {
-    // Reset primary button for backwards compatibility
-    @extend %btn-default;
-  }
-
-  .btn {
-    border: 0;
-    outline-offset: 0.25rem;
-    box-shadow: 0 0 0 0.125rem color.$gray-20;
+  > .btn {
     white-space: normal;
-    text-align: center;
     cursor: pointer;
 
-    @include utilities.not-disabled-focus-hover() {
-      box-shadow: 0 0 0 0.125rem var(--post-contrast-color);
-    }
+    // added a transition delay on the "z-index" so the button only moves back after all other transitions
+    z-index: 0;
+    transition: z-index 0s ease (0.5 * button.$btn-transition-duration), button.$btn-transition;
 
-    &:focus,
-    &:focus-within {
-      z-index: 1;
-    }
-
-    &:not(:disabled):hover {
-      z-index: 2;
-    }
-
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+    @include utilities.high-contrast-mode() {
+      transition: none !important;
     }
+  }
 
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  > .btn:hover {
+    // remove the transition delay on the "z-index" for all raised states so the button moves forward before other transitions
+    z-index: 2 !important;
+    transition: button.$btn-transition;
+  }
 
-    &.active {
-      border-color: color.$yellow;
-      background-color: color.$yellow;
-      color: color.$black;
+  > .btn-secondary {
+    border-color: color.$gray-20;
+  }
 
-      @include utilities.high-contrast-mode() {
-        background-color: Highlight;
-      }
-    }
+  > .btn-secondary.active,
+  > .btn-check:checked + .btn-secondary {
+    background-color: color.$yellow;
 
     @include utilities.high-contrast-mode() {
-      &:focus,
-      &:focus-within,
-      &:focus-visible {
-        outline: 2px solid highlight;
-      }
-    }
-
-    input[type='checkbox'],
-    input[type='radio'] {
-      @include utilities.visuallyhidden();
+      background-color: Highlight;
     }
   }
 }

package/components/button.scss

@@ -27,7 +27,7 @@
   justify-content: center;
   max-width: 100%;
   overflow: hidden;
-  transition: opacity 250ms, border-color 250ms, background-color 250ms, color 250ms;
+  transition: button.$btn-transition;
   border-width: button.$btn-border-width;
   border-style: solid;
   border-radius: button.$btn-border-radius;
@@ -36,7 +36,6 @@
   color: var(--post-contrast-color);
   font-family: inherit;
   font-weight: button.$btn-font-weight;
-  line-height: inherit;
   text-decoration: none !important; // For <a> tags, !important for hover
   white-space: nowrap; // Long content should never break in buttons
 }

package/components/card.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as bootstrap;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/card' as bootstrap-card;
 @use './../variables/color';
 @use './../variables/spacing';
@@ -92,19 +92,19 @@
 
   .product-card &,
   .card-button & {
-    @include bootstrap.media-breakpoint-down(sm) {
+    @include media-breakpoint-down(sm) {
       padding: spacing.$size-regular;
     }
 
-    @include bootstrap.media-breakpoint-between(sm, md) {
+    @include media-breakpoint-between(sm, md) {
       padding: spacing.$size-large;
     }
 
-    @include bootstrap.media-breakpoint-between(md, xxl) {
+    @include media-breakpoint-between(md, xxl) {
       padding: spacing.$size-big;
     }
 
-    @include bootstrap.media-breakpoint-up(xxl) {
+    @include media-breakpoint-up(xxl) {
       padding: spacing.$size-bigger-big;
     }
   }

package/components/carousel.scss

@@ -2,7 +2,7 @@
 
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/carousel' as bc;
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 @use './../functions/icons';
 @use './../variables/color';

package/components/close.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/close' as bc;
 
 @use './../variables/components/close';

package/components/datepicker.scss

@@ -1,6 +1,7 @@
 @forward './../variables/options';
 
 @use './../variables/color';
+@use './../variables/type';
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
@@ -73,7 +74,7 @@ span.ngb-dp-navigation-chevron {
   color: rgba(var(--post-contrast-color-rgb), 0.6) !important;
   font-size: 1rem;
   font-style: normal !important;
-  line-height: 1.47 !important;
+  line-height: type.$line-height-copy !important;
   width: 40px !important;
   height: auto !important;
   font-weight: normal;

package/components/floating-label.scss

@@ -21,7 +21,7 @@
     padding-inline: forms.$form-floating-padding-x;
     padding-block: calc(
       #{forms.$input-border-width} + #{forms.$form-floating-label-height * 0.5} - #{forms.$form-floating-label-font-size *
-        type.$line-height-base * 0.5}
+        type.$line-height-copy * 0.5}
     );
     height: forms.$form-floating-label-height;
     border: 0;
@@ -99,10 +99,6 @@
       padding-bottom: 0;
       height: auto;
 
-      option {
-        height: 1em * forms.$form-floating-line-height;
-      }
-
       ~ label {
         padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
         padding-bottom: 0;

package/components/form-check.scss

@@ -2,7 +2,7 @@
 
 @use 'sass:math';
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/forms/form-check' as bfc;
 
 @use './../variables/color';

package/components/form-range.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/forms' as bf;
 
 @use './../variables/commons';

package/components/form-select.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/forms' as bf;
 @use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';

package/components/grid.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/grid' as bg;
 @use './../themes/bootstrap/containers' as bc;
 

package/components/intranet-header/_logo.scss

@@ -1,7 +1,7 @@
 @use './../../variables/color';
 @use './../../variables/components/intranet-header';
 
-@use './../../themes/bootstrap/overrides' as *;
+@use './../../themes/bootstrap/core' as *;
 
 %header-logo {
   display: block;

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

@@ -2,7 +2,7 @@
 @use './../../variables/commons';
 @use './../../functions/icons';
 
-@use './../../themes/bootstrap/overrides' as *;
+@use './../../themes/bootstrap/core' as *;
 @use './../../placeholders/dropdown';
 
 .top-navigation {

package/components/intranet-header/_scaffolding.scss

@@ -3,7 +3,7 @@
 @use './../../variables/commons';
 @use './../../variables/components/intranet-header';
 
-@use './../../themes/bootstrap/overrides' as *;
+@use './../../themes/bootstrap/core' as *;
 
 // based from http://getbootstrap.com/docs/4.1/examples/dashboard/
 .navbar-brand {
@@ -47,7 +47,6 @@
   h2 {
     overflow: hidden;
     font-size: 1.6rem; // Same as PostWeb
-    line-height: 1.2;
     text-overflow: ellipsis;
   }
 }

package/components/intranet-header/_searchbox.scss

@@ -4,7 +4,7 @@
 @use './../../variables/commons';
 @use './../../variables/components/intranet-header';
 
-@use './../../themes/bootstrap/overrides' as *;
+@use './../../themes/bootstrap/core' as *;
 
 header.navbar {
   .search-textbox {

package/components/intranet-header/_sidebar.scss

@@ -3,7 +3,7 @@
 @use './../../variables/commons';
 @use './../../variables/components/intranet-header';
 
-@use './../../themes/bootstrap/overrides' as *;
+@use './../../themes/bootstrap/core' as *;
 
 // Sidebar
 #sidebar {

package/components/intranet-header/_top-navigation.scss

@@ -8,13 +8,14 @@
 @use './../../mixins/utilities';
 
 @use './../../themes/bootstrap/navbar' as bn;
-@use './../../themes/bootstrap/overrides' as *;
+@use './../../themes/bootstrap/core' as *;
 
 .top-navigation {
   button.nav-link {
     @include button-mixins.reset-button();
+    display: flex;
+    align-items: center;
     padding: nav.$nav-link-padding-y navbar.$navbar-nav-link-padding-x;
-    line-height: var(--post-body-line-height);
 
     @include media-breakpoint-down(md) {
       padding: 1rem 3rem 1rem 0;

package/components/list-group.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/list-group' as bl;
 
 @use './../variables/color';

package/components/modal.scss

@@ -3,7 +3,7 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/modal' as bm;
 @use './../themes/bootstrap/close' as bc;
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 @use './../mixins/icons' as icon-mixin;
 @use './../mixins/scroll-shadows' as scroll-shadows-mixin;

package/components/offcanvas.scss

@@ -1,5 +1,5 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/offcanvas' as bc;

package/components/popover.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/popover' as bp;
 
 @use './../variables/type';

package/components/product-card.scss

@@ -3,7 +3,6 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as bootstrap;
 @use './../themes/bootstrap/card' as bootstrap-card;
 @use './../variables/color';
 @use './../variables/spacing';

package/components/progress.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/progress' as bp;
 
 @use './../variables/commons';
@@ -22,7 +22,6 @@
 
     > span {
       background-color: ButtonFace;
-      line-height: 1;
     }
   }
 }

package/components/sizing.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use 'sass:map';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../variables/spacing';
 @use './../variables/breakpoints';
 @use './../mixins/utilities';
@@ -16,7 +16,7 @@
         in (
           margin: m,
           padding: p,
-          line-height: lh,
+          /* Deprecated */ line-height: lh,
           height: h,
           max-height: mh,
           width: w,

package/components/spinner.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/progress' as bp;
 
 @use './../mixins/utilities';

package/components/stepper.scss

@@ -2,9 +2,10 @@
 @use './../mixins/utilities';
 
 @use './../variables/spacing';
+@use './../variables/color';
 @use './../variables/components/stepper';
 
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 .stepper-container {
   @include size-mx.responsive-size('big', 'margin-bottom');
@@ -15,6 +16,10 @@
   height: stepper.$stepper-bar-height;
   margin-top: stepper.$stepper-indicator-height * 0.5;
   margin-bottom: -1 * (stepper.$stepper-bar-height + stepper.$stepper-indicator-height) * 0.5;
+
+  .progress-bar {
+    background-color: color.$yellow;
+  }
 }
 
 .stepper {
@@ -42,6 +47,7 @@
   &:last-child {
     justify-self: end;
     align-items: end;
+    text-align: right;
     transform: translateX(#{0.5 * stepper.$stepper-indicator-height});
   }
 
@@ -82,17 +88,17 @@
     content: counter(step-index);
   }
 
-  &[aria-current] ~ &:not(:hover)::before {
-    color: stepper.$stepper-indicator-future-color;
-    background-color: stepper.$stepper-indicator-future-bg;
-  }
-
   &:hover::before {
     color: stepper.$stepper-indicator-hover-color;
     background-color: stepper.$stepper-indicator-hover-bg;
     background-image: stepper.$stepper-indicator-hover-check-icon;
   }
 
+  &[aria-current] ~ ::before {
+    color: stepper.$stepper-indicator-future-color;
+    background-color: stepper.$stepper-indicator-future-bg;
+  }
+
   &:is(:focus-visible, :focus-within)::before {
     outline: stepper.$stepper-indicator-hover-outline;
   }

package/components/subnavigation.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 @use './../mixins';
 @use './../mixins/utilities';

package/components/tabs.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/nav' as n;
 
 @use './../variables/components/nav';

package/components/toast.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 @use './../variables/components/toasts';
 @use './../variables/components/alert';

package/components/topic-teaser.scss

@@ -2,7 +2,7 @@
 
 @use 'sass:map';
 
-@use './../themes/bootstrap/overrides' as *;
+@use './../themes/bootstrap/core' as *;
 
 @use './../functions/icons';
 @use './../variables/color';