@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/styles/toolbar/bootstrap5.css

@@ -25,8 +25,8 @@
 /*! toolbar layout */
 .e-bigger .e-toolbar,
 .e-toolbar.e-bigger {
-  height: 48px;
-  min-height: 48px;
+  height: 46px;
+  min-height: 46px;
 }
 
 .e-bigger .e-toolbar .e-tbar-btn .e-icons,
@@ -66,7 +66,7 @@
 
 .e-bigger .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
-  margin-left: 10px;
+  margin-left: 12px;
   margin-right: initial;
 }
 
@@ -77,7 +77,7 @@
 
 .e-bigger .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child,
 .e-toolbar.e-bigger.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child {
-  margin-left: 10px;
+  margin-left: 12px;
   margin-right: 0;
 }
 
@@ -99,12 +99,12 @@
 .e-bigger .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-toolbar.e-bigger.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 10px;
+  margin-right: 12px;
 }
 
 .e-bigger .e-toolbar .e-hor-nav,
 .e-toolbar.e-bigger .e-hor-nav {
-  min-height: 48px;
+  min-height: 46px;
   min-width: 36px;
 }
 
@@ -141,7 +141,7 @@
 
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn,
 .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
-  min-height: 48px;
+  min-height: 46px;
   padding: 8px 18px;
 }
 
@@ -159,7 +159,7 @@
 
 .e-bigger .e-toolbar .e-toolbar-items,
 .e-toolbar.e-bigger .e-toolbar-items {
-  min-height: 48px;
+  min-height: 46px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items.e-toolbar-multirow,
@@ -194,7 +194,7 @@
 
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
-  margin-right: 10px;
+  margin-right: 12px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-center .e-toolbar-item,
@@ -204,7 +204,7 @@
 
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item:last-child {
-  margin-right: 10px;
+  margin-right: 12px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-right .e-toolbar-item,
@@ -214,29 +214,29 @@
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
-  margin-left: 10px;
+  margin-left: 12px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-toolbar.e-bigger .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
-  margin-left: 10px;
+  margin-left: 12px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item {
-  min-height: 48px;
+  min-height: 46px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item:not(.e-separator) {
   min-width: 49px;
-  padding: 5px 6px;
+  padding: 4px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item.e-separator {
   height: 30px;
-  margin: 8px 4px;
+  margin: 8px;
   min-height: 30px;
 }
 
@@ -281,10 +281,10 @@
 
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended {
-  min-height: 48px;
+  min-height: 46px;
   padding-bottom: 0;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 12px;
+  padding-right: 12px;
   padding-top: 0;
   margin-left: -1px;
 }
@@ -314,7 +314,7 @@
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator),
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
   min-width: 49px;
-  padding: 5px 6px;
+  padding: 4px;
 }
 
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator.e-extended-separator,
@@ -337,7 +337,7 @@
   cursor: pointer;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 48px;
+  min-height: 46px;
   vertical-align: middle;
   width: auto;
 }
@@ -368,7 +368,7 @@
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   height: 30px;
-  margin: 8px 4px;
+  margin: 8px;
   min-height: 30px;
 }
 
@@ -387,7 +387,7 @@
 
 .e-bigger .e-toolbar.e-extended-toolbar.e-rtl .e-toolbar-extended,
 .e-toolbar.e-bigger.e-extended-toolbar.e-rtl .e-toolbar-extended {
-  padding-right: 10px;
+  padding-right: 12px;
   margin-left: 0;
 }
 
@@ -552,8 +552,8 @@
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
   height: calc(100% - 10px);
   margin: 0;
-  min-height: 30px;
-  min-width: 30px;
+  min-height: 32px;
+  min-width: 32px;
   padding: 0 4px;
 }
 
@@ -562,7 +562,7 @@
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
-  margin: 7px 3px;
+  margin: 5px 10px;
   min-height: 16px;
   min-width: 1px;
   vertical-align: middle;
@@ -1008,7 +1008,7 @@
 }
 
 .e-toolbar .e-toolbar-items .e-toolbar-item.e-separator {
-  margin: 7px 3px;
+  margin: 5px 10px;
   min-height: 24px;
   min-width: 1px;
 }
@@ -1024,8 +1024,8 @@
 .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
   height: calc(100% - 10px);
   margin: 0;
-  min-height: 30px;
-  min-width: 30px;
+  min-height: 32px;
+  min-width: 32px;
   padding: 0 4px;
   border-radius: 4px;
 }
@@ -1278,21 +1278,25 @@
   background: #5c636a;
 }
 
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
+  background: transparent;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
   background: #f8f9fa;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
-  background: #e9ecef;
+  background: #5c636a;
   border: 0;
   box-shadow: none;
-  border-left: 0 #dee2e6 #e9ecef;
+  border-left: 0 #dee2e6 #5c636a;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) .e-icons {
-  color: #495057;
+  color: #fff;
 }
 
 .e-toolbar .e-tbar-btn {

package/styles/toolbar/fabric-dark.css

@@ -1248,6 +1248,10 @@
   outline: none;
 }
 
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
+  background: transparent;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
   background: #333232;
 }

package/styles/toolbar/fabric.css

@@ -1249,6 +1249,10 @@
   outline: none;
 }
 
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
+  background: transparent;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
   background: #fff;
 }