fix(coloreditor): add focus for colorgradient inside coloreditor

telerik · Oct 17, 2022 · 13c95e3 · 13c95e3
1 parent 49b209a
commit 13c95e3
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/coloreditor/_variables.scss b/packages/bootstrap/scss/coloreditor/_variables.scss
@@ -25,3 +25,7 @@ $coloreditor-color-preview-height: 12px !default;
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
 $coloreditor-views-gap: $coloreditor-spacer !default;
+
+$coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$coloreditor-colorgradient-focus-outline: 2px !default;
+$coloreditor-colorgradient-focus-outline-offset: 2px !default;
diff --git a/packages/classic/scss/coloreditor/_variables.scss b/packages/classic/scss/coloreditor/_variables.scss
@@ -25,3 +25,7 @@ $coloreditor-color-preview-height: 12px !default;
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
 $coloreditor-views-gap: $coloreditor-spacer !default;
+
+$coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$coloreditor-colorgradient-focus-outline: 2px !default;
+$coloreditor-colorgradient-focus-outline-offset: 4px !default;
diff --git a/packages/default/scss/coloreditor/_layout.scss b/packages/default/scss/coloreditor/_layout.scss
@@ -56,6 +56,12 @@
             width: auto;
             border-width: 0;
         }
+        .k-colorgradient:focus,
+        .k-colorgradient.k-focus {
+            outline: $coloreditor-colorgradient-focus-outline dotted;
+            outline-offset: $coloreditor-colorgradient-focus-outline-offset;
+            border-radius: 0;
+        }
 
         .k-colorpalette {
             align-self: center;

diff --git a/packages/default/scss/coloreditor/_theme.scss b/packages/default/scss/coloreditor/_theme.scss
@@ -15,4 +15,10 @@
         @include box-shadow( $coloreditor-focus-shadow );
     }
 
+    .k-coloreditor .k-colorgradient:focus,
+    .k-coloreditor .k-colorgradient.k-focus {
+        box-shadow: none;
+        outline-color: $coloreditor-colorgradient-focus-outline-color;
+    }
+
 }
diff --git a/packages/default/scss/coloreditor/_variables.scss b/packages/default/scss/coloreditor/_variables.scss
@@ -25,3 +25,7 @@ $coloreditor-color-preview-height: 12px !default;
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
 $coloreditor-views-gap: $coloreditor-spacer !default;
+
+$coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$coloreditor-colorgradient-focus-outline: 2px !default;
+$coloreditor-colorgradient-focus-outline-offset: 4px !default;
diff --git a/packages/default/scss/colorgradient/_layout.scss b/packages/default/scss/colorgradient/_layout.scss
@@ -49,7 +49,7 @@
             position: absolute;
             top: 50%;
             left: 50%;
-            z-index: 10;
+            z-index: 1;
             cursor: pointer;
         }
 

diff --git a/packages/fluent/scss/coloreditor/_layout.scss b/packages/fluent/scss/coloreditor/_layout.scss
@@ -25,6 +25,13 @@
             }
         }
 
+        .k-coloreditor .k-colorgradient:focus,
+        .k-coloreditor .k-colorgradient.k-focus {
+            outline: var( --kendo-coloreditor-colorgradient-focus-outline, #{$kendo-coloreditor-colorgradient-focus-outline} ) dotted;
+            outline-offset: var( --kendo-coloreditor-colorgradient-focus-outline-offset, #{$kendo-coloreditor-colorgradient-focus-outline-offset} );
+            border-radius: 0;
+        }
+
         // Header
         .k-coloreditor-header {
             padding-inline: var( --kendo-coloreditor-header-padding-x, #{$kendo-coloreditor-header-padding-x} );

diff --git a/packages/fluent/scss/coloreditor/_theme.scss b/packages/fluent/scss/coloreditor/_theme.scss
@@ -24,4 +24,9 @@
         );
     }
 
+    .k-coloreditor .k-colorgradient:focus,
+    .k-coloreditor .k-colorgradient.k-focus {
+        box-shadow: none;
+        outline-color: var( --kendo-coloreditor-colorgradient-focus-outline-color, #{$kendo-coloreditor-colorgradient-focus-outline-color} );
+    }
 }
diff --git a/packages/fluent/scss/coloreditor/_variables.scss b/packages/fluent/scss/coloreditor/_variables.scss
@@ -81,3 +81,13 @@ $kendo-coloreditor-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the color editor footer.
 /// @group coloreditor
 $kendo-coloreditor-footer-padding-x: map-get( $kendo-spacing, 2 ) !default;
+
+/// The color of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
+/// The outline of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline: 2px !default;
+/// The outline offset of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline-offset: 2px !default;
diff --git a/packages/material/scss/coloreditor/_variables.scss b/packages/material/scss/coloreditor/_variables.scss
@@ -25,3 +25,7 @@ $coloreditor-color-preview-height: 12px !default;
 $coloreditor-views-padding-y: $coloreditor-spacer !default;
 $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
 $coloreditor-views-gap: $coloreditor-spacer !default;
+
+$coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$coloreditor-colorgradient-focus-outline: 2px !default;
+$coloreditor-colorgradient-focus-outline-offset: 2px !default;