@carbon/styles 1.54.0 → 1.55.0

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 (16) hide show
  1. package/css/styles.css +382 -99
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/combo-box/_combo-box.scss +7 -0
  5. package/scss/components/data-table/_data-table.scss +1 -1
  6. package/scss/components/dropdown/_dropdown.scss +4 -0
  7. package/scss/components/fluid-combo-box/_fluid-combo-box.scss +7 -0
  8. package/scss/components/fluid-list-box/_fluid-list-box.scss +9 -5
  9. package/scss/components/fluid-multiselect/_fluid-multiselect.scss +8 -0
  10. package/scss/components/modal/_modal.scss +2 -6
  11. package/scss/components/multiselect/_multiselect.scss +11 -0
  12. package/scss/components/number-input/_number-input.scss +84 -30
  13. package/scss/components/select/_select.scss +40 -8
  14. package/scss/components/slug/_slug.scss +100 -30
  15. package/scss/components/tabs/_tabs.scss +83 -34
  16. package/scss/components/tag/_tag.scss +2 -1
package/scss/components/slug/_slug.scss CHANGED
@@ -264,7 +264,7 @@ $sizes: (
264
264
  > .#{$prefix}--popover
265
265
  > .#{$prefix}--popover-caret,
266
266
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
267
- .#{$prefix}--slug.#{$prefix}--slug--enabled
267
+ .#{$prefix}--slug
268
268
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
269
269
  > .#{$prefix}--popover
270
270
  > .#{$prefix}--popover-content
@@ -279,33 +279,49 @@ $sizes: (
279
279
  .#{$prefix}--popover--top,
280
280
  .#{$prefix}--popover--top-right,
281
281
  .#{$prefix}--popover--top-left,
282
+ .#{$prefix}--popover--top-end,
283
+ .#{$prefix}--popover--top-start,
282
284
  .#{$prefix}--popover--bottom,
283
285
  .#{$prefix}--popover--bottom-right,
284
286
  .#{$prefix}--popover--bottom-left,
287
+ .#{$prefix}--popover--bottom-start,
288
+ .#{$prefix}--popover--bottom-end,
285
289
  .#{$prefix}--popover--left,
286
290
  .#{$prefix}--popover--left-top,
287
291
  .#{$prefix}--popover--left-bottom,
292
+ .#{$prefix}--popover--left-start,
293
+ .#{$prefix}--popover--left-end,
288
294
  .#{$prefix}--popover--right,
289
295
  .#{$prefix}--popover--right-top,
290
- .#{$prefix}--popover--right-bottom
296
+ .#{$prefix}--popover--right-bottom,
297
+ .#{$prefix}--popover--right-start,
298
+ .#{$prefix}--popover--right-end
291
299
  )
292
300
  > .#{$prefix}--popover
293
301
  > .#{$prefix}--popover-caret::before,
294
302
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
295
- .#{$prefix}--slug.#{$prefix}--slug--enabled
303
+ .#{$prefix}--slug
296
304
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
297
305
  .#{$prefix}--popover--top,
298
306
  .#{$prefix}--popover--top-right,
299
307
  .#{$prefix}--popover--top-left,
308
+ .#{$prefix}--popover--top-end,
309
+ .#{$prefix}--popover--top-start,
300
310
  .#{$prefix}--popover--bottom,
301
311
  .#{$prefix}--popover--bottom-right,
302
312
  .#{$prefix}--popover--bottom-left,
313
+ .#{$prefix}--popover--bottom-start,
314
+ .#{$prefix}--popover--bottom-end,
303
315
  .#{$prefix}--popover--left,
304
316
  .#{$prefix}--popover--left-top,
305
317
  .#{$prefix}--popover--left-bottom,
318
+ .#{$prefix}--popover--left-start,
319
+ .#{$prefix}--popover--left-end,
306
320
  .#{$prefix}--popover--right,
307
321
  .#{$prefix}--popover--right-top,
308
- .#{$prefix}--popover--right-bottom
322
+ .#{$prefix}--popover--right-bottom,
323
+ .#{$prefix}--popover--right-start,
324
+ .#{$prefix}--popover--right-end
309
325
  )
310
326
  > .#{$prefix}--popover
311
327
  > .#{$prefix}--popover-content
