@carbon/styles 1.32.0-rc.0 → 1.32.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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/styles",
3
3
  "description": "Styles for the Carbon Design System",
4
- "version": "1.32.0-rc.0",
4
+ "version": "1.32.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -59,5 +59,5 @@
59
59
  "scss/**/*.css",
60
60
  "css/**/*.css"
61
61
  ],
62
- "gitHead": "fe40fbf428231bd35f6bc8cc871ea09c7afa5051"
62
+ "gitHead": "507ddae3074272a3be1ff98b3940532d74788d3c"
63
63
  }
@@ -103,7 +103,15 @@ $list-box-menu-width: rem(300px);
103
103
  }
104
104
 
105
105
  .#{$prefix}--list-box--expanded {
106
- border-bottom-color: $border-subtle;
106
+ border-bottom-color: $border-subtle-01;
107
+ }
108
+
109
+ .#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
110
+ border-bottom-color: $border-subtle-02;
111
+ }
112
+
113
+ .#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
114
+ border-bottom-color: $border-subtle-03;
107
115
  }
108
116
 
109
117
  .#{$prefix}--list-box--expanded:hover {
@@ -582,7 +590,19 @@ $list-box-menu-width: rem(300px);
582
590
 
583
591
  .#{$prefix}--list-box--disabled
584
592
  .#{$prefix}--list-box__menu-item__option:hover {
585
- border-top-color: $border-subtle;
593
+ border-top-color: $border-subtle-01;
594
+ }
595
+
596
+ .#{$prefix}--layer-two
597
+ .#{$prefix}--list-box--disabled
598
+ .#{$prefix}--list-box__menu-item__option:hover {
599
+ border-top-color: $border-subtle-02;
600
+ }
601
+
602
+ .#{$prefix}--layer-three
603
+ .#{$prefix}--list-box--disabled
604
+ .#{$prefix}--list-box__menu-item__option:hover {
605
+ border-top-color: $border-subtle-03;
586
606
  }
587
607
 
588
608
  .#{$prefix}--list-box__menu-item:first-of-type
@@ -595,17 +615,35 @@ $list-box-menu-width: rem(300px);
595
615
  color: $text-primary;
596
616
  }
597
617
 
598
- .#{$prefix}--list-box__menu-item:hover
618
+ .#{$prefix}--list-box--disabled
619
+ .#{$prefix}--list-box__menu-item:hover
599
620
  + .#{$prefix}--list-box__menu-item
600
621
  .#{$prefix}--list-box__menu-item__option {
601
- border-top-color: transparent;
622
+ border-top-color: $border-subtle-01;
602
623
  }
603
624
 
604
- .#{$prefix}--list-box--disabled
625
+ .#{$prefix}--layer-two
626
+ .#{$prefix}--list-box--disabled
605
627
  .#{$prefix}--list-box__menu-item:hover
606
628
  + .#{$prefix}--list-box__menu-item
607
629
  .#{$prefix}--list-box__menu-item__option {
608
- border-top-color: $border-subtle;
630
+ border-top-color: $border-subtle-02;
631
+ }
632
+
633
+ .#{$prefix}--layer-three
634
+ .#{$prefix}--list-box--disabled
635
+ .#{$prefix}--list-box__menu-item:hover
636
+ + .#{$prefix}--list-box__menu-item
637
+ .#{$prefix}--list-box__menu-item__option {
638
+ border-top-color: $border-subtle-03;
639
+ }
640
+
641
+ .#{$prefix}--layer-two .#{$prefix}--list-box__menu-item__option {
642
+ border-top-color: $border-subtle-02;
643
+ }
644
+
645
+ .#{$prefix}--layer-three .#{$prefix}--list-box__menu-item__option {
646
+ border-top-color: $border-subtle-03;
609
647
  }
610
648
 
611
649
  .#{$prefix}--list-box__menu-item__option {
@@ -617,7 +655,7 @@ $list-box-menu-width: rem(300px);
617
655
  padding: rem(11px) 0;
618
656
  padding-right: $spacing-06;
