fix(colorpicker): update colorpicker layout to better match material …

…theme
telerik · Sep 10, 2018 · 6181275 · 6181275
1 parent 4457c6f
commit 6181275
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/packages/default/scss/colorpicker/_layout.scss b/packages/default/scss/colorpicker/_layout.scss
@@ -35,7 +35,7 @@
             padding: $button-padding-y;
             width: button-inner-size();
             height: button-inner-size();
-            border-width: 0 1px 0 0;
+            border-width: 0 $picker-button-border-width 0 0;
             border-style: solid;
             border-color: inherit;
             box-sizing: border-box;
@@ -48,12 +48,12 @@
             }
 
             .k-selected-color {
-                display: inline-block;
+                margin: 0 0 12px;
                 padding: 0;
-                margin-bottom: 12px;
                 width: 14px;
                 height: 3px;
                 line-height: 0;
+                display: inline-block;
             }
         }
 

diff --git a/packages/material/scss/colorpicker/_layout.scss b/packages/material/scss/colorpicker/_layout.scss
@@ -1 +1,39 @@
-@import "~@progress/kendo-theme-default/scss/colorpicker/layout";
+@import "~@progress/kendo-theme-default/scss/colorpicker/layout";
+
+@include exports( "colorpicker/layout/material" ) {
+
+    .k-colorpicker {
+
+        // Selected color
+        .k-selected-color {
+            margin: 8px;
+            padding: 0;
+            border: 1px solid rgba( 0,0,0, .08 );
+            width: ($button-line-height * 1em);
+            height: ($button-line-height * 1em);
+            overflow: visible;
+
+            .k-i-line {
+                width: 1em;
+                height: 1em;
+                border: 0;
+                font-size: 32px;
+                transform: translate(-50%, -50%);
+            }
+            .k-i-line::before {
+                content: "\e514";
+                display: inline;
+            }
+        }
+
+        .k-tool-icon {
+            .k-selected-color {
+                width: ($button-line-height * 1em);
+                height: 4px;
+                line-height: 0;
+                display: inline-block;
+            }
+        }
+
+    }
+}
diff --git a/packages/material/scss/colorpicker/_theme.scss b/packages/material/scss/colorpicker/_theme.scss
@@ -1 +1,5 @@
-@import "~@progress/kendo-theme-default/scss/colorpicker/theme";
+@include exports( "colorpicker/theme" ) {
+
+    .k-colorpicker {}
+
+}