@design-factory/design-factory 20.0.2 → 21.0.0-next.0

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

@@ -1,422 +0,0 @@
-@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-visible,
-    &.ngx-slider-active {
-      --#{$prefix}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 {
-          --#{$prefix}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 {
-          --#{$prefix}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 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

@@ -1,59 +0,0 @@
-/* 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: shades-css-var('primary', 'bg-color') !default; // $barFillColor
-$df-slider-bar-color: $gray-300 !default; // $barNormalColor
-$df-slider-bar-size: 0.25rem !default; // $barDimension
-$df-slider-bar-disabled-color: var(--#{$prefix}disabled-bg-color) !default; // $barDisabledFillColor
-$df-slider-bar-selected-disabled-color: var(--#{$prefix}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: shades-css-var('primary', 'bg-color') !default; // $handleBgColor
-$df-slider-pointer-box-shadow: rgba(var($df-slider-pointer-color), 0.25) !default; // $handleBgColor
-$df-slider-pointer-size: 1.25rem !default; // $handleSize
-$df-slider-pointer-disabled-color: var(--#{$prefix}disabled-color) !default; // $handleDisabledColor
-$df-slider-pointer-hover-color: rgba(var($df-slider-pointer-color), 0.25) !default; // $handleHoverColor
-$df-slider-pointer-active-color: shades-css-var('primary', 'bg-color') !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: var(--#{$prefix}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

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

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

@@ -1,27 +0,0 @@
-$df-speech-size: 2.25em !default;
-$df-speech-bubble-height: 1.5em !default;
-$df-speech-border-radius: 0.25em !default;
-$df-speech-border-radius-sm: $df-speech-border-radius !default;
-$df-speech-border-radius-lg: $df-speech-border-radius !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-bg-color: $gray-50 !default;
-$df-speech-interlocutor-color: color-contrast($df-speech-interlocutor-bg-color) !default;
-$df-speech-user-bg-color: shades-css-var('primary', 'bg-color') !default;
-$df-speech-user-color: color-contrast($df-speech-user-bg-color) !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-radius-left-sm: $df-speech-border-radius-sm $df-speech-border-radius-sm $df-speech-border-radius-sm 0 !default;
-$df-speech-tail-radius-left-lg: $df-speech-border-radius-lg $df-speech-border-radius-lg $df-speech-border-radius-lg 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;
-$df-speech-tail-radius-right-sm: $df-speech-border-radius-sm $df-speech-border-radius-sm 0 $df-speech-border-radius-sm !default;
-$df-speech-tail-radius-right-lg: $df-speech-border-radius-lg $df-speech-border-radius-lg 0 $df-speech-border-radius-lg !default;