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

package/intranet.scss

@@ -0,0 +1,6 @@
+@forward './variables/options';
+
+@use './lic/bootstrap-license';
+
+@use 'components';
+@use 'components/intranet-header';

package/layouts/portal/_grid.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+
+@use '../../themes/bootstrap/overrides' as *;
+
+@use '../../variables/grid';
+@use '../../variables/commons';
+@use './variables' as portal-variables;
+
+.container-fluid {
+  max-width: map.get(grid.$container-max-widths, xs);
+  padding-right: 0;
+  padding-left: 0;
+
+  &:not(.allow-overflow) {
+    overflow: hidden; // hides scrollbar
+  }
+}
+
+// px-gutters class is used to manipulate border collapse in product-cards
+.row.px-gutters {
+  margin-right: -(commons.$border-width);
+  margin-bottom: -(commons.$border-width);
+  margin-left: 0;
+
+  > .col,
+  > [class*='col-'] {
+    padding-right: commons.$border-width;
+    padding-bottom: commons.$border-width;
+    padding-left: 0;
+  }
+}
+
+// Overwrites gutter on rg-sized screens and bigger
+@include media-breakpoint-up(rg) {
+  .col,
+  [class*='col-'] {
+    padding-right: portal-variables.$grid-gutter-width-rg * 0.5;
+    padding-left: portal-variables.$grid-gutter-width-rg * 0.5;
+  }
+
+  .row {
+    margin-right: -(portal-variables.$grid-gutter-width-rg * 0.5);
+    margin-left: -(portal-variables.$grid-gutter-width-rg * 0.5);
+
+    &.no-gutters {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+
+  .vertical-gutters {
+    margin-bottom: -(portal-variables.$grid-gutter-width-rg);
+
+    > .col,
+    > [class*='col-'] {
+      padding-bottom: portal-variables.$grid-gutter-width-rg;
+    }
+  }
+}
+
+@each $breakpoint in grid.$grid-breakpoints-list {
+  .container-fluid-#{$breakpoint} {
+    @include media-breakpoint-only($breakpoint) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+}
+
+.container-reset-right-rg-up {
+  @include media-breakpoint-up(rg) {
+    margin-left: 0;
+  }
+}
+
+.container-reset-left-rg-up {
+  @include media-breakpoint-up(rg) {
+    margin-right: 0;
+  }
+}

package/layouts/portal/_subnavigation.scss

@@ -0,0 +1,5 @@
+.subnavigation-list {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}

package/layouts/portal/_type.scss

@@ -0,0 +1,83 @@
+@use 'sass:map';
+
+@use '../../themes/bootstrap/overrides' as *;
+
+@use '../../variables/spacing';
+@use '../../variables/type';
+@use '../../placeholders/text';
+
+@mixin styles {
+  h1,
+  .h1,
+  h2,
+  .h2 {
+    // H1 and H2 have hardcoded margins instead of textsize base margins
+    margin-bottom: map.get(spacing.$post-sizes, 'small-large');
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: map.get(spacing.$post-sizes, 'large');
+    }
+  }
+
+  h1,
+  .h1 {
+    @extend %font-curve-big;
+  }
+
+  h2,
+  .h2 {
+    @extend %font-curve-large;
+  }
+
+  h3,
+  .h3,
+  h4,
+  .h4 {
+    @extend %font-curve-medium;
+  }
+
+  h3,
+  .h3,
+  h4,
+  .h4,
+  p {
+    @extend %text-bottom-spacer;
+  }
+
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5 {
+    margin-top: map.get(spacing.$post-sizes, 'bigger-big');
+  }
+
+  h5,
+  .h5,
+  p {
+    @extend %font-curve-regular;
+  }
+
+  p {
+    margin-top: 0;
+    font-weight: type.$font-weight-light;
+  }
+
+  h5,
+  .h5 {
+    margin-bottom: 0;
+  }
+
+  h3,
+  .h3,
+  h5,
+  .h5 {
+    font-weight: type.$font-weight-bold;
+  }
+
+  .lead {
+    @extend %font-curve-bigger-regular;
+    @extend %text-bottom-spacer;
+  }
+}

package/layouts/portal/_variables.scss

@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '../../variables/color';
+
+// DO NOT ADD TO THIS FILE! ALL THESE VARIABLES WILL BE REMOVED.
+// This file contains legacy variables that in the near future should no longer
+// be used but are currently necessary
+
+$grid-gutter-width-rg: 16px;

package/layouts/portal/index.scss

@@ -0,0 +1,5 @@
+@use './grid';
+@use './subnavigation';
+@use './type';
+
+@include type.styles;

package/lic/_bootstrap-license.scss

@@ -0,0 +1,29 @@
+/*!
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+
+ * The MIT License (MIT)
+
+ * Copyright (c) 2011-2020 Twitter, Inc.
+ * Copyright (c) 2011-2020 The Bootstrap Authors
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */

package/mixins/_animation.scss

@@ -0,0 +1,48 @@
+@use '../themes/bootstrap/overrides' as *;
+@use '../functions/icons';
+
+@mixin hover-animation(
+  $animation-item-size,
+  $animation-distance,
+  $animation-container-height,
+  $animation-item-offset: 0
+) {
+  &:hover,
+  &:focus {
+    &:not(:disabled):not(.disabled) > span {
+      transform: translate(-$animation-distance);
+
+      &::after {
+        transform: translate($animation-distance);
+      }
+    }
+  }
+
+  > span {
+    padding: 0 $animation-distance;
+    transform: translate(0); // Needed as a fix for Firefox.
+
+    &::after {
+      top: $animation-item-offset;
+      width: $animation-item-size;
+      height: $animation-container-height;
+      transform: translate(0); // Needed as a fix for Firefox.
+    }
+  }
+}
+
+@mixin hover-animation-svg-icon($color, $icon-name, $stroke-width: null) {
+  &:not(:disabled):not(.disabled) > span {
+    &::after {
+      @if ($stroke-width == null) {
+        background-image: url(icons.get-colored-svg-url($icon-name, $color));
+      } @else {
+        background-image: url(icons.add-stroke-color(
+          icons.get-colored-svg-url($icon-name, $color),
+          $color,
+          $stroke-width
+        ));
+      }
+    }
+  }
+}

package/mixins/_badge.scss

@@ -0,0 +1,22 @@
+@use '../variables/components/badge';
+@use '../mixins/utilities';
+
+@mixin badge-hover-state {
+  color: badge.$badge-hover-color;
+  background-color: badge.$badge-hover-bg-color;
+  border-color: transparent;
+
+  @include utilities.high-contrast-mode() {
+    border-color: Highlight;
+  }
+}
+
+@mixin badge-active-state {
+  color: badge.$badge-active-color;
+  background-color: badge.$badge-active-bg-color;
+  border-color: transparent;
+
+  > .badge {
+    background-color: badge.$badge-nested-active-bg-color;
+  }
+}

package/mixins/_button.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+
+@use '../variables/components/button';
+@use '../variables/type';
+@use '../variables/color';
+@use '../placeholders/color' as color-ph;
+@use '../functions/color' as color-fn;
+@use 'utilities';
+
+@mixin reset-button {
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  user-select: none;
+  appearance: button; // for input
+}
+
+@mixin button-size($size: md) {
+  min-height: map.get(button.$btn-height-map, $size);
+  padding: 0 map.get(button.$btn-padding-x-map, $size);
+  font-size: map.get(button.$btn-font-size-map, $size);
+  gap: map.get(button.$btn-padding-x-map, $size) * 0.5;
+
+  > .pi {
+    width: map.get(button.$btn-icon-size-map, $size);
+    height: map.get(button.$btn-icon-size-map, $size);
+  }
+}
+
+@mixin icon-button($size: md) {
+  // Padding for icon buttons is (button-height - font-size) / 2
+  $icon-size: map.get(button.$btn-icon-size-map, $size);
+  $button-height: map.get(button.$btn-height-map, $size);
+  $padding-y: ($button-height - $icon-size) * 0.5 - button.$input-btn-focus-width;
+  min-width: $button-height;
+  padding-right: $padding-y;
+  padding-left: $padding-y;
+}
+
+@mixin button-color-variant($name, $color) {
+  .btn-#{$name} {
+    border-color: transparent;
+    background-color: $color;
+
+    @if (color-fn.get-contrast-color($color) == #fff) {
+      color: color.$white;
+    }
+
+    @include utilities.not-disabled-focus-hover() {
+      background-color: darken($color, 10%);
+    }
+  }
+}

