@navikt/ds-css 0.18.10 → 0.18.13

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 (5) hide show
  1. package/dist/index.css +38 -68
  2. package/form/confirmation-panel.css +6 -66
  3. package/form/error-summary.css +13 -5
  4. package/loader.css +18 -1
  5. package/package.json +2 -2
package/form/confirmation-panel.css CHANGED
@@ -5,6 +5,9 @@
5
5
  --navds-confirmation-panel-color-background-checked: var(
6
6
  --navds-global-color-green-50
7
7
  );
8
+ --navds-confirmation-panel-color-background-error: var(
9
+ --navds-global-color-red-50
10
+ );
8
11
  --navds-confirmation-panel-color-border: var(
9
12
  --navds-semantic-color-feedback-warning-border
10
13
  );
@@ -12,32 +15,14 @@
12
15
  --navds-semantic-color-feedback-success-border
13
16
  );
14
17
  --navds-confirmation-panel-color-border-error: var(
15
- --navds-semantic-color-feedback-danger-background
16
- );
17
- --navds-confirmation-panel-color-background-error: var(
18
- --navds-global-color-red-50
19
- );
20
- --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
21
- --navds-global-color-green-700
22
- );
23
- --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
24
- --navds-global-color-green-700
25
- );
26
- --navds-confirmation-panel-color-checkbox-background-checked: var(
27
- --navds-global-color-green-500
28
- );
29
- --navds-confirmation-panel-color-checkbox-border-checked: var(
30
- --navds-semantic-color-feedback-success-border
31
- );
32
- --navds-confirmation-panel-color-checkbox-label-checked: var(
33
- --navds-semantic-color-text
18
+ --navds-semantic-color-feedback-danger-border
34
19
  );
35
20
  }
36
21
 
37
22
  .navds-confirmation-panel__inner {
38
23
  display: flex;
39
24
  flex-direction: column;
40
- gap: var(--navds-spacing-4);
25
+ gap: var(--navds-spacing-3);
41
26
  padding: var(--navds-spacing-4);
42
27
  border-radius: var(--navds-border-radius-medium);
43
28
  border: 1px solid var(--navds-confirmation-panel-color-border);
@@ -49,11 +34,6 @@
49
34
  max-width: 80ch;
50
35
  }
51
36
 
52
- .navds-confirmation-panel--small .navds-confirmation-panel__inner {
53
- padding: var(--navds-spacing-3);
54
- gap: var(--navds-spacing-2);
55
- }
56
-
57
37
  .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
58
38
  background-color: var(--navds-confirmation-panel-color-background-checked);
59
39
  border-color: var(--navds-confirmation-panel-color-border-checked);
@@ -61,45 +41,5 @@
61
41
 
62
42
  .navds-confirmation-panel--error .navds-confirmation-panel__inner {
63
43
  background-color: var(--navds-confirmation-panel-color-background-error);
64
- border: 1px solid transparent;
65
- }
66
-
67
- .navds-confirmation-panel
68
- .navds-checkbox__input:hover
69
- + .navds-checkbox__label {
70
- text-decoration: underline;
71
- }
72
-
73
- .navds-confirmation-panel--checked
74
- .navds-checkbox__input:hover
75
- + .navds-checkbox__label {
76
- color: var(--navds-confirmation-panel-color-checkbox-label-checked);
77
- }
78
-
79
- .navds-confirmation-panel--checked
80
- .navds-checkbox__input
81
- + .navds-checkbox__label::before {
82
- transition: none;
83
- background-color: var(
84
- --navds-confirmation-panel-color-checkbox-background-checked
85
- );
86
- border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
87
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
88
- }
89
-
90
- .navds-confirmation-panel--checked
91
- .navds-checkbox__input:hover
92
- + .navds-checkbox__label::before {
93
- background-color: var(
94
- --navds-confirmation-panel-color-checkbox-background-checked-hover
95
- );
96
- border-color: var(
97
- --navds-confirmation-panel-color-checkbox-border-checked-hover
98
- );
99
- }
100
-
101
- .navds-confirmation-panel--checked
102
- .navds-checkbox__input:focus:hover
103
- + .navds-checkbox__label::before {
104
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
44
+ border-color: var(--navds-confirmation-panel-color-border-error);
105
45
  }
package/form/error-summary.css CHANGED
@@ -9,12 +9,12 @@
9
9
 
10
10
  .navds-error-summary {
11
11
  background-color: var(--navds-error-summary-color-background);
12
- padding: var(--navds-spacing-4);
12
+ padding: var(--navds-spacing-5);
13
13
  border: 4px solid var(--navds-error-summary-color-border);
14
14
  }
