summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r--src/objects/_card.scss46
1 files changed, 23 insertions, 23 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index d92237b..a085491 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'avatar.vars' as avatar; 5@use 'avatar.vars' as avatar;
@@ -10,7 +10,7 @@
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include iro.bem-object('card') { 13 @include bem.object('card') {
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
@@ -21,14 +21,14 @@
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
22 transition: transform .2s; 22 transition: transform .2s;
23 23
24 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 25 &:hover,
26 &:active, 26 &:active,
27 &:focus-visible { 27 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 28 transform: translateY(props.get(vars.$hover--offset-b));
29 29
30 @include iro.bem-elem('body') { 30 @include bem.elem('body') {
31 @include iro.bem-modifier('hidden') { 31 @include bem.modifier('hidden') {
32 visibility: visible; 32 visibility: visible;
33 opacity: 1; 33 opacity: 1;
34 transition: 34 transition:
@@ -49,12 +49,12 @@
49 } 49 }
50 } 50 }
51 51
52 @include iro.bem-elem('avatar') { 52 @include bem.elem('avatar') {
53 margin-block-start: props.get(vars.$pad-b); 53 margin-block-start: props.get(vars.$pad-b);
54 margin-inline-start: props.get(vars.$pad-i); 54 margin-inline-start: props.get(vars.$pad-i);
55 } 55 }
56 56
57 @include iro.bem-elem('image') { 57 @include bem.elem('image') {
58 display: block; 58 display: block;
59 flex: 0 0 auto; 59 flex: 0 0 auto;
60 inline-size: 100%; 60 inline-size: 100%;
@@ -71,12 +71,12 @@
71 border-end-end-radius: props.get(vars.$rounding); 71 border-end-end-radius: props.get(vars.$rounding);
72 } 72 }
73 73
74 @include iro.bem-next-elem('avatar') { 74 @include bem.next-elem('avatar') {
75 margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); 75 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
76 } 76 }
77 } 77 }
78 78
79 @include iro.bem-elem('body') { 79 @include bem.elem('body') {
80 flex: 1 0 auto; 80 flex: 1 0 auto;
81 padding-block: props.get(vars.$pad-b); 81 padding-block: props.get(vars.$pad-b);
82 padding-inline: props.get(vars.$pad-i); 82 padding-inline: props.get(vars.$pad-i);
@@ -87,7 +87,7 @@
87 content: ''; 87 content: '';
88 } 88 }
89 89
90 @include iro.bem-modifier('hidden') { 90 @include bem.modifier('hidden') {
91 position: absolute; 91 position: absolute;
92 inset-block-end: 0; 92 inset-block-end: 0;
93 inset-inline: 0; 93 inset-inline: 0;
@@ -101,18 +101,18 @@
101 opacity .2s ease, 101 opacity .2s ease,
102 visibility 0s .2s linear; 102 visibility 0s .2s linear;
103 103
104 @include iro.bem-next-elem('image') { 104 @include bem.next-elem('image') {
105 border-start-start-radius: props.get(vars.$rounding); 105 border-start-start-radius: props.get(vars.$rounding);
106 border-start-end-radius: props.get(vars.$rounding); 106 border-start-end-radius: props.get(vars.$rounding);
107 } 107 }
108 } 108 }
109 } 109 }
110 110
111 @include iro.bem-elem('content') { 111 @include bem.elem('content') {
112 margin-block-start: props.get(vars.$spacing); 112 margin-block-start: props.get(vars.$spacing);
113 } 113 }
114 114
115 @include iro.bem-elem('footer') { 115 @include bem.elem('footer') {
116 flex: 0 0 auto; 116 flex: 0 0 auto;
117 padding-block: 0 props.get(vars.$pad-b); 117 padding-block: 0 props.get(vars.$pad-b);
118 padding-inline: props.get(vars.$pad-i); 118 padding-inline: props.get(vars.$pad-i);
@@ -127,18 +127,18 @@
127 } 127 }
128 } 128 }
129 129
130 @include iro.bem-modifier('quiet') { 130 @include bem.modifier('quiet') {
131 position: relative; 131 position: relative;
132 background-color: transparent; 132 background-color: transparent;
133 border: 0; 133 border: 0;
134 134
135 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 135 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
136 &:hover, 136 &:hover,
137 &:active, 137 &:active,
138 &:focus-visible { 138 &:focus-visible {
139 transform: none; 139 transform: none;
140 140
141 @include iro.bem-elem('image') { 141 @include bem.elem('image') {
142 background-color: props.get(vars.$quiet--hover--image-color); 142 background-color: props.get(vars.$quiet--hover--image-color);
143 opacity: .75; 143 opacity: .75;
144 transform: translateY(props.get(vars.$hover--offset-b)); 144 transform: translateY(props.get(vars.$hover--offset-b));
@@ -149,7 +149,7 @@
149 outline: none; 149 outline: none;
150 box-shadow: none; 150 box-shadow: none;
151 151
152 @include iro.bem-elem('image') { 152 @include bem.elem('image') {
153 background-color: props.get(vars.$quiet--hover--image-color); 153 background-color: props.get(vars.$quiet--hover--image-color);
154 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 154 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
155 box-shadow: 155 box-shadow:
@@ -163,7 +163,7 @@
163 } 163 }
164 } 164 }
165 165
166 @include iro.bem-elem('image') { 166 @include bem.elem('image') {
167 position: relative; 167 position: relative;
168 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 168 margin: calc(-1 * props.get(vars.$key-focus--border-width));
169 background-color: props.get(vars.$quiet--image-color); 169 background-color: props.get(vars.$quiet--image-color);
@@ -172,24 +172,24 @@
172 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 172 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
173 } 173 }
174 174
175 @include iro.bem-elem('body') { 175 @include bem.elem('body') {
176 padding: 0; 176 padding: 0;
177 padding-block-start: props.get(vars.$spacing); 177 padding-block-start: props.get(vars.$spacing);
178 } 178 }
179 179
180 @include iro.bem-elem('footer') { 180 @include bem.elem('footer') {
181 padding-inline: 0; 181 padding-inline: 0;
182 } 182 }
183 } 183 }
184 184
185 @include iro.bem-modifier('horizontal') { 185 @include bem.modifier('horizontal') {
186 flex-direction: row; 186 flex-direction: row;
187 align-items: center; 187 align-items: center;
188 188
189 @include iro.bem-elem('body') { 189 @include bem.elem('body') {
190 flex: 0 0 auto; 190 flex: 0 0 auto;
191 191
192 @include iro.bem-modifier('main') { 192 @include bem.modifier('main') {
193 flex-shrink: 1; 193 flex-shrink: 1;
194 inline-size: 100%; 194 inline-size: 100%;
195 min-inline-size: 0; 195 min-inline-size: 0;