@design-factory/design-factory 15.2.0

package/styles/scss/components/slider/_slider.scss

@@ -0,0 +1,407 @@
+@use 'sass:math';
+
+@mixin setSliderSize($barSize, $pointerSize, $fontSize) {
+  $midPointerSize: math.div($pointerSize, 2);
+  $midBarSize: math.div($barSize, 2);
+
+  height: $barSize;
+
+  .ngx-slider-bar-wrapper {
+    // override
+    margin-top: -$midPointerSize;
+    padding-top: $midPointerSize;
+    height: $pointerSize;
+  }
+
+  .ngx-slider-bar {
+    // override
+    height: $barSize;
+    border-radius: $midBarSize;
+  }
+
+  .ngx-slider-selection {
+    // override
+    border-radius: $midBarSize;
+  }
+
+  .ngx-slider-pointer {
+    // override
+    width: $pointerSize;
+    height: $pointerSize;
+    top: -$midPointerSize + $midBarSize;
+    border-radius: $midPointerSize;
+  }
+
+  .ngx-slider-bubble {
+    // override
+    bottom: $midPointerSize;
+    font-size: $fontSize;
+  }
+
+  .ngx-slider-ticks {
+    // override
+    top: -(math.div($df-slider-tick-height - $barSize, 2));
+  }
+
+  .ngx-slider-tick {
+    // override
+    margin-left: $midPointerSize - math.div($df-slider-tick-width, 2); // for centering
+  }
+
+  &.vertical {
+    // override
+    width: $barSize;
+
+    .ngx-slider-bar-wrapper {
+      margin: 0 0 0 (-$midPointerSize);
+      padding: 0 0 0 $midPointerSize;
+      width: $barSize;
+    }
+
+    .ngx-slider-bar {
+      width: $barSize;
+    }
+
+    .ngx-slider-pointer {
+      @include ltr {
+        left: -$midPointerSize + $midBarSize !important;
+      }
+      @include rtl {
+        left: -$midPointerSize - $midBarSize !important;
+      }
+    }
+
+    .ngx-slider-bubble {
+      @include ltr {
+        left: $midPointerSize + math.div($input-btn-focus-width, 2) !important;
+      }
+      @include rtl {
+        left: $midPointerSize + math.div($input-btn-focus-width, 2) - $barSize !important;
+      }
+    }
+
+    .ngx-slider-ticks {
+      $midSliderTickHeight: math.div($df-slider-tick-height, 2);
+      @include ltr {
+        left: -$midSliderTickHeight + $midBarSize;
+      }
+      @include rtl {
+        left: -$midSliderTickHeight - $midBarSize;
+      }
+    }
+
+    .ngx-slider-tick {
+      margin-top: $midPointerSize - math.div($df-slider-tick-width, 2); // for centering
+    }
+  }
+}
+
+.ngx-slider.ngx-slider {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  vertical-align: middle;
+  user-select: none;
+  touch-action: pan-y;
+  // override
+  @include setSliderSize($df-slider-bar-size, $df-slider-pointer-size, $df-slider-label-size);
+
+  margin: $df-slider-margin-with-label 0 $df-slider-margin 0;
+
+  &[disabled] {
+    cursor: not-allowed;
+
+    .ngx-slider-bar {
+      background: $df-slider-bar-disabled-color;
+    }
+
+    .ngx-slider-pointer,.ngx-slider-draggable,.ngx-slider-tick {
+      cursor: not-allowed;
+    }
+
+    .ngx-slider-pointer,
+    .ngx-slider-pointer:after,
+    .ngx-slider-pointer:hover:after {
+      background-color: $df-slider-pointer-disabled-color;
+    }
+
+    .ngx-slider-selection {
+      background: $df-slider-bar-selected-disabled-color;
+    }
+
+    .ngx-slider-tick {
+      &.ngx-slider-selected {
+        background: $df-slider-bar-selected-disabled-color;
+      }
+    }
+
+    .ngx-slider-bubble {
+      color: $df-slider-label-disabled-color;
+    }
+  }
+
+  .ngx-slider-span {
+    white-space: nowrap;
+    position: absolute;
+    display: inline-block;
+  }
+
+  .ngx-slider-base {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  .ngx-slider-bar-wrapper {
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 1;
+  }
+
+  .ngx-slider-draggable {
+    cursor: move;
+  }
+
+  .ngx-slider-bar {
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    background: $df-slider-bar-color;
+  }
+
+  .ngx-slider-bar-wrapper.ngx-slider-left-out-selection .ngx-slider-bar {
+    background: $df-slider-bar-leftout-selection-color;
+  }
+
+  .ngx-slider-bar-wrapper.ngx-slider-right-out-selection .ngx-slider-bar {
+    background: $df-slider-bar-rightout-selection-color;
+  }
+
+  .ngx-slider-selection {
+    z-index: 2;
+    background: $df-slider-bar-selected-color;
+  }
+
+  .ngx-slider-pointer {
+    cursor: pointer;
+    z-index: 3;
+    background-color: $df-slider-pointer-color;
+
+    &:focus,
+    &.ngx-slider-active {
+      outline: none;
+      box-shadow: $btn-focus-box-shadow;
+    }
+
+    &.ngx-slider-active {
+      z-index: 4;
+      &:after {
+        background-color: $df-slider-pointer-active-color;
+      }
+    }
+  }
+
+  .ngx-slider-bubble {
+    cursor: default;
+    padding: $df-slider-bubble-padding-y $df-slider-bubble-padding-x;
+    color: $df-slider-label-color;
+
+    &.ngx-slider-limit {
+      color: $df-slider-label-limit-color;
+    }
+  }
+
+  .ngx-slider-ticks {
+    box-sizing: border-box;
+    width: 100%;
+    height: 0;
+    position: absolute;
+    margin: 0;
+    z-index: 1;
+    list-style: none;
+  }
+
+  .ngx-slider-ticks-values-under {
+    .ngx-slider-tick-value {
+      top: auto;
+      bottom: $df-slider-tick-value-position - 2;
+    }
+  }
+
+  .ngx-slider-tick {
+    text-align: center;
+    cursor: pointer;
+    width: $df-slider-tick-width;
+    height: $df-slider-tick-height;
+    background: $df-slider-tick-color;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    &.ngx-slider-selected {
+      background: $df-slider-tick-selected-color;
+    }
+  }
+
+  .ngx-slider-tick-value {
+    position: absolute;
+    top: $df-slider-tick-value-position;
+    transform: translate(-50%, 0);
+  }
+
+  .ngx-slider-tick-legend {
+    position: absolute;
+    top: $df-slider-tick-legend-position;
+    transform: translate(-50%, 0);
+    max-width: $df-slider-tick-legend-max-width;
+    white-space: normal;
+  }
+
+  &.vertical {
+    position: relative;
+    vertical-align: top;
+    height: 100%;
+    padding: 0;
+    touch-action: pan-x;
+    margin: 0 $df-slider-vertical-margin;
+
+    .ngx-slider-base {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    }
+
+    .ngx-slider-bar-wrapper {
+      top: auto;
+      left: 0;
+      height: 100%;
+    }
+
+    .ngx-slider-bar {
+      bottom: 0;
+      left: auto;
+      height: 100%;
+    }
+
+    .ngx-slider-pointer {
+      top: auto;
+      bottom: 0;
+    }
+
+    .ngx-slider-bubble {
+      bottom: 0;
+    }
+
+    .ngx-slider-ticks {
+      height: 100%;
+      width: 0;
+      top: 0;
+      z-index: 1;
+    }
+
+    .ngx-slider-tick {
+      vertical-align: middle;
+      margin-left: auto;
+    }
+
+    .ngx-slider-tick-value {
+      left: $df-slider-tick-value-position-vertical;
+      top: auto;
+      transform: translate(0, -28%);
+    }
+
+    .ngx-slider-tick-legend {
+      top: auto;
+      transform: translate(0, -28%);
+      max-width: none;
+      white-space: nowrap;
+      right: $df-slider-tick-legend-position;
+    }
+
+    .ngx-slider-ticks-values-under {
+      .ngx-slider-tick-value {
+        bottom: auto;
+        left: auto;
+        right: $df-slider-tick-value-position-vertical;
+      }
+    }
+  }
+
+  // add
+  &.df-slider-no-ticks {
+    margin: $df-slider-margin 0 $df-slider-margin 0;
+  }
+
+  &:hover:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:not([disabled]) {
+    .ngx-slider-pointer-min {
+      &:hover {
+        border: $df-slider-pointer-hover-border-width solid $df-slider-pointer-hover-border-color;
+      }
+    }
+    .ngx-slider-pointer-max {
+      &:hover {
+        border: $df-slider-pointer-hover-border-width solid $df-slider-pointer-hover-border-color;
+      }
+    }
+  }
+
+  .ngx-slider-model-value,
+  .ngx-slider-model-high,
+  .ngx-slider-combined {
+    font-weight: 500;
+  }
+
+  * {
+    transition: none;
+  }
+
+  &.animate {
+    .ngx-slider-bar-wrapper {
+      transition: all linear $df-slider-animation-duration;
+    }
+
+    .ngx-slider-selection {
+      transition: background-color linear $df-slider-animation-duration;
+    }
+
+    .ngx-slider-pointer {
+      transition: all linear $df-slider-animation-duration;
+
+      &:after {
+        transition: all linear $df-slider-animation-duration;
+      }
+    }
+
+    .ngx-slider-bubble {
+      transition: all linear $df-slider-animation-duration;
+
+      &.ngx-slider-limit {
+        transition: opacity linear $df-slider-animation-duration;
+      }
+
+      &.ngx-slider-combined {
+        transition: opacity linear $df-slider-animation-duration;
+      }
+    }
+
+    .ngx-slider-tick {
+      transition: background-color linear $df-slider-animation-duration;
+    }
+  }
+}
+
+.df-slider-sm {
+  // add
+  @include setSliderSize($df-slider-bar-size-sm, $df-slider-pointer-size-sm, $df-slider-label-size-sm);
+}
+
+.df-slider-lg {
+  // add
+  @include setSliderSize($df-slider-bar-size-lg, $df-slider-pointer-size-lg, $df-slider-label-size-lg);
+}

package/styles/scss/components/slider/_slider.variables.scss

@@ -0,0 +1,58 @@
+/* Variables created from ngx-slider */
+$df-slider-margin: 0.9375rem !default; // $sliderMargin
+$df-slider-margin-with-label: 2.1875rem !default; // $sliderMarginWithLabel
+
+// Bar
+$df-slider-bar-selected-color: $primary !default; // $barFillColor
+$df-slider-bar-color: $gray-300 !default; // $barNormalColor
+$df-slider-bar-size: 0.25rem !default; // $barDimension
+$df-slider-bar-disabled-color: $df-disabled-bg-color !default; // $barDisabledFillColor
+$df-slider-bar-selected-disabled-color: $df-disabled-color !default; // $barDisabledFillColor
+$df-slider-bar-leftout-selection-color: $red !default; // $barLeftOutSelectionColor
+$df-slider-bar-rightout-selection-color: $green !default; // $barRightOutSelectionColor
+
+// Pointer
+$df-slider-pointer-color: $primary !default; // $handleBgColor
+$df-slider-pointer-size: 1.25rem !default; // $handleSize
+$df-slider-pointer-disabled-color: $df-disabled-color !default; // $handleDisabledColor
+$df-slider-pointer-hover-color: $primary !default; // $handleHoverColor
+$df-slider-pointer-active-color: $primary !default; // $handleActiveColor
+
+// Labels
+$df-slider-bubble-padding-y: 0.0625rem !default; // $bubblePaddingVertical
+$df-slider-bubble-padding-x: 0.1875rem !default; // $bubblePaddingHorizontal
+$df-slider-label-color: inherit !default; // $labelTextColor
+$df-slider-label-size: 1rem !default; // $labelFontSize
+$df-slider-label-limit-color: $df-slider-label-color !default; // $limitLabelTextColor
+
+// Tick
+$df-slider-tick-height: 0.625rem !default; // $ticksHeigh
+$df-slider-tick-width: 0.625rem !default; // $ticksWidth
+$df-slider-tick-value-position: -2.125rem !default; // $ticksValuePosition
+$df-slider-tick-value-position-vertical: 1.5rem !default; // $ticksValuePositionOnVertical
+$df-slider-tick-color: $df-slider-bar-color !default; // $ticksColor
+$df-slider-tick-selected-color: $df-slider-bar-selected-color !default; // $selectedTicksColor
+$df-slider-tick-legend-position: 1.5rem !default; // $ticksLegendPosition
+$df-slider-tick-legend-max-width: 3.125rem !default; // $tickLegendMaxWidth
+
+/* New variable */
+// Bar
+$df-slider-bar-size-sm: 0.25rem !default;
+$df-slider-bar-size-lg: 0.3125rem !default;
+
+// Pointer
+$df-slider-pointer-size-sm: 1rem !default;
+$df-slider-pointer-size-lg: 1.5rem !default;
+$df-slider-pointer-hover-border-color: $white !default;
+$df-slider-pointer-hover-border-width: 0.0625rem !default;
+
+// Labels
+$df-slider-label-size-sm: 0.875rem !default;
+$df-slider-label-size-lg: 1.125rem !default;
+$df-slider-label-disabled-color: $df-disabled-color !default; // TODO check color
+/* Layout */
+$df-slider-group-margin: 1rem !default;
+
+// Slider animation duration
+$df-slider-animation-duration: 0.3s !default;
+$df-slider-vertical-margin: 20px !default;

package/styles/scss/components/speechbubble/_speechbubble.scss

@@ -0,0 +1,127 @@
+@mixin speech-color($color) {
+  ul::after,
+  li {
+    background: $color;
+    color: color-contrast($color);
+  }
+  li:last-child::after {
+    border-bottom-color: $color;
+  }
+}
+
+@mixin speech-orientation($tail, $radius) {
+  li:last-child::after {
+    border-#{$tail}: $df-speech-tail-factor * $df-speech-gap solid transparent;
+    #{$tail}: -$df-speech-gap;
+  }
+  &.df-speech {
+    li:last-child {
+      border-radius: $radius;
+    }
+    ul::after {
+      #{$tail}: -$df-speech-size;
+    }
+  }
+}
+
+.df-speech-btn {
+  &.btn {
+    margin-top: $df-speech-btn-padding;
+  }
+  border-radius: $df-speech-btn-border-radius;
+  border: $df-speech-btn-border;
+  background: $df-speech-btn-background-color;
+
+  //Outline overlaps surroundings
+  position: $df-speech-btn-position;
+  &:focus {
+    z-index: $df-speech-btn-z-index;
+  }
+}
+
+.df-speech {
+  ul {
+    display: inline-block;
+    //Deactivate default ul styling
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      margin-bottom: $df-speech-gap;
+      width: $df-speech-size;
+      height: $df-speech-size;
+      border-radius: 100%;
+      display: none; //Avatar is by default disabled
+    }
+  }
+
+  li {
+    padding: $df-speech-btn-padding;
+    line-height: $df-speech-bubble-height;
+    border-radius: $df-speech-border-radius;
+    margin: $df-speech-gap 2 * $df-speech-gap;
+    &:last-child {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 0;
+        height: 0;
+        border-bottom: 2 * $df-speech-tail-factor * $df-speech-gap solid;
+      }
+    }
+  }
+
+  p {
+    padding: $df-speech-padding-y $df-speech-padding-x;
+    margin-bottom: 0;
+  }
+}
+
+.df-speech-left {
+  @include ltr {
+    @include speech-orientation($df-speech-tail-left, $df-speech-tail-radius-left);
+  }
+  @include rtl {
+    @include speech-orientation($df-speech-tail-right, $df-speech-tail-radius-right);
+  }
+}
+
+.df-speech-right {
+  @include ltr {
+    @include speech-orientation($df-speech-tail-right, $df-speech-tail-radius-right);
+  }
+  @include rtl {
+    @include speech-orientation($df-speech-tail-left, $df-speech-tail-radius-left);
+  }
+}
+
+.df-speech-interlocutor {
+  @include speech-color($df-speech-interlocutor-color);
+  @extend .df-speech-left;
+
+  //Enable avatar
+  &.df-speech {
+    ul {
+      @include ltr {
+        left: $df-speech-size;
+      }
+      @include rtl {
+        right: $df-speech-size;
+      }
+      position: relative;
+      &::after {
+        display: inherit;
+      }
+    }
+  }
+}
+
+.df-speech-user {
+  @include speech-color($df-speech-user-color);
+  @extend .df-speech-right;
+}

