@syncfusion/ej2-navigations 28.1.41 → 28.2.3-1479479

package/styles/stepper/_bigger.scss

@@ -1,53 +1,53 @@
-@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
-  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
-    .e-icons.e-step-indicator {
-      font-size: $step-width;
-    }
-    &.e-step-notstarted .e-icons.e-step-indicator {
-      width: $step-width;
-      height: $step-width;
-    }
-  }
-
-  .e-step-container {
-    .e-step,
-    .e-indicator {
-      min-width: $step-width;
-      min-height: $step-width;
-    }
-
-    .e-indicator {
-      font-size: $icon-size;
-    }
-
-    .e-step-text-container,
-    .e-step-label-container {
-      font-size: $text-size;
-    }
-
-    .e-step-content {
-      font-size: $icon-size;
-    }
-
-    .e-step-label-optional {
-      font-size: $optional-size;
-    }
-  }
-  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
-    font-size: $optional-size;
-  }
-}
-
-@include export-module('stepper-bigger') {
-  .e-bigger.e-stepper,
-  .e-bigger .e-stepper {
-    @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
-  }
-
-  .e-bigger.e-small.e-stepper,
-  .e-bigger.e-small .e-stepper,
-  .e-bigger .e-small.e-stepper,
-  .e-small .e-bigger.e-stepper {
-    @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
-  }
-}
+@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
+  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
+    .e-icons.e-step-indicator {
+      font-size: $step-width;
+    }
+    &.e-step-notstarted .e-icons.e-step-indicator {
+      width: $step-width;
+      height: $step-width;
+    }
+  }
+
+  .e-step-container {
+    .e-step,
+    .e-indicator {
+      min-width: $step-width;
+      min-height: $step-width;
+    }
+
+    .e-indicator {
+      font-size: $icon-size;
+    }
+
+    .e-step-text-container,
+    .e-step-label-container {
+      font-size: $text-size;
+    }
+
+    .e-step-content {
+      font-size: $icon-size;
+    }
+
+    .e-step-label-optional {
+      font-size: $optional-size;
+    }
+  }
+  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
+    font-size: $optional-size;
+  }
+}
+
+@include export-module('stepper-bigger') {
+  .e-bigger.e-stepper,
+  .e-bigger .e-stepper {
+    @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
+  }
+
+  .e-bigger.e-small.e-stepper,
+  .e-bigger.e-small .e-stepper,
+  .e-bigger .e-small.e-stepper,
+  .e-small .e-bigger.e-stepper {
+    @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
+  }
+}

package/styles/stepper/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $stepper-ol-padding: 0 !default;
 $stepper-step-radius: 9999px !default;
 $stepper-step-width: 32px !default;
@@ -68,5 +70,5 @@ $step-error-completed-color: $danger !default;
 $step-error-completed-bg-color: $danger !default;
 $step-hover-color: $gray-200 !default;
 $step-active-color: $gray-300 !default;
-$step-selected-hover-color: darken($primary, 10%) !default;
-$step-selected-active-color: darken($primary, 10%) !default;
+$step-selected-hover-color: color.adjust($primary, $lightness: -10%) !default;
+$step-selected-active-color: color.adjust($primary, $lightness: -10%) !default;

package/styles/stepper/_bootstrap5.3-definition.scss

