@syncfusion/ej2-navigations 25.2.4 → 26.1.35

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

@@ -1,4 +1,3 @@
-//default
 $tbar-skin: 'highcontrast' !default;
 $tbar-zero-value: 0 !default;
 $tbar-icons-bgr-font-size: 14px !default;
@@ -71,12 +70,10 @@ $tbar-hover-border-color: $hover-border !default;
 $tbar-focus-border-color: $tbar-hover-border-color !default;
 $tbar-focus-bg: inherit !default;
 $tbar-press-font: $selection-font !default;
-
 $tbar-active-font-color: $tbar-press-font !default;
 $tbar-border-nav-type: solid !default;
 $tbar-border-nav-active-type: solid !default;
 $tbar-btn-border: 2px solid $bg-base-0 !default;
-
 $tbar-box-shadow: none !default;
 $tbar-border-type: solid !default;
 $tbar-separator-size: 1px !default;
@@ -90,7 +87,6 @@ $tbar-item-nrml-minwidth: 34px !default;
 $tbar-bgr-item-size: 49px !default;
 $tbar-btn-font-size: 16px !default;
 $tbar-btn-txt-font-size: 14px !default;
-
 $tbar-item-bgr-padding: 0  1.5px !default;
 $tbar-item-nrml-padding: 0 1px !default;
 $tbar-btn-nrml-padding: 0 !default;
@@ -108,7 +104,6 @@ $btn-txt-nrml-padding: 0 12px 0 8px !default;
 $btn-txt-bgr-padding: 0 15px 0 10px !default;
 $btn-rtl-txt-nrml-padding: 0 8px 0 12px !default;
 $btn-rtl-txt-bgr-padding: 0 10px 0 15px !default;
-
 $tbar-item-pop-nrml-padding: 0 !default;
 $tbar-item-pop-bgr-padding: 0 !default;
 $tbar-pop-btn-bgr-padding: 0 12.5px 0 0 !default;
@@ -117,7 +112,6 @@ $tbar-pop-icon-bgr-padding: 0 12.5px !default;
 $tbar-pop-icon-nrml-padding: 0 10px !default;
 $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: 1px solid $hover-border !default;
 $tbar-nav-focus-border: 0 !default;
@@ -152,15 +146,12 @@ $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-bgr-btn-text-font-size: 14px !default;
 $tbar-bgr-btn-icon-font-size: 16px !default;
 $tbar-bgr-btn-focus-padding: 0 !default;
-
 $tbar-nrml-btn-border-radius: 0 !default;
 $tbar-nrml-btn-focus-padding: 0 !default;
 $tbar-nrml-btn-focus-outline: none !default;
-
 $tbar-btn-icons-focus-color: $hover-font !default;
 $tbar-btn-text-focus-color: $hover-font !default;
 $tbar-btn-focus-border-color: $bg-base-0 !default;
@@ -176,14 +167,12 @@ $tbar-btn-pressed-text-color: $selection-font !default;
 $tbar-btn-pressed-focus-box-shadow: none !default;
 $tbar-btn-pressed-bg: $selection-bg !default;
 $tbar-flat-btn-active-box-shadow: none !default;
-
 $tbar-ext-btn-focus-padding: 0 !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: $hover-border !default;
 $tbar-ext-btn-border: 2px solid $bg-base-0 !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;
@@ -221,13 +210,9 @@ $tbar-popup-nav-pressed-border-size: 0 0 0 1px !default;
 $tbar-popup-nav-pressed-focus-border-color: $bg-base-0 !default;
 $tbar-popup-nav-pressed-focus-border-size: 2px !default;
 $tbar-popup-btn-hover-border-size: 2px !default;
-
 @mixin tbar-btn-animation {
   content: '';
 }
-
 @mixin tbar-btn-animation-after {
   content: '';
 }
-
-//enddefault

package/styles/toolbar/_layout.scss

