From 005ac939b11b2ffa601cd3053288fa3ac0e0d432 Mon Sep 17 00:00:00 2001
From: Keegan <keegan@lillo.me>
Date: Mon, 14 Mar 2016 01:01:58 +1100
Subject: [PATCH] Refine color picker styles

---
 src/styles/clay/_base.scss            |  1 +
 src/styles/clay/_vars.scss            |  5 ++---
 src/styles/clay/components/color.scss | 21 ++++++++++++++-------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss
index caea5e5..1e5074a 100644
--- a/src/styles/clay/_base.scss
+++ b/src/styles/clay/_base.scss
@@ -107,6 +107,7 @@ label {
 
 .tap-highlight {
   @include tap-highlight();
+  border-radius: $border-radius;
 }
 
 .component {
diff --git a/src/styles/clay/_vars.scss b/src/styles/clay/_vars.scss
index acb1d5e..a6a11ed 100644
--- a/src/styles/clay/_vars.scss
+++ b/src/styles/clay/_vars.scss
@@ -11,8 +11,6 @@ $item-spacing-v: $base-height / 2;
 $item-spacing-h: 0.75rem;
 $small-component-width: $base-height * $golden;
 
-
-
 // ---- Colors ------
 $color-orange: #ff4700;
 $color-orange-dark: #993d19;
@@ -37,4 +35,5 @@ $color-gray-11: #f2f2f2;
 $button-padding: 0.6rem;
 $button-padding-ios: 0.5rem;
 
-$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;
+$box-shadow-small-components: 0 0.1rem 0.1rem $color-gray-1;
+$box-shadow-large-components: 0 rem(3px) rem(15px) rgba(0,0,0,0.4);
diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss
index a6c2752..c1db27a 100644
--- a/src/styles/clay/components/color.scss
+++ b/src/styles/clay/components/color.scss
@@ -20,17 +20,25 @@
     right: 0;
     bottom: 0;
     position: fixed;
-    padding: 1rem;
-    background: rgba(0,0,0,0.7);
+    padding: $item-spacing-v $item-spacing-h /2;
+    background: rgba(0, 0, 0, 0.65);
     opacity: 0;
-    transition: opacity 70ms ease-in 175ms;
+    transition: opacity 100ms ease-in 175ms;
     pointer-events: none;
     z-index: 100;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
     .picker {
-      padding: 1rem;
-      background: $color-gray-11;
+      padding: $item-spacing-v $item-spacing-h;
+      background: $color-gray-4;
+      box-shadow: $box-shadow-large-components;
       border-radius: $border-radius;
+      width: 100%;
+      max-width: 26rem;
+      overflow: auto;
     }
 
     &.show {
@@ -46,7 +54,6 @@
     height: 0;
     width: 100%;
     padding: 0 0 100% 0; // overridden with inline style
-    margin: 0.6em 0 0;
 
     .color-box-container {
       position: absolute;
@@ -77,7 +84,7 @@
         }
 
         &.selected {
-          transform: scale(1.15);
+          transform: scale(1.1);
           border-radius: $border-radius;
           box-shadow: #111 0 0 0.24rem;
           position: relative;