@@ -326,33 +342,49 @@ $sizes: (
326
342
  .#{$prefix}--popover--top,
327
343
  .#{$prefix}--popover--top-right,
328
344
  .#{$prefix}--popover--top-left,
345
+ .#{$prefix}--popover--top-end,
346
+ .#{$prefix}--popover--top-start,
329
347
  .#{$prefix}--popover--bottom,
330
348
  .#{$prefix}--popover--bottom-right,
331
349
  .#{$prefix}--popover--bottom-left,
350
+ .#{$prefix}--popover--bottom-start,
351
+ .#{$prefix}--popover--bottom-end,
332
352
  .#{$prefix}--popover--left,
333
353
  .#{$prefix}--popover--left-top,
334
354
  .#{$prefix}--popover--left-bottom,
355
+ .#{$prefix}--popover--left-start,
356
+ .#{$prefix}--popover--left-end,
335
357
  .#{$prefix}--popover--right,
336
358
  .#{$prefix}--popover--right-top,
337
- .#{$prefix}--popover--right-bottom
359
+ .#{$prefix}--popover--right-bottom,
360
+ .#{$prefix}--popover--right-start,
361
+ .#{$prefix}--popover--right-end
338
362
  )
339
363
  > .#{$prefix}--popover
340
364
  > .#{$prefix}--popover-caret::after,
341
365
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
342
- .#{$prefix}--slug.#{$prefix}--slug--enabled
366
+ .#{$prefix}--slug
343
367
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
344
368
  .#{$prefix}--popover--top,
345
369
  .#{$prefix}--popover--top-right,
346
370
  .#{$prefix}--popover--top-left,
371
+ .#{$prefix}--popover--top-end,
372
+ .#{$prefix}--popover--top-start,
347
373
  .#{$prefix}--popover--bottom,
348
374
  .#{$prefix}--popover--bottom-right,
349
375
  .#{$prefix}--popover--bottom-left,
376
+ .#{$prefix}--popover--bottom-start,
377
+ .#{$prefix}--popover--bottom-end,
350
378
  .#{$prefix}--popover--left,
351
379
  .#{$prefix}--popover--left-top,
352
380
  .#{$prefix}--popover--left-bottom,
381
+ .#{$prefix}--popover--left-start,
382
+ .#{$prefix}--popover--left-end,
353
383
  .#{$prefix}--popover--right,
354
384
  .#{$prefix}--popover--right-top,
355
- .#{$prefix}--popover--right-bottom
385
+ .#{$prefix}--popover--right-bottom,
386
+ .#{$prefix}--popover--right-start,
387
+ .#{$prefix}--popover--right-end
356
388
  )
357
389
  > .#{$prefix}--popover
358
390
  > .#{$prefix}--popover-content
@@ -370,16 +402,20 @@ $sizes: (
370
402
  > .#{$prefix}--toggletip:is(
371
403
  .#{$prefix}--popover--top,
372
404
  .#{$prefix}--popover--top-right,
373
- .#{$prefix}--popover--top-left
405
+ .#{$prefix}--popover--top-left,
406
+ .#{$prefix}--popover--top-end,
407
+ .#{$prefix}--popover--top-start
374
408
  )
375
409
  > .#{$prefix}--popover
376
410
  > .#{$prefix}--popover-caret,
377
411
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
378
- .#{$prefix}--slug.#{$prefix}--slug--enabled
412
+ .#{$prefix}--slug
379
413
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
380
414
  .#{$prefix}--popover--top,
381
415
  .#{$prefix}--popover--top-right,
382
- .#{$prefix}--popover--top-left
416
+ .#{$prefix}--popover--top-left,
417
+ .#{$prefix}--popover--top-end,
418
+ .#{$prefix}--popover--top-start
383
419
  )
384
420
  > .#{$prefix}--popover
385
421
  > .#{$prefix}--popover-content
@@ -404,7 +440,9 @@ $sizes: (
404
440
  > .#{$prefix}--toggletip:is(
405
441
  .#{$prefix}--popover--top,
406
442
  .#{$prefix}--popover--top-right,
407
- .#{$prefix}--popover--top-left
443
+ .#{$prefix}--popover--top-left,
444
+ .#{$prefix}--popover--top-end,
445
+ .#{$prefix}--popover--top-start
408
446
  )
409
447
  > .#{$prefix}--popover
410
448
  > .#{$prefix}--slug-content--with-actions
@@ -417,16 +455,20 @@ $sizes: (
417
455
  > .#{$prefix}--toggletip:is(
418
456
  .#{$prefix}--popover--right,
419
457
  .#{$prefix}--popover--right-bottom,
420
- .#{$prefix}--popover--right-top
458
+ .#{$prefix}--popover--right-top,
459
+ .#{$prefix}--popover--right-start,
460
+ .#{$prefix}--popover--right-end
421
461
  )
422
462
  > .#{$prefix}--popover
423
463
  > .#{$prefix}--popover-caret,
