{-# LANGUAGE OverloadedStrings #-}

module Design.SignIn
  ( design
  ) where

import Clay

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

design :: Css
design = do

  form ? do
    let inputHeight = 50
    width (px 500)
    marginTop (px 100)
    marginLeft auto
    marginRight auto

    input ? do
      Helper.input inputHeight
      display block
      width (pct 100)
      marginBottom (px 10)

    button ? do
      Helper.iconButton Color.gothic Color.white (px inputHeight) Constants.focusLighten
      display block
      width (pct 100)
      fontSize (em 1.2)
      ".waitingServer" & ("cursor" -: "not-allowed")

  ".result" ? do
    marginTop (px 40)
    textAlign (alignSide sideCenter)
    ".success" ? color Color.mossGreen
    ".error" ? color Color.chestnutRose