fix(colorpicker): input cut off in bootstrap theme

telerik · Oct 9, 2019 · 91bd81a · 91bd81a
1 parent 4e6c49e
commit 91bd81a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -248,6 +248,8 @@ $colorpicker-slider-track-size: 10px !default;
 $colorpicker-slider-border-radius: 10px !default;
 $colorpicker-input-width: 52px !default;
 $colorpicker-hex-input-width: 85px !default;
+$colorpicker-input-padding-x: $input-padding-y !default;
+$colorpicker-input-padding-y: $input-padding-y !default;
 
 
 $list-item-padding-x: $dropdown-item-padding-x !default;

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -215,6 +215,8 @@ $colorpicker-slider-track-size: 10px !default;
 $colorpicker-slider-border-radius: 10px !default;
 $colorpicker-hex-input-width: 65px !default;
 $colorpicker-input-width: 48px !default;
+$colorpicker-input-padding-x: $input-padding-y !default;
+$colorpicker-input-padding-y: $input-padding-y !default;
 
 
 // Theme colors

diff --git a/packages/default/scss/colorpicker/_layout.scss b/packages/default/scss/colorpicker/_layout.scss
@@ -251,6 +251,11 @@
         .k-gradient-values {
             justify-content: space-between;
 
+            .k-input,
+            .k-textbox {
+                padding: $colorpicker-input-padding-y $colorpicker-input-padding-x;
+            }
+
             div,
             input,
             .k-numerictextbox {
@@ -265,6 +270,11 @@
                 width: $colorpicker-hex-input-width;
             }
         }
+        .k-numerictextbox {
+            .k-input {
+                text-overflow: clip;
+            }
+        }
 
 
         // Selected color

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -220,6 +220,8 @@ $colorpicker-slider-track-size: 10px !default;
 $colorpicker-slider-border-radius: 10px !default;
 $colorpicker-input-width: 50px !default;
 $colorpicker-hex-input-width: 70px !default;
+$colorpicker-input-padding-x: $input-padding-x !default;
+$colorpicker-input-padding-y: $input-padding-y !default;
 
 $list-item-padding-x: $padding-x * 1.5 !default;
 $list-item-padding-y: $padding-y / 2 !default;