@@ -1,72 +1,72 @@
-$stepper-ol-padding: 0 !default;
-$stepper-step-radius: 9999px !default;
-$stepper-step-width: 32px !default;
-$stepper-icon-size: 16px !default;
-$stepper-progress-bar-height: 1.6px !default;
-$stepper-progress-value-height: 100% !default;
-$stepper-progress-position: 50% !default;
-$stepper-temp-outline-width: 2px solid !default;
-$stepper-label-top: 1em !default;
-$stepper-label-bottom: 4.5em !default;
-$stepper-label-position: 2.5em !default;
-$stepper-validation-position: .25em !default;
-$stepper-text-padding: 0 8px !default;
-$stepper-icon-text-padding: 0 8px !default;
-$stepper-text-vert-padding: 6px 0 !default;
-$stepper-label-optional: 3em !default;
-$stepper-text-postion: 8px !default;
-$stepper-optional-size: 12px !default;
-$step-border: 0 !default;
-$stepper-label-order: -1 !default;
-$stepper-font-weight: 600 !default;
-$stepper-text-size: 14px !default;
-$stepper-tooltip-tip-bottom-height: 8px !default;
-
-$stepper-small-step-width: 28px !default;
-$stepper-small-icon-size: 14px !default;
-$stepper-small-optional-size: 10px !default;
-$stepper-small-text-size: 12px !default;
-
-$stepper-bigger-step-width: 40px !default;
-$stepper-bigger-icon-size: 18px !default;
-$stepper-bigger-optional-size: 14px !default;
-$stepper-bigger-text-size: 16px !default;
-
-$stepper-bigger-small-step-width: 36px !default;
-$stepper-bigger-small-icon-size: 16px !default;
-$stepper-bigger-small-optional-size: 12px !default;
-$stepper-bigger-small-text-size: 14px !default;
-
-$step-selected-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $primary, 0 0 0 8px $stepper !default;
-$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
-$step-valid-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $success, 0 0 0 8px $stepper !default;
-$step-error-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $danger, 0 0 0 8px $stepper !default;
-$step-li-shadow:0 0 0 4px $stepper !default;
-$step-border-color: unset !default;
-$step-hover-text-color: $primary-text-color !default;
-$step-hover-not-text-color: $content-text-color !default;
-$step-hover-border-color: unset !default;
-$step-active-border-color: unset !default;
-$stepper-outline-color: $content-bg-color !default;
-$step-color: $icon-color !default;
-$step-optional-color: $content-text-color-alt3 !default;
-$step-bg-color: $content-bg-color-alt3 !default;
-$step-completed-color: $primary-text-color !default;
-$step-completed-bg-color: $primary !default;
-$step-progress-bg-color: $border-light !default;
-$step-progress-value-bg-color: $primary !default;
-$step-disabled-bg-color: $content-bg-color-alt2 !default;
-$step-disabled-font-color: $content-text-color-disabled !default;
-$step-disabled-color: $icon-color-disabled !default;
-$stepper-text-color: $content-text-color !default;
-$step-valid-icon-only-color:$success !default;
-$step-error-icon-only-color: $danger !default;
-$step-valid-completed-color: $success-text !default;
-$step-valid-completed-bg-color: $success !default;
-$step-error-icon-color: $danger-text !default;
-$step-error-completed-color: $danger !default;
-$step-error-completed-bg-color: $danger !default;
-$step-hover-color: $content-bg-color-hover !default;
-$step-active-color: $content-bg-color-pressed !default;
-$step-selected-hover-color: $primary-bg-color-hover !default;
-$step-selected-active-color: $primary-bg-color-pressed !default;
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 8px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 8px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 0 !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $primary, 0 0 0 8px $stepper !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
+$step-valid-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $success, 0 0 0 8px $stepper !default;
+$step-error-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $danger, 0 0 0 8px $stepper !default;
+$step-li-shadow:0 0 0 4px $stepper !default;
+$step-border-color: unset !default;
+$step-hover-text-color: $primary-text-color !default;
+$step-hover-not-text-color: $content-text-color !default;
+$step-hover-border-color: unset !default;
+$step-active-border-color: unset !default;
+$stepper-outline-color: $content-bg-color !default;
+$step-color: $icon-color !default;
+$step-optional-color: $content-text-color-alt3 !default;
+$step-bg-color: $content-bg-color-alt3 !default;
+$step-completed-color: $primary-text-color !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $border-light !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $content-bg-color-alt2 !default;
+$step-disabled-font-color: $content-text-color-disabled !default;
+$step-disabled-color: $icon-color-disabled !default;
+$stepper-text-color: $content-text-color !default;
+$step-valid-icon-only-color:$success !default;
+$step-error-icon-only-color: $danger !default;
+$step-valid-completed-color: $success-text !default;
+$step-valid-completed-bg-color: $success !default;
+$step-error-icon-color: $danger-text !default;
+$step-error-completed-color: $danger !default;
+$step-error-completed-bg-color: $danger !default;
+$step-hover-color: $content-bg-color-hover !default;
+$step-active-color: $content-bg-color-pressed !default;
+$step-selected-hover-color: $primary-bg-color-hover !default;
+$step-selected-active-color: $primary-bg-color-pressed !default;

package/styles/stepper/_fluent2-definition.scss