@@ -1,6 +1,4 @@
 @include export-module('toolbar-layout') {
-
-  /*! toolbar layout */
   /* stylelint-disable property-no-vendor-prefix */
   .e-bigger .e-toolbar,
   .e-toolbar.e-bigger {
@@ -281,17 +279,14 @@
             margin-right: initial;
           }
 
-          .e-toolbar-center .e-toolbar-item {
-            margin: 0;
-          }
-
+          .e-toolbar-center .e-toolbar-item,
           .e-toolbar-right .e-toolbar-item {
             margin: 0;
+          }
 
-            &:last-child {
-              margin-left: $tbar-item-bgr-mrgn;
-              margin-right: 0;
-            }
+          .e-toolbar-right .e-toolbar-item:last-child {
+            margin-left: $tbar-item-bgr-mrgn;
+            margin-right: 0;
           }
         }
 
@@ -459,16 +454,13 @@
           margin-right: $tbar-item-nrml-mrgn;
         }
 
-        .e-toolbar-center .e-toolbar-item {
-          margin: 0;
-        }
-
+        .e-toolbar-center .e-toolbar-item,
         .e-toolbar-right .e-toolbar-item {
           margin: 0;
+        }
 
-          &:last-child {
-            margin-right: $tbar-item-nrml-mrgn;
-          }
+        .e-toolbar-right .e-toolbar-item:last-child {
+          margin-right: $tbar-item-nrml-mrgn;
         }
       }
     }
@@ -796,7 +788,7 @@
         padding-right: $tbar-item-nrml-mrgn;
         padding-top: 0;
         margin-left: -1px;
-        box-shadow: none;
+        box-shadow: $tbar-box-shadow;
         display: inline;
         white-space: normal;
 
@@ -955,16 +947,13 @@
           margin-right: initial;
         }
 
-        .e-toolbar-center .e-toolbar-item {
-          margin: 0;
-        }
-
+        .e-toolbar-center .e-toolbar-item,
         .e-toolbar-right .e-toolbar-item {
           margin: 0;
+        }
 
-          &:last-child {
-            margin-right: $tbar-item-nrml-mrgn;
-          }
+        .e-toolbar-right .e-toolbar-item:last-child {
+          margin-right: $tbar-item-nrml-mrgn;
         }
       }
 
