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

package/components/accordion.scss

@@ -0,0 +1,177 @@
+@forward "../variables/options";
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+
+@use "../variables";
+@use "../mixins";
+@use "../variables/components/accordion";
+@use "../variables/options";
+@use "../variables/spacing";
+@use "../variables/color";
+@use "../variables/components/button";
+@use "../mixins/icons" as icon-mixin;
+@use "../layouts/portal/type" as portal;
+@use "../variables/type";
+@use "../placeholders/text";
+
+
+.accordion {
+  .card {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    margin-top: 0;
+    outline: none;
+
+    .card-body {
+
+      padding: accordion.$accordion-content-space-top accordion.$accordion-padding-horizontal-xs accordion.$accordion-content-space-bottom-xs;
+
+      // Only one heading style is needed inside the accordion. h2 should not be used inside the accordion.
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        @extend %font-curve-regular;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        @include mixins.fontSizeAndLineHeight($font-curve-regular...);
+        margin-top: accordion.$accordion-content-heading-top;
+        margin-bottom: 0;
+        font-weight: type.$font-weight-bold;
+      }
+
+      p {
+        font-weight: $font-weight-light; // Default style for text with p tag.
+      }
+
+      @include media-breakpoint-up(sm) {
+        padding-right: accordion.$accordion-padding-horizontal-sm;
+        padding-left: accordion.$accordion-padding-horizontal-sm;
+      }
+      @include media-breakpoint-up(rg) {
+        padding-bottom: accordion.$accordion-content-space-bottom-rg;
+      }
+    }
+  }
+
+  .card-header {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    h5 {
+      @extend %font-curve-regular;
+      font-weight: type.$font-weight-bold;
+      position: relative;
+      margin: 0;
+      padding: 0;
+    }
+
+    .btn {
+      @include transition(variables.$transition-base);
+      @include mixins.reset-button;
+      @include mixins.fontSizeAndLineHeight(
+        variables.$font-curve-regular...
+      ); // need to include font-size here, with @extend %font-curve-regular the resetButton mixin overwrite the line-height.
+
+      display: unset;
+      transition: none;
+      width: 100%;
+      background-color: transparent;
+      padding: accordion.$accordion-trigger-padding-vertical
+        accordion.$accordion-trigger-padding-right-xs
+        accordion.$accordion-trigger-padding-vertical
+        accordion.$accordion-padding-horizontal-xs;
+      border-top-style: solid;
+      border-top-color: accordion.$accordion-border-color;
+      border-top-width: accordion.$accordion-border-width;
+      border-radius: 0;
+      cursor: pointer;
+      white-space: normal;
+      color: accordion.$accordion-btn-text-color-expanded;
+      text-align: left;
+      vertical-align: baseline;
+      font-weight: type.$font-weight-bold;
+
+      &[aria-expanded="false"] {
+        @include text-truncate;
+      }
+
+      &:not([aria-expanded="false"]) {
+        color: accordion.$accordion-btn-text-color;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover {
+        .no-touchevents & {
+          color: color.$black;
+          background-color: map.get(color.$background-colors, "dark");
+        }
+      }
+
+      &.btn-link {
+        text-decoration: none;
+      }
+
+      &.btn-link.collapsed[aria-expanded="false"],
+      &.btn-link[aria-expanded="true"] {
+        //stylelint-disable-next-line max-nesting-depth
+        &::after {
+          @include icon-mixin.pi(2113);
+          content: "";
+          position: absolute;
+          top: spacing.$size-regular;
+          right: spacing.$size-regular;
+          width: accordion.$accordion-icon-width;
+          height: accordion.$accordion-icon-width;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
+          transition: button.$btn-transition;
+
+          @include media-breakpoint-up(md) {
+            top: spacing.$size-small-large;
+          }
+        }
+      }
+
+      &.btn-link[aria-expanded="true"] {
+        //stylelint-disable-next-line max-nesting-depth
+        &::after {
+          transform: rotate(180deg);
+        }
+      }
+
+      @include media-breakpoint-up(sm) {
+        padding-left: accordion.$accordion-padding-horizontal-sm;
+        padding-right: accordion.$accordion-trigger-padding-right-sm;
+      }
+    }
+  }
+
+  .collapse {
+    @include transition($transition-collapse);
+  }
+}

