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

package/components/form-range.scss

@@ -0,0 +1,111 @@
+@forward '../variables/options';
+
+@use '../lic/bootstrap-license';
+@use '../themes/bootstrap/overrides' as *;
+@use '../themes/bootstrap/forms' as bf;
+
+@use '../variables/commons';
+@use '../variables/color';
+@use '../variables/spacing';
+@use '../variables/components/forms';
+@use '../mixins/utilities';
+
+.form-range {
+  // https://codepen.io/thebabydino/pen/goYYrN
+  --post-range: calc(var(--post-max) - var(--post-min));
+  --post-ratio: calc((var(--post-val) - var(--post-min)) / var(--post-range));
+  --post-sx: calc(0.5 * 1.5em + var(--post-ratio) * (100% - 1.5em));
+
+  &::-moz-range-thumb {
+    border-radius: 50%;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  &:not(:disabled, .disabled) {
+    &::-webkit-slider-runnable-track {
+      background: linear-gradient(color.$black, color.$black) 0 / var(--post-sx) 100%;
+      background-repeat: no-repeat;
+      background-color: color.$gray-20;
+    }
+
+    &::-moz-range-progress {
+      background-color: color.$black;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    &::-webkit-slider-thumb {
+      border-color: forms.$form-range-thumb-disabled-border-color;
+    }
+
+    &::-moz-range-thumb {
+      border-color: forms.$form-range-thumb-disabled-border-color;
+    }
+  }
+
+  + .form-text {
+    margin-top: spacing.$size-regular;
+    transform: translateY(#{-0.5 * forms.$form-range-height});
+  }
+}
+
+@include utilities.high-contrast-mode() {
+  .form-range {
+    // linear-gradient is forced to the value of "none" in forced-color mode
+    // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work
+    forced-color-adjust: none;
+
+    &:not(:disabled, .disabled) {
+      &::-webkit-slider-runnable-track {
+        background: linear-gradient(Highlight, Highlight) 0 / var(--post-sx) 100%;
+        background-repeat: no-repeat;
+        background-color: ButtonBorder;
+      }
+
+      &::-webkit-slider-thumb {
+        background-color: ButtonFace;
+        border-color: ButtonBorder;
+      }
+
+      &::-moz-range-track {
+        background-color: ButtonText;
+      }
+
+      &::-moz-range-progress {
+        background-color: Highlight;
+      }
+
+      &::-moz-range-thumb {
+        background-color: ButtonFace;
+        border-color: ButtonText;
+      }
+
+      &:focus-visible {
+        &::-webkit-slider-thumb {
+          outline-offset: commons.$border-thick;
+          outline: commons.$border-thick solid Highlight;
+        }
+
+        &::-moz-range-thumb {
+          outline-offset: commons.$border-thick;
+          outline: commons.$border-thick solid Highlight;
+        }
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      &::-webkit-slider-thumb {
+        background-color: ButtonFace;
+        border-color: ButtonBorder;
+      }
+
+      &::-moz-range-thumb {
+        background-color: ButtonFace;
+        border-color: ButtonBorder;
+      }
+    }
+  }
+}

package/components/form-select.scss

@@ -0,0 +1,31 @@
+@forward '../variables/options';
+
+@use '../lic/bootstrap-license';
+@use '../themes/bootstrap/overrides' as *;
+@use '../themes/bootstrap/forms' as bf;
+@use '../mixins/forms' as forms-mixins;
+@use '../mixins/utilities';
+
+@use '../variables/components/forms';
+
+.form-select-rg {
+  @include forms-mixins.form-control-rg;
+}
+
+.form-select {
+  @include utilities.high-contrast-mode() {
+    background-image: escape-svg($form-select-indicator-hcm);
+    background-color: Field;
+    border-color: FieldText;
+    color: FieldText;
+
+    &:focus-visible {
+      color: FieldText;
+    }
+
+    &:focus,
+    &:hover:not(:disabled) {
+      border-color: Highlight;
+    }
+  }
+}

package/components/forms.scss

@@ -0,0 +1,54 @@
+@forward '../variables/options';
+
+@use '../lic/bootstrap-license';
+
+@use '../variables/components/forms';
+
+@use '../mixins/utilities';
+@use '../mixins/forms' as form-mixins;
+
+@use '../themes/bootstrap/forms' as bf;
+@use '../themes/bootstrap/forms/input-group';
+
+.form-control-rg {
+  @include form-mixins.form-control-rg;
+}
+
+select.form-control-rg:not([size]):not([multiple]) {
+  height: forms.$input-height-rg;
+}
+
+.form-control {
+  position: relative;
+
+  &:disabled {
+    color: forms.$input-disabled-color;
+  }
+
+  &[readonly]:not(:disabled) {
+    border-color: forms.$input-border-color;
+    background-color: forms.$input-bg;
+  }
+
+  &::file-selector-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin-inline-start: forms.$input-padding-x;
+    margin-inline-end: 0;
+    border-inline-end-width: 0;
+    border-inline-start-width: forms.$input-border-width;
+  }
+
+  @include utilities.high-contrast-mode() {
+    &:hover,
+    &:focus {
+      border-color: Highlight;
+
+      &::file-selector-button {
+        border-color: Highlight;
+      }
+    }
+  }
+}

package/components/grid.scss

@@ -0,0 +1,100 @@
+@forward '../variables/options';
+
+@use 'sass:map';
+
+@use '../lic/bootstrap-license';
+@use '../themes/bootstrap/overrides' as *;
+@use '../themes/bootstrap/grid' as bg;
+@use '../themes/bootstrap/containers' as bc;
+
+@use '../variables/commons';
+@use '../variables/spacing';
+@use '../variables/grid';
+
+.vertical-gutters {
+  margin-bottom: grid.$grid-gutter-width * -1;
+
+  > .col,
+  > [class*='col-'] {
+    padding-bottom: grid.$grid-gutter-width;
+  }
+}
+
+// border-gutters class is used to manipulate border collapse
+.row.border-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;
+  }
+}
+
+$container-cache: 0;
+
+@each $breakpoint in grid.$grid-breakpoints-list {
+  $container-padding: map.get(grid.$grid-container-padding, $breakpoint);
+
+  // 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);
+        margin-left: -($container-padding);
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          margin-right: -($container-padding);
+          margin-left: -($container-padding);
+        }
+      }
+    }
+
+    .container-reset-left {
+      @if $breakpoint== 'xs' {
+        margin-left: -($container-padding);
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          margin-left: -($container-padding);
+        }
+      }
+    }
+
+    .container-reset-right {
+      @if $breakpoint== 'xs' {
+        margin-right: -($container-padding);
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          margin-right: -($container-padding);
+        }
+      }
+    }
+  }
+
+  // Container fluid responsive needs to be written every time
+  .container-fluid-#{$breakpoint} {
+    @include media-breakpoint-only($breakpoint) {
+      padding-right: spacing.$spacer;
+      padding-left: spacing.$spacer;
+    }
+  }
+
+  $container-cache: $container-padding;
+}

