{-# LANGUAGE OverloadedStrings #-}

module Design.Global
  ( globalDesign
  ) where

import qualified Prelude
import Prelude

import Clay

import Data.Text.Lazy (Text)

import Design.Color as C

globalDesign :: Text
globalDesign = renderWith compact [] global

iconFontSize :: Integer
iconFontSize = 32

global :: Css
global = do

  input ? do
    borderRadius (px 0) (px 0) (px 0) (px 0)
    border solid (px 1) C.grey

  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)

  table ? do
    width (pct 100)
    textAlign (alignSide (sideCenter))
    "border-spacing" -: "10 px"

    th ? do
      backgroundColor C.brown
      color C.white
      fontSize (px iconFontSize)
      lineHeight (px 70)

    tr ? do
      fontSize (px 20)
      lineHeight (px 60)
      nthChild "odd" & backgroundColor C.lightGrey

  ".signIn" ? do
    let inputHeight = 50
    width (px 500)
    marginTop (px 50)
    marginLeft auto
    marginRight auto
    input ? do
      display block
      width (pct 100)
      padding (px 10) (px 10) (px 10) (px 10)
      height (px inputHeight)
      marginBottom (px 10)
    button ? do
      display block
      width (pct 100)
      height (px inputHeight)
      backgroundColor C.brown
      color C.white
      borderWidth (px 0)
      borderRadius (px 3) (px 3) (px 3) (px 3)