@@ -1030,17 +1019,14 @@
 
       .e-toolbar-items:not(.e-tbar-pos) {
 
-        .e-toolbar-center .e-toolbar-item {
+        .e-toolbar-center .e-toolbar-item,
+        .e-toolbar-right .e-toolbar-item {
           margin: 0;
         }
 
-        .e-toolbar-right .e-toolbar-item {
+        .e-toolbar-right .e-toolbar-item:last-child {
           margin: 0;
-
-          &:last-child {
-            margin: 0;
-            margin-left: $tbar-item-nrml-mrgn;
-          }
+          margin-left: $tbar-item-nrml-mrgn;
         }
       }
     }

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

@@ -1,4 +1,3 @@
-//default
 $tbar-skin: 'material' !default;
 $tbar-zero-value: 0 !default;
 $tbar-pop-icon-bgr-padding: 0 !default;
@@ -21,7 +20,6 @@ $tbar-btn-icn-right-nrml-padding: 0 !default;
 $tbar-rtl-btn-icn-right-nrml-padding: 0 !default;
 $tbar-rtl-btn-icn-right-bgr-padding: 0 !default;
 $tbar-icons-bgr-font-size: 18px !default;
-
 $tbar-separator-bgr-mrgn: 6px 6px !default;
 $tbar-radius: 4px !default;
 $tbar-separator-nrml-mrgn: 7.5px 3px !default;
@@ -59,7 +57,6 @@ $tbar-press-bg: $grey-700 !default;
 $tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $grey-700 !default;
 $tbar-active-bg: rgba($grey-white, .22) !default;
-
 $tbar-nrml-size: 42px !default;
 $tbar-bgr-size: 56px !default;
 $tbar-nrml-items-size: 42px !default;
@@ -76,7 +73,6 @@ $tbar-nav-bgr-width: 40px !default;
 $tbar-popup-padding: 0 !default;
 $tbar-btn-border-radius: 2px !default;
 $tbar-btn-pressed-box-shadow: none !default;
-
 $tbar-item-bgr-padding: 5px !default;
 $tbar-item-nrml-padding: 3.5px !default;
 $btn-txt-nrml-padding: 0 2px 0 2px !default;
@@ -89,7 +85,6 @@ $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-btn-nrml-mrgn: 4px 0 !default;
 $tbar-separator-nrml-mrgn: 7.5px 3px !default;
 $tbar-separator-bgr-mrgn: 10px 5px !default;
@@ -108,7 +103,6 @@ $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: 1px solid $grey-700 !default;
 $tbar-nav-focus-border: 0 !default;
@@ -130,25 +124,20 @@ $tbar-hover-font: $tbar-default-font !default;
 $tbar-default-font-overlay: rgba($grey-dark-font, .3) !default;
 $tbar-active-font-color: $tbar-default-font !default;
 $tbar-press-font: $tbar-default-font !default;
-
 $tbar-pressed-bg: $tbar-hover-bg !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pressed-font: $tbar-hover-font !default;
 $tbar-select-font: $tbar-hover-font !default;
-
 $tbar-default-icon-overlay: rgba($grey-dark-font, .26) !default;
 $tbar-separator-border: rgba($grey-white, .24) !default;
 $tbar-default-border: $grey-700 !default;
 $tbar-btn-border: none !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-nrml-btn-border-radius: 2px !default;
 $tbar-nrml-btn-focus-padding: 0 1.5px !default;
 $tbar-nrml-btn-focus-outline: 0 !default;
-
 $tbar-btn-icons-focus-color: $grey-dark-font !default;
 $tbar-btn-text-focus-color: $grey-dark-font !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
@@ -164,14 +153,12 @@ $tbar-btn-pressed-text-color: $grey-dark-font !default;
 $tbar-btn-pressed-focus-box-shadow: none !default;
 $tbar-btn-pressed-bg: mix($grey-dark-font, transparent, 24%) !default;
 $tbar-flat-btn-active-box-shadow: none !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-border: none !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;
@@ -209,9 +196,6 @@ $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;
-
-//enddefault
-//dimensions
 $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;

package/styles/toolbar/_material-definition.scss

@@ -1,4 +1,3 @@
-/*! component's theme wise override definitions and variables */
 $tbar-skin: 'material' !default;
 $tbar-pop-icon-bgr-padding: 0;
 $tbar-pop-btn-txt-bgr-pad: 0;
@@ -23,7 +22,6 @@ $tbar-radius: 0;
 $tbar-pop-radius: 0;
 $tbar-separator-border-type: $border-type;
 $tbar-pop-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .21);
-
 $tbar-default-bg: $grey-50 !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
 $tbar-pop-bg: $tbar-default-bg !default;
@@ -38,9 +36,7 @@ $tbar-border-radius: $border-radius !default;
 $tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $tbar-border-nav-type: solid !default;
 $tbar-btn-box-shadow: none !default;
-
 $tbar-active-bg: $grey-400 !default;
-
 $tbar-nrml-size: 42px !default;
 $tbar-bgr-size: 56px !default;
 $tbar-nrml-items-size: 42px !default;
@@ -58,7 +54,6 @@ $tbar-nav-bgr-width: 40px !default;
 $tbar-popup-padding: 0 !default;
 $tbar-btn-border-radius: 2px !default;
 $tbar-btn-pressed-box-shadow: none !default;
-
 $tbar-item-bgr-padding: 5px !default;
 $tbar-item-nrml-padding: 3.5px !default;
 $btn-txt-nrml-padding: 0 2px 0 2px !default;