15
15
 
16
16
  .navds-error-summary--small {
17
- padding: var(--navds-spacing-2);
17
+ padding: var(--navds-spacing-3);
18
18
  }
19
19
 
20
20
  .navds-error-summary:focus {
@@ -23,12 +23,20 @@
23
23
  }
24
24
 
25
25
  .navds-error-summary__list {
26
- margin: 1rem 0;
26
+ margin: var(--navds-spacing-3) 0;
27
27
  display: flex;
28
28
  flex-direction: column;
29
- gap: 0.25rem;
29
+ gap: var(--navds-spacing-3);
30
+ padding-left: var(--navds-spacing-6);
31
+ list-style: inherit;
32
+ }
33
+
34
+ .navds-error-summary__list > * {
35
+ color: var(--navds-global-color-blue-500);
30
36
  }
31
37
 
32
38
  .navds-error-summary--small > .navds-error-summary__list {
33
- margin: 0.5rem 0;
39
+ margin: var(--navds-spacing-2) 0;
40
+ gap: var(--navds-spacing-2);
41
+ padding-left: var(--navds-spacing-5);
34
42
  }
package/loader.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --navds-loader-color-inverted-foreground: var(
11
11
  --navds-semantic-color-component-background-light
12
12
  );
13
- --navds-loader-color-inverted-background: rgb(255 255 255 / 0.3);
13
+ --navds-loader-color-inverted-background: var(--navds-global-color-gray-600);
14
14
  --navds-loader-color-transparent-background: transparent;
15
15
  }
16
16
 
@@ -20,6 +20,8 @@
20
20
  position: relative;
21
21
  animation: loader-rotate 1.8s linear infinite;
22
22
  stroke-width: 6;
23
+
24
+ --navds-loader-background-stroke-width: 5.9;
23
25
  }
24
26
 
25
27
  .navds-loader__foreground {
@@ -31,6 +33,7 @@
31
33
 
32
34
  .navds-loader__background {
33
35
  stroke: var(--navds-loader-color-background);
36
+ stroke-width: var(--navds-loader-background-stroke-width);
34
37
  }
35
38
 
36
39
  .navds-loader--neutral .navds-loader__foreground {
@@ -56,36 +59,50 @@
56
59
  .navds-loader--3xlarge {
57
60
  width: 5.5rem;
58
61
  stroke-width: 5;
62
+
63
+ --navds-loader-background-stroke-width: 4.8;
59
64
  }
60
65
 
61
66
  .navds-loader--2xlarge {
62
67
  width: 4rem;
63
68
  stroke-width: 6;
69
+
70
+ --navds-loader-background-stroke-width: 5.8;
64
71
  }
65
72
 
66
73
  .navds-loader--xlarge {
67
74
  width: 2.5rem;
68
75
  stroke-width: 6;
76
+
77
+ --navds-loader-background-stroke-width: 5.8;
69
78
  }
70
79
 
71
80
  .navds-loader--large {
72
81
  width: 2rem;
73
82
  stroke-width: 7;
83
+
84
+ --navds-loader-background-stroke-width: 6.8;
74
85
  }
75
86
 
76
87
  .navds-loader--medium {
77
88
  width: 1.5rem;
78
89
  stroke-width: 7;
90
+
91
+ --navds-loader-background-stroke-width: 6.8;
79
92
  }
80
93
 
81
94
  .navds-loader--small {
82
95
  width: 1.25rem;
83
96
  stroke-width: 8;
97
+
98
+ --navds-loader-background-stroke-width: 7.8;
84
99
  }
85
100
 
86
101
  .navds-loader--xsmall {
87
102
  width: 1rem;
88
103
  stroke-width: 8;
104
+
105
+ --navds-loader-background-stroke-width: 7.8;
89
106
  }
90
107
 
91
108
  @keyframes loader-rotate {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.18.10",
3
+ "version": "0.18.13",
4
4
  "description": "Css for NAV Designsystem components",
5
5
  "author": "NAV Designsystem team",
6
6
  "keywords": [
@@ -27,5 +27,5 @@
27
27
  "postcss-combine-duplicated-selectors": "10.0.3",
28
28
  "postcss-import": "^14.0.2"
29
29
  },
30
- "gitHead": "3e0e9ad15c93d9a3cd82d6d9a353cb0c4da0d8b6"
30
+ "gitHead": "e6dfbb7a4f5a58c630a913da16af4b1c0add129a"
31
31
  }