@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/styles/tailwind.scss

@@ -2,6 +2,7 @@
 @import 'v-scroll/tailwind.scss';
 @import 'toolbar/tailwind.scss';
 @import 'accordion/tailwind.scss';
+@import 'carousel/tailwind.scss';
 @import 'context-menu/tailwind.scss';
 @import 'tab/tailwind.scss';
 @import 'treeview/tailwind.scss';

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

@@ -71,6 +71,7 @@ $tbar-btn-border: none !default;
 $tbar-nav-pressed-box-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
 $tbar-pop-box-shadow:  0 6px 12px rgba(0 , 0 , 0 , .175) !default;
 $tbar-pop-radius: 4px !default;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-radius: 4px !default;
 $tbar-border-nav-active-type: none !default;
 

package/styles/toolbar/_bootstrap-definition.scss

@@ -67,6 +67,7 @@ $tbar-btn-border: none !default;
 $tbar-nav-pressed-box-shadow: inset  0 3px 5px rgba(0 , 0 , 0 , .125) !default;
 $tbar-pop-box-shadow:  0 6px 12px rgba(0 , 0 , 0 , .175) !default;
 $tbar-pop-radius: 4px !default;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-radius: 4px !default;
 $tbar-border-nav-active-type: none !default;
 

package/styles/toolbar/_bootstrap4-definition.scss

@@ -73,6 +73,7 @@ $tbar-pressed-border: transparent !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-pop-box-shadow: none !default;
 $tbar-pop-radius: 4px !default;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-radius: 4px !default;
 $tbar-border-nav-active-type: none !default;
 

package/styles/toolbar/_bootstrap5-definition.scss

@@ -17,7 +17,7 @@ $tbar-nav-pressed-box-shadow: none !default;
 $tbar-btn-pressed-box-shadow: none !default;
 
 // padding definitions
-$tbar-item-bgr-padding: 5px 6px !default;
+$tbar-item-bgr-padding: 4px !default;
 $tbar-item-nrml-padding: 4px !default;
 $tbar-btn-nrml-padding: 0 4px !default;
 $tbar-btn-bgr-padding: 0 8px !default;
@@ -43,16 +43,16 @@ $tbar-item-nrml-padding-small: 1px 0 !default;
 // dimension definitions
 $tbar-btn-bgr-line-height: 24px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-nrml-minheight: 30px !default;
+$tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-bgr-minheight: 38px !default;
-$tbar-btn-nrml-minwidth: 30px !default;
+$tbar-btn-nrml-minwidth: 32px !default;
 $tbar-btn-bgr-minwidth: 38px !default;
 $tbar-btn-bgr-height: calc(100% - 11px) !default;
 $tbar-btn-nrml-height: calc(100% - 10px) !default;
 $tbar-nrml-size: 38px !default;
-$tbar-bgr-size: 48px !default;
+$tbar-bgr-size: 46px !default;
 $tbar-nrml-items-size: 38px !default;
-$tbar-bgr-items-size: 48px !default;
+$tbar-bgr-items-size: 46px !default;
 $tbar-nrml-item-size: 38px !default;
 $tbar-item-height: 38px !default;
 $tbar-item-nrml-minwidth: 28px !default;
@@ -69,7 +69,7 @@ $tbar-btn-txt-line-height: inherit !default;
 $tbar-nav-nrml-width: 28px !default;
 $tbar-nav-bgr-width: 36px !default;
 $tbar-btn-pop-nrml-minheight: 38px !default;
-$tbar-btn-pop-bgr-minheight: 48px !default;
+$tbar-btn-pop-bgr-minheight: 46px !default;
 $tbar-radius: 0;
 $tbar-pop-radius: 4px;
 $tbar-pop-padding-bottom: 5px !default;
@@ -85,7 +85,7 @@ $tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
 
 // margin definitions
 $tbar-item-nrml-mrgn: 8px !default;
-$tbar-item-bgr-mrgn: 10px !default;
+$tbar-item-bgr-mrgn: 12px !default;
 $tbar-multirow-items-mrgn-bigger: 12.5px !default;
 $tbar-multirow-items-mrgn-small: 10px !default;
 $tbar-multirow-item-top-btm-mrgn-bigger: 1.5px 0 !default;
