@syncfusion/blazor-themes 20.3.60 → 20.4.38

package/SCSS-Themes/navigations/toolbar/material.scss

@@ -63,6 +63,8 @@ $tbar-item-pop-nrml-padding: 0 !default;
 $tbar-item-pop-bgr-padding: 0 !default;
 $tbar-multirow-items-mrgn-bigger: 24px !default;
 $tbar-multirow-items-mrgn-small: 18px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 0 !default;
 $tbar-multirow-item-mrgn: 0 !default;
 
 $tbar-btn-bgr-mrgn: 5.5px 0 !default;
@@ -140,6 +142,97 @@ $tbar-default-font-overlay: rgba($grey-light-font, .38) !default;
 $tbar-separator-border: rgba($grey-black, .12) !default;
 $tbar-default-border: $tbar-separator-border !default;
 
+$tbar-bgr-btn-text-font-size: 14px !default;
+$tbar-bgr-btn-icon-font-size: 14px !default;
+$tbar-bgr-btn-focus-padding: 0 6px !default;
+$tbar-bgr-btn-line-height: 35px !default;
+$tbar-bgr-item-margin: 0 !default;
+
+$tbar-nrml-btn-icon-padding-bottom: 0 !default;
+$tbar-nrml-btn-border-radius: 2px !default;
+$tbar-nrml-btn-line-height: 25px !default;
+$tbar-nrml-btn-focus-padding: 0 1.5px !default;
+$tbar-nrml-btn-focus-outline: 0 !default;
+
+$tbar-btn-icons-focus-color: $tbar-default-icon-color !default;
+$tbar-btn-text-focus-color: $tbar-default-font !default;
+$tbar-btn-focus-border-color: $tbar-focus-border-color !default;
+$tbar-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-btn-hover-active-icons-color: $tbar-default-icon-color !default;
+$tbar-btn-hover-active-text-color: $tbar-default-font !default;
+$tbar-btn-text-color: $tbar-default-font !default;
+$tbar-btn-overlay-opacity: .5 !default;
+$tbar-btn-active-bg: $tbar-press-bg !default;
+$tbar-btn-active-border-size: $tbar-zero-value !default;
+$tbar-btn-active-icons-color: $tbar-default-icon-color !default;
+$tbar-btn-active-text-color: $tbar-hover-font !default;
+$tbar-btn-pressed-text-color: rgba($grey-black, .87) !default;
+$tbar-btn-pressed-focus-box-shadow: none !default;
+
+$tbar-ext-btn-margin: 0 !default;
+$tbar-ext-btn-focus-padding: 0 1.5px !default;
+$tbar-ext-btn-icon-padding: 0 !default;
+$tbar-ext-btn-icon-font-size: 14px !default;
+$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
+$tbar-ext-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-ext-btn-icon-hover-active-font: $tbar-default-icon-color !default;
+$tbar-ext-btn-text-hover-active-font: $tbar-default-font !default;
+$tbar-ext-btn-icon-hover-font: $tbar-default-icon-color !default;
+$tbar-ext-btn-text-hover-font: $tbar-default-font !default;
+$tbar-ext-btn-border: none !default;
+$tbar-ext-btn-active-border-size: 0 !default;
+$tbar-ext-btn-icon-active-font: $tbar-default-icon-color !default;
+$tbar-ext-btn-text-active-font: $tbar-default-font !default;
+
+$tbar-popup-icon-font-size: 12px !default;
+$tbar-popup-text-btn-icon-padding: 0 !default;
+$tbar-popup-bgr-text-btn-icon-padding: 0 !default;
+$tbar-popup-btn-border: none !default;
+$tbar-popup-btn-border-radius: 2px !default;
+$tbar-popup-bgr-height: 48px !default;
+$tbar-popup-bgr-btn-icon-font-size: 14px !default;
+$tbar-popup-bgr-btn-line-height: 35px !default;
+$tbar-popup-bgr-btn-text-font-size: 14px !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-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-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: $tbar-hover-font !default;
+$tbar-popup-nav-focus-border-color: $tbar-hover-bg !default;
+$tbar-popup-nav-focus-border-size: 0 !default;
+$tbar-popup-btn-bg: $tbar-default-bg !default;
+$tbar-popup-btn-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-btn-hover-box-shadow: none !default;
+$tbar-popup-btn-hover-color: $tbar-hover-font !default;
+$tbar-popup-btn-hover-icons-color: $tbar-default-icon-color !default;
+$tbar-popup-btn-hover-text-color: $tbar-hover-font !default;
+$tbar-popup-btn-active-bg: $tbar-press-bg !default;
+$tbar-popup-btn-active-box-shadow: none !default;
+$tbar-popup-btn-active-color: $tbar-hover-font !default;
+$tbar-popup-btn-active-icons-color: $tbar-default-icon-color !default;
+$tbar-popup-btn-active-text-color: $tbar-hover-font !default;
+$tbar-popup-btn-focus-bg: $tbar-hover-bg !default;
+$tbar-popup-btn-focus-box-shadow: none !default;
+$tbar-popup-btn-focus-color: $tbar-hover-font !default;
+$tbar-popup-btn-focus-icons-color: $tbar-default-icon-color !default;
+$tbar-popup-btn-focus-text-color: $tbar-hover-font !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;
+
 $tbar-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
 $tbar-ribble-animation-shadow-frame: 0 0 0 0 $tbar-ribble-animation-border-frame !default;
 $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
