feat(button): extract focus ring opacity variable

telerik · Jan 4, 2023 · f6098db · f6098db
1 parent 4344578
commit f6098db
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the button.
 /// @group button

diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the flat button.
 /// @group button

diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
@@ -181,7 +181,7 @@
 
         &:focus::after,
         &.k-focus::after {
-            opacity: .12;
+            opacity: $kendo-flat-button-focus-ring-opacity;
         }
     }
 

diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the flat button.
 /// @group button

diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .22 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: null !default;
 
 /// The transition of the button.
 /// @group button