@sb1/ffe-cards 22.1.3 → 23.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 +170 -29
  2. package/less/common-card-styling.less +5 -3
  3. package/less/illustration-card.less +21 -4
  4. package/package.json +4 -3
package/css/cards.css CHANGED
@@ -34,11 +34,25 @@
34
34
  text-decoration: underline;
35
35
  }
36
36
  }
37
+ .ffe-card-base--clickable:focus,
38
+ .ffe-card-base--clickable:active,
37
39
  .ffe-card-base--clickable:focus-within {
38
- border-color: transparent;
39
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
40
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
41
43
  }
44
+ .ffe-card-base--clickable:focus :where(
45
+ .ffe-card-body__card-name,
46
+ .ffe-card-body__title,
47
+ .ffe-card-body__subtext,
48
+ .ffe-card-body__text
49
+ ):has(.ffe-card__action),
50
+ .ffe-card-base--clickable:active :where(
51
+ .ffe-card-body__card-name,
52
+ .ffe-card-body__title,
53
+ .ffe-card-body__subtext,
54
+ .ffe-card-body__text
55
+ ):has(.ffe-card__action),
42
56
  .ffe-card-base--clickable:focus-within :where(
43
57
  .ffe-card-body__card-name,
44
58
  .ffe-card-body__title,
@@ -169,11 +183,25 @@
169
183
  text-decoration: underline;
170
184
  }
171
185
  }
186
+ .ffe-text-card--clickable:focus,
187
+ .ffe-text-card--clickable:active,
172
188
  .ffe-text-card--clickable:focus-within {
173
- border-color: transparent;
174
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
175
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
176
192
  }
193
+ .ffe-text-card--clickable:focus :where(
194
+ .ffe-card-body__card-name,
195
+ .ffe-card-body__title,
196
+ .ffe-card-body__subtext,
197
+ .ffe-card-body__text
198
+ ):has(.ffe-card__action),
199
+ .ffe-text-card--clickable:active :where(
200
+ .ffe-card-body__card-name,
201
+ .ffe-card-body__title,
202
+ .ffe-card-body__subtext,
203
+ .ffe-card-body__text
204
+ ):has(.ffe-card__action),
177
205
  .ffe-text-card--clickable:focus-within :where(
178
206
  .ffe-card-body__card-name,
179
207
  .ffe-card-body__title,
@@ -252,11 +280,25 @@
252
280
  text-decoration: underline;
253
281
  }
254
282
  }
283
+ .ffe-icon-card--clickable:focus,
284
+ .ffe-icon-card--clickable:active,
255
285
  .ffe-icon-card--clickable:focus-within {
256
- border-color: transparent;
257
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
258
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
259
289
  }
290
+ .ffe-icon-card--clickable:focus :where(
291
+ .ffe-card-body__card-name,
292
+ .ffe-card-body__title,
293
+ .ffe-card-body__subtext,
294
+ .ffe-card-body__text
295
+ ):has(.ffe-card__action),
296
+ .ffe-icon-card--clickable:active :where(
297
+ .ffe-card-body__card-name,
298
+ .ffe-card-body__title,
299
+ .ffe-card-body__subtext,
300
+ .ffe-card-body__text
301
+ ):has(.ffe-card__action),
260
302
  .ffe-icon-card--clickable:focus-within :where(
261
303
  .ffe-card-body__card-name,
262
304
  .ffe-card-body__title,
@@ -327,10 +369,8 @@
327
369
  width: 100%;
328
370
  text-decoration: none;
329
371
  display: grid;
330
- grid-template-columns: auto 1fr;
331
- -webkit-column-gap: var(--ffe-spacing-md);
332
- -moz-column-gap: var(--ffe-spacing-md);
333
- column-gap: var(--ffe-spacing-md);
372
+ grid-template-rows: auto 1fr;
373
+ gap: var(--ffe-spacing-md) 0;
334
374
  padding: var(--ffe-spacing-md);
335
375
  -webkit-box-align: center;
336
376
  -ms-flex-align: center;
@@ -358,11 +398,25 @@
358
398
  text-decoration: underline;
359
399
  }
360
400
  }
401
+ .ffe-illustration-card--clickable:focus,
402
+ .ffe-illustration-card--clickable:active,
361
403
  .ffe-illustration-card--clickable:focus-within {
362
- border-color: transparent;
363
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
364
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
365
407
  }