@@ -184,10 +277,8 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
     min-height: $tbar-bgr-size;
 
     .e-tbar-btn {
-      @if $tbar-skin == 'bootstrap4' {
-        .e-tbar-btn-text {
-          font-size: $tbar-icons-bgr-font-size;
-        }
+      .e-tbar-btn-text {
+        font-size: $tbar-bgr-btn-text-font-size;
       }
     }
 
@@ -195,10 +286,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       font-size: $tbar-icons-bgr-font-size;
 
       &.e-btn-icon {
-
-        @if $tbar-skin == 'bootstrap4' {
-          font-size: $tbar-icons-bgr-font-size;
-        }
+        font-size: $tbar-bgr-btn-icon-font-size;
       }
     }
 
@@ -294,9 +382,6 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         line-height: $tbar-btn-icon-bgr-line-height;
         min-height: $tbar-btn-icon-bgr-height;
         min-width: $tbar-btn-icon-bgr-width;
-        @if $tbar-skin == 'bootstrap5' {
-          padding-bottom: 4px;
-        }
       }
     }
 
@@ -304,19 +389,13 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
       .e-tbar-btn-text {
         line-height: $tbar-btn-txt-line-height;
-
-        @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-          font-size: 16px;
-        }
       }
     }
 
     .e-toolbar-pop {
 
       .e-toolbar-item {
-        @if $tbar-skin == 'material' {
-          height: 48px;
-        }
+        height: $tbar-popup-bgr-height;
 
         &:not(.e-separator) {
           min-width: 48px;
@@ -325,35 +404,22 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
         .e-tbar-btn .e-icons.e-btn-icon {
           min-width: $tbar-btn-icon-bgr-width;
-
-          @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-            font-size: 16px;
-          }
+          font-size: $tbar-popup-bgr-btn-icon-font-size;
         }
 
         .e-tbar-btn.e-btn {
           min-height: $tbar-btn-pop-bgr-minheight;
           padding: $tbar-pop-btn-bgr-padding;
-          @if $tbar-skin == 'bootstrap' {
-            line-height: 34px;
-          }
+          line-height: $tbar-popup-bgr-btn-line-height;
 
           .e-icons.e-btn-icon {
             margin-left: $tbar-zero-value;
             padding: $tbar-pop-icon-bgr-padding;
           }
 
-          .e-icon-left {
-            @if $tbar-skin == 'material' {
-              padding-right: 16px;
-            }
-          }
-
           .e-tbar-btn-text {
             padding: $tbar-pop-btn-txt-bgr-pad;
-            @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-              font-size: 16px;
-            }
+            font-size: $tbar-popup-bgr-btn-text-font-size;
           }
         }
       }
@@ -368,9 +434,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         white-space: normal;
 
         .e-toolbar-item:not(.e-separator) {
-          @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
-            margin: $tbar-multirow-item-top-btm-mrgn-bigger;
-          }
+          margin: $tbar-multirow-item-top-btm-mrgn-bigger;
         }
 
         .e-toolbar-item.e-separator.e-multirow-separator,
