@design-factory/design-factory 15.2.0

package/styles/scss/components/list-group/_list-group.scss

@@ -0,0 +1,61 @@
+.list-group-item-action {
+  color: $df-listgroup-item-action-color;
+  // Hover state
+  &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
+    &:hover {
+      background-color: $df-listgroup-item-hover-color;
+    }
+    &:focus {
+      box-shadow: $df-focused-box-shadow;
+      outline: none; //disable default
+    }
+    &.active {
+      border-color: $df-listgroup-item-active-border-color; // override
+      @include ltr {
+        padding-left: $df-listgroup-item-padding-left;
+        border-left: $df-listgroup-item-border-left-active;
+      }
+      @include rtl {
+        padding-right: $df-listgroup-item-padding-left;
+        border-right: $df-listgroup-item-border-left-active;
+      }
+    }
+  }
+}
+
+.list-group-item-action + .list-group-item-action {
+  margin-top: $df-listgroup-item-action-margin-top;
+  border-width: $df-listgroup-item-border-width; // override
+}
+
+.list-group-item {
+  border-color: $df-listgroup-border-color;
+  &[aria-disabled='true'],
+  &.disabled,
+  &[disabled] {
+    color: $df-listgroup-disabled-color;
+    background-color: $df-listgroup-disabled-bg-color;
+    opacity: $df-listgroup-disabled-opacity;
+    cursor: $df-listgroup-disabled-cursor;
+    pointer-events: auto; // override
+  }
+}
+
+@each $extension, $ratio in $df-size-ratios {
+  .df-list-group-#{$extension} {
+    font-size: $font-size-base * $ratio;
+    .list-group-item {
+      padding-top: $list-group-item-padding-y * $ratio;
+      padding-bottom: $list-group-item-padding-y * $ratio;
+    }
+  }
+}
+
+.list-group-flush .list-group-item {
+  &:first-child {
+    border-top: none;
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+}

package/styles/scss/components/list-group/_list-group.variables.scss

@@ -0,0 +1,14 @@
+$df-listgroup-border-color: $border-color !default;
+$df-listgroup-disabled-bg-color: $list-group-disabled-bg !default;
+$df-listgroup-disabled-color: $list-group-disabled-color !default;
+$df-listgroup-disabled-opacity: $df-disabled-opacity !default;
+$df-listgroup-disabled-cursor: $df-disabled-cursor !default;
+$df-listgroup-item-action-color: $gray-900 !default;
+$df-listgroup-item-border-width: $border-width !default;
+$df-listgroup-item-active-border-width: 0.1875rem !default; // same as sidenav
+$df-listgroup-item-active-color: $primary !default; // same as sidenav
+$df-listgroup-item-active-border-color: $gray-100 !default;
+$df-listgroup-item-hover-color: $df-hover-bg-color !default;
+$df-listgroup-item-border-left-active: $df-listgroup-item-active-border-width solid $df-listgroup-item-active-color !default;
+$df-listgroup-item-action-margin-top: -$df-listgroup-item-border-width !default;
+$df-listgroup-item-padding-left: calc(#{$list-group-item-padding-x} - #{$df-listgroup-item-active-border-width} + #{$df-listgroup-item-border-width}) !default;

package/styles/scss/components/media/_media.scss

@@ -0,0 +1,42 @@
+.df-media-button-interactive {
+  @include ltr {
+    text-align: left;
+  }
+  @include rtl {
+    text-align: right;
+  }
+  padding: $df-interactive-media-padding;
+  border: none;
+  background-color: $df-interactive-media-background-color;
+
+  span,
+  .card-text {
+    color: $df-interactive-media-color;
+  }
+
+  &:focus {
+    background-color: $df-interactive-media-focused-background-color;
+
+    .media-body > *,
+    .card-body > * {
+      text-decoration: $df-interactive-media-hover-focus-text-decoration;
+    }
+  }
+  &:hover {
+    background-color: $df-interactive-media-hover-background-color;
+
+    .media-body > *,
+    .card-body > * {
+      text-decoration: $df-interactive-media-hover-focus-text-decoration;
+    }
+  }
+}
+
+.df-img-mr {
+  @include ltr {
+    margin-right: $df-media-mr;
+  }
+  @include rtl {
+    margin-left: $df-media-mr;
+  }
+}

package/styles/scss/components/media/_media.variables.scss

@@ -0,0 +1,7 @@
+$df-interactive-media-padding: 0 !default;
+$df-interactive-media-focused-background-color: $gray-50 !default;
+$df-interactive-media-hover-background-color: $gray-100 !default;
+$df-interactive-media-background-color: $white !default;
+$df-interactive-media-hover-focus-text-decoration: underline !default;
+$df-media-mr: 1em !default;
+$df-interactive-media-color: $primary !default;

package/styles/scss/components/modal/_modal.scss

@@ -0,0 +1,147 @@
+@use 'sass:map';
+
+.modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .modal-dialog {
+    .modal-content {
+      box-shadow: $df-modal-box-shadow;
+      border-radius: $df-modal-border-radius;
+      border: $df-modal-border;
+
+      .modal-header {
+        padding: map.get($spacers, 4) map.get($spacers, 6);
+        .modal-title {
+          word-break: $df-modal-header-title-break-word;
+        }
+        .btn-close {
+          padding-top: $df-modal-header-button-close-padding-y;
+          padding-bottom: $df-modal-header-button-close-padding-y;
+          color: $df-modal-header-icon-font-color;
+
+          @include rtl {
+            margin-right: auto;
+            margin-left: 0;
+          }
+        }
+        .alert-modal-icon {
+          font-size: $df-modal-body-alert-icon-size;
+        }
+        &.df-warning-modal {
+          .btn-close {
+            margin-top: $df-modal-alert-header-button-close-margin-top;
+          }
+          .alert-modal-icon {
+            color: $warning;
+          }
+        }
+        &.df-info-modal {
+          .btn-close {
+            margin-top: $df-modal-alert-header-button-close-margin-top;
+          }
+          .alert-modal-icon {
+            color: $info;
+          }
+        }
+        &.df-error-modal {
+          .btn-close {
+            margin-top: $df-modal-alert-header-button-close-margin-top;
+          }
+          .alert-modal-icon {
+            color: $danger;
+          }
+        }
+      }
+
+      .modal-body {
+        p:last-child {
+          margin-bottom: $df-modal-last-paragraph-margin-bottom;
+        }
+        @include ltr {
+          text-align: left;
+          padding-inline: $df-modal-body-padding-x;
+        }
+        @include rtl {
+          text-align: right;
+          padding-inline: $df-modal-body-padding-x;
+        }
+      }
+
+      .modal-footer {
+        padding: map.get($spacers, 5) map.get($spacers, 6);
+        & > * {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-only(xs) {
+    .modal-dialog {
+      &:not(.modal-dialog-scrollable) {
+        .modal-content {
+          padding-top: $df-modal-xs-content-padding-y;
+          padding-bottom: $df-modal-xs-content-padding-y;
+          .modal-body {
+            flex: 0;
+          }
+        }
+      }
+
+      margin: 0;
+      padding: $df-modal-xs-padding;
+      min-height: 100%;
+      display: flex;
+      flex: 1;
+
+      .modal-content {
+        flex: 1;
+        overflow: auto;
+        min-height: 100%;
+        justify-content: center;
+
+        .modal-header {
+          justify-content: center;
+          @include ltr {
+            padding-right: $df-modal-xs-header-padding-right;
+          }
+          @include rtl {
+            padding-left: $df-modal-xs-header-padding-right;
+          }
+          border-bottom: none;
+          margin-bottom: 10px;
+          button.close {
+            position: absolute;
+            top: $df-modal-xs-button-close-position-top;
+            @include ltr {
+              right: $df-modal-xs-button-close-position-right;
+            }
+            @include rtl {
+              left: $df-modal-xs-button-close-position-right;
+            }
+            padding: 0;
+            margin: 0;
+          }
+        }
+
+        .modal-body {
+          p {
+            margin-bottom: 0;
+          }
+        }
+
+        .modal-footer {
+          justify-content: center;
+          align-items: baseline;
+          border-top: none;
+          margin-top: $df-modal-xs-footer-margin-top;
+        }
+      }
+    }
+  }
+}
+
+.modal-backdrop.show {
+  opacity: $df-modal-backdrop-opacity;
+}

package/styles/scss/components/modal/_modal.variables.scss

@@ -0,0 +1,23 @@
+$df-modal-backdrop-opacity: 0.4 !default;
+$df-modal-box-shadow: $df-box-shadow !default;
+$df-modal-border-radius: $border-radius-lg !default;
+$df-modal-border: $border-width solid $border-color !default;
+
+$df-modal-header-title-break-word: break-word !default;
+$df-modal-header-button-close-padding-y: 0.5rem !default;
+$df-modal-alert-header-button-close-margin-top: -1.5rem !default;
+$df-modal-header-icon-font-color: $df-font-icon-color !default;
+
+$df-modal-body-padding-x: 1.5rem !default;
+$df-modal-body-alert-icon-size: 1.75rem !default;
+
+$df-modal-body-alert-border-style: 2px solid !default;
+
+$df-modal-xs-padding: 0.5rem !default;
+$df-modal-xs-content-padding-y: 4rem !default;
+$df-modal-xs-header-padding-right: 1.5rem !default;
+$df-modal-xs-button-close-position-top: 1rem !default;
+$df-modal-xs-button-close-position-right: $df-modal-xs-button-close-position-top !default;
+$df-modal-xs-footer-margin-top: 0.9375rem !default;
+
+$df-modal-last-paragraph-margin-bottom: 0 !default;

package/styles/scss/components/navbar/_navbar.scss

@@ -0,0 +1,253 @@
+// CSS for nav
+.navbar {
+  //add
+  font-size: $df-navbar-nav-font-size;
+  box-shadow: $df-navbar-boxshadow;
+  .navbar-text {
+    white-space: $df-navbartext-white-space;
+    overflow: $df-navbartext-overflow;
+    text-overflow: $df-navbartext-text-overflow;
+    margin-left: $df-navbartext-margin-left;
+  }
+  > .navbar-collapse {
+    overflow: $df-navbar-collapse-overflow;
+  }
+
+  .navbar-nav {
+    // add
+    .nav-link {
+      padding-right: $df-navbar-nav-link-padding-right; // add
+      padding-left: $df-navbar-nav-link-padding-left; // add
+      padding-top: $df-navbar-nav-link-padding-top; // add
+      padding-bottom: $df-navbar-nav-link-padding-bottom; // add
+
+      // Reinitialize border of nav-link button
+      &.btn {
+        border-top: inherit;
+        border-right: inherit;
+        border-left: inherit;
+        border-radius: inherit;
+      }
+    }
+  }
+}
+
+.navbar-toggler-icon {
+  // override from _navbar.scss there is no variables for this in BS
+  width: $df-navbar-toggle-icon-width;
+  height: $df-navbar-toggle-icon-height;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  padding-right: $df-navbarbrand-padding-right; // add
+  padding-left: $df-navbarbrand-padding-left; // add
+  padding-top: $df-navbarbrand-padding-top; // override
+  padding-bottom: $df-navbarbrand-padding-bottom; // override
+  margin-right: $df-navbarbrand-margin-right; // override
+  font-family: $df-navbar-font-family; // add
+  min-height: $df-navbarbrand-min-height;
+}
+
+.navbar-light {
+  .navbar-nav {
+    .nav-link {
+      border-color: $df-navbar-light-border-color;
+
+      &:focus {
+        // add
+        color: $df-navbar-nav-link-focus-color; // override
+        background: $df-navbar-nav-link-focus-bg; // add
+        box-shadow: $btn-focus-box-shadow; //add
+      }
+
+      &:hover {
+        // add
+        color: $navbar-light-hover-color; // override
+        background: $df-navbar-light-background-hover-color; // add
+        border-color: $df-navbar-light-border-hover-color; // add
+        &:focus {
+          //add
+          color: $navbar-light-hover-color; //override
+        }
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      &:not(.dropdown-toggle) {
+        border-color: $df-navbar-nav-link-active-color; // add
+        font-weight: $df-active-font-weight; // add
+      }
+      &:hover {
+        color: $navbar-light-hover-color; // override
+        &:focus {
+          color: $navbar-light-hover-color; // override
+        }
+      }
+    }
+  }
+  .navbar-text {
+    color: $df-navbarlight-text-color;
+  }
+  .navbar-toggler {
+    &:hover {
+      background-color: $df-navbar-light-toggler-hover-bg;
+    }
+  }
+}
+
+.navbar-dark {
+  // override (not all) and add
+  .navbar-nav {
+    .nav-link {
+      border-color: $df-navbar-dark-border-color; // add
+      &:hover {
+        color: $navbar-dark-hover-color; // add
+        background: $df-navbar-background-hover-color; // add
+        border-color: $df-navbar-dark-hover-focus-border-color; // add
+      }
+      &:focus {
+        // override
+        color: $df-navbar-dark-focus-color; // override
+        box-shadow: $btn-focus-box-shadow; // add
+        background: $df-navbar-background-hover-color; // add
+        border-color: $df-navbar-dark-hover-focus-border-color; // add
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      &:not(.dropdown-toggle) {
+        border-color: $df-navbar-dark-active-border-color;
+        font-weight: $df-active-font-weight; // add
+      }
+    }
+  }
+  .navbar-toggler {
+    &:hover {
+      background-color: $df-navbar-dark-toggler-hover-bg;
+    }
+  }
+}
+
+.navbar-toggler {
+  margin-left: $df-navbar-toggle-margin-left; // add
+  margin-right: $df-navbar-toggle-margin-right; // add
+  border: $df-navbar-toggle-border;
+  &:focus {
+    outline: none;
+    box-shadow: $df-focused-box-shadow;
+  }
+  // TODO extend if for the closing button of the side nav ??
+}
+
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+  // override
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        .navbar-nav {
+          .nav-link {
+            border-left-width: $df-active-border-width;
+            border-left-style: $df-active-border-style;
+            padding-bottom: $df-navbar-nav-link-expanded-padding-bottom;
+
+            // Reinitialize border of nav-link button
+            &.btn {
+              height: inherit;
+              border-bottom: inherit;
+              width: 100%;
+              justify-content: inherit;
+            }
+          }
+          .nav-item.dropdown {
+            .dropdown-menu {
+              margin: $df-navbar-dropdown-menu-collapse-margin;
+              box-shadow: $df-navbar-dropdown-menu-collapse-box-shadow;
+            }
+          }
+          &:last-of-type {
+            .nav-item.dropdown:last-of-type {
+              .dropdown-menu {
+                margin-bottom: $df-navbar-dropdown-menu-collapse-last-item-margin-bottom;
+              }
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+        .navbar-nav {
+          // add
+          .nav-link {
+            border-bottom-width: $df-active-border-width; // add
+            border-bottom-style: $df-active-border-style; // add
+            padding-right: $df-navbar-nav-link-padding-right; // override
+            padding-left: $df-navbar-nav-link-padding-left; // override
+          }
+        }
+
+        .navbar-collapse.d {
+          @each $breakpoint2 in map-keys($grid-breakpoints) {
+            $next2: breakpoint-next($breakpoint2, $grid-breakpoints);
+            $infix2: breakpoint-infix($next2, $grid-breakpoints);
+            &#{$infix2}-none {
+              display: none !important; // override
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// fix to remove 1px indentation below the white border in the navbar header
+@include media-breakpoint-up(lg) {
+  .navbar-brand,
+  .navbar-collapse,
+  .navbar-nav,
+  .navbar-nav .nav-item,
+  .navbar-nav .nav-link,
+  .navbar-nav .dropdown-toggle {
+    height: 100%;
+  }
+}
+
+// Superheader
+.df-superheader {
+  box-shadow: $df-navbar-boxshadow; // add
+  .navbar {
+    box-shadow: $df-superheader-navbar-boxshadow; // override above settings
+  }
+  header:first-of-type {
+    //add
+    border-bottom: $df-superheader-border-bottom;
+    padding: $df-superheader-firstnav-padding;
+  }
+}
+
+// Utils CSS class to have a scrollbar only on the content section
+router-outlet.df-scroll-content {
+  & + * {
+    overflow-y: auto;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+}
+
+.df-scroll-content:not(router-outlet) {
+  overflow-y: auto;
+  flex-grow: 1;
+  flex-basis: 0;
+}

package/styles/scss/components/navbar/_navbar.variables.scss

@@ -0,0 +1,62 @@
+@use 'sass:math';
+
+$df-active-border-width: 0.1875rem !default;
+$df-active-border-style: solid !default;
+$df-active-font-weight: bold !default;
+$df-navbar-boxshadow: $df-box-shadow !default;
+$df-navbar-height: 3.5rem !default; // 56px
+$df-navbarbrand-padding-right: 1rem !default;
+$df-navbarbrand-padding-left: 1rem !default;
+$df-navbarbrand-padding-top: math.div($df-navbar-height - ($navbar-brand-font-size * $line-height-base), 2) !default;
+$df-navbarbrand-padding-bottom: math.div($df-navbar-height - ($navbar-brand-font-size * $line-height-base), 2) !default;
+$df-navbarbrand-min-height: 
+  $df-navbarbrand-padding-top + $df-navbarbrand-padding-bottom + $navbar-brand-font-size * $line-height-base !default;
+$df-navbarbrand-margin-right: 0px !default;
+$df-navbar-background-hover-color: $df-brand-primary-85 !default;
+$df-navbar-light-background-hover-color: $df-hover-bg-color !default;
+$df-navbarbrand-border-bottom-hover: $df-active-border-width $df-active-border-style $df-navbar-background-hover-color !default;
+$df-navbar-nav-link-padding-right: $df-navbarbrand-padding-right !default;
+$df-navbar-nav-link-padding-left: $df-navbarbrand-padding-left !default;
+$df-navbar-nav-font-size: $font-size-base !default;
+$df-navbar-nav-link-padding-top: math.div($df-navbar-height - ($df-navbar-nav-font-size * $line-height-base), 2) !default;
+$df-navbar-nav-link-padding-bottom: 
+  math.div($df-navbar-height - ($df-navbar-nav-font-size * $line-height-base), 2) - $df-active-border-width !default;
+$df-navbar-nav-link-expanded-padding-bottom: $df-navbar-nav-link-padding-top !default;
+$df-navbar-light-border-hover-color: transparent !default;
+$df-navbar-light-border-color: transparent !default;
+$df-navbar-dark-border-color: transparent !default;
+$df-navbar-dark-hover-focus-border-color: transparent !default;
+
+$df-navbar-toggle-margin-left: 1rem !default;
+$df-navbar-toggle-margin-right: 1rem !default;
+$df-navbar-font-family: 'Amadeus' !default;
+
+$df-navbar-dark-focus-color: $navbar-dark-color !default;
+$df-navbar-dark-active-border-color: $navbar-dark-color !default;
+$df-navbarlight-text-color: $gray-600 !default;
+$df-navbartext-white-space: nowrap !default;
+$df-navbar-collapse-overflow: visible !default;
+$df-navbartext-overflow: hidden !default;
+$df-navbartext-text-overflow: ellipsis !default;
+$df-navbartext-margin-left: $df-navbar-nav-link-padding-left !default;
+
+$df-superheader-border-bottom: $border-width solid $gray-300 !default;
+$df-superheader-navbar-boxshadow: none !default;
+$df-superheader-firstnav-padding-y: 0rem !default;
+$df-superheader-firstnav-padding-x: 0rem !default;
+$df-superheader-firstnav-padding: $df-superheader-firstnav-padding-y $df-superheader-firstnav-padding-x !default;
+$df-navbar-toggle-icon-width: 1.5rem !default;
+$df-navbar-toggle-icon-height: 1.5rem !default;
+$df-navbar-toggle-border: 0 !default;
+$df-navbar-nav-link-active-color: $primary !default;
+$df-navbar-nav-link-focus-color: $navbar-light-color !default;
+$df-navbar-nav-link-focus-bg: $white !default;
+$df-navbar-dark-toggler-hover-bg: df-getBGHoverColor() !default;
+$df-navbar-light-toggler-hover-bg: df-getBGSecondaryHoverColor() !default;
+$df-navbar-dropdown-menu-collapse-margin: 0 $df-navbar-nav-link-padding-right 0 $df-navbar-nav-link-padding-left !default;
+$df-navbar-dropdown-menu-collapse-box-shadow: none !default;
+$df-navbar-dropdown-menu-collapse-last-item-margin-bottom: $df-navbar-nav-link-padding-bottom !default;
+
+$df-navbar-superheader-height: calc(
+  #{$df-navbarbrand-min-height + 2 * $df-superheader-firstnav-padding-y + $df-navbar-height} + #{$border-width}
+) !default;