@syncfusion/ej2-navigations 23.2.5 → 24.1.41

package/styles/stepper/_material-definition.scss

@@ -0,0 +1,78 @@
+$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 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px 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 $grey-white, 0 0 0 4px $primary, 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-li-shadow: 0 0 0 8px $grey-white !default;
+
+$step-border-color: $grey-400 !default;
+$step-hover-text-color: $primary-300-font !default;
+$step-hover-not-text-color: $base-font !default;
+$step-hover-border-color: $grey-400 !default;
+$step-active-border-color: $grey-400 !default;
+$stepper-outline-color: $grey-white !default;
+$step-color: $base-font !default;
+$step-optional-color: $grey-800 !default;
+$step-bg-color: $primary-300-font !default;
+$step-completed-color: $primary-300-font !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $grey-400 !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $grey-300 !default;
+$step-disabled-font-color: $grey-500 !default;
+$step-disabled-color: $grey-600 !default;
+$stepper-text-color: $base-font !default;
+$step-valid-icon-only-color:$msg-success-color-alt1 !default;
+$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-indicator-color: $primary-300-font !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;

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

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/stepper/_material3-definition.scss

@@ -0,0 +1,78 @@
+$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-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$step-border: 2px 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 rgba($content-bg-color), 0 0 0 4px rgba($primary), 0 0 0 8px rgba($content-bg-color) !default;
+$step-valid-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($success), 0 0 0 8px rgba($content-bg-color) !default;
+$step-error-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($danger), 0 0 0 8px rgba($content-bg-color) !default;
+$step-li-shadow: 0 0 0 8px rgba($content-bg-color) !default;
+
+$step-border-color: rgba($border-light) !default;
+$step-hover-text-color: rgba($primary-text-color) !default;
+$step-hover-not-text-color: rgba($content-text-color) !default;
+$step-hover-border-color: rgba($border-light) !default;
+$step-active-border-color: rgba($border-light) !default;
+$stepper-outline-color: rgba($content-bg-color) !default;
+$step-color: rgba($content-text-color) !default;
+$step-optional-color: $placeholder-text-color !default;
+$step-completed-color: rgba($primary-text-color) !default;
+$step-completed-bg-color: rgba($primary) !default;
+$step-progress-bg-color: rgba($border-light) !default;
+$step-progress-value-bg-color: rgba($primary) !default;
+$step-bg-color: $content-bg-color-alt5 !default;
+$step-disabled-bg-color: $content-bg-color-alt3 !default;
+$step-disabled-font-color: $content-text-color-disabled !default;
+$step-disabled-color: $content-text-color-disabled !default;
+$stepper-text-color: $content-text-color !default;
+$step-valid-icon-only-color:rgba($success) !default;
+$step-error-icon-only-color: rgba($danger) !default;
+$step-valid-completed-color: rgba($success-text) !default;
+$step-valid-completed-bg-color: rgba($success) !default;
+$step-error-icon-color: rgba($primary-text-color) !default;
+$step-error-completed-color: rgba($danger) !default;
+$step-error-completed-bg-color: rgba($danger) !default;
+$step-hover-color: rgba($border-light) !default;
+$step-active-color: rgba($border-light) !default;
+$step-selected-hover-color: $primary-bg-color-hover !default;
+$step-selected-active-color: $primary-bg-color-pressed !default;
+$step-indicator-color: $content-bg-color-alt5 !default;

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

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

package/styles/stepper/_tailwind-definition.scss

@@ -0,0 +1,78 @@
+$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 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px 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-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-border-color, 0 0 0 8px $content-bg-color !default;
+$step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $border-error, 0 0 0 8px $content-bg-color !default;
+$step-li-shadow: 0 0 0 8px $content-bg-color !default;
+
+$step-border-color: $border !default;
+$step-hover-text-color: $primary-text-color !default;
+$step-hover-not-text-color: $content-text-color-alt2 !default;
+$step-hover-border-color: $border-dark !default;
+$step-active-border-color: $border-dark !default;
+$stepper-outline-color: $content-bg-color !default;
+$step-color: $content-text-color-alt2 !default;
+$step-optional-color: $content-text-color-alt2 !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 !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $border-light !default;
+$step-disabled-font-color: $content-text-color-disabled !default;
+$step-disabled-color: $content-text-color-disabled !default;
+$stepper-text-color: $content-text-color !default;
+$step-valid-icon-only-color: $success-border-color !default;
+$step-error-icon-only-color: $border-error !default;
+$step-valid-completed-color: $primary-text-color !default;
+$step-valid-completed-bg-color: $success-border-color !default;
+$step-error-icon-color: $primary-text-color !default;
+$step-error-completed-color: $border-error !default;
+$step-error-completed-bg-color: $border-error !default;
+$step-indicator-color: $content-bg-color !default;
+$step-hover-color: $content-bg-color !default;
+$step-active-color: $content-bg-color !default;
+$step-selected-hover-color: $primary-bg-color-hover !default;
+$step-selected-active-color: $primary-bg-color-pressed !default;

package/styles/stepper/_theme.scss