424
464
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
425
- .#{$prefix}--slug.#{$prefix}--slug--enabled
465
+ .#{$prefix}--slug
426
466
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
427
467
  .#{$prefix}--popover--right,
428
468
  .#{$prefix}--popover--right-bottom,
429
- .#{$prefix}--popover--right-top
469
+ .#{$prefix}--popover--right-top,
470
+ .#{$prefix}--popover--right-start,
471
+ .#{$prefix}--popover--right-end
430
472
  )
431
473
  > .#{$prefix}--popover
432
474
  > .#{$prefix}--popover-content
@@ -449,16 +491,20 @@ $sizes: (
449
491
  > .#{$prefix}--toggletip:is(
450
492
  .#{$prefix}--popover--bottom,
451
493
  .#{$prefix}--popover--bottom-left,
452
- .#{$prefix}--popover--bottom-right
494
+ .#{$prefix}--popover--bottom-right,
495
+ .#{$prefix}--popover--bottom-start,
496
+ .#{$prefix}--popover--bottom-end
453
497
  )
454
498
  > .#{$prefix}--popover
455
499
  > .#{$prefix}--popover-caret,
456
500
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
457
- .#{$prefix}--slug.#{$prefix}--slug--enabled
501
+ .#{$prefix}--slug
458
502
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
459
503
  .#{$prefix}--popover--bottom,
460
504
  .#{$prefix}--popover--bottom-left,
461
- .#{$prefix}--popover--bottom-right
505
+ .#{$prefix}--popover--bottom-right,
506
+ .#{$prefix}--popover--bottom-start,
507
+ .#{$prefix}--popover--bottom-end
462
508
  )
463
509
  > .#{$prefix}--popover
464
510
  > .#{$prefix}--popover-content
@@ -483,16 +529,20 @@ $sizes: (
483
529
  > .#{$prefix}--toggletip:is(
484
530
  .#{$prefix}--popover--left,
485
531
  .#{$prefix}--popover--left-bottom,
486
- .#{$prefix}--popover--left-top
532
+ .#{$prefix}--popover--left-top,
533
+ .#{$prefix}--popover--left-start,
534
+ .#{$prefix}--popover--left-end
487
535
  )
488
536
  > .#{$prefix}--popover
489
537
  > .#{$prefix}--popover-caret,
490
538
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
491
- .#{$prefix}--slug.#{$prefix}--slug--enabled
539
+ .#{$prefix}--slug
492
540
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
493
541
  .#{$prefix}--popover--left,
494
542
  .#{$prefix}--popover--left-bottom,
495
- .#{$prefix}--popover--left-top
543
+ .#{$prefix}--popover--left-top,
544
+ .#{$prefix}--popover--left-start,
545
+ .#{$prefix}--popover--left-end
496
546
  )
497
547
  > .#{$prefix}--popover
498
548
  > .#{$prefix}--popover-content
@@ -514,15 +564,19 @@ $sizes: (
514
564
  .#{$prefix}--slug
515
565
  > .#{$prefix}--toggletip:is(
516
566
  .#{$prefix}--popover--left-bottom,
517
- .#{$prefix}--popover--right-bottom
567
+ .#{$prefix}--popover--right-bottom,
568
+ .#{$prefix}--popover--left-end,
569
+ .#{$prefix}--popover--right-end
518
570
  )
519
571
  > .#{$prefix}--popover
520
572
  > .#{$prefix}--popover-caret::after,
521
573
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
522
- .#{$prefix}--slug.#{$prefix}--slug--enabled
574
+ .#{$prefix}--slug
523
575
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
524
576
  .#{$prefix}--popover--left-bottom,
525
- .#{$prefix}--popover--right-bottom
577
+ .#{$prefix}--popover--right-bottom,
578
+ .#{$prefix}--popover--left-end,
579
+ .#{$prefix}--popover--right-end
526
580
  )
527
581
  > .#{$prefix}--popover
528
582
  > .#{$prefix}--popover-content
@@ -535,20 +589,28 @@ $sizes: (
535
589
  > .#{$prefix}--toggletip:is(
536
590
  .#{$prefix}--popover--left-bottom,
537
591
  .#{$prefix}--popover--right-bottom,
592
+ .#{$prefix}--popover--left-end,
593
+ .#{$prefix}--popover--right-end,
538
594
  .#{$prefix}--popover--top,
539
595
  .#{$prefix}--popover--top-right,
540
- .#{$prefix}--popover--top-left
596
+ .#{$prefix}--popover--top-left,
597
+ .#{$prefix}--popover--top-end,
598
+ .#{$prefix}--popover--top-start
541
599
  )
