@design-factory/design-factory 15.2.0

package/styles/scss/components/inputs/_inputs.scss

@@ -0,0 +1,290 @@
+@use 'sass:map';
+@use 'sass:string';
+
+@import 'inputs.mixin';
+
+%input-group-common {
+  @include transition($input-transition); // default bootstrap input has this property
+  background-color: $df-iwi-input-group-bg-color;
+  &.df-disabled {
+    &, .input-group-text {
+      background-color: $df-iwi-input-group-disabled-bg-color;
+      cursor: $df-disabled-cursor;
+    }
+  }
+  align-items: center;
+  border-top: $input-border-width solid $input-border-color;
+  border-bottom: $input-border-width solid $input-border-color;
+
+  // This class is to be able to remove the icon in an input with icon and to come back to a normal input look
+  // even if the html of the input group is staying.
+  &.df-is-empty {
+    padding-left: $df-iwi-emptyspace-padding;
+    padding-right: $df-iwi-emptyspace-padding;
+    .input-group-text {
+      display: none;
+    }
+  }
+
+  button.input-group-text {
+    &:not(:disabled):not(.disabled) {
+      &:hover {
+        &:before {
+          background-color: $df-iwi-icon-hover-bg-color;
+          cursor: $df-cursor-type;
+        }
+      }
+    }
+    &:disabled,
+    &.disabled {
+      cursor: $df-disabled-cursor;
+      background-color: $df-iwi-input-group-disabled-bg-color;
+    }
+  }
+
+  .input-group-text {
+    height: 100%;
+    width: 100%;
+    border: none;
+    padding: 0;
+    background-color: $df-iwi-input-group-text-bg-color;
+    &:before {
+      font-family: $df-font-family;
+      font-size: $df-iwi-icon-font-size;
+      height: $df-iwi-icon-height;
+      width: $df-iwi-icon-width;
+      border-radius: $df-iwi-icon-border-radius;
+      line-height: $df-iwi-icon-line-height;
+    }
+    &:focus {
+      outline: none; // override mandatory
+      &:before {
+        box-shadow: $df-iwi-focused-box-shadow;
+      }
+    }
+  }
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  display: none;
+}
+
+%df-iwi-icon {
+  color: $df-iwi-icon-font-color;
+  font-family: $df-font-family;
+  font-size: $df-iwi-icon-font-size;
+  height: $df-iwi-icon-height;
+  width: $df-iwi-icon-width;
+  border-radius: $df-iwi-icon-border-radius;
+  line-height: $df-iwi-icon-line-height;
+}
+
+.input-group.df-input-append {
+  input.df-input-withicon.append {
+    @include ltr {
+      border-right-color: $df-iwi-border-between-color; // override mandatory
+      @include df-iwi-root-right('.df-input-datepicker-range') {
+        border-left: $df-iwi-dpr-to-border-left !important;
+        border-top-left-radius: $df-iwi-dpr-to-border-radius-top-left;
+        border-bottom-left-radius: $df-iwi-dpr-to-border-radius-bottom-left;
+      }
+      @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+        border-left: $df-iwi-dpr-focus-border !important;
+      }
+    }
+    @include rtl {
+      border-left-color: $df-iwi-border-between-color; // override mandatory
+      @include df-iwi-root-right('.df-input-datepicker-range') {
+        border-right: $df-iwi-dpr-to-border-left !important;
+        border-top-right-radius: $df-iwi-dpr-to-border-radius-top-left;
+        border-bottom-right-radius: $df-iwi-dpr-to-border-radius-bottom-left;
+      }
+      @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+        border-right: $df-iwi-dpr-focus-border !important;
+      }
+    }
+
+    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+      border-top: $df-iwi-dpr-focus-border !important;
+      border-bottom: $df-iwi-dpr-focus-border !important;
+    }
+
+    @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
+      border-top: $df-iwi-dpr-focus-border !important;
+      border-bottom: $df-iwi-dpr-focus-border !important;
+    }
+
+    box-shadow: none; // override mandatory
+    &:focus {
+      @include ltr {
+        border-right-color: $df-iwi-border-between-color; // override mandatory
+      }
+      @include rtl {
+        border-left-color: $df-iwi-border-between-color; // override mandatory
+      }
+      box-shadow: none; // override mandatory
+    }
+  }
+
+  @each $state, $data in $form-validation-states {
+    @include df-input-with-icon-validation-state($state, map.get($data, color), 'append');
+  }
+
+  .input-group-append {
+    @extend %input-group-common;
+    @include ltr {
+      margin-left: $df-iwi-group-append-margin-left;
+      border-right: $input-border-width solid $input-border-color;
+      border-radius: $input-border-radius;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      @include df-iwi-root-left('.df-input-datepicker-range') {
+        border-top-right-radius: $df-iwi-dpr-from-border-radius-top-right;
+        border-bottom-right-radius: $df-iwi-dpr-from-border-radius-bottom-right;
+        border-right: $df-iwi-dpr-from-border-right;
+      }
+      @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
+        border-right: $df-iwi-dpr-focus-border !important;
+      }
+    }
+    @include rtl {
+      margin-right: $df-iwi-group-append-margin-left;
+      border-left: $input-border-width solid $input-border-color;
+      border-radius: $input-border-radius 0 0 $input-border-radius;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      @include df-iwi-root-left('.df-input-datepicker-range') {
+        border-top-left-radius: $df-iwi-dpr-from-border-radius-top-right;
+        border-bottom-left-radius: $df-iwi-dpr-from-border-radius-bottom-right;
+        border-left: $df-iwi-dpr-from-border-right;
+      }
+      @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
+        border-left: $df-iwi-dpr-focus-border !important;
+      }
+    }
+    @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
+      border-top: $df-iwi-dpr-focus-border !important;
+      border-bottom: $df-iwi-dpr-focus-border !important;
+    }
+    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+      border-top: $df-iwi-dpr-focus-border !important;
+      border-bottom: $df-iwi-dpr-focus-border !important;
+    }
+    padding-left: $df-iwi-append-text-padding-left;
+    padding-right: $df-iwi-append-text-padding-right;
+    border-radius: $input-border-radius;
+  }
+
+  &.df-focused .input-group-append {
+    @include ltr {
+      border-color: $df-iwi-focused-border-color;
+      border-left-color: $df-iwi-focused-border-between-color;
+    }
+    @include rtl {
+      border-color: $df-iwi-focused-border-color;
+      border-right-color: $df-iwi-focused-border-between-color;
+    }
+  }
+}
+
+.input-group.df-input-prepend {
+  input.df-input-withicon.prepend {
+    @include ltr {
+      border-left-color: $df-iwi-border-between-color; // override mandatory
+    }
+    @include rtl {
+      border-right-color: $df-iwi-border-between-color; // override mandatory
+    }
+    box-shadow: none; // override mandatory
+    padding-left: 0px; // override mandatory
+    &:focus {
+      @include ltr {
+        border-left-color: $df-iwi-border-between-color; // override mandatory
+      }
+      @include rtl {
+        border-right-color: $df-iwi-border-between-color; // override mandatory
+      }
+      box-shadow: none; // override mandatory
+    }
+  }
+
+  @each $state, $data in $form-validation-states {
+    @include df-input-with-icon-validation-state($state, map.get($data, color), 'prepend');
+  }
+
+  .input-group-prepend {
+    @extend %input-group-common;
+    @include ltr {
+      border-left: $input-border-width solid $input-border-color;
+      margin-right: $df-iwi-group-prepend-margin-right;
+      padding-left: $df-iwi-prepend-text-padding-left;
+      padding-right: $df-iwi-prepend-text-padding-right;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    @include rtl {
+      border-right: $input-border-width solid $input-border-color;
+      margin-left: $df-iwi-group-prepend-margin-right;
+      padding-right: $df-iwi-prepend-text-padding-left;
+      padding-left: $df-iwi-prepend-text-padding-right;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    border-radius: $input-border-radius;
+  }
+
+  &.df-focused .input-group-prepend {
+    @include ltr {
+      border-color: $df-iwi-focused-border-color;
+      border-right-color: $df-iwi-focused-border-between-color;
+    }
+    @include rtl {
+      border-color: $df-iwi-focused-border-color;
+      border-left-color: $df-iwi-focused-border-between-color;
+    }
+  }
+}
+
+.input-group.df-focused {
+  border: none;
+}
+
+.input-group {
+  $validation-messages: "";
+  @each $state in map-keys($form-validation-states) {
+    $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
+  }
+
+  // RTL support
+  @include rtl {
+    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+      // todo maybe add margin-left: 0;
+      // also see the RTL
+      margin-right: -$input-border-width;
+    }
+  }
+
+  // TODO - Remove it when ngbootstrap dropdown will be compliant with Bootstrap
+  &:not(.has-validation) {
+    > .dropdown:not(:last-child) {
+      > .dropdown-toggle {
+        @include border-end-radius(0);
+      }
+    }
+  }
+  > .dropdown:not(:first-child) {
+    > .dropdown-toggle {
+      @include border-start-radius(0);
+    }
+  }
+
+  > .form-control + .form-control {
+    @include ltr {
+      margin-left: $df-iwi-group-prepend-margin-right;
+    }
+    @include rtl {
+      margin-right: $df-iwi-group-prepend-margin-right;
+    }
+  }
+}

package/styles/scss/components/inputs/_inputs.variables.scss

@@ -0,0 +1,41 @@
+// iwi is for input with icon
+// TODO factorize the common variables from this?
+$df-iwi-group-margin-between: -2 * $border-width !default;
+$df-iwi-group-append-margin-left: $df-iwi-group-margin-between !default;
+$df-iwi-group-prepend-margin-right: $df-iwi-group-margin-between !default;
+$df-iwi-focused-box-shadow: $df-focused-box-shadow !default;
+$df-iwi-append-text-padding-right: 0.375rem !default;
+$df-iwi-append-text-padding-left: 0.375rem !default;
+$df-iwi-prepend-text-padding-right: 0.375rem !default;
+$df-iwi-prepend-text-padding-left: 0.375rem !default;
+$df-iwi-input-group-bg-color: $input-bg !default;
+$df-iwi-input-group-text-bg-color: $df-iwi-input-group-bg-color !default;
+$df-iwi-input-group-disabled-bg-color: $df-disabled-bg-color !default;
+$df-iwi-emptyspace-padding: 1px !default; // to maintain the border radius visible it can not be 0px
+$df-iwi-border-between-color: transparent !default;
+$df-iwi-focused-border-between-color: $df-iwi-border-between-color !default;
+$df-iwi-icon-hover-bg-color: $df-hover-bg-color !default;
+$df-iwi-icon-font-size: 1rem !default;
+$df-iwi-icon-height: 1.5rem !default;
+$df-iwi-icon-width: 1.5rem !default;
+$df-iwi-icon-border-radius: 50% !default;
+$df-iwi-icon-line-height: 1.5rem !default;
+$df-iwi-focused-border-color: $input-focus-border-color !default;
+$df-iwi-icon-display: inline-block !default;
+$df-iwi-icon-text-align: center !default;
+$df-iwi-icon-font-color: $df-font-icon-color !default;
+$df-iwi-cross-line-height: 1rem !default;
+$df-focused-cross-icon: '\ee5c' !default; // icon-times from DF icons
+$df-focused-cross-font-size: $df-iwi-icon-font-size !default;
+$df-focused-cross-border-radius: $df-iwi-icon-border-radius !default;
+$df-focused-cross-hover-background-color: $df-iwi-icon-hover-bg-color !default;
+
+$df-iwi-dpr-from-border-right: none !default;
+$df-iwi-dpr-from-border-radius-top-right: 0 !default;
+$df-iwi-dpr-from-border-radius-bottom-right: 0 !default;
+
+$df-iwi-dpr-to-border-left: none !default;
+$df-iwi-dpr-to-border-radius-top-left: 0 !default;
+$df-iwi-dpr-to-border-radius-bottom-left: 0 !default;
+
+$df-iwi-dpr-focus-border: $df-focused-border !default;

package/styles/scss/components/link/_link.mixins.scss

@@ -0,0 +1,190 @@
+@import 'link.variables';
+
+@mixin df-link-normal {
+  color: $df-link-color;
+  border-bottom: $df-link-border-bottom;
+}
+
+@mixin df-link-hover {
+  color: $df-link-hover-color;
+  background-color: $df-link-hover-background;
+  border-bottom-width: $df-link-hover-border-bottom-width;
+  text-decoration: none;
+}
+
+@mixin df-link-visited {
+  color: $df-link-visited-color;
+  border-bottom-color: $df-link-visited-color;
+  text-decoration: none;
+}
+
+@mixin df-link-focus {
+  outline: $df-link-focus-outline;
+  outline-offset: $df-link-focus-outline-offset;
+  box-shadow: $df-link-focus-box-shadow;
+}
+
+@mixin df-link-visited-hover {
+  background-color: $df-link-visited-hover-background;
+  border-bottom-width: $df-link-visited-hover-border-bottom-width;
+}
+
+@mixin df-link-disabled {
+  color: $df-link-disabled-color;
+  display: $df-link-disabled-display;
+  cursor: $df-link-disabled-cursor;
+  text-decoration: $df-link-disabled-text-decoration;
+  border-bottom-color: $df-link-disabled-border-bottom-color;
+  background-color: $df-link-disabled-background;
+  outline: none;
+  box-shadow: none;
+}
+
+@mixin df-link-active {
+  color: $df-link-active-color;
+  border-bottom-width: $df-link-active-border-bottom-width;
+  border-bottom-color: $df-link-active-color;
+  background-color: $df-link-active-background;
+}
+
+@mixin df-link-external-content {
+  content: $df-link-external-icon;
+  font-family: $df-link-external-font-family;
+  position: relative;
+  bottom: $df-link-external-icon-bottom;
+  font-size: $df-link-external-icon-size;
+}
+
+@mixin df-link {
+  &:link {
+    @include df-link-normal;
+  }
+
+  &:hover:not([aria-disabled='true']) {
+    @include df-link-hover;
+  }
+
+  &:visited {
+    @include df-link-visited;
+  }
+
+  &:visited:hover {
+    @include df-link-visited;
+    @include df-link-visited-hover;
+  }
+
+  &:active:not([aria-disabled='true']) {
+    @include df-link-active;
+  }
+
+  &:visited:active {
+    @include df-link-active;
+  }
+
+  &:focus {
+    @include df-link-focus;
+  }
+
+  &[aria-disabled='true'] {
+    &:hover,
+    &:active,
+    &:visited,
+    &:visited:hover,
+    &:link {
+      @include df-link-disabled;
+    }
+  }
+}
+
+@mixin df-link-more-normal {
+  text-transform: $df-link-more-text-transform;
+  font-weight: $df-font-weight-semi-bold;
+  white-space: nowrap;
+  background-color: $df-link-background;
+
+  .df-link-more-text {
+    white-space: nowrap;
+    color: $df-link-color;
+    text-decoration: none;
+  }
+
+  .df-link-more-icon {
+    position: relative;
+    top: $df-link-more-icon-top;
+    margin-left: $df-link-more-icon-margin-left;
+    vertical-align: inherit;
+  }
+}
+
+@mixin df-link-more-hover {
+  color: $df-link-color;
+  background-color: $df-link-hover-background;
+  text-decoration: none;
+
+  .df-link-more-text {
+    white-space: nowrap;
+    text-decoration: $df-link-more-text-decoration-underline;
+  }
+
+  .df-link-more-icon {
+    text-decoration: none;
+  }
+}
+
+@mixin df-link-more-focus {
+  outline: $df-link-focus-outline;
+  outline-offset: $df-link-focus-outline-offset;
+  box-shadow: $df-link-focus-box-shadow;
+  background-color: $df-link-background;
+
+  .df-link-more-text {
+    white-space: nowrap;
+    text-decoration: $df-link-more-text-decoration-underline;
+  }
+
+  .df-link-more-icon {
+    text-decoration: none;
+  }
+}
+
+@mixin df-link-more-disabled {
+  display: $df-link-disabled-display;
+  cursor: $df-link-disabled-cursor;
+  text-decoration: $df-link-disabled-text-decoration;
+  outline: none;
+  box-shadow: none;
+  background-color: $df-link-disabled-background;
+
+  .df-link-more-text {
+    white-space: nowrap;
+    color: $df-link-disabled-color;
+    text-decoration: $df-link-disabled-text-decoration;
+  }
+
+  .df-link-more-icon {
+    color: $df-link-disabled-color;
+    text-decoration: none;
+  }
+}
+
+@mixin df-link-more {
+  &:link {
+    @include df-link-more-normal;
+  }
+
+  &:hover {
+    @include df-link-more-hover;
+  }
+
+  &:focus {
+    @include df-link-more-focus;
+  }
+
+  &[aria-disabled='true'] {
+    &:hover,
+    &:active,
+    &:link {
+      @include df-link-more-disabled;
+    }
+  }
+}

package/styles/scss/components/link/_link.scss

@@ -0,0 +1,88 @@
+@import 'link.mixins';
+
+p,
+ul:not([class]),
+ol:not([class]) {
+  a {
+    @include df-link();
+  }
+}
+
+a {
+  &[href*='//'], &[href*='mailto'], &.df-link-external {
+    .icon-external-link {
+      display: none;
+    }
+    &:not(.df-link-icononly):after {
+      @include df-link-external-content();
+    }
+  }
+}
+
+.df-link-more {
+  @include df-link-more-normal();
+
+  &:focus {
+    @include df-link-more-focus();
+  }
+
+  &:hover {
+    @include df-link-more-hover();
+  }
+}
+
+.df-link-more-disabled {
+  @include df-link-more-disabled();
+
+  &:hover,
+  &:focus {
+    @include df-link-more-disabled();
+  }
+}
+
+.df-link-more-sm {
+  font-size: $font-size-sm;
+}
+
+.df-link-more-lg {
+  font-size: $font-size-lg;
+}
+
+.df-link-icononly-common {
+  border-radius: $df-link-icononly-border-radius;
+  text-align: $df-link-icononly-text-align;
+  display: $df-link-icononly-display;
+  color: $df-link-icononly-color;
+  text-decoration: $df-link-icononly-decoration;
+  align-items: $df-link-icononly-align;
+  justify-content: $df-link-icononly-justify-content;
+  &:hover {
+    color: $df-link-icononly-color;
+    background-color: $df-link-icononly-hover-bg-color;
+    text-decoration: $df-link-icononly-decoration;
+  }
+  &:focus {
+    box-shadow: $df-focused-box-shadow;
+    outline: $df-link-focus-outline;
+  }
+}
+
+.df-link-icononly {
+  @extend .df-link-icononly-common;
+  line-height: $df-link-icononly-height;
+  height: $df-link-icononly-height;
+  width: $df-link-icononly-height;
+  &-sm {
+    @extend .df-link-icononly-common;
+    line-height: $df-link-icononly-height-sm;
+    height: $df-link-icononly-height-sm;
+    width: $df-link-icononly-height-sm;
+  }
+
+  &-lg {
+    @extend .df-link-icononly-common;
+    line-height: $df-link-icononly-height-lg;
+    height: $df-link-icononly-height-lg;
+    width: $df-link-icononly-height-lg;
+  }
+}

package/styles/scss/components/link/_link.variables.scss

@@ -0,0 +1,55 @@
+$df-link-border-bottom-width: $border-width !default;
+$df-link-border-bottom: $df-link-border-bottom-width solid !default;
+$df-link-color: $primary !default;
+$df-link-hover-color: $df-link-color !default;
+$df-link-background: transparent !default;
+
+$df-link-hover-border-bottom-width: $df-link-border-bottom-width * 2 !default;
+$df-link-hover-background: $df-primary-lighten-60 !default;
+
+$df-link-visited-color: $mystery !default;
+$df-link-visited-border-bottom-width: $df-link-border-bottom-width !default;
+$df-link-visited-hover-border-bottom-width: $df-link-hover-border-bottom-width !default;
+$df-link-visited-border-bottom: $df-link-visited-border-bottom-width solid $df-link-visited-color !default;
+$df-link-visited-hover-background: df-getBGSecondaryHoverColor('mystery') !default;
+
+$df-link-focus-outline: 0 !default;
+$df-link-focus-outline-offset: 0 !default;
+$df-link-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$df-link-disabled-color: $df-disabled-color !default;
+$df-link-disabled-display: inline-block !default;
+$df-link-disabled-cursor: $df-disabled-cursor !default;
+$df-link-disabled-text-decoration: none !default;
+$df-link-disabled-border-bottom-width: $df-link-border-bottom-width !default;
+$df-link-disabled-border-bottom-color: $df-btn-disabled-border-color !default;
+$df-link-disabled-background: transparent !default;
+
+$df-link-active-color: df-getBGActiveColor('primary') !default;
+$df-link-active-border-bottom-width: $df-link-border-bottom-width * 2 !default;
+$df-link-active-background: transparent !default;
+
+$df-link-external-icon: '\00a0\eb03' !default; // Empty space + .icon-external-link
+$df-link-external-icon-bottom: -0.08em !default;
+$df-link-external-icon-size: small !default;
+$df-link-external-font-family: $df-font-family !default;
+
+$df-link-more-text-transform: uppercase !default;
+$df-link-more-text-decoration-underline: underline !default;
+$df-link-more-icon-margin-left: 0.375rem !default;
+$df-link-more-icon-top: 0.125rem !default;
+
+// Icon only link
+$df-link-icononly-height: 2rem !default;
+$df-link-icononly-height-sm: 1.75rem !default;
+$df-link-icononly-height-lg: 2.25rem !default;
+$df-link-icononly-display: flex !default;
+$df-link-icononly-align: center !default;
+$df-link-icononly-justify-content: center !default;
+$df-link-icononly-text-align: center !default;
+$df-link-icononly-color: $gray-600 !default;
+$df-link-icononly-decoration: none !default;
+$df-link-icononly-border-radius: 50% !default;
+$df-link-icononly-hover-bg-color: df-getBGSecondaryHoverColor('secondary') !default;
+$df-link-focus-box-shadow: $df-focused-box-shadow !default;
+$df-link-focus-outline: none !default;

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

@@ -0,0 +1,15 @@
+ol:not(.carousel-indicators) {
+  counter-reset: df-ol-counter;
+  list-style-type: none;
+  padding-left: $df-ol-padding-left;
+  li {
+    counter-increment: df-ol-counter;
+    position: relative;
+    &:before {
+      content: $df-ol-marker-content;
+      font-weight: $df-ol-marker-font-weight;
+      position: absolute;
+      left: $df-ol-marker-left;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+$df-ol-padding-left: 2.5rem !default;
+$df-ol-marker-content: counter(df-ol-counter) '.' '\00a0 ' !default;
+$df-ol-marker-font-weight: $font-weight-bold !default;
+$df-ol-marker-left: -1.75rem !default;