@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/styles/toolbar/_tailwind-definition.scss

@@ -1,143 +1,143 @@
-$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-vertical-bgr-mrgn: 5px 10px;
-$tbar-radius: 0;
-$tbar-separator-nrml-mrgn: 7px 3px;
-$tbar-pop-radius: 4px;
-$tbar-separator-vertical-nrml-mrgn: 3px 7px;
-$tbar-border-size: $border-size;
-$tbar-separator-border-type: $border-type;
-$tbar-pop-box-shadow: $shadow-lg;
-$tbar-hover-border-color: $icon-color;
-$tbar-pressed-border: $tbar-hover-border-color;
-$tbar-btn-bgr-line-height: 24px !default;
-$tbar-zero-value: 0 !default;
-$tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-weight: $font-weight-normal !default;
-$tbar-border-radius: 4px !default;
-$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
-$tbar-border-nav-type: solid !default;
-$tbar-btn-box-shadow: none !default;
-
-$tbar-default-bg: $content-bg-color-alt2 !default;
-$tbar-default-font: $content-text-color !default;
-$tbar-active-bg: $content-bg-color-alt3 !default;
-$tbar-active-icon-color: $icon-color !default;
-$tbar-btn-family: 'Inter' !default;
-$tbar-press-bg: $content-bg-color-alt2 !default;
-$tbar-press-border-color: $border-light !default;
-$tbar-hover-bg:  $content-bg-color-alt3 !default;
-$tbar-hover-font: $content-text-color-alt2 !default;
-$tbar-default-icon-color: $icon-color !default;
-$tbar-pressed-bg: $content-bg-color-alt2 !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-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-press-font: $content-text-color-alt2 !default;
-
-$tbar-active-font-color: $tbar-press-font !default;
-$tbar-border-nav-type: $border-light !default;
-$tbar-border-nav-active-type: $border-light !default;
-$tbar-btn-border: none !default;
-
-$tbar-box-shadow: none !default;
-$tbar-border-type: $border-type !default;
-$tbar-separator-size: 1px !default;
-$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
-$tba-vertical-separator: 0 0 $tbar-separator-size 0 !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;
-$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-bgr-items-size: 48px !default;
-$tbar-nrml-item-size: 38px !default;
-$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-item-bgr-padding: 5px 6px !default;
-$tbar-item-nrml-padding: 4px !default;
-$tbar-btn-nrml-padding: 0 4px !default;
-$tbar-btn-bgr-padding: 0 8px !default;
-$tbar-btn-icn-nrml-padding: 4px !default;
-$tbar-btn-icn-bgr-padding: 4px 6px !default;
-$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
-$tbar-btn-icn-right-nrml-padding: 4px !default;
-$btn-txt-nrml-padding: 4px !default;
-$btn-txt-bgr-padding: 4px !default;
-
-$tbar-pop-bg: $flyout-bg-color;
-$tbar-item-pop-nrml-padding: 0 !default;
-$tbar-item-pop-bgr-padding: 0 !default;
-$tbar-pop-btn-bgr-padding: 8px 18px !default;
-$tbar-pop-btn-nrml-padding: 6px 12px !default;
-$tbar-pop-icon-bgr-padding: 3px 6px 0 0 !default;
-$tbar-pop-icon-nrml-padding: 3px 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-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
-$tbar-nav-focus-border: 0 !default;
-$tbar-nav-pressed-box-shadow: none !default;
-$tbar-btn-border-radius: 0 !default;
-$tbar-btn-pressed-box-shadow: none !default;
-$tbar-btn-bgr-mrgn: 0 !default;
-$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-bgr-height: calc(100% - 11px) !default;
-$tbar-btn-nrml-height: calc(100% - 10px) !default;
-$tbar-separator-nrml-height: 24px !default;
-$tbar-separator-bgr-height: 30px !default;
-$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
-$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
-$tbar-btn-icon-nrml-width: 12px !default;
-$tbar-btn-icon-nrml-height: 16px !default;
-$tbar-btn-icon-nrml-line-height: 16px !default;
-$tbar-left-item-line-height: 35px !default;
-$tbar-right-item-line-height: 24px !default;
-$tbar-btn-icon-bgr-width: 13px !default;
-$tbar-btn-icon-bgr-height: 18px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
-$tbar-btn-txt-line-height: inherit !default;
-$tbar-nav-nrml-width: 28px !default;
-$tbar-nav-bgr-width: 36px !default;
-$tbar-item-nrml-mrgn: 8px !default;
-$tbar-item-bgr-mrgn: 10px !default;
-$tbar-btn-pop-nrml-minheight: 38px !default;
-$tbar-btn-pop-bgr-minheight: 48px !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;
-$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
-$tbar-multirow-item-mrgn: 0 !default;
-$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
-$tbar-item-nrml-padding-small: 1px 0 !default;
-
-@mixin tbar-btn-animation {
-  content: '';
-}
-
-@mixin tbar-btn-animation-after {
-  content: '';
-}
+$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-vertical-bgr-mrgn: 5px 10px;
+$tbar-radius: 0;
+$tbar-separator-nrml-mrgn: 7px 3px;
+$tbar-pop-radius: 4px;
+$tbar-separator-vertical-nrml-mrgn: 3px 7px;
+$tbar-border-size: $border-size;
+$tbar-separator-border-type: $border-type;
+$tbar-pop-box-shadow: $shadow-lg;
+$tbar-hover-border-color: $icon-color;
+$tbar-pressed-border: $tbar-hover-border-color;
+$tbar-btn-bgr-line-height: 24px !default;
+$tbar-zero-value: 0 !default;
+$tbar-btn-nrml-line-height: 22px !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-border-radius: 4px !default;
+$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$tbar-border-nav-type: solid !default;
+$tbar-btn-box-shadow: none !default;
+
+$tbar-default-bg: $content-bg-color-alt2 !default;
+$tbar-default-font: $content-text-color !default;
+$tbar-active-bg: $content-bg-color-alt3 !default;
+$tbar-active-icon-color: $icon-color !default;
+$tbar-btn-family: $font-family !default;
+$tbar-press-bg: $content-bg-color-alt2 !default;
+$tbar-press-border-color: $border-light !default;
+$tbar-hover-bg:  $content-bg-color-alt3 !default;
+$tbar-hover-font: $content-text-color-alt2 !default;
+$tbar-default-icon-color: $icon-color !default;
+$tbar-pressed-bg: $content-bg-color-alt2 !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-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-press-font: $content-text-color-alt2 !default;
+
+$tbar-active-font-color: $tbar-press-font !default;
+$tbar-border-nav-type: $border-light !default;
+$tbar-border-nav-active-type: $border-light !default;
+$tbar-btn-border: none !default;
+
+$tbar-box-shadow: none !default;
+$tbar-border-type: $border-type !default;
+$tbar-separator-size: 1px !default;
+$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
+$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
+$tbar-popup-border-width: 0 0 0 1px !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-nrml-size: 38px !default;
+$tbar-bgr-size: 48px !default;
+$tbar-nrml-items-size: 38px !default;
+$tbar-bgr-items-size: 48px !default;
+$tbar-nrml-item-size: 38px !default;
+$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-item-bgr-padding: 5px 6px !default;
+$tbar-item-nrml-padding: 4px !default;
+$tbar-btn-nrml-padding: 0 4px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$btn-txt-nrml-padding: 4px !default;
+$btn-txt-bgr-padding: 4px !default;
+
+$tbar-pop-bg: $flyout-bg-color;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$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-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 0 !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-border-radius: 0 !default;
+$tbar-btn-pressed-box-shadow: none !default;
+$tbar-btn-bgr-mrgn: 0 !default;
+$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-bgr-height: calc(100% - 11px) !default;
+$tbar-btn-nrml-height: calc(100% - 10px) !default;
+$tbar-separator-nrml-height: 24px !default;
+$tbar-separator-bgr-height: 30px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
+$tbar-btn-icon-nrml-width: 12px !default;
+$tbar-btn-icon-nrml-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-left-item-line-height: 35px !default;
+$tbar-right-item-line-height: 24px !default;
+$tbar-btn-icon-bgr-width: 13px !default;
+$tbar-btn-icon-bgr-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-txt-line-height: inherit !default;
+$tbar-nav-nrml-width: 28px !default;
+$tbar-nav-bgr-width: 36px !default;
+$tbar-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 10px !default;
+$tbar-btn-pop-nrml-minheight: 38px !default;
+$tbar-btn-pop-bgr-minheight: 48px !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;
+$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
+$tbar-multirow-item-mrgn: 0 !default;
+$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
+$tbar-item-nrml-padding-small: 1px 0 !default;
+
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}

