{-# LANGUAGE OverloadedStrings #-}

module Design.LoggedIn.Home.Table
  ( design
  ) where

import Data.Monoid ((<>))

import Clay
import qualified Clay.Display as D

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

design :: Css
design = do
  ".noPayment" ? do
    margin (em 2) (em 2) (em 2) (em 2)
    textAlign (alignSide sideCenter)

  ".lines" ? do
    display D.table
    width (pct 100)
    textAlign (alignSide (sideCenter))

    ".header" <> ".row" ? display tableRow
    let headerHeight = (px 70)

    ".header" ? do
      fontWeight bold
      backgroundColor Color.gothic
      color Color.white
      fontSize (px 18)
      height headerHeight

    ".row" ? do
      fontSize (px 18)
      height (px rowHeightPx)
      ".cell:first-child::before" ? do
        display block
        content (stringContent "")
        position absolute
        top (px 0)
        left (px 0)
        width (px 0)
        height (px rowHeightPx)
        backgroundColor Color.mossGreen
        transition "width" (sec 0.3) ease (sec 0)
        opacity (0.8)

      hover & do
        ".cell:first-child::before" ? width (px 5)

      nthChild "odd" & do
        backgroundColor Color.wildSand
      ".edition" & do
        backgroundColor Color.negroni
        ".delete" |> button ? visibility visible

    ".cell" ? do
      display tableCell
      position relative
      verticalAlign middle
      ".category" & width (pct 40)
      ".cost" & do
        width (pct 17)
        ".refund" & color Color.mossGreen
      ".user" & width (pct 20)
      ".date" & do
        width (pct 20)
        Media.mobileTablet $ do
          ".shortDate" ? display inline
          ".longDate" ? display none
        Media.desktop $ do
          ".shortDate" ? display none
          ".longDate" ? display inline
      ".delete" & do
        position relative
        width (pct 3)
        textAlign (alignSide sideCenter)
        button ? do
          defaultButton Color.chestnutRose Color.white (px rowHeightPx) focusLighten
          borderRadius (px 0) (px 0) (px 0) (px 0)
          position absolute
          top (px 0)
          right (px 0)
          width (pct 100)
          visibility hidden