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

package/components/stepper.scss

@@ -0,0 +1,158 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
+
+@use "../functions/icons" as icon-functions;
+@use "../mixins/size" as size-mixins;
+
+@use "../variables/icons";
+@use "../variables/color";
+@use "../variables/spacing";
+@use "../variables/type";
+@use "../variables/components/stepper";
+
+@use "../themes/bootstrap/overrides" as bs;
+
+.stepper {
+  @include size-mixins.responsive-size("big", "margin-bottom");
+  padding: 0 stepper.$step-indicator-size / 2;
+  position: relative;
+}
+
+.stepper-bar {
+  height: stepper.$stepper-bar-size;
+  margin-top: stepper.$step-indicator-size / 2;
+  margin-bottom: -1 * (stepper.$stepper-bar-size + stepper.$step-indicator-size) / 2;
+}
+
+.steps {
+  display: flex;
+  justify-content: space-between;
+}
+
+.step {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &:first-child,
+  &:last-child {
+    flex-basis: 50%;
+  }
+
+  &:first-child {
+    align-items: flex-start;
+  }
+
+  &:last-child {
+    align-items: flex-end;
+  }
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: stepper.$step-indicator-size;
+  height: stepper.$step-indicator-size;
+  margin: 0 auto;
+  border: spacing.$size-micro solid color.$white;
+  border-radius: 100%;
+  background-color: stepper.$step-indicator-default-bg;
+  color: stepper.$step-indicator-default-color;
+  font-weight: type.$font-weight-bold;
+
+  .step:first-child & {
+    margin-left: stepper.$step-indicator-size / -2;
+  }
+
+  .step:last-child & {
+    margin-right: stepper.$step-indicator-size / -2;
+  }
+
+  .step.current &,
+  .step.passed & {
+    color: stepper.$step-indicator-active-color;
+    background-color: stepper.$step-indicator-active-bg;
+  }
+
+  .step.passed & {
+    background-image: stepper.$step-indicator-passed-icon;
+    background-size: icons.$icon-size-default;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .step:not(.current):hover & {
+    color: stepper.$step-indicator-hover-color;
+    background-color: stepper.$step-indicator-hover-bg;
+  }
+
+  .step.passed:hover & {
+    background-image: stepper.$step-indicator-passed-icon-hover;
+  }
+}
+
+.step-index {
+  flex: 0 0 auto;
+
+  .step.current & {
+    cursor: default;
+  }
+
+  .step.passed & {
+    display: none;
+  }
+}
+
+.step-name {
+  color: stepper.$step-name-color;
+  text-align: center;
+  line-height: stepper.$step-name-height;
+  padding: spacing.$size-mini spacing.$size-micro 0;
+
+  .step:first-child & {
+    text-align: left;
+    margin-left: stepper.$step-indicator-size / -2;
+  }
+
+  .step:last-child & {
+    text-align: right;
+    margin-right: stepper.$step-indicator-size / -2;
+  }
+
+  .step.current & {
+    color: color.$black;
+    font-weight: type.$font-weight-bold;
+  }
+
+  .step:hover & {
+    color: color.$black;
+  }
+}
+
+@include bs.media-breakpoint-down(rg) {
+  .stepper {
+    padding-bottom: stepper.$step-name-height + spacing.$size-micro;
+  }
+
+  .step-name {
+    .step:not(.current) & {
+      display: none;
+    }
+
+    .step.current & {
+      text-align: left;
+      position: absolute;
+      right: 0;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}

package/components/subnavigation.scss

@@ -0,0 +1,131 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+
+@use "../mixins";
+@use "../functions/utilities" as utility-functions;
+@use "../variables/components/subnavigation";
+@use "../variables/animation";
+@use "../placeholders/text";
+
+$module-name: "subnavigation";
+
+.#{$module-name} {
+  background-color: subnavigation.$subnavigation-background-color;
+  position: relative;
+
+  &::after {
+    @include mixins.full-width-underscore(subnavigation.$subnavigation-border-bottom-color, subnavigation.$subnavigation-border-bottom-width);
+    z-index: utility-functions.z-index(subnavigation, underscore-root);
+  }
+
+  &-alternate {
+    background-color: subnavigation.$subnavigation-background-color-alternate;
+  }
+
+  &-inverted {
+    background-color: subnavigation.$subnavigation-background-color-inverted;
+
+    &::after {
+      background-color: subnavigation.$subnavigation-border-bottom-color-inverted;
+    }
+
+    & .#{$module-name}-link {
+      color: subnavigation.$subnavigation-link-color-inverted;
+      @include hover-focus {
+        color: subnavigation.$subnavigation-link-color-hover-inverted;
+      }
+
+      &:not(.active)::after {
+        background-color: subnavigation.$subnavigation-link-underscore-color-hover-inverted;
+      }
+
+      &.active {
+        color: subnavigation.$subnavigation-link-color-hover-inverted;
+      }
+    }
+  }
+
+  &-list {
+    display: flex;
+    padding: 0 $spacer;
+    margin: 0 (-($spacer));
+    list-style: none;
+    width: calc(100% + 2rem);
+    overflow-x: auto; // TODO: Remove when horizontal scrolling is implemented
+  }
+
+  &-item {
+    min-height: subnavigation.$subnavigation-height-xs;
+
+    & .badge {
+      margin-left: subnavigation.$subnavigation-result-margin-left;
+      color: inherit;
+    }
+
+    @include media-breakpoint-up(lg) {
+      min-height: subnavigation.$subnavigation-height-lg;
+    }
+    @include media-breakpoint-up(xl) {
+      min-height: subnavigation.$subnavigation-height-xl;
+    }
+  }
+
+  &-link {
+    @extend %font-curve-small;
+
+    @include transition(color animation.$transition-time-default animation.$transition-easing-default);
+    position: relative;
+    padding: subnavigation.$subnavigation-link-padding-xs;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-decoration: none;
+    color: subnavigation.$subnavigation-link-color;
+    white-space: nowrap;
+
+    @include hover-focus {
+      text-decoration: none;
+      color: subnavigation.$subnavigation-link-color-hover;
+
+      &:not(.active)::after {
+        left: 0;
+        right: 0;
+        opacity: 1;
+      }
+    }
+
+    &:not(.active)::after {
+      @include mixins.full-width-underscore(#{subnavigation.$subnavigation-link-underscore-color-hover}, #{subnavigation.$subnavigation-link-underscore-height});
+      @include transition(opacity animation.$transition-time-default animation.$transition-easing-default,
+      left animation.$transition-time-default animation.$transition-easing-decelerate,
+      right animation.$transition-time-default animation.$transition-easing-decelerate);
+      opacity: 0;
+      left: animation.$transition-distance-medium;
+      right: animation.$transition-distance-medium;
+      z-index: utility-functions.z-index(subnavigation, underscore-link);
+
+      @include media-breakpoint-up(lg) {
+        left: animation.$transition-distance-medium-md;
+        right: animation.$transition-distance-medium-md;
+      }
+    }
+
+    &.active {
+      color: subnavigation.$subnavigation-link-color-hover;
+      font-weight: $font-weight-bold;
+
+      &::after {
+        @include mixins.full-width-underscore(#{subnavigation.$subnavigation-link-underscore-color-active}, #{subnavigation.$subnavigation-link-underscore-height});
+        z-index: utility-functions.z-index(subnavigation, underscore-link);
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding: subnavigation.$subnavigation-link-padding-lg;
+    }
+  }
+}

package/components/switch.scss

@@ -0,0 +1,132 @@
+@forward "../variables/options";
+@forward "../variables/components/switch";
+
+@use "../variables/color";
+@use "../variables/components/switch";
+@use "../variables/components/button";
+
+.switch {
+  display: flex;
+  align-items: center;
+  position: relative;
+  // TODO: why? isn't there a better way to style this with inheritance or variables?
+  font-size: 1rem;
+
+  label {
+    margin-bottom: 0;
+    vertical-align: middle;
+
+    + label {
+      // TODO: use spacing variables
+      margin-left: 1rem;
+    }
+  }
+
+  input[type="checkbox"] {
+    // TODO: use visually hidden mixin
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    background: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    padding: 0;
+
+    // Handle label colors for all states
+    &:not(:checked) ~ label {
+      color: color.$gray-800;
+    }
+
+    &:disabled ~ label {
+      color: color.$gray-400;
+    }
+
+    &:disabled:checked ~ label {
+      color: color.$gray-600;
+    }
+  }
+
+  + .switch {
+    // TODO: use spacing
+    margin-left: 1.5rem;
+  }
+}
+
+.switch-toggler,
+.switch > label:only-child {
+  position: relative;
+  width: switch.$switch-width;
+  height: switch.$switch-width / 2;
+  border-radius: switch.$switch-width / 4;
+  background-color: color.$black-alpha-20;
+  flex-shrink: 0;
+  cursor: pointer;
+  overflow: hidden;
+
+  // Fix broken overflow hidden on safari
+  // https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    transition: all .33s;
+    transform: translateX(0);
+  }
+
+  // Green bg
+  &::before {
+    width: 100%;
+    height: 100%;
+    left: switch.$switch-width * -.75;
+    background-color: color.$green;
+  }
+
+  // Knob
+  &::after {
+    width: 50%;
+    height: 100%;
+    border-radius: switch.$switch-width / 2;
+    border: 2px solid color.$black-alpha-60;
+    background-color: color.$white;
+  }
+
+  // Focused/active state
+  input[type="checkbox"]:not(:disabled):focus ~ &,
+  input[type="checkbox"]:not(:disabled):active ~ & {
+    // TODO: this is used so often it should be in commons
+    box-shadow: button.$input-btn-focus-box-shadow;
+  }
+
+  // Checked state
+  input[type="checkbox"]:checked ~ & {
+    &::before,
+    &::after {
+      transform: translateX(switch.$switch-width / 2);
+    }
+
+    &::after {
+      border-color: color.$black;
+    }
+  }
+
+  input[disabled] ~ & {
+    background-color: color.$gray-100;
+    cursor: default;
+
+    &::before {
+      background-color: color.$gray-400;
+    }
+
+    &::after {
+      border-color: color.$gray-400 !important;
+      background-color: color.$gray-100;
+    }
+  }
+}

package/components/tabs.scss

@@ -0,0 +1,122 @@
+@forward "../variables/options";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/nav" as bn;
+
+@use "../variables/components/nav";
+@use "../variables/spacing";
+@use "../variables/color";
+
+.tabs-wrapper {
+  position: relative;
+  padding-top: spacing.$spacer;
+  background-color: color.$gray-pampas;
+  border: none;
+
+  // Create a line that lies below the active but above the passive elements
+  // This way hover works smoothly with the background color
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: nav.$nav-tabs-border-color;
+  }
+
+  // Small hack to save a lot of code and provide a lot of flexibility to tabs coloring
+  .tabs {
+    background-color: transparent !important;
+  }
+}
+
+.tabs {
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  overflow: auto hidden;
+
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+
+  // Scrolling fix, make the tabs scroll a little more so the right most tab is not
+  // flush with the window border
+  &::after {
+    content: "";
+    display: block;
+    width: 1rem;
+    flex: 1 0 auto;
+  }
+}
+
+.tab-title {
+  position: relative;
+  padding: nav.$nav-link-padding;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  color: color.$black;
+  opacity: .7;
+  transition: background-color 100ms;
+  outline-color: currentColor;
+  
+  &.active,
+  &:focus,
+  &:hover {
+    opacity: 1;
+    color: color.$black;
+    background-color: color.$white;
+  }
+  
+  &.active {
+    border-right-color: nav.$nav-tabs-border-color;
+    border-left-color: nav.$nav-tabs-border-color;
+    background-color: color.$white;
+    color: inherit;
+    font-weight: 700;
+    z-index: 1; // Lift above the line and make focus visible all around
+    
+    // Create a line that does not suffer from border corner mitering
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: -1px;
+      left: -1px;
+      height: 4px;
+      background-color: nav.$nav-tabs-link-active-border-color;
+    }
+  }
+}
+
+// Fix auto colored text on inactive tabs with high specificity
+.text-auto {
+  .tab-title {
+    opacity: 1;
+    
+    &:hover,
+    &:focus {
+      opacity: 1;
+      background-color: rgba(255,255,255,.2);
+    }
+  }
+}
+
+.tab-content {
+  padding-top: spacing.$spacer;
+  padding-bottom: spacing.$spacer;
+}
+
+// Careful, this generates a lot of code
+@each $key, $color in color.$theme-colors {
+  .bg-#{$key} {
+    .tabs-wrapper,
+    .tab-title.active {
+      background-color: $color;
+    }
+
+    .nav-item {
+      background-color: transparentize($color: $color, $amount: .2);
+    }
+  }
+}

