@danske/sapphire-css 31.1.1 → 31.1.2

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 (19) hide show
  1. package/components/accordion/accordion.module.css +7 -2
  2. package/components/button/button.module.css +240 -72
  3. package/components/button/button.module.css.d.ts +3 -0
  4. package/components/buttonGroup/buttonGroup.module.css +3 -1
  5. package/components/calendar/calendar.module.css +89 -29
  6. package/components/checkbox/checkbox.module.css +27 -9
  7. package/components/dateField/dateField.module.css +9 -3
  8. package/components/dropzone/dropzone.module.css +12 -4
  9. package/components/iconButton/iconButton.module.css +190 -60
  10. package/components/iconButton/iconButton.module.css.d.ts +3 -1
  11. package/components/link/link.module.css +15 -5
  12. package/components/list/list.module.css +3 -1
  13. package/components/listbox/listbox.module.css +9 -3
  14. package/components/radio/radio.module.css +6 -2
  15. package/components/table/table.module.css +7 -2
  16. package/components/tabs/tabs.module.css +6 -2
  17. package/components/tag/tag.module.css +6 -2
  18. package/components/textField/textField.module.css +3 -1
  19. package/package.json +2 -2
package/components/calendar/calendar.module.css CHANGED
@@ -191,9 +191,13 @@
191
191
  transition-duration: var(--sapphire-calendar-time-transition);
192
192
  }
193
193
 
194
- .sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
194
+ .sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(
195
+ .is-active
196
+ ):not(.js-hover):hover
195
197
  .sapphire-calendar__button-text,
196
- .sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
198
+ .sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(
199
+ .is-active
200
+ ).is-hover
197
201
  .sapphire-calendar__button-text {
198
202
  background-color: var(--sapphire-calendar-color-background-button-hover);
199
203
  transition-duration: var(--sapphire-calendar-time-transition);
@@ -227,20 +231,30 @@
227
231
  );
228
232
  }
229
233
 
230
- .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
234
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
235
+ :disabled
236
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
231
237
  .sapphire-calendar__button-text,
232
- .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
238
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
239
+ :disabled
240
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover
233
241
  .sapphire-calendar__button-text {
234
242
  background-color: var(
235
243
  --sapphire-calendar-color-background-range-selection-hover
236
244
  );
237
245
  }
238
246
 
239
- .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled).is-active
247
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
248
+ :disabled
249
+ ):not(.is-disabled).is-active
240
250
  .sapphire-calendar__button-text,
241
- .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):active
251
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
252
+ :disabled
253
+ ):not(.is-disabled):active
242
254
  .sapphire-calendar__button-text,
243
- .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):focus-visible:active
255
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
256
+ :disabled
257
+ ):not(.is-disabled):focus-visible:active
244
258
  .sapphire-calendar__button-text {
245
259
  background-color: var(
246
260
  --sapphire-calendar-color-background-range-selection-active
@@ -249,14 +263,18 @@
249
263
 
250
264
  .sapphire-calendar__button.sapphire-calendar__button--range-selection.is-focus
251
265
  .sapphire-calendar__button-text,
252
- .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(.js-focus):focus-visible
266
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection:not(
267
+ .js-focus
268
+ ):focus-visible
253
269
  .sapphire-calendar__button-text {
254
270
  background-color: var(
255
271
  --sapphire-calendar-color-background-range-selection-focus
256
272
  );
257
273
  }
258
274
 
259
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection)
275
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
276
+ .sapphire-calendar__button--range-selection
277
+ )
260
278
  .sapphire-calendar__button-text,
261
279
  .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start
262
280
  .sapphire-calendar__button-text,
@@ -271,53 +289,93 @@
271
289
  outline: none;
272
290
  }
273
291
 
274
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
292
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
293
+ .sapphire-calendar__button--range-selection
294
+ ):not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(
295
+ .js-hover
296
+ ):hover
275
297
  .sapphire-calendar__button-text,
276
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
298
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
299
+ .sapphire-calendar__button--range-selection
300
+ ):not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
277
301
  .sapphire-calendar__button-text,
