@design-factory/design-factory 15.2.0

package/styles/scss/components/tabs/_tabs.scss

@@ -0,0 +1,123 @@
+.nav-tabs {
+  .nav-link {
+    color: $df-tabs-color; // add (override link color todo why?)
+    border-bottom: $df-tabs-border-bottom; // add
+    border-top: $df-tabs-border-top; // add
+    border-left: $df-tabs-border-left; // add
+    border-right: $df-tabs-border-right; // add
+    padding-top: $df-tabs-padding-y; // add
+    padding-bottom: $df-tabs-padding-y; // add
+
+    &:hover {
+      // override
+      text-decoration: $df-tabs-hover-text-decoration; // add
+      background-color: $df-tabs-hover-bg-color; // add
+      border-bottom: $df-tabs-hover-border-bottom; // add
+      border-top: $df-tabs-border-top; // add
+      border-left: $df-tabs-border-left; // add
+      border-right: $df-tabs-border-right; // add
+    }
+
+    &:focus {
+      // override
+      outline: $df-tabs-focus-outline; // add to override default
+      box-shadow: $btn-focus-box-shadow; // add
+      border-bottom: $df-tabs-border-bottom; // add
+      border-top: $df-tabs-border-top; // add
+      border-left: $df-tabs-border-left; // add
+      border-right: $df-tabs-border-right; // add
+    }
+
+    &.disabled {
+      pointer-events: auto; // add to allow cursor override bs
+      cursor: $df-tabs-disabled-cursor; // add
+      text-decoration: $df-tabs-disabled-text-decoration;
+      border-bottom: $df-tabs-border-bottom; // add
+      border-top: $df-tabs-border-top; // add
+      border-left: $df-tabs-border-left; // add
+      border-right: $df-tabs-border-right; // add
+      &:hover {
+        background-color: $df-tabs-disabled-bg-color;
+      }
+    }
+  }
+
+  .nav-item + .nav-item {
+    // add
+    margin-left: $df-tabs-between-item-margin; // add
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-bottom: $df-tabs-active-border-bottom; // add
+    border-top: $df-tabs-border-top; // add
+    border-left: $df-tabs-border-left; // add
+    border-right: $df-tabs-border-right; // add
+  }
+}
+
+%secondary {
+  .nav-link {
+    border-bottom: $df-tabs-secondary-border-bottom; // add
+    border-top: $df-tabs-secondary-border-top; // add
+
+    &:hover {
+      // override
+      border-bottom: $df-tabs-secondary-border-bottom; // add
+      border-top: $df-tabs-secondary-border-top; // add
+    }
+
+    &:focus {
+      // override
+      border-bottom: $df-tabs-secondary-border-bottom; // add
+      border-top: $df-tabs-secondary-border-top; // add
+    }
+
+    &.disabled {
+      border-bottom: $df-tabs-secondary-border-bottom; // add
+      border-top: $df-tabs-secondary-border-top; // add
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-bottom: $df-tabs-secondary-active-border-bottom; // add
+    border-top: $df-tabs-secondary-active-border-top; // add
+    border-left: $df-tabs-secondary-active-border-left; // add
+    border-right: $df-tabs-secondary-active-border-right; // add
+    margin-bottom: $df-tabs-secondary-active-margin-bottom; // add
+  }
+}
+
+// For ng-bootstrap tab
+.secondary {
+  .nav-tabs {
+    @extend %secondary;
+  }
+
+  .tab-content {
+    @extend %secondary-content;
+  }
+}
+
+// For bootstrap tab
+.nav-tabs.secondary {
+  @extend %secondary;
+}
+
+.tab-content {
+  > .tab-pane {
+    padding: $df-tabcontent-tabpane-padding; //add
+  }
+}
+
+%secondary-content {
+  border-style: $df-tab-content-border-style; //add
+  border-color: $df-tab-content-border-color; //add
+  border-width: $df-tab-content-border-width; //add
+}
+
+// For bootstrap tab
+.tab-content.secondary {
+  @extend %secondary-content;
+}

package/styles/scss/components/tabs/_tabs.variables.scss

@@ -0,0 +1,32 @@
+$df-tabs-color: $body-color !default;
+$df-tabs-border-bottom: 2px solid transparent !default;
+$df-tabs-border-top: none !default;
+$df-tabs-border-left: none !default;
+$df-tabs-border-right: none !default;
+$df-tabs-hover-border-bottom: 2px solid transparent !default;
+$df-tabs-hover-text-decoration: underline !default;
+$df-tabs-hover-bg-color: $df-hover-bg-color !default;
+$df-tabs-disabled-text-decoration: none !default;
+$df-tabs-disabled-cursor: $df-disabled-cursor !default;
+$df-tabs-between-item-margin: 3px !default;
+$df-tabs-active-border-bottom: 3px solid $primary !default;
+$df-tabs-disabled-color: $df-disabled-color !default;
+$df-tabs-disabled-bg-color: transparent !default;
+$df-tabs-focus-outline: none !default;
+
+$df-tabs-secondary-border-bottom: $df-tabs-border-top !default;
+$df-tabs-secondary-border-top: $df-tabs-border-bottom !default;
+$df-tabs-secondary-active-border-top: $df-tabs-active-border-bottom !default;
+$df-tabs-secondary-active-border-left: $border-width solid $border-color !default;
+$df-tabs-secondary-active-border-right: $border-width solid $border-color !default;
+$df-tabs-secondary-active-border-bottom: $df-tabs-border-top !default;
+$df-tabs-secondary-active-margin-bottom: -2 * $border-width !default;
+$df-tabs-padding-y: 0.6875rem !default; // comvarpad?
+// We can also add variable -x that is to be aligned with accordion....
+// instead of keeping the default value of nav-link which is currently good.
+
+// Tab-content
+$df-tab-content-border-style: solid !default;
+$df-tab-content-border-color: $border-color !default;
+$df-tab-content-border-width: 0px $nav-tabs-border-width $nav-tabs-border-width $nav-tabs-border-width !default;
+$df-tabcontent-tabpane-padding: 1.5rem 1rem !default;

package/styles/scss/components/toast/_toast.scss

@@ -0,0 +1,189 @@
+@use 'sass:color';
+
+@import '../button/button.utils';
+
+.toast {
+  // DF CSS variables
+  --#{$prefix}toast-light-border-start-width: #{$df-toast-light-border-start-width};
+  --#{$prefix}toast-light-border-color-alpha: #{$df-toast-light-border-color-alpha};
+  --#{$prefix}toast-icon-top: #{$df-toast-insert-icon-top};
+  --#{$prefix}toast-icon-font-weight: #{$df-icon-solid-font-weight};
+  --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space};
+  --#{$prefix}toast-btn-close-border-radius: #{$df-toast-btn-close-border-radius};
+  --#{$prefix}toast-btn-close-border-width: #{$df-toast-btn-close-border-width};
+  --#{$prefix}toast-btn-close-padding-x: #{$df-toast-btn-close-padding-x};
+  --#{$prefix}toast-btn-close-padding-y: #{$df-toast-btn-close-padding-y};
+  --#{$prefix}toast-btn-close-margin-x: #{$df-toast-btn-close-margin-x};
+  --#{$prefix}toast-btn-close-hover-color: #{rgba($color: $df-toast-btn-close-hover-color, $alpha: 0.2)};
+  --#{$prefix}toast-btn-close-size: #{df-button-icononly-size($btn-padding-y-sm)};
+  --#{$prefix}toast-dismissible-padding-end: calc(var(--#{$prefix}toast-btn-close-margin-x) * 2 + var(--#{$prefix}toast-btn-close-size));
+
+  width: unset;
+  max-width: var(--#{$prefix}toast-max-width);
+  position: relative;
+
+  &.df-toast-dismissible {
+    .toast-body, .toast-header {
+      @include ltr {
+        padding-right: var(--#{$prefix}toast-dismissible-padding-end);
+      }
+      @include rtl {
+        padding-left: var(--#{$prefix}toast-dismissible-padding-end);
+      }
+    }
+    .toast-header + .toast-body {
+      @include ltr {
+        padding-right: var(--#{$prefix}toast-padding-x);
+      }
+      @include rtl {
+        padding-left: var(--#{$prefix}toast-padding-x);
+      }
+    }
+  }
+
+
+  &.df-toast-light {
+    @include ltr {
+      border-left-width: var(--#{$prefix}toast-light-border-start-width);
+    }
+    @include rtl {
+      border-right-width: var(--#{$prefix}toast-light-border-start-width);
+    }
+  }
+
+  .toast-body, .toast-header {
+    .btn-close {
+      position: absolute;
+      top: 0;
+      @include ltr {
+        right: 0;
+      }
+      @include rtl {
+        left: 0;
+      }
+      z-index: $stretched-link-z-index + 1;
+      border-radius: var(--#{$prefix}toast-btn-close-border-radius);
+      border-width: var(--#{$prefix}toast-btn-close-border-width);
+      padding: var(--#{$prefix}toast-btn-close-padding-y) var(--#{$prefix}toast-btn-close-padding-x);
+      margin: calc(var(--#{$prefix}toast-padding-y) - 0.3em) var(--#{$prefix}toast-btn-close-margin-x);
+      width: var(--#{$prefix}toast-btn-close-size);
+      height: var(--#{$prefix}toast-btn-close-size);
+      opacity: 1;
+
+      &:hover { 
+        background-color: var(--#{$prefix}toast-btn-close-hover-color);
+      }
+    }
+  }
+
+  .toast-body {
+    padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+
+    .btn.btn-link {
+      --#{$prefix}btn-font-size: var(--#{$prefix}toast-font-size);
+      --#{$prefix}btn-padding-y: 0;
+      --#{$prefix}btn-padding-x: 0;
+      --#{$prefix}btn-line-height: 1;
+      --#{$prefix}btn-border-radius: 0;
+
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  span.df-insert-icon {
+    position: absolute;
+    top: var(--#{$prefix}toast-icon-top);
+    font-weight: var(--#{$prefix}toast-icon-font-weight);
+    @include ltr {
+      padding-left: var(--#{$prefix}toast-padding-x);
+    }
+    @include rtl {
+      padding-right: var(--#{$prefix}toast-padding-x);
+    }
+  }
+  &[dfInsertToastIcon] {
+    div:first-of-type {
+      &.toast-body, &.toast-header {
+        @include ltr {
+          padding-left: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
+        }
+        @include rtl {
+          padding-right: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
+        }
+      }
+    }
+  }
+}
+
+@each $state, $value in $theme-colors {
+  $toast-background: $value;
+  $toast-border: $value;
+  $toast-color: color-contrast($toast-background);
+  $toast-background-light: df-getBGColor(#{$state});
+  $toast-color-light: color-contrast($toast-background-light);
+
+  .toast-#{$state} {
+    // DF CSS Variable
+    --#{$prefix}toast-light-border-start-color: #{$toast-border};
+
+    --#{$prefix}toast-color: #{$toast-color};
+    --#{$prefix}toast-bg: #{$toast-background};
+    --#{$prefix}toast-border-color: #{$toast-border};
+    --#{$prefix}toast-header-bg: #{$toast-background};
+    --#{$prefix}toast-header-color: #{$toast-color};
+
+    @if $toast-color == $color-contrast-light or $toast-color == $white {
+      .btn-close {
+        filter: $btn-close-white-filter;
+      }
+    }
+
+    &.df-toast-light {
+      --#{$prefix}toast-bg: #{$toast-background-light};
+      --#{$prefix}toast-color: #{$toast-color-light};
+      --#{$prefix}toast-btn-close-hover-color: #{$df-toast-btn-close-hover-color};
+      --#{$prefix}toast-border-color: #{rgba(to-rgb($toast-border), var(--#{$prefix}toast-light-border-color-alpha))};
+
+      @include ltr {
+        border-left-color: var(--#{$prefix}toast-light-border-start-color);
+      }
+      @include rtl {
+        border-right-color: var(--#{$prefix}toast-light-border-start-color);
+      }
+
+      span.df-insert-icon {
+        color: $value;
+      }
+
+      .btn-close {
+        filter: none;
+      }
+
+      .toast-body {
+        .btn.btn-link {
+          --#{$prefix}btn-color: var(--#{$prefix}link-color);
+          --#{$prefix}btn-hover-color: var(--#{$prefix}link-hover-color);
+          --#{$prefix}btn-bg: #{$toast-background-light};
+          --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix(color-contrast($primary), $primary, 15%))};
+          --#{$prefix}btn-active-color: var(--#{$prefix}link-color);
+          --#{$prefix}btn-hover-bg: #{$df-toast-btn-link-hover-color};
+          --#{$prefix}btn-active-bg: #{$df-toast-btn-link-hover-color};
+        }
+      }
+    }
+
+    .toast-body {
+      .btn.btn-link {
+        --#{$prefix}btn-color: #{$toast-color};
+        --#{$prefix}btn-hover-color: #{$toast-color};
+        --#{$prefix}btn-bg: #{$toast-background};
+        --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($toast-color, $toast-background, 15%))};
+        --#{$prefix}btn-active-color: #{$toast-color};
+        --#{$prefix}btn-hover-bg: #{rgba($color: $df-toast-btn-link-hover-color, $alpha: 0.2)};
+        --#{$prefix}btn-active-bg: #{rgba($color: $df-toast-btn-link-hover-color, $alpha: 0.2)};
+      }
+    }
+  }
+}

package/styles/scss/components/toast/_toast.variables.scss

@@ -0,0 +1,13 @@
+@use 'sass:color';
+
+$df-toast-insert-icon-space: 1.5rem !default;
+$df-toast-insert-icon-top: 1rem !default;
+$df-toast-light-border-start-width: $df-alert-size-default-border-left-width !default;
+$df-toast-btn-close-border-radius: $df-btn-icononly-border-radius !default;
+$df-toast-btn-close-border-width: $df-btn-icononly-border-width !default;
+$df-toast-btn-close-padding-x: $df-btn-icononly-padding-x !default;
+$df-toast-btn-close-padding-y: $df-btn-icononly-padding-y !default;
+$df-toast-btn-close-margin-x: 0.5rem !default;
+$df-toast-btn-close-hover-color: $df-btn-link-hover-bg-color !default;
+$df-toast-btn-link-hover-color: $df-toast-btn-close-hover-color !default;
+$df-toast-light-border-color-alpha: 0.4 !default;

package/styles/scss/components/toggle/_toggle.scss

@@ -0,0 +1,93 @@
+@use 'sass:math';
+
+.form-switch {
+  display: flex;
+  align-items: center;
+
+  .form-check-input {
+    height: math.div($form-switch-width, 2);
+    border-width: $df-switch-border-width;
+    @include rtl {
+      background-position: $df-switch-rtl-bg-position;
+    }
+
+    &:checked {
+      @include rtl {
+        background-position: $df-switch-rtl-checked-bg-position;
+      }
+    }
+
+    &.disabled,&[disabled] {
+      @if $enable-gradients {
+        background-image: escape-svg($df-switch-disabled-bg-image), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($df-switch-disabled-bg-image);
+      }
+      &:checked {
+        background-color: $df-switch-disabled-active-background-color;
+        border-color: $df-switch-disabled-active-border-color;
+      }
+      &:not([checked]) {
+        background-color: $df-switch-disabled-inactive-background-color;
+        border-color: $df-switch-disabled-inactive-border-color;
+      }
+      ~ .form-check-label {
+        color: $df-switch-disabled-label-color;
+      }
+    }
+
+    @each $type, $color in $df-switch-additional-color-list {
+      &.df-switch-#{$type} {
+        &:focus {
+          box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width rgba($color, 0.25);
+        }
+        &:checked:not(.disabled):not([disabled]) {
+          background-color: $color;
+          border-color: $color;
+        }
+      }
+    }
+  }
+  .form-check-label {
+    @include rtl {
+      padding-right: $df-switch-label-padding-start;
+    }
+    @include ltr {
+      padding-left: $df-switch-label-padding-start;
+    }
+  }
+  .df-form-switch-name {
+    margin-left: $form-switch-padding-start * -1;
+    font-weight: $df-switch-label-name-font-weight;
+    @include rtl {
+      padding-right: 0;
+      margin-right: $form-check-padding-start * -1;
+    }
+    @include ltr {
+      padding-left: 0;
+    }
+
+    &.df-form-switch-name-disabled {
+      color: $df-switch-disabled-label-color;
+      cursor: $df-switch-disabled-cursor;
+    }
+
+    .df-form-switch-container {
+      @include rtl {
+        margin-right: $form-check-padding-start;
+      }
+      display: flex;
+      align-items: center;
+      .form-check-input {
+        margin-left: 0;
+      }
+      .form-check-label {
+        @if $form-label-font-weight {
+          font-weight: $form-label-font-weight;
+        } @else {
+          font-weight: $font-weight-base;
+        }
+      }
+    }
+  }
+}

package/styles/scss/components/toggle/_toggle.variables.scss

@@ -0,0 +1,17 @@
+@use 'sass:math';
+
+$df-switch-label-padding-start: .5em !default;
+$df-switch-border-width: 0.09375rem !default;
+$df-switch-label-name-font-weight: 500 !default;
+$df-switch-additional-color-list: (
+  'success': $brand-green
+) !default;
+$df-switch-disabled-label-color: $gray-400 !default;
+$df-switch-disabled-active-background-color: $gray-200 !default;
+$df-switch-disabled-active-border-color: $border-color !default;
+$df-switch-disabled-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$gray-400}'/></svg>") !default;
+$df-switch-disabled-inactive-background-color: $white !default;
+$df-switch-disabled-inactive-border-color: $border-color !default;
+$df-switch-disabled-cursor: $df-disabled-cursor !default;
+$df-switch-rtl-checked-bg-position: left center !default;
+$df-switch-rtl-bg-position: right center !default;

package/styles/scss/components/tooltip/_tooltip.scss

@@ -0,0 +1,3 @@
+.tooltip {
+  font-size: $df-tooltip-font-size-default;
+}

package/styles/scss/components/tooltip/_tooltip.variables.scss

@@ -0,0 +1,5 @@
+@use 'sass:map';
+
+$df-tooltip-size-default: map.get($df-size-ratios, 'sm') !default;
+
+$df-tooltip-font-size-default: 1em * $df-tooltip-size-default !default;

package/styles/scss/components/tooltip/_tooltip_container.scss

@@ -0,0 +1,112 @@
+// This style is needed when using DF through a CSS namespace
+#{$df-css-namespace-selector}.tooltip {
+  // scss-docs-start tooltip-css-vars
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  // scss-docs-end tooltip-css-vars
+
+  z-index: var(--#{$prefix}tooltip-zindex);
+  display: block;
+  padding: var(--#{$prefix}tooltip-arrow-height);
+  margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size(var(--#{$prefix}tooltip-font-size));
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+
+  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+
+  .tooltip-arrow {
+    display: block;
+    width: var(--#{$prefix}tooltip-arrow-width);
+    height: var(--#{$prefix}tooltip-arrow-height);
+
+    &::before {
+      position: absolute;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+
+  &.bs-tooltip-top {
+    .tooltip-arrow {
+      bottom: 0;
+
+      &::before {
+        top: -1px;
+        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-top-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-end {
+    .tooltip-arrow {
+      left: 0;
+      width: var(--#{$prefix}tooltip-arrow-height);
+      height: var(--#{$prefix}tooltip-arrow-width);
+
+      &::before {
+        right: -1px;
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-right-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-bottom {
+    .tooltip-arrow {
+      top: 0;
+
+      &::before {
+        bottom: -1px;
+        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-bottom-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+
+  &.bs-tooltip-start {
+    .tooltip-arrow {
+      right: 0;
+      width: var(--#{$prefix}tooltip-arrow-height);
+      height: var(--#{$prefix}tooltip-arrow-width);
+
+      &::before {
+        left: -1px;
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-left-color: var(--#{$prefix}tooltip-bg);
+      }
+    }
+  }
+  
+  &.bs-tooltip-auto {
+    &[data-popper-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[data-popper-placement^="right"] {
+      @extend .bs-tooltip-end;
+    }
+    &[data-popper-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[data-popper-placement^="left"] {
+      @extend .bs-tooltip-start;
+    }
+  }
+}

package/styles/scss/components/typeahead/_typeahead.scss

@@ -0,0 +1,45 @@
+// stylelint-disable-next-line selector-type-no-unknown
+ngb-typeahead-window.dropdown-menu {
+  box-shadow: $dropdown-box-shadow;
+  border-style: none;
+  max-width: 40rem;
+  width: max-content;
+  max-height: $df-typeahead-max-height;
+  overflow: auto;
+  .dropdown-item {
+    line-height: 1.75rem;
+    white-space: normal;
+    cursor: pointer;
+    // Hover of a typeahead item uses active state of the dropdown item
+    &:not(:disabled):not(.disabled).active {
+      color: $df-typeahead-hover-color;
+      background-color: $df-typeahead-hover-bg;
+
+      &:active {
+        color: $df-typeahead-active-color;
+        background-color: $df-typeahead-active-bg-color;
+      }
+
+      *:not([class^='icon-']) {
+        text-decoration: underline;
+      }
+    }
+    .ngb-highlight {
+      color: $df-typeahead-highlight-color;
+      font-family: $df-typeahead-highlight-font-family;
+      font-weight: bold;
+    }
+    span[class^='icon-'] {
+      position: relative;
+      top: 0.1rem;
+    }
+  }
+}
+
+// for small and extra small device only
+@include media-breakpoint-down(sm) {
+  // stylelint-disable-next-line selector-type-no-unknown
+  ngb-typeahead-window.dropdown-menu {
+    max-width: 90vw;
+  }
+}

package/styles/scss/components/typeahead/_typeahead.variables.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use 'sass:color';
+
+$df-typeahead-hover-color: $dropdown-link-hover-color !default;
+$df-typeahead-hover-bg: $dropdown-link-hover-bg !default;
+$df-typeahead-active-color: color-contrast(color.adjust($df-typeahead-hover-bg, $lightness: -10%)) !default;
+$df-typeahead-active-bg-color: color.adjust($df-typeahead-hover-bg, $lightness: -10%) !default;
+$df-typeahead-highlight-color: $primary !default;
+$df-typeahead-highlight-font-family: $font-family-sans-serif !default;
+$df-typeahead-max-height: 240px !default;