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

package/components/card.scss

@@ -0,0 +1,227 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as bootstrap;
+@use "../themes/bootstrap/card" as bootstrap-card;
+@use "../variables/color";
+@use "../variables/spacing";
+@use "../variables/commons";
+@use "../variables/components/card";
+@use "../functions/sizing";
+@use "../mixins/icons" as icons-mixins;
+@use "../variables/icons";
+@use "../variables/animation";
+
+.card-group {
+  margin-top: commons.$border-width;
+  margin-left: commons.$border-width;
+}
+
+.card {
+  border: none;
+  border-radius: 0;
+  box-shadow: commons.$box-shadow-lg;
+  // Outline with card-group margin trick prevents double/jumping (on hover) borders
+  outline: 1px solid card.$card-border-color;
+  transition: box-shadow .25s;
+  z-index: 0;
+
+
+  &.product-card,
+  &.card-button {
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      box-shadow: commons.$box-shadow-lg;
+      z-index: 1;
+    }
+  }
+
+  .card-columns & {
+    // make sure box-shadow is on the same column as the card
+    margin-top: sizing.calculate-single-box-shadow-size(commons.$box-shadow-lg);
+    margin-bottom: sizing.calculate-single-box-shadow-size(commons.$box-shadow-lg);
+  }
+
+  .card-group > & {
+    margin-right: commons.$border-width;
+    margin-bottom: commons.$border-width;
+  }
+
+  .list-group-item {
+    padding: 1.25rem 1rem;
+    border-color: card.$card-border-color;
+  }
+
+  .link-icon {
+    text-decoration: none;
+  }
+
+  .link-icon .pi {
+    margin-right: .5rem;
+  }
+
+  & > .list-group + .card-footer,
+  & .card-body ~ .card-body {
+    border-top: 1px solid color.$gray-200;
+  }
+}
+
+// Card elements have paddings, prevent double spacing by removing
+// elements margins
+.card-header,
+.card-body,
+.card-footer,
+.list-group-item {
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-header,
+.card-footer,
+.card-body {
+  padding: 1.25rem 1rem;
+
+  .product-card &,
+  .card-button & {
+    @include bootstrap.media-breakpoint-down(sm) {
+      padding: spacing.$size-regular;
+    }
+
+    @include bootstrap.media-breakpoint-between(sm, md) {
+      padding: spacing.$size-large;
+    }
+
+    @include bootstrap.media-breakpoint-between(md, xxl) {
+      padding: spacing.$size-big;
+    }
+
+    @include bootstrap.media-breakpoint-up(xxl) {
+      padding: spacing.$size-bigger-big;
+    }
+  }
+
+  .card-white & {
+    background: color.$white;
+  }
+}
+
+.card-header {
+  align-items: center;
+
+  & > *:not(:last-child) {
+    margin-right: 1rem;
+  }
+}
+
+.product-card {
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .link-icon {
+    display: flex;
+    align-items: center;
+    opacity: .75;
+    transition: opacity 250ms;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+}
+
+// TODO: make this flexible with classes or something
+.card-columns {
+  column-count: 2;
+  @include bootstrap.media-breakpoint-down(md) {
+    column-count: 1;
+  }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .card {
+    img {
+      height: 100%;
+    }
+  }
+
+  .card-deck .card,
+  .card-group .card {
+    img {
+      height: auto;
+      max-height: 50%;
+    }
+
+    & > .card-header,
+    & > .card-footer {
+      flex: 0 0 auto;
+    }
+  }
+}
+
+.card-links {
+  display: flex;
+  justify-content: space-between;
+  padding-right: .5rem;
+  padding-left: .5rem;
+  flex-wrap: wrap;
+
+  a {
+    color: color.$gray-600;
+    text-decoration: none;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -ms-flex-align: center;
+    align-items: center;
+    padding-left: .5rem;
+    padding-right: .5rem;
+
+    &::before {
+      @include icons-mixins.pi(3020, color.$gray-800);
+      content: "";
+      position: relative;
+      opacity: .8;
+      margin-right: spacing.$spacer/2;
+
+      vertical-align: middle;
+      display: inline-block;
+      width: icons.$icon-size-default;
+      height: icons.$icon-size-default;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+
+      transition: animation.$transition-fade;
+    }
+
+    &:hover,
+    &:focus {
+      color: black;
+
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.card-button {
+  &.text-auto {
+    a:hover,
+    a:focus {
+      opacity: 1;
+    }
+  }
+}

package/components/carousel.scss

@@ -0,0 +1,161 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/carousel" as bc;
+@use "../themes/bootstrap/overrides" as bootstrap;
+
+@use "../functions/icons";
+@use "../variables/color";
+@use "../variables/type";
+@use "../variables/spacing";
+
+.carousel {
+  &:focus-visible {
+    outline: transparent;
+    box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #000000,
+      0px 0px 12px 5px rgba(0, 0, 0, 0.24);
+  }
+}
+
+.carousel-inner {
+  padding-bottom: calc(10% - 0.5rem);
+
+  @include bootstrap.media-breakpoint-down(rg) {
+    padding-bottom: 1.5rem;
+  }
+
+  @include bootstrap.media-breakpoint-down(md) {
+    padding-bottom: calc(10% - 1rem);
+  }
+
+  img {
+    aspect-ratio: 16/9;
+    object-fit: cover;
+  }
+}
+
+.carousel-caption {
+  background-color: rgba(color.$nightblue-dark, 0.85);
+  color: color.$white;
+  width: 40%;
+  left: 0;
+  bottom: -5rem;
+  text-align: left;
+  padding: 2rem;
+  padding-bottom: 5rem;
+
+  @include bootstrap.media-breakpoint-up(lg) {
+    bottom: -7rem;
+  }
+
+  @include bootstrap.media-breakpoint-down(lg) {
+    padding: 1.5rem;
+    padding-bottom: 5rem;
+    width: 50%;
+  }
+
+  @include bootstrap.media-breakpoint-down(md) {
+    width: 55%;
+  }
+
+  @include bootstrap.media-breakpoint-down(rg) {
+    bottom: 0;
+    position: relative;
+    margin-top: -7rem;
+    width: 75%;
+  }
+
+  @include bootstrap.media-breakpoint-down(sm) {
+    margin-top: -3rem;
+    width: calc(100% - 2rem);
+    margin-left: 1rem;
+  }
+
+  .bold {
+    font-size: type.$font-size-small-big;
+    font-weight: type.$font-weight-bold;
+    margin-bottom: 0;
+  }
+
+  .subtitle,
+  .light {
+    font-size: type.$font-size-small-big;
+    font-weight: type.$font-weight-light;
+  }
+}
+
+.carousel-caption:before {
+  content: "";
+  position: absolute;
+  bottom: 3rem;
+  left: 0;
+  border-bottom: 10px solid color.$yellow;
+  width: 192px; //width from logo
+  z-index: 0;
+
+  @include bootstrap.media-breakpoint-down(lg) {
+    bottom: 2.5rem;
+  }
+}
+
+.caption-right .carousel-caption {
+  left: auto;
+  right: 0;
+}
+
+.caption-light .carousel-caption {
+  background-color: rgba(color.$gray-cararra, 0.85);
+  color: color.$black;
+}
+
+.carousel-indicators {
+  text-align: right;
+  float: right;
+  bottom: spacing.$size-huge;
+  right: 2%;
+  left: inherit;
+  margin: 0;
+
+  @include bootstrap.media-breakpoint-down(lg) {
+    bottom: 2rem;
+  }
+
+  @include bootstrap.media-breakpoint-down(rg) {
+    bottom: 1.5rem;
+  }
+
+  @include bootstrap.media-breakpoint-down(sm) {
+    right: 0;
+    left: 0;
+    bottom: 0.8rem;
+  }
+}
+
+.caption-right .carousel-indicators {
+  text-align: left;
+  float: left;
+  left: 2%;
+  right: auto;
+}
+
+.carousel-indicators li {
+  border: 1px color.$black solid;
+  border-radius: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: transparent;
+
+  &:not(:last-child) {
+    margin-right: spacing.$size-regular;
+  }
+}
+
+.carousel-indicators li.active {
+  border-color: color.$yellow;
+  background-color: color.$yellow;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  display: none;
+}

package/components/custom-choice-control.scss

@@ -0,0 +1,217 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/custom-forms";
+
+@use "../functions/sizing";
+@use "../variables/color";
+@use "../variables/commons";
+@use "../variables/type";
+@use "../variables/grid";
+@use "../variables/spacing";
+@use "../variables/components/forms";
+@use "../variables/icons";
+@use "../functions/icons" as fi;
+
+// Custom Labels
+.custom-control-label {
+  padding: map.get(spacing.$post-sizes, "micro")
+    map.get(spacing.$post-sizes, "mini");
+  left: forms.$input-border-width; // Offset to display checkboxes and radio-buttons correctly on grid
+  margin-top: calc(#{map.get(spacing.$post-sizes, "mini")} - 1px);
+  margin-bottom: calc(#{map.get(spacing.$post-sizes, "mini")} - 1px);
+
+  @include hover-focus {
+    &::before {
+      border-color: color.$black;
+    }
+  }
+
+  .custom-control-input:not(:disabled):active ~ & {
+    &::before {
+      background: color.$black-alpha-20;
+      border-color: color.$black;
+    }
+  }
+
+  &::after,
+  &::before {
+    width: forms.$custom-choice-control-size;
+    height: forms.$custom-choice-control-size;
+  }
+
+  &::before {
+    border: forms.$input-border-width solid color.$black-alpha-60;
+  }
+
+  .custom-control-input:disabled ~ &::before {
+    border-color: color.$black-alpha-60;
+  }
+
+  .custom-control-input:disabled ~ & {
+    color: color.$black-alpha-60;
+  }
+
+  .custom-control-input:disabled ~ &::after {
+    opacity: 0.6;
+  }
+
+  .custom-control-input:checked ~ & {
+    &::before {
+      border-color: color.$black-alpha-60;
+    }
+  }
+}
+
+// Spacing inside form
+.custom-checkbox,
+.custom-radio {
+  &.form-control {
+    $padding-x: calc(#{forms.$input-padding-x} + #{forms.$input-border-width});
+    $padding-y: calc(#{forms.$input-padding-y} - #{forms.$input-height-border});
+
+    padding: $padding-y $padding-x;
+    border: none;
+
+    // This centers the checkbox / radiobutton beside other form-controls, if there is no label on top
+    margin-top: type.$line-height-base + forms.$label-margin-bottom -
+      sizing.px-to-rem(1); // The subtracted pixel is due to the browser rendering of the label
+
+    label ~ & {
+      margin-top: 0;
+    }
+
+    &.form-control-rg {
+      $padding-y-rg: calc(
+        #{forms.$input-padding-y-rg} - #{forms.$input-height-border}
+      );
+      padding: $padding-y-rg $padding-x;
+    }
+
+    // TODO: Adapt spacing for form-control-sm and form-control-lg
+
+    & .custom-control-label {
+      margin: forms.$input-border-width !important;
+    }
+  }
+}
+
+// Radio-Buttons
+.custom-radio {
+  .custom-control-label {
+    &::after {
+      background-size: forms.$custom-choice-control-size;
+    }
+  }
+
+  .custom-control-input:focus ~ label {
+    &:before {
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+  }
+
+  .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: inherit;
+  }
+
+  // Styles  to improve accessibility in high contrast mode
+  @media (forced-colors: active),
+    /* TODO: remove this IE Rules once Version 5 is out */ (-ms-high-contrast: active),
+    (-ms-high-contrast: white-on-black) {
+    & .custom-control-input:checked + .custom-control-label::after {
+      // escape svg to support IE
+      background-image: url(escape-svg(
+        "data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 12 12'><circle r='3' fill='white'/></svg>"
+      ));
+      forced-color-adjust: none;
+    }
+
+    // use color: graytext to highlight the text in the disabled color
+    & .custom-control-input:disabled + .custom-control-label {
+      color: graytext;
+    }
+
+    & .custom-control-input:focus + .custom-control-label::before {
+      outline: 2px solid transparent;
+    }
+  }
+}
+
+// Checkboxes
+.custom-checkbox {
+  .custom-control-label {
+    &::before {
+      border-radius: 0;
+    }
+
+    &::after {
+      background-size: 90% 90%;
+    }
+  }
+
+  .custom-control-input {
+    &:checked ~ .custom-control-label::after {
+      // TODO: Can this be replaced by an icon placeholder?
+      background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4NCjx0aXRsZT4zMDM1PC90aXRsZT4NCjxwYXRoIGQ9Ik0xMi42NjcgMjMuNmwtNy4yLTcuMDY3IDEuMDY3LTEuMDY3IDYuMTMzIDYuMjY3IDEyLjgtMTIuOTMzIDEuMDY3IDEuMDY3eiI+PC9wYXRoPg0KPC9zdmc+DQo=");
+    }
+
+    &:disabled:checked ~ .custom-control-label::before {
+      border-color: color.$black-alpha-60;
+      background-color: color.$white-alpha-60;
+    }
+
+    &:focus ~ label {
+      &:before {
+        box-shadow: $input-btn-focus-box-shadow;
+      }
+    }
+
+    &:indeterminate ~ .custom-control-label {
+      @include hover-focus {
+        &::after {
+          border-color: color.$black;
+        }
+      }
+
+      &::after {
+        background-color: color.$white;
+        background-size: 50%;
+        border: forms.$input-border-width solid color.$black-alpha-60;
+      }
+    }
+  }
+
+  // Styles  to improve accessibility in high contrast mode
+  @media (forced-colors: active),
+    /* TODO: remove this IE Rules once Version 5 is out */ (-ms-high-contrast: active),
+    (-ms-high-contrast: white-on-black) {
+    & .custom-control-input:checked:disabled + .custom-control-label::before {
+      border-color: graytext;
+    }
+
+    & .custom-control-input:checked + .custom-control-label::after {
+      background-image: url(fi.get-colored-svg-url(2105, color.$white));
+    }
+
+    // use color: graytext to highlight the text in the disabled color
+    & .custom-control-input:disabled + .custom-control-label {
+      color: graytext;
+    }
+
+    & .custom-control-input:focus + .custom-control-label::before {
+      outline: 2px solid transparent;
+    }
+  }
+}
+
+.valid-tooltip,
+.invalid-tooltip {
+  left: $grid-gutter-width / 2;
+
+  .form-row & {
+    left: $form-grid-gutter-width / 2;
+  }
+}

package/components/custom-range-input.scss

@@ -0,0 +1,51 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/custom-forms" as bcf;
+
+@use "../variables/color";
+@use "../variables/components/forms";
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .custom-range {
+    height: forms.$custom-range-input-height-ie;
+  }
+}
+
+input[type="range"] {
+  @extend .custom-range;
+}
+
+// see https://jira.post.ch/browse/COWF-209
+
+// https://codepen.io/thebabydino/pen/goYYrN
+input[type="range"] {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--val) - var(--min)) / var(--range));
+  --sx: calc(.5 * 1.5em + var(--ratio) * (100% - 1.5em));
+}
+
+// the track in IE is slightly larger: when going at 100%, the thumb does not cover it totally
+input[type="range"]::-ms-track {
+  width: calc(100% - .2em);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  background: linear-gradient(color.$black, color.$black) 0 / var(--sx) 100% no-repeat color.$gray-200;
+  background-color: color.$gray-200;
+}
+
+input[type="range"]::-ms-fill-lower {
+  background: color.$black;
+}
+
+input[type="range"]::-moz-range-progress {
+  background: color.$black;
+}
+
+// for making input align vertically
+.align-to-custom-range.form-control {
+  position: relative;
+  top: .75rem;
+}

package/components/custom-select.scss

@@ -0,0 +1,60 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/custom-forms";
+@use "../mixins/forms" as forms-mixins;
+
+@use "../variables/components/forms";
+
+.custom-select {
+  appearance: none;
+  text-align: left;
+
+  &-rg {
+    height: forms.$custom-select-height-rg;
+    padding-top: forms.$custom-select-padding-y;
+    padding-bottom: forms.$custom-select-padding-y;
+    font-size: forms.$custom-select-font-size-rg;
+  }
+}
+
+select {
+  @extend .custom-select;
+  @extend .custom-control;
+
+  &.form-control-lg ~ label {
+    z-index: 1;
+  }
+}
+
+.dropdown .custom-select {
+  &.form-control ~ .dropdown-menu {
+    min-width: 0;
+    max-width: none;
+    right: 0;
+    left: 0;
+    top: forms.$input-height;
+  }
+
+  &.form-control-sm ~ .dropdown-menu {
+    top: forms.$input-height-sm;
+  }
+
+  &.form-control-rg ~ .dropdown-menu {
+    top: forms.$input-height-rg;
+  }
+
+  &.form-control-lg {
+    & ~ .dropdown-menu {
+      top: forms.$input-height-lg;
+    }
+
+    &:not(:empty),
+    &[aria-expanded=true] {
+      & ~ label:first-of-type {
+        @include forms-mixins.label-floated-style();
+      }
+    }
+  }
+}