278
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
302
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(
303
+ :disabled
304
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
279
305
  .sapphire-calendar__button-text,
280
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
306
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(
307
+ :disabled
308
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover
281
309
  .sapphire-calendar__button-text,
282
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
310
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(
311
+ :disabled
312
+ ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
283
313
  .sapphire-calendar__button-text,
284
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
314
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(
315
+ :disabled
316
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover
285
317
  .sapphire-calendar__button-text {
286
318
  background-color: var(--sapphire-calendar-color-background-selected-hover);
287
319
  }
288
320
 
289
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled).is-active
321
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
322
+ .sapphire-calendar__button--range-selection
323
+ ):not(:disabled):not(.is-disabled).is-active
290
324
  .sapphire-calendar__button-text,
291
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):active
325
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
326
+ .sapphire-calendar__button--range-selection
327
+ ):not(:disabled):not(.is-disabled):active
292
328
  .sapphire-calendar__button-text,
293
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):focus-visible:active
329
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
330
+ .sapphire-calendar__button--range-selection
331
+ ):not(:disabled):not(.is-disabled):focus-visible:active
294
332
  .sapphire-calendar__button-text,
295
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled).is-active
333
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(
334
+ :disabled
335
+ ):not(.is-disabled).is-active
296
336
  .sapphire-calendar__button-text,
297
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):active
337
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(
338
+ :disabled
339
+ ):not(.is-disabled):active
298
340
  .sapphire-calendar__button-text,
299
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):focus-visible:active
341
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(
342
+ :disabled
343
+ ):not(.is-disabled):focus-visible:active
300
344
  .sapphire-calendar__button-text,
301
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled).is-active
345
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(
346
+ :disabled
347
+ ):not(.is-disabled).is-active
302
348
  .sapphire-calendar__button-text,
303
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):active
349
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(
350
+ :disabled
351
+ ):not(.is-disabled):active
304
352
  .sapphire-calendar__button-text,
305
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):focus-visible:active
353
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(
354
+ :disabled
355
+ ):not(.is-disabled):focus-visible:active
306
356
  .sapphire-calendar__button-text {
307
357
  background-color: var(--sapphire-calendar-color-background-selected-active);
308
358
  }
309
359
 
310
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection).is-focus
360
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
361
+ .sapphire-calendar__button--range-selection
362
+ ).is-focus
311
363
  .sapphire-calendar__button-text,
312
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(.js-focus):focus-visible
364
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
365
+ .sapphire-calendar__button--range-selection
366
+ ):not(.js-focus):focus-visible
313
367
  .sapphire-calendar__button-text,
314
368
  .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start.is-focus
315
369
  .sapphire-calendar__button-text,
316
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(.js-focus):focus-visible
370
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(
371
+ .js-focus
372
+ ):focus-visible
317
373
  .sapphire-calendar__button-text,
318
374
  .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end.is-focus
319
375
  .sapphire-calendar__button-text,
320
- .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(.js-focus):focus-visible
376
+ .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(
377
+ .js-focus
378
+ ):focus-visible
321
379
  .sapphire-calendar__button-text {
322
380
  background-color: var(--sapphire-calendar-color-background-selected-focus);
323
381
  }
@@ -347,7 +405,9 @@
347
405
  bottom: var(--sapphire-calendar-size-spacing-current-indicator-bottom);
348
406
  }
349
407
 
350
- .sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection).sapphire-calendar__button--current::after,
408
+ .sapphire-calendar__button.sapphire-calendar__button--selected:not(
409
+ .sapphire-calendar__button--range-selection
410
+ ).sapphire-calendar__button--current::after,
351
411
  .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start.sapphire-calendar__button--current::after,
