@design-factory/design-factory 15.2.0

package/styles/scss/components/card/_card.variables.scss

@@ -0,0 +1,22 @@
+$df-card-focusable-border: $border-width solid $border-color !default;
+$df-card-focusable-border-hover: $border-width solid $primary !default;
+$df-card-focusable-border-active: $border-width solid $dark-primary !default;
+$df-card-focusable-border-radius: $border-radius-sm !default;
+$df-card-focusable-color: $body-color !default; // todo is it linked to body-color ?
+$df-card-focusable-hover-color: $body-color !default;
+$df-card-focusable-background: transparent !default;
+$df-card-focusable-disabled-color: $df-disabled-color !default;
+$df-card-focusable-disabled-opacity: $df-disabled-opacity !default;
+$df-card-focusable-disabled-cursor: $df-disabled-cursor !default;
+$df-card-focusable-disabled-background: $df-disabled-bg-color !default;
+$df-card-focusable-font-weight: $font-weight-normal !default; 
+$df-card-selected-bg-color: df-getBGColor('info') !default;
+$df-card-selected-border-color: $primary !default;
+$df-card-selected-hover-bg-color: df-getBGSecondaryActiveColor('primary') !default;
+$df-accordion-card-padding-start: 0.3125rem !default;
+$df-accordion-card-end-padding-end: $df-accordion-card-padding-start !default;
+$df-accordion-card-end-padding-start: $accordion-padding-x !default;
+$df-accordion-card-background-color: $body-bg !default;
+$df-accordion-card-last-border-bottom-width: 0px !default;
+$df-accordion-card-last-body-border-top: $border-width $border-style $gray-200 !default;
+$df-accordion-between-card-border-radius: 0px !default;

package/styles/scss/components/carousel/_carousel.scss

@@ -0,0 +1,52 @@
+.carousel {
+  &:focus {
+    outline: $df-carousel-outline;
+    box-shadow: $df-focused-box-shadow;
+  }
+  &.df-carousel-isFirst {
+    .carousel-control-prev-icon {
+      display: none;
+    }
+    .carousel-control-prev {
+      cursor: initial;
+    }
+  }
+  &.df-carousel-isLast {
+    .carousel-control-next-icon {
+      display: none;
+      cursor: $df-disabled-cursor;
+    }
+    .carousel-control-next {
+      cursor: initial;
+    }
+  }
+  .carousel-control-next-icon {
+    //add
+    border-radius: $df-carousel-indicator-border-radius;
+    background-color: $df-carousel-indicator-bg-color;
+    &:hover {
+      background-color: $df-carousel-indicator-bg-color-hover;
+    }
+  }
+  .carousel-control-prev-icon {
+    border-radius: $df-carousel-indicator-border-radius;
+    background-color: $df-carousel-indicator-bg-color;
+    &:hover {
+      background-color: $df-carousel-indicator-bg-color-hover;
+    }
+  }
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    background-size: 50% 50%;
+  }
+  
+  .carousel-caption {
+    background-color: $df-carousel-indicator-bg-color; // add
+    bottom: $df-carousel-caption-bottom; // override
+    padding-bottom: $df-carousel-caption-padding-bottom; // override
+    padding-top: $df-carousel-caption-padding-top; // override as no variable is set
+  }
+  .carousel-indicators {
+    bottom: $df-carousel-indicator-bottom; // override
+  }
+}

package/styles/scss/components/carousel/_carousel.variables.scss

@@ -0,0 +1,11 @@
+@use 'sass:color';
+
+$df-carousel-indicator-bg-color: color.adjust($black, $alpha: -0.4) !default;
+$df-carousel-indicator-bg-color-hover: $black !default;
+$df-carousel-indicator-border-radius: 50% !default;
+$df-carousel-outline: none !default;
+$df-carousel-indicator-bottom: -$carousel-indicator-hit-area-height !default;
+$df-carousel-caption-bottom: 0 !default; // we remove 20px here from BS
+// default value is 20 + 20 of the caption bottom - the value we decrease the position of the indicators
+$df-carousel-caption-padding-bottom: 20px + 20px + $df-carousel-indicator-bottom !default;
+$df-carousel-caption-padding-top: 0.75rem !default;

