{-# LANGUAGE OverloadedStrings #-}

module Design.Global
  ( globalDesign
  ) where

import Clay

import Data.Text.Lazy (Text)

import qualified Design.Header as Header
import qualified Design.SignIn as SignIn
import qualified Design.LoggedIn as LoggedIn
import qualified Design.Form as Form
import qualified Design.Dialog as Dialog
import qualified Design.Tooltip as Tooltip

import qualified Design.Color as Color
import qualified Design.Helper as Helper
import qualified Design.Constants as Constants
import qualified Design.Media as Media

globalDesign :: Text
globalDesign = renderWith compact [] global

global :: Css
global = do

  header ? Header.design
  ".signIn" ? SignIn.design
  ".loggedIn" ? LoggedIn.design
  ".dialog" ? Dialog.design
  ".tooltip" ? Tooltip.design
  Form.design

  body ? do
    minWidth (px 320)
    fontFamily ["Cantarell"] [sansSerif]
    Media.tablet $ do
      fontSize (px 15)
      button ? fontSize (px 15)
      input ? fontSize (px 15)
    Media.mobile $ do
      fontSize (px 14)
      button ? fontSize (px 14)
      input ? fontSize (px 14)

  a ? cursor pointer

  h1 ? do
    color Color.chestnutRose
    marginBottom (em 1)
    lineHeight (em 1.2)

    Media.desktop $ fontSize (px 24)
    Media.tablet $ fontSize (px 22)
    Media.mobile $ fontSize (px 20)

  ul ? do
    "margin-bottom" -: "3vh"
    "margin-left" -: "1vh"
    li <? do
      "margin-bottom" -: "2vh"
      before & do
        content (stringContent "• ")
        color Color.chestnutRose
        "margin-right" -: "0.3vw"
      ul <? do
        "margin-left" -: "3vh"
        "margin-top" -: "2vh"

  ".dialog" ? ".content" ? button ? do
    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten

  svg ? height (pct 100)