diff options
author | Joris | 2017-09-24 22:14:48 +0200 |
---|---|---|
committer | Joris | 2017-11-07 09:33:01 +0100 |
commit | 898e7ed11ab0958fcdaf65b99b33f7b04787630a (patch) | |
tree | 8b5ab951c36d7d27550a7c4eaad16bbd2cd0edb1 /src/server/Design/View/Header.hs | |
parent | 14bdbc8c937f5d0b35c61350dba28cb41c3737cd (diff) |
Bootstrap with GHCJS and reflex:
- setup login and logout,
- first draft of payment view.
Diffstat (limited to 'src/server/Design/View/Header.hs')
-rw-r--r-- | src/server/Design/View/Header.hs | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/server/Design/View/Header.hs b/src/server/Design/View/Header.hs new file mode 100644 index 0000000..20627e6 --- /dev/null +++ b/src/server/Design/View/Header.hs @@ -0,0 +1,78 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.View.Header + ( design + ) where + +import Data.Monoid ((<>)) + +import Clay + +import Design.Color as Color +import qualified Design.Helper as Helper +import qualified Design.Media as Media + +design :: Css +design = do + let headerPadding = "padding" -: "0 20px" + display flex + "flex-wrap" -: "wrap" + lineHeightMedia + position relative + backgroundColor Color.chestnutRose + color Color.white + Media.desktop $ marginBottom (em 3) + Media.mobileTablet $ marginBottom (em 2) + Media.mobile $ marginBottom (em 1.5) + + ".title" <> ".item" ? headerPadding + + ".title" ? do + height (pct 100) + textAlign (alignSide sideLeft) + + Media.mobile $ fontSize (px 22) + Media.mobileTablet $ width (pct 100) + Media.tabletDesktop $ do + display inlineBlock + fontSize (px 35) + + ".item" ? do + display inlineBlock + transition "background-color" (ms 50) easeIn (sec 0) + ".current" & backgroundColor (Color.chestnutRose -. 20) + Media.mobile $ fontSize (px 13) + + (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.chestnutRose +. 10) + (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.chestnutRose -. 10) + + ".nameSignOut" ? do + display flex + heightMedia + position absolute + top (px 0) + right (px 0) + + ".name" ? do + Media.mobile $ display none + Media.tabletDesktop $ headerPadding + + ".signOut" ? do + Helper.waitable + heightMedia + svg ? do + Media.tabletDesktop $ width (px 30) + Media.mobile $ width (px 20) + "path" ? ("fill" -: "white") + +lineHeightMedia :: Css +lineHeightMedia = do + Media.desktop $ lineHeight (px 80) + Media.tablet $ lineHeight (px 65) + Media.mobile $ lineHeight (px 50) + +heightMedia :: Css +heightMedia = do + Media.desktop $ height (px 80) + Media.tablet $ height (px 65) + Media.mobile $ height (px 50) |