@syncfusion/ej2-navigations 27.2.5 → 28.1.35

package/styles/pager/tailwind3.scss

@@ -0,0 +1,5 @@
+@import 'ej2-base/styles/definition/tailwind3.scss';
+@import 'tailwind3-definition.scss';
+@import 'icons/tailwind3.scss';
+@import 'all.scss';
+@import 'bigger.scss';

package/styles/sidebar/_tailwind3-definition.scss

@@ -0,0 +1,6 @@
+$sidebar-box-shadow: $shadow !default;
+
+//color variables
+$sidebar-background: $content-bg-color !default;
+$sidebar-border: $border-light !default;
+$sidebar-overlay: $overlay-bg-color !default;

package/styles/sidebar/_theme.scss

@@ -201,7 +201,7 @@
   }
 
   .e-backdrop {
-    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI' and $skin-name != 'Material3') {
+    @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') {

package/styles/sidebar/bds.css

@@ -0,0 +1,263 @@
+
+
+
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: var(--color-sf-bg-primary);
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  -webkit-transition: none;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+  /* stylelint-disable */
+}
+.e-sidebar.e-right {
+  border-left: 1px solid var(--color-sf-border-secondary) !important;
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.e-sidebar.e-left {
+  border-right: 1px solid var(--color-sf-border-secondary) !important;
+  left: 0;
+  right: auto;
+  top: 0;
+}
+
+.e-backdrop {
+  -webkit-filter: blur(2px) !important;
+          filter: blur(2px) !important;
+}
+
+.e-sidebar-overlay {
+  backdrop-filter: blur(2px) !important;
+}
+
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+ejs-sidebar {
+  display: none;
+}
+
+.e-sidebar-display {
+  display: block;
+}
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: var(--color-sf-bg-primary);
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  -webkit-transition: none;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+}
+.e-sidebar.e-right.e-open, .e-sidebar.e-left.e-open {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
+  -webkit-transition: -webkit-transform 0.5s ease;
+  transition: -webkit-transform 0.5s ease;
+  transition: transform 0.5s ease;
+  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
+  visibility: visible;
+}
+.e-sidebar.e-right.e-close, .e-sidebar.e-left.e-close {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  visibility: hidden;
+}
+.e-sidebar.e-right.e-close {
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+.e-sidebar.e-left.e-close {
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.e-sidebar.e-left.e-transition.e-close, .e-sidebar.e-right.e-transition.e-close, .e-sidebar.e-right.e-close {
+  -webkit-transition: visibility 500ms, -webkit-transform 0.5s ease;
+  transition: visibility 500ms, -webkit-transform 0.5s ease;
+  transition: transform 0.5s ease, visibility 500ms;
+  transition: transform 0.5s ease, visibility 500ms, -webkit-transform 0.5s ease;
+}
+.e-sidebar.e-right {
+  border-left: 0 solid var(--color-sf-border-secondary);
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.e-sidebar.e-left {
+  border-right: 0 solid var(--color-sf-border-secondary);
+  left: 0;
+  right: auto;
+  top: 0;
+}
+.e-sidebar.e-left.e-close.e-dock, .e-sidebar.e-right.e-close.e-dock {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
+  -webkit-transition: width 0.5s ease, visibility 500ms;
+  transition: width 0.5s ease, visibility 500ms;
+  visibility: visible;
+}
+.e-sidebar.e-left.e-open.e-dock.e-blazor-dock, .e-sidebar.e-right.e-open.e-dock.e-blazor-dock {
+  -webkit-transition: width 0.5s ease, visibility 500ms;
+  transition: width 0.5s ease, visibility 500ms;
+}
+.e-sidebar.e-left.e-open.e-disable-animation, .e-sidebar.e-right.e-open.e-disable-animation, .e-sidebar.e-right.e-close.e-disable-animation, .e-sidebar.e-left.e-close.e-disable-animation {
+  -webkit-transition: none;
+  transition: none;
+}
+.e-sidebar.e-visibility {
+  visibility: hidden;
+}
+.e-sidebar.e-over {
+  -webkit-box-shadow: 0 0 rgba(var(--color-sf-base-black), 0);
+          box-shadow: 0 0 rgba(var(--color-sf-base-black), 0);
+}
+
+.e-sidebarcontainer.e-sidebar.e-over, .e-sidebarcontainer.e-sidebar.e-auto, .e-sidebarcontainer.e-sidebar.e-push, .e-sidebarcontainer.e-sidebar.e-slide + div {
+  -webkit-transition: margin 0.5s ease, -webkit-transform 0.5s ease;
+  transition: margin 0.5s ease, -webkit-transform 0.5s ease;
+  transition: margin 0.5s ease, transform 0.5s ease;
+  transition: margin 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
+}
+.e-sidebarcontainer.e-left.e-open.e-auto + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-left.e-close.e-auto + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-right.e-open.e-auto + div {
+  margin-left: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-right: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-right.e-close.e-auto + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-left.e-open.e-push + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-left.e-close.e-push + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-right.e-open.e-push + div {
+  margin-left: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-right: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-right.e-close.e-push + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-left.e-open.e-slide + div {
+  margin-left: 0;
+  -webkit-transform: translate(var(--sidebar-width));
+          transform: translate(var(--sidebar-width));
+}
+.e-sidebarcontainer.e-left.e-close.e-slide + div {
+  margin-left: 0;
+  -webkit-transform: translate(0);
+          transform: translate(0);
+}
+.e-sidebarcontainer.e-right.e-open.e-slide + div {
+  margin-right: 0;
+  margin-left: 0;
+  -webkit-transform: translate(calc(-1 * var(--sidebar-width)));
+          transform: translate(calc(-1 * var(--sidebar-width)));
+}
+.e-sidebarcontainer.e-right.e-close.e-slide + div {
+  margin-right: 0;
+  margin-left: 0;
+  -webkit-transform: translate(0);
+          transform: translate(0);
+}
+
+.e-sidebar-absolute {
+  position: absolute;
+}
+
+.e-sidebar-context {
+  overflow-x: hidden;
+  position: relative;
+}
+
+.e-backdrop,
+.e-sidebar-overlay {
+  background-color: var(--color-sf-utility-overlay-bg-color);
+  height: 100%;
+  left: 0;
+  pointer-events: auto;
+  top: 0;
+  z-index: 999;
+}
+
+.e-backdrop {
+  width: auto;
+}
+
+.e-sidebar-overlay {
+  position: fixed;
+  width: 100%;
+}
+
+.e-content-animation {
+  transition: margin 0.5s ease, -webkit-transform 0.5s ease, transform 0.5s ease;
+}
+.e-content-animation.e-overlay {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: auto;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.e-disable-interaction {
+  pointer-events: none;
+  -ms-touch-action: 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/bds.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'bds-definition.scss';
+@import 'all.scss';

package/styles/sidebar/tailwind3.css

@@ -0,0 +1,227 @@
+
+
+
+
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable-line no-empty-source */
+ejs-sidebar {
+  display: none;
+}
+
+.e-sidebar-display {
+  display: block;
+}
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: var(--color-sf-content-bg-color);
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  -webkit-transition: none;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+}
+.e-sidebar.e-right.e-open, .e-sidebar.e-left.e-open {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
+  -webkit-transition: -webkit-transform 0.5s ease;
+  transition: -webkit-transform 0.5s ease;
+  transition: transform 0.5s ease;
+  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
+  visibility: visible;
+}
+.e-sidebar.e-right.e-close, .e-sidebar.e-left.e-close {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  visibility: hidden;
+}
+.e-sidebar.e-right.e-close {
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+.e-sidebar.e-left.e-close {
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.e-sidebar.e-left.e-transition.e-close, .e-sidebar.e-right.e-transition.e-close, .e-sidebar.e-right.e-close {
+  -webkit-transition: visibility 500ms, -webkit-transform 0.5s ease;
+  transition: visibility 500ms, -webkit-transform 0.5s ease;
+  transition: transform 0.5s ease, visibility 500ms;
+  transition: transform 0.5s ease, visibility 500ms, -webkit-transform 0.5s ease;
+}
+.e-sidebar.e-right {
+  border-left: 1px solid var(--color-sf-border-light);
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.e-sidebar.e-left {
+  border-right: 1px solid var(--color-sf-border-light);
+  left: 0;
+  right: auto;
+  top: 0;
+}
+.e-sidebar.e-left.e-close.e-dock, .e-sidebar.e-right.e-close.e-dock {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
+  -webkit-transition: width 0.5s ease, visibility 500ms;
+  transition: width 0.5s ease, visibility 500ms;
+  visibility: visible;
+}
+.e-sidebar.e-left.e-open.e-dock.e-blazor-dock, .e-sidebar.e-right.e-open.e-dock.e-blazor-dock {
+  -webkit-transition: width 0.5s ease, visibility 500ms;
+  transition: width 0.5s ease, visibility 500ms;
+}
+.e-sidebar.e-left.e-open.e-disable-animation, .e-sidebar.e-right.e-open.e-disable-animation, .e-sidebar.e-right.e-close.e-disable-animation, .e-sidebar.e-left.e-close.e-disable-animation {
+  -webkit-transition: none;
+  transition: none;
+}
+.e-sidebar.e-visibility {
+  visibility: hidden;
+}
+.e-sidebar.e-over {
+  -webkit-box-shadow: 0 1px 2px -1px rgba(var(--color-sf-black), 0.1), 0 1px 3px 0 rgba(var(--color-sf-black), 0.1);
+          box-shadow: 0 1px 2px -1px rgba(var(--color-sf-black), 0.1), 0 1px 3px 0 rgba(var(--color-sf-black), 0.1);
+}
+
+.e-sidebarcontainer.e-sidebar.e-over, .e-sidebarcontainer.e-sidebar.e-auto, .e-sidebarcontainer.e-sidebar.e-push, .e-sidebarcontainer.e-sidebar.e-slide + div {
+  -webkit-transition: margin 0.5s ease, -webkit-transform 0.5s ease;
+  transition: margin 0.5s ease, -webkit-transform 0.5s ease;
+  transition: margin 0.5s ease, transform 0.5s ease;
+  transition: margin 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
+}
+.e-sidebarcontainer.e-left.e-open.e-auto + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-left.e-close.e-auto + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-right.e-open.e-auto + div {
+  margin-left: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-right: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-right.e-close.e-auto + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-left.e-open.e-push + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-left.e-close.e-push + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-right.e-open.e-push + div {
+  margin-left: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-right: var(--sidebar-width);
+}
+.e-sidebarcontainer.e-right.e-close.e-push + div {
+  margin-right: 0;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+  margin-left: 0;
+}
+.e-sidebarcontainer.e-left.e-open.e-slide + div {
+  margin-left: 0;
+  -webkit-transform: translate(var(--sidebar-width));
+          transform: translate(var(--sidebar-width));
+}
+.e-sidebarcontainer.e-left.e-close.e-slide + div {
+  margin-left: 0;
+  -webkit-transform: translate(0);
+          transform: translate(0);
+}
+.e-sidebarcontainer.e-right.e-open.e-slide + div {
+  margin-right: 0;
+  margin-left: 0;
+  -webkit-transform: translate(calc(-1 * var(--sidebar-width)));
+          transform: translate(calc(-1 * var(--sidebar-width)));
+}
+.e-sidebarcontainer.e-right.e-close.e-slide + div {
+  margin-right: 0;
+  margin-left: 0;
+  -webkit-transform: translate(0);
+          transform: translate(0);
+}
+
+.e-sidebar-absolute {
+  position: absolute;
+}
+
+.e-sidebar-context {
+  overflow-x: hidden;
+  position: relative;
+}
+
+.e-backdrop,
+.e-sidebar-overlay {
+  background-color: var(--color-sf-overlay-bg-color);
+  height: 100%;
+  left: 0;
+  pointer-events: auto;
+  top: 0;
+  z-index: 999;
+}
+
+.e-backdrop {
+  width: auto;
+}
+
+.e-sidebar-overlay {
+  opacity: 0.5;
+  position: fixed;
+  width: 100%;
+}
+
+.e-content-animation {
+  transition: margin 0.5s ease, -webkit-transform 0.5s ease, transform 0.5s ease;
+}
+.e-content-animation.e-overlay {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: auto;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.e-disable-interaction {
+  pointer-events: none;
+  -ms-touch-action: 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/tailwind3.scss

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

package/styles/stepper/_layout.scss

@@ -267,6 +267,7 @@
     }
     &.e-vertical {
       min-height: inherit;
+      height: inherit;
       display: inline-block;
       .e-step-label.e-step-label-only,
       .e-step-template {
@@ -286,6 +287,7 @@
       .e-stepper-steps {
         flex-direction: column;
         min-height: inherit;
+        height: inherit;
         float: left;
         align-items: start;
         margin: $stepper-ol-padding;

package/styles/stepper/_tailwind3-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 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/_theme.scss

@@ -74,7 +74,8 @@
       background-color: $stepper-outline-color;
       border-color: transparent;
     }
-    .e-step-disabled .e-indicator {
+    .e-step-disabled .e-indicator,
+    .e-step-disabled .e-step {
       background: $step-disabled-bg-color;
       color: $step-disabled-color;
     }