@sb1/ffe-cards 22.0.8 → 22.0.9

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 +42 -14
  2. package/less/common-card-styling.less +6 -2
  3. package/package.json +3 -3
package/css/cards.css CHANGED
@@ -20,7 +20,9 @@
20
20
  @media (hover: hover) and (pointer: fine) {
21
21
  .ffe-card-base--clickable:hover {
22
22
  cursor: pointer;
23
- border-color: var(--ffe-color-border-primary-hover);
23
+ border-color: transparent;
24
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
25
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
24
26
  background: var(--ffe-color-surface-primary-default-hover);
25
27
  }
26
28
  .ffe-card-base--clickable:hover :where(
@@ -33,7 +35,9 @@
33
35
  }
34
36
  }
35
37
  .ffe-card-base--clickable:focus-within {
36
- border-color: var(--ffe-color-border-primary-hover);
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);
37
41
  }
38
42
  .ffe-card-base--clickable:focus-within :where(
39
43
  .ffe-card-body__card-name,
@@ -151,7 +155,9 @@
151
155
  @media (hover: hover) and (pointer: fine) {
152
156
  .ffe-text-card--clickable:hover {
153
157
  cursor: pointer;
154
- border-color: var(--ffe-color-border-primary-hover);
158
+ border-color: transparent;
159
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
160
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
155
161
  background: var(--ffe-color-surface-primary-default-hover);
156
162
  }
157
163
  .ffe-text-card--clickable:hover :where(
@@ -164,7 +170,9 @@
164
170
  }
165
171
  }
166
172
  .ffe-text-card--clickable:focus-within {
167
- border-color: var(--ffe-color-border-primary-hover);
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);
168
176
  }
169
177
  .ffe-text-card--clickable:focus-within :where(
170
178
  .ffe-card-body__card-name,
@@ -230,7 +238,9 @@
230
238
  @media (hover: hover) and (pointer: fine) {
231
239
  .ffe-icon-card--clickable:hover {
232
240
  cursor: pointer;
233
- border-color: var(--ffe-color-border-primary-hover);
241
+ border-color: transparent;
242
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
243
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
234
244
  background: var(--ffe-color-surface-primary-default-hover);
235
245
  }
236
246
  .ffe-icon-card--clickable:hover :where(
@@ -243,7 +253,9 @@
243
253
  }
244
254
  }
245
255
  .ffe-icon-card--clickable:focus-within {
246
- border-color: var(--ffe-color-border-primary-hover);
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);
247
259
  }
248
260
  .ffe-icon-card--clickable:focus-within :where(
249
261
  .ffe-card-body__card-name,
@@ -332,7 +344,9 @@
332
344
  @media (hover: hover) and (pointer: fine) {
333
345
  .ffe-illustration-card--clickable:hover {
334
346
  cursor: pointer;
335
- border-color: var(--ffe-color-border-primary-hover);
347
+ border-color: transparent;
348
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
349
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
336
350
  background: var(--ffe-color-surface-primary-default-hover);
337
351
  }
338
352
  .ffe-illustration-card--clickable:hover :where(
@@ -345,7 +359,9 @@
345
359
  }
346
360
  }
347
361
  .ffe-illustration-card--clickable:focus-within {
348
- border-color: var(--ffe-color-border-primary-hover);
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);
349
365
  }
350
366
  .ffe-illustration-card--clickable:focus-within :where(
351
367
  .ffe-card-body__card-name,
@@ -418,7 +434,9 @@
418
434
  @media (hover: hover) and (pointer: fine) {
419
435
  .ffe-image-card--clickable:hover {
420
436
  cursor: pointer;
421
- border-color: var(--ffe-color-border-primary-hover);
437
+ border-color: transparent;
438
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
439
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
422
440
  background: var(--ffe-color-surface-primary-default-hover);
423
441
  }
424
442
  .ffe-image-card--clickable:hover :where(
@@ -431,7 +449,9 @@
431
449
  }
432
450
  }
433
451
  .ffe-image-card--clickable:focus-within {
434
- border-color: var(--ffe-color-border-primary-hover);
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);
435
455
  }
436
456
  .ffe-image-card--clickable:focus-within :where(
437
457
  .ffe-card-body__card-name,
@@ -549,7 +569,9 @@
549
569
  @media (hover: hover) and (pointer: fine) {
550
570
  .ffe-stippled-card--clickable:hover {
551
571
  cursor: pointer;
552
- border-color: var(--ffe-color-border-primary-hover);
572
+ border-color: transparent;
573
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
574
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
553
575
  background: var(--ffe-color-surface-primary-default-hover);
554
576
  }
555
577
  .ffe-stippled-card--clickable:hover :where(
@@ -562,7 +584,9 @@
562
584
  }
563
585
  }
564
586
  .ffe-stippled-card--clickable:focus-within {
565
- border-color: var(--ffe-color-border-primary-hover);
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);
566
590
  }
567
591
  .ffe-stippled-card--clickable:focus-within :where(
568
592
  .ffe-card-body__card-name,
@@ -712,7 +736,9 @@
712
736
  .ffe-group-card__element--clickable:hover,
713
737
  .ffe-group-card__footer--clickable:hover {
714
738
  cursor: pointer;
715
- border-color: var(--ffe-color-border-primary-hover);
739
+ border-color: transparent;
740
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
741
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-hover);
716
742
  background: var(--ffe-color-surface-primary-default-hover);
717
743
  }
718
744
  .ffe-group-card__title--clickable:hover :where(
@@ -739,7 +765,9 @@
739
765
  .ffe-group-card__title--clickable:focus-within,
740
766
  .ffe-group-card__element--clickable:focus-within,
741
767
  .ffe-group-card__footer--clickable:focus-within {
742
- border-color: var(--ffe-color-border-primary-hover);
768
+ border-color: transparent;
769
+ -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
770
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-pressed);
743
771
  }
744
772
  .ffe-group-card__title--clickable:focus-within :where(
745
773
  .ffe-card-body__card-name,
package/less/common-card-styling.less CHANGED
@@ -33,7 +33,9 @@
33
33
  @media (hover: hover) and (pointer: fine) {
34
34
  &:hover {
35
35
  cursor: pointer;
36
- border-color: var(--ffe-color-border-primary-hover);
36
+ border-color: transparent;
37
+ box-shadow: var(--ffe-g-border-focus-box-shadow)
38
+ var(--ffe-color-border-primary-hover);
37
39
  background: var(--ffe-color-surface-primary-default-hover);
38
40
  &
39
41
  :where(
@@ -47,7 +49,9 @@
47
49
  }
48
50
  }
49
51
  &:focus-within {
50
- border-color: var(--ffe-color-border-primary-hover);
52
+ border-color: transparent;
53
+ box-shadow: var(--ffe-g-border-focus-box-shadow)
54
+ var(--ffe-color-border-primary-pressed);
51
55
 
52
56
  &
53
57
  :where(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "22.0.8",
3
+ "version": "22.0.9",
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": "^30.1.0"
21
+ "@sb1/ffe-core": "^30.1.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@sb1/ffe-buildtool": "^0.10.0"
@@ -26,5 +26,5 @@
26
26
  "publishConfig": {
27
27
  "access": "public"
28
28
  },
29
- "gitHead": "e9877c954f0e3e28d0be5db5aaf4a00762cb8a5c"
29
+ "gitHead": "2ff1ce6aa6e7ea7f11da6944332998a585cd8226"
30
30
  }