@navikt/ds-css 0.12.11-next.0 → 0.12.14

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 (10) hide show
  1. package/accordion.css +46 -24
  2. package/button.css +17 -2
  3. package/dist/index.css +101 -212
  4. package/form/fieldset.css +1 -1
  5. package/form/form.css +0 -2
  6. package/form/search-field.css +25 -153
  7. package/form/switch.css +1 -1
  8. package/form/text-field.css +9 -2
  9. package/loader.css +0 -23
  10. package/package.json +2 -2
package/form/fieldset.css CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  /* Applied when hideLegend is applied to fieldset */
17
- .navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
17
+ .navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
18
18
  margin-top: 0;
19
19
  }
20
20
 
package/form/form.css CHANGED
@@ -4,8 +4,6 @@
4
4
  }
5
5
 
6
6
  /* Applied when hideLabel is applied to form-element */
7
- .navds-form-field > .sr-only + :not(:first-child):not(:empty),
8
- .navds-form-field > .sr-only + input:not(:first-child),
9
7
  .navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
10
8
  .navds-form-field > .navds-sr-only + input:not(:first-child) {
11
9
  margin-top: 0;
package/form/search-field.css CHANGED
@@ -1,48 +1,11 @@
1
1
  :root {
2
- --navds-search-field-color-input-hover: var(
3
- --navds-semantic-color-interaction-primary
2
+ --navds-search-field-color-shadow-error: var(
3
+ --navds-semantic-color-interaction-danger
4
4
  );
5
- --navds-search-field-color-button-text: var(--navds-semantic-color-text);
6
- --navds-search-field-color-button-hover: var(
7
- --navds-semantic-color-interaction-primary
5
+ --navds-search-field-color-border-error: var(
6
+ --navds-semantic-color-interaction-danger
8
7
  );
9
- --navds-search-field-color-button-border-hover-focus: var(
10
- --navds-semantic-color-interaction-primary
11
- );
12
- --navds-search-field-color-button-border-focus: var(
13
- --navds-semantic-color-border
14
- );
15
- --navds-search-field-color-input-inverted: var(
16
- --navds-semantic-color-component-background-light
17
- );
18
- --navds-search-field-color-input-inverted-border: var(
19
- --navds-semantic-color-component-background-light
20
- );
21
- --navds-search-field-color-input-inverted-background: var(
22
- --navds-semantic-color-component-background-inverted
23
- );
24
- --navds-search-field-color-input-inverted-background-active: var(
25
- --navds-semantic-color-component-background-light
26
- );
27
- --navds-search-field-color-input-inverted-active: var(
28
- --navds-semantic-color-text
29
- );
30
- --navds-search-field-color-input-inverted-border-active: var(
31
- --navds-semantic-color-component-background-inverted
32
- );
33
- --navds-search-field-color-input-inverted-background-focus: var(
34
- --navds-semantic-color-component-background-light
35
- );
36
- --navds-search-field-color-input-inverted-focus: var(
37
- --navds-semantic-color-text
38
- );
39
- --navds-search-field-color-input-inverted-border-focus: var(
40
- --navds-semantic-color-component-background-inverted
41
- );
42
- --navds-search-field-color-input-inverted-hover-focus: var(
43
- --navds-semantic-color-focus-inverted
44
- );
45
- --navds-search-field-color-button-inverted-focus: var(
8
+ --navds-search-field-color-clearbutton-border: var(
46
9
  --navds-semantic-color-border
47
10
  );
48
11
  }
@@ -51,137 +14,46 @@
51
14
  display: flex;
52
15
  align-items: center;
53
16
  justify-content: center;
54
- position: relative;
55
- }
56
-
57
- .navds-search-field__input-icon {
58
- position: absolute;
59
- left: 0;
60
- padding: 0 var(--navds-spacing-4);
61
- align-items: center;
62
- display: flex;
63
- pointer-events: none;
64
- }
65
-
66
- .navds-search-field__input {
67
- padding-left: var(--navds-spacing-11);
68
- padding-right: var(--navds-spacing-12);
69
- border-width: 1px;
70
17
  }
71
18
 
72
19
  .navds-form-field--small .navds-search-field__input {
20
+ padding: 0.15rem;
73
21
  min-height: 32px;
74
- padding: 0.15rem var(--navds-spacing-8) 0.15rem var(--navds-spacing-7);
75
- }
76
-
77
- .navds-form-field--small .navds-search-field__input-icon {
78
- padding: 0 var(--navds-spacing-2);
79
- }
80
-
81
- .navds-search-field__input:hover {
82
- border-color: var(--navds-search-field-color-input-hover);
83
22
  }
84
23
 
85
- /* Clear Button */
86
-
87
- .navds-search-field__clear-button {
88
- position: absolute;
89
- right: 0;
90
- color: var(--navds-search-field-color-button-text);
91
- appearance: none;
92
- background: none;
93
- height: 48px;
94
- width: 48px;
95
- display: flex;
96
- align-items: center;
97
- justify-content: center;
98
- border: 1px solid transparent;
99
- border-radius: 4px;
100
- cursor: pointer;
101
- font-size: 1.5rem;
102
- }
103
-
104
- .navds-form-field--small .navds-search-field__clear-button {
105
- height: 32px;
106
- width: 32px;
107
- font-size: 1rem;
108
- }
109
-
110
- .navds-search-field__clear-button:focus {
111
- box-shadow: var(--navds-shadow-focus);
112
- border-color: var(--navds-search-field-color-button-border-focus);
113
- outline: none;
114
- }
115
-
116
- .navds-search-field__clear-button:hover {
117
- color: var(--navds-search-field-color-button-hover);
24
+ .navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
25
+ border-radius: 0;
118
26
  }
119
27
 
120
- .navds-search-field__clear-button:hover:focus {
121
- border-color: var(--navds-search-field-color-button-border-hover-focus);
28
+ .navds-search-field__input-wrapper > :first-child {
29
+ border-top-right-radius: 0;
30
+ border-bottom-right-radius: 0;
122
31
  }
123
32
 
124
- /* Inverted */
125
- .navds-search-field--inverted
126
- > .navds-search-field__input-wrapper
127
- > .navds-search-field__input {
128
- background-color: var(--navds-search-field-color-inverted-background);
129
- color: var(--navds-search-field-color-input-inverted);
130
- border-color: var(--navds-search-field-color-input-inverted-border);
33
+ .navds-search-field__input-wrapper > :last-child {
34
+ border-top-left-radius: 0;
35
+ border-bottom-left-radius: 0;
131
36
  }
132
37
 
133
- .navds-search-field--inverted
134
- > .navds-search-field__input-wrapper[data-value="true"]
135
- > .navds-search-field__input {
136
- background-color: var(
137
- --navds-search-field-color-input-inverted-background-active
138
- );
139
- color: var(--navds-search-field-color-input-inverted-active);
140
- border-color: var(--navds-search-field-color-input-inverted-border-active);
141
- }
142
-
143
- .navds-search-field--inverted
144
- > .navds-search-field__input-wrapper[data-value="true"] {
145
- color: var(--navds-search-field-color-input-inverted-active);
146
- }
147
-
148
- .navds-search-field--inverted > .navds-search-field__input-wrapper {
149
- color: var(--navds-search-field-color-input-inverted);
150
- }
151
-
152
- .navds-search-field--inverted
153
- > .navds-search-field__input-wrapper
154
- > .navds-search-field__input:focus {
155
- background-color: var(
156
- --navds-search-field-color-input-inverted-background-focus
157
- );
158
- color: var(--navds-search-field-color-input-inverted-focus);
159
- border-color: var(--navds-search-field-color-input-inverted-border-focus);
160
- box-shadow: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
38
+ .navds-search-field__input-wrapper > :last-child:first-child {
39
+ border-radius: 4px;
161
40
  }
162
41
 
163
- .navds-search-field--inverted
164
- > .navds-search-field__input-wrapper:focus-within {
165
- color: var(--navds-search-field-color-input-inverted-focus);
42
+ .navds-search-field__input-wrapper :focus {
43
+ z-index: var(--navds-z-index-focus);
166
44
  }
167
45
 
168
- /* Inveted clear button */
169
-
170
- .navds-search-field--inverted
171
- > .navds-search-field__input-wrapper
172
- > .navds-search-field__clear-button:focus {
173
- box-shadow: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
174
- border-color: var(--navds-search-field-color-button-inverted-focus);
175
- outline: none;
46
+ .navds-search-field__button,
47
+ .navds-search-field__clear-button {
48
+ flex-shrink: 0;
176
49
  }
177
50
 
178
- .navds-search-field--inverted
179
- > .navds-search-field__input-wrapper
180
- > .navds-search-field__clear-button:hover:focus {
181
- border-color: var(--navds-search-field-color-input-inverted-hover-focus);
51
+ .navds-search-field--error
52
+ .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
53
+ box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
54
+ border-color: var(--navds-search-field-color-border-error);
182
55
  }
183
56
 
184
- /* disabled */
185
57
  .navds-search-field--disabled {
186
58
  opacity: 0.3;
187
59
  }
package/form/switch.css CHANGED
@@ -210,7 +210,7 @@
210
210
  appearance: none;
211
211
  }
212
212
 
213
- .navds-switch--disabled {
213
+ .navds-switch--disabled:not(.navds-switch--loading) {
214
214
  opacity: 0.3;
215
215
  }
216
216
 
package/form/text-field.css CHANGED
@@ -24,13 +24,13 @@
24
24
  padding: 0.5rem;
25
25
  background-color: var(--navds-text-field-color-background);
26
26
  border-radius: 4px;
27
- border: 2px solid var(--navds-text-field-color-border);
27
+ border: 1px solid var(--navds-text-field-color-border);
28
28
  min-height: 48px;
29
29
  width: 100%;
30
30
  }
31
31
 
32
32
  .navds-form-field--small > .navds-text-field__input {
33
- padding: 0 0.15rem;
33
+ padding: 0 0.25rem;
34
34
  min-height: 32px;
35
35
  }
36
36
 
@@ -52,6 +52,13 @@
52
52
  */
53
53
  .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
54
54
  border-color: var(--navds-text-field-color-border-error);
55
+ box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
56
+ }
57
+
58
+ .navds-text-field--error
59
+ > .navds-text-field__input:focus:not(:hover):not(:disabled) {
60
+ box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
61
+ var(--navds-shadow-focus);
55
62
  }
56
63
 
57
64
  /* Disabled handling */
package/loader.css CHANGED
@@ -12,8 +12,6 @@
12
12
  );
13
13
  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
14
14
  --navds-loader-color-transparent-background: transparent;
15
- --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
16
- --navds-loader-color-on-button-foreground: currentColor;
17
15
  }
18
16
 
19
17
  .navds-loader {
@@ -78,27 +76,6 @@
78
76
  width: 1rem;
79
77
  }
80
78
 
81
- /*
82
- * Button spesific styling
83
- */
84
-
85
- .navds-button .navds-loader .navds-loader__foreground {
86
- stroke: var(--navds-loader-color-on-button-foreground);
87
- }
88
-
89
- .navds-button:hover .navds-loader .navds-loader__background {
90
- stroke: var(--navds-loader-color-on-button-background);
91
- }
92
-
93
- .navds-button:active .navds-loader .navds-loader__background {
94
- stroke: var(--navds-loader-color-on-button-background);
95
- }
96
-
97
- .navds-button--primary .navds-loader .navds-loader__background,
98
- .navds-button--danger .navds-loader .navds-loader__background {
99
- stroke: var(--navds-loader-color-on-button-background);
100
- }
101
-
102
79
  @keyframes loader-rotate {
103
80
  100% {
104
81
  transform: rotate(360deg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.12.11-next.0",
3
+ "version": "0.12.14",
4
4
  "private": false,
5
5
  "description": "Css for NAV Designsystem components",
6
6
  "author": "NAV Designsystem team",
@@ -27,5 +27,5 @@
27
27
  "postcss-cli": "^8.3.1",
28
28
  "postcss-import": "^14.0.2"
29
29
  },
30
- "gitHead": "d9174b43520c8691e6f539ed7c76554fb50dadd0"
30
+ "gitHead": "335bc629229df5585f3b43d06ceb8d5bd46f218f"
31
31
  }