@@ -96,9 +96,9 @@ $tbar-btn-nrml-mrgn: 0 !default;
 $tbar-v-btn-bgr-mrgn: 0 !default;
 $tbar-v-btn-nrml-mrgn: 0 !default;
 $tbar-separator-vertical-nrml-mrgn: 3px 7px;
-$tbar-separator-bgr-mrgn: 8px 4px;
+$tbar-separator-bgr-mrgn: 8px;
 $tbar-separator-vertical-bgr-mrgn: 5px 10px;
-$tbar-separator-nrml-mrgn: 7px 3px;
+$tbar-separator-nrml-mrgn: 5px 10px;
 
 // border definitions
 $border-size: 0;
@@ -117,6 +117,7 @@ $tbar-press-border-color: $border-light !default;
 $tbar-border-nav-type: $border-light !default;
 $tbar-border-nav-active-type: $border-light !default;
 $tbar-btn-border: none !default;
+$tbar-item-pop-bg-color: $transparent !default;
 $tbar-popup-border-width: 0 0 0 $border-size !default;
 $tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
 $tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
@@ -140,14 +141,14 @@ $tbar-hover-bg:  $secondary-bg-color-hover !default;
 $tbar-hover-font: $icon-color !default;
 $tbar-hover-font-color: $tbar-hover-font !default;
 $tbar-default-icon-color: $icon-color !default;
-$tbar-pressed-bg: $content-bg-color-alt2 !default;
+$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-font-overlay: $content-text-color-alt2 !default;
 $tbar-default-icon-overlay: $content-text-color-alt2 !default;
 $tbar-focus-bg: $tbar-hover-bg !default;
 $tbar-press-font: $content-text-color-alt2 !default;
-$tbar-active-font-color: $tbar-press-font !default;
+$tbar-active-font-color: $primary-text-color !default;
 $tbar-btn-active-font-color: $tbar-press-font !default;
 $tbar-popup-btn-bg-color: transparent !default;
 $tbar-pop-bg: $flyout-bg-color !default;

package/styles/toolbar/_fabric-dark-definition.scss

@@ -13,6 +13,7 @@ $tbar-pop-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .21) !default;
 $tbar-hover-border-color: $hover-border-color !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pop-btn-bgr-padding: $tbar-zero-value 4px !default;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-pop-btn-nrml-padding: $tbar-zero-value 4px !default;
 $tbar-separator-bgr-minheight: 36px !default;
 $tbar-separator-vertical-bgr-mrgn: 5px 10px !default;

package/styles/toolbar/_fabric-definition.scss

@@ -23,6 +23,7 @@ $tbar-btn-box-shadow: none !default;
 $tbar-default-bg: $neutral-white !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
 $tbar-pop-bg: $tbar-default-bg !default;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-default-font: $neutral-light-font !default;
 $tbar-active-bg: $theme-primary !default;
 $tbar-active-icon-color: $theme-primary-font !default;

package/styles/toolbar/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/toolbar/_fluent-definition.scss

@@ -2,10 +2,10 @@ $tbar-skin: 'FluentUI' !default;
 $border-size: 0;
 $border-type: solid;
 $tbar-icons-bgr-font-size: $text-xl;
-$tbar-separator-bgr-mrgn: 8px 4px;
+$tbar-separator-bgr-mrgn: 4px !default;
 $tbar-separator-vertical-bgr-mrgn: 5px 10px;
 $tbar-radius: 0;
-$tbar-separator-nrml-mrgn: 7px 3px;
+$tbar-separator-nrml-mrgn: 4px !default;
 $tbar-pop-radius: 4px;
 $tbar-separator-vertical-nrml-mrgn: 3px 7px;
 $tbar-border-size: $border-size;
@@ -44,7 +44,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: $tbar-hover-bg !default;
+$tbar-focus-bg: $content-bg-color-alt4 !default;
 $tbar-press-font: $content-text-color !default;
 
 $tbar-btn-active-font-color: $tbar-press-font !default;
@@ -64,7 +64,7 @@ $tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
 $tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
 $tbar-nrml-size: 38px !default;
 $tbar-bgr-size: 48px !default;
