@sb1/ffe-cards 100.5.2 → 100.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/css/cards.css +51 -116
  2. package/package.json +4 -4
package/css/cards.css CHANGED
@@ -4,11 +4,7 @@
4
4
  margin: 0 0 var(--ffe-spacing-xs);
5
5
  border: 1px solid var(--ffe-color-border-primary-default);
6
6
  border-radius: var(--ffe-v-cards-common-card-border-radius);
7
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
8
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
9
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
10
7
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
11
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
12
8
  outline: none;
13
9
  width: 100%;
14
10
  text-decoration: none;
@@ -23,8 +19,7 @@
23
19
  .ffe-card-base--clickable:hover {
24
20
  cursor: pointer;
25
21
  border-color: transparent;
26
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
27
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
22
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
28
23
  background: var(--ffe-color-surface-primary-default-hover);
29
24
  }
30
25
  .ffe-card-base--clickable:hover :where(
@@ -40,8 +35,7 @@
40
35
  .ffe-card-base--clickable:active,
41
36
  .ffe-card-base--clickable:focus-within {
42
37
  border-color: var(--ffe-color-border-primary-default-pressed);
43
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
44
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
38
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
45
39
  }
46
40
  .ffe-card-base--clickable:focus :where(
47
41
  .ffe-card-body__card-name,
@@ -134,8 +128,7 @@
134
128
  margin: 0;
135
129
  }
136
130
  .ffe-card-body__title--overflow-ellipsis {
137
- -o-text-overflow: ellipsis;
138
- text-overflow: ellipsis;
131
+ text-overflow: ellipsis;
139
132
  white-space: nowrap;
140
133
  overflow: hidden;
141
134
  }
@@ -152,22 +145,15 @@
152
145
  margin: 0 0 var(--ffe-spacing-xs);
153
146
  border: 1px solid var(--ffe-color-border-primary-default);
154
147
  border-radius: var(--ffe-v-cards-common-card-border-radius);
155
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
156
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
157
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
158
148
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
159
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
160
149
  outline: none;
161
150
  width: 100%;
162
151
  text-decoration: none;
163
- display: -webkit-box;
164
152
  display: -ms-flexbox;
165
153
  display: flex;
166
154
  padding: var(--ffe-spacing-sm) var(--ffe-spacing-lg);
167
- -webkit-box-orient: vertical;
168
- -webkit-box-direction: normal;
169
- -ms-flex-flow: column nowrap;
170
- flex-flow: column nowrap;
155
+ -ms-flex-flow: column nowrap;
156
+ flex-flow: column nowrap;
171
157
  text-align: center;
172
158
  overflow: hidden;
173
159
  min-height: auto;
@@ -181,8 +167,7 @@
181
167
  .ffe-text-card--clickable:hover {
182
168
  cursor: pointer;
183
169
  border-color: transparent;
184
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
185
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
170
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
186
171
  background: var(--ffe-color-surface-primary-default-hover);
187
172
  }
188
173
  .ffe-text-card--clickable:hover :where(
@@ -198,8 +183,7 @@
198
183
  .ffe-text-card--clickable:active,
199
184
  .ffe-text-card--clickable:focus-within {
200
185
  border-color: var(--ffe-color-border-primary-default-pressed);
201
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
202
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
186
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
203
187
  }
204
188
  .ffe-text-card--clickable:focus :where(
205
189
  .ffe-card-body__card-name,
@@ -261,20 +245,14 @@
261
245
  margin: 0 0 var(--ffe-spacing-xs);
262
246
  border: 1px solid var(--ffe-color-border-primary-default);
263
247
  border-radius: var(--ffe-v-cards-common-card-border-radius);
264
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
265
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
266
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
267
248
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
268
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
269
249
  outline: none;
270
250
  width: 100%;
271
251
  text-decoration: none;
272
- display: -webkit-box;
273
252
  display: -ms-flexbox;
274
253
  display: flex;
275
- -webkit-box-align: center;
276
- -ms-flex-align: center;
277
- align-items: center;
254
+ -ms-flex-align: center;
255
+ align-items: center;
278
256
  padding: var(--ffe-spacing-md);
279
257
  gap: var(--ffe-spacing-sm);
280
258
  }
@@ -287,8 +265,7 @@
287
265
  .ffe-icon-card--clickable:hover {
288
266
  cursor: pointer;
289
267
  border-color: transparent;
290
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
291
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
268
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
292
269
  background: var(--ffe-color-surface-primary-default-hover);
293
270
  }
294
271
  .ffe-icon-card--clickable:hover :where(
@@ -304,8 +281,7 @@
304
281
  .ffe-icon-card--clickable:active,
305
282
  .ffe-icon-card--clickable:focus-within {
306
283
  border-color: var(--ffe-color-border-primary-default-pressed);
307
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
308
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
284
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
309
285
  }
310
286
  .ffe-icon-card--clickable:focus :where(
311
287
  .ffe-card-body__card-name,
@@ -363,22 +339,18 @@
363
339
  }
364
340
  }
365
341
  .ffe-icon-card .ffe-icon-card__body {
366
- -webkit-box-flex: 1;
367
- -ms-flex-positive: 1;
368
- flex-grow: 1;
342
+ -ms-flex-positive: 1;
343
+ flex-grow: 1;
369
344
  }
370
345
  .ffe-icon-card .ffe-icon-card__icon {
371
- display: -webkit-box;
372
346
  display: -ms-flexbox;
373
347
  display: flex;
374
- -webkit-box-align: center;
375
- -ms-flex-align: center;
376
- align-items: center;
348
+ -ms-flex-align: center;
349
+ align-items: center;
377
350
  -ms-flex-negative: 0;
378
351
  flex-shrink: 0;
379
- -webkit-box-flex: 0;
380
- -ms-flex-positive: 0;
381
- flex-grow: 0;
352
+ -ms-flex-positive: 0;
353
+ flex-grow: 0;
382
354
  color: var(--ffe-color-foreground-emphasis);
383
355
  }
384
356
  .ffe-icon-card--condensed {
@@ -389,21 +361,18 @@
389
361
  margin: 0 0 var(--ffe-spacing-xs);
390
362
  border: 1px solid var(--ffe-color-border-primary-default);
391
363
  border-radius: var(--ffe-v-cards-common-card-border-radius);
392
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
393
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
394
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
395
364
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
396
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
397
365
  outline: none;
398
366
  width: 100%;
399
367
  text-decoration: none;
368
+ display: -ms-grid;
400
369
  display: grid;
401
- grid-template-rows: auto 1fr;
370
+ -ms-grid-rows: auto 1fr;
371
+ grid-template-rows: auto 1fr;
402
372
  gap: var(--ffe-spacing-md) 0;
403
373
  padding: var(--ffe-spacing-md);
404
- -webkit-box-align: center;
405
- -ms-flex-align: center;
406
- align-items: center;
374
+ -ms-flex-align: center;
375
+ align-items: center;
407
376
  }
408
377
  @media (min-width: 768px) {
409
378
  .ffe-illustration-card {
@@ -414,8 +383,7 @@
414
383
  .ffe-illustration-card--clickable:hover {
415
384
  cursor: pointer;
416
385
  border-color: transparent;
417
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
418
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
386
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
419
387
  background: var(--ffe-color-surface-primary-default-hover);
420
388
  }
421
389
  .ffe-illustration-card--clickable:hover :where(
@@ -431,8 +399,7 @@
431
399
  .ffe-illustration-card--clickable:active,
432
400
  .ffe-illustration-card--clickable:focus-within {
433
401
  border-color: var(--ffe-color-border-primary-default-pressed);
434
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
435
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
402
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
436
403
  }
437
404
  .ffe-illustration-card--clickable:focus :where(
438
405
  .ffe-card-body__card-name,
@@ -483,7 +450,8 @@
483
450
  }
484
451
  @media (min-width: 480px) {
485
452
  .ffe-illustration-card {
486
- grid-template-columns: auto 1fr;
453
+ -ms-grid-columns: auto 1fr;
454
+ grid-template-columns: auto 1fr;
487
455
  gap: 0 var(--ffe-spacing-md);
488
456
  }
489
457
  }
@@ -500,14 +468,15 @@
500
468
  text-align: center;
501
469
  }
502
470
  .ffe-illustration-card--right {
503
- grid-template-rows: 1fr auto;
504
- -webkit-box-pack: justify;
505
- -ms-flex-pack: justify;
506
- justify-content: space-between;
471
+ -ms-grid-rows: 1fr auto;
472
+ grid-template-rows: 1fr auto;
473
+ -ms-flex-pack: justify;
474
+ justify-content: space-between;
507
475
  }
508
476
  @media (min-width: 480px) {
509
477
  .ffe-illustration-card--right {
510
- grid-template-columns: 1fr auto;
478
+ -ms-grid-columns: 1fr auto;
479
+ grid-template-columns: 1fr auto;
511
480
  }
512
481
  }
513
482
  .ffe-image-card {
@@ -516,24 +485,17 @@
516
485
  margin: 0 0 var(--ffe-spacing-xs);
517
486
  border: 1px solid var(--ffe-color-border-primary-default);
518
487
  border-radius: var(--ffe-v-cards-common-card-border-radius);
519
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
520
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
521
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
522
488
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
523
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
524
489
  outline: none;
525
490
  width: 100%;
526
491
  text-decoration: none;
527
- display: -webkit-box;
528
492
  display: -ms-flexbox;
529
493
  display: flex;
530
494
  padding: 0;
531
495
  max-width: 290px;
532
496
  border: var(--ffe-v-cards-common-card-border-color);
533
- -webkit-box-orient: vertical;
534
- -webkit-box-direction: normal;
535
- -ms-flex-flow: column nowrap;
536
- flex-flow: column nowrap;
497
+ -ms-flex-flow: column nowrap;
498
+ flex-flow: column nowrap;
537
499
  }
538
500
  @media (min-width: 768px) {
539
501
  .ffe-image-card {
@@ -544,8 +506,7 @@
544
506
  .ffe-image-card--clickable:hover {
545
507
  cursor: pointer;
546
508
  border-color: transparent;
547
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
548
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
509
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
549
510
  background: var(--ffe-color-surface-primary-default-hover);
550
511
  }
551
512
  .ffe-image-card--clickable:hover :where(
@@ -561,8 +522,7 @@
561
522
  .ffe-image-card--clickable:active,
562
523
  .ffe-image-card--clickable:focus-within {
563
524
  border-color: var(--ffe-color-border-primary-default-pressed);
564
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
565
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
525
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
566
526
  }
567
527
  .ffe-image-card--clickable:focus :where(
568
528
  .ffe-card-body__card-name,
@@ -638,8 +598,6 @@
638
598
  width: 100%;
639
599
  overflow: hidden;
640
600
  border: 1px solid transparent;
641
- -webkit-transition: border-color var(--ffe-transition-duration);
642
- -o-transition: border-color var(--ffe-transition-duration);
643
601
  transition: border-color var(--ffe-transition-duration);
644
602
  }
645
603
  .ffe-image-card__image-overlay {
@@ -674,22 +632,16 @@
674
632
  margin: 0 0 var(--ffe-spacing-xs);
675
633
  border: 1px solid var(--ffe-color-border-primary-default);
676
634
  border-radius: var(--ffe-v-cards-common-card-border-radius);
677
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
678
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
679
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
680
635
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
681
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
682
636
  outline: none;
683
637
  width: 100%;
684
638
  text-decoration: none;
685
639
  background: transparent;
686
640
  border: 2px dashed var(--ffe-v-cards-stippled-border-color);
687
- display: -webkit-box;
688
641
  display: -ms-flexbox;
689
642
  display: flex;
690
- -webkit-box-align: center;
691
- -ms-flex-align: center;
692
- align-items: center;
643
+ -ms-flex-align: center;
644
+ align-items: center;
693
645
  padding: var(--ffe-spacing-md);
694
646
  gap: var(--ffe-spacing-md);
695
647
  }
@@ -702,8 +654,7 @@
702
654
  .ffe-stippled-card--clickable:hover {
703
655
  cursor: pointer;
704
656
  border-color: transparent;
705
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
706
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
657
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
707
658
  background: var(--ffe-color-surface-primary-default-hover);
708
659
  }
709
660
  .ffe-stippled-card--clickable:hover :where(
@@ -719,8 +670,7 @@
719
670
  .ffe-stippled-card--clickable:active,
720
671
  .ffe-stippled-card--clickable:focus-within {
721
672
  border-color: var(--ffe-color-border-primary-default-pressed);
722
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
723
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
673
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
724
674
  }
725
675
  .ffe-stippled-card--clickable:focus :where(
726
676
  .ffe-card-body__card-name,
@@ -778,20 +728,17 @@
778
728
  margin: 0;
779
729
  }
780
730
  .ffe-stippled-card__content {
781
- -webkit-box-flex: 1;
782
- -ms-flex-positive: 1;
783
- flex-grow: 1;
731
+ -ms-flex-positive: 1;
732
+ flex-grow: 1;
784
733
  }
785
734
  .ffe-stippled-card__img {
786
735
  -ms-flex-negative: 0;
787
736
  flex-shrink: 0;
788
- -webkit-box-flex: 0;
789
- -ms-flex-positive: 0;
790
- flex-grow: 0;
737
+ -ms-flex-positive: 0;
738
+ flex-grow: 0;
791
739
  }
792
740
  .ffe-stippled-card__img--icon {
793
741
  margin: 0 var(--ffe-spacing-md);
794
- display: -webkit-box;
795
742
  display: -ms-flexbox;
796
743
  display: flex;
797
744
  }
@@ -809,11 +756,7 @@
809
756
  background: var(--ffe-color-surface-primary-default);
810
757
  margin: 0 0 var(--ffe-spacing-xs);
811
758
  border-radius: var(--ffe-v-cards-common-card-border-radius);
812
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
813
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
814
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
815
759
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
816
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
817
760
  outline: none;
818
761
  width: 100%;
819
762
  text-decoration: none;
@@ -839,8 +782,7 @@
839
782
  margin: 0;
840
783
  }
841
784
  .ffe-group-card:is(ul) {
842
- -webkit-padding-start: 0;
843
- padding-inline-start: 0;
785
+ padding-inline-start: 0;
844
786
  list-style: none;
845
787
  }
846
788
  .ffe-group-card > :first-child {
@@ -860,15 +802,12 @@
860
802
  padding: var(--ffe-spacing-md);
861
803
  }
862
804
  .ffe-group-card__footer {
863
- display: -webkit-box;
864
805
  display: -ms-flexbox;
865
806
  display: flex;
866
- -webkit-box-pack: center;
867
- -ms-flex-pack: center;
868
- justify-content: center;
869
- -webkit-box-align: center;
870
- -ms-flex-align: center;
871
- align-items: center;
807
+ -ms-flex-pack: center;
808
+ justify-content: center;
809
+ -ms-flex-align: center;
810
+ align-items: center;
872
811
  }
873
812
  .ffe-group-card__title,
874
813
  .ffe-group-card__footer {
@@ -879,8 +818,6 @@
879
818
  .ffe-group-card__footer {
880
819
  border: 1px solid transparent;
881
820
  margin: 0;
882
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
883
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
884
821
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
885
822
  }
886
823
  .ffe-group-card__title--no-padding,
@@ -894,8 +831,7 @@
894
831
  .ffe-group-card__footer--clickable:hover {
895
832
  cursor: pointer;
896
833
  border-color: transparent;
897
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
898
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
834
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
899
835
  background: var(--ffe-color-surface-primary-default-hover);
900
836
  }
901
837
  .ffe-group-card__title--clickable:hover :where(
@@ -929,8 +865,7 @@
929
865
  .ffe-group-card__element--clickable:focus-within,
930
866
  .ffe-group-card__footer--clickable:focus-within {
931
867
  border-color: var(--ffe-color-border-primary-default-pressed);
932
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
933
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
868
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
934
869
  }
935
870
  .ffe-group-card__title--clickable:focus :where(
936
871
  .ffe-card-body__card-name,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "100.5.2",
3
+ "version": "100.6.1",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -20,13 +20,13 @@
20
20
  "build": "lessc less/cards.less css/cards.css --autoprefix"
21
21
  },
22
22
  "dependencies": {
23
- "@sb1/ffe-core": "^100.5.2"
23
+ "@sb1/ffe-core": "^100.6.1"
24
24
  },
25
25
  "devDependencies": {
26
- "@sb1/ffe-buildtool": "^100.5.2"
26
+ "@sb1/ffe-buildtool": "^100.6.1"
27
27
  },
28
28
  "publishConfig": {
29
29
  "access": "public"
30
30
  },
31
- "gitHead": "a5f4873cd292e0c01f7c1e11e6a74b77140333bf"
31
+ "gitHead": "f579e35bc4c3f99219ab53a3572e60311e2f5077"
32
32
  }