@syncfusion/ej2-navigations 20.1.47 → 20.1.51-10460

package/styles/stepper/_material-definition.scss

@@ -0,0 +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 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 10px !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-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-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-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-definition.scss

@@ -0,0 +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-optional: 3em !default;
+$stepper-text-postion: 10px !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;
+$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-keyboard-selected-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($content-text-color), 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;

package/styles/stepper/_tailwind-definition.scss

@@ -0,0 +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 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 10px !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-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 $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-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,195 @@
+@mixin stepper-text-label-colors($step-label-text-color) {
+  .e-text,
+  .e-label {
+    color: $step-label-text-color;
+  }
+}
+
+@include export-module('stepper-theme') {
+  .e-stepper {
+    .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-selected .e-indicator {
+      background: $step-completed-bg-color;
+    }
+    .e-step-valid .e-indicator {
+      background: $step-valid-completed-bg-color;
+      color: $step-valid-completed-color;
+    }
+    .e-step-error {
+      .e-indicator {
+        background: $step-error-completed-bg-color;
+        color: $step-error-icon-color;
+      }
+      @include stepper-text-label-colors($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-valid.e-step-text-only,
+    .e-step-valid.e-step-label-only {
+      .e-step-validation-icon {
+        color: $step-valid-icon-only-color;
+      }
+    }
+    .e-step-error.e-step-text-only,
+    .e-step-error.e-step-label-only {
+      .e-step-validation-icon {
+        color: $step-error-icon-only-color;
+      }
+    }
+    @include stepper-text-label-colors($stepper-text-color);
+    .e-step-selected:not(.e-step-error),
+    .e-step-completed:not(.e-step-error) {
+      @include stepper-text-label-colors($step-completed-bg-color);
+    }
+    .e-step-label:not(.e-step-item) .e-step-label-container {
+      background-color: $stepper-outline-color;
+    }
+    .e-step-text-container {
+      background-color: $stepper-outline-color;
+      border-color: transparent;
+    }
+    .e-step-disabled .e-indicator {
+      background: $step-disabled-bg-color;
+      color: $step-disabled-color;
+    }
+    .e-step-disabled .e-text,
+    .e-step-disabled .e-label,
+    .e-step-disabled .e-step-validation-icon {
+      color: $step-disabled-font-color;
+    }
+    &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
+    &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
+    &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
+    &.e-vertical.e-label-top .e-step-label-optional,
+    &.e-vertical.e-label-bottom .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-step-selected .e-step {
+      box-shadow: $step-selected-li-shadow;
+    }
+    .e-step-focus .e-step,
+    .e-step-label-only.e-step-focus .e-label,
+    .e-step-text-only.e-step-focus .e-text,
+    .e-step-template.e-step-focus,
+    &:not(.e-steps-focus) :focus-visible .e-step,
+    &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
+    .e-step-valid.e-step-focus .e-step,
+    .e-step-valid.e-step-label-only.e-step-focus .e-label,
+    .e-step-valid.e-step-text-only.e-step-focus .e-text,
+    .e-step-valid.e-step-template.e-step-focus {
+      box-shadow: $step-valid-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
+    .e-step-error.e-step-focus .e-step,
+    .e-step-error.e-step-label-only.e-step-focus .e-label,
+    .e-step-error.e-step-text-only.e-step-focus .e-text,
+    .e-step-error.e-step-template.e-step-focus {
+      box-shadow: $step-error-li-shadow;
+    }
+
+    .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
+    .e-step-container:not(.e-step-focus).e-step-completed .e-step,
+    &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
+      box-shadow: $step-li-shadow;
+    }
+
+    .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
+      border-color: $step-hover-border-color;
+    }
+
+    .e-step-notstarted:not(.e-step-disabled) .e-step:active,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
+      border-color: $step-active-border-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-indicator:hover,
+      .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-selected-hover-color;
+      }
+    }
+
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
+      color: $step-hover-not-text-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-step-selected .e-indicator:active,
+      .e-step-selected .e-step:active {
+        background: $step-selected-active-color;
+      }
+      .e-step-valid.e-step-selected .e-indicator:active,
+      .e-step-valid.e-step-selected .e-step:active {
+        background: $step-valid-completed-bg-color;
+      }
+      .e-step-error.e-step-selected .e-indicator:active,
+      .e-step-error.e-step-selected .e-step:active {
+        background: $step-error-completed-bg-color;
+      }
+    }
+
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
+      background: $step-hover-color;
+    }
+
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
+      background: $step-active-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-step-valid .e-indicator:hover,
+      .e-step-valid .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-valid-completed-bg-color;
+      }
+      .e-step-error .e-indicator:hover,
+      .e-step-error .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-error-completed-bg-color;
+      }
+    }
+  }
+}

package/styles/stepper/icons/_bds.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-bds-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_bootstrap-dark.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-bootstrap-icons') {
+  .e-step-indicator::before {
+    content: '\e110';
+  }
+}

package/styles/stepper/icons/_bootstrap.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-bootstrap-icons') {
+  .e-step-indicator::before {
+    content: '\e110';
+  }
+}

package/styles/stepper/icons/_bootstrap4.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-bootstrap4-icons') {
+  .e-step-indicator::before {
+    content: '\e997';
+  }
+}

package/styles/stepper/icons/_bootstrap5.3.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-bootstrap5-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_bootstrap5.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-bootstrap5-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_fabric-dark.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-fabric-icons') {
+  .e-step-indicator::before {
+    content: '\e9a1';
+  }
+}

package/styles/stepper/icons/_fabric.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-fabric-icons') {
+  .e-step-indicator::before {
+    content: '\e9a1';
+  }
+}

package/styles/stepper/icons/_fluent.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-fluent-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_fluent2.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-fluent2-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_fusionnew.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-fusionnew-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_highcontrast-light.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-highcontrast-icons') {
+  .e-step-indicator::before {
+    content: '\e9a1';
+  }
+}

package/styles/stepper/icons/_highcontrast.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-highcontrast-icons') {
+  .e-step-indicator::before {
+    content: '\e9a1';
+  }
+}

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

@@ -0,0 +1,5 @@
+@include export-module('stepper-material-icons') {
+  .e-step-indicator::before {
+    content: '\e99e';
+  }
+}

package/styles/stepper/icons/_material.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-material-icons') {
+  .e-step-indicator::before {
+    content: '\e99e';
+  }
+}

package/styles/stepper/icons/_material3.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-material3-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}

package/styles/stepper/icons/_tailwind.scss

@@ -0,0 +1,5 @@
+@include export-module('stepper-tailwind-icons') {
+  .e-step-indicator::before {
+    content: '\e8db';
+  }
+}