package/styles/scss/components/speechbubble/_speechbubble.variables.scss

@@ -0,0 +1,19 @@
+$df-speech-size: 2.25em !default;
+$df-speech-bubble-height: 1.5em !default;
+$df-speech-border-radius: 0.25em !default;
+$df-speech-padding-y: 0.375em !default;
+$df-speech-padding-x: 1em !default;
+$df-speech-gap: 0.28em !default;
+$df-speech-tail-factor: 1.11 !default;
+$df-speech-interlocutor-color: $gray-50 !default;
+$df-speech-user-color: $primary !default;
+$df-speech-btn-background-color: $white !default;
+$df-speech-btn-padding: 0.125em !default;
+$df-speech-btn-border-radius: 0 !default;
+$df-speech-btn-border: 0 !default;
+$df-speech-btn-position: relative !default;
+$df-speech-btn-z-index: 1 !default;
+$df-speech-tail-left: 'left' !default;
+$df-speech-tail-radius-left: $df-speech-border-radius $df-speech-border-radius $df-speech-border-radius 0 !default;
+$df-speech-tail-right: 'right' !default;
+$df-speech-tail-radius-right: $df-speech-border-radius $df-speech-border-radius 0 $df-speech-border-radius !default;

package/styles/scss/components/spinner/_spinner.scss

