@sb1/ffe-cards 23.1.7 → 24.0.0

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 (4) hide show
  1. package/css/cards.css +109 -51
  2. package/less/common-card-styling.less +16 -4
  3. package/less/image-card.less +2 -2
  4. package/package.json +3 -3
package/css/cards.css CHANGED
@@ -4,9 +4,11 @@
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: all var(--ffe-transition-duration) var(--ffe-ease);
8
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
9
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
10
12
  outline: none;
11
13
  width: 100%;
12
14
  text-decoration: none;
@@ -37,9 +39,9 @@
37
39
  .ffe-card-base--clickable:focus,
38
40
  .ffe-card-base--clickable:active,
39
41
  .ffe-card-base--clickable:focus-within {
40
- border-color: var(--ffe-color-border-interactive-focus);
41
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
42
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
42
+ 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);
43
45
  }
44
46
  .ffe-card-base--clickable:focus :where(
45
47
  .ffe-card-body__card-name,
@@ -61,6 +63,12 @@
61
63
  ):has(.ffe-card__action) {
62
64
  text-decoration: underline;
63
65
  }
66
+ @media (pointer: fine) {
67
+ .ffe-card-base--clickable:focus-within {
68
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
69
+ outline-offset: var(--ffe-g-outline-offset);
70
+ }
71
+ }
64
72
  .ffe-card-base--clickable button.ffe-card__action--raw {
65
73
  background: none;
66
74
  color: inherit;
@@ -74,7 +82,7 @@
74
82
  .ffe-card-base--clickable a.ffe-card__action--raw {
75
83
  color: inherit;
76
84
  text-decoration: inherit;
77
- outline: inherit;
85
+ outline: none;
78
86
  }
79
87
  .ffe-card-base--clickable .ffe-card__action--raw:visited {
80
88
  color: inherit;
@@ -144,9 +152,11 @@
144
152
  margin: 0 0 var(--ffe-spacing-xs);
145
153
  border: 1px solid var(--ffe-color-border-primary-default);
146
154
  border-radius: var(--ffe-v-cards-common-card-border-radius);
147
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
148
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
149
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
150
160
  outline: none;
151
161
  width: 100%;
152
162
  text-decoration: none;
@@ -187,9 +197,9 @@
187
197
  .ffe-text-card--clickable:focus,
188
198
  .ffe-text-card--clickable:active,
189
199
  .ffe-text-card--clickable:focus-within {
190
- border-color: var(--ffe-color-border-interactive-focus);
191
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
192
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
200
+ 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);
193
203
  }
194
204
  .ffe-text-card--clickable:focus :where(
195
205
  .ffe-card-body__card-name,
@@ -211,6 +221,12 @@
211
221
  ):has(.ffe-card__action) {
212
222
  text-decoration: underline;
213
223
  }
224
+ @media (pointer: fine) {
225
+ .ffe-text-card--clickable:focus-within {
226
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
227
+ outline-offset: var(--ffe-g-outline-offset);
228
+ }
229
+ }
214
230
  .ffe-text-card--clickable button.ffe-card__action--raw {
215
231
  background: none;
216
232
  color: inherit;
@@ -224,7 +240,7 @@
224
240
  .ffe-text-card--clickable a.ffe-card__action--raw {
225
241
  color: inherit;
226
242
  text-decoration: inherit;
227
- outline: inherit;
243
+ outline: none;
228
244
  }
229
245
  .ffe-text-card--clickable .ffe-card__action--raw:visited {
230
246
  color: inherit;
@@ -245,9 +261,11 @@
245
261
  margin: 0 0 var(--ffe-spacing-xs);
246
262
  border: 1px solid var(--ffe-color-border-primary-default);
247
263
  border-radius: var(--ffe-v-cards-common-card-border-radius);
248
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
249
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
250
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
251
269
  outline: none;
252
270
  width: 100%;
253
271
  text-decoration: none;
@@ -285,9 +303,9 @@
285
303
  .ffe-icon-card--clickable:focus,
286
304
  .ffe-icon-card--clickable:active,
287
305
  .ffe-icon-card--clickable:focus-within {
288
- border-color: var(--ffe-color-border-interactive-focus);
289
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
290
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
306
+ 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);
291
309
  }
292
310
  .ffe-icon-card--clickable:focus :where(
293
311
  .ffe-card-body__card-name,
@@ -309,6 +327,12 @@
309
327
  ):has(.ffe-card__action) {
310
328
  text-decoration: underline;
311
329
  }
330
+ @media (pointer: fine) {
331
+ .ffe-icon-card--clickable:focus-within {
332
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
333
+ outline-offset: var(--ffe-g-outline-offset);
334
+ }
335
+ }
312
336
  .ffe-icon-card--clickable button.ffe-card__action--raw {
313
337
  background: none;
314
338
  color: inherit;
@@ -322,7 +346,7 @@
322
346
  .ffe-icon-card--clickable a.ffe-card__action--raw {
323
347
  color: inherit;
324
348
  text-decoration: inherit;
325
- outline: inherit;
349
+ outline: none;
326
350
  }
327
351
  .ffe-icon-card--clickable .ffe-card__action--raw:visited {
328
352
  color: inherit;
@@ -365,9 +389,11 @@
365
389
  margin: 0 0 var(--ffe-spacing-xs);
366
390
  border: 1px solid var(--ffe-color-border-primary-default);
367
391
  border-radius: var(--ffe-v-cards-common-card-border-radius);
368
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
369
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
370
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
371
397
  outline: none;
372
398
  width: 100%;
373
399
  text-decoration: none;
@@ -404,9 +430,9 @@
404
430
  .ffe-illustration-card--clickable:focus,
405
431
  .ffe-illustration-card--clickable:active,
406
432
  .ffe-illustration-card--clickable:focus-within {
407
- border-color: var(--ffe-color-border-interactive-focus);
408
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
409
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
433
+ 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);
410
436
  }
411
437
  .ffe-illustration-card--clickable:focus :where(
412
438
  .ffe-card-body__card-name,
@@ -428,6 +454,12 @@
428
454
  ):has(.ffe-card__action) {
429
455
  text-decoration: underline;
430
456
  }
457
+ @media (pointer: fine) {
458
+ .ffe-illustration-card--clickable:focus-within {
459
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
460
+ outline-offset: var(--ffe-g-outline-offset);
461
+ }
462
+ }
431
463
  .ffe-illustration-card--clickable button.ffe-card__action--raw {
432
464
  background: none;
433
465
  color: inherit;
@@ -441,7 +473,7 @@
441
473
  .ffe-illustration-card--clickable a.ffe-card__action--raw {
442
474
  color: inherit;
443
475
  text-decoration: inherit;
444
- outline: inherit;
476
+ outline: none;
445
477
  }
446
478
  .ffe-illustration-card--clickable .ffe-card__action--raw:visited {
447
479
  color: inherit;
@@ -484,9 +516,11 @@
484
516
  margin: 0 0 var(--ffe-spacing-xs);
485
517
  border: 1px solid var(--ffe-color-border-primary-default);
486
518
  border-radius: var(--ffe-v-cards-common-card-border-radius);
487
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
488
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
489
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
490
524
  outline: none;
491
525
  width: 100%;
492
526
  text-decoration: none;
@@ -526,9 +560,9 @@
526
560
  .ffe-image-card--clickable:focus,
527
561
  .ffe-image-card--clickable:active,
528
562
  .ffe-image-card--clickable:focus-within {
529
- border-color: var(--ffe-color-border-interactive-focus);
530
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
531
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
563
+ 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);
532
566
  }
533
567
  .ffe-image-card--clickable:focus :where(
534
568
  .ffe-card-body__card-name,
@@ -550,6 +584,12 @@
550
584
  ):has(.ffe-card__action) {
551
585
  text-decoration: underline;
552
586
  }
587
+ @media (pointer: fine) {
588
+ .ffe-image-card--clickable:focus-within {
589
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
590
+ outline-offset: var(--ffe-g-outline-offset);
591
+ }
592
+ }
553
593
  .ffe-image-card--clickable button.ffe-card__action--raw {
554
594
  background: none;
555
595
  color: inherit;
@@ -563,7 +603,7 @@
563
603
  .ffe-image-card--clickable a.ffe-card__action--raw {
564
604
  color: inherit;
565
605
  text-decoration: inherit;
566
- outline: inherit;
606
+ outline: none;
567
607
  }
568
608
  .ffe-image-card--clickable .ffe-card__action--raw:visited {
569
609
  color: inherit;
@@ -576,11 +616,11 @@
576
616
  border-color: var(--ffe-v-cards-common-card-border-color);
577
617
  }
578
618
  .ffe-image-card:has(.ffe-card__action:active, .ffe-card__action:focus) {
579
- --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-hover);
619
+ --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-default-hover);
580
620
  }
581
621
  @media (hover: hover) and (pointer: fine) {
582
622
  .ffe-image-card:has(.ffe-card__action):hover {
583
- --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-hover);
623
+ --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-default-hover);
584
624
  }
585
625
  }
586
626
  .ffe-image-card__image-container {
@@ -634,9 +674,11 @@
634
674
  margin: 0 0 var(--ffe-spacing-xs);
635
675
  border: 1px solid var(--ffe-color-border-primary-default);
636
676
  border-radius: var(--ffe-v-cards-common-card-border-radius);
637
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
638
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
639
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
640
682
  outline: none;
641
683
  width: 100%;
642
684
  text-decoration: none;
@@ -676,9 +718,9 @@
676
718
  .ffe-stippled-card--clickable:focus,
677
719
  .ffe-stippled-card--clickable:active,
678
720
  .ffe-stippled-card--clickable:focus-within {
679
- border-color: var(--ffe-color-border-interactive-focus);
680
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
681
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
721
+ 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);
682
724
  }
683
725
  .ffe-stippled-card--clickable:focus :where(
684
726
  .ffe-card-body__card-name,
@@ -700,6 +742,12 @@
700
742
  ):has(.ffe-card__action) {
701
743
  text-decoration: underline;
702
744
  }
745
+ @media (pointer: fine) {
746
+ .ffe-stippled-card--clickable:focus-within {
747
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
748
+ outline-offset: var(--ffe-g-outline-offset);
749
+ }
750
+ }
703
751
  .ffe-stippled-card--clickable button.ffe-card__action--raw {
704
752
  background: none;
705
753
  color: inherit;
@@ -713,7 +761,7 @@
713
761
  .ffe-stippled-card--clickable a.ffe-card__action--raw {
714
762
  color: inherit;
715
763
  text-decoration: inherit;
716
- outline: inherit;
764
+ outline: none;
717
765
  }
718
766
  .ffe-stippled-card--clickable .ffe-card__action--raw:visited {
719
767
  color: inherit;
@@ -761,9 +809,11 @@
761
809
  background: var(--ffe-color-surface-primary-default);
762
810
  margin: 0 0 var(--ffe-spacing-xs);
763
811
  border-radius: var(--ffe-v-cards-common-card-border-radius);
764
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
765
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
766
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
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
+ 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);
767
817
  outline: none;
768
818
  width: 100%;
769
819
  text-decoration: none;
@@ -881,9 +931,9 @@
881
931
  .ffe-group-card__title--clickable:focus-within,
882
932
  .ffe-group-card__element--clickable:focus-within,
883
933
  .ffe-group-card__footer--clickable:focus-within {
884
- border-color: var(--ffe-color-border-interactive-focus);
885
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
886
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
934
+ border-color: var(--ffe-color-border-primary-default-pressed);
935
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
936
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-pressed);
887
937
  }
888
938
  .ffe-group-card__title--clickable:focus :where(
889
939
  .ffe-card-body__card-name,
@@ -941,6 +991,14 @@
941
991
  ):has(.ffe-card__action) {
942
992
  text-decoration: underline;
943
993
  }
994
+ @media (pointer: fine) {
995
+ .ffe-group-card__title--clickable:focus-within,
996
+ .ffe-group-card__element--clickable:focus-within,
997
+ .ffe-group-card__footer--clickable:focus-within {
998
+ outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
999
+ outline-offset: var(--ffe-g-outline-offset);
1000
+ }
1001
+ }
944
1002
  .ffe-group-card__title--clickable button.ffe-card__action--raw,
945
1003
  .ffe-group-card__element--clickable button.ffe-card__action--raw,
946
1004
  .ffe-group-card__footer--clickable button.ffe-card__action--raw {
@@ -958,7 +1016,7 @@
958
1016
  .ffe-group-card__footer--clickable a.ffe-card__action--raw {
959
1017
  color: inherit;
960
1018
  text-decoration: inherit;
961
- outline: inherit;
1019
+ outline: none;
962
1020
  }
963
1021
  .ffe-group-card__title--clickable .ffe-card__action--raw:visited,
964
1022
  .ffe-group-card__element--clickable .ffe-card__action--raw:visited,
package/less/common-card-styling.less CHANGED
@@ -5,7 +5,11 @@
5
5
  margin: 0 0 var(--ffe-spacing-xs);
6
6
  border: 1px solid var(--ffe-color-border-primary-default);
7
7
  border-radius: var(--ffe-v-cards-common-card-border-radius);
8
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
8
+ transition:
9
+ color var(--ffe-transition-duration) var(--ffe-ease),
10
+ border var(--ffe-transition-duration) var(--ffe-ease),
11
+ box-shadow var(--ffe-transition-duration) var(--ffe-ease),
12
+ background-color var(--ffe-transition-duration) var(--ffe-ease);
9
13
  outline: none;
10
14
  width: 100%;
11
15
  text-decoration: none;
@@ -51,9 +55,9 @@
51
55
  &:focus,
52
56
  &:active,
53
57
  &:focus-within {
54
- border-color: var(--ffe-color-border-interactive-focus);
58
+ border-color: var(--ffe-color-border-primary-default-pressed);
55
59
  box-shadow: var(--ffe-g-border-focus-box-shadow)
56
- var(--ffe-color-border-interactive-focus);
60
+ var(--ffe-color-border-primary-default-pressed);
57
61
 
58
62
  &
59
63
  :where(
@@ -66,6 +70,14 @@
66
70
  }
67
71
  }
68
72
 
73
+ @media (pointer: fine) {
74
+ &:focus-within {
75
+ outline: var(--ffe-g-outline-width) solid
76
+ var(--ffe-color-border-interactive-focus);
77
+ outline-offset: var(--ffe-g-outline-offset);
78
+ }
79
+ }
80
+
69
81
  button.ffe-card__action--raw {
70
82
  background: none;
71
83
  color: inherit;
@@ -80,7 +92,7 @@
80
92
  a.ffe-card__action--raw {
81
93
  color: inherit;
82
94
  text-decoration: inherit;
83
- outline: inherit;
95
+ outline: none;
84
96
  }
85
97
 
86
98
  .ffe-card__action--raw:visited {
package/less/image-card.less CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  &:has(.ffe-card__action:active, .ffe-card__action:focus) {
32
32
  --ffe-v-cards-common-card-border-color: var(
33
- --ffe-color-border-primary-hover
33
+ --ffe-color-border-primary-default-hover
34
34
  );
35
35
  }
36
36
 
@@ -38,7 +38,7 @@
38
38
  @media (hover: hover) and (pointer: fine) {
39
39
  &:hover {
40
40
  --ffe-v-cards-common-card-border-color: var(
41
- --ffe-color-border-primary-hover
41
+ --ffe-color-border-primary-default-hover
42
42
  );
43
43
  }
44
44
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "23.1.7",
3
+ "version": "24.0.0",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -20,7 +20,7 @@
20
20
  "build": "lessc less/cards.less css/cards.css --autoprefix"
21
21
  },
22
22
  "dependencies": {
23
- "@sb1/ffe-core": "^32.0.5"
23
+ "@sb1/ffe-core": "^33.0.0"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@sb1/ffe-buildtool": "^0.10.1"
@@ -28,5 +28,5 @@
28
28
  "publishConfig": {
29
29
  "access": "public"
30
30
  },
31
- "gitHead": "241d3cef7beb11f4a888f21fda1135d7a96da160"
31
+ "gitHead": "0f26027df58d561ce8d5310c91033c5e62e50f51"
32
32
  }