package/styles/toolbar/_theme.scss

@@ -50,6 +50,10 @@
           background: $tbar-default-bg;
           box-shadow: $tbar-btn-box-shadow;
           color: $tbar-default-font;
+
+          .e-toolbar-item .e-tbar-btn-text {
+            color: $tbar-default-font;
+          }
           @if $tbar-skin == 'bootstrap' {
             margin: 1px 0;
           }
@@ -69,6 +73,13 @@
               margin: 0;
             }
 
+            @if $tbar-skin == 'bootstrap5' {
+              .e-toolbar-item .e-tbar-btn-text,
+              .e-icons {
+                color: $tbar-active-icon-color;
+              }
+            }
+
             @if $tbar-skin == 'highcontrast' {
               border: $tbar-dash-border;
 
@@ -111,6 +122,13 @@
                 }
               }
             }
+
+            @if $tbar-skin == 'bootstrap5' {
+              .e-toolbar-item .e-tbar-btn-text,
+              .e-icons {
+                color: $tbar-active-icon-color;
+              }
+            }
           }
 
           &:active {
@@ -131,18 +149,23 @@
                 color: $tbar-pressed-font;
               }
             }
+            @if $tbar-skin == 'bootstrap5' {
+              .e-icons {
+                color: $tbar-active-icon-color;
+              }
+            }
           }
 
         }
 
