@design-factory/design-factory 15.2.0

package/styles/scss/components/select/_select.variables.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+
+// import is for the clearance look
+@import '../inputs/inputs.variables';
+/* Select native */
+$df-select-indicator-disabled: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{$gray-400}' d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E"),
+  '#',
+  '%23'
+) !default;
+/* Ngselect variables*/
+$df-icon-caret-down: '\e9ff' !default; // .icon-caret-down
+$df-select-single-optionselected-background-color: $primary !default;
+$df-select-icon-caret-down: $df-icon-caret-down !default;
+$df-select-optionselected-background-color: $df-primary-lighten-60 !default; // override
+$df-select-value-color: $form-select-color !default; // $input-color
+$df-select-option-textdecoration-hover: underline !default;
+$df-select-option-hover: $df-hover-bg-color !default;
+$df-select-disabled-cursor: $df-disabled-cursor !default;
+$df-select-disabled-color: $df-disabled-color !default; // gray-400
+$df-select-disabled-bg: $df-disabled-bg-color !default; // gray-100
+$df-select-readonly-bg: $df-select-disabled-bg !default;
+$df-select-readonly-color: $body-color !default;
+$df-select-value-lefticon-border-right: $border-width solid $pacific !default;
+$df-select-value-righticon-border-left: none !default;
+$df-select-highlight-color: $primary !default;
+$df-select-panel-min-width: 100% !default;
+$df-select-value-height: $font-size-base * $line-height-base !default;
+$df-select-value-height-sm: $font-size-sm * $line-height-sm !default;
+$df-select-value-height-lg: $font-size-lg * $line-height-lg !default;
+$df-select-clear-width: 1.5rem !default;
+$df-select-arrow-pos: 1.5rem !default; // deprecated to remove
+$df-select-arrow-wrapper-width: $df-select-arrow-pos !default;
+$df-select-arrow-wrapper-height: 1.5rem !default;
+$df-select-arrow-wrapper-margin-left: 0.3rem !default;
+$df-select-arrow-wrapper-margin-right: 0.375rem !default;
+$df-select-arrow-wrapper-hover-background-color: $df-iwi-icon-hover-bg-color !default;
+$df-select-arrow-wrapper-border-radius: 50% !default;
+$df-select-arrow-width: 1.5rem !default;
+$df-select-arrow-height: 1.5rem !default;
+$df-select-arrow-text-align: center !default;
+$df-select-arrow-text-width: 0.75rem !default;
+$df-select-single-input-padding: $df-select-arrow-pos + $input-padding-x !default;
+$df-select-single-clear-input-padding: $df-select-single-input-padding + $df-select-clear-width !default;
+$df-select-border: $input-border-width solid $input-border-color !default;
+$df-select-border-radius: $form-select-border-radius !default;
+$df-select-border-radius-sm: $df-select-border-radius * map.get($df-size-ratios, 'sm') !default; // or the sm lg version of the border-radius??
+$df-select-border-radius-lg: $df-select-border-radius * map.get($df-size-ratios, 'lg') !default;
+$df-select-value-margin: $form-select-padding-y !default;
+$df-select-value-margin-sm: $input-padding-y-sm !default;
+$df-select-value-margin-lg: $input-padding-y-lg !default;
+$df-select-panel-border-radius: 2px !default;
+$df-select-panel-box-shadow: $df-box-shadow !default;
+$df-select-optgroup-border: $border-width solid $border-color !default;
+$df-select-icon-color: $form-select-indicator-color !default;
+$df-custom-select-background-rtl: $form-select-indicator no-repeat left $form-select-padding-x center /
+  $form-select-bg-size !default;
+$df-select-option-color: color-contrast($df-select-option-hover) !default;
+$df-select-single-optionselected-color: color-contrast($df-select-single-optionselected-background-color) !default;
+$df-select-icon-solid-font-weight: $df-icon-solid-font-weight !default;
+$df-select-icon-font-size: 1rem !default;
+$df-select-icon-font-family: $df-font-family !default;
+$df-select-input-font-weight: $input-font-weight !default;
+$df-select-spinner-loader-border-left: 2px solid $primary !default;
+$df-select-value-disabled-bg-color: $white !default;
+$df-select-value-disabled-border: $border-width solid $white !default;
+$df-select-input-invalid-feedback-focus-box-shadow: 0 0 0 3.2px rgba($form-feedback-invalid-color, 0.25) !default;
+$df-select-input-valid-feedback-focus-box-shadow: 0 0 0 3.2px rgba($form-feedback-valid-color, 0.25) !default;
+$df-select-input-warning-feedback-focus-box-shadow: 0 0 0 3.2px rgba($df-form-feedback-warning-color, 0.25) !default;
+// For the not found text
+$df-select-not-found-disabled: $gray-600 !default;
+$df-select-option-disabled-color: $df-disabled-input-color !default;
+$df-select-clear-button-width: $df-iwi-icon-width !important !default; // important needed to override default ng-select
+$df-select-clear-button-height: $df-iwi-icon-height !default;
+$df-select-clear-button-line-height: $df-select-clear-button-height !default;
+$df-select-clear-button-display: flex !default;
+$df-select-clear-button-justify-content: center !default;
+$df-select-clear-button-margin-left: 0.4rem !default;
+$df-select-panel-border: $border-width solid $border-color !default;
+$df-select-witharrow-clear-button-margin: 1rem !default;
+$df-select-focus-zindex: $zindex-dropdown + 1 !default;
+$df-select-form-check-padding-start: $form-check-padding-start + 0.5em !default;
+$df-select-form-check-margin-start: -0.5em !default;
+$df-select-form-check-margin-bottom: 0 !default; // override $form-check-margin-bottom
+$df-select-form-check-padding-bottom: $form-check-margin-bottom !default;