542
600
  > .#{$prefix}--popover
543
601
  > .#{$prefix}--popover-caret,
544
602
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
545
- .#{$prefix}--slug.#{$prefix}--slug--enabled
603
+ .#{$prefix}--slug
546
604
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
547
605
  .#{$prefix}--popover--left-bottom,
548
606
  .#{$prefix}--popover--right-bottom,
607
+ .#{$prefix}--popover--left-end,
608
+ .#{$prefix}--popover--right-end,
549
609
  .#{$prefix}--popover--top,
550
610
  .#{$prefix}--popover--top-right,
551
- .#{$prefix}--popover--top-left
611
+ .#{$prefix}--popover--top-left,
612
+ .#{$prefix}--popover--top-end,
613
+ .#{$prefix}--popover--top-start
552
614
  )
553
615
  > .#{$prefix}--popover
554
616
  > .#{$prefix}--popover-content
@@ -564,20 +626,28 @@ $sizes: (
564
626
  > .#{$prefix}--toggletip:is(
565
627
  .#{$prefix}--popover--left-bottom,
566
628
  .#{$prefix}--popover--right-bottom,
629
+ .#{$prefix}--popover--left-end,
630
+ .#{$prefix}--popover--right-end,
567
631
  .#{$prefix}--popover--top,
568
632
  .#{$prefix}--popover--top-right,
569
- .#{$prefix}--popover--top-left
633
+ .#{$prefix}--popover--top-left,
634
+ .#{$prefix}--popover--top-end,
635
+ .#{$prefix}--popover--top-start
570
636
  )
571
637
  > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
572
638
  > .#{$prefix}--popover-caret,
573
639
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
574
- .#{$prefix}--slug.#{$prefix}--slug--enabled
640
+ .#{$prefix}--slug
575
641
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
576
642
  .#{$prefix}--popover--left-bottom,
577
643
  .#{$prefix}--popover--right-bottom,
644
+ .#{$prefix}--popover--left-end,
645
+ .#{$prefix}--popover--right-end,
578
646
  .#{$prefix}--popover--top,
579
647
  .#{$prefix}--popover--top-right,
580
- .#{$prefix}--popover--top-left
648
+ .#{$prefix}--popover--top-left,
649
+ .#{$prefix}--popover--top-start,
650
+ .#{$prefix}--popover--top-end
581
651
  )
582
652
  > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
583
653
  > .#{$prefix}--popover-content
@@ -596,7 +666,7 @@ $sizes: (
596
666
  > .#{$prefix}--popover
597
667
  > .#{$prefix}--popover-caret,
598
668
  // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
599
- .#{$prefix}--slug.#{$prefix}--slug--enabled
669
+ .#{$prefix}--slug
600
670
  > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
601
671
  .#{$prefix}--popover--left,
602
672
  .#{$prefix}--popover--right
package/scss/components/tabs/_tabs.scss CHANGED
@@ -277,14 +277,16 @@
277
277
 
278
278
  &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
279
279
  background-color: $layer-accent;
280
+ // Draws the border without affecting the inner-content
281
+ box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong;
282
+ margin-inline-start: 0;
280
283
  }
281
284
 
282
285
  &.#{$prefix}--tabs--contained
283
- .#{$prefix}--tabs__nav-item
286
+ .#{$prefix}--tabs__nav-item--selected
287
+ + div
284
288
  + .#{$prefix}--tabs__nav-item {
285
- // Draws the border without affecting the inner-content
286
- box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong;
287
- margin-inline-start: 0;
289
+ box-shadow: convert.to-rem(-1px) 0 0 0 transparent;
288
290
  }
289
291
 
290
292
  .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
@@ -293,57 +295,104 @@
293
295
  outline $duration-fast-01 motion(standard, productive);
294
296
  }
295
297
 
298
+ &.#{$prefix}--tabs--dismissable .#{$prefix}--tabs__nav-link {
299
+ padding-inline-end: $spacing-08;
300
+ }
301
+
302
+ &.#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained
303
+ .#{$prefix}--tabs__nav-link {
304
+ padding-inline-end: calc($spacing-09 - 1px);
305
+ }
306
+
296
307
  //-----------------------------
297
308
  // Icon
298
309
  //-----------------------------
299
310
 