package/components/alert.scss

@@ -0,0 +1,217 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+
+@use "../variables/color";
+@use "../variables/commons";
+@use "../variables/type";
+@use "../variables/spacing";
+@use "../variables/grid";
+@use "../variables/breakpoints";
+@use "../variables/components/alert";
+@use "../variables/options";
+@use "../placeholders/notifications";
+
+
+.alert-container {
+  @extend %notification-container;
+}
+
+.alert {
+  $effective-line-height: (alert.$alert-line-height * alert.$alert-font-size);
+
+  @extend %notification;
+
+  padding: alert.$alert-padding-y alert.$alert-padding-x;
+  padding-left: (alert.$alert-padding-x * 2 + alert.$alert-icon-size);
+
+  background-position: alert.$alert-padding-x center;
+  background-size: alert.$alert-icon-size;
+
+  font-size: alert.$alert-font-size;
+
+  min-height: 2 * alert.$alert-padding-y + alert.$alert-icon-size;
+
+  & > *:only-child {
+    font-weight: type.$font-weight-bold;
+  }
+
+  &:not(.alert-fixed-bottom) {
+    max-width: map.get(breakpoints.$grid-breakpoints, "xxl");
+  }
+
+  &.no-icon {
+    padding-left: alert.$alert-padding-x;
+  }
+
+  &.alert-dismissible {
+    padding-right: alert.$alert-close-icon-size + alert.$alert-padding-x * 2;
+  }
+
+  // Adjust close link position
+  .close {
+    @extend %notification-close;
+
+    padding: alert.$alert-padding-y alert.$alert-padding-x;
+  }
+}
+
+.alert-heading {
+  @extend %notification-title;
+
+  font-size: alert.$alert-font-size;
+}
+
+@each $name, $color, $icon in alert.$alert-list {
+  .alert-#{$name} {
+    @extend %notification-#{$name};
+
+    .close {
+      @extend %notification-#{$name}-close;
+    }
+  }
+}
+
+.alert-fixed-bottom {
+  position: fixed;
+
+  left: 0;
+  bottom: 0;
+
+  width: 100%;
+
+  margin-bottom: 0;
+  border-radius: 0;
+
+  @include media-breakpoint-up(xxl) {
+    // TODO: All of the calculations need to be offset by 0.5rem - but I have no idea why.
+    $container-padding: map.get(grid.$grid-container-padding, "xxl");
+
+    background-position: calc(
+      (100vw - #{map.get(breakpoints.$grid-breakpoints, "xxl")}) / 2 + #{alert.$alert-padding-x} + #{$container-padding} - .5rem
+    ) center;
+    padding: alert.$alert-padding-y
+      calc(
+        (100vw - #{map.get(breakpoints.$grid-breakpoints, "xxl")}) / 2 + #{alert.$alert-padding-x *
+        2 + alert.$alert-icon-size} + #{$container-padding} - .5rem
+      );
+
+    &.alert-dismissible {
+      padding-right: calc(
+        (100vw - #{map.get(breakpoints.$grid-breakpoints, "xxl")}) / 2 + #{alert.$alert-close-icon-size +
+        alert.$alert-padding-x * 2} + #{$container-padding} - .5rem
+      );
+
+      & .close {
+        right: calc(
+          (100vw - #{map.get(breakpoints.$grid-breakpoints, "xxl")}) / 2 + #{$container-padding} -
+          .5rem
+        );
+      }
+    }
+  }
+}
+
+.alert-action {
+  @extend .alert-fixed-bottom;
+
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+
+  .alert-content {
+    display: flex;
+    flex: 1 1 0%;
+    flex-flow: column nowrap;
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .alert-buttons {
+    flex: 0 0 auto;
+    margin-left: alert.$alert-padding-x;
+
+    .btn {
+      float: right;
+
+      + .btn {
+        margin-right: spacing.$spacer;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: flex-start;
+
+    .alert-content {
+      flex-basis: auto;
+      align-self: stretch;
+    }
+
+    .alert-buttons {
+      align-self: flex-end;
+      margin-top: spacing.$spacer;
+      margin-left: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    align-items: center;
+
+    .alert-buttons {
+      align-self: stretch;
+
+      .btn {
+        width: 100%;
+
+        + .btn {
+          margin-right: 0;
+          margin-top: spacing.$spacer;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xxl) {
+    $container-padding: map.get(grid.$grid-container-padding, "xxl");
+    padding-right: calc(
+      (100vw - #{map.get(breakpoints.$grid-breakpoints, "xxl")}) / 2 + #{alert.$alert-padding-x} +
+      #{$container-padding} - .5rem
+    );
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .alert {
+    padding-left: alert.$alert-padding-x;
+    padding-top: alert.$alert-padding-y * 2 + alert.$alert-icon-size;
+    text-align: center;
+    background-position: center alert.$alert-padding-y;
+    font-size: alert.$alert-font-size-small;
+
+    &.alert-dismissible {
+      padding-right: alert.$alert-padding-x;
+    }
+
+    &.no-icon {
+      padding-top: alert.$alert-padding-y;
+    }
+
+    .close {
+      bottom: auto;
+      padding: spacing.$spacer/2;
+    }
+
+    .alert-heading {
+      font-size: alert.$alert-font-size-small;
+    }
+  }
+}

package/components/badge.scss

@@ -0,0 +1,95 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/badge" as bb;
+
+@use "../variables/color";
+@use "../variables/type";
+@use "../variables/components/badge";
+@use "../variables/components/nav";
+@use "../variables/options";
+
+
+
+:root {
+  --isolate-components: #{options.$isolate-components};
+}
+
+.badge {
+  border: badge.$badge-border;
+  text-decoration: none;
+  height: badge.$badge-height;
+  display: inline-flex;
+  align-items: center;
+  font-size: type.$font-size-tiny;
+  font-weight: type.$font-weight-normal;
+}
+
+.badge-pill {
+  padding: badge.$badge-pill-padding-y badge.$badge-pill-padding-x;
+  min-width: badge.$badge-pill-min-width;
+}
+
+.badge-pill-p6 {
+  padding: badge.$badge-pill-padding-y-p6 badge.$badge-pill-padding-x-p6;
+  min-width: badge.$badge-pill-min-width;
+}
+//-- Legacy --
+
+@each $color, $value in $theme-colors {
+  .badge-outline-#{$color} {
+    color: color.$black;
+    background-color: $white;
+    border: nav.$nav-pills-outline-border-width solid $value;
+    text-decoration: none;
+
+    &[href] {
+      @include hover-focus {
+        color: color-yiq($value);
+        text-decoration: none;
+        background-color: $value;
+      }
+    }
+  }
+}
+
+.badge-outline-gray-carrara-thick {
+  color: color.$black-alpha-60;
+  background-color: color.$white;
+  border: badge.$badge-pill-border-thick solid color.$black-alpha-20;
+  text-decoration: none;
+
+  &[href] {
+    @include hover-focus {
+      color: color-yiq(color.$gray-cararra);
+      text-decoration: none;
+      background-color: color.$gray-cararra;
+    }
+  }
+}
+
+.badge-gray-carrara {
+  color: #000;
+  background-color: color.$gray-cararra;
+  border: badge.$badge-pill-border-thick solid transparent;
+}
+
+.badge-gray-100 {
+  background-color: color.$gray-100;
+  color: color.$black-alpha-60;
+  border: badge.$badge-pill-border-thick solid transparent;
+}
+
+.badge > i {
+  position: relative;
+}
+
+.badge-pill-circle {
+  border-radius: badge.$badge-height;
+  border: nav.$nav-pills-outline-border-width solid transparent;
+}
+
+.badge-pill > * + * {
+  margin-left: (.375rem);
+}

package/components/breadcrumb.scss

@@ -0,0 +1,43 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/breadcrumbs" as bb;
+
+@use "../variables/type";
+@use "../variables/spacing";
+@use "../variables/components/breadcrumbs";
+@use "../placeholders/text";
+
+
+.breadcrumb {
+  @extend %font-curve-small;
+  font-weight: type.$font-weight-normal;
+  height: map.get(spacing.$post-sizes, "bigger-big");
+  overflow: hidden;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+
+  .ppm-breadcrumb-divider {
+    fill: breadcrumbs.$breadcrumb-divider-color;
+  }
+
+  a {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    text-decoration: none;
+    color: breadcrumbs.$breadcrumb-link-color;
+
+    &:hover {
+      color: breadcrumbs.$breadcrumb-hover-color;
+    }
+  }
+}

package/components/button.scss

@@ -0,0 +1,168 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/buttons";
+@use "../themes/bootstrap/button-group";
+
+@use "../variables/components/button";
+@use "../variables/color";
+@use "../mixins/button" as mixins;
+
+// Overwrites padding-x and padding-y for buttons with hover animation
+.btn {
+  @include mixins.btn;
+}
+
+.btn-sm {
+  @include mixins.btn-sm;
+}
+
+.btn-rg {
+  @include mixins.btn-rg;
+}
+
+.btn-lg {
+  @include mixins.btn-lg;
+}
+
+.btn-scaling {
+  @include mixins.btn-sm;
+
+  @include media-breakpoint-up(rg) {
+    @include mixins.btn-rg;
+  }
+
+  @include media-breakpoint-up(md) {
+    @include mixins.btn;
+  }
+}
+
+// Includes button variants for buttons that are to be used on coloured backgrounds
+.btn-inverted {
+  &.btn {
+    @include mixins.button-outline-variant(color.$white-alpha-80, color.$white);
+  }
+
+  @each $color, $value in color.$theme-colors {
+    &.btn-#{$color} {
+      @if $color == "primary" {
+        @include mixins.button-variant(
+          color.$white,
+          transparent,
+          color.$white-alpha-80,
+          transparent
+        );
+      } @else {
+        @include mixins.button-variant($value, $value, color.$white);
+      }
+    }
+
+    &.btn-outline-#{$color} {
+      @if $color == "white" or $color == "secondary" {
+        @include mixins.button-variant(
+          transparent,
+          color.$white,
+          transparent,
+          color.$white-alpha-80
+        );
+        @include hover-focus {
+          &:not(:disabled):not(.disabled) {
+            color: color.$white-alpha-80;
+          }
+        }
+      } @else {
+        @include mixins.button-outline-variant($value);
+      }
+    }
+  }
+}
+
+// Define primary button hover-background as black
+.btn-primary {
+  $primary-color: map.get(color.$theme-colors, "primary");
+  @include mixins.button-variant(color.$primary-color, color.$primary-color, color.$black, color.$black);
+}
+
+// Define a white button styling
+.btn-white {
+  @include mixins.button-variant(color.$white, color.$white, color.$white-alpha-80, transparent);
+}
+
+// Define a default button styling
+.btn-default {
+  @include mixins.button-outline-variant(color.$black);
+}
+
+.btn-animated {
+  @include hover-focus {
+    &:not([disabled]) > span {
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    &[disabled] > span {
+      transform: none;
+    }
+  }
+
+  &:not([disabled]) > span {
+    @include transition(button.$btn-transition-base-label);
+
+    position: relative;
+    left: 0;
+    display: inline-block;
+
+    &::after {
+      @include transition(
+        button.$btn-transition-base-label,
+        button.$btn-transition-fade-arrow
+      );
+
+      content: "";
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: right center;
+      position: absolute;
+      display: inline-block;
+      padding: 0;
+      margin: 0;
+      opacity: 0;
+    }
+  }
+}
+
+.btn-icon {
+  .pi {
+    transition: button.$btn-transition;
+    opacity: .6;
+  }
+
+  // Icon spacing
+  .pi + span,
+  span + .pi {
+    margin-left: button.$btn-padding-x/2;
+  }
+
+  &:hover:not(:disabled):not(.disabled) .pi {
+    opacity: 1;
+  }
+}
+
+@each $size, $margin in button.$btn-icon-size-map {
+  .btn-icon.btn-#{$size} {
+    .pi + span,
+    span + .pi {
+      margin-left: $margin/2;
+    }
+  }
+}
+
+.btn-link {
+  &:focus {
+    box-shadow: none;
+  }
+}