module Design.View.Payment.Table
  ( design
  ) where

import           Clay

import qualified Design.Media as Media

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

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

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

    ".category" & do
      Media.tabletDesktop $ width (pct 10)

    ".date" & do
      Media.tabletDesktop $ width (pct 15)
      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)