package/styles/scss/components/separator/_separator.scss

@@ -0,0 +1,8 @@
+.vertical-separator {
+  width: $df-vertical-separator-width;
+  color: $hr-color;
+  background-color: currentColor;
+  display: inline-block;
+  height: 100%;
+  opacity: $hr-opacity;
+}

package/styles/scss/components/separator/_separator.variables.scss

@@ -0,0 +1 @@
+$df-vertical-separator-width: 1px !default;

package/styles/scss/components/sidenav/_sidenav.scss

@@ -0,0 +1,259 @@
+.df-sidenav-toggler {
+  @extend .navbar-toggler;
+}
+
+.df-sidenav-toggler-icon {
+  line-height: $df-sidenav-toggler-icon-line-height;
+  display: $df-sidenav-toggler-icon-display;
+  width: $df-sidenav-toggler-icon-width;
+  height: $df-sidenav-toggler-icon-height;
+}
+
+.df-sidenav-light {
+   --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-withouticon-height};
+   --#{$prefix}sidenav-item-icon-extra-padding: #{$df-sidenav-item-extra-padding-start};
+  width: $df-sidenav-expand-width;
+  padding-top: $df-sidenav-menu-padding-top;
+  background-color: $df-sidenav-background-color;
+  overflow-x: $df-sidenav-menu-overflow-x;
+  z-index: $df-sidenav-menu-zindex;
+  @include ltr {
+    border-right: $df-sidenav-menu-border;
+  }
+  @include rtl {
+    border-left: $df-sidenav-menu-border;
+  }
+  // When one item is active in the menu only the first element is having the has Active look
+  > df-sidenavlist > .df-sidenav-list {
+    > .df-sidenav-list-withactivated {
+      button,
+      a {
+        @include ltr {
+          border-left: $df-sidenav-withactivated-item-border-start;
+        }
+        @include rtl {
+          border-right: $df-sidenav-withactivated-item-border-start;
+        }
+      }
+    }
+  }
+  // Three level of sidenav setup
+  .df-sidenav-list {
+    padding-left: $df-sidenav-list-padding-start;
+    padding-right: $df-sidenav-list-padding-end;
+    li {
+      list-style-type: $df-sidenav-list-item-style;
+    }
+    > .df-sidenav-list-withactivated {
+      > button,
+      > a {
+        .df-sidenav-icon {
+          color: $df-sidenav-item-withactivated-icon-color;
+        }
+        font-weight: $df-sidenav-item-withactivated-font-weight;
+        background-color: $df-sidenav-item-withactivated-bg-color;
+      }
+    }
+    .df-sidenav-list {
+      .df-sidenav-item { // Second level override
+        @include ltr {
+          padding-left: $df-sidenav-item-padding-level2-start;
+        }
+        @include rtl {
+          padding-right: $df-sidenav-item-padding-level2-start;
+        }
+
+      }
+      .df-sidenav-list {
+        font-size: $df-sidenav-item-third-level-font-size;
+        .df-sidenav-item { // Thrid level override
+          @include ltr {
+            padding-left: $df-sidenav-item-padding-level3-start;
+          }
+          @include rtl {
+            padding-right: $df-sidenav-item-padding-level3-start;
+          }
+        }
+      }
+    }
+
+    #{$df-sidenav-item-class} { // default
+      [class^='icon-'], [class*=" icon-"] {
+          color: $df-sidenav-item-icon-color;
+      }
+      width: $df-sidenav-item-width;
+      color: $df-sidenav-item-color;
+      position: $df-sidenav-item-position; // mandatory for the focus shadow
+      border: $df-sidenav-item-border; // reset the default border
+      margin: $df-sidenav-item-margin;
+      padding-top: $df-sidenav-item-padding-top;
+      padding-bottom: $df-sidenav-item-padding-bottom;
+      @include ltr {
+        text-align: $df-sidenav-item-text-align;
+        border-left: $df-sidenav-item-border-start;
+        padding-left: $df-sidenav-item-padding-start;
+        padding-right: $df-sidenav-item-padding-end;
+      }
+      @include rtl {
+        text-align: $df-sidenav-item-text-align-rtl;
+        border-right: $df-sidenav-item-border-start;
+        padding-right: $df-sidenav-item-padding-start;
+        padding-left: $df-sidenav-item-padding-end;
+      }
+      background-color: $df-sidenav-item-background-color;
+      height: $df-sidenav-item-height;
+      &:hover {
+        text-decoration: $df-sidenav-item-text-decoration;
+      }
+      &[aria-disabled='true'],
+      &.disabled,
+      &[disabled] { // TODO see with UX if we could have the case. Disabled item are not yet implemented
+        background-color: $df-sidenav-item-background-color;
+        opacity: $df-sidenav-disabled-opacity;
+        cursor: $df-sidenav-disabled-cursor;
+      }
+      &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
+        &:not(.df-sidenav-title):hover {
+          background-color: $df-sidenav-item-background-color-hover;
+        }
+        &:focus,
+        &.focus {  // Title can never be focus
+          box-shadow: none;
+          outline: none;
+          &:before {
+            content: '';
+            position: absolute;
+            top: $df-sidenav-item-focus-box-shadow-width;
+            bottom: $df-sidenav-item-focus-box-shadow-width;
+            @include ltr {
+              left: $df-sidenav-item-focus-box-shadow-start;
+              right: $df-sidenav-item-focus-box-shadow-width;
+            }
+            @include rtl {
+              left: $df-sidenav-item-focus-box-shadow-width;
+              right: $df-sidenav-item-focus-box-shadow-start; 
+            }
+            // Move the focus box-shadow not to be over the border start
+            @at-root #{selector-replace(&, #{$df-sidenav-item-class}, ".df-sidenav-list-withactivated " + #{$df-sidenav-item-class})} {
+              @include ltr {
+                left: $df-sidenav-item-focus-box-shadow-width;
+              }
+              @include rtl {
+                right: $df-sidenav-item-focus-box-shadow-width;
+              }
+            }
+            z-index: $df-sidenav-item-box-shadow-zindex;
+            box-shadow: $df-sidenav-item-focused-box-shadow; // override
+          }
+        }
+        &.active { // Title are never active
+           --#{$prefix}sidenav-list-border-width: #{$df-sidenav-item-active-border-width};
+          background-color: $df-sidenav-item-bg-color-active;
+          color: $df-sidenav-list-active-color;
+          font-weight: $df-sidenav-item-active-font-weight;
+          @include ltr {
+            border-left: $df-sidenav-item-border-start-active;
+          }
+          @include rtl {
+            border-right: $df-sidenav-item-border-start-active;
+          }
+          &:focus,
+          &.focus {  // Title can never be focus
+            &:before {
+              @include ltr {
+                left: $df-sidenav-item-focus-box-shadow-width;
+              }
+              @include rtl {
+                right: $df-sidenav-item-focus-box-shadow-width;
+              }
+            }
+          }
+        }
+      }
+
+      // Override in case of icon
+      &.df-sidenav-item-withicon {
+        + df-sidenavlist {
+          > .df-sidenav-list {
+              --#{$prefix}sidenav-item-icon-extra-padding: #{$df-sidenav-item-withicon-extra-padding-start};
+          }
+          --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
+          .df-sidenav-list .df-sidenav-list {
+              --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height-level3};
+          }
+        }
+        --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
+      }
+      &.df-sidenav-title {
+        height: $df-sidenav-title-height;
+        font-size: $df-sidenav-title-font-size;
+      }
+    }
+  }
+}
+
+.df-main-content {
+  width: calc(100vw - #{$df-sidenav-expand-width});
+}
+
+.df-sidenav-wrapper {
+  position: $df-sidenav-wrapper-position;
+  max-width: $df-sidenav-wrapper-maxwidth;
+  overflow: $df-sidenav-wrapper-overflow; // in case the content can not be reduced more than the screen.
+}
+
+.df-sidenav-icon {
+  font-size: $df-sidenav-icon-font-size;
+  width: $df-sidenav-icon-box-width;
+  height: $df-sidenav-icon-box-height;
+  padding: $df-sidenav-icon-padding;
+  @include ltr {
+    margin-left: $df-sidenav-icon-box-margin-start;
+    margin-right: $df-sidenav-icon-box-margin-end;
+  }
+  @include rtl {
+    margin-right: $df-sidenav-icon-box-margin-start;
+    margin-left: $df-sidenav-icon-box-margin-end;
+  }
+}
+
+.df-sidenav-menu-overlay {
+  position: $df-sidenav-menu-position;
+  height: $df-sidenav-menu-overlay-height;
+}
+
+.df-sidenav-light.df-collapsing {
+  position: $df-sidenav-menu-position;
+  height: $df-sidenav-collapsing-height;
+  width: 0;
+  overflow: hidden;
+  transition: $df-sidenav-collapsing-transition;
+}
+
+// stylelint-disable-next-line selector-type-no-unknown
+df-sidenav {
+  &.df-collapse:not(.df-show) {
+    display: none !important;
+  }
+}
+
+.df-sidenav-overlay {
+  position: $df-sidenav-overlay-position;
+  background-color: $df-sidenav-overlay-background-color;
+  width: $df-sidenav-overlay-width;
+  height: $df-sidenav-overlay-height;
+  z-index: $df-sidenav-overlay-zindex;
+}
+
+// TODO adjust width here
+// Create CSS var to be used in the code of the sidenav JS.
+.df-sidenav-light.df-minimizing {
+  position: $df-sidenav-menu-position;
+  width: 50px;
+  overflow: hidden;
+  transition: width 0.5s ease;
+}
+
+.df-minimized:not(.df-show) {
+  width: 50px;
+}

package/styles/scss/components/sidenav/_sidenav.variables.scss

@@ -0,0 +1,87 @@
+@use 'sass:math';
+@use 'sass:color';
+
+$df-sidenav-background-color: $white !default;
+$df-sidenav-icon-font-size: 1.25rem !default;
+$df-sidenav-icon-box-width: 1.5rem !default;
+$df-sidenav-icon-box-height: 1.5rem !default;
+$df-sidenav-icon-padding: 2px 2px 2px 2px !default;
+
+$df-sidenav-expand-width: 16.875rem !default;
+$df-sidenav-toggler-icon-width: $df-navbar-toggle-icon-width !default;
+$df-sidenav-toggler-icon-height: $df-navbar-toggle-icon-height !default;
+$df-sidenav-toggler-icon-line-height: $df-sidenav-toggler-icon-height !default;
+$df-sidenav-toggler-icon-display: block !default;
+
+$df-sidenav-menu-border: $border-width solid $border-color !default;
+$df-sidenav-menu-overflow-x: hidden !default;
+$df-sidenav-menu-padding-top: 1rem !default;
+$df-sidenav-menu-overlay-height: 100% !default;
+$df-sidenav-menu-position: absolute !default;
+$df-sidenav-menu-zindex: $zindex-fixed + 7 !default;
+
+$df-sidenav-wrapper-maxwidth: 100% !default;
+$df-sidenav-wrapper-position: relative !default;
+$df-sidenav-wrapper-overflow: hidden !default;
+$df-sidenav-disabled-opacity: 0.3 !default;
+$df-sidenav-disabled-cursor: not-allowed !default;
+$df-sidenav-overlay-position: absolute !default;
+$df-sidenav-overlay-width: 100% !default;
+$df-sidenav-overlay-height: 100% !default;
+$df-sidenav-overlay-background-color: rgba(0, 0, 0, 0.5) !default; // TODO find the right color from palette
+$df-sidenav-overlay-zindex: $zindex-fixed + 6 !default;
+
+$df-sidenav-list-active-color: $primary !default;
+$df-sidenav-list-active-background-color: $df-sidenav-list-active-color !default;
+$df-sidenav-list-item-style: none !default;
+$df-sidenav-list-padding-start: 0 !default;
+$df-sidenav-list-padding-end: 0 !default;
+
+$df-sidenav-item-padding-top: 0 !default;
+$df-sidenav-item-padding-bottom: 0 !default;
+$df-sidenav-item-color: $body-color !default;
+$df-sidenav-item-margin: 0 !default;
+$df-sidenav-item-active-border-width: 0.1875rem !default;
+$df-sidenav-item-border: none !default;
+$df-sidenav-item-border-start: $df-sidenav-item-active-border-width solid transparent !default;
+$df-sidenav-item-border-start-active: $df-sidenav-item-active-border-width solid $df-sidenav-list-active-color !default;
+$df-sidenav-item-icon-color: $df-font-icon-color !default;
+$df-sidenav-item-position: relative !default;
+$df-sidenav-item-extra-icon-height: 0.5rem !default;
+$df-sidenav-item-extra-icon-height-level3: 0.25rem !default;
+$df-sidenav-item-height: calc(2.5rem + var( --#{$prefix}sidenav-item-extra-icon-height)) !default;
+$df-sidenav-item-focus-box-shadow-width: $input-btn-focus-width !default;
+$df-sidenav-item-focus-box-shadow-start: 0 !default;
+$df-sidenav-item-text-align: left !default;
+$df-sidenav-item-text-align-rtl: right !default;
+$df-sidenav-item-active-font-weight: $df-font-weight-semi-bold !default;
+$df-sidenav-item-withactivated-font-weight: $df-sidenav-item-active-font-weight !default;
+$df-sidenav-item-withactivated-bg-color: $gray-50 !default;
+$df-sidenav-item-withactivated-icon-color: $body-color !default;
+$df-sidenav-item-background-color: transparent !default;
+$df-sidenav-item-first-level-padding-start: 1.3125rem !default; // 24px - 3px border
+$df-sidenav-item-third-level-font-size: 0.875rem !default;
+$df-sidenav-item-class: ".df-sidenav-item" !default;
+$df-sidenav-text-padding-start: 3.5625rem !default; // 60px - 3px border
+$df-sidenav-icon-box-margin-end: calc((#{$df-sidenav-text-padding-start} - #{$df-sidenav-icon-box-width}) / 2) !default;
+$df-sidenav-icon-box-margin-start: calc(#{$df-sidenav-icon-box-margin-end} - #{$df-sidenav-item-first-level-padding-start}) !default;
+
+$df-sidenav-item-withicon-extra-padding-start: $df-sidenav-text-padding-start - $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
+$df-sidenav-item-extra-padding-start: 0rem !default;
+$df-sidenav-item-padding-start: calc(#{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding)) !default;
+$df-sidenav-item-padding-level2-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem) !default;
+$df-sidenav-item-padding-level3-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem + 0.5rem + 0.25rem) !default; // extra 0.25rem for third level
+$df-sidenav-item-padding-end: 1.25rem !default;
+$df-sidenav-item-width: 100% !default;
+$df-sidenav-withactivated-item-border-start: $df-sidenav-item-active-border-width solid
+  color.adjust($df-sidenav-background-color, $lightness: -20%) !default;
+$df-sidenav-item-focused-box-shadow: $btn-focus-box-shadow !default;
+$df-sidenav-item-box-shadow-zindex: $df-sidenav-menu-zindex + 1 !default;
+$df-sidenav-item-background-color-hover: color.adjust($white, $lightness: -10%) !default;
+$df-sidenav-item-bg-color-active: rgba($df-sidenav-list-active-background-color, 0.1) !default;
+$df-sidenav-collapsing-transition: width 0.5s ease !default;
+$df-sidenav-collapsing-height: 100% !default;
+$df-sidenav-title-height: 2.75rem !default;
+$df-sidenav-title-font-size: 0.875rem !default;
+$df-sidenav-item-text-decoration: none !default;
+$df-sidenav-item-extra-withouticon-height: 0rem !default;

package/styles/scss/components/skip-links/_skip-links.scss

@@ -0,0 +1,24 @@
+.df-skip-links {
+  position: fixed;
+  top: $df-skip-links--top;
+  left: $df-skip-links--left;
+  z-index: $df-skip-links--zindex;
+}
+.df-skip-links__wrap {
+  min-width: $df-skip-links--min-width;
+  background: $df-skip-links-bg;
+  border-radius: $df-skip-links--border-radius;
+  box-shadow: $df-skip-links--shadow;
+
+  &:not(.focus) {
+    @include visually-hidden();
+  }
+
+  > * {
+    margin-bottom: -$list-group-border-width;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/styles/scss/components/skip-links/_skip-links.variables.scss

@@ -0,0 +1,7 @@
+$df-skip-links--shadow: $df-box-shadow !default;
+$df-skip-links--border-radius: $border-radius !default;
+$df-skip-links--top: 1.25rem !default;
+$df-skip-links--left: 0.625rem !default;
+$df-skip-links--min-width: 12.5rem !default;
+$df-skip-links--zindex: $df-zindex-topmost !default;
+$df-skip-links-bg: $white !default;