-        .e-toolbar-item .e-tbar-btn-text {
-          color: $tbar-default-font;
-        }
       }
     }
 
-    .e-icons {
+    .e-tbar-btn.e-btn .e-icons {
       color: $tbar-default-icon-color;
+      @if $tbar-skin == 'bootstrap5' {
+        padding-bottom: 4px;
+      }
     }
 
     .e-toolbar-pop {
@@ -150,7 +173,7 @@
       border: $tbar-border-size $tbar-border-type $tbar-default-border;
       box-shadow: $tbar-pop-box-shadow;
 
-      @if $tbar-skin == 'tailwind' or $tbar-skin == 'tailwind-dark' {
+      @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
         background: $tbar-pop-bg;
       }
 
@@ -175,20 +198,20 @@
           }
         }
 
-        @if $tbar-skin == 'tailwind' or $tbar-skin == 'tailwind-dark' {
+        @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
           .e-tbar-btn {
             background: $tbar-popup-btn-bg-color;
 
+            &:focus {
+              background: $tbar-focus-bg;
+            }
+
             &:hover {
               background: $tbar-hover-bg;
             }
           }
         }
 
-        .e-tbar-btn-text {
-          color: $tbar-default-font;
-        }
-
         @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' {
           .e-btn:focus {
             outline: none;
@@ -197,15 +220,24 @@
       }
     }
 
+    &.e-extended-toolbar .e-toolbar-pop {
+      @if $tbar-skin == 'bootstrap5' {
+        background: $tbar-default-bg;
+      }
+    }
+
     &.e-toolpop {
 
       .e-hor-nav.e-nav-active,
       .e-hor-nav.e-nav-active:not(.e-expended-nav) {
         background: $tbar-pressed-bg;
         border: $tbar-nav-press-border;
-        border-left: $border-size $tbar-border-nav-active-type $tbar-pressed-bg;
         box-shadow: $tbar-nav-pressed-box-shadow;
 
+        @if $tbar-skin != 'bootstrap4' {
+          border-left: $border-size $tbar-border-nav-active-type $tbar-pressed-bg;
+        }
+
         @if $tbar-skin == 'highcontrast' {
           &:focus {
             border: $tbar-dash-border;
@@ -227,6 +259,7 @@
       background: $tbar-default-bg;
       box-shadow: $tbar-btn-box-shadow;
       color: $tbar-default-font;
+
       @if $tbar-skin == 'bootstrap' {
         margin: 1px 0;
       }
@@ -254,6 +287,13 @@
             background: $tbar-btn-focus-active-bg-color;
           }
         }
+        @if $tbar-skin == 'bootstrap5' {
+          .e-icons,
+          .e-tbar-btn-text {
+            color: $tbar-active-icon-color;
+            padding-bottom: 4px;
+          }
+        }
       }
 
       &:hover {
@@ -293,6 +333,13 @@
             }
           }
         }
+        @if $tbar-skin == 'bootstrap5' {
+          .e-icons,
+          .e-tbar-btn-text {
+            color: $tbar-active-icon-color;
+            padding-bottom: 4px;
+          }
+        }
       }
     }
 
@@ -321,9 +368,11 @@
           }
         }
 
