@sb1/ffe-cards 19.1.3 → 19.2.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 (11) hide show
  1. package/less/card-base.less +7 -35
  2. package/less/cards.less +1 -0
  3. package/less/common-card-styling.less +65 -39
  4. package/less/group-card.less +54 -0
  5. package/less/icon-card.less +4 -0
  6. package/less/illustration-card.less +4 -0
  7. package/less/image-card.less +4 -0
  8. package/less/stippled-card.less +14 -21
  9. package/less/text-card.less +4 -0
  10. package/less/theme.less +5 -0
  11. package/package.json +3 -3
package/less/card-base.less CHANGED
@@ -3,39 +3,21 @@
3
3
  .ffe-card-base {
4
4
  .common-card-styling();
5
5
 
6
- --ffe-card-base-background-color: var(
7
- --ffe-v-cards-common-card-background-color
8
- );
6
+ &--clickable {
7
+ .clickable-card-styling();
8
+ }
9
9
 
10
- background: var(--ffe-card-base-background-color);
11
10
  padding: var(--ffe-spacing-sm);
12
11
  box-shadow: none; // Overwrite common-card-styling
13
12
 
14
13
  &--no-padding {
15
14
  padding: 0;
16
15
  }
17
- &--bg-sand-30 {
18
- --ffe-card-base-background-color: var(--ffe-farge-sand-30);
19
- }
20
-
21
- &--bg-sand-70 {
22
- --ffe-card-base-background-color: var(--ffe-farge-sand-70);
23
- }
24
16
 
25
- &--bg-frost-30 {
26
- --ffe-card-base-background-color: var(--ffe-farge-frost-30);
27
- }
17
+ .card-background-styling();
28
18
 
29
- &--bg-syrin-30 {
30
- --ffe-card-base-background-color: var(--ffe-farge-syrin-30);
31
- }
32
-
33
- &--bg-syrin-70 {
34
- --ffe-card-base-background-color: var(--ffe-farge-syrin-70);
35
- }
36
-
37
- &--box-shadow {
38
- box-shadow: 0 1px 4px 0 var(--ffe-v-cards-common-card-box-shadow-color);
19
+ &--shadow {
20
+ box-shadow: var(--ffe-v-cards-common-card-box-shadow);
39
21
  }
40
22
 
41
23
  &--no-margin {
@@ -50,17 +32,7 @@
50
32
  .native & {
51
33
  @media (prefers-color-scheme: dark) {
52
34
  .ffe-card-base {
53
- &--dm-bg-svart {
54
- --ffe-card-base-background-color: var(--ffe-farge-svart);
55
- }
56
-
57
- &--dm-bg-natt {
58
- --ffe-card-base-background-color: var(--ffe-farge-natt);
59
- }
60
-
61
- &--dm-bg-koksgraa {
62
- --ffe-card-base-background-color: var(--ffe-farge-koksgraa);
63
- }
35
+ .card-background-dm-styling();
64
36
  }
65
37
  }
66
38
  }
package/less/cards.less CHANGED
@@ -5,3 +5,4 @@
5
5
  @import 'illustration-card';
6
6
  @import 'image-card';
7
7
  @import 'stippled-card';
8
+ @import 'group-card';
package/less/common-card-styling.less CHANGED
@@ -1,6 +1,6 @@
1
1
  .common-card-styling() {
2
2
  background: var(--ffe-v-cards-common-card-background-color);
3
- box-shadow: 0 1px 4px 0 var(--ffe-v-cards-common-card-box-shadow-color);
3
+ box-shadow: var(--ffe-v-cards-common-card-box-shadow);
4
4
  margin: 0 0 var(--ffe-spacing-2xs);
5
5
  border: 2px solid transparent;
6
6
  border-radius: var(--ffe-v-cards-common-card-border-radius);
@@ -15,24 +15,50 @@
15
15
  }
16
16
  }
17
17
 
18
- button.ffe-card__action--raw {
19
- background: none;
20
- color: inherit;
21
- border: none;
22
- padding: 0;
23
- font: inherit;
24
- cursor: pointer;
25
- outline: inherit;
18
+ @media (min-width: @breakpoint-md) {
19
+ margin-bottom: var(--ffe-spacing-md);
26
20
  }
21
+ }
27
22
 
28
- a.ffe-card__action--raw {
29
- color: inherit;
30
- text-decoration: inherit;
31
- outline: inherit;
23
+ .card-background-styling() {
24
+ &--bg-sand-30 {
25
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-30);
26
+ }
27
+
28
+ &--bg-sand-70 {
29
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-sand-70);
30
+ }
31
+
32
+ &--bg-frost-30 {
33
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-frost-30);
34
+ }
35
+
36
+ &--bg-syrin-30 {
37
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-30);
38
+ }
39
+
40
+ &--bg-syrin-70 {
41
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-syrin-70);
42
+ }
43
+ }
44
+
45
+ .card-background-dm-styling() {
46
+ &--dm-bg-svart {
47
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
48
+ }
49
+
50
+ &--dm-bg-natt {
51
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-natt);
32
52
  }
