{-# LANGUAGE OverloadedStrings #-}

module Design.SignIn
  ( signInDesign
  ) where

import Clay

import Design.Color as C
import Design.Helper
import Design.Constants

signInDesign :: Css
signInDesign =

  ".signIn" ? do

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

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

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

    ".result" ? do
      marginTop (px 40)
      textAlign (alignSide sideCenter)
      ".success" ? color C.green
      ".error" ? color C.redError