module Design.View.Table ( design ) where import Data.Monoid ((<>)) import Clay import Design.Color as Color import qualified Design.Media as Media design :: Css design = do ".emptyTableMsg" ? do margin (em 2) (em 2) (em 2) (em 2) textAlign (alignSide sideCenter) ".lines" ? do Media.tabletDesktop $ display displayTable width (pct 100) textAlign (alignSide (sideCenter)) ".header" <> ".row" ? do Media.tabletDesktop $ display tableRow ".header" ? do Media.desktop $ do fontSize (px 18) height (px 70) Media.tabletDesktop $ do backgroundColor Color.gothic color Color.white Media.tablet $ do fontSize (px 16) height (px 60) Media.mobile $ do display none ".row" ? do nthChild "even" & backgroundColor Color.wildSand Media.desktop $ do fontSize (px 18) height (px 60) Media.tablet $ do height (px 50) Media.mobile $ do lineHeight (px 25) paddingTop (px 10) paddingBottom (px 10) ".cell" ? do Media.tabletDesktop $ display tableCell position relative verticalAlign middle firstChild & do Media.mobile $ do fontSize (px 20) lineHeight (px 30) color Color.gothic ".refund" & color Color.mossGreen ".cell.button" & do position relative textAlign (alignSide sideCenter) button ? do padding (px 10) (px 10) (px 10) (px 10) svg ? do "path" ? ("fill" -: Color.toString Color.chestnutRose) width (px 18) hover & "svg path" ? do "fill" -: "rgb(237, 122, 116)" Media.tabletDesktop $ width (pct 3) Media.mobile $ do display inlineBlock button ? display flex