@@ -71,7 +66,6 @@ $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-btn-nrml-mrgn: 4px 0 !default;
 $tbar-separator-nrml-mrgn: 7.5px 3px !default;
 $tbar-separator-bgr-mrgn: 10px 5px !default;
@@ -90,7 +84,6 @@ $tbar-btn-bgr-focus-padding: 0 6px !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-btn-border: none !default;
 $tbar-nav-press-border: 0 !default;
 $tbar-nav-hover-border: 1px solid rgba($grey-black, .12) !default;
@@ -108,7 +101,6 @@ $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;
-
 $tbar-btn-font-size: 14px !default;
 $tbar-btn-txt-font-size: $tbar-btn-font-size !default;
 $tbar-hover-bg: rgba($grey-black, .12) !default;
@@ -121,24 +113,19 @@ $tbar-hover-font: $tbar-default-font !default;
 $tbar-default-font-overlay: rgba($grey-light-font, .38) !default;
 $tbar-active-font-color: $tbar-default-font !default;
 $tbar-press-font: $tbar-default-font !default;
-
 $tbar-pressed-bg: $tbar-hover-bg !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pressed-font: $tbar-hover-font !default;
 $tbar-select-font: $tbar-hover-font !default;
-
 $tbar-default-icon-overlay: rgba($grey-light-font, .26) !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-nrml-btn-border-radius: 2px !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;
@@ -154,14 +141,12 @@ $tbar-btn-pressed-text-color: rgba($grey-black, .87) !default;
 $tbar-btn-pressed-focus-box-shadow: none !default;
 $tbar-btn-pressed-bg: mix($tbar-btn-pressed-text-color, transparent, 24%) !default;
 $tbar-flat-btn-active-box-shadow: none !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-border: none !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;
@@ -199,7 +184,6 @@ $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;

package/styles/toolbar/_material3-definition.scss

@@ -1,20 +1,13 @@
-/*! 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;
@@ -41,8 +34,6 @@ $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: 16px !default;
@@ -78,8 +69,6 @@ $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;
@@ -91,8 +80,6 @@ $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;
@@ -119,8 +106,6 @@ $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;
@@ -141,15 +126,12 @@ $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;
@@ -165,14 +147,12 @@ $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;
@@ -210,7 +190,6 @@ $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: '';
 }

package/styles/toolbar/_tailwind-definition.scss

@@ -18,7 +18,6 @@ $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-items-default-bg: $tbar-default-bg !default;
 $tbar-default-font: $content-text-color !default;
@@ -40,13 +39,11 @@ $tbar-hover-border-color: $icon-color !default;
 $tbar-focus-border-color: $tbar-hover-border-color !default;
 $tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color-alt2 !default;
-
 $tbar-default-font-overlay: $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;
@@ -67,7 +64,6 @@ $tbar-bgr-item-size: 49px !default;
 $tbar-btn-font-size: $text-lg !default;
 $tbar-btn-txt-font-size: $text-sm !default;
 $tbar-item-pop-bg-color: $transparent !default;
-
 $tbar-item-bgr-padding: 5px 6px !default;
 $tbar-item-nrml-padding: 4px !default;
 $tbar-btn-nrml-padding: 0 4px !default;
@@ -85,7 +81,6 @@ $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-pop-bg: $tbar-default-bg !default;
 $tbar-item-pop-nrml-padding: 0 !default;
 $tbar-item-pop-bgr-padding: 0 !default;
@@ -95,7 +90,6 @@ $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: 1px solid $tbar-default-border !default;
 $tbar-nav-focus-border: 0 !default;
@@ -131,15 +125,12 @@ $tbar-multirow-items-mrgn-bigger: 12.5px !default;
 $tbar-multirow-items-mrgn-small: 10px !default;
 $tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
 $tbar-multirow-item-top-btm-mrgn-small: 0 !default;
-
 $tbar-bgr-btn-text-font-size: $text-base !default;
 $tbar-bgr-btn-icon-font-size: $text-lg !default;
 $tbar-bgr-btn-focus-padding: 0 8px !default;
-
 $tbar-nrml-btn-border-radius: 4px !default;
 $tbar-nrml-btn-focus-padding: 0 4px !default;
 $tbar-nrml-btn-focus-outline: 0 !default;
-
 $tbar-btn-icons-focus-color: $icon-color !default;
 $tbar-btn-text-focus-color: $content-text-color !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
@@ -155,14 +146,12 @@ $tbar-btn-pressed-text-color: $secondary-text-color-pressed !default;
 $tbar-btn-pressed-focus-box-shadow: $shadow-sm !default;
 $tbar-btn-pressed-bg: $secondary-bg-color-pressed !default;
 $tbar-flat-btn-active-box-shadow: $shadow-sm !default;
-
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 5px 6px !default;
 $tbar-ext-btn-icon-font-size: $text-base !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-lg !default;
 $tbar-popup-text-btn-icon-padding: 0 !default;
 $tbar-popup-bgr-text-btn-icon-padding: 0 !default;
@@ -200,11 +189,9 @@ $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/_theme.scss

@@ -1,6 +1,4 @@
 @include export-module('toolbar-theme') {
-
-  /*! toolbar theme */
   /* stylelint-disable property-no-vendor-prefix */
   .e-toolbar {
     -webkit-tap-highlight-color: $tbar-tab-highlight-color;
@@ -47,7 +45,13 @@
           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 ($skin-name == 'fluent2') {
+            box-shadow: none;
+          }
+          @else {
+            box-shadow: $tbar-ext-btn-focus-box-shadow;
+          }
 
           .e-icons {
             color: $tbar-btn-icons-focus-color;
@@ -61,6 +65,21 @@
             }
           }
         }
