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

package/components/grid.scss

@@ -0,0 +1,103 @@
+@forward "../variables/options";
+
+@use "sass:map";
+
+@use "../lic/bootstrap-license";
+@use "../themes/bootstrap/overrides" as *;
+@use "../themes/bootstrap/grid" as bg;
+
+@use "../variables/commons";
+@use "../variables/spacing";
+@use "../variables/grid";
+
+.vertical-gutters {
+  margin-bottom: grid.$grid-gutter-width * -1;
+
+  > .col,
+  > [class*="col-"] {
+    padding-bottom: grid.$grid-gutter-width;
+  }
+}
+
+// border-gutters class is used to manipulate border collapse
+.row.border-gutters {
+  margin-right: -(commons.$border-width);
+  margin-bottom: -(commons.$border-width);
+  margin-left: 0;
+
+  > .col,
+  > [class*="col-"] {
+    padding-left: 0;
+    padding-right: commons.$border-width;
+    padding-bottom: commons.$border-width;
+  }
+}
+
+$container-cache: 0;
+
+@each $breakpoint in grid.$grid-breakpoints-list {
+  $container-padding: map.get(grid.$grid-container-padding, $breakpoint);
+
+  // Ensure this breakpoint is only overwritten when the padding differs from the last breakpoint
+  @if ($container-cache != $container-padding) {
+
+    // Loop over breakpoints and set custom-paddings to .container for each breakpoint
+    .container {
+      // If xs, don't add media-query
+      @if $breakpoint == "xs" {
+        padding-left: $container-padding;
+        padding-right: $container-padding;
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          padding-left: $container-padding;
+          padding-right: $container-padding;
+        }
+      }
+    }
+  
+    .container-reset {
+      @if $breakpoint == "xs" {
+        margin-left: -($container-padding);
+        margin-right: -($container-padding);
+      } @else {
+        @include media-breakpoint-up($breakpoint) {
+          margin-left: -($container-padding);
+          margin-right: -($container-padding);
+        }
+      }
+    }
+  
+    .container-reset-left {
+      @if $breakpoint=="xs" {
+        margin-left: -($container-padding);
+      }
+      @else {
+        @include media-breakpoint-up($breakpoint) {
+          margin-left: -($container-padding);
+        }
+      }
+    }
+  
+    .container-reset-right {
+      @if $breakpoint=="xs" {
+        margin-right: -($container-padding);
+      }
+      @else {
+        @include media-breakpoint-up($breakpoint) {
+          margin-right: -($container-padding);
+        }
+      }
+    }
+  }
+
+  // Container fluid responsive needs to be written every time
+  .container-fluid-#{$breakpoint} {
+    @include media-breakpoint-only($breakpoint) {
+      padding-left: spacing.$spacer;
+      padding-right: spacing.$spacer;
+    }
+  }
+  
+  //stylelint-disable-next-line order/order
+  $container-cache: $container-padding;
+}

package/components/icons.scss

@@ -0,0 +1,62 @@
+@forward "../variables/options";
+
+@use "../variables/icons" as vars;
+@use "../variables/color";
+
+@use "../mixins/icons" as icon-mixin;
+@use "../mixins/utilities";
+
+.pi {
+  vertical-align: middle;
+  display: inline-block;
+  width: vars.$icon-size-default;
+  height: vars.$icon-size-default;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  border: none;
+
+  // Invert icons when HCM is active
+  @include utilities.high-contrast-mode() {
+    filter: invert(1);
+
+    // Override inversion and don't change colors of pre-colored icons, they are like images
+    @each $name, $path in vars.$svg-pre-colored-icon-map {
+      &.pi-#{$name} {
+        filter: none;
+        forced-color-adjust: none;
+      }
+    }
+  }
+}
+
+.pi-border {
+  border: vars.$icon-border-width solid transparent;
+  background-size: 90%;
+}
+
+@each $size, $value in vars.$icon-sizes {
+  .pi-#{$size} {
+    width: $value;
+    height: $value;
+  }
+}
+
+@each $name, $path in vars.$svg-icon-map {
+  .pi-#{$name} {
+    @include icon-mixin.pi($name);
+  }
+}
+
+@each $name, $path in vars.$svg-pre-colored-icon-map {
+  .pi-#{$name} {
+    @include icon-mixin.pi-pre($name);
+  }
+}
+
+// -- Special Icons --
+
+.pi-favourite {
+  @include icon-mixin.pi("2062-f", color.$yellow)
+}
+

