@sb1/ffe-cards 20.0.0 → 20.1.1

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/less/group-card.less +76 -11
  2. package/less/image-card.less +2 -4
  3. package/less/theme.less +7 -1
  4. package/package.json +2 -2
package/less/group-card.less CHANGED
@@ -4,6 +4,7 @@
4
4
  .common-card-styling();
5
5
  .card-background-styling();
6
6
 
7
+ position: relative;
7
8
  border: none;
8
9
  box-shadow: none;
9
10
 
@@ -19,34 +20,68 @@
19
20
  & > :last-child {
20
21
  border-radius: 0 0 var(--ffe-v-cards-common-card-border-radius)
21
22
  var(--ffe-v-cards-common-card-border-radius);
23
+ border-bottom-color: transparent;
22
24
  }
23
25
 
24
26
  & > :first-child:last-child {
25
27
  border-radius: var(--ffe-v-cards-common-card-border-radius);
26
28
  }
27
29
 
30
+ &__title :where(.ffe-h1, .ffe-h2, .ffe-h3, .ffe-h4, .ffe-h5, .ffe-h6) {
31
+ margin-bottom: 0;
32
+ }
33
+
28
34
  &__element {
29
- padding: var(--ffe-spacing-sm);
30
- border: 2px solid transparent;
31
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
35
+ padding: var(--ffe-spacing-md);
36
+ }
37
+
38
+ &__footer {
39
+ background-color: var(--ffe-v-group-card-footer-background-color);
40
+ display: flex;
41
+ justify-content: center;
42
+ align-items: center;
43
+
44
+ &--clickable {
45
+ color: var(--ffe-farge-fjell);
46
+ }
47
+ }
48
+
49
+ &__title,
50
+ &__footer {
51
+ padding: var(--ffe-spacing-sm) var(--ffe-spacing-md);
52
+ }
53
+
54
+ &__title,
55
+ &__element,
56
+ &__footer {
57
+ border: 1px solid transparent;
32
58
  margin: 0;
59
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
60
+ position: relative;
61
+ z-index: 0;
33
62
 
34
63
  &--no-padding {
35
64
  padding: 0;
36
65
  }
37
66
 
38
- border-bottom-color: var(
39
- --ffe-v-cards-common-group-card-separation-border-color
40
- );
67
+ &--clickable {
68
+ .clickable-card-styling();
69
+ }
41
70
 
42
- &--no-separator,
43
- &:last-child {
44
- border-bottom-color: transparent;
71
+ &:focus-within {
72
+ z-index: 1;
45
73
  }
74
+ }
46
75
 
47
- &--clickable {
48
- .clickable-card-styling();
76
+ &__title,
77
+ &__element {
78
+ &--no-separator {
79
+ border-bottom-color: transparent;
49
80
  }
81
+
82
+ border-bottom-color: var(
83
+ --ffe-v-cards-common-group-card-separation-border-color
84
+ );
50
85
  }
51
86
  }
52
87
 
@@ -54,6 +89,36 @@
54
89
  @media (prefers-color-scheme: dark) {
55
90
  .ffe-group-card {
56
91
  .card-background-dm-styling();
92
+
93
+ box-shadow: none;
94
+ border: 1px solid
95
+ var(--ffe-v-cards-common-group-card-separation-border-color-dm);
96
+
97
+ &__title {
98
+ color: var(--ffe-farge-vann-30);
99
+ }
100
+
101
+ &__title,
102
+ &__element {
103
+ border-bottom-color: var(
104
+ --ffe-v-cards-common-group-card-separation-border-color-dm
105
+ );
106
+
107
+ &--no-separator {
108
+ border-bottom-color: transparent;
109
+ }
110
+ }
111
+
112
+ &__title--clickable:hover,
113
+ &__element--clickable:hover {
114
+ border-color: var(--ffe-v-cards-border-hover-color);
115
+ }
116
+
117
+ &__footer {
118
+ background-color: var(
119
+ --ffe-v-group-card-footer-background-color-dm
120
+ );
121
+ }
57
122
  }
58
123
  }
59
124
  }
package/less/image-card.less CHANGED
@@ -22,15 +22,13 @@
22
22
  }
23
23
 
24
24
  &:has(.ffe-card__action:active, .ffe-card__action:focus) {
25
- --border-color: var(--ffe-v-cards-image-card-border-hover-color);
25
+ --border-color: var(--ffe-v-cards-border-hover-color);
26
26
  }
27
27
 
28
28
  &:has(.ffe-card__action) {
29
29
  @media (hover: hover) and (pointer: fine) {
30
30
  &:hover {
31
- --border-color: var(
32
- --ffe-v-cards-image-card-border-hover-color
33
- );
31
+ --border-color: var(--ffe-v-cards-border-hover-color);
34
32
  }
35
33
  }
36
34
  }
package/less/theme.less CHANGED
@@ -6,12 +6,17 @@
6
6
  var(--ffe-v-cards-common-card-box-shadow-color);
7
7
  --ffe-v-cards-common-card-border-radius: 16px;
8
8
  --ffe-v-cards-text-color: var(--ffe-farge-moerkgraa);
9
- --ffe-v-cards-image-card-border-hover-color: var(--ffe-farge-vann);
9
+ --ffe-v-cards-border-hover-color: var(--ffe-farge-vann);
10
10
  --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
11
11
  --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
12
12
  --ffe-v-cards-common-group-card-separation-border-color: var(
13
13
  --ffe-farge-lysgraa
14
14
  );
15
+ --ffe-v-cards-common-group-card-separation-border-color-dm: var(
16
+ --ffe-farge-koksgraa
17
+ );
18
+ --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30);
19
+ --ffe-v-group-card-footer-background-color-dm: var(--ffe-farge-koksgraa);
15
20
 
16
21
  @media (prefers-color-scheme: dark) {
17
22
  .regard-color-scheme-preference {
@@ -22,6 +27,7 @@
22
27
  --ffe-v-cards-text-color: var(--ffe-farge-graa);
23
28
  --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
24
29
  --ffe-v-cards-icon-color: var(--ffe-farge-vann-70);
30
+ --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
25
31
  }
26
32
  }
27
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "20.0.0",
3
+ "version": "20.1.1",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -24,5 +24,5 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "98d33cf2e867ce718139edf1adf97336b8da6b68"
27
+ "gitHead": "7537cfb0a0bc20135dd0ee2e0dbcc9a45e3dcaab"
28
28
  }