@@ -1,72 +1,72 @@
-$stepper-ol-padding: 0 !default;
-$stepper-step-radius: 9999px !default;
-$stepper-step-width: 32px !default;
-$stepper-icon-size: 16px !default;
-$stepper-progress-bar-height: 2px !default;
-$stepper-progress-value-height: 100% !default;
-$stepper-progress-position: 50% !default;
-$stepper-temp-outline-width: 2px solid !default;
-$stepper-label-top: 1em !default;
-$stepper-label-bottom: 4.5em !default;
-$stepper-label-position: 2.5em !default;
-$stepper-validation-position: .25em !default;
-$stepper-text-padding: 0 8px !default;
-$stepper-icon-text-padding: 0 8px !default;
-$stepper-text-vert-padding: 6px 0 !default;
-$stepper-label-optional: 3em !default;
-$stepper-text-postion: 8px !default;
-$stepper-optional-size: 12px !default;
-$step-border: 1px solid !default;
-$stepper-label-order: -1 !default;
-$stepper-font-weight: 600 !default;
-$stepper-text-size: 14px !default;
-$stepper-tooltip-tip-bottom-height: 8px !default;
-
-$stepper-small-step-width: 28px !default;
-$stepper-small-icon-size: 14px !default;
-$stepper-small-optional-size: 10px !default;
-$stepper-small-text-size: 12px !default;
-
-$stepper-bigger-step-width: 40px !default;
-$stepper-bigger-icon-size: 18px !default;
-$stepper-bigger-optional-size: 14px !default;
-$stepper-bigger-text-size: 16px !default;
-
-$stepper-bigger-small-step-width: 36px !default;
-$stepper-bigger-small-icon-size: 16px !default;
-$stepper-bigger-small-optional-size: 12px !default;
-$stepper-bigger-small-text-size: 14px !default;
-
-$step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
-$step-keyboard-selected-li-shadow: $keyboard-focus !default;
-$step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-bg-color, 0 0 0 8px $content-bg-color !default;
-$step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger-bg-color, 0 0 0 8px $content-bg-color !default;
-$step-li-shadow: $shadow-stepper-small !default;
-$step-border-color: $border-dark !default;
-$step-hover-text-color: $primary-text-color !default;
-$step-hover-not-text-color: $content-text-color-hover !default;
-$step-hover-border-color: $secondary-border-color-hover !default;
-$step-active-border-color: $secondary-border-color-hover !default;
-$stepper-outline-color: $content-bg-color !default;
-$step-color: $icon-color !default;
-$step-optional-color: $content-text-color-alt1 !default;
-$step-bg-color: $content-bg-color !default;
-$step-completed-color: $primary-text-color !default;
-$step-completed-bg-color: $primary !default;
-$step-progress-bg-color: $border-light !default;
-$step-progress-value-bg-color: $primary !default;
-$step-disabled-bg-color: $content-bg-color-disabled !default;
-$step-disabled-font-color: $secondary-text-color-disabled !default;
-$step-disabled-color: $secondary-text-color-disabled !default;
-$stepper-text-color: $content-text-color !default;
-$step-valid-icon-only-color: $success-bg-color !default;
-$step-error-icon-only-color: $danger-bg-color !default;
-$step-valid-completed-color: $success-text !default;
-$step-valid-completed-bg-color: $success-bg-color !default;
-$step-error-icon-color: $danger-text !default;
-$step-error-completed-color: $danger-bg-color !default;
-$step-error-completed-bg-color: $danger-bg-color !default;
-$step-hover-color: $content-bg-color-hover !default;
-$step-active-color: $content-bg-color-pressed !default;
-$step-selected-hover-color: $primary-dark !default;
-$step-selected-active-color: $primary-dark !default;
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 2px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 8px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 8px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 1px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: $keyboard-focus !default;
+$step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-bg-color, 0 0 0 8px $content-bg-color !default;
+$step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger-bg-color, 0 0 0 8px $content-bg-color !default;
+$step-li-shadow: $shadow-stepper-small !default;
+$step-border-color: $border-dark !default;
+$step-hover-text-color: $primary-text-color !default;
+$step-hover-not-text-color: $content-text-color-hover !default;
+$step-hover-border-color: $secondary-border-color-hover !default;
+$step-active-border-color: $secondary-border-color-hover !default;
+$stepper-outline-color: $content-bg-color !default;
+$step-color: $icon-color !default;
+$step-optional-color: $content-text-color-alt1 !default;
+$step-bg-color: $content-bg-color !default;
+$step-completed-color: $primary-text-color !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $border-light !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $content-bg-color-disabled !default;
+$step-disabled-font-color: $secondary-text-color-disabled !default;
+$step-disabled-color: $secondary-text-color-disabled !default;
+$stepper-text-color: $content-text-color !default;
+$step-valid-icon-only-color: $success-bg-color !default;
+$step-error-icon-only-color: $danger-bg-color !default;
+$step-valid-completed-color: $success-text !default;
+$step-valid-completed-bg-color: $success-bg-color !default;
+$step-error-icon-color: $danger-text !default;
+$step-error-completed-color: $danger-bg-color !default;
+$step-error-completed-bg-color: $danger-bg-color !default;
+$step-hover-color: $content-bg-color-hover !default;
+$step-active-color: $content-bg-color-pressed !default;
+$step-selected-hover-color: $primary-dark !default;
+$step-selected-active-color: $primary-dark !default;