package/components/intranet-header/_icon.scss

@@ -0,0 +1,6 @@
+@use "../../mixins/icons" as icon-mixin;
+
+.navbar-toggler .pi-menu,
+#sidebar .pi-menu {
+  @include icon-mixin.pi(2070); 
+}

package/components/intranet-header/_language-chooser.scss

@@ -0,0 +1,40 @@
+@use "../../variables/color";
+@use "../../variables/spacing";
+@use "../../variables/commons";
+
+@use "../../mixins/icons" as icon-mixin;
+
+#languageParent {
+  padding: 0;
+  min-width: 18rem;
+  overflow-y: visible;
+
+  .dropdown-item {
+    padding: spacing.$size-small-regular spacing.$size-large;
+  }
+
+  .language-menu {
+    display: flex;
+
+    .dropdown-item {
+      flex: auto 1 1;
+      text-align: center;
+      border: commons.$border-width solid color.$gray-200;
+      border-top: 0;
+      border-left: 0;
+      border-radius: 0;
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      &:focus {
+        z-index: commons.$zindex-dropdown;
+      }
+    }
+  }
+
+  .other-items {
+    overflow-y: auto;
+  }
+}

package/components/intranet-header/_logo.scss

@@ -0,0 +1,74 @@
+@use "../../variables/color";
+@use "../../variables/components/intranet-header";
+
+@use "../../themes/bootstrap/overrides" as *;
+
+%header-logo {
+  width: 0;
+  height: 0;
+  
+  border: none;
+  outline: none;
+  
+  background-repeat: no-repeat;
+  // If the active color changes, the logo's background color shouldn't change.
+  // That is why this color is hard coded.
+  background-color: #ffcc00; 
+}
+  
+// logo-de 47px x 151px
+.header-logo-de {
+  @extend %header-logo;
+  padding: 23.5px 63.5px;
+  background-image: url(data:image/png;base64,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);
+}
+  
+// logo-en 47px x 160px
+.header-logo-en {
+  @extend %header-logo;
+  padding: 23.5px 80px;
+  background-image: url(data:image/png;base64,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);
+}
+  
+// logo-fr 47px x 132px
+.header-logo-fr {
+  @extend %header-logo;
+  padding: 23.5px 66px;
+  background-image: url(data:image/png;base64,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);
+}
+  
+// logo-it 47px x 133px
+.header-logo-it {
+  @extend %header-logo;
+  padding: 23.5px 66.5px;
+  background-image: url(data:image/png;base64,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);
+}
+
+.bg-logo {
+  // If the f-active color changes, the logo's background color shouldn't change.
+  // That is why this color is hard coded.
+  background-color: color.$yellow;
+  display: block !important;
+  height: intranet-header.$header-content-size;
+  padding-top: .5em; // Offset
+  text-align: center;
+}
+
+@include media-breakpoint-down(rg) {
+  .bg-logo {
+    padding-top: 0;
+  }
+  
+  .header-logo-de,
+  .header-logo-en,
+  .header-logo-fr,
+  .header-logo-it {
+    background-image: url("data:image/png;base64,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");
+    width: intranet-header.$header-content-size;
+    height: intranet-header.$header-content-size;
+    padding: 0;
+    background-size: contain;
+    background-position: center;
+    margin: 0 !important;
+  }
+}

package/components/intranet-header/_nav-overflow.scss