package/styles/scss/components/checkbox/_checkbox.scss

@@ -0,0 +1,37 @@
+@use 'sass:math';
+
+.form-check {
+  .form-check-input {
+    &:not([disabled]):not(.disabled) {
+      cursor:pointer;
+    }
+
+    & ~ .invalid-feedback {
+      @include rtl {
+        margin-right: math.div($form-check-padding-start, $form-feedback-font-size) * -1em;
+      }
+      @include ltr {
+        margin-left: math.div($form-check-padding-start, $form-feedback-font-size) * -1em;
+      }
+    }
+
+    &.disabled,
+    &[disabled] {
+      cursor: $df-checkbox-disabled-cursor;
+      pointer-events: auto;
+      border-color: $df-checkbox-disabled-border-color;
+      &:not([checked]) {
+        background-color: $df-checkbox-disabled-background-color;
+      }
+      &:checked, &:indeterminate {
+        &[type="checkbox"] {
+          background-color: $df-checkbox-checked-disabled-background-color;
+        }
+      }
+      & ~ .form-check-label {
+        color: $df-checkbox-checked-disabled-background-color;
+        cursor: $df-checkbox-disabled-cursor;
+      }
+    }
+  }
+}

package/styles/scss/components/checkbox/_checkbox.variables.scss

@@ -0,0 +1,6 @@
+$df-checkbox-disabled-background-color: $df-disabled-bg-color !default;
+$df-checkbox-checked-disabled-background-color: $gray-300 !default;
+$df-checkbox-disabled-border-color: $gray-300 !default;
+$df-checkbox-disabled-cursor: $df-disabled-cursor !default;
+$df-checkbox-radio-margin-bottom: 0.5rem !default;
+$df-checkbox-radio-margin-end: 0.75rem !default;

package/styles/scss/components/collapse/_collapse.scss

@@ -0,0 +1,35 @@
+@import '../link/link.mixins';
+
+a.df-collapse[aria-disabled='true'] {
+  color: $df-collapse-disabled-color;
+  display: $df-collapse-disabled-display;
+  cursor: $df-collapse-disabled-cursor;
+  text-decoration: $df-collapse-disabled-text-decoration;
+
+  // Links styles override
+  border: none;
+}
+
+// Links styles override
+a.df-collapse {
+  display: inline-flex;
+  align-items: center;
+
+  &:link,
+  &:visited {
+    color: $df-collapse-link-color;
+    text-decoration: $df-collapse-link-decoration;
+    border-bottom: $df-collapse-hover-border-bottom transparent;
+  }
+
+  &:hover,
+  &:active,
+  &:visited:hover {
+    @include df-link();
+  }
+
+  [class^='icon-'],
+  [class*=' icon-'] {
+    vertical-align: inherit;
+  }
+}

package/styles/scss/components/collapse/_collapse.variables.scss

@@ -0,0 +1,7 @@
+$df-collapse-link-color: $df-link-color !default;
+$df-collapse-link-decoration: $link-decoration !default;
+$df-collapse-disabled-color: $df-disabled-color !default;
+$df-collapse-disabled-display: inline-block !default;
+$df-collapse-disabled-cursor: $df-disabled-cursor !default;
+$df-collapse-disabled-text-decoration: none !default;
+$df-collapse-hover-border-bottom: $df-link-hover-border-bottom-width solid !default;

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

