blob: a229132ce51aabf5ccc7165c8ed804bfcde9c970 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
{-# 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
|