@@ -0,0 +1,56 @@
+@use "../../variables/color";
+@use "../../variables/commons";
+@use "../../functions/icons";
+
+@use "../../themes/bootstrap/overrides" as *;
+@use "../../placeholders/dropdown";
+
+.top-navigation {
+  .nav-item#more {
+    & > .nav-link::after {
+      @extend %toggler-icon;
+      background-image: url(icons.get-colored-svg-url("2051", color.$gray-800));
+    }
+
+    &.hidden {
+      & > .nav-link::after {
+        background-image: url(icons.get-colored-svg-url("2052", color.$gray-800)); // Angle downwards
+      }
+    }
+
+    @include media-breakpoint-down(rg) {
+      & > span {
+        display: none !important;
+      }
+    }
+  }
+
+  .nav-overflow {
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      right: 0;
+      top: 100%;
+      margin-top: commons.$border-width;
+      padding-bottom: commons.$border-width;
+      background-color: color.$white;
+      border-left: commons.$border-width solid color.$black-alpha-20;
+      z-index: 0;
+
+      &.dropup.show,
+      &.dropdown.show {
+        z-index: 1;
+      }
+
+      &.last-nav-overflow {
+        padding-bottom: 0;
+        border-bottom: commons.$border-width solid color.$black-alpha-20;
+      }
+    }
+
+    @include media-breakpoint-down(rg) {
+      transform: none !important;
+      width: auto !important;
+      display: list-item !important;
+    }
+  }
+}

package/components/intranet-header/_scaffolding.scss

