@carbon/styles 1.6.0-rc.0 → 1.8.0-rc.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/css/styles.css +42 -28
- package/css/styles.min.css +1 -1
- package/package.json +6 -6
- package/scss/components/aspect-ratio/_aspect-ratio.scss +1 -5
- package/scss/components/data-table/_data-table.scss +1 -1
- package/scss/components/search/_search.scss +4 -0
- package/scss/components/tabs/_tabs.scss +1 -1
- package/scss/components/tag/_tag.scss +3 -1
- package/scss/components/toggle/_toggle.scss +106 -644
- package/scss/utilities/_convert.scss +2 -10
package/css/styles.css
CHANGED
|
@@ -1078,6 +1078,7 @@ em {
|
|
|
1078
1078
|
--cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
|
|
1079
1079
|
--cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
|
|
1080
1080
|
display: grid;
|
|
1081
|
+
width: 100%;
|
|
1081
1082
|
max-width: 99rem;
|
|
1082
1083
|
padding-right: var(--cds-grid-margin);
|
|
1083
1084
|
padding-left: var(--cds-grid-margin);
|
|
@@ -1285,17 +1286,17 @@ em {
|
|
|
1285
1286
|
|
|
1286
1287
|
.cds--sm\:col-span-75 {
|
|
1287
1288
|
--cds-grid-columns: 3;
|
|
1288
|
-
grid-column: span 3/span 3;
|
|
1289
|
+
grid-column: span 3 / span 3;
|
|
1289
1290
|
}
|
|
1290
1291
|
|
|
1291
1292
|
.cds--sm\:col-span-50 {
|
|
1292
1293
|
--cds-grid-columns: 2;
|
|
1293
|
-
grid-column: span 2/span 2;
|
|
1294
|
+
grid-column: span 2 / span 2;
|
|
1294
1295
|
}
|
|
1295
1296
|
|
|
1296
1297
|
.cds--sm\:col-span-25 {
|
|
1297
1298
|
--cds-grid-columns: 1;
|
|
1298
|
-
grid-column: span 1/span 1;
|
|
1299
|
+
grid-column: span 1 / span 1;
|
|
1299
1300
|
}
|
|
1300
1301
|
|
|
1301
1302
|
@media (min-width: 42rem) {
|
|
@@ -1370,17 +1371,17 @@ em {
|
|
|
1370
1371
|
|
|
1371
1372
|
.cds--md\:col-span-75 {
|
|
1372
1373
|
--cds-grid-columns: 6;
|
|
1373
|
-
grid-column: span 6/span 6;
|
|
1374
|
+
grid-column: span 6 / span 6;
|
|
1374
1375
|
}
|
|
1375
1376
|
|
|
1376
1377
|
.cds--md\:col-span-50 {
|
|
1377
1378
|
--cds-grid-columns: 4;
|
|
1378
|
-
grid-column: span 4/span 4;
|
|
1379
|
+
grid-column: span 4 / span 4;
|
|
1379
1380
|
}
|
|
1380
1381
|
|
|
1381
1382
|
.cds--md\:col-span-25 {
|
|
1382
1383
|
--cds-grid-columns: 2;
|
|
1383
|
-
grid-column: span 2/span 2;
|
|
1384
|
+
grid-column: span 2 / span 2;
|
|
1384
1385
|
}
|
|
1385
1386
|
}
|
|
1386
1387
|
@media (min-width: 66rem) {
|
|
@@ -1511,17 +1512,17 @@ em {
|
|
|
1511
1512
|
|
|
1512
1513
|
.cds--lg\:col-span-75 {
|
|
1513
1514
|
--cds-grid-columns: 12;
|
|
1514
|
-
grid-column: span 12/span 12;
|
|
1515
|
+
grid-column: span 12 / span 12;
|
|
1515
1516
|
}
|
|
1516
1517
|
|
|
1517
1518
|
.cds--lg\:col-span-50 {
|
|
1518
1519
|
--cds-grid-columns: 8;
|
|
1519
|
-
grid-column: span 8/span 8;
|
|
1520
|
+
grid-column: span 8 / span 8;
|
|
1520
1521
|
}
|
|
1521
1522
|
|
|
1522
1523
|
.cds--lg\:col-span-25 {
|
|
1523
1524
|
--cds-grid-columns: 4;
|
|
1524
|
-
grid-column: span 4/span 4;
|
|
1525
|
+
grid-column: span 4 / span 4;
|
|
1525
1526
|
}
|
|
1526
1527
|
}
|
|
1527
1528
|
@media (min-width: 82rem) {
|
|
@@ -1652,17 +1653,17 @@ em {
|
|
|
1652
1653
|
|
|
1653
1654
|
.cds--xlg\:col-span-75 {
|
|
1654
1655
|
--cds-grid-columns: 12;
|
|
1655
|
-
grid-column: span 12/span 12;
|
|
1656
|
+
grid-column: span 12 / span 12;
|
|
1656
1657
|
}
|
|
1657
1658
|
|
|
1658
1659
|
.cds--xlg\:col-span-50 {
|
|
1659
1660
|
--cds-grid-columns: 8;
|
|
1660
|
-
grid-column: span 8/span 8;
|
|
1661
|
+
grid-column: span 8 / span 8;
|
|
1661
1662
|
}
|
|
1662
1663
|
|
|
1663
1664
|
.cds--xlg\:col-span-25 {
|
|
1664
1665
|
--cds-grid-columns: 4;
|
|
1665
|
-
grid-column: span 4/span 4;
|
|
1666
|
+
grid-column: span 4 / span 4;
|
|
1666
1667
|
}
|
|
1667
1668
|
}
|
|
1668
1669
|
@media (min-width: 99rem) {
|
|
@@ -1793,17 +1794,17 @@ em {
|
|
|
1793
1794
|
|
|
1794
1795
|
.cds--max\:col-span-75 {
|
|
1795
1796
|
--cds-grid-columns: 12;
|
|
1796
|
-
grid-column: span 12/span 12;
|
|
1797
|
+
grid-column: span 12 / span 12;
|
|
1797
1798
|
}
|
|
1798
1799
|
|
|
1799
1800
|
.cds--max\:col-span-50 {
|
|
1800
1801
|
--cds-grid-columns: 8;
|
|
1801
|
-
grid-column: span 8/span 8;
|
|
1802
|
+
grid-column: span 8 / span 8;
|
|
1802
1803
|
}
|
|
1803
1804
|
|
|
1804
1805
|
.cds--max\:col-span-25 {
|
|
1805
1806
|
--cds-grid-columns: 4;
|
|
1806
|
-
grid-column: span 4/span 4;
|
|
1807
|
+
grid-column: span 4 / span 4;
|
|
1807
1808
|
}
|
|
1808
1809
|
}
|
|
1809
1810
|
.cds--col-span-auto {
|
|
@@ -1816,52 +1817,52 @@ em {
|
|
|
1816
1817
|
|
|
1817
1818
|
.cds--col-span-75 {
|
|
1818
1819
|
--cds-grid-columns: 3;
|
|
1819
|
-
grid-column: span 3/span 3;
|
|
1820
|
+
grid-column: span 3 / span 3;
|
|
1820
1821
|
}
|
|
1821
1822
|
@media (min-width: 42rem) {
|
|
1822
1823
|
.cds--col-span-75 {
|
|
1823
1824
|
--cds-grid-columns: 6;
|
|
1824
|
-
grid-column: span 6/span 6;
|
|
1825
|
+
grid-column: span 6 / span 6;
|
|
1825
1826
|
}
|
|
1826
1827
|
}
|
|
1827
1828
|
@media (min-width: 66rem) {
|
|
1828
1829
|
.cds--col-span-75 {
|
|
1829
1830
|
--cds-grid-columns: 12;
|
|
1830
|
-
grid-column: span 12/span 12;
|
|
1831
|
+
grid-column: span 12 / span 12;
|
|
1831
1832
|
}
|
|
1832
1833
|
}
|
|
1833
1834
|
|
|
1834
1835
|
.cds--col-span-50 {
|
|
1835
1836
|
--cds-grid-columns: 2;
|
|
1836
|
-
grid-column: span 2/span 2;
|
|
1837
|
+
grid-column: span 2 / span 2;
|
|
1837
1838
|
}
|
|
1838
1839
|
@media (min-width: 42rem) {
|
|
1839
1840
|
.cds--col-span-50 {
|
|
1840
1841
|
--cds-grid-columns: 4;
|
|
1841
|
-
grid-column: span 4/span 4;
|
|
1842
|
+
grid-column: span 4 / span 4;
|
|
1842
1843
|
}
|
|
1843
1844
|
}
|
|
1844
1845
|
@media (min-width: 66rem) {
|
|
1845
1846
|
.cds--col-span-50 {
|
|
1846
1847
|
--cds-grid-columns: 8;
|
|
1847
|
-
grid-column: span 8/span 8;
|
|
1848
|
+
grid-column: span 8 / span 8;
|
|
1848
1849
|
}
|
|
1849
1850
|
}
|
|
1850
1851
|
|
|
1851
1852
|
.cds--col-span-25 {
|
|
1852
1853
|
--cds-grid-columns: 1;
|
|
1853
|
-
grid-column: span 1/span 1;
|
|
1854
|
+
grid-column: span 1 / span 1;
|
|
1854
1855
|
}
|
|
1855
1856
|
@media (min-width: 42rem) {
|
|
1856
1857
|
.cds--col-span-25 {
|
|
1857
1858
|
--cds-grid-columns: 2;
|
|
1858
|
-
grid-column: span 2/span 2;
|
|
1859
|
+
grid-column: span 2 / span 2;
|
|
1859
1860
|
}
|
|
1860
1861
|
}
|
|
1861
1862
|
@media (min-width: 66rem) {
|
|
1862
1863
|
.cds--col-span-25 {
|
|
1863
1864
|
--cds-grid-columns: 4;
|
|
1864
|
-
grid-column: span 4/span 4;
|
|
1865
|
+
grid-column: span 4 / span 4;
|
|
1865
1866
|
}
|
|
1866
1867
|
}
|
|
1867
1868
|
|
|
@@ -6811,8 +6812,8 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
6811
6812
|
.cds--tag--outline {
|
|
6812
6813
|
background-color: var(--cds-background, #ffffff);
|
|
6813
6814
|
color: var(--cds-text-primary, #161616);
|
|
6814
|
-
-webkit-box-shadow:
|
|
6815
|
-
box-shadow:
|
|
6815
|
+
-webkit-box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939);
|
|
6816
|
+
box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939);
|
|
6816
6817
|
}
|
|
6817
6818
|
.cds--tag--outline.cds--tag--interactive:hover,
|
|
6818
6819
|
.cds--tag--outline .cds--tag__close-icon:hover {
|
|
@@ -6824,6 +6825,8 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
6824
6825
|
.cds--tag--interactive.cds--tag--disabled {
|
|
6825
6826
|
background-color: var(--cds-layer);
|
|
6826
6827
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
6828
|
+
-webkit-box-shadow: none;
|
|
6829
|
+
box-shadow: none;
|
|
6827
6830
|
}
|
|
6828
6831
|
.cds--tag--disabled.cds--tag--interactive:hover,
|
|
6829
6832
|
.cds--tag--disabled .cds--tag__close-icon:hover,
|
|
@@ -8343,7 +8346,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8343
8346
|
|
|
8344
8347
|
.cds--data-table thead th.cds--table-column-checkbox,
|
|
8345
8348
|
.cds--data-table tbody td.cds--table-column-checkbox {
|
|
8346
|
-
width: 2.5rem;
|
|
8349
|
+
min-width: 2.5rem;
|
|
8347
8350
|
padding-right: 0.25rem;
|
|
8348
8351
|
padding-left: 1rem;
|
|
8349
8352
|
}
|
|
@@ -17707,6 +17710,10 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
17707
17710
|
fill: var(--cds-icon-secondary, #525252);
|
|
17708
17711
|
}
|
|
17709
17712
|
|
|
17713
|
+
.cds--search--expandable.cds--search--disabled svg {
|
|
17714
|
+
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
|
17715
|
+
}
|
|
17716
|
+
|
|
17710
17717
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
|
17711
17718
|
.cds--search-close svg,
|
|
17712
17719
|
.cds--search-magnifier-icon {
|
|
@@ -18406,7 +18413,7 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
18406
18413
|
display: -webkit-box;
|
|
18407
18414
|
display: -ms-flexbox;
|
|
18408
18415
|
display: flex;
|
|
18409
|
-
width:
|
|
18416
|
+
width: auto;
|
|
18410
18417
|
overflow-x: auto;
|
|
18411
18418
|
scroll-behavior: smooth;
|
|
18412
18419
|
scrollbar-width: none;
|
|
@@ -19602,6 +19609,13 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
19602
19609
|
column-gap: 1rem;
|
|
19603
19610
|
}
|
|
19604
19611
|
|
|
19612
|
+
.cds--toggle {
|
|
19613
|
+
-webkit-user-select: none;
|
|
19614
|
+
-moz-user-select: none;
|
|
19615
|
+
-ms-user-select: none;
|
|
19616
|
+
user-select: none;
|
|
19617
|
+
}
|
|
19618
|
+
|
|
19605
19619
|
.cds--toggle__label-text {
|
|
19606
19620
|
font-size: var(--cds-label-01-font-size, 0.75rem);
|
|
19607
19621
|
font-weight: var(--cds-label-01-font-weight, 400);
|