33
53
 
54
+ &--dm-bg-koksgraa {
55
+ --ffe-v-cards-common-card-background-color: var(--ffe-farge-koksgraa);
56
+ }
57
+ }
58
+
59
+ .clickable-card-styling() {
34
60
  @media (hover: hover) and (pointer: fine) {
35
- &--clickable:hover {
61
+ &:hover {
36
62
  cursor: pointer;
37
63
  border-color: var(--ffe-g-primary-color);
38
64
 
@@ -47,31 +73,11 @@
47
73
  }
48
74
  }
49
75
  }
50
-
51
- .ffe-card__action--raw:visited {
52
- .native & {
53
- @media (prefers-color-scheme: dark) {
54
- color: var(--ffe-farge-hvit);
55
- }
56
- }
57
- }
58
-
59
- &:has(.ffe-card__action:focus) {
60
- box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
61
- }
62
-
63
- @supports not
64
- selector(&:has(.ffe-card__action:active, .ffe-card__action:focus)) {
65
- &--clickable:focus-within {
66
- border-color: var(--ffe-g-primary-color);
67
- }
68
- }
69
-
70
- &:has(.ffe-card__action:active, .ffe-card__action:focus) {
76
+ &:focus-within {
71
77
  border-color: var(--ffe-g-primary-color);
78
+ box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
72
79
 
73
- &
74
- :where(
80
+ &:where(
75
81
  .ffe-card-body__card-name,
76
82
  .ffe-card-body__title,
77
83
  .ffe-card-body__subtext,
@@ -81,7 +87,27 @@
81
87
  }
82
88
  }
83
89
 
84
- @media (min-width: @breakpoint-md) {
85
- margin-bottom: var(--ffe-spacing-md);
90
+ button.ffe-card__action--raw {
91
+ background: none;
92
+ color: inherit;
93
+ border: none;
94
+ padding: 0;
95
+ font: inherit;
96
+ cursor: pointer;
97
+ outline: inherit;
98
+ }
99
+
100
+ a.ffe-card__action--raw {
101
+ color: inherit;
102
+ text-decoration: inherit;
103
+ outline: inherit;
104
+ }
105
+
106
+ .ffe-card__action--raw:visited {
107
+ .native & {
108
+ @media (prefers-color-scheme: dark) {
109
+ color: var(--ffe-farge-hvit);
110
+ }
111
+ }
86
112
  }
87
113
  }
package/less/group-card.less ADDED
@@ -0,0 +1,54 @@
1
+ @import 'common-card-styling';
2
+
3
+ .ffe-group-card {
4
+ .common-card-styling();
5
+ .card-background-styling();
6
+
7
+ border: none;
8
+ box-shadow: none;
9
+
10
+ &--shadow {
11
+ box-shadow: var(--ffe-v-cards-common-card-box-shadow);
12
+ }
13
+
14
+ & > :first-child {
15
+ border-radius: var(--ffe-v-cards-common-card-border-radius)
16
+ var(--ffe-v-cards-common-card-border-radius) 0 0;
17
+ }
18
+
19
+ & > :last-child {
20
+ border-radius: 0 0 var(--ffe-v-cards-common-card-border-radius)
21
+ var(--ffe-v-cards-common-card-border-radius);
22
+ }
23
+
24
+ &__element {
25
+ padding: var(--ffe-spacing-sm);
26
+ border: 2px solid transparent;
27
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
28
+
29
+ &--no-padding {
30
+ padding: 0;
31
+ }
32
+
33
+ border-bottom-color: var(
34
+ --ffe-v-cards-common-group-card-separation-border-color
35
+ );
36
+
37
+ &--no-separator,
38
+ &:last-child {
39
+ border-bottom-color: transparent;
40
+ }
41
+
42
+ &--clickable {
43
+ .clickable-card-styling();
44
+ }
45
+ }
46
+ }
47
+
48
+ .native & {
49
+ @media (prefers-color-scheme: dark) {
50
+ .ffe-group-card {
51
+ .card-background-dm-styling();
52
+ }
53
+ }
54
+ }
package/less/icon-card.less CHANGED
@@ -4,6 +4,10 @@
4
4
  .ffe-icon-card {
5
5
  .common-card-styling();
6
6
 
7
+ &--clickable {
8
+ .clickable-card-styling();
9
+ }
10
+
7
11
  display: grid;
8
12
  grid-template-columns: auto 1fr;
9
13
  align-items: center;
package/less/illustration-card.less CHANGED
@@ -4,6 +4,10 @@
4
4
  .ffe-illustration-card {
5
5
  .common-card-styling();
6
6
 
7
+ &--clickable {
8
+ .clickable-card-styling();
9
+ }
10
+
7
11
  display: grid;
8
12
  grid-template-columns: auto 1fr;
9
13
  column-gap: var(--ffe-spacing-md);
package/less/image-card.less CHANGED
@@ -4,6 +4,10 @@
4
4
  .ffe-image-card {
5
5
  .common-card-styling();
6
6
 
7
+ &--clickable {
8
+ .clickable-card-styling();
9
+ }
10
+
7
11
  --border-color: transparent;
8
12
 
9
13
  display: flex;
package/less/stippled-card.less CHANGED
@@ -4,6 +4,20 @@
4
4
  .ffe-stippled-card {
5
5
  .common-card-styling();
6
6
 
7
+ &--clickable {
8
+ .clickable-card-styling();
9
+
10
+ &:focus-within {
11
+ border-style: solid;
12
+ }
13
+
14
+ @media (hover: hover) and (pointer: fine) {
15
+ &:hover {
16
+ border-style: solid;
17
+ }
18
+ }
19
+ }
20
+
7
21
  background: transparent;
8
22
  border: 2px dashed var(--ffe-v-cards-stippled-border-color);
9
23
  box-shadow: none;
@@ -13,27 +27,6 @@
13
27
  padding: var(--ffe-spacing-md);
14
28
  gap: var(--ffe-spacing-md);
15
29
 
16
- &:has(.ffe-card__action:active, .ffe-card__action:focus) {
17
- border-style: solid;
18
- box-shadow: none;
19
- }
20
-
21
- @supports not
22
- selector(&:has(.ffe-card__action:active, .ffe-card__action:focus)) {
23
- &--clickable:focus-within {
24
- border-style: solid;
25
- box-shadow: none;
26
- }
27
- }
28
-
29
- @media (hover: hover) and (pointer: fine) {
30
- &--clickable:hover {
31
- cursor: pointer;
32
- border-style: solid;
33
- box-shadow: none;
34
- }
35
- }
36
-
37
30
  .native & {
38
31
  @media (prefers-color-scheme: dark) {
39
32
  box-shadow: none;
package/less/text-card.less CHANGED
@@ -4,6 +4,10 @@
4
4
  .ffe-text-card {
5
5
  .common-card-styling();
6
6
 
7
+ &--clickable {
8
+ .clickable-card-styling();
9
+ }
10
+
7
11
  display: flex;
8
12
  padding: var(--ffe-spacing-sm) var(--ffe-spacing-lg);
9
13
  flex-flow: column nowrap;
package/less/theme.less CHANGED
@@ -2,11 +2,16 @@
2
2
  :host {
3
3
  --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
4
4
  --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
5
+ --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0
6
+ var(--ffe-v-cards-common-card-box-shadow-color);
5
7
  --ffe-v-cards-common-card-border-radius: 16px;
6
8
  --ffe-v-cards-text-color: var(--ffe-farge-moerkgraa);
7
9
  --ffe-v-cards-image-card-border-hover-color: var(--ffe-farge-vann);
8
10
  --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
9
11
  --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
12
+ --ffe-v-cards-common-group-card-separation-border-color: var(
13
+ --ffe-farge-lysgraa
14
+ );
10
15
 
11
16
  @media (prefers-color-scheme: dark) {
12
17
  .native {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "19.1.3",
3
+ "version": "19.2.1",
4
4
  "description": "Kort for bruk i oversikter",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -16,7 +16,7 @@
16
16
  "test": "npm run lint"
17
17
  },
18
18
  "dependencies": {
19
- "@sb1/ffe-core": "^27.5.4"
19
+ "@sb1/ffe-core": "^28.0.0"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@sb1/ffe-buildtool": "^0.7.0"
@@ -24,5 +24,5 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "83b5c8952328ec39a99040567677ab01c3180f42"
27
+ "gitHead": "4c40e4f22244c9e051239caa01f52519a4add9dd"
28
28
  }