package/styles/stepper/_material-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $stepper-ol-padding: 0 !default;
 $stepper-step-radius: 9999px !default;
 $stepper-step-width: 32px !default;
@@ -68,5 +70,5 @@ $step-error-completed-color: $error-font !default;
 $step-error-completed-bg-color: $error-font !default;
 $step-hover-color: $grey-800 !default;
 $step-active-color: $overlay-bg-color !default;
-$step-selected-hover-color: lighten($primary, 10%) !default;
-$step-selected-active-color: lighten($primary, 15%) !default;
+$step-selected-hover-color: color.adjust($primary, $lightness: 10%) !default;
+$step-selected-active-color: color.adjust($primary, $lightness: 15%) !default;

package/styles/stepper/_material-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $stepper-ol-padding: 0 !default;
 $stepper-step-radius: 9999px !default;
 $stepper-step-width: 32px !default;
@@ -40,7 +42,7 @@ $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $primary, 0 0 0 8px $grey-white !default;
 $step-keyboard-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $base-font, 0 0 0 8px $grey-white !default;
 $step-valid-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $msg-success-color-alt1, 0 0 0 8px $grey-white !default;
-$step-error-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px darken($error-font, 11%), 0 0 0 8px $grey-white !default;
+$step-error-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px color.adjust($error-font, $lightness: -11%), 0 0 0 8px $grey-white !default;
 $step-li-shadow: 0 0 0 8px $grey-white !default;
 $step-border-color: $grey-400 !default;
 $step-hover-text-color: $primary-300-font !default;
@@ -64,9 +66,9 @@ $step-error-icon-only-color: $error-font !default;
 $step-valid-completed-color: $primary-300-font !default;
 $step-valid-completed-bg-color: $msg-success-color-alt1 !default;
 $step-error-icon-color: $primary-300-font !default;
-$step-error-completed-color: darken($error-font, 11%) !default;
-$step-error-completed-bg-color: darken($error-font, 11%) !default;
+$step-error-completed-color: color.adjust($error-font, $lightness: -11%) !default;
+$step-error-completed-bg-color: color.adjust($error-font, $lightness: -11%) !default;
 $step-hover-color: $grey-500 !default;
 $step-active-color: $grey-600 !default;
-$step-selected-hover-color: darken($primary, 10%) !default;
-$step-selected-active-color: darken($primary, 15%) !default;
+$step-selected-hover-color: color.adjust($primary, $lightness: -10%) !default;
+$step-selected-active-color: color.adjust($primary, $lightness: -15%) !default;

package/styles/stepper/_tailwind3-definition.scss