@@ -432,9 +496,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
         &:not(.e-separator) {
           min-width: $tbar-bgr-item-size;
-          @if ($tbar-skin != 'FluentUI') {
-            padding: $tbar-item-bgr-padding;
-          }
+          padding: $tbar-item-bgr-padding;
         }
 
         &.e-separator {
@@ -451,12 +513,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
             &.e-tbtn-txt {
 
               .e-icons.e-btn-icon {
-                @if $tbar-skin == 'bootstrap5' {
-                  padding-bottom: $tbar-big-pop-padding-bottom;
-                }
-                @else {
-                  padding: $tbar-zero-value;
-                }
+                padding: $tbar-popup-bgr-text-btn-icon-padding;
               }
             }
           }
@@ -469,15 +526,12 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           min-height: $tbar-btn-bgr-minheight;
           min-width: $tbar-btn-bgr-minwidth;
           padding: $tbar-btn-bgr-padding;
+          line-height: $tbar-bgr-btn-line-height;
 
-          @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-            line-height: 34px;
-
-            &:focus,
-            &:hover,
-            &:active {
-              padding: $tbar-btn-bgr-focus-padding;
-            }
+          &:focus,
+          &:hover,
+          &:active {
+            padding: $tbar-btn-bgr-focus-padding;
           }
 
           &.e-tbtn-txt {
@@ -506,10 +560,6 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         padding-left: $tbar-item-bgr-mrgn;
         padding-right: $tbar-item-bgr-mrgn;
         padding-top: 0;
-
-        @if $tbar-skin != 'material' {
-          margin-left: -1px;
-        }
       }
 
       .e-toolbar-extended.e-popup-close {
@@ -530,14 +580,9 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         white-space: normal;
 
         .e-toolbar-item:not(.e-separator) {
-
-          @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
-            margin: $tbar-item-bgr-padding-bigger;
-          }
+          margin: $tbar-bgr-item-margin;
           min-width: $tbar-bgr-item-size;
-          @if ($tbar-skin != 'FluentUI') {
-            padding: $tbar-item-bgr-padding;
-          }
+          padding: $tbar-item-bgr-padding;
         }
 
         .e-toolbar-item.e-separator.e-extended-separator {
@@ -570,19 +615,10 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
             min-width: $tbar-btn-bgr-minwidth;
             padding: $tbar-btn-bgr-padding;
 
-            @if $tbar-skin == 'bootstrap' {
-              &:hover,
-              &:focus,
-              &:active {
-                padding: 0 6px;
-              }
-            }
-            @if $tbar-skin == 'bootstrap4' {
-              &:hover,
-              &:focus,
-              &:active {
-                padding: 0 5.5px;
-              }
+            &:hover,
+            &:focus,
+            &:active {
+              padding: $tbar-bgr-btn-focus-padding;
             }
           }
 
@@ -614,9 +650,6 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
       .e-toolbar-extended {
         padding-right: $tbar-item-bgr-mrgn;
-        @if $tbar-skin != 'material'  {
-          margin-left: 0;
-        }
       }
     }
 
@@ -684,10 +717,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
       .e-toolbar-extended {
         padding-right: $tbar-item-nrml-mrgn;
-
-        @if $tbar-skin != 'material'  {
-          margin-left: 0;
-        }
+        margin-left: 0;
 
         .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
           padding-left: 0;
@@ -723,10 +753,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         padding-left: $tbar-item-nrml-mrgn;
         padding-right: $tbar-item-nrml-mrgn;
         padding-top: 0;
-
-        @if $tbar-skin != 'material'  {
-          margin-left: -1px;
-        }
+        margin-left: -1px;
 
         .e-toolbar-item.e-toolbar-text .e-tbar-btn-text {
           display: none;
@@ -751,15 +778,10 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         white-space: normal;
 
         .e-toolbar-item:not(.e-separator) {
-
-          @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
-            margin: $tbar-item-nrml-padding-small;
-          }
+          margin: $tbar-ext-btn-margin;
           height: 100%;
           min-width: $tbar-item-nrml-minwidth;
-          @if ($tbar-skin != 'FluentUI') {
-            padding: $tbar-item-nrml-padding;
-          }
+          padding: $tbar-item-nrml-padding;
         }
 
         .e-toolbar-item.e-separator.e-extended-separator {
@@ -805,12 +827,10 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           .e-tbar-btn.e-btn {
             line-height: $tbar-btn-nrml-line-height;
 
-            @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-              &:hover,
-              &:focus,
-              &:active {
-                padding: 0 1.5px;
-              }
+            &:hover,
+            &:focus,
+            &:active {
+              padding: $tbar-ext-btn-focus-padding;
             }
           }
         }
@@ -826,12 +846,8 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           line-height: $tbar-btn-icon-nrml-line-height;
           min-height: $tbar-btn-icon-nrml-height;
           min-width: $tbar-btn-icon-nrml-width;
-          padding: 0;
-
-          @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-            font-size: 16px;
-            padding: 5px 6px;
-          }
+          padding: $tbar-ext-btn-icon-padding;
+          font-size: $tbar-ext-btn-icon-font-size;
         }
       }
 
