|
114 | 114 | $not-material-theme: $variant != 'material'; |
115 | 115 |
|
116 | 116 | $card-heading-padding: rem(16px, 16px); |
117 | | - $card-content-padding: rem(16px); |
118 | | - $card-actions-padding: rem(8px); |
119 | 117 |
|
120 | 118 | $card-tgroup-margin: 0 em(16px); |
121 | 119 |
|
|
159 | 157 | %igx-card-header { |
160 | 158 | display: flex; |
161 | 159 | flex-flow: row wrap; |
162 | | - align-content: flex-start; |
| 160 | + align-items: center; |
163 | 161 | width: 100%; |
164 | 162 | padding: $card-heading-padding; |
165 | 163 | color: var-get($theme, 'header-text-color'); |
|
168 | 166 | display: block; |
169 | 167 | padding: 0; |
170 | 168 | } |
171 | | - |
172 | | - @if $variant == 'fluent' { |
173 | | - padding: rem(16px) rem(8px); |
174 | | - } |
175 | 169 | } |
176 | 170 |
|
177 | 171 | %igx-card-header--vertical { |
|
195 | 189 | } |
196 | 190 |
|
197 | 191 | %igx-card-header-thumbnail { |
198 | | - align-self: flex-start; |
199 | 192 | margin-inline-end: rem(16px); |
200 | 193 |
|
201 | 194 | @if $variant == 'indigo' { |
|
235 | 228 | %igx-card-content { |
236 | 229 | display: block; |
237 | 230 | width: 100%; |
238 | | - padding: $card-content-padding; |
| 231 | + padding: rem(16px); |
239 | 232 | color: var-get($theme, 'content-text-color'); |
240 | 233 | overflow: auto; |
241 | 234 | } |
|
259 | 252 | } |
260 | 253 |
|
261 | 254 | %igx-card-actions { |
| 255 | + $card-actions-padding: map.get(( |
| 256 | + 'material': rem(8px) rem(16px), |
| 257 | + 'fluent': rem(8px) rem(16px), |
| 258 | + 'bootstrap': rem(16px), |
| 259 | + 'indigo': rem(16px), |
| 260 | + ), $variant); |
| 261 | + |
| 262 | + |
262 | 263 | display: flex; |
263 | 264 | flex-flow: row wrap; |
264 | 265 | justify-content: space-between; |
|
283 | 284 |
|
284 | 285 | @if $variant == 'bootstrap' { |
285 | 286 | %igx-card-content { |
286 | | - @if $variant == 'bootstrap' { |
287 | | - padding-block: rem(16px) rem(24px); |
288 | | - padding-inline: rem(24px); |
289 | | - } |
290 | | - } |
291 | | - |
292 | | - %igx-card-actions { |
293 | | - padding: rem(16px); |
| 287 | + padding-block-end: rem(24px); |
294 | 288 | } |
295 | 289 | } |
296 | 290 |
|
297 | 291 | @if $variant == 'indigo' { |
298 | | - %igx-card-content, |
299 | | - %igx-card-actions { |
300 | | - padding: rem(16px); |
| 292 | + %igx-card-content { |
| 293 | + padding-block-end: rem(8px); |
| 294 | + } |
| 295 | + |
| 296 | + %igx-card-content:last-child { |
| 297 | + padding-block-end: rem(16px); |
301 | 298 | } |
302 | 299 |
|
303 | | - %igx-card-content + %igx-card-actions { |
304 | | - padding-block-start: rem(8px); |
| 300 | + %igx-card-header { |
| 301 | + padding-block-end: 0; |
305 | 302 | } |
306 | 303 |
|
307 | | - %igx-card-header + %igx-card-content { |
308 | | - padding-block-start: 0; |
| 304 | + %igx-card-header:last-child, |
| 305 | + %igx-card-header:first-child { |
| 306 | + padding-block-end: rem(16px); |
309 | 307 | } |
310 | 308 | } |
311 | 309 |
|
|
0 commit comments