-        @if $tbar-skin != 'highcontrast' and $tbar-skin != 'bootstrap4' {
-          .e-tbar-btn-text {
-            color: $tbar-default-font;
+        @if $tbar-skin != 'bootstrap5' {
+          @if $tbar-skin != 'highcontrast' and $tbar-skin != 'bootstrap4' {
+            .e-tbar-btn-text {
+              color: $tbar-default-font;
+            }
           }
         }
 
@@ -370,6 +419,16 @@
         @include tbar-btn-animation;
       }
 
+      @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
+        &.e-nav-active {
+          &:active,
+          &:focus,
+          &:hover {
+            border-bottom-right-radius: 0;
+          }
+        }
+      }
+
       &:active {
         border: $tbar-nav-press-border;
         box-shadow: $tbar-nav-pressed-box-shadow;
@@ -391,7 +450,6 @@
       &:hover {
         background: $tbar-hover-bg;
         border-left: $tbar-nav-hover-border;
-        color: $tbar-hover-font;
 
         @if $tbar-skin == 'bootstrap4' {
           background: $tbar-popup-hover-bg;
@@ -401,6 +459,17 @@
           }
         }
 
+        @if $tbar-skin == 'bootstrap5' {
+          color: $tbar-active-icon-color;
+
+          .e-icons {
+            color: inherit;
+          }
+        }
+        @else {
+          color: $tbar-hover-font;
+        }
+
         @if $tbar-skin == 'highcontrast' {
           &:not(.e-nav-active) {
             border: 2px $tbar-border-type $tbar-nav-hover-color;
@@ -416,7 +485,6 @@
       &:focus {
         background: $tbar-hover-bg;
         border-left: $tbar-nav-focus-border;
-        color: $tbar-pressed-font;
 
         @if $tbar-skin != 'bootstrap' {
           border-color: $tbar-pressed-border;
@@ -428,6 +496,17 @@
           }
         }
 
+        @if $tbar-skin == 'bootstrap5' {
+          color: $tbar-active-icon-color;
+
+          .e-icons {
+            color: inherit;
+          }
+        }
+        @else {
+          color: $tbar-pressed-font;
+        }
+
         @if $tbar-skin == 'highcontrast' {
           background: inherit;
           border: $tbar-dash-border;
@@ -439,6 +518,9 @@
 
       &:active {
         background:  $tbar-press-bg;
+        @if $tbar-skin == 'bootstrap5' {
+          background: $tbar-active-bg;
+        }
         @if $tbar-skin == 'bootstrap' {
           border-left: 1px solid $tbar-press-border-color;
         }

package/styles/toolbar/bootstrap-dark.css

@@ -690,6 +690,8 @@
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: start;
@@ -876,6 +878,7 @@
 
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
+  color: #f0f0f0;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
@@ -1261,6 +1264,10 @@
   margin: 1px 0;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-toolbar-item .e-tbar-btn-text {
+  color: #f0f0f0;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: #2a2a2a;
   border-color: #585858;
@@ -1287,11 +1294,7 @@
   border-left: 1px solid #6e6e6e;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn-text {
-  color: #f0f0f0;
-}
-
-.e-toolbar .e-icons {
+.e-toolbar .e-tbar-btn.e-btn .e-icons {
   color: #f0f0f0;
 }
 
@@ -1301,16 +1304,12 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn-text {
-  color: #f0f0f0;
-}
-
 .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: #2a2a2a;
   border: 0;
-  border-left: 1px none #2a2a2a;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.35);
+  border-left: 1px none #2a2a2a;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons,
@@ -1389,6 +1388,10 @@
   content: '';
 }
 
+.e-toolbar .e-hor-nav.e-nav-active:active, .e-toolbar .e-hor-nav.e-nav-active:focus, .e-toolbar .e-hor-nav.e-nav-active:hover {
+  border-bottom-right-radius: 0;
+}
+
 .e-toolbar .e-hor-nav:active {
   border: 0;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.35);

package/styles/toolbar/bootstrap.css

@@ -693,6 +693,8 @@
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: start;
@@ -879,6 +881,7 @@
 
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
+  color: #333;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
@@ -1264,6 +1267,10 @@
   margin: 1px 0;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-toolbar-item .e-tbar-btn-text {
+  color: #333;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: #e6e6e6;
   border-color: #8c8c8c;
@@ -1290,11 +1297,7 @@
   border-left: 1px solid #adadad;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn-text {
-  color: #333;
-}
-
-.e-toolbar .e-icons {
+.e-toolbar .e-tbar-btn.e-btn .e-icons {
   color: #333;
 }
 
@@ -1304,16 +1307,12 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn-text {
-  color: #333;
-}
-
 .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: #d4d4d4;
   border: 0;
-  border-left: 1px none #d4d4d4;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  border-left: 1px none #d4d4d4;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons,
@@ -1392,6 +1391,10 @@
   content: '';
 }
 
+.e-toolbar .e-hor-nav.e-nav-active:active, .e-toolbar .e-hor-nav.e-nav-active:focus, .e-toolbar .e-hor-nav.e-nav-active:hover {
+  border-bottom-right-radius: 0;
+}
+
 .e-toolbar .e-hor-nav:active {
   border: 0;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);