@ch-post-common/common-web-frontend 0.0.1-security → 1.0.933

package/mixins/_button.scss

@@ -0,0 +1,232 @@
+@use "sass:map";
+@use "../themes/bootstrap/overrides" as bootstrap;
+@use "./animation";
+@use "../functions";
+@use "../variables";
+@use "../variables/components/button";
+@use "../variables/options";
+
+@mixin reset-button {
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  appearance: button; // for input
+  user-select: none;
+}
+
+@mixin _btn($size) {
+  $container-height: functions.calculate-inner-height(
+    map.get(variables.$font-size-map, $size),
+    map.get(button.$btn-line-height-map, $size),
+    map.get(button.$btn-padding-y-map, $size)
+  );
+  $offset: -#{map.get(button.$btn-padding-y-map, $size)};
+
+  &.btn-animated {
+    @include animation.hover-animation(
+      map.get(variables.$font-size-map, $size),
+      map.get(button.$btn-animation-distance-map, $size),
+      $container-height,
+      $offset
+    );
+    @include bootstrap.button-size(
+      map.get(button.$btn-padding-y-map, $size),
+      map.get(button.$btn-padding-animate-x-map, $size),
+      map.get(variables.$font-size-map, $size),
+      map.get(button.$btn-line-height-map, $size),
+      map.get(button.$btn-border-radius-map, $size)
+    );
+  }
+
+  &.btn-icon {
+    $adjusted-padding: (
+      $container-height - map.get(button.$btn-icon-size-map, $size)
+    )/2;
+    padding: $adjusted-padding;
+
+    .pi {
+      width: map.get(button.$btn-icon-size-map, $size);
+      height: map.get(button.$btn-icon-size-map, $size);
+    }
+  }
+}
+
+@mixin btn-sm {
+  @include _btn("sm");
+}
+
+@mixin btn-rg {
+  @include bootstrap.button-size(
+    button.$btn-padding-y-rg,
+    button.$btn-padding-x-rg,
+    variables.$font-size-rg,
+    button.$btn-line-height-rg,
+    button.$btn-border-radius-rg
+  );
+  @include _btn("rg");
+}
+
+@mixin btn {
+  @include _btn("md");
+}
+
+@mixin btn-lg {
+  @include _btn("lg");
+}
+
+// Placeholder selectors are used so the resulting output css is smaller
+%btn-animation-arrow-light {
+  @include animation.hover-animation-svg-icon(
+    variables.$yiq-text-light,
+    "2050",
+    2
+  );
+}
+
+%btn-animation-arrow-dark {
+  @include animation.hover-animation-svg-icon(
+    variables.$yiq-text-dark,
+    "2050",
+    2
+  );
+}
+
+// Button variants
+@mixin button-variant(
+  $background,
+  $border,
+  $hover-background: darken(functions.get-solid-color($background), 10%),
+  $hover-border: $hover-background,
+  $active-background: map.get(variables.$theme-colors, "active"),
+  $active-border: $active-background
+) {
+  @include bootstrap.gradient-bg($background);
+  @include bootstrap.box-shadow(button.$btn-box-shadow);
+
+  color: bootstrap.color-yiq($background);
+  border-color: $border;
+  text-decoration: none;
+
+  @include bootstrap.hover {
+    @include bootstrap.gradient-bg($hover-background);
+
+    color: bootstrap.color-yiq($hover-background);
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if options.$enable-shadows {
+      box-shadow: button.$btn-box-shadow,
+        0 0 0 button.$btn-focus-width rgba($border, .5);
+    } @else if $border != transparent {
+      box-shadow: 0 0 0 button.$btn-focus-width rgba($border, .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: bootstrap.color-yiq($background);
+    background-color: opacify($background, .8);
+    border-color: $border;
+
+    //stylelint-disable-next-line order/order
+    @if ($background == transparent) {
+      background-color: transparent;
+    }
+
+    //stylelint-disable-next-line order/order
+    @if $border != transparent {
+      border-color: opacify($border, .5);
+    }
+  }
+
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    @if options.$enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
+
+    color: bootstrap.color-yiq($active-background);
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if options.$enable-shadows {
+        box-shadow: button.$btn-active-box-shadow,
+          0 0 0 button.$btn-focus-width rgba($border, .5);
+      } @else {
+        box-shadow: 0 0 0 button.$btn-focus-width rgba($border, .5);
+      }
+    }
+  }
+
+  &.btn-animated {
+    @if (bootstrap.color-yiq($hover-background) == variables.$yiq-text-dark) {
+      @extend %btn-animation-arrow-dark;
+    } @else {
+      @extend %btn-animation-arrow-light;
+    }
+  }
+}
+
+@mixin button-outline-variant(
+  $color,
+  $color-hover: variables.$black,
+  $active-background: transparent,
+  $active-border: $color-hover
+) {
+  color: $color;
+  background-color: transparent;
+  background-image: none;
+  border-color: rgba($color, .5);
+  text-decoration: none;
+
+  &:hover,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $color-hover;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 button.$btn-focus-width rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+    border-color: rgba($color, .5);
+  }
+
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if options.$enable-shadows and button.$btn-active-box-shadow != none {
+        box-shadow: button.$btn-active-box-shadow,
+          0 0 0 button.$btn-focus-width rgba($color, .5);
+      } @else {
+        box-shadow: 0 0 0 button.$btn-focus-width rgba($color, .5);
+      }
+    }
+  }
+
+  &.btn-animated {
+    @if (bootstrap.color-yiq($color-hover) == variables.$yiq-text-dark) {
+      @extend %btn-animation-arrow-light;
+    } @else {
+      @extend %btn-animation-arrow-dark;
+    }
+  }
+}

