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

package/components/intranet-header/_top-navigation.scss

@@ -0,0 +1,83 @@
+@use "../../variables/color";
+@use "../../variables/commons";
+@use "../../variables/type";
+
+@use "../../themes/bootstrap/overrides" as *;
+
+.top-navigation {
+  .nav-item > .nav-link {
+    border-top: 4px solid transparent; // Border-Width according to PostWeb CSS
+    border-bottom: 4px solid transparent; // Border-Width according to PostWeb CSS
+    color: color.$black-alpha-60;
+    background-color: none;
+
+    @include hover-focus {
+      border-bottom-color: color.$black-alpha-40;
+      background-color: color.$gray-100;
+      text-decoration: none;
+    }
+  
+    &.active {
+      border-bottom-color: color.$yellow;
+      color: color.$black;
+  
+      @include hover-focus {
+        border-bottom-color: color.$yellow;
+      }
+    }
+  }
+  
+  .nav-link {
+    @include hover-focus {
+      cursor: pointer;
+    }
+  }
+  
+  .nav-item {
+    flex-shrink: 0;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+@include media-breakpoint-down(rg) {
+  .top-navigation #navbarsDefault {
+    border-top: commons.$border-width solid color.$black-alpha-20;
+  }
+}
+  
+@include media-breakpoint-up(md) {
+  .top-navigation {
+    border-top: commons.$border-width solid color.$black-alpha-20;
+  }
+}
+
+#navbarsDefault > ul > .nav-item {
+  font-size: 1.25rem;
+  font-weight: type.$font-weight-light;
+}
+  
+@include media-breakpoint-down(rg) {
+  #nav-toggler {
+    border: none;
+    border-left: commons.$border-width solid color.$black-alpha-20;
+    border-radius: 0;
+      
+    @include hover-focus {
+      background-color: color.$black-alpha-10;
+    }
+
+    i.pi {
+      height: 100%;
+      //width: 1.5rem;
+      color: color.$black-alpha-20;
+  
+      &:before {
+        position: relative;
+        top: -3px; // Adjust postitioning
+      }
+    }
+  }
+}

package/components/list-group.scss

