Style Ui.ColorPicker and Ui.ColorPanels aplha elements (color box and…

… alpha slider).
gdotdesign · Feb 7, 2017 · fb741fd · fb741fd
1 parent 4554a50
commit fb741fd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/source/Ui/Styles/ColorPanel.elm b/source/Ui/Styles/ColorPanel.elm
@@ -113,7 +113,13 @@ style theme =
         ]
 
       , selector "ui-color-panel-alpha"
-        [ borderRadius theme.borderRadius
+        [ backgroundColor "#DDD"
+        , property "background-image"
+           ( "linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5),"
+            ++ "linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5)" )
+        , property "background-position" "0 0, 9px 9px"
+        , property "background-size" "18px 18px"
+        , borderRadius theme.borderRadius
         , position relative
         , cursor colResize
         , flex_ "0 0 16px"

diff --git a/source/Ui/Styles/ColorPicker.elm b/source/Ui/Styles/ColorPicker.elm
@@ -37,4 +37,34 @@ style theme =
     , selector "ui-color-picker-text"
       [ Mixins.ellipsis
       ]
+
+    , selector "ui-color-picker-rect"
+      [ backgroundColor "#DDD"
+      , property "background-image"
+         ( "linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5),"
+          ++ "linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5)" )
+      , property "background-position" "0 0, 9px 9px"
+      , property "background-size" "18px 18px"
+      , borderRadius theme.borderRadius
+      , position absolute
+      , display flex
+      , width (px 36)
+      , bottom (px 5)
+      , right (px 4)
+      , top (px 4)
+
+      , selector "ui-color-picker-background"
+        [ boxShadow
+          [ { color = "rgba(0,0,0,0.2)"
+            , spread = (px 1)
+            , blur = (px 1)
+            , inset = True
+            , y = zero
+            , x = zero
+            }
+          ]
+        , borderRadius theme.borderRadius
+        , flex_ "1"
+        ]
+      ]
     ]