@@ -0,0 +1,251 @@
+// Work around due to the use of a namespace design-factory
+.form-inline .form-select {
+  width: 100%;
+}
+
+.ngb-dp-navigation-select .form-select {
+  @include ltr {
+    padding-left: 0.5rem;
+    padding-right: 0;
+  }
+  @include rtl {
+    background-position: left 0.25rem center;
+    padding-left: 0;
+    padding-right: 0.5rem;
+  }
+}
+
+.ngb-dp-arrow {
+  justify-content: $df-datepicker-navigation-arrow-justify-contents;
+
+  .ngb-dp-arrow-btn {
+    padding-right: 0;
+    padding-left: 0;
+    min-width: $df-datepicker-arrow-width;
+    height: $df-datepicker-arrow-height;
+    border-radius: $df-datepicker-arrow-border-radius;
+    @extend %df-icon-style;
+    &:focus {
+      outline: $df-carousel-outline;
+      box-shadow: $df-focused-box-shadow;
+    }
+    text-decoration: none;
+    &:not(:disabled):not(.disabled):active {
+      text-decoration: none;
+      color: $df-font-icon-color;
+    }
+    &:disabled,
+    &.disabled {
+      color: $df-datepicker-arrow-disabled-color;
+    }
+  }
+
+  &.ngb-dp-arrow-prev {
+    .ngb-dp-arrow-btn {
+      @extend .icon-chevron-left;
+      @include rtl {
+        @extend .icon-chevron-right;
+      }
+    }
+  }
+
+  &.ngb-dp-arrow-next {
+    .ngb-dp-arrow-btn {
+      @extend .icon-chevron-right;
+      @include rtl {
+        @extend .icon-chevron-left;
+      }
+    }
+  }
+
+  .ngb-dp-navigation-chevron {
+    display: none !important;
+  }
+}
+
+// stylelint-disable-next-line selector-type-no-unknown
+ngb-datepicker {
+  border: $df-datepicker-panel-border;
+  padding: $df-datepicker-padding;
+  &.dropdown-menu.show {
+    padding: $df-datepicker-padding;
+    box-shadow: $df-datepicker-box-shadow;
+    border: $df-datepicker-menu-border;
+    border-radius: $df-datepicker-radius;
+  }
+
+  .ngb-dp- {
+    &header {
+      background-color: inherit;
+      padding-top: $df-datepicker-padding-deactivate;
+    }
+    &month {
+      &:first-child .ngb-dp-week {
+        @include ltr {
+          padding-left: $df-datepicker-padding-deactivate;
+        }
+        @include rtl {
+          padding-right: $df-datepicker-padding-deactivate;
+        }
+      }
+      &:last-child .ngb-dp-week {
+        @include ltr {
+          padding-right: $df-datepicker-padding-deactivate;
+        }
+        @include rtl {
+          padding-left: $df-datepicker-padding-deactivate;
+        }
+      }
+      .ngb-dp-week:last-child {
+        padding-bottom: $df-datepicker-padding-deactivate;
+      }
+      &-name {
+        background-color: inherit;
+        font-size: $df-datepicker-navigation-literal-font-size;
+        font-weight: $df-datepicker-navigation-literal-font-weight;
+        flex: $df-datepicker-navigation-literal-flex;
+      }
+    }
+
+    &arrow {
+      flex: $df-datepicker-navigation-arrow-flex;
+      width: $df-datepicker-day-size;
+      height: $df-datepicker-day-size;
+      button.btn {
+        color: $df-datepicker-navigation-arrow-color;
+      }
+    }
+
+    &weekday {
+      color: inherit;
+      width: $df-datepicker-day-side;
+      font-style: $df-datepicker-weekday-font-style;
+      font-size: $df-datepicker-weekday-font-size;
+      text-transform: $df-datepicker-weekday-text-transform;
+      &s {
+        background-color: inherit !important; //TODO: remove it when not needed (probably next ng-bootstrap upgrade)
+        border: none;
+      }
+    }
+
+    &week-number {
+      min-width: $df-datepicker-day-size;
+    }
+
+    &day {
+      width: $df-datepicker-day-side;
+      height: $df-datepicker-day-side;
+      outline: none;
+      &.disabled {
+        // override the default look
+        cursor: initial;
+        pointer-events: initial;
+      }
+    }
+  }
+}
+.df-datepicker-date {
+  height: $df-datepicker-day-size;
+  width: $df-datepicker-day-size;
+  text-align: $df-datepicker-day-text-align;
+  border-radius: $df-datepicker-day-border-radius;
+  display: $df-datepicker-day-display;
+  align-items: $df-datepicker-day-align-items;
+  justify-content: $df-datepicker-day-justify-content;
+  &.df-datepicker-date- {
+    &disabled {
+      color: $df-datepicker-day-disabled-color;
+      opacity: $df-datepicker-day-disabled-opacity;
+      cursor: $df-datepicker-day-disabled-cursor;
+    }
+    &selected {
+      background-color: $df-datepicker-day-active-bg-color;
+      color: $df-datepicker-day-active-color;
+      font-weight: $df-datepicker-day-bold;
+    }
+    &focused,
+    .ngb-dp-arrow button:focus {
+      border: 0px none;
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -$df-datepicker-day-focus-outline-width;
+        bottom: -$df-datepicker-day-focus-outline-width;
+        left: -$df-datepicker-day-focus-outline-width;
+        right: -$df-datepicker-day-focus-outline-width;
+        border-radius: $df-datepicker-day-border-radius + $df-datepicker-day-focus-outline-width;
+        border: $df-datepicker-day-focus-border;
+      }
+    }
+  }
+  &:not(.df-datepicker-date-disabled):not(.df-datepicker-date-selected):hover {
+    background-color: $df-datepicker-day-hover-color;
+    color: color-contrast($df-datepicker-day-hover-color);
+    text-decoration: $df-datepicker-day-hover-text-decoration;
+  }
+  &.df-datepicker-date-from {
+    border-radius: $df-datepicker-day-border-radius 0 0 $df-datepicker-day-border-radius;
+    &.df-datepicker-date-focused:after {
+      border-radius: $df-datepicker-day-border-radius 0 0 $df-datepicker-day-border-radius;
+    }
+  }
+  &.df-datepicker-date-to {
+    border-radius: 0 $df-datepicker-day-border-radius $df-datepicker-day-border-radius 0;
+    &.df-datepicker-date-focused:after {
+      border-radius: 0 $df-datepicker-day-border-radius $df-datepicker-day-border-radius 0;
+    }
+  }
+  &.df-datepicker-date-between {
+    border-radius: 0;
+    &.df-datepicker-date-focused:after {
+      border-radius: 0;
+    }
+    background-color: $df-datepicker-day-range-background-color;
+    color: $df-datepicker-day-range-color;
+    font-weight: $df-datepicker-day-bold;
+  }
+}
+
+.ngb-dp-today .df-datepicker-date {
+  font-weight: $df-datepicker-day-bold;
+  position: relative;
+  &:before {
+    content: '.';
+    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%;
+  }
+}
+
+.df-datepicker-range-dropdown {
+  padding: $df-datepicker-range-dropdown-padding;
+  border: $df-datepicker-range-dropdown-border;
+}
+
+.df-input-datepicker-range {
+  &.df-focused {
+    border: $df-input-datepicker-range-border;
+  }
+  .dropdown-toggle {
+    white-space: $df-input-datepicker-range-white-space;
+    padding: $df-input-datepicker-range-padding;
+    &:after {
+      // TODO remove this when it is possible to remove the arrow from ng-bootstrap feature
+      display: $df-input-datepicker-range-after-display;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+@use 'sass:map';
+
+$df-datepicker-padding-deactivate: 0 !default;
+$df-datepicker-padding: 1rem !default;
+$df-datepicker-box-shadow: $df-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-day-side: 100% !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-bold: 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-disabled-color: $df-disabled-color !default;
+$df-datepicker-day-disabled-opacity: $df-disabled-opacity !default;
+$df-datepicker-day-disabled-cursor: $df-disabled-cursor !default;
+$df-datepicker-day-active-bg-color: $primary !default;
+$df-datepicker-day-active-color: color-contrast($df-datepicker-day-active-bg-color) !default;
+$df-datepicker-day-hover-color: $df-hover-bg-color !default;
+$df-datepicker-day-hover-text-decoration: underline !default;
+$df-datepicker-day-focus-outline-width: 0.2rem !default;
+$df-datepicker-day-focus-border: ($df-datepicker-day-focus-outline-width + 0.05rem) solid
+  rgba($input-focus-border-color, 0.5) !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-background-color: $df-primary-lighten-60 !default;
+$df-datepicker-day-range-color: $primary !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;
+$df-datepicker-panel-border: $df-datepicker-menu-border !important !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-white-space: initial !default;
+$df-input-datepicker-range-padding: 0 !important !default;
+$df-input-datepicker-range-after-display: none !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: $df-disabled-color !default;

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

@@ -0,0 +1,26 @@
+@mixin df-dropdown-toggle($up, $down) {
+  &#{$up} .dropdown-toggle:after {
+    content: '\ea38'; // icon-chevron-up
+  }
+  &#{$down} .dropdown-toggle:after {
+    content: '\ea31'; // icon-chevron-down
+  }
+}
+
+@mixin df-dropdown-orientation($ltr-right, $ltr-left) {
+  .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
+    padding-#{$ltr-right}: $df-dropdown-toggle-padding;
+    &:after {
+      margin-#{$ltr-left}: $df-dropdown-toggle-margin;
+    }
+    & > [class*='icon-']:before {
+      margin-#{$ltr-right}: $df-dropdown-toggle-margin;
+    }
+  }
+  .dropdown-menu {
+    text-align: #{$ltr-left};
+  }
+  .btn-primary.dropdown-toggle-split {
+    border-#{$ltr-left}-color: $df-dropdown-toggle-border-color-primary;
+  }
+}

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