package/mixins/_color.scss

@@ -0,0 +1,15 @@
+@use '../variables/color';
+
+// Selector for styles to be applied on dark backgrounds
+@mixin on-dark-background($contains: false) {
+  @if $contains == true {
+    &:is(#{color.$dark-backgrounds}),
+    :is(#{color.$dark-backgrounds}) & {
+      @content;
+    }
+  } @else {
+    :is(#{color.$dark-backgrounds}) & {
+      @content;
+    }
+  }
+}

package/mixins/_form-checks.scss

@@ -0,0 +1,80 @@
+@use '../functions/icons';
+@use '../variables/color';
+@use '../variables/components/form-check';
+
+@mixin form-check-variant($color, $color-hover, $color-label-hover: $color-hover) {
+  .form-check-input {
+    border-color: $color;
+  }
+
+  .form-check-input[type='radio']:checked,
+  .form-check-input[type='checkbox']:checked,
+  .form-check-input[type='checkbox']:indeterminate {
+    @include form-check-color($color);
+  }
+
+  .form-check-input:not(:hover),
+  .form-check-input:disabled {
+    @include form-check-icons($color);
+  }
+
+  .form-check-input[type='radio']:hover:not(:disabled),
+  .form-check-input[type='checkbox']:hover:not(:disabled) {
+    @include form-check-color($color-hover, $color-label-hover);
+    @include form-check-icons($color-hover);
+  }
+
+  .form-check-input[type='radio']:focus,
+  .form-check-input[type='checkbox']:focus {
+    border-color: $color;
+    box-shadow: 0 0 0 form-check.$form-check-input-focus-width rgba($color, 0.25);
+  }
+
+  .was-validated .form-check-input:valid ~ .form-check-label,
+  .form-check-input.is-valid ~ .form-check-label,
+  .was-validated .form-check-input:invalid ~ .form-check-label,
+  .form-check-input.is-invalid ~ .form-check-label {
+    color: $color;
+  }
+
+  .was-validated .form-check-input:invalid,
+  .form-check-input.is-invalid,
+  .was-validated .form-check-input:invalid:hover,
+  .form-check-input.is-invalid:hover {
+    &:not(:checked) {
+      border-color: color.$error;
+      background-color: color.$white;
+    }
+  }
+}
+
+@mixin form-check-color($color, $color-label: $color) {
+  border-color: $color;
+
+  ~ .form-check-label {
+    color: var(--post-contrast-color);
+  }
+}
+
+@mixin form-check-icons($color) {
+  &[type='radio']:checked {
+    background-image: url(icons.add-fill-color(
+      form-check.$form-check-radio-checked-bg-icon,
+      $color
+    ));
+  }
+
+  &[type='checkbox']:checked {
+    background-image: url(icons.get-colored-svg-url(
+      form-check.$form-check-input-checked-bg-icon,
+      $color
+    ));
+  }
+
+  &[type='checkbox']:indeterminate {
+    background-image: url(icons.get-colored-svg-url(
+      form-check.$form-check-input-indeterminate-bg-icon,
+      $color
+    ));
+  }
+}

package/mixins/_forms.scss

@@ -0,0 +1,110 @@
+@use '../variables/color';
+@use '../variables/type';
+@use '../variables/components/form-feedback';
+@use '../variables/components/forms';
+@use '../variables/components/tooltips';
+@use '../mixins/utilities';
+
+// Placeholder in input fields
+
+@mixin placeholder() {
+  &::placeholder {
+    @content;
+  }
+
+  // For very old Edge
+  /* stylelint-disable */
+  &::input-placeholder {
+    @content;
+  }
+  /* stylelint-enable */
+}
+
+// override
+/// The entire mixin had to be overriden to adjust the feedback on custom controls.
+/// For the most part, it is exactly like the mixin.
+@mixin form-validation-state($state, $color, $icon) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: form-feedback.$form-feedback-margin-top;
+    color: $color;
+    font-size: form-feedback.$form-feedback-font-size;
+  }
+
+  .#{$state}-tooltip {
+    display: none;
+    position: absolute;
+    z-index: 5;
+    top: 100%;
+    max-width: 100%; // Contain to parent when possible
+    margin-top: 0.1rem;
+    padding: tooltips.$tooltip-padding-y tooltips.$tooltip-padding-x;
+    border-radius: tooltips.$tooltip-border-radius;
+    color: color-contrast($color);
+    font-size: tooltips.$tooltip-font-size;
+    line-height: type.$line-height-base;
+
+    /* Keeping borders gray while maintaining a green background on tooltips */
+    @if ($state == 'valid') {
+      background-color: rgba(form-feedback.$form-feedback-valid-bg, tooltips.$tooltip-opacity);
+    } @else {
+      background-color: rgba($color, tooltips.$tooltip-opacity);
+    }
+  }
+
+  .form-control,
+  .form-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 forms.$input-focus-width rgba($color, 0.25);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+}
+
+@mixin icon-placement {
+  padding-right: form-feedback.$form-feedback-icon-offset + form-feedback.$form-feedback-icon-size;
+  background-repeat: no-repeat;
+  background-position: calc(100% - #{form-feedback.$form-feedback-icon-offset}) center;
+}
+
+@mixin form-control-rg {
+  height: forms.$input-height-rg;
+  padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
+  font-size: type.$font-size-regular;
+  line-height: forms.$input-line-height-rg;
+}
+
+@mixin focus-outline {
+  outline: none;
+  outline-offset: forms.$input-focus-outline-thickness;
+
+  /* Compatibility with button-group */
+  &:is(:focus-visible, :focus-within) {
+    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+  }
+}

package/mixins/_icons.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use '../variables/type';
+@use '../variables/color';
+@use '../variables/components/button';
+@use '../functions/icons' as icon-fn;
+@use '../mixins/utilities';
+
+@mixin pi($name, $color: color.$black) {
+  $type: meta.type-of($color);
+  $final-color: $color;
+
+  @if ($type != color) {
+    $final-color: map.get(color.$background-colors, $color);
+
+    @if (not $final-color) {
+      $valid-colors: map.keys(color.$background-colors);
+
+      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{$valid-colors}.";
+    }
+  }
+  border-color: $final-color;
+  background-image: url(icon-fn.get-colored-svg-url($name, $final-color));
+
+  // set icon to white on hcm
+  @include utilities.high-contrast-mode() {
+    @if ($final-color == color.$black) {
+      filter: invert(100%);
+    } @else {
+      background-image: url(icon-fn.get-colored-svg-url($name, color.$white));
+    }
+  }
+}
+
+@mixin pi-pre($name) {
+  background-image: url(icon-fn.get-pre-colored-svg-url($name));
+}

package/mixins/_index.scss

@@ -0,0 +1,8 @@
+@forward 'animation';
+@forward 'button';
+@forward 'form-checks';
+@forward 'forms';
+@forward 'icons';
+@forward 'size';
+@forward 'type';
+@forward 'utilities';

package/mixins/_scroll-shadows.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
+@use '../variables/color';
+
+@mixin scroll-shadows-y($background-color: color.$white) {
+  $shadow-top: linear-gradient(rgba(color.$black, 0.2), rgba(color.$black, 0.1) 25%, transparent)
+    center top/100% 4px no-repeat scroll;
+  $shadow-bottom: linear-gradient(transparent, rgba(color.$black, 0.1) 75%, rgba(color.$black, 0.2))
+    center bottom/100% 4px no-repeat scroll;
+  $shadow-cover-top: linear-gradient(#{$background-color}, #{$background-color}) center top/100% 4px
+    no-repeat local;
+  $shadow-cover-bottom: linear-gradient(#{$background-color}, #{$background-color}) center
+    bottom/100% 4px no-repeat local;
+
+  background: $shadow-cover-top, $shadow-top, $shadow-cover-bottom, $shadow-bottom;
+}

package/mixins/_size.scss

@@ -0,0 +1,65 @@
+@use 'sass:map';
+@use 'sass:string';
+
+@use '../themes/bootstrap/overrides' as *;
+
+@use '../variables/spacing';
+@use '../functions/utilities';
+
+@mixin bezel-small() {
+  padding: map.get(spacing.$post-sizes, 'mini') map.get(spacing.$post-sizes, 'regular');
+}
+
+@mixin bezel-small-regular() {
+  padding: map.get(spacing.$post-sizes, 'small-regular') map.get(spacing.$post-sizes, 'regular');
+}
+
+@mixin bezel-regular() {
+  padding: map.get(spacing.$post-sizes, 'regular');
+}
+
+@mixin bezel-bigger-regular() {
+  padding: map.get(spacing.$post-sizes, 'small-large');
+}
+
+@mixin bezel-medium() {
+  padding: map.get(spacing.$post-sizes, 'small-large') map.get(spacing.$post-sizes, 'large');
+}
+
+@mixin bezel-large() {
+  padding: map.get(spacing.$post-sizes, 'big');
+}
+
+@mixin bezel-big() {
+  padding: map.get(spacing.$post-sizes, 'bigger-big');
+}
+
+/**
+ * Generate responsive size properties for things like height, width, margin, padding, etc.
+ * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
+ * @param $property Property key (height, width, padding, margin, top, etc.)
+ * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto)
+ */
+@mixin responsive-size($curve-size: 'regular', $property-key: 'padding', $template: '$value') {
+  $curve: map.get(spacing.$size-curves, $curve-size);
+
+  @if ($curve) {
+    $cache: '';
+
+    @each $key, $value in $curve {
+      @if ($key == 'xs') {
+        #{$property-key}: string.unquote(utilities.replace($template, '$value', $value));
+      } @else {
+        // Don't write unnecessary media queries
+        @if ($cache != $value) {
+          @include media-breakpoint-up($key) {
+            #{$property-key}: string.unquote(utilities.replace($template, '$value', $value));
+          }
+        }
+      }
+      $cache: $value;
+    }
+  } @else {
+    @warn "@mixin responsive-size: Can't find $curve-size: " + $curve-size;
+  }
+}