@@ -0,0 +1,223 @@
+@include export-module('stepper-theme') {
+  .e-stepper {
+    .e-stepper-steps {
+      .e-step-container {
+        &.e-step-notstarted:not(.e-step-disabled) .e-step,
+        &.e-step-notstarted:not(.e-step-disabled) .e-indicator,
+        &.e-step-notstarted .e-icons.e-step-indicator {
+          border-color: $step-border-color;
+        }
+
+        .e-step-label-optional {
+          color: $step-optional-color;
+        }
+
+        .e-step,
+        .e-indicator {
+          color: $step-color;
+          background: $step-bg-color;
+        }
+
+        .e-step-indicator {
+          color: transparent;
+        }
+
+        &.e-step-completed .e-step,
+        &.e-step-inprogress .e-step,
+        &.e-step-completed .e-indicator,
+        &.e-step-inprogress .e-indicator,
+        &.e-step-completed .e-step-indicator,
+        &.e-step-inprogress .e-step-indicator {
+          background: $step-completed-bg-color;
+          color: $step-completed-color;
+        }
+
+        &.e-step-valid {
+          .e-indicator {
+            background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+            color: $step-valid-completed-color;
+          }
+        }
+
+        &.e-step-error {
+          .e-indicator {
+            background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+            color: $step-error-icon-color;
+          }
+
+          .e-text,
+          .e-label {
+            color: $step-error-completed-color;
+          }
+        }
+
+        &.e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
+        &.e-step-error .e-indicator:hover {
+          color: $step-color;
+        }
+
+        &.e-step-selected {
+          .e-text,
+          .e-label {
+            font-weight: $stepper-font-weight;
+          }
+        }
+
+        &.e-step-valid.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
+        &.e-step-valid.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
+          .e-step-validation-icon {
+            color: $step-valid-icon-only-color;
+          }
+        }
+
+        &.e-step-error.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
+        &.e-step-error.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
+          .e-step-validation-icon {
+            color: $step-error-icon-only-color;
+          }
+        }
+
+        .e-text,
+        .e-label {
+          color: $stepper-text-color;
+        }
+
+        &.e-step-selected:not(.e-step-error),
+        &.e-step-completed:not(.e-step-error) {
+          .e-text,
+          .e-label {
+            color: $step-completed-bg-color;
+          }
+        }
+
+        &.e-step-label:not(.e-step-icon) .e-step-label-container {
+          background-color: $stepper-outline-color;
+        }
+        
+        .e-step-text-container {
+          background-color: $stepper-outline-color;
+          border-color: transparent;
+        }
+
+        &.e-step-selected .e-indicator {
+          background: $step-completed-bg-color;
+        }
+
+        &.e-step-disabled .e-indicator {
+          background: $step-disabled-bg-color !important; /* stylelint-disable-line declaration-no-important */
+          color: $step-disabled-color !important; /* stylelint-disable-line declaration-no-important */
+        }
+
+        &.e-step-disabled .e-text,
+        &.e-step-disabled .e-label,
+        &.e-step-disabled .e-step-validation-icon {
+          color: $step-disabled-font-color !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+    }
+
+    &.e-vertical .e-stepper-steps .e-step-container.e-step-text-only.e-step-text .e-step-label-optional,
+    &.e-vertical .e-stepper-steps .e-step-container.e-step-label-only.e-step-label .e-step-label-optional,
+    &.e-vertical .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
+    &.e-vertical.e-label-top .e-stepper-steps .e-step-container .e-step-label-optional,
+    &.e-vertical.e-label-bottom .e-stepper-steps .e-step-container .e-step-label-optional {
+      background-color: $stepper-outline-color;
+    }
+
+    .e-stepper-progressbar {
+      background-color: $step-progress-bg-color;
+
+      >.e-progressbar-value {
+        background-color: $step-progress-value-bg-color;
+      }
+    }
+
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+    .e-stepper-steps .e-step-container.e-step-focus .e-step,
+    .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
+    .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
+      box-shadow: $step-selected-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+    .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
+    .e-stepper-steps .e-step-container.e-step-valid.e-step-label-only.e-step-focus .e-label,
+    .e-stepper-steps .e-step-container.e-step-valid.e-step-text-only.e-step-focus .e-text,
+    .e-stepper-steps .e-step-container.e-step-valid.e-step-template.e-step-focus {
+      box-shadow: $step-valid-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+    .e-stepper-steps .e-step-container.e-step-error.e-step-focus .e-step,
+    .e-stepper-steps .e-step-container.e-step-error.e-step-label-only.e-step-focus .e-label,
+    .e-stepper-steps .e-step-container.e-step-error.e-step-text-only.e-step-focus .e-text,
+    .e-stepper-steps .e-step-container.e-step-error.e-step-template.e-step-focus {
+      box-shadow: $step-error-li-shadow;
+    }
+
+    .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+    .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-completed:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+    &.e-steps-focus .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+      box-shadow: $step-li-shadow;
+    }
+
+    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:hover,
+    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
+      border-color: $step-hover-border-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:active,
+    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
+      border-color: $step-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
+      background: $step-hover-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
+      background: $step-active-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
+      &:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
+      &:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-selected-hover-color !important; /* stylelint-disable-line declaration-no-important */
+      }
+      &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
+      &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
+        color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
+        background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      }
+      &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
+      &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
+        color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
+        background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
+      color: $step-hover-not-text-color;
+    }
+
+    &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
+      &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
+      &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
+        background: $step-selected-active-color !important; /* stylelint-disable-line declaration-no-important */
+      }
+      &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
+      &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
+        background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      }
+      &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
+      &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
+        background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+}