@sb1/ffe-cards 20.1.2 → 20.1.3

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 (9) hide show
  1. package/less/card-base.less +2 -4
  2. package/less/common-card-styling.less +2 -12
  3. package/less/components.less +1 -1
  4. package/less/group-card.less +3 -39
  5. package/less/image-card.less +1 -1
  6. package/less/stippled-card.less +0 -6
  7. package/less/text-card.less +3 -3
  8. package/less/theme.less +22 -9
  9. package/package.json +2 -2
package/less/card-base.less CHANGED
@@ -27,11 +27,9 @@
27
27
  &--text-center {
28
28
  text-align: center;
29
29
  }
30
- }
31
30
 
32
- .regard-color-scheme-preference & {
33
- @media (prefers-color-scheme: dark) {
34
- .ffe-card-base {
31
+ .regard-color-scheme-preference & {
32
+ @media (prefers-color-scheme: dark) {
35
33
  .card-background-dm-styling();
36
34
  }
37
35
  }
package/less/common-card-styling.less CHANGED
@@ -2,19 +2,13 @@
2
2
  background: var(--ffe-v-cards-common-card-background-color);
3
3
  box-shadow: var(--ffe-v-cards-common-card-box-shadow);
4
4
  margin: 0 0 var(--ffe-spacing-2xs);
5
- border: 2px solid transparent;
5
+ border: 2px solid var(--ffe-v-cards-common-card-border-color);
6
6
  border-radius: var(--ffe-v-cards-common-card-border-radius);
7
7
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
8
8
  outline: none;
9
9
  width: 100%;
10
10
  text-decoration: none;
11
11
 
12
- .regard-color-scheme-preference & {
13
- @media (prefers-color-scheme: dark) {
14
- color: var(--ffe-farge-hvit);
15
- }
16
- }
17
-
18
12
  @media (min-width: @breakpoint-md) {
19
13
  margin-bottom: var(--ffe-spacing-md);
20
14
  }
@@ -105,10 +99,6 @@
105
99
  }
106
100
 
107
101
  .ffe-card__action--raw:visited {
108
- .regard-color-scheme-preference & {
109
- @media (prefers-color-scheme: dark) {
110
- color: var(--ffe-farge-hvit);
111
- }
112
- }
102
+ color: var(--ffe-v-cards-clickabe-card-link-visited-color);
113
103
  }
114
104
  }
package/less/components.less CHANGED
@@ -10,7 +10,7 @@
10
10
  &__subtext {
11
11
  &:extend(.ffe-small-text);
12
12
 
13
- color: var(--ffe-v-cards-text-color);
13
+ color: var(--ffe-v-cards-subtext-color);
14
14
  margin: var(--ffe-spacing-2xs) 0 0 0;
15
15
  }
16
16
 
package/less/group-card.less CHANGED
@@ -5,7 +5,7 @@
5
5
  .card-background-styling();
6
6
 
7
7
  position: relative;
8
- border: none;
8
+ border: var(--ffe-v-cards-common-group-card-border);
9
9
  box-shadow: none;
10
10
 
11
11
  &--shadow {
@@ -40,10 +40,6 @@
40
40
  display: flex;
41
41
  justify-content: center;
42
42
  align-items: center;
43
-
44
- &--clickable {
45
- color: var(--ffe-farge-fjell);
46
- }
47
43
  }
48
44
 
49
45
  &__title,
@@ -83,42 +79,10 @@
83
79
  --ffe-v-cards-common-group-card-separation-border-color
84
80
  );
85
81
  }
86
- }
87
82
 
