@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/sidebar/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {

package/styles/sidebar/fluent2.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'all' as *;

package/styles/sidebar/highcontrast-light.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'all' as *;

package/styles/sidebar/highcontrast.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'all' as *;

package/styles/sidebar/material-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'all' as *;

package/styles/sidebar/material.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'material-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'material-definition' as *;
+@use 'all' as *;

package/styles/sidebar/material3-dark.css

@@ -1,5 +1,85 @@
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {

package/styles/sidebar/material3-dark.scss

@@ -1,4 +1,3 @@
-
-
-@import 'material3-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'material3-dark-definition' as *;
+@use 'all' as *;

package/styles/sidebar/material3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {

package/styles/sidebar/material3.scss

@@ -1,4 +1,3 @@
-
-
-@import 'material3-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'material3-definition' as *;
+@use 'all' as *;

package/styles/sidebar/tailwind-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'all' as *;

package/styles/sidebar/tailwind.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'tailwind-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'tailwind-definition' as *;
+@use 'all' as *;

package/styles/sidebar/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {

package/styles/sidebar/tailwind3.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'tailwind3-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'tailwind3-definition' as *;
+@use 'all' as *;

package/styles/stepper/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/stepper/_bds-definition.scss

@@ -1,9 +1,14 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $stepper-ol-padding: 0 !default;
 $stepper-step-radius: 9999px !default;
 $stepper-step-width: 32px !default;
+$stepper-step-font-size: 32px !default;
 $stepper-icon-size: 16px !default;
 $stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-bar-width: 1.6px !default;
 $stepper-progress-value-height: 100% !default;
+$stepper-progress-value-width: 100% !default;
 $stepper-progress-position: 50% !default;
 $stepper-temp-outline-width: 2px solid !default;
 $stepper-label-top: 1em !default;
@@ -21,18 +26,43 @@ $stepper-label-order: -1 !default;
 $stepper-font-weight: 600 !default;
 $stepper-text-size: 14px !default;
 $stepper-tooltip-tip-bottom-height: 8px !default;
+$stepper-inherit-height: inherit !default;
+$stepper-content-line-height: 0 !default;
+$stepper-label-line-height: 2em !default;
+$stepper-text-container-border-radius: unset !default;
+$stepper-text-container-border-none: none !default;
+$step-content-padding: 0 8px !default;
+$step-padding-none: 0 !default;
+$step-margin-none: 0 !default;
+$step-container-padding-block: 5px !default;
+$step-label-optional-padding: 6px !default;
+$stepper-horizontal-label-gap: 1em !default;
+$stepper-label-before-optional-gap: .5em !default;
+$stepper-margin-unset: unset !default;
+$stepper-horizontal-label-optional-margin: 2.5em !default;
+$stepper-horizontal-optional-margin-top: .5em !default;
+$stepper-horizontal-label-after-optional-margin-top: .2em !default;
+$stepper-vertical-optional-margin-right: 4em !default;
+$stepper-progress-top-position: var(--progress-top-position) !default;
+$stepper-vertical-progress-position: var(--progress-position) !default;
 
 $stepper-small-step-width: 28px !default;
+$stepper-small-step-font-size: 28px !default;
+$stepper-small-step-height: 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-step-font-size: 40px !default;
+$stepper-bigger-step-height: 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-step-font-size: 36px !default;
+$stepper-bigger-small-step-height: 36px !default;
 $stepper-bigger-small-icon-size: 16px !default;
 $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;

package/styles/stepper/_bigger.scss

@@ -1,11 +1,13 @@
-@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@mixin stepper-styles($step-font-size, $step-height, $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;
+      font-size: $step-font-size;
     }
     &.e-step-notstarted .e-icons.e-step-indicator {
       width: $step-width;
-      height: $step-width;
+      height: $step-height;
     }
   }
 
@@ -41,13 +43,13 @@
 @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);
+    @include stepper-styles($stepper-bigger-step-font-size, $stepper-bigger-step-height, $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);
+    @include stepper-styles($stepper-bigger-small-step-font-size, $stepper-bigger-small-step-height, $stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
   }
 }

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

@@ -1,9 +1,14 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 $stepper-ol-padding: 0 !default;
 $stepper-step-radius: 9999px !default;
 $stepper-step-width: 32px !default;
+$stepper-step-font-size: 32px !default;
 $stepper-icon-size: 16px !default;
 $stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-bar-width: 1.6px !default;
 $stepper-progress-value-height: 100% !default;
+$stepper-progress-value-width: 100% !default;
 $stepper-progress-position: 50% !default;
 $stepper-temp-outline-width: 2px solid !default;
 $stepper-label-top: 1em !default;
@@ -21,18 +26,43 @@ $stepper-label-order: -1 !default;
 $stepper-font-weight: 600 !default;
 $stepper-text-size: 14px !default;
 $stepper-tooltip-tip-bottom-height: 8px !default;
+$stepper-inherit-height: inherit !default;
+$stepper-content-line-height: 0 !default;
+$stepper-label-line-height: 2em !default;
+$stepper-text-container-border-radius: unset !default;
+$stepper-text-container-border-none: none !default;
+$step-content-padding: 0 8px !default;
+$step-padding-none: 0 !default;
+$step-margin-none: 0 !default;
+$step-container-padding-block: 5px !default;
+$step-label-optional-padding: 6px !default;
+$stepper-horizontal-label-gap: 1em !default;
+$stepper-label-before-optional-gap: .5em !default;
+$stepper-margin-unset: unset !default;
+$stepper-horizontal-label-optional-margin: 2.5em !default;
+$stepper-horizontal-optional-margin-top: .5em !default;
+$stepper-horizontal-label-after-optional-margin-top: .2em !default;
+$stepper-vertical-optional-margin-right: 4em !default;
+$stepper-progress-top-position: var(--progress-top-position) !default;
+$stepper-vertical-progress-position: var(--progress-position) !default;
 
 $stepper-small-step-width: 28px !default;
+$stepper-small-step-font-size: 28px !default;
+$stepper-small-step-height: 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-step-font-size: 40px !default;
+$stepper-bigger-step-height: 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-step-font-size: 36px !default;
+$stepper-bigger-small-step-height: 36px !default;
 $stepper-bigger-small-icon-size: 16px !default;
 $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;

package/styles/stepper/_bootstrap-definition.scss

@@ -1,9 +1,14 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $stepper-ol-padding: 0 !default;
 $stepper-step-radius: 9999px !default;
 $stepper-step-width: 32px !default;
+$stepper-step-font-size: 32px !default;
 $stepper-icon-size: 16px !default;
 $stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-bar-width: 1.6px !default;
 $stepper-progress-value-height: 100% !default;
+$stepper-progress-value-width: 100% !default;
 $stepper-progress-position: 50% !default;
 $stepper-temp-outline-width: 2px solid !default;
 $stepper-label-top: 1em !default;
@@ -21,18 +26,43 @@ $stepper-label-order: -1 !default;
 $stepper-font-weight: 600 !default;
 $stepper-text-size: 14px !default;
 $stepper-tooltip-tip-bottom-height: 8px !default;
+$stepper-inherit-height: inherit !default;
+$stepper-content-line-height: 0 !default;
+$stepper-label-line-height: 2em !default;
+$stepper-text-container-border-radius: unset !default;
+$stepper-text-container-border-none: none !default;
+$step-content-padding: 0 8px !default;
+$step-padding-none: 0 !default;
+$step-margin-none: 0 !default;
+$step-container-padding-block: 5px !default;
+$step-label-optional-padding: 6px !default;
+$stepper-horizontal-label-gap: 1em !default;
+$stepper-label-before-optional-gap: .5em !default;
+$stepper-margin-unset: unset !default;
+$stepper-horizontal-label-optional-margin: 2.5em !default;
+$stepper-horizontal-optional-margin-top: .5em !default;
+$stepper-horizontal-label-after-optional-margin-top: .2em !default;
+$stepper-vertical-optional-margin-right: 4em !default;
+$stepper-progress-top-position: var(--progress-top-position) !default;
+$stepper-vertical-progress-position: var(--progress-position) !default;
 
 $stepper-small-step-width: 28px !default;
+$stepper-small-step-font-size: 28px !default;
+$stepper-small-step-height: 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-step-font-size: 40px !default;
+$stepper-bigger-step-height: 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-step-font-size: 36px !default;
+$stepper-bigger-small-step-height: 36px !default;
 $stepper-bigger-small-icon-size: 16px !default;
 $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;