From 6181275b6b21ccfdde267a7ebcbb9ed4278cade9 Mon Sep 17 00:00:00 2001
From: joneff <joneff@gmail.com>
Date: Fri, 7 Sep 2018 21:49:21 +0300
Subject: [PATCH] fix(colorpicker): update colorpicker layout to better match
 material theme

---
 .../default/scss/colorpicker/_layout.scss     |  6 +--
 .../material/scss/colorpicker/_layout.scss    | 40 ++++++++++++++++++-
 .../material/scss/colorpicker/_theme.scss     |  6 ++-
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/default/scss/colorpicker/_layout.scss b/packages/default/scss/colorpicker/_layout.scss
index fbdd0ae9750..cd8a3c74cef 100644
--- 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
index 296fdad7a8b..2f17e2bce18 100644
--- 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";
\ No newline at end of file
+@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
index c215e41e02f..270c5555d75 100644
--- 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 {}
+
+}