{-# LANGUAGE OverloadedStrings #-} module Design.Global ( globalDesign ) where import Data.Monoid ((<>)) import Clay import qualified Clay.Display as D import Data.Text.Lazy (Text) import Design.Color as C globalDesign :: Text globalDesign = renderWith compact [] global iconFontSize :: Integer iconFontSize = 32 global :: Css global = do header ? do let headerHeight = 150 h1 ? do fontSize (px 40) textAlign (alignSide sideCenter) color C.brown lineHeight (px headerHeight) button # ".signOut" ? do let iconHeight = 50 let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2) position absolute top (px 0) right (px 10) marginTop (px sideMargin) marginRight (px sideMargin) height (px iconHeight) lineHeight (px iconHeight) backgroundColor C.white color C.brown borderWidth (px 0) fontSize (px iconFontSize) hover & transform (scale 1.2 1.2) ".payments" ? do ".exceedingPayers" ? do margin (px 0) (px 20) (px 45) (px 20) padding (px 10) (px 10) (px 10) (px 10) backgroundColor C.green color C.white fontWeight bold borderRadius (px 5) (px 5) (px 5) (px 5) ".exceedingPayer" Clay.** ".userName" ? marginRight (px 10) form # ".add" ? do let inputHeight = 40 width (pct 80) marginLeft auto marginRight auto marginBottom (px 45) clearFix ".name" <> ".cost" ? do position relative width (pct 49) label ? do display inlineBlock width (px 60) textAlign (alignSide sideCenter) backgroundColor C.darkgrey color C.white height (px inputHeight) lineHeight (px inputHeight) fontSize (px 22) verticalAlign middle cursor cursorText borderRadius (px 0) (px 3) (px 3) (px 0) input ? do defaultInput inputHeight borderRadius (px 3) (px 0) (px 0) (px 3) "input:focus + label" ? backgroundColor C.grey ".name" ? do float floatLeft input ? width (pct 75) ".cost" ? do float floatRight input ? do width (pct 50) label ? marginRight (pct 5) button ? do defaultButton width (pct 20) height (px inputHeight) ".name.error" <> ".cost.error" ? do input ? borderColor C.red label ? backgroundColor C.red "input:focus + label" ? backgroundColor C.red ".errorMessage" ? do position absolute color C.red top (px (inputHeight + 10)) left (px 0) ".table" ? do display D.table width (pct 100) textAlign (alignSide (sideCenter)) "border-spacing" -: "10 px" ".header" <> ".row" ? display tableRow ".header" ? do backgroundColor C.brown color C.white fontSize (px iconFontSize) lineHeight (px 70) ".row" ? do fontSize (px 20) cursor pointer lineHeight (px 60) nthChild "odd" & backgroundColor C.lightGrey ".edition" & do backgroundColor C.orange ".remove" ? visibility visible ".cell" ? do display tableCell ".category" & width (pct 40) ".cost" & width (pct 20) ".user" & width (pct 20) ".date" & width (pct 20) ".remove" & do width (px 10) height (px 10) textAlign (alignSide sideCenter) backgroundColor C.brown color C.white visibility hidden ".signIn" ? do form ? do let inputHeight = 50 width (px 500) marginTop (px 50) marginLeft auto marginRight auto input ? do defaultInput inputHeight display block width (pct 100) marginBottom (px 10) button ? do defaultButton display block width (pct 100) height (px inputHeight) ".result" ? do marginTop (px 40) textAlign (alignSide sideCenter) ".success" ? color C.green ".error" ? color C.red clearFix :: Css clearFix = after & do content (stringContent "") display D.table clear both defaultButton :: Css defaultButton = do backgroundColor C.brown color C.white borderWidth (px 0) borderRadius (px 3) (px 3) (px 3) (px 3) verticalAlign middle defaultInput :: Integer -> Css defaultInput inputHeight = do height (px inputHeight) padding (px 10) (px 10) (px 10) (px 10) borderRadius (px 3) (px 3) (px 3) (px 3) border solid (px 1) C.darkgrey focus & borderColor C.grey verticalAlign middle