@design-factory/design-factory 20.0.1 → 21.0.0-next.0

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

@@ -1,89 +0,0 @@
-@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-select-single-optionselected-background-color: shades-css-var('primary', 'bg-color') !default;
-$df-select-icon-caret-down: '\f0d7' !default; // .fa-caret-down
-$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-bg-color: $df-hover-bg-color !default;
-$df-select-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-select-disabled-color: var(--#{$prefix}disabled-color) !default; // gray-400
-$df-select-disabled-bg: var(--#{$prefix}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: shades-css-var('primary', 'bg-color') !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: calc(
-  $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: calc($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-border-radius-sm: 2px !default;
-$df-select-panel-border-radius-lg: 2px !default;
-$df-select-panel-box-shadow: var(--#{$prefix}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-hover-color: var(--#{$prefix}body-color) !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-awesome-font-family !default;
-$df-select-input-font-weight: $input-font-weight !default;
-$df-select-spinner-loader-border-left: 2px solid shades-css-var('primary', 'border-color') !default;
-$df-select-value-disabled-bg-color: $white !default;
-$df-select-value-disabled-border: $border-width solid $white !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 !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;
-$df-select-option-lg-height: 1.95rem !default;
-$df-select-option-sm-height: 1.6rem !default;
-$df-select-input-box-shadow: $input-focus-box-shadow !default;
-$df-select-clear-focus-box-shadow: $df-focused-box-shadow !default;

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

@@ -1,9 +0,0 @@
-.vertical-separator {
-  --#{$prefix}vertical-separator-width: #{$df-vertical-separator-width};
-  width: var(--#{$prefix}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

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

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

@@ -1,347 +0,0 @@
-@use 'sass:meta';
-
-.df-sidenav-toggler {
-  @extend .navbar-toggler;
-}
-
-.df-sidenav-toggler-icon {
-  line-height: var(--#{$prefix}sidenav-toggler-icon-line-height);
-  display: var(--#{$prefix}sidenav-toggler-icon-display);
-  width: var(--#{$prefix}sidenav-toggler-icon-width);
-  height: var(--#{$prefix}sidenav-toggler-icon-height);
-}
-
-.df-sidenav-light {
-  --#{$prefix}sidenav-item-icon-extra-padding: #{$df-sidenav-item-extra-padding-start};
-  --#{$prefix}sidenav-item-icon-color: #{$df-sidenav-item-icon-color};
-  --#{$prefix}sidenav-bg-color: #{$df-sidenav-bg-color};
-  --#{$prefix}sidenav-icon-font-size: #{$df-sidenav-icon-font-size};
-  --#{$prefix}sidenav-icon-box-width: #{$df-sidenav-icon-box-width};
-  --#{$prefix}sidenav-icon-box-height: #{$df-sidenav-icon-box-height};
-  --#{$prefix}sidenav-icon-padding: #{$df-sidenav-icon-padding};
-  --#{$prefix}sidenav-expand-width: #{$df-sidenav-expand-width};
-  --#{$prefix}sidenav-toggler-icon-width: #{$df-sidenav-toggler-icon-width};
-  --#{$prefix}sidenav-toggler-icon-height: #{$df-sidenav-toggler-icon-height};
-  --#{$prefix}sidenav-toggler-icon-line-height: #{$df-sidenav-toggler-icon-line-height};
-  --#{$prefix}sidenav-toggler-icon-display: #{$df-sidenav-toggler-icon-display};
-  --#{$prefix}sidenav-menu-border: #{$df-sidenav-menu-border};
-  --#{$prefix}sidenav-menu-overflow-x: #{$df-sidenav-menu-overflow-x};
-  --#{$prefix}sidenav-menu-padding-top: #{$df-sidenav-menu-padding-top};
-  --#{$prefix}sidenav-menu-padding-inline: #{$df-sidenav-menu-padding-inline};
-  --#{$prefix}sidenav-menu-overlay-position: #{$df-sidenav-menu-position};
-  --#{$prefix}sidenav-menu-overlay-height: #{$df-sidenav-menu-overlay-height};
-  --#{$prefix}sidenav-menu-zindex: #{$df-sidenav-menu-zindex};
-  --#{$prefix}sidenav-disabled-opacity: #{$df-sidenav-disabled-opacity};
-  --#{$prefix}sidenav-disabled-cursor: #{$df-sidenav-disabled-cursor};
-  --#{$prefix}sidenav-list-active-color: #{$df-sidenav-list-active-color};
-  --#{$prefix}sidenav-list-item-style: #{$df-sidenav-list-item-style};
-  --#{$prefix}sidenav-list-padding-start: #{$df-sidenav-list-padding-start};
-  --#{$prefix}sidenav-list-padding-end: #{$df-sidenav-list-padding-end};
-  --#{$prefix}sidenav-item-padding-top: #{$df-sidenav-item-padding-top};
-  --#{$prefix}sidenav-item-padding-bottom: #{$df-sidenav-item-padding-bottom};
-  --#{$prefix}sidenav-item-color: #{$df-sidenav-item-color};
-  --#{$prefix}sidenav-item-margin: #{$df-sidenav-item-margin};
-  --#{$prefix}sidenav-item-border: #{$df-sidenav-item-border};
-  --#{$prefix}sidenav-item-border-radius: #{$df-sidenav-item-border-radius};
-  --#{$prefix}sidenav-item-border-start: #{$df-sidenav-item-border-start};
-  --#{$prefix}sidenav-item-border-start-active: #{$df-sidenav-item-border-start-active};
-  --#{$prefix}sidenav-item-position: #{$df-sidenav-item-position};
-  --#{$prefix}sidenav-item-extra-icon-height-level3: #{$df-sidenav-item-extra-icon-height-level3};
-  --#{$prefix}sidenav-item-withicon-extra-padding-start: #{$df-sidenav-item-withicon-extra-padding-start};
-  --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
-  --#{$prefix}sidenav-item-focus-box-shadow-width: #{$df-sidenav-item-focus-box-shadow-width};
-  --#{$prefix}sidenav-item-text-align: #{$df-sidenav-item-text-align};
-  --#{$prefix}sidenav-item-active-font-weight: #{$df-sidenav-item-active-font-weight};
-  --#{$prefix}sidenav-item-active-border-width: #{$df-sidenav-item-active-border-width};
-  --#{$prefix}sidenav-item-withactivated-font-weight: #{$df-sidenav-item-withactivated-font-weight};
-  --#{$prefix}sidenav-item-withactivated-bg-color: #{$df-sidenav-item-withactivated-bg-color};
-  --#{$prefix}sidenav-item-withactivated-icon-color: #{$df-sidenav-item-withactivated-icon-color};
-  --#{$prefix}sidenav-item-bg-color: #{$df-sidenav-item-bg-color};
-  --#{$prefix}sidenav-item-first-level-padding-start: #{$df-sidenav-item-first-level-padding-start};
-  --#{$prefix}sidenav-item-third-level-font-size: #{$df-sidenav-item-third-level-font-size};
-  --#{$prefix}sidenav-item-padding-start: #{$df-sidenav-item-padding-start};
-  --#{$prefix}sidenav-item-padding-level2-start: #{$df-sidenav-item-padding-level2-start};
-  --#{$prefix}sidenav-item-padding-level3-start: #{$df-sidenav-item-padding-level3-start};
-  --#{$prefix}sidenav-item-padding-end: #{$df-sidenav-item-padding-end};
-  --#{$prefix}sidenav-item-width: #{$df-sidenav-item-width};
-  --#{$prefix}sidenav-withactivated-item-border-start: #{$df-sidenav-withactivated-item-border-start};
-  --#{$prefix}sidenav-item-before-focused-box-shadow: #{$df-sidenav-item-before-focused-box-shadow};
-  --#{$prefix}sidenav-item-focused-box-shadow: #{$df-sidenav-item-focused-box-shadow};
-  --#{$prefix}sidenav-item-focused-box-shadow-color: #{$df-sidenav-item-focused-box-shadow-color};
-  --#{$prefix}sidenav-item-focused-inner-box-shadow-color: #{$df-sidenav-item-focused-inner-box-shadow-color};
-  --#{$prefix}sidenav-item-focused-z-index: #{$df-sidenav-item-focused-z-index};
-  --#{$prefix}sidenav-item-hover-bg-color: #{$df-sidenav-item-hover-bg-color};
-  --#{$prefix}sidenav-item-active-bg-color: #{$df-sidenav-item-active-bg-color};
-  --#{$prefix}sidenav-collapsing-transition: #{$df-sidenav-collapsing-transition};
-  --#{$prefix}sidenav-collapsing-height: #{$df-sidenav-collapsing-height};
-  --#{$prefix}sidenav-title-height: #{$df-sidenav-title-height};
-  --#{$prefix}sidenav-title-font-size: #{$df-sidenav-title-font-size};
-  --#{$prefix}sidenav-item-text-decoration: #{$df-sidenav-item-text-decoration};
-  --#{$prefix}sidenav-minimizing-transition: width 0.5s ease;
-  --#{$prefix}sidenav-icon-box-margin-end: #{$df-sidenav-icon-box-margin-end};
-  --#{$prefix}sidenav-icon-box-margin-start: #{$df-sidenav-icon-box-margin-start};
-  --#{$prefix}sidenav-chevron-icon-color: #{$df-sidenav-chevron-icon-color};
-  --#{$prefix}sidenav-chevron-icon-hover-color: #{$df-sidenav-chevron-icon-hover-color};
-  --#{$prefix}sidenav-chevron-icon-active-color: #{$df-sidenav-chevron-icon-active-color};
-
-  width: var(--#{$prefix}sidenav-expand-width);
-  background-color: var(--#{$prefix}sidenav-bg-color);
-  overflow-x: var(--#{$prefix}sidenav-menu-overflow-x);
-  border-inline-end: var(--#{$prefix}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 {
-        border-inline-start: var(--#{$prefix}sidenav-withactivated-item-border-start);
-      }
-    }
-  }
-
-  & > .df-scroll-content {
-    padding-top: var(--#{$prefix}sidenav-menu-padding-top);
-    padding-inline: var(--#{$prefix}sidenav-menu-padding-inline);
-  }
-
-  // Three level of sidenav setup
-  .df-sidenav-list {
-    padding-inline: var(--#{$prefix}sidenav-list-padding-start) var(--#{$prefix}sidenav-list-padding-end);
-
-    li {
-      list-style-type: var(--#{$prefix}sidenav-list-item-style);
-    }
-
-    > .df-sidenav-list-withactivated {
-      --#{$prefix}sidenav-item-withactived-border-width: var(--#{$prefix}sidenav-item-active-border-width);
-      --#{$prefix}sidenav-item-padding-start: #{$df-sidenav-item-padding-start};
-
-      > button,
-      > a {
-        .df-sidenav-icon {
-          color: var(--#{$prefix}sidenav-item-withactivated-icon-color);
-        }
-
-        font-weight: var(--#{$prefix}sidenav-item-withactivated-font-weight);
-        background-color: var(--#{$prefix}sidenav-item-withactivated-bg-color);
-      }
-    }
-
-    .df-sidenav-list {
-      .df-sidenav-item {
-        // Second level override
-        padding-inline-start: var(--#{$prefix}sidenav-item-padding-level2-start);
-      }
-
-      .df-sidenav-list {
-        font-size: var(--#{$prefix}sidenav-item-third-level-font-size);
-
-        .df-sidenav-item {
-          // Third level override
-          padding-inline-start: var(--#{$prefix}sidenav-item-padding-level3-start);
-        }
-      }
-    }
-
-    .df-sidenav-item {
-      // default
-      [class^='icon-'],
-      [class*=' icon-'],
-      [class^='fa-'],
-      [class*=' fa-'] {
-        color: var(--#{$prefix}sidenav-item-icon-color);
-      }
-      .df-sidenav-collapse-icon {
-        color: var(--#{$prefix}sidenav-chevron-icon-color);
-      }
-
-      width: var(--#{$prefix}sidenav-item-width);
-      color: var(--#{$prefix}sidenav-item-color);
-      position: var(--#{$prefix}sidenav-item-position); // mandatory for the focus shadow
-      border: var(--#{$prefix}sidenav-item-border); // reset the default border
-      margin: var(--#{$prefix}sidenav-item-margin);
-      padding-top: var(--#{$prefix}sidenav-item-padding-top);
-      padding-bottom: var(--#{$prefix}sidenav-item-padding-bottom);
-      text-align: var(--#{$prefix}sidenav-item-text-align);
-      padding-inline: var(--#{$prefix}sidenav-item-padding-start) var(--#{$prefix}sidenav-item-padding-end);
-      border-inline-start: var(--#{$prefix}sidenav-item-border-start);
-      background-color: var(--#{$prefix}sidenav-item-bg-color);
-      height: var(--#{$prefix}sidenav-item-height);
-      border-radius: var(--#{$prefix}sidenav-item-border-radius);
-
-      &:hover {
-        .df-sidenav-collapse-icon {
-          color: var(--#{$prefix}sidenav-chevron-icon-hover-color);
-        }
-        text-decoration: var(--#{$prefix}sidenav-item-text-decoration);
-      }
-      &:active {
-        .df-sidenav-collapse-icon {
-          color: var(--#{$prefix}sidenav-chevron-icon-active-color);
-        }
-      }
-
-      &[aria-disabled='true'],
-      &.disabled,
-      &[disabled] {
-        // TODO see with UX if we could have the case. Disabled item are not yet implemented
-        background-color: var(--#{$prefix}sidenav-item-bg-color);
-        opacity: var(--#{$prefix}sidenav-disabled-opacity);
-        cursor: var(--#{$prefix}sidenav-disabled-cursor);
-      }
-
-      &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
-        &:not(.df-sidenav-title):hover {
-          background-color: var(--#{$prefix}sidenav-item-hover-bg-color);
-          &:active {
-            background-color: var(--#{$prefix}sidenav-item-active-bg-color);
-          }
-        }
-
-        &:focus-visible,
-        &.focus {
-          // Title can never be focus
-          --#{$prefix}box-shadow-color: var(--#{$prefix}sidenav-item-focused-box-shadow-color);
-          --#{$prefix}inner-box-shadow-color: var(--#{$prefix}sidenav-item-focused-inner-box-shadow-color);
-          --#{$prefix}sidenav-item-focused-box-shadow: #{$df-sidenav-item-focused-box-shadow};
-          box-shadow: var(--#{$prefix}sidenav-item-focused-box-shadow);
-          outline: none;
-          z-index: var(--#{$prefix}sidenav-item-focused-z-index);
-
-          //remove when we remove old branding
-          &:before {
-            content: $df-sidenav-item-before-focused-content;
-            position: absolute;
-            top: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-            bottom: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-            @include ltr {
-              left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-              right: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-            }
-            @include rtl {
-              left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-              right: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-            }
-            box-shadow: var(--#{$prefix}sidenav-item-before-focused-box-shadow); // override
-          }
-        }
-
-        &.active {
-          // Title are never active
-          --#{$prefix}sidenav-list-border-width: var(--#{$prefix}sidenav-item-active-border-width);
-          background-color: var(--#{$prefix}sidenav-item-active-bg-color);
-          color: var(--#{$prefix}sidenav-list-active-color);
-          font-weight: var(--#{$prefix}sidenav-item-active-font-weight);
-          border-inline-start: var(--#{$prefix}sidenav-item-border-start-active);
-
-          &:focus-visible,
-          &.focus {
-            // Title can never be focus
-            &:before {
-              @include ltr {
-                left: var(--#{$prefix}sidenav-item-focus-box-shadow-width);
-              }
-              @include rtl {
-                right: var(--#{$prefix}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: var(--#{$prefix}sidenav-item-withicon-extra-padding-start);
-              --#{$prefix}sidenav-item-padding-level2-start: #{$df-sidenav-item-padding-level2-start};
-              --#{$prefix}sidenav-item-padding-level3-start: #{$df-sidenav-item-padding-level3-start};
-            }
-
-            --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
-            --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
-
-            .df-sidenav-list .df-sidenav-list {
-              --#{$prefix}sidenav-item-extra-icon-height: var(--#{$prefix}sidenav-item-extra-icon-height-level3);
-              --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
-            }
-          }
-
-          --#{$prefix}sidenav-item-extra-icon-height: #{$df-sidenav-item-extra-icon-height};
-          --#{$prefix}sidenav-item-height: #{$df-sidenav-item-height};
-        }
-
-        &.df-sidenav-title {
-          height: var(--#{$prefix}sidenav-title-height);
-          font-size: var(--#{$prefix}sidenav-title-font-size);
-        }
-      }
-    }
-  }
-
-  &.df-collapsing {
-    position: $df-sidenav-menu-position;
-    height: $df-sidenav-collapsing-height;
-    width: 0;
-    overflow: hidden;
-    transition: $df-sidenav-collapsing-transition;
-  }
-
-  &.df-minimizing {
-    position: $df-sidenav-menu-position;
-    width: 50px;
-    overflow: hidden;
-    transition: var(--#{$prefix}sidenav-minimizing-transition);
-  }
-
-  &.df-sidenav-menu-overlay {
-    position: var(--#{$prefix}sidenav-menu-overlay-position);
-    height: var(--#{$prefix}sidenav-menu-overlay-height);
-    z-index: var(--#{$prefix}sidenav-menu-zindex);
-  }
-
-  .df-sidenav-icon {
-    font-size: var(--#{$prefix}sidenav-icon-font-size);
-    width: var(--#{$prefix}sidenav-icon-box-width);
-    height: var(--#{$prefix}sidenav-icon-box-height);
-    padding: var(--#{$prefix}sidenav-icon-padding);
-    margin-inline: var(--#{$prefix}sidenav-icon-box-margin-start) var(--#{$prefix}sidenav-icon-box-margin-end);
-  }
-}
-
-.df-main-content {
-  --#{$prefix}sidenav-main-content-width: calc(100vw - #{$df-sidenav-expand-width});
-  width: var(--#{$prefix}sidenav-main-content-width);
-}
-
-.df-sidenav-wrapper {
-  --#{$prefix}sidenav-wrapper-maxwidth: #{$df-sidenav-wrapper-maxwidth};
-  --#{$prefix}sidenav-wrapper-position: #{$df-sidenav-wrapper-position};
-  --#{$prefix}sidenav-wrapper-overflow: #{$df-sidenav-wrapper-overflow};
-  position: var(--#{$prefix}sidenav-wrapper-position);
-  max-width: var(--#{$prefix}sidenav-wrapper-maxwidth);
-  overflow: var(--#{$prefix}sidenav-wrapper-overflow); // in case the content can not be reduced more than the screen.
-}
-
-// stylelint-disable-next-line selector-type-no-unknown
-// flag angular specific
-df-sidenav {
-  &.df-collapse:not(.df-show) {
-    display: none !important;
-  }
-}
-
-.df-sidenav-overlay {
-  --#{$prefix}sidenav-overlay-position: #{$df-sidenav-overlay-position};
-  --#{$prefix}sidenav-overlay-width: #{$df-sidenav-overlay-width};
-  --#{$prefix}sidenav-overlay-height: #{$df-sidenav-overlay-height};
-  --#{$prefix}sidenav-overlay-background-color: #{$df-sidenav-overlay-background-color};
-  --#{$prefix}sidenav-overlay-zindex: #{$df-sidenav-overlay-zindex};
-  position: var(--#{$prefix}sidenav-overlay-position);
-  background-color: var(--#{$prefix}sidenav-overlay-background-color);
-  width: var(--#{$prefix}sidenav-overlay-width);
-  height: var(--#{$prefix}sidenav-overlay-height);
-  z-index: var(--#{$prefix}sidenav-overlay-zindex);
-}
-
-.df-minimized:not(.df-show) {
-  width: 50px;
-}

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

@@ -1,104 +0,0 @@
-@use 'sass:math';
-@use 'sass:color';
-
-$df-sidenav-bg-color: $body-bg !default;
-$df-sidenav-icon-font-size: 1.25rem !default;
-$df-sidenav-icon-box-width: 1.5rem !default;
-$df-sidenav-icon-box-height: unset !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: shades-css-var('primary', 'inert-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-active-font-weight: $df-font-weight-semi-bold !default;
-$df-sidenav-item-border: none !default;
-$df-sidenav-item-border-start: none !default;
-$df-sidenav-item-active-border-color: $df-sidenav-list-active-color !default;
-$df-sidenav-item-border-start-active: $df-sidenav-item-active-border-width solid $df-sidenav-item-active-border-color !default;
-$df-sidenav-item-icon-color: $df-font-icon-color !default;
-$df-sidenav-chevron-icon-color: $df-font-icon-color !default;
-$df-sidenav-chevron-icon-hover-color: $df-font-icon-color !default;
-$df-sidenav-chevron-icon-active-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-basic-height: 2.5rem !default;
-$df-sidenav-item-height: calc(
-  var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) +
-    var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)
-) !default;
-$df-sidenav-item-text-align: start !default;
-$df-sidenav-item-text-decoration: none !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-withactivated-item-border-start: $df-sidenav-item-active-border-width solid
-  shades-css-var('secondary', 'bg-subtle-active-color') !default; // because body-bg is white
-$df-sidenav-item-bg-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-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) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)
-) !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-item-focus-box-shadow-width: $input-btn-focus-width !default;
-$df-sidenav-item-before-focused-box-shadow: $input-btn-focus-box-shadow !default;
-$df-sidenav-item-hover-bg-color: $df-hover-bg-color !default;
-$df-sidenav-item-active-bg-color: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default;
-$df-sidenav-item-extra-withouticon-height: 0rem !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-menu-padding-inline: 0 !default;
-$df-sidenav-item-border-radius: 0 !default;
-$df-sidenav-item-focused-box-shadow: none !default;
-$df-sidenav-item-before-focused-content: '' !default;
-$df-sidenav-item-focused-box-shadow-color: unset !default;
-$df-sidenav-item-focused-inner-box-shadow-color: unset !default;
-$df-sidenav-item-focused-z-index: unset !default;

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

@@ -1,40 +0,0 @@
-.df-skip-links {
-  --#{$prefix}skip-links-shadow: #{$df-skip-links-shadow};
-  --#{$prefix}skip-links-border-radius: #{$df-skip-links-border-radius};
-  --#{$prefix}skip-links-top: #{$df-skip-links-top};
-  --#{$prefix}skip-links-start: #{$df-skip-links-start};
-  --#{$prefix}skip-links-min-width: #{$df-skip-links-min-width};
-  --#{$prefix}skip-links-zindex: #{$df-skip-links-zindex};
-  --#{$prefix}skip-links-bg: #{$df-skip-links-bg};
-  --#{$prefix}skip-links-separator-width: #{$df-skip-links-separator-width};
-
-  .list-group {
-    --#{$prefix}list-group-border-width: #{$df-skip-links-border-width};
-  }
-
-  position: fixed;
-  top: var(--#{$prefix}skip-links-top);
-  @include ltr {
-    left: var(--#{$prefix}skip-links-start);
-  }
-  @include rtl {
-    right: var(--#{$prefix}skip-links-start);
-  }
-
-  z-index: var(--#{$prefix}skip-links-zindex);
-
-  .df-skip-links-wrap {
-    min-width: var(--#{$prefix}skip-links-min-width);
-    background: var(--#{$prefix}skip-links-bg);
-    border-radius: var(--#{$prefix}skip-links-border-radius);
-    box-shadow: var(--#{$prefix}skip-links-shadow);
-
-    &:not(.focus) {
-      @include visually-hidden();
-    }
-
-    .list-group-item {
-      border-bottom-width: var(--#{$prefix}skip-links-separator-width);
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-$df-skip-links-shadow: var(--#{$prefix}box-shadow) !default;
-$df-skip-links-border-radius: $border-radius !default;
-$df-skip-links-border-width: 1px !default;
-$df-skip-links-separator-width: 1px !default;
-$df-skip-links-top: 1.25rem !default;
-$df-skip-links-start: 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;