Added Style to Layout content builders. Closes #24.

demo/Demo.elm

@@ -161,13 +161,16 @@ type alias Addr =
 
 drawer : List Html
 drawer =
-  [ Layout.title "Example drawer"
+  [ Layout.title [] [ text "Example drawer" ]
   , Layout.navigation
+    [] 
     [ Layout.link
-        [ href "https://github.com/debois/elm-mdl" ]
+        [ Style.attribute 
+            <| href "https://github.com/debois/elm-mdl" ]
         [ text "github" ]
     , Layout.link
-        [ href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/" ]
+        [ Style.attribute 
+            <| href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/" ]
         [ text "elm-package" ]
     ]
   ]
@@ -176,15 +179,18 @@ drawer =
 header : List Html
 header =
   [ Layout.row 
-    [ Layout.title "elm-mdl"
+      []
+      [ Layout.title [] [ text "elm-mdl" ]
       , Layout.spacer
-    , Layout.navigation
+      , Layout.navigation []
           [ Layout.link
-        [href "https://github.com/debois/elm-mdl"]
+            [ Style.attribute 
-        [span [] [text "github"] ]
+               <| href "https://github.com/debois/elm-mdl"]
+            [ span [] [text "github"] ]
           , Layout.link 
-        [href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/"]
+              [ Style.attribute 
-        [text "elm-package"]
+                  <| href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/" ]
+              [ text "elm-package" ]
           ]
       ]
   ]
@@ -215,7 +221,6 @@ e404 _ _ =
         [ Style.cs "mdl-typography--display-4" 
         , Color.background Color.primary 
         ]
-        []
         [ text "404" ]
     ]
 
@@ -287,7 +292,7 @@ view addr model =
     Layout.view (Signal.forwardTo addr LayoutAction) model.layout
       { header = header
       , drawer = drawer
-      , tabs = tabTitles
+      , tabs = (tabTitles, [ Color.background (Color.color Color.Teal Color.S400) ])
       , main = [ stylesheet, top ]
       }
     {- The following line is not needed when you manually set up

demo/Demo/Badges.elm

@@ -39,7 +39,7 @@ view =
             [ Badge.withBadge "♥" ]  
             [ text "Symbol" ]
           ]
-      , c [ Icon.view "flight_takeoff" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] [] ]
+      , c [ Icon.view "flight_takeoff" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] ]
       ]
   ]
   |> Page.body2 "Badges" srcUrl intro references

demo/Demo/Page.elm

@@ -92,7 +92,6 @@ title t =
     --, cs "mdl-typography--display-4" 
     -- TODO. Typography module
     ]
-    []
     [ text t ]
 
 

demo/Demo/Snackbar.elm

@@ -8,7 +8,7 @@ import Time exposing (Time, millisecond)
 
 import Material.Helpers exposing (map1st, map2nd, pure, delay)
 import Material.Color as Color
-import Material.Style exposing (styled, cs, css)
+import Material.Style as Style exposing (cs, css, Style)
 import Material.Snackbar as Snackbar
 import Material.Button as Button exposing (Action(..))
 import Material.Grid exposing (..)
@@ -169,22 +169,20 @@ transitionLength : Time
 transitionLength = 150 * millisecond
 
 
-transitionInner : (String, String)
+transitionInner : Style
 transitionInner = 
-  ("transition"
+  css "transition"
-  , "box-shadow 333ms ease-in-out 0s, " 
+    <| "box-shadow 333ms ease-in-out 0s, " 
     ++ "width " ++ toString transitionLength ++ "ms, " 
     ++ "height " ++ toString transitionLength ++ "ms, "
     ++ "background-color " ++ toString transitionLength ++ "ms"
-  )
 
 
-transitionOuter : (String, String)
+transitionOuter : Style
 transitionOuter = 
-  ("transition"
+  css "transition" 
-  , "width " ++ toString transitionLength ++ "ms ease-in-out 0s, "
+    <| "width " ++ toString transitionLength ++ "ms ease-in-out 0s, "
     ++ "margin " ++ toString transitionLength ++ "ms ease-in-out 0s"
-  )
 
 
 clickView : Model -> Square -> Html
@@ -220,43 +218,39 @@ clickView model (k, square) =
     (which animates only width, to cause reflow of surrounding boxes), 
     and an absolutely positioned inner div (to force animation to start
     in the lower-left corner. -}