619
657
  border-top: 1px solid transparent;
620
- border-top-color: $border-subtle;
658
+ border-top-color: $border-subtle-01;
621
659
  border-bottom: 1px solid transparent;
622
660
  margin: 0 $spacing-05;
623
661
  color: $text-secondary;
@@ -682,14 +720,40 @@ $list-box-menu-width: rem(300px);
682
720
  }
683
721
 
684
722
  .#{$prefix}--list-box__menu-item[disabled]
723
+ .#{$prefix}--list-box__menu-item__option,
724
+ .#{$prefix}--list-box__menu-item[disabled]:hover
725
+ + .#{$prefix}--list-box__menu-item
685
726
  .#{$prefix}--list-box__menu-item__option {
686
- border-top-color: $border-subtle;
727
+ border-top-color: $border-subtle-01;
687
728
  }
688
729
 
689
- .#{$prefix}--list-box__menu-item[disabled]:hover
730
+ .#{$prefix}--layer-two
731
+ .#{$prefix}--list-box__menu-item[disabled]
732
+ .#{$prefix}--list-box__menu-item__option,
733
+ .#{$prefix}--layer-two
734
+ .#{$prefix}--list-box__menu-item[disabled]:hover
690
735
  + .#{$prefix}--list-box__menu-item
691
736
  .#{$prefix}--list-box__menu-item__option {
692
- border-top-color: $border-subtle;
737
+ border-top-color: $border-subtle-02;
738
+ }
739
+
740
+ .#{$prefix}--layer-three
741
+ .#{$prefix}--list-box__menu-item[disabled]
742
+ .#{$prefix}--list-box__menu-item__option,
743
+ .#{$prefix}--layer-three
744
+ .#{$prefix}--list-box__menu-item[disabled]:hover
745
+ + .#{$prefix}--list-box__menu-item
746
+ .#{$prefix}--list-box__menu-item__option {
747
+ border-top-color: $border-subtle-03;
748
+ }
749
+
750
+ .#{$prefix}--list-box__menu-item--active
751
+ + .#{$prefix}--list-box__menu-item[disabled]
752
+ .#{$prefix}--list-box__menu-item__option,
753
+ .#{$prefix}--list-box__menu-item:hover
754
+ + .#{$prefix}--list-box__menu-item
755
+ .#{$prefix}--list-box__menu-item__option {
756
+ border-top-color: transparent;
693
757
  }
694
758
 
695
759
  .#{$prefix}--list-box.#{$prefix}--list-box--inline
@@ -72,6 +72,20 @@
72
72
  background-color: $border-subtle-02;
73
73
  }
74
74
 
75
+ .#{$prefix}--list-box__menu-item__option {
76
+ border-top-color: $border-subtle-02;
77
+ }
78
+
79
+ .#{$prefix}--list-box__menu-item:hover
80
+ .#{$prefix}--list-box__menu-item__option {
81
+ border-top-color: $layer-hover;
82
+ }
83
+
84
+ .#{$prefix}--list-box__menu-item--active:hover
85
+ .#{$prefix}--list-box__menu-item__option {
86
+ border-top-color: $layer-selected-hover;
87
+ }
88
+
75
89
  // Fluid inputs
76
90
  .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
77
91
  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
@@ -609,3 +609,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
609
609
  @include high-contrast-mode('disabled');
610
610
  }
611
611
  }
612
+
613
+ //-----------------------------
614
+ // Grid contained tabs
615
+ //-----------------------------
616
+
617
+ .#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--full-width
618
+ .#{$prefix}--tab--list {
619
+ display: grid;
620
+ width: 100%;
621
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
622
+
623
+ .#{$prefix}--tabs__nav-link {
624
+ .#{$prefix}--tabs__nav-item-label,
625
+ .#{$prefix}--tabs__nav-item-secondary-label {
626
+ overflow: hidden;
627
+ text-overflow: ellipsis;
628
+ }
629
+ .#{$prefix}--tabs__nav-item--icon {
630
+ margin-left: auto;
631
+ }
632
+ }
633
+ }