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