@syncfusion/ej2-navigations 21.2.8 → 22.1.34

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

@@ -35,7 +35,7 @@ $tbar-press-font: $active-font-color !default;
 $tbar-default-font-overlay: rgba($default-icon-color, .4) !default;
 $tbar-active-font-color: $theme-primary-font !default;
 $tbar-default-icon-overlay: rgba($default-icon-color, .4) !default;
-$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
+$tbar-popup-rtl-border-width: 0 1px 0 0 !default;
 $tbar-popup-border-width: 0 0 0 $border-size !default;
 $tbar-select-font: $tbar-hover-font !default;
 $tbar-pressed-font: $tbar-hover-font !default;
@@ -108,7 +108,7 @@ $tbar-pop-btn-txt-nrml-pad: 0 10px !default;
 $tbar-pop-btn-txt-bgr-pad: 0 12.5px !default;
 
 $tbar-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $tbar-default-border !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-btn-border-radius: 0 !default;
@@ -188,7 +188,7 @@ $tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-color: $tbar-hover-font !default;
 $tbar-popup-nav-hover-icons-color: $tbar-hover-font !default;
 $tbar-popup-nav-hover-border-color: $tbar-default-border !default;
-$tbar-popup-nav-hover-border-size: 0 !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
 $tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
 $tbar-popup-nav-hover-active-border-size: 0 !default;

package/styles/toolbar/_fabric-definition.scss

@@ -53,7 +53,7 @@ $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-rtl-border-width: 0 1px 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: 40px !default;
@@ -95,7 +95,7 @@ $tbar-pop-btn-txt-nrml-pad: 0 10px !default;
 $tbar-pop-btn-txt-bgr-pad: 0 12.5px !default;
 
 $tbar-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $tbar-default-border !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-btn-border-radius: 0 !default;
@@ -176,7 +176,7 @@ $tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-color: $tbar-hover-font !default;
 $tbar-popup-nav-hover-icons-color: $tbar-press-font !default;
 $tbar-popup-nav-hover-border-color: $tbar-default-border !default;
-$tbar-popup-nav-hover-border-size: 0 !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
 $tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
 $tbar-popup-nav-hover-active-border-size: 0 !default;

package/styles/toolbar/_highcontrast-definition.scss

@@ -96,7 +96,7 @@ $tbar-pop-btn-txt-nrml-pad: 0 10px !default;
 $tbar-pop-btn-txt-bgr-pad: 0 12.5px !default;
 
 $tbar-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $hover-border !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-btn-border-radius: 0 !default;

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

@@ -119,7 +119,7 @@ $tbar-pop-btn-txt-nrml-pad: 0 10px !default;
 $tbar-pop-btn-txt-bgr-pad: 0 12.5px !default;
 
 $tbar-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $hover-border !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-btn-border-radius: 0 !default;

package/styles/toolbar/_layout.scss

@@ -17,6 +17,14 @@
         }
       }
 
