fix(toolbar): wrong or missing toolbar item focus styles

telerik · Oct 7, 2022 · 60fe96b · 60fe96b
1 parent fbb1e69
commit 60fe96b
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 2 deletions.
diff --git a/packages/bootstrap/scss/toolbar/_variables.scss b/packages/bootstrap/scss/toolbar/_variables.scss
@@ -25,3 +25,5 @@ $toolbar-shadow: null !default;
 $toolbar-separator-border: inherit !default;
 
 $toolbar-input-width: 10em !default;
+
+$toolbar-item-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
diff --git a/packages/classic/scss/toolbar/_variables.scss b/packages/classic/scss/toolbar/_variables.scss
@@ -25,3 +25,5 @@ $toolbar-shadow: null !default;
 $toolbar-separator-border: inherit !default;
 
 $toolbar-input-width: 10em !default;
+
+$toolbar-item-shadow: $kendo-button-focus-shadow !default;
diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss
@@ -118,7 +118,8 @@
         }
 
         // Template item
-        .k-toolbar-item:focus {
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
             text-decoration: none;
             outline: 0;
         }

diff --git a/packages/default/scss/toolbar/_theme.scss b/packages/default/scss/toolbar/_theme.scss
@@ -20,7 +20,7 @@
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
-            @include box-shadow( $kendo-button-focus-shadow );
+            @include box-shadow( $toolbar-item-shadow );
         }
 
 

diff --git a/packages/default/scss/toolbar/_variables.scss b/packages/default/scss/toolbar/_variables.scss
@@ -25,3 +25,5 @@ $toolbar-shadow: null !default;
 $toolbar-separator-border: inherit !default;
 
 $toolbar-input-width: 10em !default;
+
+$toolbar-item-shadow: $kendo-button-focus-shadow !default;
diff --git a/packages/fluent/scss/toolbar/_layout.scss b/packages/fluent/scss/toolbar/_layout.scss
@@ -102,6 +102,13 @@
             align-items: center;
         }
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            outline-width: var( --kendo-toolbar-item-focus-outline-width, #{$kendo-toolbar-item-focus-outline-width} );
+            outline-style: var( --kendo-toolbar-item-focus-outline-style, #{$kendo-toolbar-item-focus-outline-style} );
+        }
+
     }
 
     // Toolbar group

diff --git a/packages/fluent/scss/toolbar/_theme.scss b/packages/fluent/scss/toolbar/_theme.scss
@@ -13,6 +13,12 @@
             border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
         }
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            outline-color: var( --kendo-toolbar-item-focus-outline-color, #{$kendo-toolbar-item-focus-outline-color} );
+        }
+
     }
 
     // Overflow container

diff --git a/packages/fluent/scss/toolbar/_variables.scss b/packages/fluent/scss/toolbar/_variables.scss
@@ -38,3 +38,13 @@ $kendo-toolbar-separator-border: get-theme-color-var( neutral-60 ) !default;
 /// The width of the input in the toolbar
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
+
+/// Border width of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-width: 1px !default;
+/// Border style of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-style: solid !default;
+/// Border color of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-color: get-theme-color-var( neutral-130 ) !default;
diff --git a/packages/material/scss/toolbar/_variables.scss b/packages/material/scss/toolbar/_variables.scss
@@ -25,3 +25,5 @@ $toolbar-shadow: $box-shadow-depth-2 !default;
 $toolbar-separator-border: $component-border !default;
 
 $toolbar-input-width: 10em !default;
+
+$toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;