@swisspost/design-system-styles 5.0.0-alpha.7

package/components/tabs.scss

@@ -0,0 +1,212 @@
+@forward '../variables/options';
+
+@use '../lic/bootstrap-license';
+@use '../themes/bootstrap/overrides' as *;
+
+@use '../variables/components/nav';
+@use '../variables/spacing';
+@use '../variables/commons';
+@use '../variables/color';
+@use '../mixins/color' as color-mx;
+@use '../mixins/utilities';
+
+.tabs-wrapper {
+  position: relative;
+  padding-top: spacing.$spacer;
+  border: 0;
+  background-color: color.$gray-background-light;
+
+  // Create a line that lies below the active but above the passive elements
+  // This way hover works smoothly with the background color
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: nav.$nav-tabs-border-color;
+  }
+
+  // Small hack to save a lot of code and provide a lot of flexibility to tabs coloring
+  .tabs {
+    background-color: transparent !important;
+  }
+
+  @include utilities.high-contrast-mode() {
+    &::after {
+      background-color: ButtonBorder;
+    }
+  }
+}
+
+.tabs {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  white-space: nowrap;
+
+  // Scrolling fix, make the tabs scroll a little more so the right most tab is not
+  // flush with the window border
+  &::after {
+    content: '';
+    display: block;
+    flex: 1 0 auto;
+    width: nav.$nav-link-padding-x;
+  }
+
+  .tab-title {
+    position: relative;
+    box-sizing: border-box;
+    padding: nav.$nav-link-padding;
+    transition: background-color 100ms;
+    border-right: 1px solid transparent;
+    border-left: 1px solid transparent;
+    outline-color: currentColor;
+    opacity: 0.7;
+    color: var(--post-contrast-color);
+
+    &:focus {
+      opacity: 0.7;
+      background-color: unset;
+      color: var(--post-contrast-color);
+    }
+
+    &:hover {
+      opacity: 1;
+      background-color: nav.$nav-tabs-link-active-bg;
+      color: var(--post-contrast-color);
+    }
+
+    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
+    &:focus-visible {
+      outline: transparent;
+      opacity: 1;
+      background-color: nav.$nav-tabs-link-active-bg;
+      color: var(--post-contrast-color);
+
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: $nav-tabs-focus-box-shadow-width;
+        right: $nav-tabs-focus-box-shadow-width - 1px;
+        bottom: 0;
+        left: $nav-tabs-focus-box-shadow-width - 1px;
+        box-shadow: nav.$nav-tabs-focus-box-shadow;
+      }
+    }
+
+    &.active {
+      z-index: 1; // Lift above the line and make focus visible all around
+      border-right-color: nav.$nav-tabs-border-color;
+      border-left-color: nav.$nav-tabs-border-color;
+      opacity: 1;
+      background-color: nav.$nav-tabs-link-active-bg;
+      color: var(--post-contrast-color);
+      font-weight: 700;
+
+      // Create a line that does not suffer from border corner mitering
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: -1px;
+        left: -1px;
+        height: spacing.$size-micro;
+        background-color: nav.$nav-tabs-link-active-border-color;
+      }
+    }
+
+    @include utilities.high-contrast-mode() {
+      opacity: 1;
+      border-left-color: Canvas;
+      border-right-color: Canvas;
+      color: LinkText;
+
+      &:hover,
+      &:focus,
+      &:focus-within,
+      &:focus-visible {
+        outline: spacing.$size-line solid Highlight;
+        outline-offset: -(spacing.$size-micro);
+      }
+
+      &.active {
+        border-left-color: ButtonText;
+        border-right-color: ButtonText;
+        color: Highlight;
+
+        &::before {
+          background-color: Highlight;
+        }
+      }
+    }
+  }
+
+  // Tabs with dark backgrounds
+  @include color-mx.on-dark-background(true) {
+    .tab-title {
+      &:hover {
+        background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+      }
+
+      &:focus-visible {
+        background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
+      }
+    }
+  }
+}
+
+.tab-content {
+  padding-top: spacing.$spacer;
+  padding-bottom: spacing.$spacer;
+}
+
+// Careful, this generates a lot of code
+@each $key, $color in color.$background-colors {
+  .bg-#{$key} {
+    .tabs-wrapper {
+      background-color: $color;
+    }
+
+    .tab-title {
+      background-color: $color;
+
+      &.active {
+        background-color: $color;
+      }
+    }
+
+    .nav-item {
+      background-color: $color;
+    }
+  }
+}
+
+[class*='bg-'] .tab-title.active {
+  &:focus {
+    &::after {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  // write supports for selectors this way: https://stackoverflow.com/a/62666132
+  // need to include * otherwise it throws build error
+  @supports #{'\selector(*:focus-visible)'} {
+    &:focus {
+      &::after {
+        background-color: unset;
+      }
+    }
+
+    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
+    &:focus-visible {
+      &::after {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}

package/components/timepicker.scss

@@ -0,0 +1,123 @@
+@forward '../variables/options';
+
+@use 'sass:map';
+
+@use '../mixins/utilities';
+@use '../mixins/icons' as icon-mixins;
+@use '../mixins/forms' as form-mixins;
+@use '../mixins/button' as button-mixins;
+
+@use '../variables/color';
+@use '../variables/components/forms';
+@use '../variables/components/button';
+
+// Basic timepicker overrides
+.ngb-tp {
+  .ngb-tp-input-container {
+    width: auto;
+  }
+
+  .form-control {
+    width: 4.5rem;
+  }
+
+  .form-control-sm,
+  .form-control-rg {
+    width: 4rem;
+  }
+
+  .form-control-lg {
+    width: 6rem;
+    padding: 1rem 1.375rem;
+    @include form-mixins.placeholder {
+      color: forms.$input-placeholder-color;
+    }
+  }
+
+  .ngb-tp-chevron {
+    &::before {
+      @include icon-mixins.pi('2051');
+      width: map.get(button.$btn-icon-size-map, 'md');
+      height: map.get(button.$btn-icon-size-map, 'md');
+      transform: none;
+      border: 0;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: contain;
+    }
+
+    &.bottom::before {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  @each $size in sm, lg {
+    .btn-#{$size} .ngb-tp-chevron::before {
+      width: map.get(button.$btn-icon-size-map, $size);
+      height: map.get(button.$btn-icon-size-map, $size);
+    }
+  }
+
+  @include utilities.high-contrast-mode() {
+    .form-control {
+      &:hover,
+      &:focus-visible {
+        border-color: Highlight;
+      }
+    }
+  }
+}
+
+// Regular-sized timepicker
+.timepicker-rg {
+  .btn {
+    @include button-mixins.button-size(rg);
+
+    .ngb-tp-chevron::before {
+      width: map.get(button.$btn-icon-size-map, 'rg');
+      height: map.get(button.$btn-icon-size-map, 'rg');
+    }
+  }
+
+  .form-control {
+    @include form-mixins.form-control-rg;
+  }
+}
+
+// Timepicker validation
+ngb-timepicker {
+  &.ng-invalid {
+    .form-control {
+      border-color: color.$error;
+
+      &:focus {
+        border-color: color.$error;
+        box-shadow: 0 0 0 forms.$input-focus-width rgba(color.$error, 0.25);
+      }
+    }
+
+    ~ .invalid-feedback,
+    ~ .invalid-tooltip {
+      display: block;
+    }
+  }
+
+  &.ng-valid {
+    ~ .valid-feedback,
+    ~ .valid-tooltip {
+      display: block;
+    }
+  }
+
+  @include utilities.high-contrast-mode() {
+    &.ng-invalid,
+    &.ng-valid {
+      .form-control {
+        &:hover,
+        &:focus-visible {
+          border-color: Highlight;
+        }
+      }
+    }
+  }
+}

package/components/toast.scss

@@ -0,0 +1,187 @@
+@forward '../variables/options';
+
+@use '../lic/bootstrap-license';
+@use '../themes/bootstrap/overrides' as *;
+
+@use '../variables/components/toasts';
+@use '../variables/components/alert';
+@use '../components/close';
+@use '../functions/color' as color-fn;
+@use '../placeholders/color' as color-ph;
+@use '../placeholders/notifications';
+
+// Positioning
+.toast-top-center,
+.toast-top-full-width,
+.toast-top-left,
+.toast-top-right {
+  top: alert.$alert-margin;
+}
+
+.toast-bottom-center,
+.toast-bottom-full-width,
+.toast-bottom-right,
+.toast-bottom-left {
+  bottom: alert.$alert-margin;
+}
+
+.toast-top-left,
+.toast-bottom-left,
+.toast-top-full-width,
+.toast-bottom-full-width,
+.toast-center-left {
+  left: alert.$alert-margin;
+}
+
+.toast-top-right,
+.toast-bottom-right,
+.toast-top-full-width,
+.toast-bottom-full-width,
+.toast-center-right {
+  right: alert.$alert-margin;
+}
+
+.toast-top-center,
+.toast-bottom-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-center-left,
+.toast-center-right {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.toast-center-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.toast-top-full-width,
+.toast-bottom-full-width {
+  .toast {
+    width: 100% !important;
+  }
+}
+
+// Base styling
+.toast-container {
+  @extend %notification-container;
+  position: fixed;
+  pointer-events: none;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.toast {
+  $effective-line-height: (alert.$alert-line-height * alert.$alert-font-size-small);
+
+  @extend %notification;
+
+  display: flex !important; // Needs to be important to override display styling by the ngx-toaster
+  width: alert.$alert-toast-width;
+
+  min-height: 2 * alert.$alert-toast-padding-y + 2 * $effective-line-height;
+
+  padding: alert.$alert-toast-padding-y alert.$alert-toast-padding-x;
+  padding-left: (alert.$alert-toast-padding-x * 2 + alert.$alert-toast-icon-size);
+
+  overflow: hidden;
+  background-position: alert.$alert-toast-padding-x center;
+
+  background-size: alert.$alert-toast-icon-size;
+  font-size: alert.$alert-font-size-small;
+  pointer-events: auto;
+
+  &.no-icon {
+    padding-left: alert.$alert-toast-padding-x;
+  }
+
+  &:hover {
+    opacity: 1;
+    box-shadow: alert.$alert-toast-box-shadow-hover;
+    cursor: pointer;
+  }
+
+  .toast-close-button {
+    @extend %notification-close;
+
+    padding: alert.$alert-toast-padding-y alert.$alert-toast-padding-x;
+  }
+}
+
+.toast-title {
+  @extend %notification-title;
+
+  font-size: alert.$alert-font-size-small;
+}
+
+.toast-message {
+  font-size: alert.$alert-font-size-small;
+  word-wrap: break-word;
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+/* stylelint-disable */
+.toast-close-button {
+  @extend .btn-close;
+}
+/* stylelint-enable */
+
+.toast {
+  .toast-close-button,
+  .btn-close {
+    ~ .toast-message,
+    ~ .toast-title {
+      padding-right: calc(#{alert.$alert-toast-padding-x} + #{alert.$alert-close-icon-size});
+    }
+
+    + .toast-message {
+      font-weight: bold;
+    }
+  }
+}
+
+// Variants
+
+@each $name, $color, $icon in alert.$alert-list {
+  .toast-#{$name} {
+    --post-bg-rgb: #{color-fn.rgb-values($color)};
+    @extend %notification-#{$name};
+
+    @if (color-fn.get-contrast-color($color) != #000) {
+      @extend %color-background-dark-variables;
+    } @else {
+      @extend %color-background-light-variables;
+    }
+
+    .toast-close-button,
+    .btn-close {
+      @extend %notification-#{$name}-close;
+    }
+  }
+}
+
+// Responsive Design
+@include media-breakpoint-down(md) {
+  .toast-container .toast {
+    width: alert.$alert-toast-width-small-breakpoint;
+  }
+}
+@include media-breakpoint-down(sm) {
+  .toast-container {
+    right: alert.$alert-margin;
+    left: alert.$alert-margin;
+
+    .toast {
+      width: 100%;
+    }
+  }
+}

package/components/tooltip.scss

@@ -0,0 +1,23 @@
+@forward '../variables/options';
+
+@use '../lic/bootstrap-license';
+@use '../themes/bootstrap/tooltip' as bt;
+
+// There's a 1px-gap between the arrow and the tooltip-body.
+// We can fix that by moving the arrow to the opposite direction, according to the tooltip-positioning (position top -> move direction bottom etc)
+
+.bs-tooltip-top .arrow {
+  bottom: 1px;
+}
+
+.bs-tooltip-right .arrow {
+  left: 1px;
+}
+
+.bs-tooltip-bottom .arrow {
+  top: 1px;
+}
+
+.bs-tooltip-left .arrow {
+  right: 1px;
+}