-$tbar-nrml-items-size: 38px !default;
+$tbar-nrml-items-size: 40px !default;
 $tbar-bgr-items-size: 48px !default;
 $tbar-nrml-item-size: 38px !default;
 $tbar-item-height: auto !default;
@@ -72,10 +72,11 @@ $tbar-item-nrml-minwidth: 28px !default;
 $tbar-bgr-item-size: 49px !default;
 $tbar-btn-font-size: $text-lg !default;
 $tbar-btn-txt-font-size: $text-sm !default;
-$tbar-popup-btn-bg-color: transparent !default;
+$tbar-popup-btn-bg-color: $transparent !default;
+$tbar-item-pop-bg-color: $transparent !default;
 
-$tbar-item-bgr-padding: 5px 6px !default;
-$tbar-item-nrml-padding: 4px !default;
+$tbar-item-bgr-padding: 0 6px !default;
+$tbar-item-nrml-padding: 0 4px !default;
 $tbar-btn-nrml-padding: 0 4px !default;
 $tbar-btn-bgr-padding: 0 8px !default;
 $tbar-btn-bgr-focus-padding: 0 6px !default;
@@ -93,8 +94,8 @@ $tbar-pop-btn-bgr-padding: 8px 18px !default;
 $tbar-pop-btn-nrml-padding: 6px 12px !default;
 $tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
 $tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
-$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
-$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
+$tbar-pop-btn-txt-nrml-pad: 4px !default;
+$tbar-pop-btn-txt-bgr-pad: 4px !default;
 
 $tbar-nav-press-border: 0 !default;
 $tbar-nav-hover-border: 0 !default;
@@ -107,10 +108,10 @@ $tbar-btn-nrml-mrgn: 0 !default;
 $tbar-v-btn-bgr-mrgn: 0 !default;
 $tbar-v-btn-nrml-mrgn: 0 !default;
 $tbar-popup-padding: 0 !default;
-$tbar-btn-nrml-minheight: 30px !default;
-$tbar-btn-bgr-minheight: 38px !default;
-$tbar-btn-nrml-minwidth: 30px !default;
-$tbar-btn-bgr-minwidth: 38px !default;
+$tbar-btn-nrml-minheight: 40px !default;
+$tbar-btn-bgr-minheight: 48px !default;
+$tbar-btn-nrml-minwidth: 40px !default;
+$tbar-btn-bgr-minwidth: 48px !default;
 $tbar-btn-bgr-height: calc(100% - 11px) !default;
 $tbar-btn-nrml-height: calc(100% - 10px) !default;
 $tbar-separator-nrml-height: 24px !default;

package/styles/toolbar/_highcontrast-definition.scss

@@ -5,6 +5,7 @@ $tbar-separator-vertical-bgr-mrgn: 5px 10px;
 $tbar-radius: 0;
 $tbar-separator-nrml-mrgn: 7.5px 3px;
 $tbar-pop-radius: 0;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-separator-vertical-nrml-mrgn: 3px 7.5px;
 $tbar-border-size: $border-size;
 $tbar-separator-border-type: $border-type;

package/styles/toolbar/_highcontrast-light-definition.scss

@@ -55,6 +55,7 @@ $tbar-pressed-font: $tbar-hover-font !default;
 $tbar-default-bg: $bg-base-0 !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
 $tbar-pop-bg: $tbar-default-bg !default;
+$tbar-item-pop-bg-color: transparent !default;
 $tbar-default-font: $content-font !default;
 $tbar-active-bg: transparent !default;
 $tbar-active-icon-color: $selection-font !default;

package/styles/toolbar/_layout.scss

@@ -258,7 +258,9 @@
 
         &:not(.e-separator) {
           min-width: $tbar-bgr-item-size;
-          padding: $tbar-item-bgr-padding;
+          @if ($tbar-skin != 'FluentUI') {
+            padding: $tbar-item-bgr-padding;
+          }
         }
 
         &.e-separator {
@@ -362,7 +364,9 @@
           }
 
           min-width: $tbar-bgr-item-size;
