Made proper elevation constructors.

demo/Demo/Elevation.elm

@@ -2,7 +2,7 @@ module Demo.Elevation where
 
 import Html exposing (..)
 
-import Material.Style as Style exposing (cs, css)
+import Material.Style as Style exposing (cs, css, Style)
 import Material.Elevation as Elevation
 
 import Demo.Page as Page
@@ -11,21 +11,23 @@ import Demo.Page as Page
 -- VIEW
 
 
-elevate : Int -> Html 
+elevate : (Style, Int) -> Html 
-elevate k = 
+elevate (e, k) = 
   Style.div 
     [ css "height" "96px"
     , css "width"  "128px"
     , css "margin" "40px"
+    -- Center
     , css "display" "inline-flex"
     , css "flex-flow" "row wrap" 
     , css "justify-content" "center"
     , css "align-items" "center"
-    , Elevation.shadow k
+    , e
     ]
     [ Style.div 
       [ cs ".mdl-typography--title-color-contrast" 
         -- TODO. Typography!
+      , css "box-radius" "2pt"
       ] 
       [ text <| toString k ]
     ]
@@ -33,7 +35,7 @@ elevate k =
 
 view : Html
 view =
-  0 :: Elevation.validElevations
+  (cs "", 0) :: Elevation.elevations
   |> List.map elevate 
   |> (::) ( p [] [ text """Below are boxes drawn at various elevations.""" ] )
   |> Page.body1 "Elevation" srcUrl intro references

demo/Demo/Snackbar.elm

@@ -12,7 +12,7 @@ import Material.Style exposing (styled, cs, css)
 import Material.Snackbar as Snackbar
 import Material.Button as Button exposing (Action(..))
 import Material.Grid exposing (..)
-import Material.Elevation as Elevation
+import Material.Elevation exposing (e2, e8)
 import Material 
 
 import Demo.Page as Page
@@ -236,7 +236,7 @@ clickView model (k, square) =
       [ styled div
           [ Color.background color
           , Color.text Color.primaryContrast
-          , Elevation.shadow (if selected then 8 else 2)
+          , if selected then e8 else e2
           ] 
           [ style
               [ -- Center contents

src/Material/Elevation.elm

@@ -1,10 +1,9 @@
 module Material.Elevation
-  ( shadow
+  ( e2, e3, e4, e6, e8, e16, e24 
-  , validElevations
+  , elevations
   , transition
   ) where
 
-
 {-| From the [Material Design Lite documentation](https://github.com/google/material-design-lite/blob/master/src/shadow/README.md)
 
 > The Material Design Lite (MDL) shadow is not a component in the same sense as
@@ -36,14 +35,19 @@ Refer to
 for a live demo. 
   
 
-# Component
+# Elevations
-@docs shadow, validElevations, transition
+Each of the values below denote an elevation of a certain heigh, e.g., 
+`e4` will cast a shadow indicating an elevation of 4dp. 
+@docs e2, e3, e4, e6, e8, e16, e24
+@docs elevations
+
+# Transitions
+@docs transition
 
 -}
 
 import Material.Style exposing (..)
 
-
 {-| Indicate the elevation of an element by giving it a shadow. 
 The argument indicates intended elevation; valid values 
 are 2, 3, 4, 6, 8, 16, 24. Invalid values produce no shadow. 
@@ -56,11 +60,59 @@ shadow z =
   cs ("mdl-shadow--" ++ toString z ++ "dp")
 
 
-{-| Programmatically accessible valid elevations for `shadow`.
+{-|
 -}
-validElevations : List Int 
+e2 : Style
-validElevations = 
+e2 = shadow 2
-  [ 2, 3, 4, 6, 8, 16, 24 ] 
+
+
+{-|
+-}
+e3 : Style
+e3 = shadow 3
+
+
+{-|
+-}
+e4 : Style
+e4 = shadow 4
+
+{-|
+-}
+e6 : Style
+e6 = shadow 6
+
+
+{-|
+-}
+e8 : Style
+e8 = shadow 8
+
+
+{-|
+-}
+e16 : Style
+e16 = shadow 16
+
+
+{-|
+-}
+e24 : Style
+e24 = shadow 24
+
+
+{-| List of all elevations and their depth in dp. 
+-}
+elevations : List (Style, Int)
+elevations = 
+  [ (e2, 2)
+  , (e3, 3)
+  , (e4, 4)
+  , (e6, 6)
+  , (e8, 8)
+  , (e16, 16)
+  , (e24, 24)
+  ]
 
 
 {-| Add a CSS-transition to changes in elevation. Supply a transition