@design-factory/styles 21.0.0-next.0

package/scss/components/slider/_slider.scss

@@ -0,0 +1,402 @@
+@use 'slider.mixins' as slider-mixins;
+
+.ngx-slider.ngx-slider {
+  /* Variables created from ngx-slider */
+  $df-slider-margin: 0.9375rem; // $sliderMargin
+  $df-slider-margin-with-label: 2.1875rem; // $sliderMarginWithLabel
+
+  // Bar
+  $df-slider-bar-selected-color: var(--df-color-primary-main-default-background); // $barFillColor
+  $df-slider-bar-color: $gray-300; // $barNormalColor
+  $df-slider-bar-size: 0.25rem; // $barDimension
+  $df-slider-bar-disabled-color: var(--df-disabled-bg-color); // $barDisabledFillColor
+  $df-slider-bar-selected-disabled-color: var(--df-disabled-color); // $barDisabledFillColor
+  $df-slider-bar-leftout-selection-color: $red; // $barLeftOutSelectionColor
+  $df-slider-bar-rightout-selection-color: $green; // $barRightOutSelectionColor
+
+  // Pointer
+  $df-slider-pointer-color: var(--df-color-primary-main-default-background); // $handleBgColor
+  $df-slider-pointer-box-shadow: var(--df-primary-500); // $handleBgColor
+  $df-slider-pointer-size: 1.25rem; // $handleSize
+  $df-slider-pointer-disabled-color: var(--df-disabled-color); // $handleDisabledColor
+  $df-slider-pointer-hover-color: var(--df-primary-700); // $handleHoverColor
+  $df-slider-pointer-active-color: var(--df-color-primary-main-default-background); // $handleActiveColor
+
+  // Labels
+  $df-slider-bubble-padding-y: 0.0625rem; // $bubblePaddingVertical
+  $df-slider-bubble-padding-x: 0.1875rem; // $bubblePaddingHorizontal
+  $df-slider-label-color: inherit; // $labelTextColor
+  $df-slider-label-size: 1rem; // $labelFontSize
+  $df-slider-label-limit-color: $df-slider-label-color; // $limitLabelTextColor
+
+  // Tick
+  $df-slider-tick-height: 0.625rem; // $ticksHeigh
+  $df-slider-tick-width: 0.625rem; // $ticksWidth
+  $df-slider-tick-value-position: -2.125rem; // $ticksValuePosition
+  $df-slider-tick-value-position-vertical: 1.5rem; // $ticksValuePositionOnVertical
+  $df-slider-tick-color: $df-slider-bar-color; // $ticksColor
+  $df-slider-tick-selected-color: $df-slider-bar-selected-color; // $selectedTicksColor
+  $df-slider-tick-legend-position: 1.5rem; // $ticksLegendPosition
+  $df-slider-tick-legend-max-width: 3.125rem; // $tickLegendMaxWidth
+
+  /* New variable */
+  // Bar
+  $df-slider-bar-size-sm: 0.25rem;
+  $df-slider-bar-size-lg: 0.3125rem;
+
+  // Pointer
+  $df-slider-pointer-size-sm: 1rem;
+  $df-slider-pointer-size-lg: 1.5rem;
+  $df-slider-pointer-hover-border-color: var(--df-primary-800);
+  $df-slider-pointer-hover-border-width: 0.0625rem;
+
+  // Labels
+  $df-slider-label-size-sm: 0.875rem;
+  $df-slider-label-size-lg: 1.125rem;
+  $df-slider-label-disabled-color: var(--df-disabled-color); // TODO check color
+
+  // Slider animation duration
+  $df-slider-animation-duration: 0.3s;
+  $df-slider-vertical-margin: 20px;
+
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  vertical-align: middle;
+  user-select: none;
+  touch-action: pan-y;
+  // override
+  @include slider-mixins.setSliderSize(
+    $df-slider-bar-size,
+    $df-slider-pointer-size,
+    $df-slider-label-size,
+    $df-slider-tick-height,
+    $df-slider-tick-width
+  );
+
+  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-visible,
+    &.ngx-slider-active {
+      --df-box-shadow-color: #{$df-slider-pointer-box-shadow};
+      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;
+        background-color: $df-slider-pointer-hover-color;
+        &:focus-visible,
+        &.ngx-slider-active {
+          --df-box-shadow-color: #{$df-slider-pointer-hover-color};
+        }
+      }
+    }
+
+    .ngx-slider-pointer-max {
+      &:hover {
+        border: $df-slider-pointer-hover-border-width solid $df-slider-pointer-hover-border-color;
+        background-color: $df-slider-pointer-hover-color;
+        &:focus-visible,
+        &.ngx-slider-active {
+          --df-box-shadow-color: #{$df-slider-pointer-hover-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 slider-mixins.setSliderSize(
+      $df-slider-bar-size-sm,
+      $df-slider-pointer-size-sm,
+      $df-slider-label-size-sm,
+      $df-slider-tick-height,
+      $df-slider-tick-width
+    );
+  }
+
+  &.df-slider-lg {
+    // add
+    @include slider-mixins.setSliderSize(
+      $df-slider-bar-size-lg,
+      $df-slider-pointer-size-lg,
+      $df-slider-label-size-lg,
+      $df-slider-tick-height,
+      $df-slider-tick-width
+    );
+  }
+}