+
+        @if ($skin-name == 'fluent2') {
+          &:focus-visible {
+            background: $tbar-default-bg;
+            box-shadow: $tbar-ext-btn-focus-box-shadow;
+
+            .e-icons {
+              color: $tbar-default-icon-color;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-default-font;
+            }
+          }
+        }
   
         &:hover {
           background: $tbar-hover-bg;
@@ -274,10 +293,31 @@
 
           &:focus {
             background: $tbar-popup-btn-focus-bg;
-            box-shadow: $tbar-popup-btn-focus-box-shadow;
             border-color: $tbar-btn-focus-border-color;
             border-style: $tbar-border-nav-type;
             border-width: $tbar-popup-btn-hover-border-size;
+
+            @if ($skin-name == 'fluent2') {
+              box-shadow: none;
+            }
+            @else {
+              box-shadow: $tbar-popup-btn-focus-box-shadow;
+            }
+          }
+
+          @if ($skin-name == 'fluent2') {
+            &:focus-visible {
+              background: $tbar-popup-btn-focus-bg;
+              box-shadow: $tbar-popup-btn-focus-box-shadow;
+
+              .e-icons {
+                color: $tbar-default-icon-color;
+              }
+
+              .e-tbar-btn-text {
+                color: $tbar-default-font;
+              }
+            }
           }
         }
 
@@ -308,7 +348,28 @@
               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 ($skin-name == 'fluent2') {
+                box-shadow: none;
+              }
+              @else {
+                box-shadow: $tbar-ext-btn-focus-box-shadow;
+              }
+            }
+
+            @if ($skin-name == 'fluent2') {
+              &:focus-visible {
+                background: $tbar-default-bg;
+                box-shadow: $tbar-ext-btn-focus-box-shadow;
+
+                .e-icons {
+                  color: $tbar-default-icon-color;
+                }
+
+                .e-tbar-btn-text {
+                  color: $tbar-default-font;
+                }
+              }
             }
   
             &:hover {