@@ -0,0 +1,156 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/list-group" as bl;
+
+@use "../variables/color";
+@use "../variables/spacing";
+@use "../variables/type";
+@use "../variables/commons";
+@use "../variables/animation";
+@use "../variables/components/list-group";
+@use "../mixins/type" as type-mixins;
+
+// Base class
+.list-group {
+  background-color: transparent;
+
+  &-box {
+    box-shadow: commons.$box-shadow;
+    padding-top: map.get(spacing.$post-sizes, "mini");
+    padding-bottom: map.get(spacing.$post-sizes, "mini");
+  }
+}
+
+.list-group-item-action {
+  @include transition(color animation.$transition-time-simple animation.$transition-easing-default, background-color animation.$transition-time-simple animation.$transition-easing-default);
+
+  @include hover-focus {
+    .list-group-item-right-svg {
+      transform: translateX(animation.$transition-distance-xsmall);
+    }
+  }
+
+  .list-group-item-right-svg {
+    @include transition(transform animation.$transition-time-area-small animation.$transition-easing-default);
+  }
+
+  &-minimal,
+  &-transparent {
+    @include hover-focus {
+      background-color: transparent;
+    }
+  }
+
+  &-inverted {
+    background-color: transparent;
+
+    @include hover-focus {
+      background-color: list-group.$list-group-hover-bg-inverted;
+    }
+  }
+}
+
+.list-group-item {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: normal;
+  text-decoration: none;
+  padding-right: map.get(spacing.$post-sizes, "small-regular");
+  padding-left: map.get(spacing.$post-sizes, "small-regular");
+  background-color: transparent;
+
+  &-svg {
+    flex: 0 0 auto;
+  }
+
+  &-left-icon {
+    justify-content: flex-start;
+    padding-left: map.get(spacing.$post-sizes, "mini");
+
+    .list-group-item-svg {
+      margin-right: map.get(spacing.$post-sizes, "mini");
+
+      @include media-breakpoint-up(rg) {
+        margin-right: map.get(spacing.$post-sizes, "small-regular");
+      }
+    }
+
+    @include media-breakpoint-up(rg) {
+      padding-left: map.get(spacing.$post-sizes, "small-regular");
+    }
+  }
+
+  &-no-border {
+    border: none;
+  }
+
+  &-minimal {
+    @include type-mixins.fontSizeAndLineHeight(type.$font-size-bigger-regular, type.$font-size-bigger-regular);
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &-transparent {
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    @include media-breakpoint-up(rg) {
+      padding-left: map.get(spacing.$post-sizes, "regular");
+    }
+  }
+
+  &-white {
+    background-color: transparent;
+    color: color.$white;
+
+    &:hover {
+      color: color.$white-alpha-80;
+      background-color: transparent;
+    }
+  }
+
+  @include media-breakpoint-up(rg) {
+    padding-left: map.get(spacing.$post-sizes, "large");
+
+    &-minimal {
+      padding-left: 0;
+    }
+
+    &-transparent {
+      padding-left: map.get(spacing.$post-sizes, "regular");
+      padding-right: map.get(spacing.$post-sizes, "mini");
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &-big {
+      padding: map.get(spacing.$post-sizes, "small-large") map.get(spacing.$post-sizes, "mini") map.get(spacing.$post-sizes, "small-large") map.get(spacing.$post-sizes, "regular");
+    }
+  }
+}
+
+.list-group-item { 
+  border-right: 0;
+  border-left: 0;
+  border-collapse: collapse;
+
+  .list-group &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.list-group-white {
+  .list-group-item {
+    border: none;
+    border-top: list-group.$list-group-border-width solid color.$white-alpha-20;
+  }
+}

package/components/modal.scss

@@ -0,0 +1,87 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/modal" as bm;
+@use "../themes/bootstrap/close" as bc;
+@use "../themes/bootstrap/overrides" as bootstrap;
+
+@use "../mixins/icons" as icon-mixin;
+@use "../mixins/scroll-shadows" as scroll-shadows-mixin;
+@use "../variables";
+
+.modal-content {
+  border: none;
+  box-shadow: variables.$box-shadow;
+}
+
+post-ngb-modal-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-body {
+  @include scroll-shadows-mixin.scroll-shadows-y(variables.$modal-content-bg);
+  overflow-y: auto;
+  padding: variables.$modal-body-padding;
+}
+
+.modal-header,
+.modal-footer {
+  border: none;
+}
+
+.modal-title:focus {
+  outline: none; // Removes focus styles when you manually set focus to title with ngbAutofocus https://ng-bootstrap.github.io/#/components/modal/examples#focus
+}
+
+.modal-header .close {
+  padding: variables.$modal-close-btn-padding;
+
+  & > * { // hide the "X" from the ng-bootstrap implementation
+    display: none;
+  }
+
+  &::before { // display the "X" from CWF icons
+    @include icon-mixin.pi(2043);
+    content: "";
+    position: relative;
+    opacity: .8;
+    vertical-align: middle;
+    display: inline-block;
+    width: variables.$icon-size-default;
+    height: variables.$icon-size-default;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    transition: variables.$transition-fade;
+  }
+}
+
+@include bootstrap.media-breakpoint-up(sm) {
+  post-ngb-modal-content { // prevents the modal from exceeding the height of the screen
+    max-height: calc(100vh - #{2 * variables.$modal-dialog-margin-y-sm-up});
+  }
+
+  // Right and left margins are set to "auto" from the sm breakpoint
+  // Paddings below ensure minimal margins on medium screens
+  .modal-dialog {
+    padding-right: variables.$modal-dialog-margin;
+    padding-left: variables.$modal-dialog-margin;
+  }
+}
+
+@include bootstrap.media-breakpoint-down(xs) {
+  post-ngb-modal-content { // make the modal cover the full height available on small screens
+    height: calc(100vh - #{2 * variables.$modal-dialog-margin});
+  }
+
+  .modal-body,
+  .modal-header {
+    padding-right: variables.$modal-header-padding-y;
+    padding-left: variables.$modal-header-padding-y;
+  }
+
+  .modal-header .close {
+    margin-right: (- variables.$modal-header-padding-y);
+  }
+}

package/components/pagination.scss

@@ -0,0 +1,67 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/pagination" as pg;
+@use "../variables/components/pagination";
+@use "../mixins/icons" as icon-mixin;
+@use "./icons.scss";
+
+.pagination {
+  .page-item {
+    color: pagination.$pagination-color;
+    width: pagination.$pagination-width;
+
+    &.disabled:first-child,
+    &.disabled:last-child {
+      display: none;
+    }
+
+    .page-link {
+      color: inherit;
+      text-decoration: none;
+      text-align: center;
+      height: 100%;
+
+      &[aria-label="Previous"],
+      &[aria-label="Next"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+      }
+
+      &[aria-label="Previous"] span,
+      &[aria-label="Next"] span {
+        display: none;
+      }
+
+      &[aria-label="Previous"] {
+        &::before {
+          @include icon-mixin.pi(2110, pagination.$pagination-color);
+          @extend .pi;
+          content: "";
+        }
+      }
+
+      &[aria-label="Next"] {
+        &::before {
+          @include icon-mixin.pi(2111, pagination.$pagination-color);
+          @extend .pi;
+          content: "";
+        }
+      }
+
+      &[aria-disabled] {
+        border-bottom: none;
+        border-top: none;
+        background-color: transparent;
+      }
+    }
+
+    &:hover,
+    &:focus,
+    &.active {
+      color: pagination.$pagination-active-color;
+    }
+  }
+}

package/components/popover.scss

@@ -0,0 +1,21 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/popover" as bl;
+
+@use "../variables/type";
+
+// Popover
+.popover {
+  text-align: left;
+  background-clip: border-box;
+  border-radius: 0px;
+}
+  
+// Popover Header
+.popover-header {
+  font-weight: type.$font-weight-bold;
+  text-align: left;
+  border-bottom: none;
+}

package/components/product-card.scss

@@ -0,0 +1,74 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@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/breakpoints";
+@use "../variables/components/card";
+@use "../functions/sizing";
+@use "../mixins/size" as size-mixin;
+
+.product-navigation {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+// Set auto height when product cards break
+[data-sync-height-with] {
+  @each $breakpoint, $px in breakpoints.$grid-breakpoints {
+    [class*="col-#{$breakpoint}-"] > .card > & {
+      @media (max-width: #{$px - .2}) {
+        height: auto !important;
+      }
+    }
+  }
+}
+
+.card-buttons {
+  [class*="col-"] {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.card-button {
+  margin: .75rem 0;
+  align-self: stretch;
+
+  [class*="col-"] > & {
+    height: 100%;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+
+    > .pi {
+      width: 3rem;
+      height: 3rem;
+      margin-right: 1rem;
+      flex-shrink: 0;
+    }
+  }
+
+  .card-body {
+    @include size-mixin.responsive-size(regular);
+  }
+
+  .post-card-favourit {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+  }
+}

package/components/progress.scss

@@ -0,0 +1,15 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as bootstrap;
+@use "../themes/bootstrap/progress" as bl;
+
+@use "../variables/color";
+
+@each $color, $value in color.$theme-colors {
+  .progress {
+    & > .bg-#{$color} {
+      color: bootstrap.color-yiq($value);
+    }
+  }
+}

package/components/reboot.scss

@@ -0,0 +1,17 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/reboot";
+
+@use "../mixins/type";
+@use "../variables/animation";
+
+
+body {
+  @include type.font-smoothing();
+}
+
+a {
+  @include transition(all animation.$transition-time-simple animation.$transition-easing-default);
+}

package/components/root.scss

@@ -0,0 +1,10 @@
+@use "../variables/color";
+
+:root {
+  @each $color-name, $color-value in color.$theme-colors {
+    --#{$color-name}: #{$color-value};
+  }
+
+  --text: #{color.$black};
+  --focus-color: #{color.$black-alpha-40};
+}

package/components/sizing.scss

@@ -0,0 +1,90 @@
+@forward "../variables/options";
+
+@use "sass:map";
+@use "../themes/bootstrap/overrides" as bootstrap;
+@use "../variables/spacing";
+@use "../variables/breakpoints";
+@use "../mixins/utilities";
+
+// Post margins, paddings and sizes
+@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+  @include bootstrap.media-breakpoint-up($breakpoint) {
+    $infix: if($breakpoint == "xs", "", "-#{$breakpoint}");
+
+    @each $prop, $abbrev in (margin: m, padding: p, line-height: lh, height: h, max-height: mh, width: w, max-width: mw) {
+      @each $size, $length in spacing.$post-sizes {
+        @if ($prop == margin or $prop == padding) {
+          .#{$abbrev}t#{$infix}-#{$size},
+          .#{$abbrev}y#{$infix}-#{$size} {
+            #{$prop}-top: $length !important;
+          }
+
+          .#{$abbrev}r#{$infix}-#{$size},
+          .#{$abbrev}x#{$infix}-#{$size} {
+            #{$prop}-right: $length !important;
+          }
+
+          .#{$abbrev}b#{$infix}-#{$size},
+          .#{$abbrev}y#{$infix}-#{$size} {
+            #{$prop}-bottom: $length !important;
+          }
+
+          .#{$abbrev}l#{$infix}-#{$size},
+          .#{$abbrev}x#{$infix}-#{$size} {
+            #{$prop}-left: $length !important;
+          }
+        }
+
+        .#{$abbrev}#{$infix}-#{$size} {
+          #{$prop}: $length !important;
+        }
+      }
+    }
+  }
+}
+
+// Generate responsive spacing utility classes, a lot of them
+$cache: ();
+
+@each $breakpoint-key, $breakpoint-value in breakpoints.$grid-breakpoints {
+  @if ($breakpoint-key == "xs") {
+    @each $curve-name, $curve-sizes in spacing.$size-curves {
+      $value: map.get($curve-sizes, $breakpoint-key);
+
+      @each $classname, $property in spacing.$responsive-spacing-properties {
+        $cache: map.set($cache, $classname + $curve-name, $value);
+        @include utilities.generate-utility-class($classname, $curve-name, $property, $value);
+      }
+    }
+  } @else {
+    // Media queries create a scope, upstream variables become read-only and updating the $cache
+    // is impossible from within the media query. Therefore we first compile a stack of utility
+    // classes to compile, and then compile them. With caching, we're able to skip 370 utility
+    // classes from being written (765 vs. 2248 lines of code unminified)
+
+    $stack: ();
+
+    @each $curve-name, $curve-sizes in spacing.$size-curves {
+      $value: map.get($curve-sizes, $breakpoint-key);
+
+      @each $classname, $property in spacing.$responsive-spacing-properties {
+        @if (map.get($cache, $classname + $curve-name) != $value) {
+          $stack: map.set($stack, $classname, $curve-name, $property, $value);
+          $cache: map.set($cache, $classname + $curve-name, $value);
+        }
+      }
+    }
+
+    // Render the stack
+    //stylelint-disable-next-line order/order
+    @include bootstrap.media-breakpoint-up($breakpoint-key) {
+      @each $classname, $class-map in $stack {
+        @each $curve-name, $curve-map in $class-map {
+          @each $property, $value in $curve-map {
+            @include utilities.generate-utility-class($classname, $curve-name, $property, $value);
+          }
+        }
+      }
+    }
+  }
+}

package/components/spinner.scss

@@ -0,0 +1,58 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/progress" as bl;
+
+@use "../variables/commons";
+@use "../variables/components/spinners";
+
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-bg {
+  height: 100%;
+  width: 100%;
+  z-index: commons.$zindex-spinner;
+  position: absolute;
+}
+
+.loading-modal {
+  z-index: commons.$zindex-spinner;
+  position: absolute;
+  display: inline-flex;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.loader {
+  border-radius: 50%;
+  border: spinners.$spinner-border-width solid spinners.$spinner-color-primary;
+  border-right-color: transparent;
+  border-bottom-color: spinners.$spinner-color-secondary;
+  width: spinners.$spinner-size;
+  height: spinners.$spinner-size;
+  animation: spin 2s linear infinite;
+
+  &.loader-sm {
+    width: spinners.$spinner-size-sm;
+    height: spinners.$spinner-size-sm;
+    border-width: spinners.$spinner-border-width-sm;
+  }
+
+  &.loader-xs {
+    width: spinners.$spinner-size-xs;
+    height: spinners.$spinner-size-xs;
+    border-width: spinners.$spinner-border-width-xs;
+  }
+}