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

package/styles/scss/components/datepicker/_datepicker.scss

@@ -1,362 +0,0 @@
-@use 'sass:meta';
-// Work around due to the use of a namespace design-factory
-.form-inline .form-select {
-  width: 100%;
-}
-
-.ngb-dp-navigation-select {
-  column-gap: var(--#{$prefix}spacing-2);
-  margin-inline: var(--#{$prefix}spacing-2);
-
-  .form-select {
-    padding-inline: var(--#{$prefix}spacing-3);
-    padding-block: var(--#{$prefix}spacing-2);
-  }
-}
-
-%dot-highlight {
-  position: relative;
-
-  &:before {
-    content: '.';
-    font-weight: bold;
-    display: inline-block;
-
-    /* position the dot underneath the character */
-    position: absolute;
-    bottom: 0;
-    @include ltr {
-      left: 0;
-    }
-    @include rtl {
-      right: 0;
-    }
-
-    /* center the dot horizontally */
-    text-align: center;
-    width: 100%;
-  }
-}
-
-.ngb-dp-arrow {
-  justify-content: var(--#{$prefix}datepicker-navigation-arrow-justify-contents);
-
-  .ngb-dp-arrow-btn {
-    margin-inline: 0;
-    padding-inline: 0;
-    min-width: var(--#{$prefix}datepicker-arrow-width);
-    height: var(--#{$prefix}datepicker-arrow-height);
-    border-radius: var(--#{$prefix}datepicker-arrow-border-radius);
-
-    &:focus-visible {
-      outline: $df-datepicker-focused-outline;
-      box-shadow: $df-datepicker-focused-box-shadow;
-    }
-
-    text-decoration: none;
-
-    &:not(:disabled):not(.disabled):active {
-      text-decoration: none;
-      color: $df-font-icon-color;
-    }
-
-    &:disabled,
-    &.disabled {
-      color: var(--#{$prefix}datepicker-arrow-disabled-color);
-    }
-  }
-
-  &.ngb-dp-arrow-prev {
-    .ngb-dp-arrow-btn {
-      font-family: $df-font-awesome-font-family;
-      @extend .fa-chevron-left;
-      @include rtl {
-        @extend .fa-chevron-right;
-      }
-    }
-  }
-
-  &.ngb-dp-arrow-next {
-    .ngb-dp-arrow-btn {
-      font-family: $df-font-awesome-font-family;
-      @extend .fa-chevron-right;
-      @include rtl {
-        @extend .fa-chevron-left;
-      }
-    }
-  }
-
-  .ngb-dp-navigation-chevron {
-    display: none !important;
-  }
-}
-
-// Flag Angular
-// stylelint-disable-next-line selector-type-no-unknown
-ngb-datepicker {
-  --#{$prefix}datepicker-padding-deactivate: #{$df-datepicker-padding-deactivate};
-  --#{$prefix}datepicker-padding: #{$df-datepicker-padding};
-  --#{$prefix}datepicker-box-shadow: #{$df-datepicker-box-shadow};
-  --#{$prefix}datepicker-radius: #{$df-datepicker-radius};
-  --#{$prefix}datepicker-navigation-arrow-justify-contents: #{$df-datepicker-navigation-arrow-justify-contents};
-  --#{$prefix}datepicker-navigation-arrow-flex: #{$df-datepicker-navigation-arrow-flex};
-  --#{$prefix}datepicker-navigation-literal-font-size: #{$df-datepicker-navigation-literal-font-size};
-  --#{$prefix}datepicker-navigation-literal-font-weight: #{$df-datepicker-navigation-literal-font-weight};
-  --#{$prefix}datepicker-navigation-arrow-color: #{$df-datepicker-navigation-arrow-color};
-  --#{$prefix}datepicker-navigation-literal-flex: #{$df-datepicker-navigation-literal-flex};
-  --#{$prefix}datepicker-day-side: #{$df-datepicker-day-side};
-  --#{$prefix}datepicker-weekday-font-style: #{$df-datepicker-weekday-font-style};
-  --#{$prefix}datepicker-weekday-font-size: #{$df-datepicker-weekday-font-size};
-  --#{$prefix}datepicker-weekday-text-transform: #{$df-datepicker-weekday-text-transform};
-  --#{$prefix}datepicker-day-font-weight: #{$df-datepicker-day-font-weight};
-  --#{$prefix}datepicker-day-align-items: #{$df-datepicker-day-align-items};
-  --#{$prefix}datepicker-day-display: #{$df-datepicker-day-display};
-  --#{$prefix}datepicker-day-size: #{$df-datepicker-day-size};
-  --#{$prefix}datepicker-day-justify-content: #{$df-datepicker-day-justify-content};
-  --#{$prefix}datepicker-day-border-radius: #{$df-datepicker-day-border-radius};
-  --#{$prefix}datepicker-day-text-align: #{$df-datepicker-day-text-align};
-  --#{$prefix}datepicker-day-disabled-color: #{$df-datepicker-day-disabled-color};
-  --#{$prefix}datepicker-day-disabled-opacity: #{$df-datepicker-day-disabled-opacity};
-  --#{$prefix}datepicker-day-disabled-cursor: #{$df-datepicker-day-disabled-cursor};
-  --#{$prefix}datepicker-day-active-bg-color: #{$df-datepicker-day-active-bg-color};
-  --#{$prefix}datepicker-day-active-color: #{$df-datepicker-day-active-color};
-  --#{$prefix}datepicker-day-hover-bg-color: #{$df-datepicker-day-hover-bg-color};
-  --#{$prefix}datepicker-day-hover-color: #{$df-datepicker-day-hover-color};
-  --#{$prefix}datepicker-day-hover-text-decoration: #{$df-datepicker-day-hover-text-decoration};
-  --#{$prefix}datepicker-day-focus-outline-width: #{$df-datepicker-day-focus-outline-width};
-  --#{$prefix}datepicker-day-focus-outline: #{$df-datepicker-day-focus-outline};
-  --#{$prefix}datepicker-day-focus-border: #{$df-datepicker-day-focus-border};
-  --#{$prefix}datepicker-day-focus-active-z-index: #{$df-datepicker-day-focus-active-z-index};
-  --#{$prefix}datepicker-day-focus-active-border-color: #{$df-datepicker-day-focus-active-border-color};
-  --#{$prefix}datepicker-day-focus-active-border-z-index: #{$df-datepicker-day-focus-active-border-z-index};
-  --#{$prefix}datepicker-day-range-bg-color: #{$df-datepicker-day-range-bg-color};
-  --#{$prefix}datepicker-day-range-color: #{$df-datepicker-day-range-color};
-  --#{$prefix}datepicker-input-invalid-color: #{$df-datepicker-input-invalid-color};
-  --#{$prefix}datepicker-input-invalid-z-index: #{$df-datepicker-input-invalid-z-index};
-  --#{$prefix}datepicker-menu-border: #{$df-datepicker-menu-border};
-  --#{$prefix}datepicker-panel-border: #{$df-datepicker-panel-border};
-  --#{$prefix}datepicker-range-dropdown-padding: #{$df-datepicker-range-dropdown-padding};
-  --#{$prefix}datepicker-range-dropdown-border: #{$df-datepicker-range-dropdown-border};
-  --#{$prefix}input-datepicker-range-border: #{$df-input-datepicker-range-border};
-  --#{$prefix}input-datepicker-range-white-space: #{$df-input-datepicker-range-white-space};
-  --#{$prefix}input-datepicker-range-padding: #{$df-input-datepicker-range-padding};
-  --#{$prefix}input-datepicker-range-after-display: #{$df-input-datepicker-range-after-display};
-  --#{$prefix}datepicker-arrow-width: #{$df-datepicker-arrow-width};
-  --#{$prefix}datepicker-arrow-height: #{$df-datepicker-arrow-height};
-  --#{$prefix}datepicker-arrow-border-radius: #{$df-datepicker-arrow-border-radius};
-  --#{$prefix}datepicker-arrow-disabled-color: #{$df-datepicker-arrow-disabled-color};
-  --#{$prefix}datepicker-border-radius: #{$df-datepicker-border-radius};
-  --#{$prefix}datepicker-today-border: #{$df-datepicker-today-border};
-
-  border-radius: var(--#{$prefix}datepicker-border-radius) !important;
-  border: var(--#{$prefix}datepicker-panel-border) !important;
-  padding: var(--#{$prefix}datepicker-padding);
-  box-shadow: var(--#{$prefix}datepicker-box-shadow);
-
-  &.dropdown-menu.show {
-    padding: var(--#{$prefix}datepicker-padding);
-    box-shadow: var(--#{$prefix}datepicker-box-shadow);
-    border: var(--#{$prefix}datepicker-menu-border);
-    border-radius: var(--#{$prefix}datepicker-radius);
-  }
-
-  .ngb-dp-header {
-    background-color: inherit;
-    padding-top: var(--#{$prefix}datepicker-padding-deactivate);
-  }
-
-  .ngb-dp-month {
-    &:first-child .ngb-dp-week {
-      @include ltr {
-        padding-left: var(--#{$prefix}datepicker-padding-deactivate);
-      }
-      @include rtl {
-        padding-right: var(--#{$prefix}datepicker-padding-deactivate);
-      }
-    }
-
-    &:last-child .ngb-dp-week {
-      @include ltr {
-        padding-right: var(--#{$prefix}datepicker-padding-deactivate);
-      }
-      @include rtl {
-        padding-left: var(--#{$prefix}datepicker-padding-deactivate);
-      }
-    }
-
-    .ngb-dp-week:last-child {
-      padding-bottom: var(--#{$prefix}datepicker-padding-deactivate);
-    }
-  }
-
-  .ngb-dp-month-name {
-    background-color: inherit;
-    font-size: var(--#{$prefix}datepicker-navigation-literal-font-size);
-    font-weight: var(--#{$prefix}datepicker-navigation-literal-font-weight);
-    flex: var(--#{$prefix}datepicker-navigation-literal-flex);
-  }
-
-  .ngb-dp-arrow {
-    flex: var(--#{$prefix}datepicker-navigation-arrow-flex);
-    width: var(--#{$prefix}datepicker-day-size);
-    height: var(--#{$prefix}datepicker-day-size);
-
-    button.btn {
-      color: var(--#{$prefix}datepicker-navigation-arrow-color);
-    }
-  }
-
-  .ngb-dp-weekday {
-    color: inherit;
-    width: var(--#{$prefix}datepicker-day-side);
-    font-style: var(--#{$prefix}datepicker-weekday-font-style);
-    font-size: var(--#{$prefix}datepicker-weekday-font-size);
-    text-transform: var(--#{$prefix}datepicker-weekday-text-transform);
-  }
-
-  .ngb-dp-week-number {
-    min-width: var(--#{$prefix}datepicker-day-size);
-  }
-
-  .ngb-dp-day {
-    width: var(--#{$prefix}datepicker-day-side);
-    height: var(--#{$prefix}datepicker-day-side);
-    outline: var(--#{$prefix}datepicker-day-focus-outline);
-
-    &.disabled {
-      // override the default look
-      cursor: initial;
-      pointer-events: initial;
-    }
-  }
-}
-
-.df-datepicker-date {
-  height: var(--#{$prefix}datepicker-day-size);
-  width: var(--#{$prefix}datepicker-day-size);
-  text-align: var(--#{$prefix}datepicker-day-text-align);
-  border-radius: var(--#{$prefix}datepicker-day-border-radius);
-  display: var(--#{$prefix}datepicker-day-display);
-  align-items: var(--#{$prefix}datepicker-day-align-items);
-  justify-content: var(--#{$prefix}datepicker-day-justify-content);
-
-  &.holiday {
-    @if meta.variable-exists($name: 'df-initialBranding') and $df-initialBranding {
-      // important is needed because of the view encapsulation of ng-bootstrap
-      color: #{shades-css-var('orange', 'bg-color', true)} !important;
-      background-color: #{shades-css-var('orange', 'bg-color')} !important;
-    } @else if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      @extend %dot-highlight;
-      color: #{shades-css-var('white', 'bg-color', true)} !important;
-      background-color: #{shades-css-var('white', 'bg-color')} !important;
-      // TODO: add the disabled state?
-    }
-  }
-
-  &.df-datepicker-date-disabled {
-    color: var(--#{$prefix}datepicker-day-disabled-color);
-    opacity: var(--#{$prefix}datepicker-day-disabled-opacity);
-    cursor: var(--#{$prefix}datepicker-day-disabled-cursor);
-  }
-
-  &.df-datepicker-date-selected {
-    background-color: var(--#{$prefix}datepicker-day-active-bg-color);
-    color: var(--#{$prefix}datepicker-day-active-color);
-    font-weight: var(--#{$prefix}datepicker-day-font-weight);
-  }
-
-  &.df-datepicker-date-focused,
-  .ngb-dp-arrow button:focus {
-    border: 0px none;
-    position: relative;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
-      bottom: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
-      left: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
-      right: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
-      border-radius: calc(
-        var(--#{$prefix}datepicker-day-border-radius) + var(--#{$prefix}datepicker-day-focus-outline-width)
-      );
-      border: var(--#{$prefix}datepicker-day-focus-border);
-    }
-  }
-
-  &:not(.df-datepicker-date-disabled):not(.df-datepicker-date-selected):hover {
-    background-color: var(--#{$prefix}datepicker-day-hover-bg-color);
-    color: var(--#{$prefix}datepicker-day-hover-color);
-    text-decoration: var(--#{$prefix}datepicker-day-hover-text-decoration);
-  }
-
-  &.df-datepicker-date-from {
-    border-radius: var(--#{$prefix}datepicker-day-border-radius) 0 0 var(--#{$prefix}datepicker-day-border-radius);
-
-    &.df-datepicker-date-focused:after {
-      border-radius: var(--#{$prefix}datepicker-day-border-radius) 0 0 var(--#{$prefix}datepicker-day-border-radius);
-    }
-  }
-
-  &.df-datepicker-date-to {
-    border-radius: 0 var(--#{$prefix}datepicker-day-border-radius) var(--#{$prefix}datepicker-day-border-radius) 0;
-
-    &.df-datepicker-date-focused:after {
-      border-radius: 0 var(--#{$prefix}datepicker-day-border-radius) var(--#{$prefix}datepicker-day-border-radius) 0;
-    }
-  }
-
-  &.df-datepicker-date-between {
-    border-radius: 0;
-
-    &.df-datepicker-date-focused:after {
-      border-radius: 0;
-    }
-
-    background-color: var(--#{$prefix}datepicker-day-range-bg-color);
-    color: var(--#{$prefix}datepicker-day-range-color);
-    font-weight: var(--#{$prefix}datepicker-day-font-weight);
-  }
-}
-
-.ngb-dp-today .df-datepicker-date {
-  @if meta.variable-exists($name: 'df-initialBranding') and $df-initialBranding {
-    font-weight: var(--#{$prefix}datepicker-day-font-weight);
-    @extend %dot-highlight;
-  } @else if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    border: var(--#{$prefix}datepicker-today-border);
-  }
-}
-
-.df-datepicker-range-dropdown {
-  padding: var(--#{$prefix}datepicker-range-dropdown-padding);
-  border: var(--#{$prefix}datepicker-range-dropdown-border);
-}
-
-.df-input-datepicker-range {
-  --#{$prefix}input-datepicker-range-border: #{$df-input-datepicker-range-border};
-  --#{$prefix}input-datepicker-range-white-space: #{$df-input-datepicker-range-white-space};
-  --#{$prefix}input-datepicker-range-padding: #{$df-input-datepicker-range-padding};
-  --#{$prefix}input-datepicker-range-after-display: #{$df-input-datepicker-range-after-display};
-
-  &.df-focused {
-    --#{$prefix}box-shadow-color: #{$df-input-datepicker-range-box-shadow-color};
-    border: var(--#{$prefix}input-datepicker-range-border);
-
-    .input-group {
-      --#{$prefix}iwi-dpr-focus-border: #{$df-input-datepicker-range-focus-border};
-      box-shadow: none !important;
-    }
-  }
-
-  .dropdown-toggle {
-    white-space: var(--#{$prefix}input-datepicker-range-white-space);
-    padding: var(--#{$prefix}input-datepicker-range-padding) !important;
-
-    &:after {
-      // TODO remove this when it is possible to remove the arrow from ng-bootstrap feature
-      display: var(--#{$prefix}input-datepicker-range-after-display);
-    }
-  }
-}

package/styles/scss/components/datepicker/_datepicker.variables.scss

@@ -1,64 +0,0 @@
-@use 'sass:map';
-
-$df-datepicker-padding-deactivate: 0 !default;
-$df-datepicker-padding: 1rem !default;
-$df-datepicker-box-shadow: var(--#{$prefix}box-shadow) !default;
-$df-datepicker-radius: 0.25rem !default;
-$df-datepicker-navigation-arrow-justify-contents: space-between !default;
-$df-datepicker-navigation-arrow-flex: 0 1 auto !default;
-$df-datepicker-navigation-literal-font-size: map.get($df-size-ratios, 'lg') * 1rem !default;
-$df-datepicker-navigation-literal-font-weight: $df-font-weight-semi-bold !default;
-$df-datepicker-navigation-arrow-color: $gray-600 !default;
-$df-datepicker-navigation-literal-flex: 1 0 auto !default;
-$df-datepicker-weekday-font-style: normal !default;
-$df-datepicker-weekday-font-size: 90% !default;
-$df-datepicker-weekday-text-transform: uppercase !default;
-$df-datepicker-day-side: 100% !default;
-$df-datepicker-day-font-weight: bold !default;
-$df-datepicker-day-align-items: center !default;
-$df-datepicker-day-display: flex !default;
-$df-datepicker-day-size: 2.25rem !default;
-$df-datepicker-day-justify-content: center !default;
-$df-datepicker-day-border-radius: 0.125rem !default;
-$df-datepicker-day-text-align: center !default;
-$df-datepicker-day-focus-outline: var(--#{$prefix}focus-outline) !default;
-$df-datepicker-day-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-datepicker-day-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
-$df-datepicker-day-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-datepicker-day-active-bg-color: shades-css-var('primary', 'bg-color') !default;
-$df-datepicker-day-active-color: shades-css-var('primary', 'bg-color', true) !default;
-$df-datepicker-day-hover-bg-color: $df-hover-bg-color !default;
-$df-datepicker-day-hover-color: color-contrast($df-datepicker-day-hover-bg-color) !default;
-$df-datepicker-day-hover-text-decoration: underline !default; // why underline here add the reason with UX
-$df-datepicker-day-focus-outline-width: 0.2rem !default;
-$df-datepicker-day-focus-border-width: $df-datepicker-day-focus-outline-width + 0.05rem !default;
-$df-datepicker-day-focus-border-color: rgba(to-rgb($input-focus-border-color), 0.5) !default;
-$df-datepicker-day-focus-border: $df-datepicker-day-focus-border-width solid $df-datepicker-day-focus-border-color !default;
-$df-datepicker-day-focus-active-z-index: 0 !default;
-$df-datepicker-day-focus-active-border-color: rgba($white, 0.5) !default;
-$df-datepicker-day-focus-active-border-z-index: -1 !default;
-$df-datepicker-day-range-bg-color: $df-primary-lighten-60 !default;
-$df-datepicker-day-range-color: var(--#{prefix}cloud-100-color) !default;
-$df-datepicker-input-invalid-color: $danger !default;
-$df-datepicker-input-invalid-z-index: 3 !default;
-$df-datepicker-menu-border: $border-width solid $border-color !default;
-// TODO open an issue in ng-bootstrap about the --bs-border-color not correctly prefixed
-// that we could use to change the color of the border
-$df-datepicker-panel-border: $df-datepicker-menu-border !default;
-$df-datepicker-range-dropdown-padding: 0 !default;
-$df-datepicker-range-dropdown-border: none !default;
-$df-input-datepicker-range-border: none !default;
-$df-input-datepicker-range-box-shadow-color: inherit !default;
-$df-input-datepicker-range-focus-border: $df-focused-border !default;
-$df-input-datepicker-range-white-space: initial !default;
-$df-input-datepicker-range-padding: 0 !default;
-$df-input-datepicker-range-after-display: none !default;
-$df-datepicker-arrow-focus-outline: var(--#{$prefix}focus-outline) !default;
-$df-datepicker-arrow-width: 2.25rem !default;
-$df-datepicker-arrow-height: $df-datepicker-arrow-width !default;
-$df-datepicker-arrow-border-radius: 50% !default;
-$df-datepicker-arrow-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-datepicker-focused-box-shadow: $df-focused-box-shadow !default;
-$df-datepicker-focused-outline: var(--#{$prefix}focus-outline) !default;
-$df-datepicker-border-radius: 0.25rem !default; // ng-bootstrap default
-$df-datepicker-today-border: none !default;

package/styles/scss/components/dropdown/_dropdown.mixins.scss

@@ -1,8 +0,0 @@
-@mixin df-dropdown-toggle($up, $down) {
-  &#{$up} .dropdown-toggle:after {
-    content: '\f077'; // fa-chevron-up
-  }
-  &#{$down} .dropdown-toggle:after {
-    content: '\f078'; // fa-chevron-down
-  }
-}

package/styles/scss/components/dropdown/_dropdown.scss

@@ -1,178 +0,0 @@
-@use 'sass:meta';
-
-@import 'dropdown.mixins';
-
-.dropdown,
-body {
-  //Dropdown is default
-  @include df-dropdown-toggle('.show', '');
-}
-
-.dropup {
-  @include df-dropdown-toggle('', '.show');
-}
-
-body,
-.dropdown,
-.dropup {
-  --#{$prefix}dropdown-separator-margin-y: #{$df-dropdown-separator-margin-y};
-  --#{$prefix}dropdown-separator-color: #{$df-dropdown-separator-color};
-  --#{$prefix}dropdown-item-hover-text-decoration: #{$df-dropdown-item-hover-text-decoration};
-  --#{$prefix}dropdown-item-focus-text-decoration: #{$df-dropdown-item-focus-text-decoration};
-  --#{$prefix}dropdown-item-focus-border-radius: #{$df-dropdown-item-focus-border-radius};
-  --#{$prefix}dropdown-item-border-width: #{$df-dropdown-item-border-width};
-  --#{$prefix}dropdown-item-focus-bg: #{$df-dropdown-item-focus-bg};
-  --#{$prefix}dropdown-toggle-font: #{$df-dropdown-toggle-font};
-  --#{$prefix}dropdown-toggle-font-weight: #{$df-dropdown-toggle-font-weight};
-  --#{$prefix}dropdown-toggle-padding: #{$df-dropdown-toggle-padding};
-  --#{$prefix}dropdown-toggle-split-padding-x: #{$df-dropdown-toggle-split-padding-x};
-  --#{$prefix}dropdown-toggle-margin: #{$df-dropdown-toggle-margin};
-  --#{$prefix}dropdown-toggle-line-height: #{$df-dropdown-toggle-line-height};
-  --#{$prefix}dropdown-toggle-border-color-primary: #{$df-dropdown-toggle-border-color-primary};
-  --#{$prefix}dropdown-disabled-pointer: #{$df-dropdown-disabled-pointer};
-  --#{$prefix}dropdown-disabled-color: #{$df-dropdown-disabled-color};
-
-  .btn-primary.dropdown-toggle-split {
-    border-inline-start-color: var(--#{$prefix}dropdown-toggle-border-color-primary);
-  }
-
-  .show > .btn:not(:disabled):not(.disabled).dropdown-toggle:not(.nav-link) {
-    &:focus-visible {
-      --#{$prefix}box-shadow-color: var(--#{$prefix}btn-active-bg);
-      --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-active-bg);
-    }
-
-    &:hover:not(.btn-outline-primary) {
-      --#{$prefix}btn-active-bg: var(--#{$prefix}btn-hover-bg);
-      --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-bg);
-    }
-
-    &.btn-outline-primary {
-      --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-color);
-
-      &:hover {
-        --#{$prefix}btn-active-bg: var(--#{$prefix}btn-hover-bg);
-        --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-border-color);
-        --#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color);
-      }
-
-      &:focus-visible {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-hover-color);
-        --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-hover-color);
-      }
-    }
-  }
-
-  .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
-    padding-inline-end: var(--#{$prefix}dropdown-toggle-padding);
-
-    &:after {
-      font-family: $df-font-awesome-font-family;
-      border: none;
-      margin-inline-start: var(--#{$prefix}dropdown-toggle-margin);
-      line-height: var(--#{$prefix}dropdown-toggle-line-height); //Fix Chrome bug
-      font-weight: var(--#{$prefix}dropdown-toggle-font-weight); // Fix IE11 bug
-    }
-
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      &.btn-sm {
-        --#{$prefix}dropdown-toggle-margin: var(--#{$prefix}spacing-2);
-      }
-    }
-
-    & > [class*='icon-']:before {
-      margin-inline-end: var(--#{$prefix}dropdown-toggle-margin);
-    }
-  }
-
-  .dropdown-toggle.df-standalone-dropdown-toggle:after {
-    content: none; //remove chevron icon
-  }
-
-  .dropdown-toggle-split {
-    --#{$prefix}dropdown-toggle-padding: var(--#{$prefix}dropdown-toggle-split-padding-x);
-    padding-left: var(--#{$prefix}dropdown-toggle-split-padding-x);
-    padding-right: var(--#{$prefix}dropdown-toggle-split-padding-x);
-
-    &:after {
-      --#{$prefix}dropdown-toggle-margin: 0;
-    }
-  }
-}
-
-.dropdown-menu {
-  text-align: start;
-
-  hr {
-    margin-top: var(--#{$prefix}dropdown-separator-margin-y);
-    margin-bottom: var(--#{$prefix}dropdown-separator-margin-y);
-    border-color: var(--#{$prefix}dropdown-separator-color);
-  }
-
-  box-shadow: $df-box-shadow;
-}
-
-.dropdown-item {
-  border: var(--#{$prefix}dropdown-item-border-width) solid transparent;
-
-  &.active {
-    font-weight: $df-dropdown-item-active-font-weight;
-  }
-
-  &:focus-visible,
-  &.focus {
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'bg-subtle-active-color', true)};
-    }
-    box-shadow: $df-dropdown-item-focus-box-shadow;
-    border: $df-dropdown-item-focused-border;
-    outline: var(--#{$prefix}focus-outline);
-    border-radius: var(--#{$prefix}dropdown-item-focus-border-radius);
-
-    &:not(:hover) {
-      text-decoration: var(--#{$prefix}dropdown-item-focus-text-decoration);
-      background-color: var(--#{$prefix}dropdown-item-focus-bg);
-    }
-
-    &.active,
-    &:active {
-      background-color: var(--#{$prefix}dropdown-link-active-bg);
-      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}dropdown-link-active-bg);
-    }
-  }
-
-  &:hover {
-    text-decoration: var(--#{$prefix}dropdown-item-hover-text-decoration);
-    --#{$prefix}inner-box-shadow-color: var(--#{$prefix}dropdown-link-hover-bg);
-  }
-
-  &.disabled,
-  &:disabled {
-    cursor: var(--#{$prefix}dropdown-disabled-pointer);
-    color: var(--#{$prefix}dropdown-disabled-color);
-    text-decoration: none;
-    pointer-events: auto; // override of ng-bootstrap
-  }
-}
-
-//Redefine bootstrap dropdown-item styles to override links behaviour
-a.dropdown-item {
-  &,
-  &:hover {
-    color: var(--#{$prefix}dropdown-link-color);
-    border-bottom-width: var(--#{$prefix}dropdown-item-border-width);
-  }
-
-  &:hover {
-    background-color: var(--#{$prefix}dropdown-link-hover-bg);
-  }
-}
-
-// Flag Angular
-// This style is needed due to a drop-start feature of bootstrap where the first child of the
-// btn-group with dropdown-toggle-split class has no rounded corners
-.btn-group.dropdown[ngbdropdown] {
-  .dropdown-toggle-split {
-    @include border-end-radius($btn-border-radius);
-  }
-}

package/styles/scss/components/dropdown/_dropdown.variables.scss

@@ -1,24 +0,0 @@
-@use 'sass:color';
-
-$df-dropdown-separator-margin-y: 0.5rem !default;
-$df-dropdown-separator-color: var(--#{$prefix}gray-500) !default; // TODO aligned with separator ?
-$df-dropdown-item-hover-text-decoration: unset !default;
-$df-dropdown-item-focus-text-decoration: $df-dropdown-item-hover-text-decoration !default;
-$df-dropdown-item-focus-border-radius: 0 !default;
-$df-dropdown-item-border-width: $border-width !default;
-$df-dropdown-item-focus-bg: var(--#{$prefix}gray-100) !default;
-$df-dropdown-toggle-font: Font Awesome 6 Pro !default;
-$df-dropdown-toggle-font-weight: $font-weight-base !default;
-$df-dropdown-toggle-padding: 0.75em !default;
-$df-dropdown-toggle-split-padding-x: 0.5em !default;
-$df-dropdown-toggle-margin: $df-dropdown-toggle-padding !default;
-$df-dropdown-toggle-line-height: 1rem !default;
-$df-dropdown-toggle-border-color-primary: color.adjust(
-  color.adjust($primary, $saturation: -44.17%),
-  $lightness: 31.96%
-) !default;
-$df-dropdown-disabled-pointer: var(--#{$prefix}disabled-cursor) !default;
-$df-dropdown-disabled-color: $df-btn-outline-disabled-text-color !default;
-$df-dropdown-item-focused-border: $df-focused-border !default;
-$df-dropdown-item-focus-box-shadow: $df-focused-box-shadow !default;
-$df-dropdown-item-active-font-weight: $font-weight-normal !default;

package/styles/scss/components/fieldset/_fieldset.scss

@@ -1,8 +0,0 @@
-fieldset {
-  --#{$prefix}fieldset-legend-font-size: #{$df-fieldset-legend-font-size};
-  --#{$prefix}fieldset-legend-font-weight: #{$df-fieldset-legend-font-weight};
-  > legend {
-    font-weight: var(--#{$prefix}fieldset-legend-font-weight);
-    font-size: var(--#{$prefix}fieldset-legend-font-size);
-  }
-}

package/styles/scss/components/fieldset/_fieldset.variables.scss

@@ -1,2 +0,0 @@
-$df-fieldset-legend-font-size: $font-size-base !default;
-$df-fieldset-legend-font-weight: $df-font-weight-semi-bold !default;