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

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

@@ -1,126 +0,0 @@
-@use 'sass:meta';
-
-.spinner-border {
-  --#{$prefix}spinner-overflow: #{$df-spinner-overflow};
-  --#{$prefix}spinner-circumference: #{$df-spinner-circumference};
-  --#{$prefix}spinner-border-width: #{$df-spinner-border-width};
-  --#{$prefix}spinner-border-color: #{$df-spinner-border-color};
-  --#{$prefix}spinner-btn-margin-with-text: #{$df-spinner-btn-margin-with-text};
-  --#{$prefix}spinner-outline-width: #{$df-spinner-outline-width};
-  --#{$prefix}spinner-outline-color: #{$df-spinner-outline-color};
-  --#{$prefix}spinner-outline-style: #{$df-spinner-outline-style};
-
-  overflow: var(--#{$prefix}spinner-overflow);
-  width: var(--#{$prefix}spinner-circumference);
-  height: var(--#{$prefix}spinner-circumference);
-  border-right-color: var(--#{$prefix}spinner-border-color);
-  border-top-color: var(--#{$prefix}spinner-border-color);
-  border-bottom-color: var(--#{$prefix}spinner-border-color);
-  border-width: var(--#{$prefix}spinner-border-width);
-
-  outline-width: var(--#{$prefix}spinner-outline-width);
-  outline-color: var(--#{$prefix}spinner-outline-color);
-  outline-style: var(--#{$prefix}spinner-outline-style);
-
-  &::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border-width: var(--#{$prefix}spinner-outline-width);
-    border-style: var(--#{$prefix}spinner-outline-style);
-    border-color: var(--#{$prefix}spinner-outline-color);
-  }
-
-  &.spinner-border-sm {
-    --#{$prefix}spinner-border-width: #{$df-spinner-sm-border-width};
-    --#{$prefix}spinner-circumference: #{$df-spinner-sm-circumference};
-  }
-}
-
-.df-spinner-border-dark {
-  @extend .spinner-border; // seems to extend also the CSS variables
-  --#{$prefix}spinner-border-color: #{$df-spinner-dark-border-color};
-  --#{$prefix}spinner-outline-color: #{$df-darkBackgroundVersion-spinner-outline-color};
-}
-
-@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-  @each $state, $value in $theme-colors {
-    .spinner-border.df-spinner-#{$state} {
-      border-left-color: #{if(
-          $state == 'light',
-          var(--#{$prefix}color-primary-alt-default-background),
-          shades-css-var($state, 'bg-color')
-        )};
-    }
-  }
-}
-
-.btn {
-  .spinner-border-sm {
-    --#{$prefix}spinner-circumference: #{$df-spinner-btn-sm-circumference};
-    @include ltr {
-      margin-left: var(--#{$prefix}spinner-btn-margin-with-text);
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}spinner-btn-margin-with-text);
-    }
-  }
-  &.btn-sm {
-    .spinner-border-sm {
-      --#{$prefix}spinner-circumference: #{$df-spinner-btn-sm-circumference};
-    }
-  }
-  &.btn-lg {
-    .spinner-border-sm {
-      --#{$prefix}spinner-circumference: #{$df-spinner-btn-lg-circumference};
-    }
-  }
-}
-
-.df-progressindicator-open {
-  overflow: hidden;
-}
-
-.df-progressindicator-backdrop,
-.df-progressindicator-container {
-  --#{$prefix}progressindicator-container-zindex: #{$df-progressindicator-container-zindex};
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: var(--#{$prefix}progressindicator-container-zindex);
-}
-
-.df-progressindicator-backdrop {
-  --#{$prefix}progressindicator-backdrop-global-bg-color: #{$df-progressindicator-backdrop-global-bg-color};
-  --#{$prefix}progressindicator-backdrop-global-opacity: #{$df-progressindicator-backdrop-global-opacity};
-  --#{$prefix}progressindicator-backdrop-contextual-bg-color: #{$df-progressindicator-backdrop-contextual-bg-color};
-  --#{$prefix}progressindicator-backdrop-contextual-opacity: #{$df-progressindicator-backdrop-contextual-opacity};
-  &.df-progressindicator-backdrop-global {
-    background-color: var(--#{$prefix}progressindicator-backdrop-global-bg-color);
-    opacity: var(--#{$prefix}progressindicator-backdrop-global-opacity);
-  }
-  &.df-progressindicator-backdrop-contextual {
-    background-color: var(--#{$prefix}progressindicator-backdrop-contextual-bg-color);
-    opacity: var(--#{$prefix}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

@@ -1,30 +0,0 @@
-@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: variable-switch-brand2023('color-inert-neutral-main-background', $light) !default;
-$df-spinner-dark-border-color: variable-switch-brand2023('color-inert-neutral-alt-background', $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;
-
-$df-spinner-outline-color: variable-switch-brand2023('color-progressIndicator-main-border', $gray-700) !default;
-$df-spinner-outline-style: solid !default;
-$df-spinner-outline-width: 0.5px !default;
-
-$df-darkBackgroundVersion-spinner-outline-color: variable-switch-brand2023(
-  'color-progressIndicator-alt-border',
-  $white
-) !default;

package/styles/scss/components/spinner/_spinner_container.scss

@@ -1,43 +0,0 @@
-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/styles/scss/components/stepper/_stepper.mixins.scss

@@ -1,176 +0,0 @@
-@use 'sass:meta';
-
-@mixin df-stepper-fill-number($color, $bg-color, $border-color) {
-  border-color: $border-color;
-  background-color: $bg-color;
-  color: $color;
-}
-
-@mixin df-stepper-common-number() {
-  border-radius: var(--#{$prefix}stepper-icon-border-radius);
-  text-align: var(--#{$prefix}stepper-icon-text-align);
-  padding: var(--#{$prefix}stepper-icon-padding);
-  border-style: var(--#{$prefix}stepper-icon-border-style);
-  border-width: var(--#{$prefix}stepper-border-width);
-  width: var(--#{$prefix}stepper-icon-width);
-  min-width: var(--#{$prefix}stepper-icon-width);
-  height: var(--#{$prefix}stepper-icon-height);
-  line-height: var(--#{$prefix}stepper-icon-height);
-  display: var(--#{$prefix}stepper-icon-display);
-  align-items: var(--#{$prefix}stepper-icon-align-items);
-  justify-content: var(--#{$prefix}stepper-icon-justify-content);
-  > span {
-    width: var(--#{$prefix}stepper-icon-width);
-    min-width: var(--#{$prefix}stepper-icon-width);
-    height: var(--#{$prefix}stepper-icon-height);
-    line-height: var(--#{$prefix}stepper-icon-height);
-  }
-}
-
-@mixin df-stepper-icon-variant($state, $value) {
-  $valuetext: shades-css-var($value, 'text-color');
-  $valuehover: shades-css-var($value, 'text-color');
-  $valueactive: shades-css-var($value, 'text-active-color');
-  $valuebghovercolor: $df-hover-bg-color;
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    $valuehover: shades-css-var($value, 'text-hover-color');
-    $valuebghovercolor: shades-css-var($value, 'bg-hover-alt-color');
-    $valueactive: shades-css-var($value, 'text-active-color');
-  }
-
-  .df-stepper-step-#{$state} {
-    &.btn {
-      &:not(:disabled):not(.disabled) {
-        &:hover,
-        &:hover .df-stepper-label {
-          // override the btn-link feature
-          color: $valuehover;
-          text-decoration: var(--#{$prefix}stepper-text-decoration-hover);
-          background-color: $valuebghovercolor;
-          // Icon with number outline variant
-          .df-stepper-outline-number-#{$state} {
-            @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
-          }
-          // Icon with number plain version
-          .df-stepper-number-#{$state} {
-            @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
-          }
-          .df-stepper-icon::before {
-            background-color: $valuehover;
-          }
-        }
-        &:focus-visible:not(:hover),
-        &:focus-visible:not(:hover) .df-stepper-label {
-          text-decoration: var(--#{$prefix}stepper-text-decoration-focus);
-          color: $valuetext;
-        }
-        &.active,
-        &.active .df-stepper-label,
-        &:active,
-        &:active .df-stepper-label {
-          text-decoration: var(--#{$prefix}stepper-text-decoration-active);
-        }
-        &.active:hover,
-        &.active:hover .df-stepper-label {
-          color: $valuehover;
-          .df-stepper-number-#{$state} {
-            @include df-stepper-fill-number($df-stepper-icon-color, $valuehover, $valuehover);
-          }
-          .df-stepper-outline-number-#{$state} {
-            @include df-stepper-fill-number($valuehover, $df-stepper-outline-bg-color, $valuehover);
-          }
-        }
-        &.active:not(:hover),
-        &.active:not(:hover) .df-stepper-label,
-        &:active,
-        &:active .df-stepper-label,
-        &:active:hover,
-        &:active:hover .df-stepper-label {
-          color: $valueactive;
-          .df-stepper-number-#{$state} {
-            @include df-stepper-fill-number($df-stepper-icon-color, $valueactive, $valueactive);
-          }
-          .df-stepper-outline-number-#{$state} {
-            @include df-stepper-fill-number($valueactive, $df-stepper-outline-bg-color, $valueactive);
-          }
-          .df-stepper-icon::before {
-            background-color: $valueactive;
-          }
-        }
-        @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-          &.btn-link:focus-visible {
-            --#{$prefix}box-shadow-color: #{$valuetext};
-            &:hover {
-              --#{$prefix}box-shadow-color: #{$valuehover};
-            }
-            &:active:not(:hover),
-            &.active:not(:hover) {
-              --#{$prefix}box-shadow-color: #{$valueactive};
-            }
-            box-shadow: $df-btn-focus-box-shadow;
-          }
-        }
-      }
-    }
-    // Icon with number outline variant
-    .df-stepper-outline-number-#{$state} {
-      @include df-stepper-common-number();
-      @include df-stepper-fill-number($valuetext, $df-stepper-outline-bg-color, $valuetext);
-    }
-    // Icon with number plain version
-    .df-stepper-number-#{$state} {
-      @include df-stepper-common-number();
-      @include df-stepper-fill-number($df-stepper-icon-color, $valuetext, $valuetext);
-    }
-
-    .df-stepper-optional-label {
-      // todo correct this
-      text-align: var(--#{$prefix}stepper-optional-label-text-align);
-      color: var(--#{$prefix}stepper-optional-label-color);
-      font-size: var(--#{$prefix}stepper-optional-label-font-size);
-      font-weight: var(--#{$prefix}stepper-optional-label-font-weight);
-    }
-    .df-stepper-icon::before {
-      display: inline-block;
-      text-decoration: none;
-      color: var(--#{$prefix}stepper-icon-color);
-      background-color: $valuetext;
-    }
-    .df-stepper-outline-icon {
-      &::before {
-        display: inline-block;
-        text-decoration: none;
-        background-color: transparent;
-      }
-    }
-    color: $valuetext; // override btn-link
-  }
-}
-
-// Stepper sizes
-@mixin df-stepper-icon-variant-size($color) {
-  // outline variant
-  .df-stepper-outline-number-#{$color} {
-    line-height: var(--#{$prefix}stepper-icon-line-height);
-    width: var(--#{$prefix}stepper-icon-width);
-    min-width: var(--#{$prefix}stepper-icon-width);
-    height: var(--#{$prefix}stepper-icon-height);
-  }
-  .df-stepper-number-#{$color} {
-    line-height: var(--#{$prefix}stepper-icon-line-height);
-    width: var(--#{$prefix}stepper-icon-width);
-    min-width: var(--#{$prefix}stepper-icon-width);
-    height: var(--#{$prefix}stepper-icon-height);
-  }
-}
-
-// Stepper sizes todo font-size
-@mixin df-stepper-size() {
-  .df-stepper-step {
-    /* stepper icon color*/
-    @each $state, $name in $df-stepper-steps-colors {
-      @include df-stepper-icon-variant-size($state);
-    }
-  }
-}

package/styles/scss/components/stepper/_stepper.scss

@@ -1,254 +0,0 @@
-@import 'stepper.mixins';
-
-.df-stepper {
-  --#{$prefix}stepper-border-width: #{$df-stepper-border-width};
-  --#{$prefix}stepper-line-border: #{$df-stepper-line-border};
-  --#{$prefix}stepper-line-completed-border: #{$df-stepper-line-completed-border};
-  --#{$prefix}stepper-icon-border-radius: #{$df-stepper-icon-border-radius};
-  --#{$prefix}stepper-icon-border-style: #{$df-stepper-icon-border-style};
-  --#{$prefix}stepper-icon-color: #{$df-stepper-icon-color};
-  --#{$prefix}stepper-icon-text-align: #{$df-stepper-icon-text-align};
-  --#{$prefix}stepper-icon-width: #{$df-stepper-icon-width};
-  --#{$prefix}stepper-icon-height: #{$df-stepper-icon-height};
-  --#{$prefix}stepper-icon-line-height: #{$df-stepper-icon-line-height};
-  --#{$prefix}stepper-icon-padding: #{$df-stepper-icon-padding};
-  --#{$prefix}stepper-number-line-height: #{$df-stepper-number-line-height};
-  --#{$prefix}stepper-outline-bg-color: #{$df-stepper-outline-bg-color};
-  --#{$prefix}stepper-disabled-color: #{$df-stepper-disabled-color};
-  --#{$prefix}stepper-icon-outline-disabled-color: #{$df-stepper-icon-outline-disabled-color};
-  --#{$prefix}stepper-icon-disabled-bg-color: #{$df-stepper-icon-disabled-bg-color};
-  --#{$prefix}stepper-icon-disabled-border-color: #{$df-stepper-icon-disabled-border-color};
-  --#{$prefix}stepper-icon-disabled-color: #{$df-stepper-icon-disabled-color};
-  --#{$prefix}stepper-icon-outline-disabled-bg-color: #{$df-stepper-icon-outline-disabled-bg-color};
-  --#{$prefix}stepper-icon-outline-disabled-border-color: #{$df-stepper-icon-outline-disabled-border-color};
-  --#{$prefix}stepper-step-min-width: #{$df-stepper-step-min-width};
-  --#{$prefix}stepper-step-padding-y: #{$df-stepper-step-padding-y};
-  --#{$prefix}stepper-step-padding-x: #{$df-stepper-step-padding-x};
-  --#{$prefix}stepper-step-height: #{$df-stepper-step-height};
-  --#{$prefix}stepper-hl-height: #{$df-stepper-hl-height};
-  --#{$prefix}stepper-hl-margin: #{$df-stepper-hl-margin};
-  --#{$prefix}stepper-optional-label-text-align: #{$df-stepper-optional-label-text-align};
-  --#{$prefix}stepper-optional-label-color: #{$df-stepper-optional-label-color};
-  --#{$prefix}stepper-optional-label-font-size: #{$df-stepper-optional-label-font-size};
-  --#{$prefix}stepper-optional-label-font-weight: #{$df-stepper-optional-label-font-weight};
-  --#{$prefix}stepper-div-step-border: #{$df-stepper-div-step-border};
-  --#{$prefix}stepper-label-max-width: #{$df-stepper-label-max-width};
-  --#{$prefix}stepper-line-completed-color: #{$df-stepper-line-completed-color};
-  --#{$prefix}stepper-line-default-color: #{$df-stepper-line-default-color};
-  --#{$prefix}stepper-disabled-opacity: #{$df-stepper-disabled-opacity};
-  --#{$prefix}stepper-font-size: #{$df-stepper-font-size};
-  --#{$prefix}stepper-font-size-sm: #{$df-stepper-font-size-sm};
-  --#{$prefix}stepper-font-size-lg: #{$df-stepper-font-size-lg};
-  --#{$prefix}stepper-text-decoration: #{$df-stepper-text-decoration};
-  --#{$prefix}stepper-text-decoration-hover: #{$df-stepper-text-decoration-hover};
-  --#{$prefix}stepper-text-decoration-focus: #{$df-stepper-text-decoration-focus};
-  --#{$prefix}stepper-text-decoration-active: #{$df-stepper-text-decoration-active};
-  --#{$prefix}vertical-stepper-panel-margin-y: #{$df-vertical-stepper-panel-margin-y};
-  --#{$prefix}vertical-stepper-panel-margin-start: #{$df-vertical-stepper-panel-margin-start};
-  --#{$prefix}vertical-stepper-panel-padding-start: #{$df-vertical-stepper-panel-padding-start};
-  --#{$prefix}vertical-stepper-line-position: #{$df-vertical-stepper-line-position};
-  --#{$prefix}stepper-icon-display: #{$df-stepper-icon-display};
-  --#{$prefix}stepper-icon-align-items: #{$df-stepper-icon-align-items};
-  --#{$prefix}stepper-icon-justify-content: #{$df-stepper-icon-justify-content};
-  --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size};
-  --#{$prefix}stepper-border-radius: #{$df-stepper-border-radius};
-  --#{$prefix}stepper-border-radius-sm: #{$df-stepper-border-radius-sm};
-  --#{$prefix}stepper-border-radius-lg: #{$df-stepper-border-radius-lg};
-  align-items: stretch;
-  display: flex;
-  flex-direction: row;
-
-  &.df-vertical-stepper {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .btn {
-    --#{$prefix}btn-font-size: #{$df-stepper-font-size};
-    --#{$prefix}btn-border-radius: var(--#{$prefix}stepper-border-radius);
-  }
-
-  .df-stepper-step {
-    border: var(--#{$prefix}stepper-div-step-border); // override to have same border as btn
-    height: var(--#{$prefix}stepper-step-height);
-    display: flex;
-    flex-direction: column;
-    min-width: var(--#{$prefix}stepper-step-min-width); // TO work with the negative margin even in mobile version
-    // put it depending of the button padding and as the btn-sm size
-    padding: var(--#{$prefix}stepper-step-padding-y) var(--#{$prefix}stepper-step-padding-x);
-    align-items: center;
-
-    &.active {
-      &:not(:hover) {
-        background-color: $body-bg;
-      }
-
-      .df-stepper-label {
-        text-decoration: none;
-      }
-    }
-
-    &:not(.flex-row) ~ .df-stepper-line-wrapper {
-      .df-stepper-line {
-        padding-top: var(--#{$prefix}stepper-step-padding-y);
-      }
-    }
-
-    .df-stepper-icon,
-    .df-stepper-outline-icon {
-      & > * {
-        display: none;
-      }
-    }
-
-    .df-stepper-outline-icon.fa-exclamation-triangle::before {
-      font-size: var(--#{$prefix}stepper-outline-icon-only-font-size);
-    }
-
-    .df-stepper-icon::before,
-    .df-stepper-outline-icon::before,
-    .df-stepper-icon {
-      width: var(--#{$prefix}stepper-icon-width);
-      height: var(--#{$prefix}stepper-icon-height);
-      min-width: var(--#{$prefix}stepper-icon-width);
-      line-height: var(--#{$prefix}stepper-icon-line-height);
-      text-align: var(--#{$prefix}stepper-icon-text-align);
-      border-radius: var(--#{$prefix}stepper-icon-border-radius);
-    }
-
-    .df-stepper-label {
-      display: block;
-      white-space: nowrap;
-      max-width: var(--#{$prefix}stepper-label-max-width);
-      font-weight: $df-stepper-label-font-weight;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-decoration: none;
-    }
-
-    &.flex-row {
-      .df-stepper-label,
-      .df-stepper-optional-label {
-        @extend .ms-4;
-      }
-    }
-
-    &.flex-row + .df-stepper-line-wrapper {
-      .df-stepper-line:not(:first-child) {
-        display: none !important;
-      }
-    }
-
-    .df-stepper-outline-number-visited {
-      font-weight: $df-stepper-outline-number-visited-font-weight;
-    }
-  }
-
-  .df-stepper-line-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-
-    .df-stepper-line {
-      display: flex;
-      flex-direction: row;
-      flex-grow: 1;
-      align-items: center;
-
-      .df-stepper-horizontal-line {
-        flex-grow: 1;
-        border-top: var(--#{$prefix}stepper-line-border);
-        height: var(--#{$prefix}stepper-hl-height);
-        margin: var(--#{$prefix}stepper-hl-margin);
-      }
-    }
-  }
-
-  .df-stepper-step-completed + .df-stepper-line-wrapper {
-    .df-stepper-line {
-      .df-stepper-horizontal-line {
-        border-top: var(--#{$prefix}stepper-line-completed-border);
-      }
-    }
-  }
-
-  /* stepper icon color */
-  @each $state, $name in $df-stepper-steps-colors {
-    @include df-stepper-icon-variant($state, $name);
-  }
-
-  // Stepper sizing
-  &.df-stepper-sm {
-    --#{$prefix}stepper-step-padding-y: #{$df-stepper-step-padding-y-sm};
-    --#{$prefix}stepper-step-padding-x: #{$df-stepper-step-padding-x-sm};
-    --#{$prefix}stepper-icon-width: #{$df-stepper-icon-width-sm};
-    --#{$prefix}stepper-icon-height: #{$df-stepper-icon-height-sm};
-    --#{$prefix}stepper-icon-line-height: #{$df-stepper-icon-line-height-sm};
-    --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size-sm};
-
-    .btn {
-      --#{$prefix}btn-font-size: var(--#{$prefix}stepper-font-size-sm);
-      --#{$prefix}btn-border-radius: var(--#{$prefix}stepper-border-radius-sm);
-    }
-
-    @include df-stepper-size();
-  }
-
-  &.df-stepper-lg {
-    --#{$prefix}stepper-step-padding-y: #{$df-stepper-step-padding-y-lg};
-    --#{$prefix}stepper-step-padding-x: #{$df-stepper-step-padding-x-lg};
-    --#{$prefix}stepper-icon-width: #{$df-stepper-icon-width-lg};
-    --#{$prefix}stepper-icon-height: #{$df-stepper-icon-height-lg};
-    --#{$prefix}stepper-icon-line-height: #{$df-stepper-icon-line-height-lg};
-    --#{$prefix}stepper-outline-icon-only-font-size: #{$df-stepper-outline-icon-only-font-size-lg};
-
-    .btn {
-      --#{$prefix}btn-font-size: var(--#{$prefix}stepper-font-size-lg);
-      --#{$prefix}btn-border-radius: var(--#{$prefix}stepper-border-radius-lg);
-    }
-
-    @include df-stepper-size();
-  }
-
-  .df-vertical-stepper-panel {
-    margin-top: var(--#{$prefix}vertical-stepper-panel-margin-y);
-    margin-bottom: var(--#{$prefix}vertical-stepper-panel-margin-y);
-    @include ltr {
-      padding-left: var(--#{$prefix}vertical-stepper-panel-padding-start);
-      margin-left: var(--#{$prefix}vertical-stepper-panel-margin-start);
-    }
-    @include rtl {
-      padding-right: var(--#{$prefix}vertical-stepper-panel-padding-start);
-      margin-right: var(--#{$prefix}vertical-stepper-panel-margin-start);
-    }
-    // Line
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      @include ltr {
-        left: var(--#{$prefix}vertical-stepper-line-position);
-        border-left: var(--#{$prefix}stepper-line-border);
-      }
-      @include rtl {
-        right: var(--#{$prefix}vertical-stepper-line-position);
-        border-right: var(--#{$prefix}stepper-line-border);
-      }
-      top: calc(-1 * var(--#{$prefix}vertical-stepper-panel-margin-y));
-      bottom: calc(-1 * var(--#{$prefix}vertical-stepper-panel-margin-y));
-    }
-  }
-
-  .df-stepper-step-completed + .df-vertical-stepper-panel {
-    &::before {
-      @include ltr {
-        border-top: var(--#{$prefix}stepper-line-completed-border);
-      }
-      @include rtl {
-        border-top: var(--#{$prefix}stepper-line-completed-border);
-      }
-    }
-  }
-}