{-# LANGUAGE OverloadedStrings #-}

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

import Clay

import qualified Design.Media as Media

design :: Css
design = do
  ".cell" ? do
    ".category" & do
      Media.tabletDesktop $ width (pct 36)

    ".cost" & do
      Media.tabletDesktop $ width (pct 15)

    ".user" & do
      Media.tabletDesktop $ width (pct 20)

    ".date" & do
      Media.tabletDesktop $ width (pct 20)
      Media.desktop $ do
        ".shortDate" ? display none
        ".longDate" ? display inline
      Media.tablet $ do
        ".shortDate" ? display inline
        ".longDate" ? display none
      Media.mobile $ do
        ".shortDate" ? display none
        ".longDate" ? display inline
        marginBottom (em 0.5)