package/scss/components/speechbubble/_speechbubble.mixin.scss

@@ -0,0 +1,28 @@
+@mixin speech-color($color, $bg-color) {
+  ul::after,
+  li {
+    background: $bg-color;
+    color: $color;
+  }
+  li:last-child::after {
+    border-bottom-color: $bg-color;
+  }
+}
+
+@mixin speech-orientation($tail, $speech-tail-factor, $speech-gap, $speech-size) {
+  li:last-child::after {
+    border-#{$tail}: #{$speech-tail-factor * $speech-gap} solid transparent;
+    border-#{$tail}-width: round(#{$speech-tail-factor * $speech-gap}, 1px);
+    #{$tail}: -1 * $speech-gap;
+    #{$tail}: round(-1 * $speech-gap, 1px);
+  }
+  &.df-speech {
+    li:last-child {
+      border-bottom-#{$tail}-radius: 0;
+    }
+    ul::after {
+      #{$tail}: -1 * $speech-size;
+      #{$tail}: round(-1 * $speech-size, 1px);
+    }
+  }
+}

package/scss/components/speechbubble/_speechbubble.scss

@@ -0,0 +1,107 @@
+@use 'speechbubble.mixin' as speechbubble-mixin;
+
+.df-speech {
+  $df-speech-size: 2.25em;
+  $df-speech-gap: 0.25em;
+  $df-speech-tail-factor: 1.11;
+
+  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: 0.125em;
+    line-height: 1.5em;
+    border-radius: var(--df-borderRadius-main-medium);
+    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: 0.375em var(--df-spacing-5);
+    margin-bottom: 0;
+  }
+
+  &.df-speech-left {
+    @include ltr {
+      @include speechbubble-mixin.speech-orientation('left', $df-speech-tail-factor, $df-speech-gap, $df-speech-size);
+    }
+    @include rtl {
+      @include speechbubble-mixin.speech-orientation('right', $df-speech-tail-factor, $df-speech-gap, $df-speech-size);
+    }
+  }
+
+  &.df-speech-right {
+    @include ltr {
+      @include speechbubble-mixin.speech-orientation('right', $df-speech-tail-factor, $df-speech-gap, $df-speech-size);
+    }
+    @include rtl {
+      @include speechbubble-mixin.speech-orientation('left', $df-speech-tail-factor, $df-speech-gap, $df-speech-size);
+    }
+  }
+
+  &.df-speech-interlocutor {
+    @include speechbubble-mixin.speech-color(
+      var(--df-color-inert-neutral-main-foreground),
+      var(--df-color-primary-subtle-background)
+    );
+    @extend .df-speech-left;
+
+    //Enable avatar
+    ul {
+      @include ltr {
+        left: #{$df-speech-size};
+      }
+      @include rtl {
+        right: #{$df-speech-size};
+      }
+      position: relative;
+      &::after {
+        display: inherit;
+      }
+    }
+  }
+
+  &.df-speech-user {
+    @include speechbubble-mixin.speech-color(
+      var(--df-color-primary-main-default-foreground),
+      var(--df-color-primary-main-default-background)
+    );
+    @extend .df-speech-right;
+  }
+
+  .df-font-sm & {
+    li {
+      border-radius: var(--df-borderRadius-main-small);
+    }
+  }
+  .df-font-lg & {
+    li {
+      border-radius: var(--df-borderRadius-main-large);
+    }
+  }
+}