408
+ .ffe-illustration-card--clickable:focus :where(
409
+ .ffe-card-body__card-name,
410
+ .ffe-card-body__title,
411
+ .ffe-card-body__subtext,
412
+ .ffe-card-body__text
413
+ ):has(.ffe-card__action),
414
+ .ffe-illustration-card--clickable:active :where(
415
+ .ffe-card-body__card-name,
416
+ .ffe-card-body__title,
417
+ .ffe-card-body__subtext,
418
+ .ffe-card-body__text
419
+ ):has(.ffe-card__action),
366
420
  .ffe-illustration-card--clickable:focus-within :where(
367
421
  .ffe-card-body__card-name,
368
422
  .ffe-card-body__title,
@@ -391,18 +445,35 @@
391
445
  .ffe-illustration-card--no-margin {
392
446
  margin: 0;
393
447
  }
448
+ @media (min-width: 480px) {
449
+ .ffe-illustration-card {
450
+ grid-template-columns: auto 1fr;
451
+ gap: 0 var(--ffe-spacing-md);
452
+ }
453
+ }
394
454
  .ffe-illustration-card--condensed {
395
- -webkit-column-gap: var(--ffe-spacing-sm);
396
- -moz-column-gap: var(--ffe-spacing-sm);
397
- column-gap: var(--ffe-spacing-sm);
455
+ gap: var(--ffe-spacing-sm) 0;
398
456
  padding: var(--ffe-spacing-sm);
399
457
  }
458
+ @media (min-width: 480px) {
459
+ .ffe-illustration-card--condensed {
460
+ gap: 0 var(--ffe-spacing-sm);
461
+ }
462
+ }
463
+ .ffe-illustration-card__illustration {
464
+ text-align: center;
465
+ }
400
466
  .ffe-illustration-card--right {
401
- grid-template-columns: 1fr auto;
467
+ grid-template-rows: 1fr auto;
402
468
  -webkit-box-pack: justify;
403
469
  -ms-flex-pack: justify;
404
470
  justify-content: space-between;
405
471
  }
472
+ @media (min-width: 480px) {
473
+ .ffe-illustration-card--right {
474
+ grid-template-columns: 1fr auto;
475
+ }
476
+ }
406
477
  .ffe-image-card {
407
478
  --ffe-v-cards-common-card-border-color: var(--ffe-color-border-primary-default);
408
479
  background: var(--ffe-color-surface-primary-default);
@@ -448,11 +519,25 @@
448
519
  text-decoration: underline;
449
520
  }
450
521
  }
522
+ .ffe-image-card--clickable:focus,
523
+ .ffe-image-card--clickable:active,
451
524
  .ffe-image-card--clickable:focus-within {
452
- border-color: transparent;
453
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
454
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
455
528
  }
529
+ .ffe-image-card--clickable:focus :where(
530
+ .ffe-card-body__card-name,
531
+ .ffe-card-body__title,
532
+ .ffe-card-body__subtext,
533
+ .ffe-card-body__text
534
+ ):has(.ffe-card__action),
535
+ .ffe-image-card--clickable:active :where(
536
+ .ffe-card-body__card-name,
537
+ .ffe-card-body__title,
538
+ .ffe-card-body__subtext,
539
+ .ffe-card-body__text
540
+ ):has(.ffe-card__action),
456
541
  .ffe-image-card--clickable:focus-within :where(
457
542
  .ffe-card-body__card-name,
458
543
  .ffe-card-body__title,
@@ -583,11 +668,25 @@
583
668
  text-decoration: underline;
584
669
  }
585
670
  }
671
+ .ffe-stippled-card--clickable:focus,
672
+ .ffe-stippled-card--clickable:active,
586
673
  .ffe-stippled-card--clickable:focus-within {
587
- border-color: transparent;
588
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
589
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
590
677
  }
678
+ .ffe-stippled-card--clickable:focus :where(
679
+ .ffe-card-body__card-name,
680
+ .ffe-card-body__title,
681
+ .ffe-card-body__subtext,
682
+ .ffe-card-body__text
683
+ ):has(.ffe-card__action),
684
+ .ffe-stippled-card--clickable:active :where(
685
+ .ffe-card-body__card-name,
686
+ .ffe-card-body__title,
687
+ .ffe-card-body__subtext,
688
+ .ffe-card-body__text
689
+ ):has(.ffe-card__action),
591
690
  .ffe-stippled-card--clickable:focus-within :where(
592
691
  .ffe-card-body__card-name,
593
692
  .ffe-card-body__title,
@@ -767,13 +866,55 @@
767
866
  text-decoration: underline;
768
867
  }
769
868
  }
869
+ .ffe-group-card__title--clickable:focus,
870
+ .ffe-group-card__element--clickable:focus,
871
+ .ffe-group-card__footer--clickable:focus,
872
+ .ffe-group-card__title--clickable:active,
873
+ .ffe-group-card__element--clickable:active,
874
+ .ffe-group-card__footer--clickable:active,
770
875
  .ffe-group-card__title--clickable:focus-within,
771
876
  .ffe-group-card__element--clickable:focus-within,