300
- &.#{$prefix}--tabs--contained
301
- .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
302
- .#{$prefix}--tabs__nav-item--icon
303
- .#{$prefix}--tabs__nav-item--close-icon {
304
- &:hover {
305
- background-color: inherit;
306
- }
311
+ .#{$prefix}--tabs__nav-item--close {
312
+ position: relative;
313
+ display: flex;
314
+ align-items: center;
315
+ inset-inline-start: calc(-#{$spacing-04} - 1px);
316
+ margin-inline-start: calc(-#{$spacing-06} + 1px);
317
+ }
318
+
319
+ &:not(.#{$prefix}--tabs--contained)
320
+ .#{$prefix}--tabs__nav-item--close--hidden {
321
+ @include visually-hidden;
322
+
323
+ position: static;
324
+ inline-size: convert.to-rem(3px);
325
+ }
326
+
327
+ &.#{$prefix}--tabs--contained.#{$prefix}--tabs--full-width
328
+ .#{$prefix}--tabs__nav-item--close--hidden {
329
+ display: none;
330
+ }
331
+
332
+ .#{$prefix}--tabs__nav-item--close-icon {
333
+ @include button-reset.reset();
334
+
335
+ block-size: convert.to-rem(24px);
336
+ inline-size: convert.to-rem(24px);
337
+ padding-block: $spacing-02;
338
+ padding-inline: $spacing-02;
339
+ pointer-events: auto;
307
340
 
308
341
  svg {
309
- padding: $spacing-02;
310
- margin: -$spacing-02;
311
- block-size: 24px;
312
- inline-size: 24px;
342
+ block-size: convert.to-rem(16px);
343
+ fill: $text-secondary;
344
+ inline-size: convert.to-rem(16px);
313
345
  }
314
346
 
315
347
  svg:hover {
316
- background-color: $layer-accent-hover;
348
+ fill: $text-primary;
349
+ }
350
+
351
+ &:hover {
352
+ background-color: $layer-hover;
353
+ }
354
+
355
+ &:focus,
356
+ &:active {
357
+ @include focus-outline('outline');
317
358
  }
318
359
  }
319
360
 
320
- &.#{$prefix}--tabs--contained
321
- .#{$prefix}--tabs__nav-item:not(
322
- .#{$prefix}--tabs__nav-item--disabled
323
- ).#{$prefix}--tabs__nav-item--selected
324
- .#{$prefix}--tabs__nav-item--icon
361
+ .#{$prefix}--tabs__nav-item:hover
362
+ + .#{$prefix}--tabs__nav-item--close
325
363
  .#{$prefix}--tabs__nav-item--close-icon
326
- svg:hover {
327
- background-color: $layer-hover;
364
+ svg {
365
+ fill: $text-primary;
328
366
  }
329
367
 
330
- .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
331
- .#{$prefix}--tabs__nav-item--icon
332
- .#{$prefix}--tabs__nav-item--close-icon:hover {
333
- background-color: $background-hover;
368
+ .#{$prefix}--tabs__nav-item--close-icon--selected {
369
+ svg {
370
+ fill: $text-primary;
371
+ }
372
+ }
373
+
374
+ .#{$prefix}--tabs__nav-item:hover
375
+ + .#{$prefix}--tabs__nav-item--close
376
+ .#{$prefix}--tabs__nav-item--close-icon--disabled,
377
+ .#{$prefix}--tabs__nav-item--close-icon--disabled,
378
+ .#{$prefix}--tabs__nav-item--close-icon--disabled:hover {
379
+ background-color: inherit;
380
+ cursor: not-allowed;
381
+
382
+ svg {
383
+ fill: $tab-text-disabled;
384
+ }
385
+
386
+ &:focus,
387
+ &:active {
388
+ @include focus-outline('reset');
389
+ }
334
390
  }
335
391
 
336
392
  .#{$prefix}--tabs__nav-item--icon {
337
393
  display: flex;
338
394
  align-items: center;
339
395
  padding-inline-start: $spacing-03;
340
-
341
- .#{$prefix}--tabs__nav-item--close-icon {
342
- padding: $spacing-02;
343
- margin: -$spacing-02;
344
- line-height: 0;
345
- pointer-events: auto;
346
- }
347
396
  }
348
397
 
349
398
  .#{$prefix}--tabs__nav-item--icon-left {
package/scss/components/tag/_tag.scss CHANGED
@@ -258,12 +258,13 @@
258
258
  outline-offset: -1px;
259
259
  }
260
260
 
261
- .#{$prefix}--tag--disabled,
261
+ .#{$prefix}--tag--disabled:not(.#{$prefix}--tag--operational),
262
262
  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
263
263
  .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
264
264
  @include tag-theme($layer, $text-disabled);
265
265
 
266
266
  box-shadow: none;
267
+ outline: none;
267
268
 
268
269
  &:hover {
269
270
  cursor: not-allowed;