package/components/icons.scss

@@ -0,0 +1,60 @@
+@forward '../variables/options';
+
+@use '../variables/icons' as vars;
+@use '../variables/color';
+
+@use '../mixins/icons' as icon-mixin;
+@use '../mixins/utilities';
+
+.pi,
+%pi {
+  display: inline-block;
+  width: vars.$icon-size-default;
+  height: vars.$icon-size-default;
+  border: 0;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  vertical-align: middle;
+
+  // Invert icons when HCM is active
+  @include utilities.high-contrast-mode() {
+    // Override inversion and don't change colors of pre-colored icons, they are like images
+    @each $name, $path in vars.$svg-pre-colored-icon-map {
+      &.pi-#{$name} {
+        filter: none;
+        forced-color-adjust: none;
+      }
+    }
+  }
+}
+
+.pi-border {
+  border: vars.$icon-border-width solid transparent;
+  background-size: 90%;
+}
+
+@each $size, $value in vars.$icon-sizes {
+  .pi-#{$size} {
+    width: $value;
+    height: $value;
+  }
+}
+
+@each $name, $path in vars.$svg-icon-map {
+  .pi-#{$name} {
+    @include icon-mixin.pi($name);
+  }
+}
+
+@each $name, $path in vars.$svg-pre-colored-icon-map {
+  .pi-#{$name} {
+    @include icon-mixin.pi-pre($name);
+  }
+}
+
+// -- Special Icons --
+
+.pi-favourite {
+  @include icon-mixin.pi('2062-f', color.$yellow);
+}

package/components/intranet-header/_icon.scss

@@ -0,0 +1,6 @@
+@use '../../mixins/icons' as icon-mixin;
+
+.navbar-toggler .pi-menu,
+#sidebar .pi-menu {
+  @include icon-mixin.pi(2070);
+}

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

@@ -0,0 +1,40 @@
+@use '../../variables/color';
+@use '../../variables/spacing';
+@use '../../variables/commons';
+
+@use '../../mixins/icons' as icon-mixin;
+
+#languageParent {
+  min-width: 18rem;
+  padding: 0;
+  overflow-y: visible;
+
+  .dropdown-item {
+    padding: spacing.$size-small-regular spacing.$size-large;
+  }
+
+  .language-menu {
+    display: flex;
+
+    .dropdown-item {
+      flex: auto 1 1;
+      border: commons.$border-width solid color.$gray-20;
+      border-top: 0;
+      border-left: 0;
+      border-radius: 0;
+      text-align: center;
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      &:focus {
+        z-index: commons.$zindex-dropdown;
+      }
+    }
+  }
+
+  .other-items {
+    overflow-y: auto;
+  }
+}

package/components/intranet-header/_logo.scss