+      &:first-child:not(.e-toolbar-multirow) {
+
+        > .e-toolbar-item:last-child,
+        > .e-toolbar-right .e-toolbar-item:last-child {
+          margin-right: $tbar-item-bgr-mrgn;
+        }
+      }
+
       .e-hscroll-bar .e-hscroll-content {
 
         > .e-toolbar-item:last-child {

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

@@ -50,7 +50,7 @@ $tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
 $tbar-btn-box-shadow: none !default;
 $tbar-press-font: $active-font-color !default;
 $tbar-default-icon-overlay: rgba($grey-dark-font, .3) !default;
-$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
+$tbar-popup-rtl-border-width: 0 1px 0 0 !default;
 $tbar-popup-border-width: 0 0 0 $border-size !default;
 $tbar-default-bg: $grey-900 !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
@@ -110,7 +110,7 @@ $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;
+$tbar-nav-hover-border: 1px solid $grey-700 !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-border-nav-active-type: none !default;
@@ -187,7 +187,7 @@ $tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-color: $tbar-hover-font !default;
 $tbar-popup-nav-hover-icons-color: $tbar-default-icon-color !default;
 $tbar-popup-nav-hover-border-color: $tbar-default-border !default;
-$tbar-popup-nav-hover-border-size: 0 !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
 $tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
 $tbar-popup-nav-hover-active-border-size: 0 !default;

package/styles/toolbar/_material-definition.scss

@@ -93,7 +93,7 @@ $tbar-pop-btn-nrml-padding: $tbar-zero-value 16px !default;
 
 $tbar-btn-border: none !default;
 $tbar-nav-press-border: 0 !default;
-$tbar-nav-hover-border: 0 !default;
+$tbar-nav-hover-border: 1px solid rgba($grey-black, .12) !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-border-nav-active-type: none !default;
@@ -104,7 +104,7 @@ $tbar-separator-size: .5px !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-rtl-border-width: 0 1px 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;
@@ -177,7 +177,7 @@ $tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-color: $tbar-hover-font !default;
 $tbar-popup-nav-hover-icons-color: $tbar-default-icon-color !default;
 $tbar-popup-nav-hover-border-color: $tbar-default-border !default;
-$tbar-popup-nav-hover-border-size: 0 !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
 $tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
 $tbar-popup-nav-hover-active-border-size: 0 !default;

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

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

package/styles/toolbar/_material3-definition.scss

@@ -0,0 +1,220 @@
+/*! Toolbar's material3 theme wise override definitions and variables */
+/* stylelint-disable */
+$tbar-skin: 'material3' !default;
+
+//font definitions
+$tbar-icons-bgr-font-size: $text-2xl;
+$tbar-btn-font-size: $text-lg !default;
+$tbar-btn-txt-font-size: $text-sm !default;
+
+// box shadow definitions
+$tbar-pop-box-shadow: $shadow-md;
+$tbar-btn-box-shadow: none !default;
+$tbar-box-shadow: none !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-pressed-box-shadow: none !default;
+
+// padding definitions
+$tbar-item-bgr-padding: 8px 4px 8px 4px !default;
+$tbar-item-nrml-padding: 8px 4px 8px 4px !default;
+$tbar-btn-nrml-padding: 0 7px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-bgr-focus-padding: 0 8px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px !default;
+$tbar-rtl-btn-icn-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-bgr-padding: 4px !default;
+$tbar-btn-icn-right-bgr-padding: 4px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-right-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-right-bgr-padding: 4px !default;
+$btn-txt-nrml-padding: 4px !default;
+$btn-txt-bgr-padding: 4px !default;
+$btn-rtl-txt-nrml-padding: 4px !default;
+$btn-rtl-txt-bgr-padding: 4px !default;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$tbar-pop-btn-bgr-padding: 8px 16px !default;
+$tbar-pop-btn-nrml-padding: 5px 12px !default;
+$tbar-pop-icon-bgr-padding: 0 8px 0 0 !default;
+$tbar-pop-icon-nrml-padding: 0 8px 0 0 !default;
+$tbar-pop-btn-txt-nrml-pad: 0 0 0 8px !default;
+$tbar-pop-btn-txt-bgr-pad: 0 0 0 8px !default;
+$tbar-popup-padding: 0 !default;
+
+// dimension definitions
+$tbar-btn-nrml-minheight: 32px !default;
+$tbar-btn-nrml-line-height: 22px !default;
+$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-bgr-minheight: 40px !default;
+$tbar-btn-bgr-line-height: 24px !default;
+$tbar-btn-icon-bgr-line-height: 24px !default;
+$tbar-btn-nrml-minwidth: 32px !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-btn-bgr-minwidth: 40px !default;
+$tbar-nrml-size: 48px !default;
+$tbar-bgr-size: 56px !default;
+$tbar-nrml-items-size: 48px !default;
+$tbar-bgr-items-size: 56px !default;
+$tbar-nrml-item-size: 32px !default;
+$tbar-item-height: 32px !default;
+$tbar-item-nrml-minwidth: 32px !default;
+$tbar-bgr-item-size: 40px !default;
+$tbar-btn-icon-nrml-width: 18px !default;
+$tbar-btn-icon-nrml-height: 18px !default;
+$tbar-right-item-line-height: 24px !default;
+$tbar-btn-icon-bgr-width: 24px !default;
+$tbar-nav-nrml-width: 40px !default;
+$tbar-nav-bgr-width: 46px !default;
+$tbar-btn-pop-nrml-minheight: 32px !default;
+$tbar-btn-pop-bgr-minheight: 40px !default;
+$tbar-radius: 0;
+$tbar-pop-radius: 4px;
+$tbar-zero-value: 0 !default;
+$tbar-separator-nrml-height: 20px !default;
+$tbar-separator-bgr-height: 24px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !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;
+
+// margin definitions
+$tbar-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 12px !default;
+$tbar-multirow-items-mrgn-bigger: 12px !default;
+$tbar-multirow-items-mrgn-small: 8px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 0 !default;
+$tbar-btn-nrml-mrgn: 0 !default;
+$tbar-separator-vertical-nrml-mrgn: 8px 4px 8px 4px !default;
+$tbar-separator-bgr-mrgn: 8px 4px 8px 4px !default;
+$tbar-separator-vertical-bgr-mrgn: 8px 4px 8px 4px !default;
+$tbar-separator-nrml-mrgn: 8px 4px 8px 4px !default;
+
+// border definitions
+$border-size: 1px;
+$border-type: solid;
+$tbar-border-radius: 1px !default;
+$tbar-border-nav-type: solid !default;
+$tbar-border-size: 0;
+$tbar-separator-border-type: $border-type;
+$tbar-hover-border-color: rgba($border-light);
+$tbar-pressed-border: rgba($border-light);
+$tbar-separator-border: rgba($border-light) !default;
+$tbar-default-border: rgba($border-light) !default;
+$tbar-hover-border-color: rgba($border-light) !default;
+$tbar-focus-border-color: rgba($border-light) !default;
+$tbar-press-border-color: rgba($border-light) !default;
+$tbar-border-nav-type: rgba($border-light) !default;
+$tbar-border-nav-active-type: rgba($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;
+$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
+$tbar-border-type: $border-type !default;
+$tbar-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $tbar-default-border !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-btn-border-radius: 4px !default;
+
+// color definitions
+$tbar-default-bg: $content-bg-color-alt2 !default;
+$tbar-items-default-bg: $transparent !default;
+$tbar-default-font: rgba($icon-color) !default;
+$tbar-active-bg: rgba($content-bg-color-selected) !default;
+$tbar-active-icon-color: rgba($primary-darker) !default;
+$tbar-tab-highlight-color: $content-bg-color-focus !default;
+$tbar-press-bg: $content-bg-color-pressed !default;
+$tbar-btn-press-bg: $content-bg-color-pressed !default;
+$tbar-hover-bg: $content-bg-color-hover !default;
+$tbar-hover-font: rgba($icon-color) !default;
+$tbar-default-icon-color: rgba($icon-color) !default;
+$tbar-pressed-bg: $content-bg-color-pressed !default;
+$tbar-pressed-font: rgba($icon-color) !default;
+$tbar-select-font: rgba($primary-darker) !default;
+$tbar-default-icon-overlay: rgba($icon-color) !default;
+$tbar-focus-bg: $content-bg-color-focus !default;
+$tbar-press-font: rgba($primary-darker) !default;
+$tbar-default-font-overlay: rgba($icon-color) !default;
+$tbar-active-font-color: rgba($primary-darker) !default;
+$tbar-pop-bg: $flyout-bg-color !default;
+
+$tbar-bgr-btn-text-font-size: $text-sm !default;
+$tbar-bgr-btn-icon-font-size: $text-xl !default;
+$tbar-bgr-btn-focus-padding: 0 8px !default;
+
+$tbar-nrml-btn-border-radius: 4px !default;
+$tbar-nrml-btn-focus-padding: 0 7px !default;
+$tbar-nrml-btn-focus-outline: 0 !default;
+
+$tbar-btn-icons-focus-color: rgba($icon-color) !default;
+$tbar-btn-text-focus-color: rgba($icon-color) !default;
+$tbar-btn-focus-border-color: rgba($icon-color) !default;
+$tbar-btn-hover-border-size: $tbar-border-size !default;
+$tbar-btn-hover-active-icons-color: rgba($primary-darker) !default;
+$tbar-btn-hover-active-text-color: rgba($primary-darker) !default;
+$tbar-btn-overlay-opacity: .38 !default;
+$tbar-btn-active-bg: $tbar-active-bg !default;
+$tbar-btn-active-icons-color: rgba($primary-darker) !default;
+$tbar-btn-active-text-color: rgba($primary-darker) !default;
+$tbar-btn-text-color: rgba($icon-color) !default;
+$tbar-btn-pressed-text-color: rgba($primary-darker) !default;
+$tbar-btn-pressed-focus-box-shadow: $secondary-shadow-focus !default;
+$tbar-btn-pressed-bg: $secondary-bg-color-pressed !default;
+$tbar-flat-btn-active-box-shadow: none !default;
+
+$tbar-ext-btn-focus-padding: 0 7px !default;
+$tbar-ext-btn-icon-padding: 0 !default;
+$tbar-ext-btn-icon-font-size: $text-lg !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;
+
+$tbar-popup-icon-font-size: $text-sm !default;
+$tbar-popup-text-btn-icon-padding: 4px 4px 5px 4px !default;
+$tbar-popup-bgr-text-btn-icon-padding: 4px 6px 3px 6px !default;
+$tbar-popup-btn-border: none !default;
+$tbar-popup-btn-border-radius: 4px !default;
+$tbar-popup-bgr-height: 40px !default;
+$tbar-popup-bgr-btn-icon-font-size: $text-base !default;
+$tbar-popup-bgr-btn-text-font-size: $text-base !default;
+$tbar-popup-nav-active-border-bottom-right-radius: 0 !default;
+$tbar-popup-nav-active-bg: $tbar-default-bg !default;
+$tbar-popup-nav-active-icons-color: $tbar-default-icon-color !default;
+$tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-hover-color: $tbar-active-icon-color !default;
+$tbar-popup-nav-hover-icons-color: rgba($icon-color) !default;
+$tbar-popup-nav-hover-border-color: $tbar-default-border !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
+$tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
+$tbar-popup-nav-hover-active-border-size: 0 !default;
+$tbar-popup-nav-focus-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-focus-color: rgba($primary-text-color) !default;
+$tbar-popup-nav-focus-border-color: rgba($border-light) !default;
+$tbar-popup-nav-focus-border-size: 0 0 0 1px !default;
+$tbar-popup-btn-bg: transparent !default;
+$tbar-popup-btn-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-btn-hover-box-shadow: none !default;
+$tbar-popup-btn-active-bg: transparent !default;
+$tbar-popup-btn-active-box-shadow: none !default;
+$tbar-popup-btn-focus-bg: $content-bg-color-focus !default;
+$tbar-popup-btn-focus-box-shadow: none !default;
+$tbar-popup-nav-pressed-icons-active-color: $tbar-active-font-color !default;
+$tbar-popup-btn-focus-outline: 0 !default;
+$tbar-popup-nav-pressed-border-color: $tbar-pressed-bg !default;
+$tbar-popup-nav-pressed-border-size: 0 !default;
+$tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
+$tbar-popup-nav-pressed-focus-border-size: 0 !default;
+$tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}

package/styles/toolbar/_tailwind-definition.scss

@@ -53,7 +53,7 @@ $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-rtl-border-width: 0 1px 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;
@@ -97,7 +97,7 @@ $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-hover-border: 1px solid $tbar-default-border !default;
 $tbar-nav-focus-border: 0 !default;
 $tbar-nav-pressed-box-shadow: none !default;
 $tbar-btn-border-radius: 4px !default;
@@ -178,7 +178,7 @@ $tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-color: $tbar-hover-font !default;
 $tbar-popup-nav-hover-icons-color: $icon-color !default;
 $tbar-popup-nav-hover-border-color: $tbar-default-border !default;
-$tbar-popup-nav-hover-border-size: 0 !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
 $tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
 $tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
 $tbar-popup-nav-hover-active-border-size: 0 !default;

package/styles/toolbar/_theme.scss

@@ -340,12 +340,13 @@
     &.e-rtl .e-hor-nav {
       background: $tbar-default-bg;
       border: $tbar-border-nav-type $tbar-default-border;
-      border-left: 0;
       border-width: $tbar-popup-rtl-border-width;
 
       &:not(.e-nav-active):hover {
         background: $tbar-hover-bg;
         color: $tbar-hover-font;
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-rtl-border-width;
       }
     }
   }

package/styles/toolbar/bootstrap-dark.css

@@ -21,6 +21,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 15px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 15px;
+}
 .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: 15px;
