@syncfusion/ej2-navigations 23.2.7 → 24.1.46

package/styles/tailwind.scss

@@ -11,3 +11,4 @@
 @import 'menu/tailwind.scss';
 @import 'breadcrumb/tailwind.scss';
 @import 'appbar/tailwind.scss';
+@import 'stepper/tailwind.scss';

package/styles/toolbar/_bootstrap5-definition.scss

@@ -136,7 +136,7 @@ $tbar-pressed-bg: $secondary-bg-color-focus !default;
 $tbar-pressed-font: $content-text-color-alt2 !default;
 $tbar-select-font: $content-text-color-alt2 !default;
 $tbar-default-icon-overlay: $content-text-color-alt2 !default;
-$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color-alt2 !default;
 $tbar-default-font-overlay: $content-text-color-alt2 !default;
 $tbar-active-font-color: $primary-text-color !default;
@@ -150,7 +150,7 @@ $tbar-nrml-btn-border-radius: 4px !default;
 $tbar-nrml-btn-focus-padding: 0 4px !default;
 $tbar-nrml-btn-focus-outline: 0 !default;
 
-$tbar-btn-icons-focus-color: $primary-text-color !default;
+$tbar-btn-icons-focus-color: $icon-color !default;
 $tbar-btn-text-focus-color: $primary-text-color !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
 $tbar-btn-hover-border-size: $tbar-border-size !default;
@@ -169,7 +169,7 @@ $tbar-flat-btn-active-box-shadow: none !default;
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 5px 6px !default;
 $tbar-ext-btn-icon-font-size: $text-base !default;
-$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-focus-box-shadow: $secondary-shadow-focus !default;
 $tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
 $tbar-ext-btn-border: none !default;
 

package/styles/toolbar/_fluent-definition.scss

@@ -38,7 +38,7 @@ $tbar-separator-border: $border-dark !default;
 $tbar-default-border: $border-light !default;
 $tbar-hover-border-color: $icon-color !default;
 $tbar-focus-border-color: $tbar-hover-border-color !default;
-$tbar-focus-bg: $content-bg-color-alt4 !default;
+$tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color !default;
 
 $tbar-default-font-overlay: $content-text-color !default;
@@ -159,7 +159,7 @@ $tbar-flat-btn-active-box-shadow: none !default;
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 0 !default;
 $tbar-ext-btn-icon-font-size: $text-sm !default;
-$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-focus-box-shadow: inset 0 0 0 1px !default;
 $tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
 $tbar-ext-btn-border: none !default;
 

package/styles/toolbar/_tailwind-definition.scss

@@ -38,7 +38,7 @@ $tbar-separator-border: $border-light !default;
 $tbar-default-border: $border-light !default;
 $tbar-hover-border-color: $icon-color !default;
 $tbar-focus-border-color: $tbar-hover-border-color !default;
-$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color-alt2 !default;
 
 $tbar-default-font-overlay: $content-text-color-alt2 !default;
@@ -159,7 +159,7 @@ $tbar-flat-btn-active-box-shadow: $shadow-sm !default;
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 5px 6px !default;
 $tbar-ext-btn-icon-font-size: $text-base !default;
-$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-focus-box-shadow: $shadow-focus-ring1 !default;
 $tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
 $tbar-ext-btn-border: none !default;
 

package/styles/toolbar/bootstrap5-dark.css

@@ -854,16 +854,16 @@
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   color: #adb5bd;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: #fff;
@@ -877,7 +877,7 @@
   color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
   color: #fff;
@@ -1044,12 +1044,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #5c636a;

package/styles/toolbar/bootstrap5.css

@@ -854,16 +854,16 @@
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   color: #6c757d;
   border-color: #6c757d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #fff;
+  color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: #fff;
@@ -877,7 +877,7 @@
   color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
-  color: #fff;
+  color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
   color: #fff;
@@ -1044,12 +1044,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   border-color: #6c757d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #5c636a;

package/styles/toolbar/fluent-dark.css

@@ -853,13 +853,13 @@
   box-shadow: none;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #323130;
+  background: none;
   border-radius: 0;
   color: #f3f2f1;
   border-color: #a19f9d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #a19f9d;
@@ -1043,12 +1043,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #323130;
+  background: none;
   border-radius: 0;
   border-color: #a19f9d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #292827;

package/styles/toolbar/fluent.css

@@ -853,13 +853,13 @@
   box-shadow: none;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #e1dfdd;
+  background: none;
   border-radius: 0;
   color: #201f1e;
   border-color: #605e5c;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #605e5c;
@@ -1043,12 +1043,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #e1dfdd;
+  background: none;
   border-radius: 0;
   border-color: #605e5c;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #edebe9;

package/styles/toolbar/tailwind-dark.css

@@ -853,13 +853,13 @@
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #4b5563;
+  background: none;
   border-radius: 4px;
   color: #9ca3af;
   border-color: #d1d5db;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #22d3ee;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #d1d5db;
@@ -1043,12 +1043,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #4b5563;
+  background: none;
   border-radius: 4px;
   border-color: #d1d5db;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #22d3ee;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #4b5563;

package/styles/toolbar/tailwind.css

@@ -853,13 +853,13 @@
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #e5e7eb;
+  background: none;
   border-radius: 4px;
   color: #6b7280;
   border-color: #6b7280;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #4f46e5;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #6b7280;
@@ -1043,12 +1043,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #e5e7eb;
+  background: none;
   border-radius: 4px;
   border-color: #6b7280;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #4f46e5;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #e5e7eb;