package/mixins/_forms.scss

@@ -0,0 +1,188 @@
+@use "../themes/bootstrap/overrides" as bootstrap;
+
+@use "../variables";
+@use "../variables/components/forms";
+@use "../variables/components/tooltips";
+@use "../mixins/utilities";
+
+// Placeholder in input fields
+
+@mixin placeholder() {
+  &::placeholder {
+    @content;
+  }
+
+  // For very old Edge
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+// Bootstrap override
+/// The entire mixin had to be overriden to adjust the feedback on custom controls.
+/// For the most part, it is exactly like the bootstrap mixin.
+@mixin form-validation-state($state, $color, $icon) {
+
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: forms.$form-feedback-margin-top;
+    font-size: forms.$form-feedback-font-size;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    @include bootstrap.border-radius(tooltips.$tooltip-border-radius);
+
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: tooltips.$tooltip-padding-y tooltips.$tooltip-padding-x;
+    margin-top: .1rem;
+    font-size: tooltips.$tooltip-font-size;
+    line-height: variables.$line-height-base;
+    color: bootstrap.color-yiq($color);
+
+    /* Keeping borders gray while maintaining a green background on tooltips */
+    //stylelint-disable-next-line order/order
+    @if ($state == "valid") {
+      background-color: rgba(forms.$form-feedback-valid-bg, tooltips.$tooltip-opacity);
+    } @else {
+      background-color: rgba($color, tooltips.$tooltip-opacity);
+    }
+  }
+
+  .form-control,
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 forms.$input-focus-width rgba($color, .25);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .form-control-file {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .#{$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;
+      }
+    }
+  }
+
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          border-color: $color;
+          background: variables.$white;
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 1px variables.$body-bg,
+            0 0 0 forms.$input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-file-label {
+        border-color: $color;
+
+        &::after {
+          border-color: inherit;
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          box-shadow: 0 0 0 forms.$input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+}
+
+@mixin label-floated-style {
+  font-size: forms.$floating-label-font-size-small;
+  top: forms.$floating-label-transition-distance * -1;
+}
+
+@mixin icon-placement {
+  background-repeat: no-repeat;
+  background-position: calc(100% - #{forms.$form-feedback-icon-offset}) center;
+  padding-right: forms.$form-feedback-icon-offset + forms.$form-feedback-icon-size;
+}
+
+@mixin floating-label-style {
+  @include utilities.truncate;
+
+  display: block;
+  color: forms.$floating-label-color;
+  font-size: forms.$floating-label-font-size;
+  width: calc(100% - 2 * #{variables.$spacer} - #{forms.$input-border-width} - #{forms.$floating-label-spacing-x});
+
+  position: absolute;
+  top: forms.$input-border-width;
+  margin-left: forms.$input-border-width;
+
+  padding: forms.$floating-label-padding;
+  transition: variables.$transition-base;
+
+  font-weight: normal;
+  pointer-events: none;
+}
+
+@mixin form-control-rg {
+  @include bootstrap.border-radius(forms.$input-border-radius-rg);
+
+  height: forms.$input-height-rg;
+  padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
+  font-size: variables.$font-size-rg;
+  line-height: forms.$input-line-height-rg;
+}

package/mixins/_icons.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:color";
+
+@use "../variables/color" as color-var;
+@use "../functions/icons" as icon-fn;
+
+@mixin pi($name, $color: color-var.$body-color) {
+  $type: meta.type-of($color);
+  $final-color: $color;
+
+  @if ($type != color) {
+    $final-color: map.get(color-var.$icon-colors, $color);
+
+    @if (not $final-color) {
+      $valid-colors: map.keys(color-var.$icon-colors);
+
+      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{$valid-colors}.";
+    }
+  }
+  background-image: url(icon-fn.get-colored-svg-url($name, $final-color));
+  border-color: $final-color;
+} 
+
+@mixin pi-pre($name) {
+  background-image: url(icon-fn.get-pre-colored-svg-url($name));
+}

package/mixins/_scroll-shadows.scss

@@ -0,0 +1,13 @@
+/*!
+ * 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, .2), rgba(color.$black, .1) 25%, transparent) center top/100% 4px no-repeat scroll;
+  $shadow-bottom: linear-gradient(transparent, rgba(color.$black, .1) 75%, rgba(color.$black, .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,69 @@
+@use "sass:map";
+@use "sass:string";
+
+@use "../themes/bootstrap/overrides" as bootstrap;
+
+@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 bootstrap.media-breakpoint-up($key) {
+            #{$property-key}: string.unquote(utilities.replace($template, "$value", $value));
+          }
+        }
+      }
+      //stylelint-disable-next-line order/order
+      $cache: $value;
+    }
+  } @else {
+    @warn "@mixin responsive-size: Can't find $curve-size: " + $curve-size;
+  }
+}

package/mixins/_type.scss

@@ -0,0 +1,187 @@
+@use "../variables/breakpoints";
+@use "../functions/sizing";
+@use "../functions/utilities";
+@use "../themes/bootstrap/overrides" as bootstrap;
+
+// TODO: rewrite this as docblockr comment
+// Sets font-size and calculate line-height depending on the font-size
+// $argList: ($minValueS, $maxValueS, $minValueM, $maxValueM, $minValueL, $maxValueL);
+@mixin fontSizeAndLineHeight($argList...) {
+  @include fontSizeCalc($argList...);
+  @include fontLineHeight($argList...);
+}
+
+@mixin font-curve($minFontSize, $maxFontSize, $minScreenSize, $maxScreenSize) {
+  @media screen and (min-width: #{$minScreenSize}) {
+    @if (sizing.strip-unit($minFontSize) == sizing.strip-unit($maxFontSize)) {
+      font-size: $minFontSize;
+    } @else {
+      // prettier-ignore
+      font-size: calc(
+        #{$minFontSize}
+        + #{sizing.strip-unit($maxFontSize)
+        - sizing.strip-unit($minFontSize)}
+        * (
+          (100vw - #{sizing.px-to-rem($minScreenSize)})
+          / #{sizing.strip-unit(sizing.px-to-rem($maxScreenSize))
+          - sizing.strip-unit(sizing.px-to-rem($minScreenSize))}
+        )
+      );
+    }
+  }
+}
+
+@mixin fontSizeCalc($argList...) {
+  // Smallest size with no scaling
+  font-size: nth($argList, 1);
+
+  // stylelint-disable-next-line order/order
+  @include font-curve(
+    nth($argList, 1),
+    nth($argList, 2),
+    320px,
+    map-get(breakpoints.$grid-breakpoints, sm)
+  );
+
+  @if (length($argList) > 2) {
+    @include font-curve(
+      nth($argList, 2),
+      nth($argList, 3),
+      map-get(breakpoints.$grid-breakpoints, sm),
+      map-get(breakpoints.$grid-breakpoints, rg)
+    );
+  }
+
+  @if (length($argList) > 3) {
+    @include font-curve(
+      nth($argList, 3),
+      nth($argList, 4),
+      map-get(breakpoints.$grid-breakpoints, rg),
+      map-get(breakpoints.$grid-breakpoints, md)
+    );
+  }
+
+  @if (length($argList) > 4) {
+    @include font-curve(
+      nth($argList, 4),
+      nth($argList, 5),
+      map-get(breakpoints.$grid-breakpoints, md),
+      map-get(breakpoints.$grid-breakpoints, lg)
+    );
+  }
+
+  @if (length($argList) > 5) {
+    @include font-curve(
+      nth($argList, 5),
+      nth($argList, 6),
+      map-get(breakpoints.$grid-breakpoints, lg),
+      map-get(breakpoints.$grid-breakpoints, xl)
+    );
+
+    // Largest size with no scaling
+    @include bootstrap.media-breakpoint-up(xl) {
+      font-size: nth($argList, 6);
+    }
+  }
+}
+
+@mixin fontLineHeight($argList...) {
+  $min: (nth($argList, 1) / 1rem);
+  $max: (nth($argList, 2) / 1rem);
+  $line-height: sizing.line-height-calc(utilities.average($min, $max));
+
+  // stylelint-disable order/order
+  line-height: $line-height;
+
+  @if (length($argList) > 2) {
+    $min: (nth($argList, 2) / 1rem);
+    $max: (nth($argList, 3) / 1rem);
+    $line-height-old: $line-height;
+    $line-height: sizing.line-height-calc(utilities.average($min, $max));
+
+    // Only render new line-height, if not the same as on last breakpoint
+    @if $line-height != $line-height-old {
+      @include bootstrap.media-breakpoint-up(sm) {
+        line-height: $line-height;
+      }
+    }
+  }
+
+  @if (length($argList) > 3) {
+    $min: (nth($argList, 3) / 1rem);
+    $max: (nth($argList, 4) / 1rem);
+    $line-height-old: $line-height;
+    $line-height: sizing.line-height-calc(utilities.average($min, $max));
+
+    // Only render new line-height, if not the same as on last breakpoint
+    @if $line-height != $line-height-old {
+      @include bootstrap.media-breakpoint-up(rg) {
+        line-height: $line-height;
+      }
+    }
+  }
+
+  @if (length($argList) > 4) {
+    $min: (nth($argList, 4) / 1rem);
+    $max: (nth($argList, 5) / 1rem);
+    $line-height-old: $line-height;
+    $line-height: sizing.line-height-calc(utilities.average($min, $max));
+
+    // Only render new line-height, if not the same as on last breakpoint
+    @if $line-height != $line-height-old {
+      @include bootstrap.media-breakpoint-up(md) {
+        line-height: $line-height;
+      }
+    }
+  }
+
+  @if (length($argList) > 5) {
+    $min: (nth($argList, 5) / 1rem);
+    $max: (nth($argList, 6) / 1rem);
+    $line-height-old: $line-height;
+    $line-height: sizing.line-height-calc(utilities.average($min, $max));
+
+    // Only render new line-height, if not the same as on last breakpoint
+    @if $line-height != $line-height-old {
+      @include bootstrap.media-breakpoint-up(lg) {
+        line-height: $line-height;
+      }
+    }
+  }
+
+  @if (length($argList) > 5) {
+    $line-height-old: $line-height;
+    $line-height: sizing.line-height-calc(nth($argList, 6) / 1rem);
+
+    // Only render new line-height, if not the same as on last breakpoint
+    @if $line-height != $line-height-old {
+      @include bootstrap.media-breakpoint-up(xl) {
+        line-height: $line-height;
+      }
+    }
+  }
+
+  // stylelint-enable order/order
+}
+
+// Better font rendering (on OS X)
+// http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+//
+// Usage:
+//
+// .xy--dark-on-light {
+// 	@include fontSmoothing;
+// }
+// .xy--light-on-dark {
+// 	@include fontSmoothingReset;
+// }
+
+@mixin font-smoothing() {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin font-smoothing-reset() {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+}