@@ -1061,10 +1067,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #131313;
   border: solid #505050;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #313131;
   color: #fff;
+  border: solid #505050;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/bootstrap.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .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: 3px;
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f8f8;
   border: solid #ccc;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #e6e6e6;
   color: #333;
+  border: solid #ccc;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/bootstrap4.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 16px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 16px;
+}
 .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: 16px;
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f9fa;
   border: solid #dee2e6;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #6c757d;
   color: #fff;
+  border: solid #dee2e6;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/bootstrap5-dark.css

@@ -33,6 +33,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 12px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 12px;
+}
 .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: 12px;
@@ -1073,10 +1079,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #282d31;
   border: solid #444c54;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #5c636a;
   color: #adb5bd;
+  border: solid #444c54;
+  border-width: 0 0 0 0;
 }

package/styles/toolbar/bootstrap5.css

@@ -33,6 +33,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 12px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 12px;
+}
 .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: 12px;
@@ -1073,10 +1079,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f9fa;
   border: solid #dee2e6;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #5c636a;
   color: #6c757d;
+  border: solid #dee2e6;
+  border-width: 0 0 0 0;
 }

package/styles/toolbar/fabric-dark.css

@@ -21,6 +21,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .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: 3px;
@@ -936,7 +942,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #414040;
-  border-left: 0;
+  border-left: 1px solid #414040;
   color: #dadada;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -945,7 +951,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #414040;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: #414040;
@@ -1061,10 +1067,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #333232;
   border: solid #414040;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #414040;
   color: #dadada;
+  border: solid #414040;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/fabric.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .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: 3px;
@@ -937,7 +943,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #f4f4f4;
-  border-left: 0;
+  border-left: 1px solid #dadada;
   color: #000;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -946,7 +952,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #dadada;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: #f4f4f4;
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #fff;
   border: solid #dadada;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #f4f4f4;
   color: #000;
+  border: solid #dadada;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/fluent-dark.css

@@ -32,6 +32,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 10px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 10px;
+}
 .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;
@@ -1072,10 +1078,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #252423;
   border: solid #292827;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #292827;
   color: #f3f2f1;
+  border: solid #292827;
+  border-width: 0 0 0 0;
 }