@@ -0,0 +1,88 @@
+.spinner-border {
+  overflow: $df-spinner-overflow;
+  width: $df-spinner-circumference;
+  height: $df-spinner-circumference;
+  border-right-color: $df-spinner-border-color;
+  border-top-color: $df-spinner-border-color;
+  border-bottom-color: $df-spinner-border-color;
+  border-width: $df-spinner-border-width;
+}
+
+.spinner-border-sm {
+  width: $df-spinner-sm-circumference;
+  height: $df-spinner-sm-circumference;
+  border-width: $df-spinner-sm-border-width;
+}
+
+.df-spinner-border-dark {
+  @extend .spinner-border;
+  border-right-color: $df-spinner-dark-border-color;
+  border-top-color: $df-spinner-dark-border-color;
+  border-bottom-color: $df-spinner-dark-border-color;
+}
+
+.btn {
+  .spinner-border-sm {
+    width: $df-spinner-btn-circumference;
+    height: $df-spinner-btn-circumference;
+    @include ltr {
+      margin-left: $df-spinner-btn-margin-with-text;
+    }
+    @include rtl {
+      margin-right: $df-spinner-btn-margin-with-text;
+    }
+  }
+  &.btn-sm {
+    .spinner-border-sm {
+      width: $df-spinner-btn-sm-circumference;
+      height: $df-spinner-btn-sm-circumference;
+    }
+  }
+  &.btn-lg {
+    .spinner-border-sm {
+      width: $df-spinner-btn-lg-circumference;
+      height: $df-spinner-btn-lg-circumference;
+    }
+  }
+}
+
+.df-progressindicator-open {
+  overflow: hidden;
+}
+
+.df-progressindicator-backdrop,
+.df-progressindicator-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $df-progressindicator-container-zindex;
+}
+
+.df-progressindicator-backdrop {
+  &.df-progressindicator-backdrop-global {
+    background-color: $df-progressindicator-backdrop-global-bg-color;
+    opacity: $df-progressindicator-backdrop-global-opacity;
+  }
+  &.df-progressindicator-backdrop-contextual {
+    background-color: $df-progressindicator-backdrop-contextual-bg-color;
+    opacity: $df-progressindicator-backdrop-contextual-opacity;
+  }
+}
+
+.df-progressindicator-container {
+  display: flex;
+  &.df-progressindicator-centered {
+    align-items: center;
+    justify-content: center;
+  }
+  &.df-progressindicator-top {
+    align-items: flex-start;
+    justify-content: center;
+  }
+  &.df-progressindicator-bottom {
+    align-items: flex-end;
+    justify-content: center;
+  }
+}

package/styles/scss/components/spinner/_spinner.variables.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+
+$df-spinner-overflow: visible !default;
+$df-spinner-circumference: 2.7rem !default;
+$df-spinner-sm-circumference: math.div($df-spinner-circumference, 1.5) !default;
+$df-spinner-border-width: 0.19em !default;
+$df-spinner-border-color: $light !default;
+$df-spinner-dark-border-color: $dark-primary !default;
+$df-spinner-sm-border-width: math.div($df-spinner-border-width, 2) !default;
+// Spinner in button
+$df-spinner-btn-circumference: 1.25rem !default;
+$df-spinner-btn-sm-circumference: 1rem !default;
+$df-spinner-btn-lg-circumference: 1.5rem !default;
+$df-spinner-btn-margin-with-text: $df-btn-icon-margin-end !default;
+
+// Advanced progress indicator
+$df-progressindicator-container-zindex: 1080 !default;
+$df-progressindicator-backdrop-global-bg-color: $black !default;
+$df-progressindicator-backdrop-global-opacity: 0.5 !default;
+$df-progressindicator-backdrop-contextual-bg-color: $white !default;
+$df-progressindicator-backdrop-contextual-opacity: 0.5 !default;