88
- .regard-color-scheme-preference & {
89
- @media (prefers-color-scheme: dark) {
90
- .ffe-group-card {
83
+ .regard-color-scheme-preference & {
84
+ @media (prefers-color-scheme: dark) {
91
85
  .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
- }
122
86
  }
123
87
  }
124
88
  }
package/less/image-card.less CHANGED
@@ -13,7 +13,7 @@
13
13
  display: flex;
14
14
  padding: 0;
15
15
  max-width: 290px;
16
- border: 0;
16
+ border: var(--ffe-v-cards-image-card-border);
17
17
  flex-flow: column nowrap;
18
18
 
19
19
  .ffe-image-card__image-overlay,
package/less/stippled-card.less CHANGED
@@ -26,12 +26,6 @@
26
26
  align-items: center;
27
27
  padding: var(--ffe-spacing-md);
28
28
  gap: var(--ffe-spacing-md);
29
-
30
- .regard-color-scheme-preference & {
31
- @media (prefers-color-scheme: dark) {
32
- box-shadow: none;
33
- }
34
- }
35
29
  }
36
30
 
37
31
  .ffe-stippled-card__img--icon {
package/less/text-card.less CHANGED
@@ -18,8 +18,8 @@
18
18
  @media (min-width: @breakpoint-md) {
19
19
  min-height: 100px;
20
20
  }
21
- }
22
21
 
23
- .ffe-text-card--left-align {
24
- text-align: left;
22
+ &--left-align {
23
+ text-align: left;
24
+ }
25
25
  }
package/less/theme.less CHANGED
@@ -1,33 +1,46 @@
1
1
  :root,
2
2
  :host {
3
+ --ffe-v-cards-common-text-color: var(--ffe-g-text-color);
3
4
  --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
5
+ --ffe-v-cards-common-card-border-color: transparent;
4
6
  --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
5
7
  --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0
6
8
  var(--ffe-v-cards-common-card-box-shadow-color);
7
9
  --ffe-v-cards-common-card-border-radius: 16px;
8
- --ffe-v-cards-text-color: var(--ffe-farge-moerkgraa);
10
+ --ffe-v-cards-clickabe-card-link-visited-color: inherit;
11
+ --ffe-v-cards-subtext-color: var(--ffe-farge-moerkgraa);
9
12
  --ffe-v-cards-border-hover-color: var(--ffe-farge-vann);
10
13
  --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
11
14
  --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
15
+ --ffe-v-cards-image-card-border: none;
16
+ --ffe-v-cards-common-group-card-border: none;
12
17
  --ffe-v-cards-common-group-card-separation-border-color: var(
13
18
  --ffe-farge-lysgraa
14
19
  );
15
- --ffe-v-cards-common-group-card-separation-border-color-dm: var(
16
- --ffe-farge-koksgraa
17
- );
18
20
  --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);
20
21
 
21
22
  @media (prefers-color-scheme: dark) {
22
23
  .regard-color-scheme-preference {
24
+ --ffe-v-cards-common-text-color: var(--ffe-farge-hvit);
23
25
  --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
24
- --ffe-v-cards-common-card-box-shadow-color: var(
25
- --ffe-farge-moerkgraa
26
+ --ffe-v-cards-common-card-border-color: var(--ffe-farge-koksgraa);
27
+ --ffe-v-cards-common-card-box-shadow: none;
28
+ --ffe-v-cards-clickabe-card-link-visited-color: var(
29
+ --ffe-farge-hvit
26
30
  );
27
- --ffe-v-cards-text-color: var(--ffe-farge-graa);
31
+ --ffe-v-cards-subtext-color: var(--ffe-farge-graa);
32
+ --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
28
33
  --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
29
34
  --ffe-v-cards-icon-color: var(--ffe-farge-vann-70);
30
- --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
35
+ --ffe-v-cards-image-card-border: 1px solid var(--ffe-farge-koksgraa);
36
+ --ffe-v-cards-common-group-card-border: 1px solid
37
+ var(--ffe-farge-koksgraa);
38
+ --ffe-v-cards-common-group-card-separation-border-color: var(
39
+ --ffe-farge-koksgraa
40
+ );
41
+ --ffe-v-group-card-footer-background-color: var(
42
+ --ffe-farge-koksgraa
43
+ );
31
44
  }
32
45
  }
33
46
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-cards",
3
- "version": "20.1.2",
3
+ "version": "20.1.3",
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": "ff16d78f24c2bf9dd5b7da1cf33a52e09ea3a523"
27
+ "gitHead": "f7768299ab6debc896d9728ea06ce957f1b01ae3"
28
28
  }