@@ -0,0 +1,96 @@
+@use "../../variables/color";
+@use "../../variables/spacing";
+@use "../../variables/commons";
+@use "../../variables/components/intranet-header";
+
+@use "../../themes/bootstrap/overrides" as *;
+
+// based from http://getbootstrap.com/docs/4.1/examples/dashboard/
+.navbar-brand {
+  padding-top: spacing.$spacer .75;
+  padding-bottom: spacing.$spacer * .75;
+  font-size: spacing.$spacer;
+}
+
+.navbar {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: commons.$zindex-fixed;
+  background-color: color.$white;
+  border-bottom: commons.$border-width solid color.$black-alpha-20;
+
+  .nav-down {
+    width: 100%;
+  }
+}
+
+.navbar {
+  .container,
+  .container-fluid,
+  .container-xs {
+    .row {
+      width: 100%;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-expand-md .navbar-nav {
+    flex-wrap: wrap;
+  }
+}
+
+.intranet-header .title {
+  overflow: hidden;
+
+  h2 {
+    font-size: 1.6rem; // Same as PostWeb
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.layout-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+
+  & > div.site-content {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.layout-container {
+  &.header-big {
+    .header-margin {
+      margin-top: intranet-header.$header-size-big;
+    }
+  }
+
+  &.header-small {
+    .header-margin {
+      margin-top: intranet-header.$header-size;
+    }
+  }
+
+  @include media-breakpoint-down(rg) {
+    &.header-big {
+      .header-margin {
+        margin-top: intranet-header.$header-size;
+      }
+    }
+
+    &.header-big.with-searchbar {
+      .header-margin {
+        margin-top: intranet-header.$header-size-big;
+      }
+    }
+  }
+}
+

package/components/intranet-header/_searchbox.scss

@@ -0,0 +1,56 @@
+@use "../../variables/color";
+@use "../../variables/spacing";
+@use "../../variables/type";
+@use "../../variables/commons";
+@use "../../variables/components/intranet-header";
+
+@use "../../themes/bootstrap/overrides" as *;
+
+header.navbar {
+  .search-textbox {
+    input {
+      border: none;
+      background-color: color.$black-alpha-10;
+      height: intranet-header.$header-content-size;
+      font-size: 1.2em;
+      font-weight: type.$font-weight-light;
+    }
+
+    .input-group-append { 
+      margin-left: 0;
+
+      & > .btn { 
+        border: none;
+        border-radius: 0;
+        cursor: pointer;
+        color: color.$black-alpha-40;
+        padding: 0 spacing.$spacer;
+        margin-right: 0 !important;
+        background-color: color.$black-alpha-10;
+
+        @include hover-focus {
+          background-color: color.$black-alpha-20;
+        }
+    
+        // stylelint-disable-next-line max-nesting-depth
+        & > .pi {
+          font-size: spacing.$spacer * 2;
+          vertical-align: baseline;
+          background-image: none;
+      
+          // stylelint-disable-next-line max-nesting-depth
+          &::before {
+            content: "\EA09"; // Regular search icon
+          }
+        }
+      }
+    }
+    
+    @include media-breakpoint-down(rg) {
+      border-top: commons.$border-width solid color.$black-alpha-20;
+    }
+    @include media-breakpoint-up(md) {
+      border-left: commons.$border-width solid color.$black-alpha-20;
+    }
+  }
+}

package/components/intranet-header/_settings.scss

@@ -0,0 +1,23 @@
+@use "../../variables/color";
+@use "../../variables/components/forms";
+@use "../../functions/color" as color-f;
+@use "../../variables/components/intranet-header";
+
+.settings {
+  border-left: 1px solid color.$black-alpha-20;
+
+  &:hover {
+    background-color: color.$black-alpha-10;
+    cursor: pointer;
+  }
+  
+  img.profile-image {
+    border: forms.$input-border-width solid color-f.get-solid-color(color.$black-alpha-20, color.$white); 
+    border-radius: 50%; 
+    width: intranet-header.$profile-image-size; 
+    height: intranet-header.$profile-image-size; 
+    background-size: cover; 
+    background-position: center; 
+    background-repeat: no-repeat;
+  }
+}

package/components/intranet-header/_sidebar.scss

@@ -0,0 +1,118 @@
+@use "../../variables/color";
+@use "../../variables/spacing";
+@use "../../variables/commons";
+@use "../../variables/components/intranet-header";
+
+@use "../../themes/bootstrap/overrides" as *;
+
+
+// Sidebar
+#sidebar {
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: intranet-header.$zindex-sidebar; // Behind the navbar
+
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  a {
+    text-decoration: none;
+  }
+
+  .sidebar-sticky {
+    position: fixed;
+    top: auto;
+    width: 100%;
+    max-width: inherit;
+    overflow-x: hidden;
+    overflow-y: auto; // Scrollable contents if viewport is shorter than content.
+    margin-left: spacing.$spacer * -1;
+    padding: spacing.$spacer 0;
+    top: 0px;
+    bottom: 0px;
+
+    & > ul {
+      padding-right: spacing.$spacer;
+    }
+
+    @include media-breakpoint-down(rg) {
+      bottom: auto;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    padding-left: spacing.$spacer;
+  }
+
+  li.separator {
+    min-height: spacing.$spacer;
+  }
+
+  @include media-breakpoint-down(rg) {
+    flex: 0 0 auto;
+  }
+
+  @include media-breakpoint-down(rg) {
+    &.closed .sidebar-sticky {
+      background-color: transparent !important;
+    }
+  }
+
+  @include media-breakpoint-down(rg) {
+    & > div > ul > li:first-child {
+      background-color: white;
+      border-bottom: commons.$border-width solid color.$black-alpha-20;
+      display: block;
+  
+      margin: spacing.$spacer * -1;
+      margin-bottom: 0;
+      padding: spacing.$spacer;
+      padding-top: spacing.$spacer;   
+  
+      @include hover-focus {
+        background-color: get-solid-color(color.$black-alpha-10, color.$white);
+        cursor: pointer;
+      }
+
+      & i.pi {
+        vertical-align: text-top;
+        height: spacing.$spacer;
+        line-height: spacing.$spacer;
+      }
+    }
+  
+    &:not(.closed) > div > ul > li:first-child {
+      margin-bottom: spacing.$spacer;
+  
+      & i.pi::before {
+        content: "\EA14"; 
+      }
+    }
+      
+    &.closed > div > ul > * {
+      display: none;
+    }
+  
+    & + main {
+      margin-top: 3rem;
+    }
+  }
+}
+
+@include media-breakpoint-down(rg) {
+  #sidebar .sidebar-sticky,
+  #navbarsDefault {
+    max-height: calc(100vh - 65px);
+    overflow: auto;
+  
+    .layout-container.header-big.with-searchbar & {
+      max-height: calc(100vh - 130px);
+    }  
+  } 
+}