@sb1/ffe-cards 23.1.6 → 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 +116 -51
  2. package/less/common-card-styling.less +18 -5
  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;
@@ -69,11 +77,12 @@
69
77
  font: inherit;
70
78
  cursor: pointer;
71
79
  outline: inherit;
80
+ text-align: left;
72
81
  }
73
82
  .ffe-card-base--clickable a.ffe-card__action--raw {
74
83
  color: inherit;
75
84
  text-decoration: inherit;
76
- outline: inherit;
85
+ outline: none;
77
86
  }
78
87
  .ffe-card-base--clickable .ffe-card__action--raw:visited {
79
88
  color: inherit;
@@ -143,9 +152,11 @@
143
152
  margin: 0 0 var(--ffe-spacing-xs);
144
153
  border: 1px solid var(--ffe-color-border-primary-default);
145
154
  border-radius: var(--ffe-v-cards-common-card-border-radius);
146
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
147
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
148
- 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);
149
160
  outline: none;
150
161
  width: 100%;
151
162
  text-decoration: none;
@@ -186,9 +197,9 @@
186
197
  .ffe-text-card--clickable:focus,
187
198
  .ffe-text-card--clickable:active,
188
199
  .ffe-text-card--clickable:focus-within {
189
- border-color: var(--ffe-color-border-interactive-focus);
190
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
191
- 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);
192
203
  }
193
204
  .ffe-text-card--clickable:focus :where(
194
205
  .ffe-card-body__card-name,
@@ -210,6 +221,12 @@
210
221
  ):has(.ffe-card__action) {
211
222
  text-decoration: underline;
212
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
+ }
213
230
  .ffe-text-card--clickable button.ffe-card__action--raw {
214
231
  background: none;
215
232
  color: inherit;
@@ -218,11 +235,12 @@
218
235
  font: inherit;
219
236
  cursor: pointer;
220
237
  outline: inherit;
238
+ text-align: left;
221
239
  }
222
240
  .ffe-text-card--clickable a.ffe-card__action--raw {
223
241
  color: inherit;
224
242
  text-decoration: inherit;
225
- outline: inherit;
243
+ outline: none;
226
244
  }
227
245
  .ffe-text-card--clickable .ffe-card__action--raw:visited {
228
246
  color: inherit;
@@ -243,9 +261,11 @@
243
261
  margin: 0 0 var(--ffe-spacing-xs);
244
262
  border: 1px solid var(--ffe-color-border-primary-default);
245
263
  border-radius: var(--ffe-v-cards-common-card-border-radius);
246
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
247
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
248
- 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);
249
269
  outline: none;
250
270
  width: 100%;
251
271
  text-decoration: none;
@@ -283,9 +303,9 @@
283
303
  .ffe-icon-card--clickable:focus,
284
304
  .ffe-icon-card--clickable:active,
285
305
  .ffe-icon-card--clickable:focus-within {
286
- border-color: var(--ffe-color-border-interactive-focus);
287
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
288
- 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);
289
309
  }
290
310
  .ffe-icon-card--clickable:focus :where(
291
311
  .ffe-card-body__card-name,
@@ -307,6 +327,12 @@
307
327
  ):has(.ffe-card__action) {
308
328
  text-decoration: underline;
309
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
+ }
310
336
  .ffe-icon-card--clickable button.ffe-card__action--raw {
311
337
  background: none;
312
338
  color: inherit;
@@ -315,11 +341,12 @@
315
341
  font: inherit;
316
342
  cursor: pointer;
317
343
  outline: inherit;
344
+ text-align: left;
318
345
  }
319
346
  .ffe-icon-card--clickable a.ffe-card__action--raw {
320
347
  color: inherit;
321
348
  text-decoration: inherit;
322
- outline: inherit;
349
+ outline: none;
323
350
  }
324
351
  .ffe-icon-card--clickable .ffe-card__action--raw:visited {
325
352
  color: inherit;
@@ -362,9 +389,11 @@
362
389
  margin: 0 0 var(--ffe-spacing-xs);
363
390
  border: 1px solid var(--ffe-color-border-primary-default);
364
391
  border-radius: var(--ffe-v-cards-common-card-border-radius);
365
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
366
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
367
- 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);
368
397
  outline: none;