package/components/timepicker.scss

@@ -0,0 +1,110 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../mixins/icons" as icon-mixins;
+@use "../mixins/forms" as form-mixins;
+@use "../mixins/button" as button-mixins;
+
+@use "../variables/color";
+@use "../variables/components/forms";
+@use "../variables/components/button";
+
+// Basic timepicker overrides
+.ngb-tp {
+  .ngb-tp-input-container {
+    width: auto;
+  }
+
+  .form-control {
+    width: 4.5rem;
+  }
+
+  .form-control-sm,
+  .form-control-rg {
+    width: 4rem;
+  }
+
+  .form-control-lg {
+    padding: 1rem 1.375rem;
+    width: 6rem;
+    @include form-mixins.placeholder {
+      color: forms.$input-placeholder-color;
+    }
+  }
+
+  .ngb-tp-chevron {
+    &::before {
+      @include icon-mixins.pi("2051");
+      border: none;
+      transform: none;
+      width: map.get(button.$btn-icon-size-map, "md");
+      height: map.get(button.$btn-icon-size-map, "md");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+
+    &.bottom::before {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  @each $size in ("sm", "lg") {
+    .btn-#{$size} .ngb-tp-chevron::before {
+      width: map.get(button.$btn-icon-size-map, $size);
+      height: map.get(button.$btn-icon-size-map, $size);
+    }
+  }
+}
+
+// Regular-sized timepicker
+.timepicker-rg {
+  .btn {
+    @include button-mixins.btn-rg;
+
+    .ngb-tp-chevron::before {
+      width: map.get(button.$btn-icon-size-map, "rg");
+      height: map.get(button.$btn-icon-size-map, "rg");
+    }
+  }
+
+  .form-control {
+    @include form-mixins.form-control-rg;
+  }
+}
+
+// Timepicker validation
+ngb-timepicker {
+  &.is-invalid {
+    .form-control {
+      border-color: color.$danger;
+
+      &:focus {
+        border-color: color.$danger;
+        box-shadow: 0 0 0 forms.$input-focus-width rgba(color.$danger, .25);
+      }
+    }
+
+    ~ .invalid-feedback,
+    ~ .invalid-tooltip {
+      display: block;
+    }
+  }
+
+  &.is-valid {
+    .form-control {
+      border-color: color.$success;
+
+      &:focus {
+        border-color: color.$success;
+        box-shadow: 0 0 0 forms.$input-focus-width rgba(color.$success, .25);
+      }
+    }
+
+    ~ .valid-feedback,
+    ~ .valid-tooltip {
+      display: block;
+    }
+  }
+}