@sb1/ffe-cards 22.1.3 → 22.1.4

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 (3) hide show
  1. package/css/cards.css +147 -21
  2. package/less/common-card-styling.less +5 -3
  3. package/package.json +2 -2
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,
@@ -358,11 +400,25 @@
358
400
  text-decoration: underline;
359
401
  }
360
402
  }
403
+ .ffe-illustration-card--clickable:focus,
404
+ .ffe-illustration-card--clickable:active,
361
405
  .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);
406
+ border-color: var(--ffe-color-border-interactive-focus);
407
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
408
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
365
409
  }
410
+ .ffe-illustration-card--clickable:focus :where(
411
+ .ffe-card-body__card-name,
412
+ .ffe-card-body__title,
413
+ .ffe-card-body__subtext,
414
+ .ffe-card-body__text
415
+ ):has(.ffe-card__action),
416
+ .ffe-illustration-card--clickable:active :where(
417
+ .ffe-card-body__card-name,
418
+ .ffe-card-body__title,
419
+ .ffe-card-body__subtext,
420
+ .ffe-card-body__text
421
+ ):has(.ffe-card__action),
366
422
  .ffe-illustration-card--clickable:focus-within :where(
367
423
  .ffe-card-body__card-name,
368
424
  .ffe-card-body__title,
@@ -448,11 +504,25 @@
448
504
  text-decoration: underline;
449
505
  }
450
506
  }
507
+ .ffe-image-card--clickable:focus,
508
+ .ffe-image-card--clickable:active,
451
509
  .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);
510
+ border-color: var(--ffe-color-border-interactive-focus);
511
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
512
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
455
513
  }
514
+ .ffe-image-card--clickable:focus :where(
515
+ .ffe-card-body__card-name,
516
+ .ffe-card-body__title,
517
+ .ffe-card-body__subtext,
518
+ .ffe-card-body__text
519
+ ):has(.ffe-card__action),
520
+ .ffe-image-card--clickable:active :where(
521
+ .ffe-card-body__card-name,
522
+ .ffe-card-body__title,
523
+ .ffe-card-body__subtext,
524
+ .ffe-card-body__text
525
+ ):has(.ffe-card__action),
456
526
  .ffe-image-card--clickable:focus-within :where(
457
527
  .ffe-card-body__card-name,
458
528
  .ffe-card-body__title,
@@ -583,11 +653,25 @@
583
653
  text-decoration: underline;
584
654
  }
585
655
  }
656
+ .ffe-stippled-card--clickable:focus,
657
+ .ffe-stippled-card--clickable:active,
586
658
  .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);
659
+ border-color: var(--ffe-color-border-interactive-focus);
660
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
661
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
590
662
  }
663
+ .ffe-stippled-card--clickable:focus :where(
664
+ .ffe-card-body__card-name,
665
+ .ffe-card-body__title,
666
+ .ffe-card-body__subtext,
667
+ .ffe-card-body__text
668
+ ):has(.ffe-card__action),
669
+ .ffe-stippled-card--clickable:active :where(
670
+ .ffe-card-body__card-name,
671
+ .ffe-card-body__title,
672
+ .ffe-card-body__subtext,
673
+ .ffe-card-body__text
674
+ ):has(.ffe-card__action),
591
675
  .ffe-stippled-card--clickable:focus-within :where(
592
676
  .ffe-card-body__card-name,
593
677
  .ffe-card-body__title,
@@ -767,13 +851,55 @@
767
851
  text-decoration: underline;
768
852
  }
769
853
  }
854
+ .ffe-group-card__title--clickable:focus,
855
+ .ffe-group-card__element--clickable:focus,
856
+ .ffe-group-card__footer--clickable:focus,
857
+ .ffe-group-card__title--clickable:active,
858
+ .ffe-group-card__element--clickable:active,
859
+ .ffe-group-card__footer--clickable:active,
770
860
  .ffe-group-card__title--clickable:focus-within,
771
861
  .ffe-group-card__element--clickable:focus-within,
772
862
  .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);
863
+ border-color: var(--ffe-color-border-interactive-focus);
864
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
865
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-interactive-focus);
776
866
  }
867
+ .ffe-group-card__title--clickable:focus :where(
868
+ .ffe-card-body__card-name,
869
+ .ffe-card-body__title,
870
+ .ffe-card-body__subtext,
871
+ .ffe-card-body__text
872
+ ):has(.ffe-card__action),
873
+ .ffe-group-card__element--clickable:focus :where(
874
+ .ffe-card-body__card-name,
875
+ .ffe-card-body__title,
876
+ .ffe-card-body__subtext,
877
+ .ffe-card-body__text
878
+ ):has(.ffe-card__action),
879
+ .ffe-group-card__footer--clickable:focus :where(
880
+ .ffe-card-body__card-name,
881
+ .ffe-card-body__title,
882
+ .ffe-card-body__subtext,
883
+ .ffe-card-body__text
884
+ ):has(.ffe-card__action),
885
+ .ffe-group-card__title--clickable:active :where(
886
+ .ffe-card-body__card-name,
887
+ .ffe-card-body__title,
888
+ .ffe-card-body__subtext,
889
+ .ffe-card-body__text
890
+ ):has(.ffe-card__action),
891
+ .ffe-group-card__element--clickable:active :where(
892
+ .ffe-card-body__card-name,
893
+ .ffe-card-body__title,
894
+ .ffe-card-body__subtext,
895
+ .ffe-card-body__text
896
+ ):has(.ffe-card__action),
897
+ .ffe-group-card__footer--clickable:active :where(
898
+ .ffe-card-body__card-name,
899
+ .ffe-card-body__title,
900
+ .ffe-card-body__subtext,
901
+ .ffe-card-body__text
902
+ ):has(.ffe-card__action),
777
903
  .ffe-group-card__title--clickable:focus-within :where(
778
904
  .ffe-card-body__card-name,
779
905
  .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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "22.1.3",
3
+ "version": "22.1.4",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -26,5 +26,5 @@
26
26
  "publishConfig": {
27
27
  "access": "public"
28
28
  },
29
- "gitHead": "0b709d8e4f7154f16f5b22517071ac8e17efab11"
29
+ "gitHead": "b1d900b9485e171cfb45d49a68a25db83efc02c7"
30
30
  }