@syncfusion/ej2-navigations 28.1.41 → 28.2.3-1479479

package/styles/sidebar/_theme.scss

@@ -1,251 +1,251 @@
-@include export-module('sidebar-theme') {
-
-  ejs-sidebar {
-    display: none;
-  }
-
-  .e-sidebar-display {
-    display: block;
-  }
-
-  .e-sidebar {
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-tap-highlight-color: transparent;
-    background: $sidebar-background;
-    height: 100%;
-    overflow: auto;
-    position: fixed;
-    top: 0;
-    transition: none;
-    vertical-align: middle;
-    visibility: hidden;
-    will-change: transform;
-
-    &.e-right.e-open,
-    &.e-left.e-open {
-      transform: translateX(0%);
-      transition: transform .5s ease;
-      visibility: visible;
-    }
-
-    &.e-right.e-close,
-    &.e-left.e-close {
-      box-shadow: none;
-      visibility: hidden;
-    }
-
-    &.e-right.e-close {
-      transform: translateX(100%);
-    }
-
-    &.e-left.e-close {
-      transform: translateX(-100%);
-    }
-
-    &.e-left.e-transition.e-close,
-    &.e-right.e-transition.e-close,
-    &.e-right.e-close {
-      transition: transform .5s ease, visibility 500ms;
-    }
-
-    &.e-right {
-      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
-        border-left: 0 solid $sidebar-border;
-      }
-      @else {
-        border-left: 1px solid $sidebar-border;
-      }
-      left: auto;
-      right: 0;
-      top: 0;
-    }
-
-    &.e-left {
-      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
-        border-right: 0 solid $sidebar-border;
-      }
-      @else {
-        border-right: 1px solid $sidebar-border;
-      }
-      left: 0;
-      right: auto;
-      top: 0;
-    }
-
-    &.e-left.e-close.e-dock,
-    &.e-right.e-close.e-dock {
-      transform: translateX(0%);
-      transition: width .5s ease, visibility 500ms;
-      visibility: visible;
-    }
-
-    &.e-left.e-open.e-dock.e-blazor-dock,
-    &.e-right.e-open.e-dock.e-blazor-dock {
-      transition: width .5s ease, visibility 500ms;
-    }
-
-    &.e-left.e-open.e-disable-animation,
-    &.e-right.e-open.e-disable-animation,
-    &.e-right.e-close.e-disable-animation,
-    &.e-left.e-close.e-disable-animation {
-      transition: none;
-    }
-
-    &.e-visibility {
-      visibility: hidden;
-    }
-
-    &.e-over {
-      box-shadow: $sidebar-box-shadow;
-    }
-  }
-
-  .e-sidebarcontainer {
-    &.e-sidebar {
-      &.e-over,
-      &.e-auto,
-      &.e-push,
-      &.e-slide + div {
-        transition: margin .5s ease, transform .5s ease;
-      }
-    }
-
-    &.e-left.e-open.e-auto + div {
-      margin-right: 0;
-      transform: translateX(0);
-      margin-left: var(--sidebar-width);
-    }
-
-    &.e-left.e-close.e-auto + div {
-      margin-right: 0;
-      transform: translateX(0);
-      margin-left: 0;
-    }
-
-    &.e-right.e-open.e-auto + div {
-      margin-left: 0;
-      transform: translateX(0);
-      margin-right: var(--sidebar-width);
-    }
-
-    &.e-right.e-close.e-auto + div {
-      margin-right: 0;
-      transform: translateX(0);
-      margin-left: 0;
-    }
-
-    &.e-left.e-open.e-push + div {
-      margin-right: 0;
-      transform: translateX(0);
-      margin-left: var(--sidebar-width);
-    }
-
-    &.e-left.e-close.e-push + div {
-      margin-right: 0;
-      transform: translateX(0);
-      margin-left: 0;
-    }
-
-    &.e-right.e-open.e-push + div {
-      margin-left: 0;
-      transform: translateX(0);
-      margin-right: var(--sidebar-width);
-    }
-
-    &.e-right.e-close.e-push + div {
-      margin-right: 0;
-      transform: translateX(0);
-      margin-left: 0;
-    }
-
-    &.e-left.e-open.e-slide + div {
-      margin-left: 0;
-      transform: translate(var(--sidebar-width));
-    }
-
-    &.e-left.e-close.e-slide + div {
-      margin-left: 0;
-      transform: translate(0);
-    }
-
-    &.e-right.e-open.e-slide + div {
-      margin-right: 0;
-      margin-left: 0;
-      transform: translate(calc(-1 * var(--sidebar-width)));
-    }
-
-    &.e-right.e-close.e-slide + div {
-      margin-right: 0;
-      margin-left: 0;
-      transform: translate(0);
-    }
-  }
-
-  .e-sidebar-absolute {
-    position: absolute;
-  }
-
-  .e-sidebar-context {
-    overflow-x: hidden;
-    position: relative;
-  }
-
-  .e-backdrop,
-  .e-sidebar-overlay {
-    background-color: $sidebar-overlay;
-    height: 100%;
-    left: 0;
-    pointer-events: auto;
-    top: 0;
-    z-index: 999;
-  }
-
-  .e-backdrop {
-    @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI' and $skin-name != 'Material3') {
-      opacity: .5;
-    }
-    @if ($skin-name == 'fluent2') {
-      filter: $sidebar-overlay-filter;
-      opacity: $sidebar-overlay-opacity;
-    }
-    width: auto;
-  }
-
-  .e-sidebar-overlay {
-    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
-      opacity: .5;
-    }
-    @if ($skin-name == 'fluent2') {
-      backdrop-filter: $sidebar-overlay-filter;
-    }
-    position: fixed;
-    width: 100%;
-  }
-
-  .e-content-animation {
-    transition: margin .5s ease, -webkit-transform .5s ease, transform .5s ease;
-
-    &.e-overlay {
-      box-sizing: border-box;
-      overflow: auto;
-      user-select: none;
-    }
-  }
-
-  .e-disable-interaction {
-    pointer-events: none;
-    touch-action: none;
-  }
-
-  .e-sidebar-overflow {
-    overflow-x: hidden;
-  }
-
-  .e-content-placeholder.e-sidebar.e-placeholder-sidebar {
-    left: 0;
-    position: fixed;
-    right: auto;
-    top: 0;
-    visibility: visible;
-  }
-}
+@include export-module('sidebar-theme') {
+
+  ejs-sidebar {
+    display: none;
+  }
+
+  .e-sidebar-display {
+    display: block;
+  }
+
+  .e-sidebar {
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-tap-highlight-color: transparent;
+    background: $sidebar-background;
+    height: 100%;
+    overflow: auto;
+    position: fixed;
+    top: 0;
+    transition: none;
+    vertical-align: middle;
+    visibility: hidden;
+    will-change: transform;
+
+    &.e-right.e-open,
+    &.e-left.e-open {
+      transform: translateX(0%);
+      transition: transform .5s ease;
+      visibility: visible;
+    }
+
+    &.e-right.e-close,
+    &.e-left.e-close {
+      box-shadow: none;
+      visibility: hidden;
+    }
+
+    &.e-right.e-close {
+      transform: translateX(100%);
+    }
+
+    &.e-left.e-close {
+      transform: translateX(-100%);
+    }
+
+    &.e-left.e-transition.e-close,
+    &.e-right.e-transition.e-close,
+    &.e-right.e-close {
+      transition: transform .5s ease, visibility 500ms;
+    }
+
+    &.e-right {
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+        border-left: 0 solid $sidebar-border;
+      }
+      @else {
+        border-left: 1px solid $sidebar-border;
+      }
+      left: auto;
+      right: 0;
+      top: 0;
+    }
+
+    &.e-left {
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+        border-right: 0 solid $sidebar-border;
+      }
+      @else {
+        border-right: 1px solid $sidebar-border;
+      }
+      left: 0;
+      right: auto;
+      top: 0;
+    }
+
+    &.e-left.e-close.e-dock,
+    &.e-right.e-close.e-dock {
+      transform: translateX(0%);
+      transition: width .5s ease, visibility 500ms;
+      visibility: visible;
+    }
+
+    &.e-left.e-open.e-dock.e-blazor-dock,
+    &.e-right.e-open.e-dock.e-blazor-dock {
+      transition: width .5s ease, visibility 500ms;
+    }
+
+    &.e-left.e-open.e-disable-animation,
+    &.e-right.e-open.e-disable-animation,
+    &.e-right.e-close.e-disable-animation,
+    &.e-left.e-close.e-disable-animation {
+      transition: none;
+    }
+
+    &.e-visibility {
+      visibility: hidden;
+    }
+
+    &.e-over {
+      box-shadow: $sidebar-box-shadow;
+    }
+  }
+
+  .e-sidebarcontainer {
+    &.e-sidebar {
+      &.e-over,
+      &.e-auto,
+      &.e-push,
+      &.e-slide + div {
+        transition: margin .5s ease, transform .5s ease;
+      }
+    }
+
+    &.e-left.e-open.e-auto + div {
+      margin-right: 0;
+      transform: translateX(0);
+      margin-left: var(--sidebar-width);
+    }
+
+    &.e-left.e-close.e-auto + div {
+      margin-right: 0;
+      transform: translateX(0);
+      margin-left: 0;
+    }
+
+    &.e-right.e-open.e-auto + div {
+      margin-left: 0;
+      transform: translateX(0);
+      margin-right: var(--sidebar-width);
+    }
+
+    &.e-right.e-close.e-auto + div {
+      margin-right: 0;
+      transform: translateX(0);
+      margin-left: 0;
+    }
+
+    &.e-left.e-open.e-push + div {
+      margin-right: 0;
+      transform: translateX(0);
+      margin-left: var(--sidebar-width);
+    }
+
+    &.e-left.e-close.e-push + div {
+      margin-right: 0;
+      transform: translateX(0);
+      margin-left: 0;
+    }
+
+    &.e-right.e-open.e-push + div {
+      margin-left: 0;
+      transform: translateX(0);
+      margin-right: var(--sidebar-width);
+    }
+
+    &.e-right.e-close.e-push + div {
+      margin-right: 0;
+      transform: translateX(0);
+      margin-left: 0;
+    }
+
+    &.e-left.e-open.e-slide + div {
+      margin-left: 0;
+      transform: translate(var(--sidebar-width));
+    }
+
+    &.e-left.e-close.e-slide + div {
+      margin-left: 0;
+      transform: translate(0);
+    }
+
+    &.e-right.e-open.e-slide + div {
+      margin-right: 0;
+      margin-left: 0;
+      transform: translate(calc(-1 * var(--sidebar-width)));
+    }
+
+    &.e-right.e-close.e-slide + div {
+      margin-right: 0;
+      margin-left: 0;
+      transform: translate(0);
+    }
+  }
+
+  .e-sidebar-absolute {
+    position: absolute;
+  }
+
+  .e-sidebar-context {
+    overflow-x: hidden;
+    position: relative;
+  }
+
+  .e-backdrop,
+  .e-sidebar-overlay {
+    background-color: $sidebar-overlay;
+    height: 100%;
+    left: 0;
+    pointer-events: auto;
+    top: 0;
+    z-index: 999;
+  }
+
+  .e-backdrop {
+    @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI' and $skin-name != 'Material3') {
+      opacity: .5;
+    }
+    @if ($skin-name == 'fluent2') {
+      filter: $sidebar-overlay-filter;
+      opacity: $sidebar-overlay-opacity;
+    }
+    width: auto;
+  }
+
+  .e-sidebar-overlay {
+    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
+      opacity: .5;
+    }
+    @if ($skin-name == 'fluent2') {
+      backdrop-filter: $sidebar-overlay-filter;
+    }
+    position: fixed;
+    width: 100%;
+  }
+
+  .e-content-animation {
+    transition: margin .5s ease, -webkit-transform .5s ease, transform .5s ease;
+
+    &.e-overlay {
+      box-sizing: border-box;
+      overflow: auto;
+      user-select: none;
+    }
+  }
+
+  .e-disable-interaction {
+    pointer-events: none;
+    touch-action: none;
+  }
+
+  .e-sidebar-overflow {
+    overflow-x: hidden;
+  }
+
+  .e-content-placeholder.e-sidebar.e-placeholder-sidebar {
+    left: 0;
+    position: fixed;
+    right: auto;
+    top: 0;
+    visibility: visible;
+  }
+}

package/styles/sidebar/bootstrap5-dark.css

@@ -11,7 +11,7 @@ ejs-sidebar {
 .e-sidebar {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   height: 100%;
   overflow: auto;
   position: fixed;

package/styles/sidebar/material3-dark.scss

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

package/styles/sidebar/material3.scss

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

package/styles/stepper/_bds-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 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;
+$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;