package/scss/components/spinner/_spinner.scss

@@ -0,0 +1,68 @@
+.spinner-border {
+  overflow: visible;
+  border-color: var(--df-color-inert-neutral-main-background);
+  outline: 0.5px solid var(--df-color-progressIndicator-main-border);
+  border-left-color: var(--df-color-primary-main-default-background);
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0.5px solid var(--df-color-progressIndicator-main-border);
+    border-radius: 50%;
+  }
+
+  &.spinner-border-sm {
+    --df-spinner-width: 1.875rem; //30px
+    --df-spinner-height: 1.875rem; //30px
+  }
+
+  &.spinner-border-lg {
+    --df-spinner-width: 3rem; //48px
+    --df-spinner-height: 3rem; //48px
+  }
+}
+
+.df-spinner-border-dark {
+  border-color: var(--df-color-inert-neutral-alt-background);
+  outline-color: var(--df-color-progressIndicator-alt-border);
+  border-left-color: var(--df-color-primary-alt-default-background);
+
+  &::before {
+    border-color: var(--df-color-progressIndicator-alt-border);
+  }
+}
+
+.btn {
+  .spinner-border-sm {
+    --df-spinner-width: 1rem;
+    --df-spinner-height: 1rem;
+  }
+  &.btn-sm {
+    .spinner-border-sm {
+      --df-spinner-width: 0.875rem;
+      --df-spinner-height: 0.875rem;
+    }
+  }
+  &.btn-lg {
+    .spinner-border-sm {
+      --df-spinner-width: 1.125rem;
+      --df-spinner-height: 1.125rem;
+    }
+  }
+}
+
+.df-progressindicator-backdrop,
+.df-progressindicator-container {
+  z-index: 1080;
+}
+
+.df-progressindicator-backdrop {
+  &.df-progressindicator-backdrop-global {
+    background-color: var(--df-color-backdrop-background);
+  }
+  &.df-progressindicator-backdrop-contextual {
+    background-color: var(--df-color-neutral-alt-default-background);
+  }
+}

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

@@ -0,0 +1,5 @@
+$spinner-width: 2.25rem !default; //36px
+$spinner-border-width: 0.19em !default;
+
+$spinner-width-sm: 1.8em !default;
+$spinner-border-width-sm: 0.095em !default;

package/scss/components/spinner/_spinner_container.scss

@@ -0,0 +1,43 @@
+body.df-progressindicator-open {
+  overflow: hidden;
+}
+
+#{$df-css-namespace-selector} {
+  &.df-progressindicator-backdrop,
+  &.df-progressindicator-container {
+    position: fixed;
+    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;
+    background-color: transparent;
+    &.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/scss/components/stepper/_stepper.mixins.scss

@@ -0,0 +1,22 @@
+@mixin stepper-size($icon-size, $outline-icon-font-size, $padding-x, $padding-y) {
+  .df-stepper-outline-icon.fa-exclamation-triangle::before {
+    font-size: $outline-icon-font-size;
+  }
+
+  .df-stepper-step-circle {
+    width: $icon-size;
+    height: $icon-size;
+    min-width: $icon-size;
+    line-height: $icon-size;
+  }
+
+  .df-stepper-step {
+    padding: $padding-y $padding-x;
+
+    &.flex-column ~ .df-stepper-line-wrapper {
+      .df-stepper-line {
+        padding-top: $padding-y;
+      }
+    }
+  }
+}