@@ -0,0 +1,81 @@
+@import 'dropdown.mixins';
+
+.dropdown,
+body {
+  //Dropdown is default
+  @include df-dropdown-toggle('.show', '');
+}
+.dropup {
+  @include df-dropdown-toggle('', '.show');
+}
+
+body,
+.dropdown,
+.dropup {
+  @include ltr {
+    @include df-dropdown-orientation('right', 'left');
+  }
+  @include rtl {
+    @include df-dropdown-orientation('left', 'right');
+  }
+  .dropdown-toggle {
+    &:after {
+      border: none;
+      font-family: $df-dropdown-toggle-font;
+      line-height: $df-dropdown-toggle-line-height; //Fix Chrome bug
+      font-weight: $df-dropdown-toggle-font-weight; // Fix IE11 bug
+    }
+    &.df-standalone-dropdown-toggle:after{
+      content: none; //remove chevron icon
+    }
+  }
+  .dropdown-toggle-split.dropdown-toggle-split {
+    padding-left: $df-dropdown-toggle-split-padding-x;
+    padding-right: $df-dropdown-toggle-split-padding-x;
+    &:after {
+      margin: 0;
+    }
+  }
+}
+
+.dropdown-menu {
+  hr {
+    margin-top: $df-dropdown-separator-margin-y;
+    margin-bottom: $df-dropdown-separator-margin-y;
+    border-color: $df-dropdown-separator-color;
+  }
+  box-shadow: $df-box-shadow;
+}
+.dropdown-item {
+  border: $df-dropdown-item-border-width solid transparent;
+  &:focus,
+  &.focus {
+    @extend .df-focused;
+    border-radius: $df-dropdown-item-focus-border-radius;
+    text-decoration: $df-dropdown-item-hover-text-decoration;
+  }
+  &:hover {
+    text-decoration: $df-dropdown-item-hover-text-decoration;
+  }
+  &.disabled,
+  &:disabled {
+    cursor: $df-dropdown-disabled-pointer;
+    color: $df-dropdown-disabled-color;
+    text-decoration: none;
+    pointer-events: auto; // override of ng-bootstrap
+  }
+  &:not(:disabled):not(.disabled).active {
+    background-color: $df-dropdown-item-active-background-color;
+    color: $df-dropdown-item-active-color;
+  }
+}
+
+// This style is needed due to a discrepancy between ngbootstrap and bootstrap split dropdown
+// Only LTR is needed as the RTL case is already properly handled by the global override
+.btn-group.dropdown[ngbdropdown] {
+  .dropdown-toggle-split.dropdown-toggle-split {
+    @include ltr {
+      @include border-end-radius($btn-border-radius);
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+@use 'sass:color';
+
+$df-dropdown-separator-margin-y: 0.5rem !default;
+$df-dropdown-separator-color: $gray-500 !default;
+$df-dropdown-item-active-color: $white !default;
+$df-dropdown-item-active-background-color: $primary !default;
+$df-dropdown-item-hover-text-decoration: underline !default;
+$df-dropdown-item-focus-border-radius: 0 !default;
+$df-dropdown-item-border-width: $border-width !default;
+$df-dropdown-toggle-font: Design-Factory-icon !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: $df-disabled-cursor !default;
+$df-dropdown-disabled-color: $df-btn-outline-disabled-text-color !default;

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

@@ -0,0 +1,6 @@
+fieldset {
+  > legend {
+    font-weight: $df-fieldset-legent-font-weight;
+    font-size: $df-fieldset-legend-font-size;
+  }
+}

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

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