369
398
  width: 100%;
370
399
  text-decoration: none;
@@ -401,9 +430,9 @@
401
430
  .ffe-illustration-card--clickable:focus,
402
431
  .ffe-illustration-card--clickable:active,
403
432
  .ffe-illustration-card--clickable:focus-within {
404
- border-color: var(--ffe-color-border-interactive-focus);
405
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
406
- 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);
407
436
  }
408
437
  .ffe-illustration-card--clickable:focus :where(
409
438
  .ffe-card-body__card-name,
@@ -425,6 +454,12 @@
425
454
  ):has(.ffe-card__action) {
426
455
  text-decoration: underline;
427
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
+ }
428
463
  .ffe-illustration-card--clickable button.ffe-card__action--raw {
429
464
  background: none;
430
465
  color: inherit;
@@ -433,11 +468,12 @@
433
468
  font: inherit;
434
469
  cursor: pointer;
435
470
  outline: inherit;
471
+ text-align: left;
436
472
  }
437
473
  .ffe-illustration-card--clickable a.ffe-card__action--raw {
438
474
  color: inherit;
439
475
  text-decoration: inherit;
440
- outline: inherit;
476
+ outline: none;
441
477
  }
442
478
  .ffe-illustration-card--clickable .ffe-card__action--raw:visited {
443
479
  color: inherit;
@@ -480,9 +516,11 @@
480
516
  margin: 0 0 var(--ffe-spacing-xs);
481
517
  border: 1px solid var(--ffe-color-border-primary-default);
482
518
  border-radius: var(--ffe-v-cards-common-card-border-radius);
483
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
484
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
485
- 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);
486
524
  outline: none;
487
525
  width: 100%;
488
526
  text-decoration: none;
@@ -522,9 +560,9 @@
522
560
  .ffe-image-card--clickable:focus,
523
561
  .ffe-image-card--clickable:active,
524
562
  .ffe-image-card--clickable:focus-within {
525
- border-color: var(--ffe-color-border-interactive-focus);
526
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
527
- 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);
528
566
  }
529
567
  .ffe-image-card--clickable:focus :where(
530
568
  .ffe-card-body__card-name,
@@ -546,6 +584,12 @@
546
584
  ):has(.ffe-card__action) {
547
585
  text-decoration: underline;
548
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
+ }
549
593
  .ffe-image-card--clickable button.ffe-card__action--raw {
550
594
  background: none;
551
595
  color: inherit;
@@ -554,11 +598,12 @@
554
598
  font: inherit;
555
599
  cursor: pointer;
556
600
  outline: inherit;
601
+ text-align: left;
557
602
  }
558
603
  .ffe-image-card--clickable a.ffe-card__action--raw {
559
604
  color: inherit;
560
605
  text-decoration: inherit;
561
- outline: inherit;
606
+ outline: none;
562
607
  }
563
608
  .ffe-image-card--clickable .ffe-card__action--raw:visited {
564
609
  color: inherit;
@@ -571,11 +616,11 @@
571
616
  border-color: var(--ffe-v-cards-common-card-border-color);
572
617
  }
573
618
  .ffe-image-card:has(.ffe-card__action:active, .ffe-card__action:focus) {
574
- --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);
575
620
  }
576
621
  @media (hover: hover) and (pointer: fine) {
577
622
  .ffe-image-card:has(.ffe-card__action):hover {
578
- --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);
579
624
  }
580
625
  }
581
626
  .ffe-image-card__image-container {
@@ -629,9 +674,11 @@
629
674
  margin: 0 0 var(--ffe-spacing-xs);
630
675
  border: 1px solid var(--ffe-color-border-primary-default);
631
676
  border-radius: var(--ffe-v-cards-common-card-border-radius);
632
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
633
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
634
- 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);
635
682
  outline: none;
636
683
  width: 100%;
637
684
  text-decoration: none;
