summaryrefslogtreecommitdiffstats
path: root/assets/css/components/_card.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components/_card.scss')
-rw-r--r--assets/css/components/_card.scss25
1 files changed, 15 insertions, 10 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 21eeb9f..6260518 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,8 +1,8 @@
1@include namespace('card') { 1@include namespace('card') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 1.3em, 4 --pad-x: 1.1em,
5 --pad-y: 1em 5 --pad-y: .8em
6 ), 6 ),
7 --colors: ( 7 --colors: (
8 --bg: prop(--colors --bg-lo, $global: true), 8 --bg: prop(--colors --bg-lo, $global: true),
@@ -13,8 +13,9 @@
13 )); 13 ));
14 14
15 @include component(namespace()) { 15 @include component(namespace()) {
16 display: block; 16 display: flex;
17 position: relative; 17 position: relative;
18 align-items: center;
18 background-color: prop(--colors --bg); 19 background-color: prop(--colors --bg);
19 line-height: 1.4; 20 line-height: 1.4;
20 21
@@ -37,18 +38,15 @@
37 } 38 }
38 39
39 @include element('content') { 40 @include element('content') {
40 display: flex; 41 box-sizing: border-box;
41 box-sizing: border-box; 42 width: 100%;
42 flex-direction: row; 43 padding: prop(--dims --pad-y) prop(--dims --pad-x);
43 align-items: center;
44 padding: prop(--dims --pad-y) prop(--dims --pad-x);
45 44
46 @include modifier('flip') { 45 @include modifier('flip') {
47 visibility: hidden; 46 visibility: hidden;
48 position: absolute; 47 position: absolute;
49 top: 0; 48 top: 0;
50 left: 0; 49 left: 0;
51 width: 100%;
52 height: 100%; 50 height: 100%;
53 transition: 51 transition:
54 visibility 0s linear .2s, 52 visibility 0s linear .2s,
@@ -56,10 +54,17 @@
56 opacity: 0; 54 opacity: 0;
57 background-color: prop(--colors --flip --bg); 55 background-color: prop(--colors --flip --bg);
58 } 56 }
57
58 @include sibling-element('icon') {
59 padding-right: prop(--dims --pad-x);
60 padding-left: 0;
61 }
59 } 62 }
60 63
61 @include element('icon') { 64 @include element('icon') {
62 margin-left: auto; 65 display: block;
66 flex: 0 0 auto;
67 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
63 } 68 }
64 } 69 }
65} 70}