@navikt/ds-css 0.18.9 → 0.18.12

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 (6) hide show
  1. package/baseline/baseline.css +1 -1
  2. package/dist/index.css +51 -71
  3. package/form/confirmation-panel.css +6 -66
  4. package/form/error-summary.css +12 -5
  5. package/loader.css +32 -3
  6. 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,19 @@
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
+ }
32
+
33
+ .navds-error-summary__list > * {
34
+ color: var(--navds-global-color-blue-500);
30
35
  }
31
36
 
32
37
  .navds-error-summary--small > .navds-error-summary__list {
33
- margin: 0.5rem 0;
38
+ margin: var(--navds-spacing-2) 0;
39
+ gap: var(--navds-spacing-2);
40
+ padding-left: var(--navds-spacing-5);
34
41
  }
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
 
@@ -18,11 +18,14 @@
18
18
  width: 1.5rem;
19
19
  display: inline-block;
20
20
  position: relative;
21
- animation: loader-rotate 1.4s linear infinite;
21
+ animation: loader-rotate 1.8s linear infinite;
22
+ stroke-width: 6;
23
+
24
+ --navds-loader-background-stroke-width: 5.9;
22
25
  }
23
26
 
24
27
  .navds-loader__foreground {
25
- animation: loader-dasharray 1.4s ease-in-out infinite;
28
+ animation: loader-dasharray 1.8s ease-in-out infinite;
26
29
  stroke-dasharray: 80px, 200px;
27
30
  stroke-dashoffset: 0;
28
31
  stroke: var(--navds-loader-color-foreground);
@@ -30,6 +33,7 @@
30
33
 
31
34
  .navds-loader__background {
32
35
  stroke: var(--navds-loader-color-background);
36
+ stroke-width: var(--navds-loader-background-stroke-width);
33
37
  }
34
38
 
35
39
  .navds-loader--neutral .navds-loader__foreground {
@@ -52,28 +56,53 @@
52
56
  stroke: var(--navds-loader-color-transparent-background);
53
57
  }
54
58
 
59
+ .navds-loader--3xlarge {
60
+ width: 5.5rem;
61
+ stroke-width: 5;
62
+
63
+ --navds-loader-background-stroke-width: 4.8;
64
+ }
65
+
55
66
  .navds-loader--2xlarge {
56
67
  width: 4rem;
68
+ stroke-width: 6;
69
+
70
+ --navds-loader-background-stroke-width: 5.8;
57
71
  }
58
72
 
59
73
  .navds-loader--xlarge {
60
74
  width: 2.5rem;
75
+ stroke-width: 6;
76
+
77
+ --navds-loader-background-stroke-width: 5.8;
61
78
  }
62
79
 
63
80
  .navds-loader--large {
64
81
  width: 2rem;
82
+ stroke-width: 7;
83
+
84
+ --navds-loader-background-stroke-width: 6.8;
65
85
  }
66
86
 
67
87
  .navds-loader--medium {
68
88
  width: 1.5rem;
89
+ stroke-width: 7;
90
+
91
+ --navds-loader-background-stroke-width: 6.8;
69
92
  }
70
93
 
71
94
  .navds-loader--small {
72
95
  width: 1.25rem;
96
+ stroke-width: 8;
97
+
98
+ --navds-loader-background-stroke-width: 7.8;
73
99
  }
74
100
 
75
101
  .navds-loader--xsmall {
76
102
  width: 1rem;
103
+ stroke-width: 8;
104
+
105
+ --navds-loader-background-stroke-width: 7.8;
77
106
  }
78
107
 
79
108
  @keyframes loader-rotate {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.18.9",
3
+ "version": "0.18.12",
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": "2817353f8e1192e6f10ffa77a2532bf002cf729f"
30
+ "gitHead": "f47cfdcb9eccd1d9f559fb6c149fe9f535e4a3a9"
31
31
  }