@@ -671,9 +718,9 @@
671
718
  .ffe-stippled-card--clickable:focus,
672
719
  .ffe-stippled-card--clickable:active,
673
720
  .ffe-stippled-card--clickable:focus-within {
674
- border-color: var(--ffe-color-border-interactive-focus);
675
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
676
- 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);
677
724
  }
678
725
  .ffe-stippled-card--clickable:focus :where(
679
726
  .ffe-card-body__card-name,
@@ -695,6 +742,12 @@
695
742
  ):has(.ffe-card__action) {
696
743
  text-decoration: underline;
697
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
+ }
698
751
  .ffe-stippled-card--clickable button.ffe-card__action--raw {
699
752
  background: none;
700
753
  color: inherit;
@@ -703,11 +756,12 @@
703
756
  font: inherit;
704
757
  cursor: pointer;
705
758
  outline: inherit;
759
+ text-align: left;
706
760
  }
707
761
  .ffe-stippled-card--clickable a.ffe-card__action--raw {
708
762
  color: inherit;
709
763
  text-decoration: inherit;
710
- outline: inherit;
764
+ outline: none;
711
765
  }
712
766
  .ffe-stippled-card--clickable .ffe-card__action--raw:visited {
713
767
  color: inherit;
@@ -755,9 +809,11 @@
755
809
  background: var(--ffe-color-surface-primary-default);
756
810
  margin: 0 0 var(--ffe-spacing-xs);
757
811
  border-radius: var(--ffe-v-cards-common-card-border-radius);
758
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
759
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
760
- 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);
761
817
  outline: none;
762
818
  width: 100%;
763
819
  text-decoration: none;
@@ -875,9 +931,9 @@
875
931
  .ffe-group-card__title--clickable:focus-within,
876
932
  .ffe-group-card__element--clickable:focus-within,
877
933
  .ffe-group-card__footer--clickable:focus-within {
878
- border-color: var(--ffe-color-border-interactive-focus);
879
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
880
- 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);
881
937
  }
882
938
  .ffe-group-card__title--clickable:focus :where(
883
939
  .ffe-card-body__card-name,
@@ -935,6 +991,14 @@
935
991
  ):has(.ffe-card__action) {
936
992
  text-decoration: underline;
937
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
+ }
938
1002
  .ffe-group-card__title--clickable button.ffe-card__action--raw,
939
1003
  .ffe-group-card__element--clickable button.ffe-card__action--raw,
940
1004
  .ffe-group-card__footer--clickable button.ffe-card__action--raw {
@@ -945,13 +1009,14 @@
945
1009
  font: inherit;
946
1010
  cursor: pointer;
947
1011
  outline: inherit;
1012
+ text-align: left;
948
1013
  }
949
1014
  .ffe-group-card__title--clickable a.ffe-card__action--raw,
950
1015
  .ffe-group-card__element--clickable a.ffe-card__action--raw,
951
1016
  .ffe-group-card__footer--clickable a.ffe-card__action--raw {
952
1017
  color: inherit;
953
1018
  text-decoration: inherit;
954
- outline: inherit;
1019
+ outline: none;
955
1020
  }
956
1021
  .ffe-group-card__title--clickable .ffe-card__action--raw:visited,
957
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;
@@ -50,10 +54,10 @@
50
54
  }
51
55
  &:focus,
52
56
  &:active,
53
- &:focus-within{
54
- border-color: var(--ffe-color-border-interactive-focus);
57
+ &:focus-within {
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;
@@ -74,12 +86,13 @@
74
86
  font: inherit;
75
87
  cursor: pointer;
76
88
  outline: inherit;
89
+ text-align: left;
77
90
  }
78
91
 
79
92
  a.ffe-card__action--raw {
80
93
  color: inherit;
81
94
  text-decoration: inherit;
82
- outline: inherit;
95
+ outline: none;
83
96
  }
84
97
 
85
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.6",
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": "cd4c8db31638643cc874b6eaa9bdcb08c42c72a7"
31
+ "gitHead": "0f26027df58d561ce8d5310c91033c5e62e50f51"
32
32
  }