-          padding: $tbar-item-bgr-padding;
+          @if ($tbar-skin != 'FluentUI') {
+            padding: $tbar-item-bgr-padding;
+          }
         }
 
         .e-toolbar-item.e-separator.e-extended-separator {
@@ -593,7 +597,9 @@
 
           height: 100%;
           min-width: $tbar-item-nrml-minwidth;
-          padding: $tbar-item-nrml-padding;
+          @if ($tbar-skin != 'FluentUI') {
+            padding: $tbar-item-nrml-padding;
+          }
         }
 
         .e-toolbar-item.e-separator.e-extended-separator {
@@ -1230,7 +1236,9 @@
         &:not(.e-separator) {
           height: inherit;
           min-width: $tbar-item-nrml-minwidth;
-          padding: $tbar-item-nrml-padding;
+          @if ($tbar-skin != 'FluentUI') {
+            padding: $tbar-item-nrml-padding;
+          }
         }
 
         &.e-separator {
@@ -1291,7 +1299,7 @@
             }
           }
 
-          @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' {
+          @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' or $tbar-skin == 'FluentUI' {
             &:focus {
               outline: none;
             }

package/styles/toolbar/_material-dark-definition.scss

@@ -109,6 +109,7 @@ $tbar-item-height: auto !default;
 $tbar-btn-nrml-padding: $tbar-zero-value 1.5px  !default;
 $tbar-pop-btn-bgr-padding: $tbar-zero-value 16px !default;
 $tbar-pop-btn-nrml-padding: $tbar-zero-value 16px !default;
+$tbar-item-pop-bg-color: transparent !default;
 
 $tbar-nav-press-border: 0 !default;
 $tbar-nav-hover-border: 0 !default;

package/styles/toolbar/_material-definition.scss

@@ -107,6 +107,7 @@ $tbar-popup-border-width: 0 0 0 $border-size !default;
 $tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
 $tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
 $tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
+$tbar-item-pop-bg-color: transparent !default;
 
 $tbar-btn-weight: 400 !default;
 $tbar-btn-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif' !default;;

package/styles/toolbar/_tailwind-definition.scss

@@ -2,10 +2,10 @@ $tbar-skin: 'tailwind' !default;
 $border-size: 0;
 $border-type: solid;
 $tbar-icons-bgr-font-size: $text-xl;
-$tbar-separator-bgr-mrgn: 8px 4px;
+$tbar-separator-bgr-mrgn: 8px 6px;
 $tbar-separator-vertical-bgr-mrgn: 5px 10px;
 $tbar-radius: 0;
-$tbar-separator-nrml-mrgn: 7px 3px;
+$tbar-separator-nrml-mrgn: 7px 4px;
 $tbar-pop-radius: 4px;
 $tbar-separator-vertical-nrml-mrgn: 3px 7px;
 $tbar-border-size: $border-size;
@@ -72,7 +72,8 @@ $tbar-item-nrml-minwidth: 28px !default;
 $tbar-bgr-item-size: 49px !default;
 $tbar-btn-font-size: $text-lg !default;
 $tbar-btn-txt-font-size: $text-sm !default;
-$tbar-popup-btn-bg-color: transparent !default;
+$tbar-popup-btn-bg-color: $transparent !default;
+$tbar-item-pop-bg-color: $transparent !default;
 
 $tbar-item-bgr-padding: 5px 6px !default;
 $tbar-item-nrml-padding: 4px !default;

package/styles/toolbar/_theme.scss

@@ -211,11 +211,15 @@
           }
         }
 
-        @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' {
+        @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' or $tbar-skin == 'FluentUI' {
           .e-btn:focus {
             outline: none;
           }
         }
+
+        &:not(.e-separator) {
+          background: $tbar-item-pop-bg-color;
+        }
       }
     }
 

package/styles/toolbar/bootstrap-dark.css

@@ -1274,6 +1274,10 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
+  background: transparent;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
   background: #131313;
 }

package/styles/toolbar/bootstrap.css

@@ -1277,6 +1277,10 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
+  background: transparent;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
   background: #f8f8f8;
 }

package/styles/toolbar/bootstrap4.css

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

package/styles/toolbar/bootstrap5-dark.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: #282d31;
 }
 
 .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: #343a40;
+  background: #5c636a;
   border: 0;
   box-shadow: none;
-  border-left: 0 #444c54 #343a40;
+  border-left: 0 #444c54 #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: #ced4da;
+  color: #fff;
 }
 
 .e-toolbar .e-tbar-btn {