-    div 
+    Style.div 
-      [ style 
+      [ css "height" boxHeight
-          [ ("height", boxHeight)
+      , css "width" width
-          , ("width", width)
+      , css "position" "relative"
-          , ("position", "relative")
+      , css "display" "inline-block"
-          , ("display", "inline-block")
+      , css "margin" margin
-          , ("margin", margin)
+      , css "z-index" "0"
-          , ("z-index", "0")
       , transitionOuter
+      , Style.attribute (key <| toString k)
+        {- Interestingly, not setting key messes up CSS transitions in
+        spectacular ways. -}
       ]
-      , key <| toString k
+      [ Style.div
-        {- Interestingly, not setting key messes up CSS transitions in spectacular ways. -}
-      ]
-      [ styled div
           [ Color.background color
           , Color.text Color.primaryContrast
           , if selected then e8 else e2
-          ] 
+            -- Center contents
-          [ style
+          , css "display" "inline-flex"
-              [ -- Center contents
+          , css "align-items" "center"
-                ("display", "inline-flex")
+          , css "justify-content" "center"
-              , ("align-items", "center")
+          , css "flex" "0 0 auto"
-              , ("justify-content", "center")
-              , ("flex", "0 0 auto")
              -- Sizing
-              , ("height", height)
+          , css "height" height
-              , ("width", width)
+          , css "width" width
-              , ("border-radius", "2px")
+          , css "border-radius" "2px"
-              , ("box-sizing", "border-box")
+          , css "box-sizing" "border-box"
              -- Force appearance/disapparenace to be from/to lower-left corner. 
-              , ("position", "absolute")
+          , css "position" "absolute"
-              , ("bottom", "0")
+          , css "bottom" "0"
-              , ("left", "0")
+          , css "left" "0"
              -- Transitions
           ,  transitionInner
           ]
-          ]
           [ div [] [ text <| toString k ] ]
         ]
 

src/Material/Button.elm

@@ -60,7 +60,7 @@ import Effects exposing (Effects, none)
 import Signal exposing (Address, forwardTo)
 
 import Material.Helpers as Helpers
-import Material.Style exposing (Style, cs, cs', styled)
+import Material.Style as Style exposing (Style, cs, cs', styled)
 import Material.Ripple as Ripple
 import Material.Component as Component exposing (Indexed)
 
@@ -147,12 +147,11 @@ view kind addr model styling html =
     :: cs "mdl-js-button"
     :: cs' "mdl-js-ripple-effect" (model /= S Nothing)
     :: cs' kind (kind /= "")
+    :: Style.attribute (Helpers.blurOn "mouseup")
+    :: Style.attribute (Helpers.blurOn "mouseleave")
+    :: Style.attribute (Html.Events.onClick addr Click)
     :: styling
     )
-    [ Helpers.blurOn "mouseup"
-    , Helpers.blurOn "mouseleave"
-    , Html.Events.onClick addr Click
-    ]
     (case model of
       S (Just ripple) ->
         Ripple.view

src/Material/Grid.elm

@@ -93,7 +93,7 @@ maxWidth w = Style.css "max-width" w
 -}
 grid : List Style -> List Cell -> Html
 grid styling cells =
-  styled div (cs "mdl-grid" :: styling) [] (List.map (\(Cell elm) -> elm) cells)
+  Style.div (cs "mdl-grid" :: styling) (List.map (\(Cell elm) -> elm) cells)
 
 
 {-| Device specifiers, used with `size` and `offset`. (A `Device` really
@@ -184,4 +184,4 @@ module defines various styles to set size, offset, etc. of the cell.
 -}
 cell : List Style -> List Html -> Cell
 cell styling elms =
-  Cell (styled div (cs "mdl-cell" :: styling) [] elms)
+  Cell (Style.div (cs "mdl-cell" :: styling) elms)

src/Material/Icon.elm

@@ -64,13 +64,12 @@ produce clickable icons; use icon buttons in Material.Button.icon for that.
     icon : Html
     icon = Icon.view "trending_flat" [Icon.size48] []
 -}
-view : String -> List Style -> List Attribute -> Html
+view : String -> List Style -> Html
-view name styling attrs =
+view name styling =
   styled Html.i
     (  cs "material-icons"
     :: styling
     )
-    attrs
     [text name]
 
   
@@ -86,4 +85,4 @@ I.e., to produce a default size (24xp) "trending flat" icon:
     icon = Icon.i "trending_flat"
 -}
 i : String -> Html
-i name = view name [] []
+i name = view name []

src/Material/Layout.elm

@@ -56,6 +56,7 @@ import Window
 import Material.Helpers exposing (..)
 import Material.Ripple as Ripple
 import Material.Icon as Icon
+import Material.Style as Style exposing (Style, cs, cs')
 
 import DOM
 
@@ -265,29 +266,30 @@ spacer = div [class "mdl-layout-spacer"] []
 
 {-| Title in header row or drawer.
 -}
-title : String -> Html
+title : List Style -> List Html -> Html
-title t = span [class "mdl-layout__title"] [text t]
+title styles = 
+  Style.span (cs "mdl-layout__title" :: styles) 
 
 
 {-| Container for links.
 -}
-navigation : List Html -> Html
+navigation : List Style -> List Html -> Html
-navigation contents =
+navigation styles contents =
   nav [class "mdl-navigation"] contents
 
 
 {-| Link.
 -}
-link : List Attribute -> List Html -> Html
+link : List Style -> List Html -> Html
-link attrs contents =
+link styles contents =
-  a (class "mdl-navigation__link" :: attrs) contents
+  Style.styled a (cs "mdl-navigation__link" :: styles) contents
 
 
 {-| Header row. 
 -}
-row : List Html -> Html
+row : List Style -> List Html -> Html
-row = 
+row styles = 
-  div [ class "mdl-layout__header-row" ] 
+  Style.div (cs "mdl-layout__header-row" :: styles) 
 
 
 -- MAIN VIEWS
@@ -327,8 +329,8 @@ toList x =
     Just y -> [y]
 
 
-tabsView : Addr -> Model -> List Html -> Html
+tabsView : Addr -> Model -> (List Html, List Style) -> Html
-tabsView addr model tabs =
+tabsView addr model (tabs, tabStyles) =
   let chevron direction offset =
         div
           [ classList
@@ -336,22 +338,25 @@ tabsView addr model tabs =
               , ("mdl-layout__tab-bar-" ++ direction ++ "-button", True)
               ]
           ]
-          [ Icon.view ("chevron_" ++ direction) [Icon.size24]
+          [ Icon.view ("chevron_" ++ direction) 
-              [onClick addr (ScrollTab offset)]
+              [ Icon.size24
+              , Style.attribute <| onClick addr (ScrollTab offset)
+              ]
               -- TODO: Scroll event
           ]
   in
-    div
+    Style.div
-      [ class "mdl-layout__tab-bar-container"]
+      ( cs "mdl-layout__tab-bar-container"
+      :: []
+      )
       [ chevron "left" -100
-      , div
+      , Style.div
-          [ classList
+          (  cs "mdl-layout__tab-bar" 
-              [ ("mdl-layout__tab-bar", True)
+          :: cs' "mdl-js-ripple-effect" model.rippleTabs
-              , ("mdl-js-ripple-effect", model.rippleTabs)
+          :: cs' "mds-js-ripple-effect--ignore-events" model.rippleTabs
-              , ("mds-js-ripple-effect--ignore-events", model.rippleTabs)
+          :: cs' "is-casting-shadow"  (model.mode == Standard)
-              , ("is-casting-shadow", model.mode == Standard)
+          :: tabStyles
-              ]
+          )
-          ]
           (tabs |> List.indexedMap (\tabIndex tab ->
             filter a
               [ classList
@@ -378,7 +383,6 @@ tabsView addr model tabs =
 headerView : Addr -> Model -> (Maybe Html, List Html, Maybe Html) ->  Html
 headerView addr model (drawerButton, rows, tabs) =
   let 
-    _ = Debug.log "foo" model.state
     mode =
       case model.mode of
         Standard  -> ""
@@ -466,7 +470,7 @@ the title of each tab.
 type alias Contents =
   { header : List Html
   , drawer : List Html
-  , tabs : List Html
+  , tabs : (List Html, List Style)
   , main : List Html
   }
 
@@ -490,11 +494,14 @@ view addr model { drawer, header, tabs, main } =
           -- No drawer: no button.
            (Nothing, Nothing)
 
+    hasTabs = 
+      not (List.isEmpty (fst tabs))
+
     hasHeader = 
-      not (List.isEmpty tabs && List.isEmpty header)
+      hasTabs || (not (List.isEmpty header))
 
     tabsElems = 
-      if List.isEmpty tabs then 
+      if not hasTabs then
         Nothing
       else 
         Just (tabsView addr model tabs)
@@ -511,11 +518,11 @@ view addr model { drawer, header, tabs, main } =
             , ("is-upgraded", True)
             , ("is-small-screen", (s model).isSmallScreen)
             , ("has-drawer", drawer /= [])
-            , ("has-tabs", tabs /= [])
+            , ("has-tabs", hasTabs)
             , ("mdl-js-layout", True)
             , ("mdl-layout--fixed-drawer", model.fixedDrawer && drawer /= [])
             , ("mdl-layout--fixed-header", model.fixedHeader && hasHeader)
-            , ("mdl-layout--fixed-tabs", model.fixedTabs && tabs /= [])
+            , ("mdl-layout--fixed-tabs", model.fixedTabs && hasTabs)
             ]
         ]
         [ if hasHeader then

src/Material/Style.elm

@@ -76,21 +76,18 @@ from a List Style. Use like this:
     myDiv =
       styled div
         [ css "classA", css "classB" ]
-        [ {- onClick ... (*) -} ]
         [ text "This is my div with classes classA and classB!" ]
 
-Note that if you do specify `style`, `class`, or `classList` attributes in
-(*), they will be discarded.
 -}
-styled : (List Attribute -> a) -> List Style -> List Attribute -> a
+styled : (List Attribute -> a) -> List Style -> a
-styled ctor styles attrs' = 
+styled ctor styles = 
   let
       { classes, css, attrs }  = collect styles
   in
     ctor
       (  Html.Attributes.style css
       :: Html.Attributes.class (String.join " " classes)
-      :: List.append attrs attrs'
+      :: attrs
       )
 
 
@@ -108,7 +105,7 @@ div element. Use like this:
 -}
 div : List Style -> List Html -> Html
 div styles elems = 
-  styled Html.div styles [] elems
+  styled Html.div styles elems
 
 
 {-| Convenience function for the reasonably common case of setting attributes
@@ -116,7 +113,7 @@ of a span element. See also `div`.
 -}
 span : List Style -> List Html -> Html
 span styles elems = 
-  styled Html.span styles [] elems
+  styled Html.span styles elems
 
 
 {-| Add a HTML class to a component. (Name chosen to avoid clashing with