352
412
  .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end.sapphire-calendar__button--current::after {
353
413
  background-color: var(
package/components/checkbox/checkbox.module.css CHANGED
@@ -142,17 +142,25 @@
142
142
 
143
143
  /* Hover when not checked */
144
144
 
145
- .sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover
145
+ .sapphire-checkbox:not(:active):not(.is-active):not(
146
+ .sapphire-checkbox--checked
147
+ ).is-hover
146
148
  .sapphire-checkbox__box,
147
- .sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover
149
+ .sapphire-checkbox:not(:active):not(.is-active):not(
150
+ .sapphire-checkbox--checked
151
+ ):not(.js-hover):hover
148
152
  .sapphire-checkbox__input:not(:disabled)
149
153
  ~ .sapphire-checkbox__box {
150
154
  border-color: var(--sapphire-checkbox-color-border-unchecked-hover);
151
155
  }
152
156
 
153
- .sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover
157
+ .sapphire-checkbox--error:not(:active):not(.is-active):not(
158
+ .sapphire-checkbox--checked
159
+ ).is-hover
154
160
  .sapphire-checkbox__box,
155
- .sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover
161
+ .sapphire-checkbox--error:not(:active):not(.is-active):not(
162
+ .sapphire-checkbox--checked
163
+ ):not(.js-hover):hover
156
164
  .sapphire-checkbox__input:not(:disabled)
157
165
  ~ .sapphire-checkbox__box {
158
166
  border-color: var(--sapphire-checkbox-color-border-unchecked-error-hover);
@@ -167,20 +175,30 @@
167
175
  ~ .sapphire-checkbox__box,
168
176
  .sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover
169
177
  .sapphire-checkbox__box,
170
- .sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover
178
+ .sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(
179
+ .js-hover
180
+ ):hover
171
181
  .sapphire-checkbox__input:not(:disabled)
172
182
  ~ .sapphire-checkbox__box {
173
183
  background-color: var(--sapphire-checkbox-color-background-checked-hover);
174
184
  }
175
185
 
176
- .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover
186
+ .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(
187
+ .is-active
188
+ ).is-hover
177
189
  .sapphire-checkbox__box,
178
- .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover
190
+ .sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(
191
+ .is-active
192
+ ):not(.js-hover):hover
179
193
  .sapphire-checkbox__input:not(:disabled)
180
194
  ~ .sapphire-checkbox__box,
181
- .sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover
195
+ .sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(
196
+ .is-active
197
+ ).is-hover
182
198
  .sapphire-checkbox__box,
183
- .sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover
199
+ .sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(
200
+ .is-active
201
+ ):not(.js-hover):hover
184
202
  .sapphire-checkbox__input:not(:disabled)
185
203
  ~ .sapphire-checkbox__box {
186
204
  background-color: var(
package/components/dateField/dateField.module.css CHANGED
@@ -217,8 +217,12 @@
217
217
  /**
218
218
  * Hover (buttons)
219
219
  */
220
- .sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
221
- .sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
220
+ .sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(
221
+ .is-active
222
+ ):not(.js-hover):hover,
223
+ .sapphire-date-field__button:not(:disabled):not(.is-disabled):not(:active):not(
224
+ .is-active
225
+ ).is-hover {
222
226
  color: var(--sapphire-date-field-color-content-button-hover);
223
227
  }
224
228
 
@@ -240,6 +244,8 @@
240
244
  */
241
245
  .sapphire-date-field__button:not(:disabled):not(.is-disabled).is-active,
242
246
  .sapphire-date-field__button:not(:disabled):not(.is-disabled):active,
243
- .sapphire-date-field__button:not(:disabled):not(.is-disabled):focus-visible:active {
247
+ .sapphire-date-field__button:not(:disabled):not(
248
+ .is-disabled
249
+ ):focus-visible:active {
244
250
  color: var(--sapphire-date-field-color-content-button-active);
245
251
  }
package/components/dropzone/dropzone.module.css CHANGED
@@ -53,14 +53,22 @@
53
53
  background: var(--sapphire-dropzone-color-border-error);
54
54
  }
55
55
 
56
- .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
57
- .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
56
+ .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
57
+ .is-active
58
+ ):not(.js-hover):hover,
59
+ .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
60
+ .is-active
61
+ ).is-hover {
58
62
  background-color: var(--sapphire-dropzone-color-background-hover);
59
63
  }
60
64
 
61
65
  .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:active,
62
- .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:not(.js-hover):active,
63
- .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone.is-active {
66
+ .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:not(
67
+ .js-hover
68
+ ):active,
69
+ .sapphire-dropzone:not(:disabled):not(
70
+ .is-disabled
71
+ ).sapphire-dropzone.is-active {
64
72
  background-color: var(--sapphire-dropzone-color-background-active);
65
73
  }
66
74