772
877
  .ffe-group-card__footer--clickable:focus-within {
773
- border-color: transparent;
774
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
775
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
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);
776
881
  }
882
+ .ffe-group-card__title--clickable:focus :where(
883
+ .ffe-card-body__card-name,
884
+ .ffe-card-body__title,
885
+ .ffe-card-body__subtext,
886
+ .ffe-card-body__text
887
+ ):has(.ffe-card__action),
888
+ .ffe-group-card__element--clickable:focus :where(
889
+ .ffe-card-body__card-name,
890
+ .ffe-card-body__title,
891
+ .ffe-card-body__subtext,
892
+ .ffe-card-body__text
893
+ ):has(.ffe-card__action),
894
+ .ffe-group-card__footer--clickable:focus :where(
895
+ .ffe-card-body__card-name,
896
+ .ffe-card-body__title,
897
+ .ffe-card-body__subtext,
898
+ .ffe-card-body__text
899
+ ):has(.ffe-card__action),
900
+ .ffe-group-card__title--clickable:active :where(
901
+ .ffe-card-body__card-name,
902
+ .ffe-card-body__title,
903
+ .ffe-card-body__subtext,
904
+ .ffe-card-body__text
905
+ ):has(.ffe-card__action),
906
+ .ffe-group-card__element--clickable:active :where(
907
+ .ffe-card-body__card-name,
908
+ .ffe-card-body__title,
909
+ .ffe-card-body__subtext,
910
+ .ffe-card-body__text
911
+ ):has(.ffe-card__action),
912
+ .ffe-group-card__footer--clickable:active :where(
913
+ .ffe-card-body__card-name,
914
+ .ffe-card-body__title,
915
+ .ffe-card-body__subtext,
916
+ .ffe-card-body__text
917
+ ):has(.ffe-card__action),
777
918
  .ffe-group-card__title--clickable:focus-within :where(
778
919
  .ffe-card-body__card-name,
779
920
  .ffe-card-body__title,
package/less/common-card-styling.less CHANGED
@@ -48,10 +48,12 @@
48
48
  }
49
49
  }
50
50
  }
51
- &:focus-within {
52
- border-color: transparent;
51
+ &:focus,
52
+ &:active,
53
+ &:focus-within{
54
+ border-color: var(--ffe-color-border-interactive-focus);
53
55
  box-shadow: var(--ffe-g-border-focus-box-shadow)
54
- var(--ffe-color-border-primary-pressed);
56
+ var(--ffe-color-border-interactive-focus);
55
57
 
56
58
  &
57
59
  :where(
package/less/illustration-card.less CHANGED
@@ -13,18 +13,35 @@
13
13
  }
14
14
 
15
15
  display: grid;
16
- grid-template-columns: auto 1fr;
17
- column-gap: var(--ffe-spacing-md);
16
+ grid-template-rows: auto 1fr;
17
+ gap: var(--ffe-spacing-md) 0;
18
18
  padding: var(--ffe-spacing-md);
19
19
  align-items: center;
20
20
 
21
+ @media (min-width: @breakpoint-sm) {
22
+ grid-template-columns: auto 1fr;
23
+ gap: 0 var(--ffe-spacing-md);
24
+ }
25
+
21
26
  &--condensed {
22
- column-gap: var(--ffe-spacing-sm);
27
+ gap: var(--ffe-spacing-sm) 0;
23
28
  padding: var(--ffe-spacing-sm);
29
+
30
+ @media (min-width: @breakpoint-sm) {
31
+ gap: 0 var(--ffe-spacing-sm);
32
+ }
33
+ }
34
+
35
+ &__illustration {
36
+ text-align: center;
24
37
  }
25
38
 
26
39
  &--right {
27
- grid-template-columns: 1fr auto;
40
+ grid-template-rows: 1fr auto;
28
41
  justify-content: space-between;
42
+
43
+ @media (min-width: @breakpoint-sm) {
44
+ grid-template-columns: 1fr auto;
45
+ }
29
46
  }
30
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "22.1.3",
3
+ "version": "23.0.0",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -18,7 +18,7 @@
18
18
  "build": "lessc less/cards.less css/cards.css --autoprefix"
19
19
  },
20
20
  "dependencies": {
21
- "@sb1/ffe-core": "^31.1.0"
21
+ "@sb1/ffe-core": "^31.1.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@sb1/ffe-buildtool": "^0.10.0"
@@ -26,5 +26,6 @@
26
26
  "publishConfig": {
27
27
  "access": "public"
28
28
  },
29
- "gitHead": "0b709d8e4f7154f16f5b22517071ac8e17efab11"
29
+ "type": "module",
30
+ "gitHead": "61e0e1ffb823447811627196398c7818d0e8cea3"
30
31
  }