@@ -936,12 +952,9 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           justify-content: flex-start;
           min-height: $tbar-btn-pop-nrml-minheight;
           padding: $tbar-pop-btn-nrml-padding;
-
-          @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-            border: 0;
-            border-radius: 0;
-            margin: 0;
-          }
+          border: $tbar-popup-btn-border;
+          border-radius: $tbar-popup-btn-border-radius;
+          margin: 0;
 
           .e-icons.e-btn-icon {
             margin: $tbar-zero-value;
@@ -949,12 +962,6 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
             width: auto;
           }
 
-          .e-icon-left {
-            @if $tbar-skin == 'material' {
-              padding-right: 16px;
-            }
-          }
-
           .e-tbar-btn-text {
             padding: $tbar-pop-btn-txt-nrml-pad;
           }
@@ -1138,22 +1145,10 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         }
       }
 
-      .e-toolbar-pop {
-
-        .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
-          @if $tbar-skin == 'material' {
-            padding-left: 16px;
-            padding-right: 0;
-          }
-        }
-      }
-
       .e-hor-nav {
         left: $tbar-zero-value;
         right: auto;
-        @if $tbar-skin == 'bootstrap' $tbar-skin == 'bootstrap4' {
-          border-radius: $tbar-radius 0 0 $tbar-radius;
-        }
+        border-radius: $tbar-radius 0 0 $tbar-radius;
       }
     }
 
@@ -1182,10 +1177,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       text-align: center;
       vertical-align: middle;
       width: 100%;
-
-      @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-        font-size: $tbar-btn-font-size;
-      }
+      font-size: $tbar-popup-icon-font-size;
     }
 
     .e-toolbar-item {
@@ -1214,9 +1206,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         white-space: normal;
 
         .e-toolbar-item:not(.e-separator) {
-          @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
-            margin: $tbar-multirow-item-top-btm-mrgn-small;
-          }
+          margin: $tbar-multirow-item-top-btm-mrgn-small;
         }
 
         .e-toolbar-item.e-separator.e-multirow-separator,
@@ -1384,9 +1374,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         &:not(.e-separator) {
           height: inherit;
           min-width: $tbar-item-nrml-minwidth;
-          @if ($tbar-skin != 'FluentUI') {
-            padding: $tbar-item-nrml-padding;
-          }
+          padding: $tbar-item-nrml-padding;
         }
 
         &.e-separator {
@@ -1406,12 +1394,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
             &.e-tbtn-txt {
 
               .e-icons.e-btn-icon {
-                @if $tbar-skin == 'bootstrap5' {
-                  padding-bottom: $tbar-pop-padding-bottom;
-                }
-                @else {
-                  padding: $tbar-zero-value;
-                }
+                padding: $tbar-popup-text-btn-icon-padding;
               }
             }
           }
@@ -1423,34 +1406,17 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           min-height: $tbar-btn-nrml-minheight;
           min-width: $tbar-btn-nrml-minwidth;
           padding: $tbar-btn-nrml-padding;
+          border-radius: $tbar-nrml-btn-border-radius;
+          line-height: $tbar-nrml-btn-line-height;
 
-          @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-            border-radius: 4px;
-          }
-
-          @if $tbar-skin == 'bootstrap' {
-            line-height: 27px;
-
-            &:hover,
-            &:focus,
-            &:active {
-              padding: 0 1.5px;
-            }
-          }
-          @if $tbar-skin == 'bootstrap4' {
-            line-height: 27px;
-
-            &:focus,
-            &:active,
-            &:hover {
-              padding: 0 2px;
-            }
+          &:hover,
+          &:focus,
+          &:active {
+            padding: $tbar-nrml-btn-focus-padding;
           }
 
-          @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' or $tbar-skin == 'FluentUI' {
-            &:focus {
-              outline: none;
-            }
+          &:focus {
+            outline: $tbar-nrml-btn-focus-outline;
           }
 
           &.e-tbtn-txt {
@@ -1468,9 +1434,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
             margin: $tbar-zero-value;
             min-width: $tbar-btn-icon-nrml-width;
             width: auto;
-            @if $tbar-skin == 'bootstrap5' {
-              padding-bottom: 4px;
-            }
+            padding-bottom: $tbar-nrml-btn-icon-padding-bottom;
           }
         }
 
@@ -1671,112 +1635,73 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           background: $tbar-default-bg;
           box-shadow: $tbar-btn-box-shadow;
           color: $tbar-default-font;
+          border: $tbar-ext-btn-border;
 
           .e-toolbar-item .e-tbar-btn-text {
             color: $tbar-default-font;
           }