@@ -1,72 +1,72 @@
-$stepper-ol-padding: 0 !default;
-$stepper-step-radius: 9999px !default;
-$stepper-step-width: 32px !default;
-$stepper-icon-size: 16px !default;
-$stepper-progress-bar-height: 1.6px !default;
-$stepper-progress-value-height: 100% !default;
-$stepper-progress-position: 50% !default;
-$stepper-temp-outline-width: 2px solid !default;
-$stepper-label-top: 1em !default;
-$stepper-label-bottom: 4.5em !default;
-$stepper-label-position: 2.5em !default;
-$stepper-validation-position: .25em !default;
-$stepper-text-padding: 0 8px !default;
-$stepper-icon-text-padding: 0 8px !default;
-$stepper-text-vert-padding: 6px 0 !default;
-$stepper-label-optional: 3em !default;
-$stepper-text-postion: 8px !default;
-$stepper-optional-size: 12px !default;
-$step-border: 0 !default;
-$stepper-label-order: -1 !default;
-$stepper-font-weight: 500 !default;
-$stepper-text-size: 14px !default;
-$stepper-tooltip-tip-bottom-height: 8px !default;
-
-$stepper-small-step-width: 24px !default;
-$stepper-small-icon-size: 14px !default;
-$stepper-small-optional-size: 10px !default;
-$stepper-small-text-size: 12px !default;
-
-$stepper-bigger-step-width: 40px !default;
-$stepper-bigger-icon-size: 18px !default;
-$stepper-bigger-optional-size: 14px !default;
-$stepper-bigger-text-size: 16px !default;
-
-$stepper-bigger-small-step-width: 36px !default;
-$stepper-bigger-small-icon-size: 16px !default;
-$stepper-bigger-small-optional-size: 14px !default;
-$stepper-bigger-small-text-size: 16px !default;
-
-$step-selected-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $primary, 0 0 0 8px $stepper !default;
-$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
-$step-valid-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $success, 0 0 0 8px $stepper !default;
-$step-error-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $danger, 0 0 0 8px $stepper !default;
-$step-li-shadow:0 0 0 4px $stepper !default;
-$step-border-color: unset !default;
-$step-hover-text-color: $primary-text-color !default;
-$step-hover-not-text-color: $content-text-color !default;
-$step-hover-border-color: unset !default;
-$step-active-border-color: unset !default;
-$stepper-outline-color: $content-bg-color !default;
-$step-color: $content-text-color-alt2 !default;
-$step-optional-color: $content-text-color-alt3 !default;
-$step-bg-color: $content-bg-color-alt2 !default;
-$step-completed-color: $primary-text-color !default;
-$step-completed-bg-color: $primary !default;
-$step-progress-bg-color: $border-light !default;
-$step-progress-value-bg-color: $primary !default;
-$step-disabled-bg-color: $content-bg-color-alt2 !default;
-$step-disabled-font-color: $content-text-color-disabled !default;
-$step-disabled-color: $content-text-color-disabled !default;
-$stepper-text-color: $content-text-color-alt2 !default;
-$step-valid-icon-only-color:$success !default;
-$step-error-icon-only-color: $danger !default;
-$step-valid-completed-color: $success !default;
-$step-valid-completed-bg-color: $success-light !default;
-$step-error-icon-color: $danger !default;
-$step-error-completed-color: $danger !default;
-$step-error-completed-bg-color: $danger-light !default;
-$step-hover-color: $content-bg-color-hover !default;
-$step-active-color: $content-bg-color-pressed !default;
-$step-selected-hover-color: $primary-bg-color-hover !default;
-$step-selected-active-color: $primary-bg-color-pressed !default;
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 8px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 8px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 0 !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 500 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 24px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 14px !default;
+$stepper-bigger-small-text-size: 16px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $primary, 0 0 0 8px $stepper !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
+$step-valid-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $success, 0 0 0 8px $stepper !default;
+$step-error-li-shadow: 0 0 0 2px $stepper, 0 0 0 4px $danger, 0 0 0 8px $stepper !default;
+$step-li-shadow:0 0 0 4px $stepper !default;
+$step-border-color: unset !default;
+$step-hover-text-color: $primary-text-color !default;
+$step-hover-not-text-color: $content-text-color !default;
+$step-hover-border-color: unset !default;
+$step-active-border-color: unset !default;
+$stepper-outline-color: $content-bg-color !default;
+$step-color: $content-text-color-alt2 !default;
+$step-optional-color: $content-text-color-alt3 !default;
+$step-bg-color: $content-bg-color-alt2 !default;
+$step-completed-color: $primary-text-color !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $border-light !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $content-bg-color-alt2 !default;
+$step-disabled-font-color: $content-text-color-disabled !default;
+$step-disabled-color: $content-text-color-disabled !default;
+$stepper-text-color: $content-text-color-alt2 !default;
+$step-valid-icon-only-color:$success !default;
+$step-error-icon-only-color: $danger !default;
+$step-valid-completed-color: $success !default;
+$step-valid-completed-bg-color: $success-light !default;
+$step-error-icon-color: $danger !default;
+$step-error-completed-color: $danger !default;
+$step-error-completed-bg-color: $danger-light !default;
+$step-hover-color: $content-bg-color-hover !default;
+$step-active-color: $content-bg-color-pressed !default;
+$step-selected-hover-color: $primary-bg-color-hover !default;
+$step-selected-active-color: $primary-bg-color-pressed !default;

package/styles/stepper/bootstrap-dark.css

@@ -587,14 +587,14 @@
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: #fff;
-  background: #248aff;
+  background: rgb(36, 138.2, 255);
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
   color: #f0f0f0;
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #3e98ff;
+  background: rgb(61.5, 151.8, 255);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {

package/styles/stepper/bootstrap4.css

@@ -587,14 +587,14 @@
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: #fff;
-  background: #0062cc;
+  background: rgb(0, 98.4, 204);
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
   color: #495057;
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #0062cc;
+  background: rgb(0, 98.4, 204);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {