diff options
Diffstat (limited to 'assets/css/components/_card.scss')
-rw-r--r-- | assets/css/components/_card.scss | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss new file mode 100644 index 0000000..4b3a094 --- /dev/null +++ b/assets/css/components/_card.scss | |||
@@ -0,0 +1,59 @@ | |||
1 | @include namespace('card') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --pad-x: 1.3em, | ||
5 | --pad-y: 1em | ||
6 | ), | ||
7 | --colors: ( | ||
8 | --bg: prop(--colors --bg-lo, $global: true), | ||
9 | --flip: ( | ||
10 | --bg: prop(--colors --bg-lo, $global: true), | ||
11 | ) | ||
12 | ) | ||
13 | )); | ||
14 | |||
15 | @include component(namespace()) { | ||
16 | display: block; | ||
17 | position: relative; | ||
18 | background-color: prop(--colors --bg); | ||
19 | line-height: 1.4; | ||
20 | |||
21 | &:hover { | ||
22 | @include element('content') { | ||
23 | @include modifier('flip') { | ||
24 | visibility: visible; | ||
25 | transition: | ||
26 | visibility 0s, | ||
27 | opacity .2s; | ||
28 | opacity: 1; | ||
29 | } | ||
30 | } | ||
31 | } | ||
32 | |||
33 | @include element('content') { | ||
34 | display: flex; | ||
35 | box-sizing: border-box; | ||
36 | flex-direction: row; | ||
37 | align-items: center; | ||
38 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
39 | |||
40 | @include modifier('flip') { | ||
41 | visibility: hidden; | ||
42 | position: absolute; | ||
43 | top: 0; | ||
44 | left: 0; | ||
45 | width: 100%; | ||
46 | height: 100%; | ||
47 | transition: | ||
48 | visibility 0s linear .2s, | ||
49 | opacity .2s; | ||
50 | opacity: 0; | ||
51 | background-color: prop(--colors --flip --bg); | ||
52 | } | ||
53 | } | ||
54 | |||
55 | @include element('icon') { | ||
56 | margin-left: auto; | ||
57 | } | ||
58 | } | ||
59 | } | ||