-          @if $tbar-skin == 'bootstrap' {
-            margin: 1px 0;
-          }
-
-          @if $tbar-skin == 'highcontrast' {
-            border: 2px $tbar-border-type $ext-tbar-btn-border-color;
-          }
 
           &:focus {
             background: $tbar-focus-bg;
-            border-color: $tbar-focus-border-color;
             border-radius: $tbar-btn-border-radius;
             color: $tbar-hover-font-color;
+            border-color: $tbar-btn-focus-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-btn-hover-border-size;
+            box-shadow: $tbar-ext-btn-focus-box-shadow;
 
-            @if $tbar-skin == 'bootstrap' {
-              border: 1px solid $tbar-focus-border-color;
-              margin: 0;
-            }
-
-            @if $tbar-skin == 'bootstrap4' {
-              border: 1px solid $tbar-focus-border-color;
-              box-shadow: $tbar-focus-btn-box-shadow;
-            }
-
-            @if $tbar-skin == 'bootstrap5' {
-              .e-toolbar-item .e-tbar-btn-text,
-              .e-icons {
-                color: $tbar-active-icon-color;
-              }
+            .e-icons {
+              color: $tbar-ext-btn-icon-hover-font;
             }
 
-            @if $tbar-skin == 'highcontrast' {
-              border: $tbar-dash-border;
-
-              &:active {
-                background: $ext-tbar-btn-focus-active-bg-color;
-              }
+            .e-tbar-btn-text {
+              color: $tbar-ext-btn-text-hover-font;
             }
           }
 
           &:hover {
             background: $tbar-hover-bg;
-            border-color: $tbar-hover-border-color;
             border-radius: $tbar-btn-border-radius;
             color: $tbar-hover-font-color;
+            border-color: $tbar-ext-btn-hover-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-ext-btn-hover-border-size;
 
-            @if $tbar-skin == 'bootstrap' {
-              border: 1px solid $tbar-hover-border-color;
-            }
-
-            @if $tbar-skin == 'highcontrast' {
-              border: 2px $tbar-border-type $ext-tbar-btn-hover-border-color;
+            &:active {
 
               .e-icons {
-                color: $tbar-hover-font;
+                color: $tbar-ext-btn-icon-hover-active-font;
               }
 
-              &:focus {
-
-                .e-icons,
-                .e-tbar-btn-text {
-                  color: $tbar-hover-font;
-                }
+              .e-tbar-btn-text {
+                color: $tbar-ext-btn-text-hover-active-font;
               }
+            }
 
-              &:active {
-
-                .e-icons,
-                .e-tbar-btn-text {
-                  color: $tbar-select-font;
-                }
-              }
+            .e-icons {
+              color: $tbar-ext-btn-icon-hover-font;
             }
 
-            @if $tbar-skin == 'bootstrap5' {
-              .e-toolbar-item .e-tbar-btn-text,
-              .e-icons {
-                color: $tbar-active-icon-color;
-              }
+            .e-tbar-btn-text {
+              color: $tbar-ext-btn-text-hover-font;
             }
           }
 
           &:active {
             background: $tbar-btn-press-bg;
-            border-color: $tbar-press-border-color;
             border-radius: $tbar-btn-border-radius;
             box-shadow: $tbar-btn-pressed-box-shadow;
             color: $tbar-btn-active-font-color;
+            border-color: $tbar-press-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-ext-btn-active-border-size;
 
-            @if $tbar-skin == 'bootstrap' {
-              border-left: 1px solid $tbar-press-border-color;
+            .e-icons {
+              color: $tbar-ext-btn-icon-active-font;
             }
-            @if $tbar-skin == 'highcontrast' {
-              .e-icons,
-              .e-tbar-btn-text {
-                color: $tbar-pressed-font;
-              }
-            }
-            @if $tbar-skin == 'bootstrap5' {
-              .e-icons {
-                color: $tbar-active-icon-color;
-              }
+
+            .e-tbar-btn-text {
+              color: $tbar-ext-btn-text-active-font;
             }
           }
         }
@@ -1785,9 +1710,6 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
     .e-tbar-btn.e-btn .e-icons {
       color: $tbar-default-icon-color;
-      @if $tbar-skin == 'bootstrap5' {
-        padding-bottom: 4px;
-      }
     }
 
     .e-toolbar-pop {
@@ -1797,43 +1719,63 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
       .e-toolbar-item {
 
-        @if $tbar-skin == 'bootstrap4' {
-          .e-tbar-btn:hover,
-          .e-tbar-btn:active,
-          .e-tbar-btn:focus {
-            background: $primary;
-            box-shadow: none;
-            color: $primary-font;
+        .e-tbar-btn {
+          background: $tbar-popup-btn-bg;
+        }
 
-            .e-icons,
-            .e-tbar-btn-text {
-              color: inherit;
-            }
+        .e-tbar-btn:hover {
+          background: $tbar-popup-btn-hover-bg;
+          box-shadow: $tbar-popup-btn-hover-box-shadow;
+          color: $tbar-popup-btn-hover-color;
+          border-color: $tbar-hover-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-btn-hover-border-size;
+
+          .e-icons {
+            color: $tbar-popup-btn-hover-icons-color;
           }
 
-          .e-tbar-btn {
-            background: $tbar-popup-btn-bg-color;
+          .e-tbar-btn-text {
+            color: $tbar-popup-btn-hover-text-color;
           }
         }
 
-        @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
-          .e-tbar-btn {
-            background: $tbar-popup-btn-bg-color;
+        .e-tbar-btn:active {
+          background: $tbar-popup-btn-active-bg;
+          box-shadow: $tbar-popup-btn-active-box-shadow;
+          color: $tbar-popup-btn-active-color;
+          border-color: $tbar-press-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-btn-hover-border-size;
 
-            &:focus {
-              background: $tbar-focus-bg;
-            }
+          .e-icons {
+            color: $tbar-popup-btn-active-icons-color;
+          }
 
-            &:hover {
-              background: $tbar-hover-bg;
-            }
+          .e-tbar-btn-text {
+            color: $tbar-popup-btn-active-text-color;
           }
         }
 
-        @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' or $tbar-skin == 'FluentUI' {
-          .e-btn:focus {
-            outline: none;
+        .e-tbar-btn:focus {
+          background: $tbar-popup-btn-focus-bg;
+          box-shadow: $tbar-popup-btn-focus-box-shadow;
+          color: $tbar-popup-btn-focus-color;
+          border-color: $tbar-btn-focus-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-btn-hover-border-size;
+
+          .e-icons {
+            color: $tbar-popup-btn-focus-icons-color;
           }
+
+          .e-tbar-btn-text {
+            color: $tbar-popup-btn-focus-text-color;
+          }
+        }
+
+        .e-btn:focus {
+          outline: $tbar-popup-btn-focus-outline;
         }
 
         &:not(.e-separator) {
@@ -1851,25 +1793,22 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       .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;
         box-shadow: $tbar-nav-pressed-box-shadow;
+        border-color: $tbar-popup-nav-pressed-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-popup-nav-pressed-border-size;
 
-        @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;
-          }
+        &:focus {
+          border-color: $tbar-popup-nav-pressed-focus-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-pressed-focus-border-size;
         }
 
         .e-icons {
           color: $tbar-active-font-color;
-          @if $tbar-skin == 'bootstrap4' {
-            &:active {
-              color: inherit;
-            }
+
+          &:active {
+            color: $tbar-popup-nav-pressed-icons-active-color;
           }
         }
       }
@@ -1879,87 +1818,33 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       background: $tbar-items-default-bg;
       box-shadow: $tbar-btn-box-shadow;
       color: $tbar-default-font;
-
-      @if $tbar-skin == 'bootstrap' {
-        margin: 1px 0;
-      }
-
-      @if $tbar-skin == 'highcontrast' {
-        border: 2px $tbar-border-type $tbar-btn-border-color;
-      }
+      border: $tbar-btn-border;
 
       &:focus {
         background: $tbar-focus-bg;
-        @if $tbar-skin == 'bootstrap4' {
-          box-shadow: $tbar-focus-btn-box-shadow;
-        }
-        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-          border: 1px solid $tbar-focus-border-color;
-          margin: 0;
-        }
-        border-color: $tbar-focus-border-color;
         border-radius: $tbar-btn-border-radius;
         color: $tbar-hover-font;
-        @if $tbar-skin == 'highcontrast' {
-          border: $tbar-dash-border;
+        border-color: $tbar-btn-focus-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-btn-hover-border-size;
+        box-shadow: $tbar-ext-btn-focus-box-shadow;
 
-          &:active {
-            background: $tbar-btn-focus-active-bg-color;
-          }
+        .e-icons {
+          color: $tbar-btn-icons-focus-color;
         }
-        @if $tbar-skin == 'bootstrap5' {
-          .e-icons,
-          .e-tbar-btn-text {
-            color: $tbar-active-icon-color;
-            padding-bottom: 4px;
-          }
+
+        .e-tbar-btn-text {
+          color: $tbar-btn-text-focus-color;
         }
       }
 
       &:hover {
         background: $tbar-hover-bg;
-        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-          border: 1px solid $tbar-hover-border-color;
-        }
         border-color: $tbar-hover-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-btn-hover-border-size;
         border-radius: $tbar-btn-border-radius;
         color: $tbar-hover-font;
-
-        @if $tbar-skin == 'bootstrap4' {
-          .e-icons,
-          .e-tbar-btn-text {
-            color: inherit;
-          }
-        }
-
-        @if $tbar-skin == 'highcontrast' {
-          border: 2px $tbar-border-type $tbar-btn-hover-border-color;
-
-          .e-icons {
-            color: $tbar-hover-font;
-          }
-
-          &:focus {
-            .e-icons,
-            .e-tbar-btn-text {
-              color: $tbar-hover-font;
-            }
-          }
-
-          &:active {
-            .e-icons,
-            .e-tbar-btn-text {
-              color: $tbar-select-font;
-            }
-          }
-        }
-        @if $tbar-skin == 'bootstrap5' {
-          .e-icons,
-          .e-tbar-btn-text {
-            color: $tbar-active-icon-color;
-            padding-bottom: 4px;
-          }
-        }
       }
     }
 
@@ -1970,14 +1855,7 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
 
         &.e-overlay {
           background: $tbar-default-bg;
-
-          @if $tbar-skin == 'highcontrast' {
-            opacity: 1;
-          }
-
-          @if $tbar-skin == 'bootstrap4' {
-            opacity: .65;
-          }
+          opacity: $tbar-btn-overlay-opacity;
 
           .e-tbar-btn-text {
             color: $tbar-default-font-overlay;
@@ -1988,24 +1866,51 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
           }
         }
 
-        @if $tbar-skin != 'bootstrap5' {
-          @if $tbar-skin != 'highcontrast' and $tbar-skin != 'bootstrap4' {
+        .e-tbar-btn-text {
+          color: $tbar-btn-text-color;
+        }
+
+        .e-tbar-btn {
+
+          &.e-flat.e-active {
             .e-tbar-btn-text {
-              color: $tbar-default-font;
+              color: $tbar-btn-pressed-text-color;
             }
-          }
-        }
 
-        @if $tbar-skin == 'bootstrap4' {
-          .e-tbar-btn {
-            &:hover,
             &:focus {
-              .e-icons,
+              box-shadow: $tbar-btn-pressed-focus-box-shadow;
+            }
+          }
+
+          &:hover {
+            .e-icons {
+              color: $tbar-btn-icons-focus-color;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-btn-text-focus-color;
+            }
+
+            &:active {
+              .e-icons {
+                color: $tbar-btn-hover-active-icons-color;
+              }
+  
               .e-tbar-btn-text {
-                color: inherit;
+                color: $tbar-btn-hover-active-text-color;
               }
             }
           }
+
+          &:focus {
+            .e-icons {
+              color: $tbar-btn-icons-focus-color;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-btn-text-focus-color;
+            }
+          }
         }
 
         &.e-separator {
@@ -2039,13 +1944,11 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         @include tbar-btn-animation;
       }
 
-      @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
-        &.e-nav-active {
-          &:active,
-          &:focus,
-          &:hover {
-            border-bottom-right-radius: 0;
-          }
+      &.e-nav-active {
+        &:active,
+        &:focus,
+        &:hover {
+          border-bottom-right-radius: $tbar-popup-nav-active-border-bottom-right-radius;
         }
       }
 
@@ -2053,13 +1956,10 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
         border: $tbar-nav-press-border;
         box-shadow: $tbar-nav-pressed-box-shadow;
         color: $tbar-select-font;
+        background: $tbar-popup-nav-active-bg;
 
-        @if $tbar-skin == 'bootstrap4' {
-          background: $tbar-hover-bg;
-
-          .e-icons {
-            color: inherit;
-          }
+        .e-icons {
+          color: $tbar-popup-nav-active-icons-color;
         }
 
         &::after {
@@ -2068,68 +1968,37 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
       }
 
       &:hover {
-        background: $tbar-hover-bg;
+        background: $tbar-popup-nav-hover-bg;
         border-left: $tbar-nav-hover-border;
+        color: $tbar-popup-nav-hover-color;
 
-        @if $tbar-skin == 'bootstrap4' {
-          background: $tbar-popup-hover-bg;
-
-          .e-icons {
-            color: inherit;
-          }
+        .e-icons {
+          color: $tbar-popup-nav-hover-icons-color;
         }
 
-        @if $tbar-skin == 'bootstrap5' {
-          color: $tbar-active-icon-color;
-
-          .e-icons {
-            color: inherit;
-          }
+        &:not(.e-nav-active) {
+          border-color: $tbar-popup-nav-hover-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-hover-border-size;
         }
-        @else {
-          color: $tbar-hover-font;
-        }
-
-        @if $tbar-skin == 'highcontrast' {
-          &:not(.e-nav-active) {
-            border: 2px $tbar-border-type $tbar-nav-hover-color;
-          }
 
-          &:active {
-            background: $tbar-nav-hover-active-bg-color;
-            border: 0;
-          }
+        &:active {
+          background: $tbar-popup-nav-hover-active-bg;
+          border-color: $tbar-popup-nav-hover-active-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-hover-active-border-size;
         }
       }
 
       &:focus {
-        background: $tbar-hover-bg;
-        border-left: $tbar-nav-focus-border;
-
-        @if $tbar-skin != 'bootstrap' {
-          border-color: $tbar-pressed-border;
-        }
-
-        @if $tbar-skin == 'bootstrap4' {
-          .e-icons {
-            color: inherit;
-          }
-        }
+        background: $tbar-popup-nav-focus-bg;
+        color: $tbar-popup-nav-focus-color;
+        border-color: $tbar-popup-nav-focus-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-popup-nav-focus-border-size;
 
-        @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;
+        .e-icons {
+          color: $tbar-popup-nav-hover-icons-color;
         }
       }
     }
@@ -2137,34 +2006,20 @@ $tbar-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !d
     .e-tbar-btn {
 
       &: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;
-        }
+        background: $tbar-btn-active-bg;
         border-color: $tbar-press-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-btn-active-border-size;
         border-radius: $tbar-btn-border-radius;
         box-shadow: $tbar-btn-pressed-box-shadow;
         color: $tbar-press-font;
 
-        @if $tbar-skin == 'bootstrap4' {
-          background: $tbar-active-btn-bg;
-          border: 1px solid $tbar-active-border-color;
-
-          .e-icons,
-          .e-tbar-btn-text {
-            color: inherit;
-          }
+        .e-icons {
+          color: $tbar-btn-active-icons-color;
         }
-        @if $tbar-skin == 'highcontrast' {
-          color: $tbar-pressed-font;
 
-          .e-icons,
-          .e-tbar-btn-text {
-            color: $tbar-pressed-font;
-          }
+        .e-tbar-btn-text {
+          color: $tbar-btn-active-text-color;
         }
       }
     }