github/elm-mdl
1
0
Fork 0
mirror of https://github.com/correl/elm-mdl.git synced 2024-12-18 11:06:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added Material.elm

Browse source
This commit is contained in:
Søren Debois 2016-03-14 10:42:49 +01:00
parent c06b99e723
commit 2fff28d110
1 changed files with 119 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
Material.elm Normal file
View file

@ -0,0 +1,119 @@
module Material
( Color(..), topWithColors, top
) where
{-| Material Design component library for Elm based on Google's
[Material Design Lite](https://www.getmdl.io/).
@docs Color, topWithColors, top
-}
import String
import Html exposing (..)
import Html.Attributes exposing (..)
{-| Possible colors for color scheme.
-}
type Color
= Indigo
| Blue
| LightBlue
| Cyan
| Teal
| Green
| LightGreen
| Lime
| Yellow
| Amber
| Orange
| Brown
| BlueGrey
| Grey
| DeepOrange
| Red
| Pink
| Purple
| DeepPurple
toString : Color -> String
toString color =
case color of
Indigo -> "indigo"
Blue -> "blue"
LightBlue -> "light-blue"
Cyan -> "cyan"
Teal -> "teal"
Green -> "green"
LightGreen -> "light-green"
Lime -> "lime"
Yellow -> "yellow"
Amber -> "amber"
Orange -> "orange"
Brown -> "brown"
BlueGrey -> "blue-grey"
Grey -> "grey"
DeepOrange -> "deep-orange"
Red -> "red"
Pink -> "pink"
Purple -> "purple"
DeepPurple -> "deep-purple"
css : Color -> Color -> String
css primary accent =
let cssFile =
case accent of
Grey -> ""
Brown -> ""
BlueGrey -> ""
_ -> "." ++ toString primary ++ "-" ++ toString accent
in
[ "https://code.getmdl.io/1.1.1/material" ++ cssFile ++ ".min.css"
, "https://fonts.googleapis.com/icon?family=Material+Icons"
, "https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext"
]
|> List.map (\url -> "@import url(" ++ url ++ ");")
|> String.join "\n"
{-| Top-level container for Material components. This will force loading of
Material Design Lite CSS files. Any component you use must be contained
in this container, OR you must manually add something like the following to
your .html file:
<!-- MDL -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.min.css" />
Supply primary and accent colors as parameters. Refer to the
Material Design Lite [Custom CSS theme builder](https://www.getmdl.io/customize/index.html)
to preview combinations.
Please be aware that Grey, Blue Grey, and Brown cannot be secondary colors. If
you choose them as such anyway, you will get the default theme.
-}
topWithColors : Color -> Color -> Html -> Html
topWithColors primary accent content =
div [] <|
{- Trick from Peter Damoc to load CSS outside of <head>.
https://github.com/pdamoc/elm-mdl/blob/master/src/Mdl.elm#L63
-}
[ node "style"
[ type' "text/css"]
[ text <| css primary accent]
, content
]
{-| Top-level container with default color scheme.
-}
top : Html -> Html
top content =
-- Force default color-scheme by picking an invalid combination.
topWithColors Grey Grey content