@@ -0,0 +1,54 @@
+@use '../../variables/color';
+@use '../../variables/components/intranet-header';
+
+@use '../../themes/bootstrap/overrides' as *;
+
+%header-logo {
+  display: block;
+  height: 100%;
+
+  border: 0;
+  outline: none;
+  // If the active color changes, the logo's background color shouldn't change.
+  // That is why this color is hard coded.
+  background-color: #fc0;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 90%;
+}
+
+// logo-de 47px x 151px
+.header-logo-de {
+  @extend %header-logo;
+  background-image: url(data:image/png;base64,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);
+}
+
+// logo-en 47px x 160px
+.header-logo-en {
+  @extend %header-logo;
+  background-image: url(data:image/png;base64,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);
+}
+
+// logo-fr 47px x 132px
+.header-logo-fr {
+  @extend %header-logo;
+  background-image: url(data:image/png;base64,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);
+}
+
+// logo-it 47px x 133px
+.header-logo-it {
+  @extend %header-logo;
+  background-image: url(data:image/png;base64,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);
+}
+
+.bg-logo {
+  display: block !important;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 10rem;
+  height: intranet-header.$header-content-size;
+  // If the f-active color changes, the logo's background color shouldn't change.
+  // That is why this color is hard coded.
+  background-color: color.$yellow;
+}

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

@@ -0,0 +1,56 @@
+@use '../../variables/color';
+@use '../../variables/commons';
+@use '../../functions/icons';
+
+@use '../../themes/bootstrap/overrides' as *;
+@use '../../placeholders/dropdown';
+
+.top-navigation {
+  .nav-item#more {
+    @include media-breakpoint-down(rg) {
+      > span {
+        display: none !important;
+      }
+    }
+
+    > .nav-link::after {
+      @extend %toggler-icon;
+      background-image: url(icons.get-colored-svg-url('2051', color.$gray-80));
+    }
+
+    &.hidden {
+      > .nav-link::after {
+        background-image: url(icons.get-colored-svg-url('2052', color.$gray-80)); // Angle downwards
+      }
+    }
+  }
+
+  .nav-overflow {
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      z-index: 0;
+      top: 100%;
+      right: 0;
+      margin-top: commons.$border-width;
+      padding-bottom: commons.$border-width;
+      border-left: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
+      background-color: color.$white;
+
+      &.dropup.show,
+      &.dropdown.show {
+        z-index: 1;
+      }
+
+      &.last-nav-overflow {
+        padding-bottom: 0;
+        border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
+      }
+    }
+
+    @include media-breakpoint-down(rg) {
+      display: list-item !important;
+      width: auto !important;
+      transform: none !important;
+    }
+  }
+}

package/components/intranet-header/_scaffolding.scss

@@ -0,0 +1,96 @@
+@use '../../variables/color';
+@use '../../variables/spacing';
+@use '../../variables/commons';
+@use '../../variables/components/intranet-header';
+
+@use '../../themes/bootstrap/overrides' as *;
+
+// based from http://getbootstrap.com/docs/4.1/examples/dashboard/
+.navbar-brand {
+  margin: 0;
+  padding-top: spacing.$spacer * 0.75;
+  padding-bottom: spacing.$spacer * 0.75;
+  font-size: spacing.$spacer;
+}
+
+.navbar {
+  position: fixed;
+  z-index: commons.$zindex-fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
+  background-color: color.$white;
+
+  .nav-down {
+    width: 100%;
+  }
+}
+
+.navbar {
+  .container,
+  .container-fluid,
+  .container-xs {
+    .row {
+      width: 100%;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-expand-md .navbar-nav {
+    flex-wrap: wrap;
+  }
+}
+
+.intranet-header .title {
+  overflow: hidden;
+
+  h2 {
+    overflow: hidden;
+    font-size: 1.6rem; // Same as PostWeb
+    line-height: 1.2;
+    text-overflow: ellipsis;
+  }
+}
+
+.layout-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0 !important;
+
+  > div.site-content {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+}
+
+.layout-container {
+  @include media-breakpoint-down(rg) {
+    &.header-big {
+      .header-margin {
+        margin-top: intranet-header.$header-size;
+      }
+    }
+
+    &.header-big.with-searchbar {
+      .header-margin {
+        margin-top: intranet-header.$header-size-big;
+      }
+    }
+  }
+
+  &.header-big {
+    .header-margin {
+      margin-top: intranet-header.$header-size-big;
+    }
+  }
+
+  &.header-small {
+    .header-margin {
+      margin-top: intranet-header.$header-size;
+    }
+  }
+}

package/components/intranet-header/_searchbox.scss

@@ -0,0 +1,32 @@
+@use '../../variables/color';
+@use '../../variables/spacing';
+@use '../../variables/type';
+@use '../../variables/commons';
+@use '../../variables/components/intranet-header';
+
+@use '../../themes/bootstrap/overrides' as *;
+
+header.navbar {
+  .search-textbox {
+    @include media-breakpoint-down(rg) {
+      border-top: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
+    }
+    @include media-breakpoint-up(md) {
+      border-left: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
+    }
+
+    input {
+      height: intranet-header.$header-content-size;
+      border: 0;
+      background-color: rgba(var(--post-contrast-color-rgb), 0.1);
+      font-size: 1.2em;
+      font-weight: type.$font-weight-light;
+    }
+
+    .btn {
+      height: 100%;
+      padding: 0 1.25rem;
+      border-radius: 0;
+    }
+  }
+}