@navikt/ds-css 0.8.0 → 0.8.4

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 (8) hide show
  1. package/baseline/baseline.css +3 -2
  2. package/button.css +72 -86
  3. package/dist/index.css +86 -115
  4. package/form/radio.css +0 -1
  5. package/form/search-field.css +5 -22
  6. package/loader.css +1 -1
  7. package/package.json +6 -6
  8. package/speech-bubble.css +4 -1
package/baseline/baseline.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @import "utility.css";
8
8
 
9
9
  /* Disabled because of UU concerns */
10
+
10
11
  /* @import "smooth-scroll.css"; */
11
12
 
12
13
  html {
@@ -14,8 +15,8 @@ html {
14
15
  }
15
16
 
16
17
  *,
17
- *:before,
18
- *:after {
18
+ *::before,
19
+ *::after {
19
20
  box-sizing: inherit;
20
21
  }
21
22
 
package/button.css CHANGED
@@ -1,41 +1,37 @@
1
1
  :root {
2
- --navds-button-color-text: var(--navds-color-action-default);
3
- --navds-button-color-background: var(--navds-color-background);
4
- --navds-button-color-border: var(--navds-color-action-default);
5
-
6
2
  /* Primary */
7
3
  --navds-button-color-primary-text: var(--navds-color-white);
4
+ --navds-button-color-primary-border-focus: var(--navds-color-white);
8
5
  --navds-button-color-primary-background: var(--navds-color-action-default);
9
- --navds-button-color-primary-border: var(--navds-color-action-default);
10
6
  --navds-button-color-primary-background-hover: var(
11
7
  --navds-color-action-hover
12
8
  );
13
- --navds-button-color-primary-border-hover: var(--navds-color-action-hover);
14
9
  --navds-button-color-primary-background-active: var(
15
10
  --navds-color-action-active
16
11
  );
17
- --navds-button-color-primary-border-focus: var(--navds-color-white);
18
12
 
19
- /* secondary */
13
+ /* Secondary */
14
+ --navds-button-color-secondary-text: var(--navds-color-action-default);
20
15
  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
16
+ --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
17
+ --navds-button-color-secondary-border: var(--navds-color-action-default);
18
+ --navds-button-color-secondary-border-focus-active-hover: var(
19
+ --navds-color-white
20
+ );
21
+ --navds-button-color-secondary-background: var(--navds-color-background);
21
22
  --navds-button-color-secondary-background-hover: var(
22
23
  --navds-color-action-hover
23
24
  );
24
- --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
25
25
  --navds-button-color-secondary-background-active: var(
26
26
  --navds-color-action-active
27
27
  );
28
- --navds-button-color-secondary-border-focus-active-hover: var(
29
- --navds-color-white
30
- );
31
28
 
32
- /* tertiary */
33
- --navds-button-color-tertiary-border: transparent;
34
- --navds-button-color-tertiary-background: transparent;
29
+ /* Tertiary */
30
+ --navds-button-color-tertiary-text: var(--navds-color-action-default);
31
+ --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
35
32
  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
36
33
  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
37
34
  --navds-button-color-tertiary-border-active: var(--navds-color-white);
38
- --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
39
35
  --navds-button-color-tertiary-background-active: var(
40
36
  --navds-color-action-active
41
37
  );
@@ -43,9 +39,7 @@
43
39
  /* Danger */
44
40
  --navds-button-color-danger-text: var(--navds-color-white);
45
41
  --navds-button-color-danger-background: var(--navds-color-danger-default);
46
- --navds-button-color-danger-border: var(--navds-color-danger-default);
47
42
  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
48
- --navds-button-color-danger-border-hover: var(--navds-color-danger-hover);
49
43
  --navds-button-color-danger-background-active: var(
50
44
  --navds-color-danger-active
51
45
  );
@@ -59,25 +53,31 @@
59
53
  .navds-button {
60
54
  display: inline-flex;
61
55
  cursor: pointer;
62
- background-color: var(--navds-button-color-background);
63
- color: var(--navds-button-color-text);
64
56
  margin: 0;
65
57
  text-align: center;
66
58
  text-decoration: none;
67
- border-color: var(--navds-button-color-border);
59
+ border: none;
60
+ background: none;
68
61
  border-radius: 2px;
69
- border-style: solid;
70
- border-width: 2px;
71
- min-height: 48px;
72
62
  min-width: 48px;
73
- padding: var(--navds-spacing-2) var(--navds-spacing-2);
74
- flex-shrink: 0;
63
+ padding: var(--navds-spacing-3);
64
+ }
65
+
66
+ .navds-button--small {
67
+ padding-top: 0.375rem;
68
+ padding-bottom: 0.375rem;
69
+ min-width: 32px;
70
+ }
71
+
72
+ .navds-button:focus {
73
+ outline: none;
74
+ box-shadow: var(--navds-shadow-focus);
75
75
  }
76
76
 
77
77
  .navds-button__inner {
78
+ margin: auto;
78
79
  display: flex;
79
80
  align-items: center;
80
- margin: auto;
81
81
  gap: var(--navds-spacing-2);
82
82
  }
83
83
 
@@ -89,42 +89,60 @@
89
89
  font-size: 1.25rem;
90
90
  }
91
91
 
92
- .navds-button--small {
93
- padding: var(--navds-spacing-1) var(--navds-spacing-2);
94
- min-height: 32px;
92
+ /*************************
93
+ * .navds-button--primary *
94
+ *************************/
95
+
96
+ .navds-button--primary {
97
+ background-color: var(--navds-button-color-primary-background);
98
+ color: var(--navds-button-color-primary-text);
95
99
  }
96
100
 
97
- .navds-button:focus {
98
- outline: none;
99
- box-shadow: var(--navds-shadow-focus);
101
+ .navds-button--primary:hover {
102
+ background-color: var(--navds-button-color-primary-background-hover);
103
+ }
104
+
105
+ .navds-button--primary:active {
106
+ background-color: var(--navds-button-color-primary-background-active);
107
+ }
108
+
109
+ .navds-button--primary:focus {
110
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
111
+ var(--navds-shadow-focus);
100
112
  }
101
113
 
102
114
  /**************************
103
115
  * .navds-button--secondary *
104
116
  **************************/
105
117
 
118
+ .navds-button--secondary {
119
+ color: var(--navds-button-color-secondary-text);
120
+ background-color: var(--navds-button-color-secondary-background);
121
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
122
+ }
123
+
106
124
  .navds-button--secondary:hover {
107
125
  color: var(--navds-button-color-secondary-text-hover);
108
126
  background-color: var(--navds-button-color-secondary-background-hover);
109
- border-color: transparent;
127
+ box-shadow: none;
128
+ }
129
+
130
+ .navds-button--secondary:focus {
131
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
132
+ var(--navds-shadow-focus);
110
133
  }
111
134
 
112
135
  .navds-button--secondary:active {
113
136
  color: var(--navds-button-color-secondary-text-active);
114
137
  background-color: var(--navds-button-color-secondary-background-active);
115
- border-color: transparent;
116
- }
117
-
118
- .navds-button--secondary:focus:hover {
119
- border-color: var(--navds-button-color-secondary-border-focus-active-hover);
120
- border-width: 1px;
121
- padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
138
+ box-shadow: none;
122
139
  }
123
140
 
141
+ .navds-button--secondary:focus:hover,
124
142
  .navds-button--secondary:focus:active {
125
- border-color: var(--navds-button-color-secondary-border-focus-active-hover);
126
- border-width: 1px;
127
- padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
143
+ box-shadow: inset 0 0 0 1px
144
+ var(--navds-button-color-secondary-border-focus-active-hover),
145
+ var(--navds-shadow-focus);
128
146
  }
129
147
 
130
148
  /****************************
@@ -132,76 +150,49 @@
132
150
  ****************************/
133
151
 
134
152
  .navds-button--tertiary {
135
- border-color: var(--navds-button-color-tertiary-border);
136
- background-color: var(--navds-button-color-tertiary-background);
153
+ color: var(--navds-button-color-tertiary-text);
137
154
  }
138
155
 
139
156
  .navds-button--tertiary:hover {
140
- border-color: var(--navds-button-color-tertiary-border-hover);
157
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
141
158
  }
142
159
 
143
160
  .navds-button--tertiary:focus {
144
- border-color: var(--navds-button-color-tertiary-border-focus);
161
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
162
+ var(--navds-shadow-focus);
145
163
  }
146
164
 
147
165
  .navds-button--tertiary:active {
148
166
  color: var(--navds-button-color-tertiary-text-active);
149
167
  background-color: var(--navds-button-color-tertiary-background-active);
150
- border-color: var(--navds-button-color-tertiary-border-active);
151
- border-width: 1px;
152
- padding: calc(0.5rem + 1px) calc(0.5rem + 1px);
168
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
153
169
  }
154
170
 
155
- .navds-button--small.navds-button--tertiary:active {
156
- padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
171
+ .navds-button--tertiary:active:focus {
172
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
173
+ var(--navds-shadow-focus);
157
174
  }
158
175
 
159
176
  /*************************
160
- * .navds-button--primary *
161
177
  * .navds-button--danger *
162
178
  *************************/
163
179
 
164
- .navds-button--primary {
165
- background-color: var(--navds-button-color-primary-background);
166
- border-color: var(--navds-button-color-primary-border);
167
- color: var(--navds-button-color-primary-text);
168
- }
169
-
170
180
  .navds-button--danger {
171
181
  background-color: var(--navds-button-color-danger-background);
172
- border-color: var(--navds-button-color-danger-border);
173
182
  color: var(--navds-button-color-danger-text);
174
183
  }
175
184
 
176
- .navds-button--primary,
177
- .navds-button--danger {
178
- border-width: 1px;
179
- }
180
-
181
- .navds-button--primary:hover {
182
- background-color: var(--navds-button-color-primary-background-hover);
183
- border-color: var(--navds-button-color-primary-border-hover);
184
- }
185
-
186
185
  .navds-button--danger:hover {
187
186
  background-color: var(--navds-button-color-danger-background-hover);
188
- border-color: var(--navds-button-color-danger-border-hover);
189
- }
190
-
191
- .navds-button--primary:active {
192
- background-color: var(--navds-button-color-primary-background-active);
193
187
  }
194
188
 
195
189
  .navds-button--danger:active {
196
190
  background-color: var(--navds-button-color-danger-background-active);
197
191
  }
198
192
 
199
- .navds-button--primary:focus {
200
- border-color: var(--navds-button-color-primary-border-focus);
201
- }
202
-
203
193
  .navds-button--danger:focus {
204
- border-color: var(--navds-button-color-danger-border-focus);
194
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
195
+ var(--navds-shadow-focus);
205
196
  }
206
197
 
207
198
  /**************************
@@ -212,11 +203,6 @@
212
203
  color: var(--navds-button-color-text-disabled);
213
204
  background-color: var(--navds-button-color-background-disabled);
214
205
  cursor: not-allowed;
215
- border-width: 0;
216
206
  box-shadow: none;
217
207
  transform: none;
218
208
  }
219
-
220
- .navds-button:disabled.navds-button--tertiary:active {
221
- padding: var(--navds-spacing-2) var(--navds-spacing-2);
222
- }