@carbon/charts 0.49.4 → 0.50.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 (73) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/build/src/components/essentials/threshold.d.ts +1 -0
  3. package/build/src/services/essentials/transitions.d.ts +0 -3
  4. package/build/stories/tutorials/feature-flags.d.ts +4 -0
  5. package/build/stories/tutorials/index.d.ts +1 -0
  6. package/bundle.js +1 -1
  7. package/components/essentials/threshold.d.ts +1 -0
  8. package/components/essentials/threshold.js +42 -16
  9. package/components/essentials/threshold.js.map +1 -1
  10. package/components/graphs/alluvial.js +14 -2
  11. package/components/graphs/alluvial.js.map +1 -1
  12. package/components/graphs/area-stacked.js +14 -2
  13. package/components/graphs/area-stacked.js.map +1 -1
  14. package/components/graphs/area.js +14 -2
  15. package/components/graphs/area.js.map +1 -1
  16. package/components/graphs/bar-grouped.js +14 -4
  17. package/components/graphs/bar-grouped.js.map +1 -1
  18. package/components/graphs/bar-simple.js +14 -4
  19. package/components/graphs/bar-simple.js.map +1 -1
  20. package/components/graphs/bar-stacked.js +14 -3
  21. package/components/graphs/bar-stacked.js.map +1 -1
  22. package/components/graphs/bullet.js +14 -4
  23. package/components/graphs/bullet.js.map +1 -1
  24. package/components/graphs/circle-pack.js +21 -3
  25. package/components/graphs/circle-pack.js.map +1 -1
  26. package/components/graphs/histogram.js +14 -3
  27. package/components/graphs/histogram.js.map +1 -1
  28. package/components/graphs/line.js +14 -2
  29. package/components/graphs/line.js.map +1 -1
  30. package/components/graphs/lollipop.js +14 -2
  31. package/components/graphs/lollipop.js.map +1 -1
  32. package/components/graphs/meter.js +0 -1
  33. package/components/graphs/meter.js.map +1 -1
  34. package/components/graphs/pie.js +28 -4
  35. package/components/graphs/pie.js.map +1 -1
  36. package/components/graphs/radar.js +134 -17
  37. package/components/graphs/radar.js.map +1 -1
  38. package/components/graphs/scatter.js +28 -4
  39. package/components/graphs/scatter.js.map +1 -1
  40. package/components/graphs/treemap.js +28 -4
  41. package/components/graphs/treemap.js.map +1 -1
  42. package/components/graphs/wordcloud.js +30 -5
  43. package/components/graphs/wordcloud.js.map +1 -1
  44. package/demo/styles.css +9236 -10907
  45. package/demo/styles.css.map +1 -1
  46. package/demo/styles.min.css +1 -1
  47. package/demo/styles.min.css.map +1 -1
  48. package/package.json +1 -1
  49. package/services/essentials/transitions.d.ts +0 -3
  50. package/services/essentials/transitions.js +1 -25
  51. package/services/essentials/transitions.js.map +1 -1
  52. package/styles/_chart-feature-flags.scss +4 -0
  53. package/styles/_type.scss +7 -2
  54. package/styles/components/_modal.scss +0 -4
  55. package/styles/components/_toolbar.scss +0 -4
  56. package/styles/styles.scss +1 -0
  57. package/styles-g10.css +45 -3525
  58. package/styles-g10.css.map +1 -1
  59. package/styles-g10.min.css +1 -1
  60. package/styles-g10.min.css.map +1 -1
  61. package/styles-g100.css +46 -3526
  62. package/styles-g100.css.map +1 -1
  63. package/styles-g100.min.css +1 -1
  64. package/styles-g100.min.css.map +1 -1
  65. package/styles-g90.css +46 -3526
  66. package/styles-g90.css.map +1 -1
  67. package/styles-g90.min.css +1 -1
  68. package/styles-g90.min.css.map +1 -1
  69. package/styles.css +45 -3525
  70. package/styles.css.map +1 -1
  71. package/styles.min.css +1 -1
  72. package/styles.min.css.map +1 -1
  73. package/tsconfig.tsbuildinfo +21 -22
package/styles.css CHANGED
@@ -1542,3557 +1542,77 @@ div.bx--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox
1542
1542
  border-color: #525252;
1543
1543
  }
1544
1544
 
1545
- @keyframes skeleton {
1546
- 0% {
1547
- opacity: 0.3;
1548
- transform: scaleX(0);
1549
- transform-origin: left;
1550
- }
1551
- 20% {
1552
- opacity: 1;
1553
- transform: scaleX(1);
1554
- transform-origin: left;
1555
- }
1556
- 28% {
1557
- transform: scaleX(1);
1558
- transform-origin: right;
1559
- }
1560
- 51% {
1561
- transform: scaleX(0);
1562
- transform-origin: right;
1563
- }
1564
- 58% {
1565
- transform: scaleX(0);
1566
- transform-origin: right;
1567
- }
1568
- 82% {
1569
- transform: scaleX(1);
1570
- transform-origin: right;
1571
- }
1572
- 83% {
1573
- transform: scaleX(1);
1574
- transform-origin: left;
1575
- }
1576
- 96% {
1577
- transform: scaleX(0);
1578
- transform-origin: left;
1579
- }
1580
- 100% {
1581
- opacity: 0.3;
1582
- transform: scaleX(0);
1583
- transform-origin: left;
1584
- }
1585
- }
1586
- .bx--text-truncate--end {
1587
- display: inline-block;
1588
- overflow: hidden;
1589
- width: 100%;
1590
- text-overflow: ellipsis;
1591
- white-space: nowrap;
1545
+ .bx--chart-holder .bx--modal.is-visible {
1546
+ z-index: 99999;
1592
1547
  }
1593
-
1594
- .bx--text-truncate--front {
1595
- display: inline-block;
1596
- overflow: hidden;
1597
- width: 100%;
1598
- direction: rtl;
1599
- text-overflow: ellipsis;
1600
- white-space: nowrap;
1548
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-header__label {
1549
+ margin-top: 0;
1550
+ margin-bottom: 0;
1601
1551
  }
1602
-
1603
- @keyframes skeleton {
1604
- 0% {
1605
- opacity: 0.3;
1606
- transform: scaleX(0);
1607
- transform-origin: left;
1608
- }
1609
- 20% {
1610
- opacity: 1;
1611
- transform: scaleX(1);
1612
- transform-origin: left;
1613
- }
1614
- 28% {
1615
- transform: scaleX(1);
1616
- transform-origin: right;
1617
- }
1618
- 51% {
1619
- transform: scaleX(0);
1620
- transform-origin: right;
1621
- }
1622
- 58% {
1623
- transform: scaleX(0);
1624
- transform-origin: right;
1625
- }
1626
- 82% {
1627
- transform: scaleX(1);
1628
- transform-origin: right;
1629
- }
1630
- 83% {
1631
- transform: scaleX(1);
1632
- transform-origin: left;
1633
- }
1634
- 96% {
1635
- transform: scaleX(0);
1636
- transform-origin: left;
1637
- }
1638
- 100% {
1639
- opacity: 0.3;
1640
- transform: scaleX(0);
1641
- transform-origin: left;
1642
- }
1552
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-header__heading {
1553
+ margin-top: 0.5rem;
1554
+ margin-bottom: 1rem;
1643
1555
  }
1644
- .bx--assistive-text,
1645
- .bx--visually-hidden {
1646
- position: absolute;
1647
- overflow: hidden;
1648
- width: 1px;
1649
- height: 1px;
1556
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content {
1650
1557
  padding: 0;
1651
- border: 0;
1652
- margin: -1px;
1653
- clip: rect(0, 0, 0, 0);
1654
- visibility: inherit;
1655
- white-space: nowrap;
1558
+ margin-bottom: 0;
1656
1559
  }
1657
-
1658
- .bx--body {
1659
- box-sizing: border-box;
1660
- padding: 0;
1661
- border: 0;
1662
- margin: 0;
1663
- font-family: inherit;
1664
- font-size: 100%;
1665
- vertical-align: baseline;
1666
- font-size: 0.875rem;
1667
- font-weight: 400;
1668
- line-height: 1.29;
1669
- letter-spacing: 0.16px;
1670
- background-color: #ffffff;
1671
- color: #161616;
1672
- line-height: 1;
1560
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table {
1561
+ position: relative;
1562
+ border-collapse: collapse;
1673
1563
  }
1674
- .bx--body *,
1675
- .bx--body *::before,
1676
- .bx--body *::after {
1677
- box-sizing: inherit;
1564
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table th {
1565
+ position: sticky;
1566
+ top: 0;
1678
1567
  }
1679
-
1680
- @keyframes skeleton {
1681
- 0% {
1682
- opacity: 0.3;
1683
- transform: scaleX(0);
1684
- transform-origin: left;
1685
- }
1686
- 20% {
1687
- opacity: 1;
1688
- transform: scaleX(1);
1689
- transform-origin: left;
1690
- }
1691
- 28% {
1692
- transform: scaleX(1);
1693
- transform-origin: right;
1694
- }
1695
- 51% {
1696
- transform: scaleX(0);
1697
- transform-origin: right;
1698
- }
1699
- 58% {
1700
- transform: scaleX(0);
1701
- transform-origin: right;
1702
- }
1703
- 82% {
1704
- transform: scaleX(1);
1705
- transform-origin: right;
1706
- }
1707
- 83% {
1708
- transform: scaleX(1);
1709
- transform-origin: left;
1710
- }
1711
- 96% {
1712
- transform: scaleX(0);
1713
- transform-origin: left;
1714
- }
1715
- 100% {
1716
- opacity: 0.3;
1717
- transform: scaleX(0);
1718
- transform-origin: left;
1719
- }
1568
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer {
1569
+ background-color: transparent;
1720
1570
  }
1721
- .bx--assistive-text,
1722
- .bx--visually-hidden {
1723
- position: absolute;
1724
- overflow: hidden;
1725
- width: 1px;
1726
- height: 1px;
1727
- padding: 0;
1728
- border: 0;
1729
- margin: -1px;
1730
- clip: rect(0, 0, 0, 0);
1731
- visibility: inherit;
1732
- white-space: nowrap;
1571
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer .bx--cc-modal-footer-spacer {
1572
+ width: 50%;
1733
1573
  }
1734
1574
 
1735
- .bx--body {
1736
- box-sizing: border-box;
1737
- padding: 0;
1738
- border: 0;
1739
- margin: 0;
1740
- font-family: inherit;
1741
- font-size: 100%;
1742
- vertical-align: baseline;
1743
- font-size: 0.875rem;
1744
- font-weight: 400;
1745
- line-height: 1.29;
1746
- letter-spacing: 0.16px;
1747
- background-color: #ffffff;
1575
+ .bx--cc--title p.title {
1748
1576
  color: #161616;
1749
- line-height: 1;
1750
- }
1751
- .bx--body *,
1752
- .bx--body *::before,
1753
- .bx--body *::after {
1754
- box-sizing: inherit;
1755
- }
1756
-
1757
- .bx--text-truncate--end {
1758
- display: inline-block;
1759
- overflow: hidden;
1760
- width: 100%;
1761
- text-overflow: ellipsis;
1577
+ font-size: 16px;
1578
+ font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
1579
+ font-weight: 600;
1762
1580
  white-space: nowrap;
1763
- }
1764
-
1765
- .bx--text-truncate--front {
1766
- display: inline-block;
1767
1581
  overflow: hidden;
1768
- width: 100%;
1769
- direction: rtl;
1770
1582
  text-overflow: ellipsis;
1771
- white-space: nowrap;
1772
- }
1773
-
1774
- .bx--btn {
1775
- box-sizing: border-box;
1776
- padding: 0;
1777
- border: 0;
1778
- margin: 0;
1779
- font-family: inherit;
1780
- font-size: 100%;
1781
- vertical-align: baseline;
1782
- font-size: 0.875rem;
1783
- font-weight: 400;
1784
- line-height: 1.29;
1785
- letter-spacing: 0.16px;
1786
- position: relative;
1787
- display: inline-flex;
1788
- max-width: 20rem;
1789
- min-height: 3rem;
1790
- flex-shrink: 0;
1791
- align-items: center;
1792
- justify-content: space-between;
1793
- padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
1794
- margin: 0;
1795
- border-radius: 0;
1796
- cursor: pointer;
1797
- outline: none;
1798
- text-align: left;
1799
- text-decoration: none;
1800
- transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
1801
- vertical-align: top;
1802
- }
1803
- .bx--btn *,
1804
- .bx--btn *::before,
1805
- .bx--btn *::after {
1806
- box-sizing: inherit;
1807
- }
1808
- .bx--btn:disabled, .bx--btn:hover:disabled, .bx--btn:focus:disabled, .bx--btn.bx--btn--disabled, .bx--btn.bx--btn--disabled:hover, .bx--btn.bx--btn--disabled:focus {
1809
- border-color: #c6c6c6;
1810
- background: #c6c6c6;
1811
- box-shadow: none;
1812
- color: #8d8d8d;
1813
- cursor: not-allowed;
1814
- }
1815
- .bx--btn .bx--btn__icon {
1816
- position: absolute;
1817
- right: 1rem;
1818
- width: 1rem;
1819
- height: 1rem;
1820
- flex-shrink: 0;
1583
+ padding-right: 15px;
1821
1584
  }
1822
1585
 
1823
- .bx--btn::-moz-focus-inner {
1824
- padding: 0;
1825
- border: 0;
1586
+ .layout-child.title {
1587
+ height: unset !important;
1588
+ overflow: hidden;
1826
1589
  }
1827
1590
 
1828
- .bx--btn--primary {
1829
- border-width: 1px;
1830
- border-style: solid;
1831
- border-color: transparent;
1832
- background-color: #0f62fe;
1833
- color: #ffffff;
1834
- }
1835
- .bx--btn--primary:hover {
1836
- background-color: #0353e9;
1837
- }
1838
- .bx--btn--primary:focus {
1839
- border-color: #0f62fe;
1840
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
1841
- }
1842
- .bx--btn--primary:active {
1843
- background-color: #002d9c;
1844
- }
1845
- .bx--btn--primary .bx--btn__icon,
1846
- .bx--btn--primary .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
1847
- fill: currentColor;
1848
- }
1849
- .bx--btn--primary:hover {
1850
- color: #ffffff;
1591
+ .bx--cc--meter-title {
1592
+ overflow: visible;
1851
1593
  }
1852
-
1853
- .bx--btn--secondary {
1854
- border-width: 1px;
1855
- border-style: solid;
1856
- border-color: transparent;
1857
- background-color: #393939;
1858
- color: #ffffff;
1594
+ .bx--cc--meter-title text.meter-title,
1595
+ .bx--cc--meter-title text.proportional-meter-title,
1596
+ .bx--cc--meter-title text.proportional-meter-total,
1597
+ .bx--cc--meter-title text.percent-value {
1598
+ fill: #161616;
1859
1599
  }
1860
- .bx--btn--secondary:hover {
1861
- background-color: #4c4c4c;
1600
+ .bx--cc--meter-title g.status-indicator.status--danger circle.status {
1601
+ fill: #da1e28;
1862
1602
  }
1863
- .bx--btn--secondary:focus {
1864
- border-color: #0f62fe;
1865
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
1603
+ .bx--cc--meter-title g.status-indicator.status--warning circle.status {
1604
+ fill: #f1c21b;
1866
1605
  }
1867
- .bx--btn--secondary:active {
1868
- background-color: #6f6f6f;
1606
+ .bx--cc--meter-title g.status-indicator.status--warning path.innerFill {
1607
+ fill: #000000;
1869
1608
  }
1870
- .bx--btn--secondary .bx--btn__icon,
1871
- .bx--btn--secondary .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
1872
- fill: currentColor;
1609
+ .bx--cc--meter-title g.status-indicator.status--success circle.status {
1610
+ fill: #198038;
1873
1611
  }
1874
- .bx--btn--secondary:hover, .bx--btn--secondary:focus {
1875
- color: #ffffff;
1612
+ .bx--cc--meter-title g.status-indicator path.innerFill {
1613
+ fill: #ffffff;
1876
1614
  }
1877
1615
 
1878
- .bx--btn--tertiary {
1879
- border-width: 1px;
1880
- border-style: solid;
1881
- border-color: #0f62fe;
1882
- background-color: transparent;
1883
- color: #0f62fe;
1884
- }
1885
- .bx--btn--tertiary:hover {
1886
- background-color: #0353e9;
1887
- }
1888
- .bx--btn--tertiary:focus {
1889
- border-color: #0f62fe;
1890
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
1891
- }
1892
- .bx--btn--tertiary:active {
1893
- background-color: #002d9c;
1894
- }
1895
- .bx--btn--tertiary .bx--btn__icon,
1896
- .bx--btn--tertiary .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
1897
- fill: currentColor;
1898
- }
1899
- .bx--btn--tertiary:hover {
1900
- color: #ffffff;
1901
- }
1902
- .bx--btn--tertiary:focus {
1903
- background-color: #0f62fe;
1904
- color: #ffffff;
1905
- }
1906
- .bx--btn--tertiary:active {
1907
- border-color: transparent;
1908
- background-color: #002d9c;
1909
- color: #ffffff;
1910
- }
1911
- .bx--btn--tertiary:disabled, .bx--btn--tertiary:hover:disabled, .bx--btn--tertiary:focus:disabled, .bx--btn--tertiary.bx--btn--disabled, .bx--btn--tertiary.bx--btn--disabled:hover, .bx--btn--tertiary.bx--btn--disabled:focus {
1912
- background: transparent;
1913
- color: #8d8d8d;
1914
- outline: none;
1915
- }
1916
-
1917
- .bx--btn--ghost {
1918
- border-width: 1px;
1919
- border-style: solid;
1920
- border-color: transparent;
1921
- background-color: transparent;
1922
- color: #0f62fe;
1923
- padding: calc(0.875rem - 3px) 16px;
1924
- }
1925
- .bx--btn--ghost:hover {
1926
- background-color: #e5e5e5;
1927
- }
1928
- .bx--btn--ghost:focus {
1929
- border-color: #0f62fe;
1930
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
1931
- }
1932
- .bx--btn--ghost:active {
1933
- background-color: #c6c6c6;
1934
- }
1935
- .bx--btn--ghost .bx--btn__icon,
1936
- .bx--btn--ghost .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
1937
- fill: currentColor;
1938
- }
1939
- .bx--btn--ghost .bx--btn__icon {
1940
- position: static;
1941
- margin-left: 0.5rem;
1942
- }
1943
- .bx--btn--ghost:hover, .bx--btn--ghost:active {
1944
- color: #0043ce;
1945
- }
1946
- .bx--btn--ghost:active {
1947
- background-color: #c6c6c6;
1948
- }
1949
- .bx--btn--ghost:disabled, .bx--btn--ghost:hover:disabled, .bx--btn--ghost:focus:disabled, .bx--btn--ghost.bx--btn--disabled, .bx--btn--ghost.bx--btn--disabled:hover, .bx--btn--ghost.bx--btn--disabled:focus {
1950
- border-color: transparent;
1951
- background: transparent;
1952
- color: #8d8d8d;
1953
- outline: none;
1954
- }
1955
- .bx--btn--ghost.bx--btn--sm {
1956
- padding: calc(0.375rem - 3px) 16px;
1957
- }
1958
- .bx--btn--ghost.bx--btn--field, .bx--btn--ghost.bx--btn--md {
1959
- padding: calc(0.675rem - 3px) 16px;
1960
- }
1961
-
1962
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
1963
- position: relative;
1964
- display: inline-flex;
1965
- overflow: visible;
1966
- align-items: center;
1967
- cursor: pointer;
1968
- }
1969
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus {
1970
- outline: 1px solid #0f62fe;
1971
- }
1972
- @media screen and (prefers-contrast) {
1973
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus {
1974
- outline-style: dotted;
1975
- }
1976
- }
1977
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus {
1978
- outline: 1px solid transparent;
1979
- }
1980
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg {
1981
- outline: 1px solid #0f62fe;
1982
- }
1983
- @media screen and (prefers-contrast) {
1984
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg {
1985
- outline-style: dotted;
1986
- }
1987
- }
1988
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
1989
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
1990
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
1991
- position: absolute;
1992
- z-index: 6000;
1993
- display: flex;
1994
- align-items: center;
1995
- opacity: 0;
1996
- pointer-events: none;
1997
- }
1998
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
1999
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
2000
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2001
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2002
- display: inline-block;
2003
- }
2004
- }
2005
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after {
2006
- transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2007
- }
2008
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::after {
2009
- transition: none;
2010
- }
2011
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::before {
2012
- width: 0;
2013
- height: 0;
2014
- border-style: solid;
2015
- content: "";
2016
- }
2017
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2018
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2019
- box-sizing: content-box;
2020
- color: inherit;
2021
- opacity: 1;
2022
- white-space: normal;
2023
- word-break: break-word;
2024
- }
2025
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
2026
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2027
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2028
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
2029
- z-index: 6000;
2030
- width: max-content;
2031
- min-width: 1.5rem;
2032
- max-width: 13rem;
2033
- height: auto;
2034
- padding: 0.1875rem 1rem;
2035
- background-color: #393939;
2036
- border-radius: 0.125rem;
2037
- color: #ffffff;
2038
- font-weight: 400;
2039
- text-align: left;
2040
- transform: translateX(-50%);
2041
- font-size: 0.875rem;
2042
- font-weight: 400;
2043
- line-height: 1.29;
2044
- letter-spacing: 0.16px;
2045
- }
2046
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2047
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
2048
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2049
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2050
- width: auto;
2051
- }
2052
- }
2053
- @supports (-ms-accelerator: true) {
2054
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
2055
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2056
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2057
- width: auto;
2058
- }
2059
- }
2060
- @supports (-ms-ime-align: auto) {
2061
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
2062
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2063
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2064
- width: auto;
2065
- }
2066
- }
2067
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
2068
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after,
2069
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .bx--assistive-text,
2070
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger + .bx--assistive-text {
2071
- border: 1px solid transparent;
2072
- }
2073
- }
2074
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger::after {
2075
- content: attr(aria-label);
2076
- }
2077
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::after {
2078
- content: none;
2079
- }
2080
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus::after {
2081
- opacity: 1;
2082
- }
2083
- @keyframes tooltip-fade {
2084
- from {
2085
- opacity: 0;
2086
- }
2087
- to {
2088
- opacity: 1;
2089
- }
2090
- }
2091
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible .bx--assistive-text,
2092
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover .bx--assistive-text,
2093
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus .bx--assistive-text,
2094
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus + .bx--assistive-text {
2095
- overflow: visible;
2096
- margin: auto;
2097
- clip: auto;
2098
- }
2099
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible .bx--assistive-text,
2100
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover .bx--assistive-text,
2101
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus .bx--assistive-text,
2102
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus + .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus.bx--tooltip--a11y::before {
2103
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2104
- }
2105
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden .bx--assistive-text, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden + .bx--assistive-text {
2106
- overflow: hidden;
2107
- margin: -1px;
2108
- clip: rect(0, 0, 0, 0);
2109
- }
2110
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--hidden.bx--tooltip--a11y::before {
2111
- animation: none;
2112
- opacity: 0;
2113
- }
2114
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger svg, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:hover svg, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg {
2115
- fill: currentColor;
2116
- }
2117
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled.bx--tooltip--a11y::before, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled.bx--tooltip--a11y::after, .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--btn--disabled .bx--assistive-text {
2118
- overflow: hidden;
2119
- margin: -1px;
2120
- clip: rect(0, 0, 0, 0);
2121
- opacity: 0;
2122
- }
2123
-
2124
- .bx--btn.bx--btn--icon-only:not(.bx--tooltip--hidden) .bx--assistive-text {
2125
- pointer-events: all;
2126
- }
2127
-
2128
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus {
2129
- border-color: #0f62fe;
2130
- }
2131
-
2132
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:active:not([disabled]) {
2133
- border-color: transparent;
2134
- }
2135
-
2136
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg {
2137
- outline-color: transparent;
2138
- }
2139
-
2140
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:hover,
2141
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:focus,
2142
- .bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:active {
2143
- cursor: not-allowed;
2144
- fill: #8d8d8d;
2145
- }
2146
-
2147
- .bx--tooltip__trigger.bx--btn--icon-only--top {
2148
- position: relative;
2149
- display: inline-flex;
2150
- overflow: visible;
2151
- align-items: center;
2152
- cursor: pointer;
2153
- }
2154
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus {
2155
- outline: 1px solid #0f62fe;
2156
- }
2157
- @media screen and (prefers-contrast) {
2158
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus {
2159
- outline-style: dotted;
2160
- }
2161
- }
2162
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus {
2163
- outline: 1px solid transparent;
2164
- }
2165
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus svg {
2166
- outline: 1px solid #0f62fe;
2167
- }
2168
- @media screen and (prefers-contrast) {
2169
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus svg {
2170
- outline-style: dotted;
2171
- }
2172
- }
2173
- .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2174
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2175
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2176
- position: absolute;
2177
- z-index: 6000;
2178
- display: flex;
2179
- align-items: center;
2180
- opacity: 0;
2181
- pointer-events: none;
2182
- }
2183
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2184
- .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2185
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2186
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2187
- display: inline-block;
2188
- }
2189
- }
2190
- .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after {
2191
- transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2192
- }
2193
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--a11y::after {
2194
- transition: none;
2195
- }
2196
- .bx--tooltip__trigger.bx--btn--icon-only--top::before {
2197
- width: 0;
2198
- height: 0;
2199
- border-style: solid;
2200
- content: "";
2201
- }
2202
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2203
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2204
- box-sizing: content-box;
2205
- color: inherit;
2206
- opacity: 1;
2207
- white-space: normal;
2208
- word-break: break-word;
2209
- }
2210
- .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2211
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2212
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2213
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
2214
- z-index: 6000;
2215
- width: max-content;
2216
- min-width: 1.5rem;
2217
- max-width: 13rem;
2218
- height: auto;
2219
- padding: 0.1875rem 1rem;
2220
- background-color: #393939;
2221
- border-radius: 0.125rem;
2222
- color: #ffffff;
2223
- font-weight: 400;
2224
- text-align: left;
2225
- transform: translateX(-50%);
2226
- font-size: 0.875rem;
2227
- font-weight: 400;
2228
- line-height: 1.29;
2229
- letter-spacing: 0.16px;
2230
- }
2231
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2232
- .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2233
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2234
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2235
- width: auto;
2236
- }
2237
- }
2238
- @supports (-ms-accelerator: true) {
2239
- .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2240
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2241
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2242
- width: auto;
2243
- }
2244
- }
2245
- @supports (-ms-ime-align: auto) {
2246
- .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2247
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2248
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2249
- width: auto;
2250
- }
2251
- }
2252
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
2253
- .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2254
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2255
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2256
- border: 1px solid transparent;
2257
- }
2258
- }
2259
- .bx--tooltip__trigger.bx--btn--icon-only--top::after {
2260
- content: attr(aria-label);
2261
- }
2262
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--a11y::after {
2263
- content: none;
2264
- }
2265
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--top:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--top:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--top:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--top:focus::after {
2266
- opacity: 1;
2267
- }
2268
- @keyframes tooltip-fade {
2269
- from {
2270
- opacity: 0;
2271
- }
2272
- to {
2273
- opacity: 1;
2274
- }
2275
- }
2276
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible .bx--assistive-text,
2277
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:hover .bx--assistive-text,
2278
- .bx--tooltip__trigger.bx--btn--icon-only--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:focus .bx--assistive-text,
2279
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus + .bx--assistive-text {
2280
- overflow: visible;
2281
- margin: auto;
2282
- clip: auto;
2283
- }
2284
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible .bx--assistive-text,
2285
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--top:hover .bx--assistive-text,
2286
- .bx--tooltip__trigger.bx--btn--icon-only--top:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--top:focus .bx--assistive-text,
2287
- .bx--tooltip__trigger.bx--btn--icon-only--top:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top:focus.bx--tooltip--a11y::before {
2288
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2289
- }
2290
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--hidden + .bx--assistive-text {
2291
- overflow: hidden;
2292
- margin: -1px;
2293
- clip: rect(0, 0, 0, 0);
2294
- }
2295
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--hidden.bx--tooltip--a11y::before {
2296
- animation: none;
2297
- opacity: 0;
2298
- }
2299
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text::after {
2300
- position: absolute;
2301
- display: block;
2302
- content: "";
2303
- left: 0;
2304
- width: 100%;
2305
- height: 0.75rem;
2306
- bottom: -0.75rem;
2307
- }
2308
- .bx--tooltip__trigger.bx--btn--icon-only--top::before, .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2309
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2310
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2311
- top: 0;
2312
- left: 50%;
2313
- }
2314
- .bx--tooltip__trigger.bx--btn--icon-only--top::before {
2315
- top: -0.5rem;
2316
- border-width: 0.3125rem 0.25rem 0 0.25rem;
2317
- border-color: #393939 transparent transparent transparent;
2318
- transform: translate(-50%, -100%);
2319
- }
2320
- .bx--tooltip__trigger.bx--btn--icon-only--top::after,
2321
- .bx--tooltip__trigger.bx--btn--icon-only--top .bx--assistive-text,
2322
- .bx--tooltip__trigger.bx--btn--icon-only--top + .bx--assistive-text {
2323
- top: -0.8125rem;
2324
- left: 50%;
2325
- transform: translate(-50%, -100%);
2326
- }
2327
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start .bx--assistive-text::after {
2328
- position: absolute;
2329
- display: block;
2330
- content: "";
2331
- left: 0;
2332
- width: 100%;
2333
- height: 0.75rem;
2334
- bottom: -0.75rem;
2335
- }
2336
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::after,
2337
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start .bx--assistive-text,
2338
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start + .bx--assistive-text {
2339
- top: 0;
2340
- left: 50%;
2341
- }
2342
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::before {
2343
- top: -0.5rem;
2344
- border-width: 0.3125rem 0.25rem 0 0.25rem;
2345
- border-color: #393939 transparent transparent transparent;
2346
- transform: translate(-50%, -100%);
2347
- }
2348
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start::after,
2349
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start .bx--assistive-text,
2350
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-start + .bx--assistive-text {
2351
- top: -0.8125rem;
2352
- left: 0;
2353
- transform: translate(0, -100%);
2354
- }
2355
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center .bx--assistive-text::after {
2356
- position: absolute;
2357
- display: block;
2358
- content: "";
2359
- left: 0;
2360
- width: 100%;
2361
- height: 0.75rem;
2362
- bottom: -0.75rem;
2363
- }
2364
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::after,
2365
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center .bx--assistive-text,
2366
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center + .bx--assistive-text {
2367
- top: 0;
2368
- left: 50%;
2369
- }
2370
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::before {
2371
- top: -0.5rem;
2372
- border-width: 0.3125rem 0.25rem 0 0.25rem;
2373
- border-color: #393939 transparent transparent transparent;
2374
- transform: translate(-50%, -100%);
2375
- }
2376
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center::after,
2377
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center .bx--assistive-text,
2378
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-center + .bx--assistive-text {
2379
- top: -0.8125rem;
2380
- left: 50%;
2381
- transform: translate(-50%, -100%);
2382
- }
2383
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end .bx--assistive-text::after {
2384
- position: absolute;
2385
- display: block;
2386
- content: "";
2387
- left: 0;
2388
- width: 100%;
2389
- height: 0.75rem;
2390
- bottom: -0.75rem;
2391
- }
2392
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::after,
2393
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end .bx--assistive-text,
2394
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end + .bx--assistive-text {
2395
- top: 0;
2396
- left: 50%;
2397
- }
2398
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::before {
2399
- top: -0.5rem;
2400
- border-width: 0.3125rem 0.25rem 0 0.25rem;
2401
- border-color: #393939 transparent transparent transparent;
2402
- transform: translate(-50%, -100%);
2403
- }
2404
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end::after,
2405
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end .bx--assistive-text,
2406
- .bx--tooltip__trigger.bx--btn--icon-only--top.bx--tooltip--align-end + .bx--assistive-text {
2407
- top: -0.8125rem;
2408
- right: 0;
2409
- left: auto;
2410
- transform: translate(0, -100%);
2411
- }
2412
-
2413
- .bx--tooltip__trigger.bx--btn--icon-only--right {
2414
- position: relative;
2415
- display: inline-flex;
2416
- overflow: visible;
2417
- align-items: center;
2418
- cursor: pointer;
2419
- }
2420
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus {
2421
- outline: 1px solid #0f62fe;
2422
- }
2423
- @media screen and (prefers-contrast) {
2424
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus {
2425
- outline-style: dotted;
2426
- }
2427
- }
2428
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus {
2429
- outline: 1px solid transparent;
2430
- }
2431
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus svg {
2432
- outline: 1px solid #0f62fe;
2433
- }
2434
- @media screen and (prefers-contrast) {
2435
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus svg {
2436
- outline-style: dotted;
2437
- }
2438
- }
2439
- .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2440
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2441
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2442
- position: absolute;
2443
- z-index: 6000;
2444
- display: flex;
2445
- align-items: center;
2446
- opacity: 0;
2447
- pointer-events: none;
2448
- }
2449
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2450
- .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2451
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2452
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2453
- display: inline-block;
2454
- }
2455
- }
2456
- .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after {
2457
- transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2458
- }
2459
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--a11y::after {
2460
- transition: none;
2461
- }
2462
- .bx--tooltip__trigger.bx--btn--icon-only--right::before {
2463
- width: 0;
2464
- height: 0;
2465
- border-style: solid;
2466
- content: "";
2467
- }
2468
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2469
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2470
- box-sizing: content-box;
2471
- color: inherit;
2472
- opacity: 1;
2473
- white-space: normal;
2474
- word-break: break-word;
2475
- }
2476
- .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2477
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2478
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2479
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
2480
- z-index: 6000;
2481
- width: max-content;
2482
- min-width: 1.5rem;
2483
- max-width: 13rem;
2484
- height: auto;
2485
- padding: 0.1875rem 1rem;
2486
- background-color: #393939;
2487
- border-radius: 0.125rem;
2488
- color: #ffffff;
2489
- font-weight: 400;
2490
- text-align: left;
2491
- transform: translateX(-50%);
2492
- font-size: 0.875rem;
2493
- font-weight: 400;
2494
- line-height: 1.29;
2495
- letter-spacing: 0.16px;
2496
- }
2497
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2498
- .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2499
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2500
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2501
- width: auto;
2502
- }
2503
- }
2504
- @supports (-ms-accelerator: true) {
2505
- .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2506
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2507
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2508
- width: auto;
2509
- }
2510
- }
2511
- @supports (-ms-ime-align: auto) {
2512
- .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2513
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2514
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2515
- width: auto;
2516
- }
2517
- }
2518
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
2519
- .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2520
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2521
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2522
- border: 1px solid transparent;
2523
- }
2524
- }
2525
- .bx--tooltip__trigger.bx--btn--icon-only--right::after {
2526
- content: attr(aria-label);
2527
- }
2528
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--a11y::after {
2529
- content: none;
2530
- }
2531
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--right:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--right:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--right:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--right:focus::after {
2532
- opacity: 1;
2533
- }
2534
- @keyframes tooltip-fade {
2535
- from {
2536
- opacity: 0;
2537
- }
2538
- to {
2539
- opacity: 1;
2540
- }
2541
- }
2542
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible .bx--assistive-text,
2543
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:hover .bx--assistive-text,
2544
- .bx--tooltip__trigger.bx--btn--icon-only--right:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:focus .bx--assistive-text,
2545
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus + .bx--assistive-text {
2546
- overflow: visible;
2547
- margin: auto;
2548
- clip: auto;
2549
- }
2550
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible .bx--assistive-text,
2551
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--right:hover .bx--assistive-text,
2552
- .bx--tooltip__trigger.bx--btn--icon-only--right:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--right:focus .bx--assistive-text,
2553
- .bx--tooltip__trigger.bx--btn--icon-only--right:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right:focus.bx--tooltip--a11y::before {
2554
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2555
- }
2556
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--hidden + .bx--assistive-text {
2557
- overflow: hidden;
2558
- margin: -1px;
2559
- clip: rect(0, 0, 0, 0);
2560
- }
2561
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--hidden.bx--tooltip--a11y::before {
2562
- animation: none;
2563
- opacity: 0;
2564
- }
2565
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text::after {
2566
- position: absolute;
2567
- display: block;
2568
- content: "";
2569
- top: 0;
2570
- width: 0.75rem;
2571
- height: 100%;
2572
- left: -0.75rem;
2573
- }
2574
- .bx--tooltip__trigger.bx--btn--icon-only--right::before, .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2575
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2576
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2577
- top: 50%;
2578
- right: 0;
2579
- }
2580
- .bx--tooltip__trigger.bx--btn--icon-only--right::before {
2581
- right: -0.5rem;
2582
- border-width: 0.25rem 0.3125rem 0.25rem 0;
2583
- border-color: transparent #393939 transparent transparent;
2584
- transform: translate(100%, -50%);
2585
- }
2586
- .bx--tooltip__trigger.bx--btn--icon-only--right::after,
2587
- .bx--tooltip__trigger.bx--btn--icon-only--right .bx--assistive-text,
2588
- .bx--tooltip__trigger.bx--btn--icon-only--right + .bx--assistive-text {
2589
- right: -0.8125rem;
2590
- transform: translate(100%, -50%);
2591
- }
2592
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start .bx--assistive-text::after {
2593
- position: absolute;
2594
- display: block;
2595
- content: "";
2596
- top: 0;
2597
- width: 0.75rem;
2598
- height: 100%;
2599
- left: -0.75rem;
2600
- }
2601
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::after,
2602
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start .bx--assistive-text,
2603
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start + .bx--assistive-text {
2604
- top: 50%;
2605
- right: 0;
2606
- }
2607
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::before {
2608
- right: -0.5rem;
2609
- border-width: 0.25rem 0.3125rem 0.25rem 0;
2610
- border-color: transparent #393939 transparent transparent;
2611
- transform: translate(100%, -50%);
2612
- }
2613
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start::after,
2614
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start .bx--assistive-text,
2615
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-start + .bx--assistive-text {
2616
- right: -0.8125rem;
2617
- transform: translate(100%, -50%);
2618
- }
2619
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center .bx--assistive-text::after {
2620
- position: absolute;
2621
- display: block;
2622
- content: "";
2623
- top: 0;
2624
- width: 0.75rem;
2625
- height: 100%;
2626
- left: -0.75rem;
2627
- }
2628
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::after,
2629
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center .bx--assistive-text,
2630
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center + .bx--assistive-text {
2631
- top: 50%;
2632
- right: 0;
2633
- }
2634
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::before {
2635
- right: -0.5rem;
2636
- border-width: 0.25rem 0.3125rem 0.25rem 0;
2637
- border-color: transparent #393939 transparent transparent;
2638
- transform: translate(100%, -50%);
2639
- }
2640
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center::after,
2641
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center .bx--assistive-text,
2642
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-center + .bx--assistive-text {
2643
- right: -0.8125rem;
2644
- transform: translate(100%, -50%);
2645
- }
2646
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end .bx--assistive-text::after {
2647
- position: absolute;
2648
- display: block;
2649
- content: "";
2650
- top: 0;
2651
- width: 0.75rem;
2652
- height: 100%;
2653
- left: -0.75rem;
2654
- }
2655
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::after,
2656
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end .bx--assistive-text,
2657
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end + .bx--assistive-text {
2658
- top: 50%;
2659
- right: 0;
2660
- }
2661
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::before {
2662
- right: -0.5rem;
2663
- border-width: 0.25rem 0.3125rem 0.25rem 0;
2664
- border-color: transparent #393939 transparent transparent;
2665
- transform: translate(100%, -50%);
2666
- }
2667
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end::after,
2668
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end .bx--assistive-text,
2669
- .bx--tooltip__trigger.bx--btn--icon-only--right.bx--tooltip--align-end + .bx--assistive-text {
2670
- right: -0.8125rem;
2671
- transform: translate(100%, -50%);
2672
- }
2673
-
2674
- .bx--tooltip__trigger.bx--btn--icon-only--bottom {
2675
- position: relative;
2676
- display: inline-flex;
2677
- overflow: visible;
2678
- align-items: center;
2679
- cursor: pointer;
2680
- }
2681
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus {
2682
- outline: 1px solid #0f62fe;
2683
- }
2684
- @media screen and (prefers-contrast) {
2685
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus {
2686
- outline-style: dotted;
2687
- }
2688
- }
2689
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus {
2690
- outline: 1px solid transparent;
2691
- }
2692
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus svg {
2693
- outline: 1px solid #0f62fe;
2694
- }
2695
- @media screen and (prefers-contrast) {
2696
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus svg {
2697
- outline-style: dotted;
2698
- }
2699
- }
2700
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2701
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2702
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2703
- position: absolute;
2704
- z-index: 6000;
2705
- display: flex;
2706
- align-items: center;
2707
- opacity: 0;
2708
- pointer-events: none;
2709
- }
2710
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2711
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2712
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2713
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2714
- display: inline-block;
2715
- }
2716
- }
2717
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after {
2718
- transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2719
- }
2720
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--a11y::after {
2721
- transition: none;
2722
- }
2723
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::before {
2724
- width: 0;
2725
- height: 0;
2726
- border-style: solid;
2727
- content: "";
2728
- }
2729
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2730
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2731
- box-sizing: content-box;
2732
- color: inherit;
2733
- opacity: 1;
2734
- white-space: normal;
2735
- word-break: break-word;
2736
- }
2737
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2738
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2739
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2740
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
2741
- z-index: 6000;
2742
- width: max-content;
2743
- min-width: 1.5rem;
2744
- max-width: 13rem;
2745
- height: auto;
2746
- padding: 0.1875rem 1rem;
2747
- background-color: #393939;
2748
- border-radius: 0.125rem;
2749
- color: #ffffff;
2750
- font-weight: 400;
2751
- text-align: left;
2752
- transform: translateX(-50%);
2753
- font-size: 0.875rem;
2754
- font-weight: 400;
2755
- line-height: 1.29;
2756
- letter-spacing: 0.16px;
2757
- }
2758
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2759
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2760
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2761
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2762
- width: auto;
2763
- }
2764
- }
2765
- @supports (-ms-accelerator: true) {
2766
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2767
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2768
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2769
- width: auto;
2770
- }
2771
- }
2772
- @supports (-ms-ime-align: auto) {
2773
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2774
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2775
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2776
- width: auto;
2777
- }
2778
- }
2779
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
2780
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2781
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2782
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2783
- border: 1px solid transparent;
2784
- }
2785
- }
2786
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after {
2787
- content: attr(aria-label);
2788
- }
2789
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--a11y::after {
2790
- content: none;
2791
- }
2792
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus::after {
2793
- opacity: 1;
2794
- }
2795
- @keyframes tooltip-fade {
2796
- from {
2797
- opacity: 0;
2798
- }
2799
- to {
2800
- opacity: 1;
2801
- }
2802
- }
2803
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible .bx--assistive-text,
2804
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover .bx--assistive-text,
2805
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus .bx--assistive-text,
2806
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus + .bx--assistive-text {
2807
- overflow: visible;
2808
- margin: auto;
2809
- clip: auto;
2810
- }
2811
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible .bx--assistive-text,
2812
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover .bx--assistive-text,
2813
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus .bx--assistive-text,
2814
- .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom:focus.bx--tooltip--a11y::before {
2815
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2816
- }
2817
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--hidden + .bx--assistive-text {
2818
- overflow: hidden;
2819
- margin: -1px;
2820
- clip: rect(0, 0, 0, 0);
2821
- }
2822
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--hidden.bx--tooltip--a11y::before {
2823
- animation: none;
2824
- opacity: 0;
2825
- }
2826
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text::after {
2827
- position: absolute;
2828
- display: block;
2829
- content: "";
2830
- left: 0;
2831
- width: 100%;
2832
- height: 0.75rem;
2833
- top: -0.75rem;
2834
- }
2835
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2836
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2837
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2838
- bottom: 0;
2839
- left: 50%;
2840
- }
2841
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::before {
2842
- bottom: -0.5rem;
2843
- border-width: 0 0.25rem 0.3125rem 0.25rem;
2844
- border-color: transparent transparent #393939 transparent;
2845
- transform: translate(-50%, 100%);
2846
- }
2847
- .bx--tooltip__trigger.bx--btn--icon-only--bottom::after,
2848
- .bx--tooltip__trigger.bx--btn--icon-only--bottom .bx--assistive-text,
2849
- .bx--tooltip__trigger.bx--btn--icon-only--bottom + .bx--assistive-text {
2850
- bottom: -0.8125rem;
2851
- transform: translate(-50%, 100%);
2852
- }
2853
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start .bx--assistive-text::after {
2854
- position: absolute;
2855
- display: block;
2856
- content: "";
2857
- left: 0;
2858
- width: 100%;
2859
- height: 0.75rem;
2860
- top: -0.75rem;
2861
- }
2862
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::after,
2863
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start .bx--assistive-text,
2864
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start + .bx--assistive-text {
2865
- bottom: 0;
2866
- left: 50%;
2867
- }
2868
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::before {
2869
- bottom: -0.5rem;
2870
- border-width: 0 0.25rem 0.3125rem 0.25rem;
2871
- border-color: transparent transparent #393939 transparent;
2872
- transform: translate(-50%, 100%);
2873
- }
2874
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start::after,
2875
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start .bx--assistive-text,
2876
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-start + .bx--assistive-text {
2877
- bottom: -0.8125rem;
2878
- left: 0;
2879
- transform: translate(0, 100%);
2880
- }
2881
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center .bx--assistive-text::after {
2882
- position: absolute;
2883
- display: block;
2884
- content: "";
2885
- left: 0;
2886
- width: 100%;
2887
- height: 0.75rem;
2888
- top: -0.75rem;
2889
- }
2890
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::after,
2891
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center .bx--assistive-text,
2892
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center + .bx--assistive-text {
2893
- bottom: 0;
2894
- left: 50%;
2895
- }
2896
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::before {
2897
- bottom: -0.5rem;
2898
- border-width: 0 0.25rem 0.3125rem 0.25rem;
2899
- border-color: transparent transparent #393939 transparent;
2900
- transform: translate(-50%, 100%);
2901
- }
2902
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center::after,
2903
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center .bx--assistive-text,
2904
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-center + .bx--assistive-text {
2905
- bottom: -0.8125rem;
2906
- transform: translate(-50%, 100%);
2907
- }
2908
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end .bx--assistive-text::after {
2909
- position: absolute;
2910
- display: block;
2911
- content: "";
2912
- left: 0;
2913
- width: 100%;
2914
- height: 0.75rem;
2915
- top: -0.75rem;
2916
- }
2917
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::after,
2918
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end .bx--assistive-text,
2919
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end + .bx--assistive-text {
2920
- bottom: 0;
2921
- left: 50%;
2922
- }
2923
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::before {
2924
- bottom: -0.5rem;
2925
- border-width: 0 0.25rem 0.3125rem 0.25rem;
2926
- border-color: transparent transparent #393939 transparent;
2927
- transform: translate(-50%, 100%);
2928
- }
2929
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end::after,
2930
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end .bx--assistive-text,
2931
- .bx--tooltip__trigger.bx--btn--icon-only--bottom.bx--tooltip--align-end + .bx--assistive-text {
2932
- bottom: -0.8125rem;
2933
- right: 0;
2934
- left: auto;
2935
- transform: translate(0, 100%);
2936
- }
2937
-
2938
- .bx--tooltip__trigger.bx--btn--icon-only--left {
2939
- position: relative;
2940
- display: inline-flex;
2941
- overflow: visible;
2942
- align-items: center;
2943
- cursor: pointer;
2944
- }
2945
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus {
2946
- outline: 1px solid #0f62fe;
2947
- }
2948
- @media screen and (prefers-contrast) {
2949
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus {
2950
- outline-style: dotted;
2951
- }
2952
- }
2953
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus {
2954
- outline: 1px solid transparent;
2955
- }
2956
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus svg {
2957
- outline: 1px solid #0f62fe;
2958
- }
2959
- @media screen and (prefers-contrast) {
2960
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus svg {
2961
- outline-style: dotted;
2962
- }
2963
- }
2964
- .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after,
2965
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
2966
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
2967
- position: absolute;
2968
- z-index: 6000;
2969
- display: flex;
2970
- align-items: center;
2971
- opacity: 0;
2972
- pointer-events: none;
2973
- }
2974
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
2975
- .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after,
2976
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
2977
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
2978
- display: inline-block;
2979
- }
2980
- }
2981
- .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after {
2982
- transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
2983
- }
2984
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--a11y::after {
2985
- transition: none;
2986
- }
2987
- .bx--tooltip__trigger.bx--btn--icon-only--left::before {
2988
- width: 0;
2989
- height: 0;
2990
- border-style: solid;
2991
- content: "";
2992
- }
2993
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
2994
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
2995
- box-sizing: content-box;
2996
- color: inherit;
2997
- opacity: 1;
2998
- white-space: normal;
2999
- word-break: break-word;
3000
- }
3001
- .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3002
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3003
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3004
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
3005
- z-index: 6000;
3006
- width: max-content;
3007
- min-width: 1.5rem;
3008
- max-width: 13rem;
3009
- height: auto;
3010
- padding: 0.1875rem 1rem;
3011
- background-color: #393939;
3012
- border-radius: 0.125rem;
3013
- color: #ffffff;
3014
- font-weight: 400;
3015
- text-align: left;
3016
- transform: translateX(-50%);
3017
- font-size: 0.875rem;
3018
- font-weight: 400;
3019
- line-height: 1.29;
3020
- letter-spacing: 0.16px;
3021
- }
3022
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
3023
- .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3024
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3025
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3026
- width: auto;
3027
- }
3028
- }
3029
- @supports (-ms-accelerator: true) {
3030
- .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3031
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3032
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3033
- width: auto;
3034
- }
3035
- }
3036
- @supports (-ms-ime-align: auto) {
3037
- .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3038
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3039
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3040
- width: auto;
3041
- }
3042
- }
3043
- @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
3044
- .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3045
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3046
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3047
- border: 1px solid transparent;
3048
- }
3049
- }
3050
- .bx--tooltip__trigger.bx--btn--icon-only--left::after {
3051
- content: attr(aria-label);
3052
- }
3053
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--a11y::after {
3054
- content: none;
3055
- }
3056
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible::after, .bx--tooltip__trigger.bx--btn--icon-only--left:hover::before, .bx--tooltip__trigger.bx--btn--icon-only--left:hover::after, .bx--tooltip__trigger.bx--btn--icon-only--left:focus::before, .bx--tooltip__trigger.bx--btn--icon-only--left:focus::after {
3057
- opacity: 1;
3058
- }
3059
- @keyframes tooltip-fade {
3060
- from {
3061
- opacity: 0;
3062
- }
3063
- to {
3064
- opacity: 1;
3065
- }
3066
- }
3067
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible .bx--assistive-text,
3068
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:hover .bx--assistive-text,
3069
- .bx--tooltip__trigger.bx--btn--icon-only--left:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:focus .bx--assistive-text,
3070
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus + .bx--assistive-text {
3071
- overflow: visible;
3072
- margin: auto;
3073
- clip: auto;
3074
- }
3075
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible .bx--assistive-text,
3076
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--visible.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--left:hover .bx--assistive-text,
3077
- .bx--tooltip__trigger.bx--btn--icon-only--left:hover + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:hover.bx--tooltip--a11y::before, .bx--tooltip__trigger.bx--btn--icon-only--left:focus .bx--assistive-text,
3078
- .bx--tooltip__trigger.bx--btn--icon-only--left:focus + .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left:focus.bx--tooltip--a11y::before {
3079
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
3080
- }
3081
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--hidden .bx--assistive-text, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--hidden + .bx--assistive-text {
3082
- overflow: hidden;
3083
- margin: -1px;
3084
- clip: rect(0, 0, 0, 0);
3085
- }
3086
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--hidden.bx--tooltip--a11y::before {
3087
- animation: none;
3088
- opacity: 0;
3089
- }
3090
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text::after {
3091
- position: absolute;
3092
- display: block;
3093
- content: "";
3094
- top: 0;
3095
- width: 0.75rem;
3096
- height: 100%;
3097
- right: -0.75rem;
3098
- }
3099
- .bx--tooltip__trigger.bx--btn--icon-only--left::before, .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3100
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3101
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3102
- top: 50%;
3103
- left: 0;
3104
- }
3105
- .bx--tooltip__trigger.bx--btn--icon-only--left::before {
3106
- left: -0.5rem;
3107
- border-width: 0.25rem 0 0.25rem 0.3125rem;
3108
- border-color: transparent transparent transparent #393939;
3109
- transform: translate(-100%, -50%);
3110
- }
3111
- .bx--tooltip__trigger.bx--btn--icon-only--left::after,
3112
- .bx--tooltip__trigger.bx--btn--icon-only--left .bx--assistive-text,
3113
- .bx--tooltip__trigger.bx--btn--icon-only--left + .bx--assistive-text {
3114
- left: -0.8125rem;
3115
- transform: translate(-100%, -50%);
3116
- }
3117
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start .bx--assistive-text::after {
3118
- position: absolute;
3119
- display: block;
3120
- content: "";
3121
- top: 0;
3122
- width: 0.75rem;
3123
- height: 100%;
3124
- right: -0.75rem;
3125
- }
3126
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::after,
3127
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start .bx--assistive-text,
3128
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start + .bx--assistive-text {
3129
- top: 50%;
3130
- left: 0;
3131
- }
3132
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::before {
3133
- left: -0.5rem;
3134
- border-width: 0.25rem 0 0.25rem 0.3125rem;
3135
- border-color: transparent transparent transparent #393939;
3136
- transform: translate(-100%, -50%);
3137
- }
3138
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start::after,
3139
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start .bx--assistive-text,
3140
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-start + .bx--assistive-text {
3141
- left: -0.8125rem;
3142
- transform: translate(-100%, -50%);
3143
- }
3144
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center .bx--assistive-text::after {
3145
- position: absolute;
3146
- display: block;
3147
- content: "";
3148
- top: 0;
3149
- width: 0.75rem;
3150
- height: 100%;
3151
- right: -0.75rem;
3152
- }
3153
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::after,
3154
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center .bx--assistive-text,
3155
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center + .bx--assistive-text {
3156
- top: 50%;
3157
- left: 0;
3158
- }
3159
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::before {
3160
- left: -0.5rem;
3161
- border-width: 0.25rem 0 0.25rem 0.3125rem;
3162
- border-color: transparent transparent transparent #393939;
3163
- transform: translate(-100%, -50%);
3164
- }
3165
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center::after,
3166
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center .bx--assistive-text,
3167
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-center + .bx--assistive-text {
3168
- left: -0.8125rem;
3169
- transform: translate(-100%, -50%);
3170
- }
3171
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end .bx--assistive-text::after {
3172
- position: absolute;
3173
- display: block;
3174
- content: "";
3175
- top: 0;
3176
- width: 0.75rem;
3177
- height: 100%;
3178
- right: -0.75rem;
3179
- }
3180
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::before, .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::after,
3181
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end .bx--assistive-text,
3182
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end + .bx--assistive-text {
3183
- top: 50%;
3184
- left: 0;
3185
- }
3186
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::before {
3187
- left: -0.5rem;
3188
- border-width: 0.25rem 0 0.25rem 0.3125rem;
3189
- border-color: transparent transparent transparent #393939;
3190
- transform: translate(-100%, -50%);
3191
- }
3192
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end::after,
3193
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end .bx--assistive-text,
3194
- .bx--tooltip__trigger.bx--btn--icon-only--left.bx--tooltip--align-end + .bx--assistive-text {
3195
- left: -0.8125rem;
3196
- transform: translate(-100%, -50%);
3197
- }
3198
-
3199
- .bx--btn--icon-only {
3200
- padding-right: 0.9375rem;
3201
- padding-left: 0.9375rem;
3202
- }
3203
- .bx--btn--icon-only .bx--btn__icon {
3204
- position: static;
3205
- }
3206
- .bx--btn--icon-only.bx--btn--ghost .bx--btn__icon, .bx--btn--icon-only.bx--btn--danger--ghost .bx--btn__icon {
3207
- margin: 0;
3208
- }
3209
-
3210
- .bx--btn--icon-only.bx--btn--selected {
3211
- background: #e0e0e0;
3212
- }
3213
-
3214
- .bx--btn path[data-icon-path=inner-path] {
3215
- fill: none;
3216
- }
3217
-
3218
- .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon path:not([data-icon-path]):not([fill=none]),
3219
- .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon {
3220
- fill: #161616;
3221
- }
3222
-
3223
- .bx--btn--ghost.bx--btn--icon-only[disabled] .bx--btn__icon path:not([data-icon-path]):not([fill=none]),
3224
- .bx--btn--ghost.bx--btn--icon-only[disabled] .bx--btn__icon,
3225
- .bx--btn.bx--btn--icon-only.bx--btn--ghost[disabled]:hover .bx--btn__icon {
3226
- fill: #8d8d8d;
3227
- }
3228
-
3229
- .bx--btn--ghost.bx--btn--icon-only[disabled] {
3230
- cursor: not-allowed;
3231
- }
3232
-
3233
- .bx--btn--field.bx--btn--icon-only,
3234
- .bx--btn--md.bx--btn--icon-only {
3235
- padding-right: 0.6875rem;
3236
- padding-left: 0.6875rem;
3237
- }
3238
-
3239
- .bx--btn--sm.bx--btn--icon-only {
3240
- padding-right: 0.4375rem;
3241
- padding-left: 0.4375rem;
3242
- }
3243
-
3244
- .bx--btn--danger {
3245
- border-width: 1px;
3246
- border-style: solid;
3247
- border-color: transparent;
3248
- background-color: #da1e28;
3249
- color: #ffffff;
3250
- }
3251
- .bx--btn--danger:hover {
3252
- background-color: #b81921;
3253
- }
3254
- .bx--btn--danger:focus {
3255
- border-color: #0f62fe;
3256
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
3257
- }
3258
- .bx--btn--danger:active {
3259
- background-color: #750e13;
3260
- }
3261
- .bx--btn--danger .bx--btn__icon,
3262
- .bx--btn--danger .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
3263
- fill: currentColor;
3264
- }
3265
- .bx--btn--danger:hover {
3266
- color: #ffffff;
3267
- }
3268
- .bx--btn--danger-tertiary, .bx--btn--danger--tertiary {
3269
- border-width: 1px;
3270
- border-style: solid;
3271
- border-color: #da1e28;
3272
- background-color: transparent;
3273
- color: #da1e28;
3274
- }
3275
- .bx--btn--danger-tertiary:hover, .bx--btn--danger--tertiary:hover {
3276
- background-color: #b81921;
3277
- }
3278
- .bx--btn--danger-tertiary:focus, .bx--btn--danger--tertiary:focus {
3279
- border-color: #0f62fe;
3280
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
3281
- }
3282
- .bx--btn--danger-tertiary:active, .bx--btn--danger--tertiary:active {
3283
- background-color: #750e13;
3284
- }
3285
- .bx--btn--danger-tertiary .bx--btn__icon,
3286
- .bx--btn--danger-tertiary .bx--btn__icon path:not([data-icon-path]):not([fill=none]), .bx--btn--danger--tertiary .bx--btn__icon,
3287
- .bx--btn--danger--tertiary .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
3288
- fill: currentColor;
3289
- }
3290
- .bx--btn--danger-tertiary:hover, .bx--btn--danger--tertiary:hover {
3291
- border-color: #b81921;
3292
- color: #ffffff;
3293
- }
3294
- .bx--btn--danger-tertiary:focus, .bx--btn--danger--tertiary:focus {
3295
- background-color: #da1e28;
3296
- color: #ffffff;
3297
- }
3298
- .bx--btn--danger-tertiary:active, .bx--btn--danger--tertiary:active {
3299
- border-color: #750e13;
3300
- color: #ffffff;
3301
- }
3302
- .bx--btn--danger-tertiary:disabled, .bx--btn--danger-tertiary:hover:disabled, .bx--btn--danger-tertiary:focus:disabled, .bx--btn--danger-tertiary.bx--btn--disabled, .bx--btn--danger-tertiary.bx--btn--disabled:hover, .bx--btn--danger-tertiary.bx--btn--disabled:focus, .bx--btn--danger--tertiary:disabled, .bx--btn--danger--tertiary:hover:disabled, .bx--btn--danger--tertiary:focus:disabled, .bx--btn--danger--tertiary.bx--btn--disabled, .bx--btn--danger--tertiary.bx--btn--disabled:hover, .bx--btn--danger--tertiary.bx--btn--disabled:focus {
3303
- background: transparent;
3304
- color: #8d8d8d;
3305
- outline: none;
3306
- }
3307
- .bx--btn--danger-ghost, .bx--btn--danger--ghost {
3308
- border-width: 1px;
3309
- border-style: solid;
3310
- border-color: transparent;
3311
- background-color: transparent;
3312
- color: #da1e28;
3313
- padding: calc(0.875rem - 3px) 16px;
3314
- }
3315
- .bx--btn--danger-ghost:hover, .bx--btn--danger--ghost:hover {
3316
- background-color: #b81921;
3317
- }
3318
- .bx--btn--danger-ghost:focus, .bx--btn--danger--ghost:focus {
3319
- border-color: #0f62fe;
3320
- box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #ffffff;
3321
- }
3322
- .bx--btn--danger-ghost:active, .bx--btn--danger--ghost:active {
3323
- background-color: #750e13;
3324
- }
3325
- .bx--btn--danger-ghost .bx--btn__icon,
3326
- .bx--btn--danger-ghost .bx--btn__icon path:not([data-icon-path]):not([fill=none]), .bx--btn--danger--ghost .bx--btn__icon,
3327
- .bx--btn--danger--ghost .bx--btn__icon path:not([data-icon-path]):not([fill=none]) {
3328
- fill: currentColor;
3329
- }
3330
- .bx--btn--danger-ghost .bx--btn__icon, .bx--btn--danger--ghost .bx--btn__icon {
3331
- position: static;
3332
- margin-left: 0.5rem;
3333
- }
3334
- .bx--btn--danger-ghost:hover, .bx--btn--danger-ghost:active, .bx--btn--danger--ghost:hover, .bx--btn--danger--ghost:active {
3335
- color: #ffffff;
3336
- }
3337
- .bx--btn--danger-ghost:disabled, .bx--btn--danger-ghost:hover:disabled, .bx--btn--danger-ghost:focus:disabled, .bx--btn--danger-ghost.bx--btn--disabled, .bx--btn--danger-ghost.bx--btn--disabled:hover, .bx--btn--danger-ghost.bx--btn--disabled:focus, .bx--btn--danger--ghost:disabled, .bx--btn--danger--ghost:hover:disabled, .bx--btn--danger--ghost:focus:disabled, .bx--btn--danger--ghost.bx--btn--disabled, .bx--btn--danger--ghost.bx--btn--disabled:hover, .bx--btn--danger--ghost.bx--btn--disabled:focus {
3338
- border-color: transparent;
3339
- background: transparent;
3340
- color: #c6c6c6;
3341
- outline: none;
3342
- }
3343
- .bx--btn--danger-ghost.bx--btn--sm, .bx--btn--danger--ghost.bx--btn--sm {
3344
- padding: calc(0.375rem - 3px) 16px;
3345
- }
3346
- .bx--btn--danger-ghost.bx--btn--field, .bx--btn--danger-ghost.bx--btn--md, .bx--btn--danger--ghost.bx--btn--field, .bx--btn--danger--ghost.bx--btn--md {
3347
- padding: calc(0.675rem - 3px) 16px;
3348
- }
3349
-
3350
- .bx--btn--sm {
3351
- min-height: 2rem;
3352
- padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
3353
- }
3354
-
3355
- .bx--btn--xl:not(.bx--btn--icon-only) {
3356
- align-items: baseline;
3357
- padding-top: 1rem;
3358
- padding-right: 4rem;
3359
- padding-left: 1rem;
3360
- min-height: 5rem;
3361
- }
3362
-
3363
- .bx--btn--lg:not(.bx--btn--icon-only) {
3364
- align-items: baseline;
3365
- padding-top: 1rem;
3366
- padding-right: 4rem;
3367
- padding-left: 1rem;
3368
- min-height: 4rem;
3369
- }
3370
-
3371
- .bx--btn--field,
3372
- .bx--btn--md {
3373
- min-height: 2.5rem;
3374
- padding: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px;
3375
- }
3376
-
3377
- .bx--btn--expressive {
3378
- font-size: 1rem;
3379
- font-weight: 400;
3380
- line-height: 1.375;
3381
- letter-spacing: 0;
3382
- min-height: 3rem;
3383
- }
3384
-
3385
- .bx--btn--icon-only.bx--btn--expressive {
3386
- padding: 12px 13px;
3387
- }
3388
-
3389
- .bx--btn.bx--btn--expressive .bx--btn__icon {
3390
- width: 1.25rem;
3391
- height: 1.25rem;
3392
- }
3393
-
3394
- .bx--btn-set .bx--btn.bx--btn--expressive {
3395
- max-width: 20rem;
3396
- }
3397
-
3398
- .bx--btn.bx--skeleton {
3399
- position: relative;
3400
- padding: 0;
3401
- border: none;
3402
- background: #e5e5e5;
3403
- box-shadow: none;
3404
- pointer-events: none;
3405
- width: 9.375rem;
3406
- }
3407
- .bx--btn.bx--skeleton:hover, .bx--btn.bx--skeleton:focus, .bx--btn.bx--skeleton:active {
3408
- border: none;
3409
- cursor: default;
3410
- outline: none;
3411
- }
3412
- .bx--btn.bx--skeleton::before {
3413
- position: absolute;
3414
- width: 100%;
3415
- height: 100%;
3416
- animation: 3000ms ease-in-out skeleton infinite;
3417
- background: #c6c6c6;
3418
- content: "";
3419
- will-change: transform-origin, transform, opacity;
3420
- }
3421
- @media (prefers-reduced-motion: reduce) {
3422
- .bx--btn.bx--skeleton::before {
3423
- animation: none;
3424
- }
3425
- }
3426
-
3427
- .bx--btn-set {
3428
- display: flex;
3429
- }
3430
-
3431
- .bx--btn-set--stacked {
3432
- flex-direction: column;
3433
- }
3434
-
3435
- .bx--btn-set .bx--btn {
3436
- width: 100%;
3437
- max-width: 12.25rem;
3438
- }
3439
- .bx--btn-set .bx--btn:not(:focus) {
3440
- box-shadow: -0.0625rem 0 0 0 #e0e0e0;
3441
- }
3442
- .bx--btn-set .bx--btn:first-of-type:not(:focus) {
3443
- box-shadow: inherit;
3444
- }
3445
-
3446
- .bx--btn-set .bx--btn:focus + .bx--btn {
3447
- box-shadow: inherit;
3448
- }
3449
-
3450
- .bx--btn-set--stacked .bx--btn:not(:focus) {
3451
- box-shadow: 0 -0.0625rem 0 0 #e0e0e0;
3452
- }
3453
-
3454
- .bx--btn-set--stacked .bx--btn:first-of-type:not(:focus) {
3455
- box-shadow: inherit;
3456
- }
3457
-
3458
- .bx--btn-set .bx--btn.bx--btn--disabled {
3459
- box-shadow: -0.0625rem 0 0 0 #8d8d8d;
3460
- }
3461
- .bx--btn-set .bx--btn.bx--btn--disabled:first-of-type {
3462
- box-shadow: none;
3463
- }
3464
-
3465
- .bx--btn-set--stacked .bx--btn.bx--btn--disabled {
3466
- box-shadow: 0 -0.0625rem 0 0 #8d8d8d;
3467
- }
3468
- .bx--btn-set--stacked .bx--btn.bx--btn--disabled:first-of-type {
3469
- box-shadow: none;
3470
- }
3471
-
3472
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3473
- .bx--btn:focus {
3474
- color: Highlight;
3475
- outline: 1px solid Highlight;
3476
- }
3477
- }
3478
-
3479
- .bx--modal {
3480
- position: fixed;
3481
- z-index: 9000;
3482
- top: 0;
3483
- left: 0;
3484
- display: flex;
3485
- width: 100vw;
3486
- height: 100vh;
3487
- align-items: center;
3488
- justify-content: center;
3489
- background-color: rgba(22, 22, 22, 0.5);
3490
- content: "";
3491
- opacity: 0;
3492
- transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
3493
- visibility: hidden;
3494
- }
3495
- .bx--modal.is-visible {
3496
- opacity: 1;
3497
- transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
3498
- visibility: inherit;
3499
- }
3500
- .bx--modal .bx--pagination,
3501
- .bx--modal .bx--pagination__control-buttons,
3502
- .bx--modal .bx--text-input,
3503
- .bx--modal .bx--text-area,
3504
- .bx--modal .bx--search-input,
3505
- .bx--modal .bx--select-input,
3506
- .bx--modal .bx--dropdown,
3507
- .bx--modal .bx--dropdown-list,
3508
- .bx--modal .bx--number input[type=number],
3509
- .bx--modal .bx--date-picker__input {
3510
- background-color: #ffffff;
3511
- }
3512
-
3513
- .bx--modal.is-visible .bx--modal-container {
3514
- transform: translate3d(0, 0, 0);
3515
- transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
3516
- }
3517
-
3518
- .bx--modal-container {
3519
- position: fixed;
3520
- top: 0;
3521
- display: grid;
3522
- overflow: hidden;
3523
- width: 100%;
3524
- height: 100%;
3525
- max-height: 100%;
3526
- background-color: #f4f4f4;
3527
- grid-template-columns: 100%;
3528
- grid-template-rows: auto 1fr auto;
3529
- outline: 3px solid transparent;
3530
- outline-offset: -3px;
3531
- transform: translate3d(0, -24px, 0);
3532
- transform-origin: top center;
3533
- transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
3534
- }
3535
- @media (min-width: 42rem) {
3536
- .bx--modal-container {
3537
- position: static;
3538
- width: 84%;
3539
- height: auto;
3540
- max-height: 90%;
3541
- }
3542
- .bx--modal-container .bx--modal-header,
3543
- .bx--modal-container .bx--modal-content,
3544
- .bx--modal-container .bx--modal-content__regular-content {
3545
- padding-right: 20%;
3546
- }
3547
- .bx--modal-container .bx--modal-content--with-form {
3548
- padding-right: 1rem;
3549
- }
3550
- }
3551
- @media (min-width: 66rem) {
3552
- .bx--modal-container {
3553
- width: 60%;
3554
- max-height: 84%;
3555
- }
3556
- }
3557
- @media (min-width: 82rem) {
3558
- .bx--modal-container {
3559
- width: 48%;
3560
- }
3561
- }
3562
-
3563
- .bx--modal-header,
3564
- .bx--modal-content {
3565
- padding-left: 1rem;
3566
- }
3567
-
3568
- .bx--modal-header,
3569
- .bx--modal-content,
3570
- .bx--modal-content__regular-content {
3571
- padding-right: 1rem;
3572
- }
3573
-
3574
- .bx--modal-content--with-form {
3575
- padding-right: 1rem;
3576
- }
3577
-
3578
- .bx--modal-container--xs .bx--modal-header {
3579
- padding-right: 3rem;
3580
- }
3581
- .bx--modal-container--xs .bx--modal-content,
3582
- .bx--modal-container--xs .bx--modal-content__regular-content,
3583
- .bx--modal-container--xs .bx--modal-content--with-form {
3584
- padding-right: 1rem;
3585
- }
3586
- @media (min-width: 42rem) {
3587
- .bx--modal-container--xs {
3588
- width: 48%;
3589
- }
3590
- }
3591
- @media (min-width: 66rem) {
3592
- .bx--modal-container--xs {
3593
- width: 32%;
3594
- max-height: 48%;
3595
- }
3596
- }
3597
- @media (min-width: 82rem) {
3598
- .bx--modal-container--xs {
3599
- width: 24%;
3600
- }
3601
- }
3602
-
3603
- .bx--modal-container--sm .bx--modal-header {
3604
- padding-right: 3rem;
3605
- }
3606
- .bx--modal-container--sm .bx--modal-content,
3607
- .bx--modal-container--sm .bx--modal-content__regular-content,
3608
- .bx--modal-container--sm .bx--modal-content--with-form {
3609
- padding-right: 1rem;
3610
- }
3611
- @media (min-width: 42rem) {
3612
- .bx--modal-container--sm {
3613
- width: 60%;
3614
- }
3615
- }
3616
- @media (min-width: 66rem) {
3617
- .bx--modal-container--sm {
3618
- width: 42%;
3619
- max-height: 72%;
3620
- }
3621
- }
3622
- @media (min-width: 82rem) {
3623
- .bx--modal-container--sm {
3624
- width: 36%;
3625
- }
3626
- .bx--modal-container--sm .bx--modal-header,
3627
- .bx--modal-container--sm .bx--modal-content,
3628
- .bx--modal-container--sm .bx--modal-content__regular-content {
3629
- padding-right: 20%;
3630
- }
3631
- .bx--modal-container--sm .bx--modal-content--with-form {
3632
- padding-right: 1rem;
3633
- }
3634
- }
3635
-
3636
- .bx--modal-container--lg .bx--modal-header {
3637
- padding-right: 3rem;
3638
- }
3639
- .bx--modal-container--lg .bx--modal-content,
3640
- .bx--modal-container--lg .bx--modal-content__regular-content,
3641
- .bx--modal-container--lg .bx--modal-content--with-form {
3642
- padding-right: 1rem;
3643
- }
3644
- @media (min-width: 42rem) {
3645
- .bx--modal-container--lg {
3646
- width: 96%;
3647
- }
3648
- .bx--modal-container--lg .bx--modal-header,
3649
- .bx--modal-container--lg .bx--modal-content,
3650
- .bx--modal-container--lg .bx--modal-content__regular-content {
3651
- padding-right: 20%;
3652
- }
3653
- .bx--modal-container--lg .bx--modal-content--with-form {
3654
- padding-right: 1rem;
3655
- }
3656
- }
3657
- @media (min-width: 66rem) {
3658
- .bx--modal-container--lg {
3659
- width: 84%;
3660
- max-height: 96%;
3661
- }
3662
- }
3663
- @media (min-width: 82rem) {
3664
- .bx--modal-container--lg {
3665
- width: 72%;
3666
- }
3667
- }
3668
-
3669
- .bx--modal-header {
3670
- padding-top: 1rem;
3671
- padding-right: 3rem;
3672
- margin-bottom: 0.5rem;
3673
- grid-column: 1/-1;
3674
- grid-row: 1/1;
3675
- }
3676
-
3677
- .bx--modal-header__label {
3678
- font-size: 0.75rem;
3679
- font-weight: 400;
3680
- line-height: 1.34;
3681
- letter-spacing: 0.32px;
3682
- margin-bottom: 0.25rem;
3683
- color: #525252;
3684
- }
3685
-
3686
- .bx--modal-header__heading {
3687
- font-size: 1.25rem;
3688
- font-weight: 400;
3689
- line-height: 1.4;
3690
- letter-spacing: 0;
3691
- color: #161616;
3692
- }
3693
-
3694
- .bx--modal-content {
3695
- font-size: 0.875rem;
3696
- font-weight: 400;
3697
- line-height: 1.43;
3698
- letter-spacing: 0.16px;
3699
- position: relative;
3700
- padding-top: 0.5rem;
3701
- margin-bottom: 3rem;
3702
- color: #161616;
3703
- font-weight: 400;
3704
- grid-column: 1/-1;
3705
- grid-row: 2/-2;
3706
- overflow-y: auto;
3707
- }
3708
- .bx--modal-content:focus {
3709
- outline: 2px solid #0f62fe;
3710
- outline-offset: -2px;
3711
- }
3712
- @media screen and (prefers-contrast) {
3713
- .bx--modal-content:focus {
3714
- outline-style: dotted;
3715
- }
3716
- }
3717
-
3718
- .bx--modal-content > p {
3719
- font-size: 0.875rem;
3720
- font-weight: 400;
3721
- line-height: 1.43;
3722
- letter-spacing: 0.16px;
3723
- }
3724
-
3725
- .bx--modal-scroll-content > *:last-child {
3726
- padding-bottom: 2rem;
3727
- }
3728
-
3729
- .bx--modal-content--overflow-indicator {
3730
- position: absolute;
3731
- bottom: 3rem;
3732
- left: 0;
3733
- width: 100%;
3734
- height: 2rem;
3735
- background-image: linear-gradient(to bottom, rgba(244, 244, 244, 0), #f4f4f4);
3736
- content: "";
3737
- grid-column: 1/-1;
3738
- grid-row: 2/-2;
3739
- pointer-events: none;
3740
- }
3741
-
3742
- @media not all and (min-resolution: 0.001dpcm) {
3743
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
3744
- .bx--modal-content--overflow-indicator {
3745
- background-image: linear-gradient(to bottom, rgba(244, 244, 244, 0), #f4f4f4);
3746
- }
3747
- }
3748
- }
3749
- .bx--modal-content:focus ~ .bx--modal-content--overflow-indicator {
3750
- width: calc(100% - 4px);
3751
- margin: 0 2px 2px;
3752
- }
3753
-
3754
- @media screen and (-ms-high-contrast: active) {
3755
- .bx--modal-scroll-content > *:last-child {
3756
- padding-bottom: 0;
3757
- }
3758
-
3759
- .bx--modal-content--overflow-indicator {
3760
- display: none;
3761
- }
3762
- }
3763
- .bx--modal-footer {
3764
- display: flex;
3765
- height: 4rem;
3766
- justify-content: flex-end;
3767
- margin-top: auto;
3768
- grid-column: 1/-1;
3769
- grid-row: -1/-1;
3770
- }
3771
-
3772
- .bx--modal-footer .bx--btn {
3773
- max-width: none;
3774
- height: 4rem;
3775
- flex: 0 1 50%;
3776
- padding-top: 1rem;
3777
- padding-bottom: 2rem;
3778
- margin: 0;
3779
- }
3780
-
3781
- .bx--modal-footer--three-button .bx--btn {
3782
- flex: 0 1 25%;
3783
- align-items: flex-start;
3784
- }
3785
-
3786
- .bx--modal-close {
3787
- position: absolute;
3788
- z-index: 2;
3789
- top: 0;
3790
- right: 0;
3791
- overflow: hidden;
3792
- width: 3rem;
3793
- height: 3rem;
3794
- padding: 0.75rem;
3795
- border: 2px solid transparent;
3796
- background-color: transparent;
3797
- cursor: pointer;
3798
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3799
- }
3800
- .bx--modal-close:hover {
3801
- background-color: #e5e5e5;
3802
- }
3803
- .bx--modal-close:focus {
3804
- border-color: #0f62fe;
3805
- outline: none;
3806
- }
3807
-
3808
- .bx--modal-close::-moz-focus-inner {
3809
- border: 0;
3810
- }
3811
-
3812
- .bx--modal-close__icon {
3813
- width: 1.25rem;
3814
- height: 1.25rem;
3815
- fill: #161616;
3816
- }
3817
-
3818
- .bx--body--with-modal-open {
3819
- overflow: hidden;
3820
- }
3821
-
3822
- .bx--body--with-modal-open .bx--tooltip,
3823
- .bx--body--with-modal-open .bx--overflow-menu-options {
3824
- z-index: 9000;
3825
- }
3826
-
3827
- /* stylelint-disable */
3828
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3829
- .bx--modal-close__icon {
3830
- fill: ButtonText;
3831
- }
3832
- }
3833
-
3834
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3835
- .bx--modal-close:focus {
3836
- color: Highlight;
3837
- outline: 1px solid Highlight;
3838
- }
3839
- }
3840
-
3841
- /* stylelint-enable */
3842
- .bx--chart-holder {
3843
- /* stylelint-disable */
3844
- /* stylelint-enable */
3845
- }
3846
- .bx--chart-holder .bx--modal {
3847
- position: fixed;
3848
- z-index: 9000;
3849
- top: 0;
3850
- left: 0;
3851
- display: flex;
3852
- width: 100vw;
3853
- height: 100vh;
3854
- align-items: center;
3855
- justify-content: center;
3856
- background-color: rgba(22, 22, 22, 0.5);
3857
- content: "";
3858
- opacity: 0;
3859
- transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
3860
- visibility: hidden;
3861
- }
3862
- .bx--chart-holder .bx--modal.is-visible {
3863
- opacity: 1;
3864
- transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
3865
- visibility: inherit;
3866
- }
3867
- .bx--chart-holder .bx--modal .bx--pagination,
3868
- .bx--chart-holder .bx--modal .bx--pagination__control-buttons,
3869
- .bx--chart-holder .bx--modal .bx--text-input,
3870
- .bx--chart-holder .bx--modal .bx--text-area,
3871
- .bx--chart-holder .bx--modal .bx--search-input,
3872
- .bx--chart-holder .bx--modal .bx--select-input,
3873
- .bx--chart-holder .bx--modal .bx--dropdown,
3874
- .bx--chart-holder .bx--modal .bx--dropdown-list,
3875
- .bx--chart-holder .bx--modal .bx--number input[type=number],
3876
- .bx--chart-holder .bx--modal .bx--date-picker__input {
3877
- background-color: #ffffff;
3878
- }
3879
- .bx--chart-holder .bx--modal.is-visible .bx--modal-container {
3880
- transform: translate3d(0, 0, 0);
3881
- transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
3882
- }
3883
- .bx--chart-holder .bx--modal-container {
3884
- position: fixed;
3885
- top: 0;
3886
- display: grid;
3887
- overflow: hidden;
3888
- width: 100%;
3889
- height: 100%;
3890
- max-height: 100%;
3891
- background-color: #f4f4f4;
3892
- grid-template-columns: 100%;
3893
- grid-template-rows: auto 1fr auto;
3894
- outline: 3px solid transparent;
3895
- outline-offset: -3px;
3896
- transform: translate3d(0, -24px, 0);
3897
- transform-origin: top center;
3898
- transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
3899
- }
3900
- @media (min-width: 42rem) {
3901
- .bx--chart-holder .bx--modal-container {
3902
- position: static;
3903
- width: 84%;
3904
- height: auto;
3905
- max-height: 90%;
3906
- }
3907
- .bx--chart-holder .bx--modal-container .bx--modal-header,
3908
- .bx--chart-holder .bx--modal-container .bx--modal-content,
3909
- .bx--chart-holder .bx--modal-container .bx--modal-content__regular-content {
3910
- padding-right: 20%;
3911
- }
3912
- .bx--chart-holder .bx--modal-container .bx--modal-content--with-form {
3913
- padding-right: 1rem;
3914
- }
3915
- }
3916
- @media (min-width: 66rem) {
3917
- .bx--chart-holder .bx--modal-container {
3918
- width: 60%;
3919
- max-height: 84%;
3920
- }
3921
- }
3922
- @media (min-width: 82rem) {
3923
- .bx--chart-holder .bx--modal-container {
3924
- width: 48%;
3925
- }
3926
- }
3927
- .bx--chart-holder .bx--modal-header,
3928
- .bx--chart-holder .bx--modal-content {
3929
- padding-left: 1rem;
3930
- }
3931
- .bx--chart-holder .bx--modal-header,
3932
- .bx--chart-holder .bx--modal-content,
3933
- .bx--chart-holder .bx--modal-content__regular-content {
3934
- padding-right: 1rem;
3935
- }
3936
- .bx--chart-holder .bx--modal-content--with-form {
3937
- padding-right: 1rem;
3938
- }
3939
- .bx--chart-holder .bx--modal-container--xs .bx--modal-header {
3940
- padding-right: 3rem;
3941
- }
3942
- .bx--chart-holder .bx--modal-container--xs .bx--modal-content,
3943
- .bx--chart-holder .bx--modal-container--xs .bx--modal-content__regular-content,
3944
- .bx--chart-holder .bx--modal-container--xs .bx--modal-content--with-form {
3945
- padding-right: 1rem;
3946
- }
3947
- @media (min-width: 42rem) {
3948
- .bx--chart-holder .bx--modal-container--xs {
3949
- width: 48%;
3950
- }
3951
- }
3952
- @media (min-width: 66rem) {
3953
- .bx--chart-holder .bx--modal-container--xs {
3954
- width: 32%;
3955
- max-height: 48%;
3956
- }
3957
- }
3958
- @media (min-width: 82rem) {
3959
- .bx--chart-holder .bx--modal-container--xs {
3960
- width: 24%;
3961
- }
3962
- }
3963
- .bx--chart-holder .bx--modal-container--sm .bx--modal-header {
3964
- padding-right: 3rem;
3965
- }
3966
- .bx--chart-holder .bx--modal-container--sm .bx--modal-content,
3967
- .bx--chart-holder .bx--modal-container--sm .bx--modal-content__regular-content,
3968
- .bx--chart-holder .bx--modal-container--sm .bx--modal-content--with-form {
3969
- padding-right: 1rem;
3970
- }
3971
- @media (min-width: 42rem) {
3972
- .bx--chart-holder .bx--modal-container--sm {
3973
- width: 60%;
3974
- }
3975
- }
3976
- @media (min-width: 66rem) {
3977
- .bx--chart-holder .bx--modal-container--sm {
3978
- width: 42%;
3979
- max-height: 72%;
3980
- }
3981
- }
3982
- @media (min-width: 82rem) {
3983
- .bx--chart-holder .bx--modal-container--sm {
3984
- width: 36%;
3985
- }
3986
- .bx--chart-holder .bx--modal-container--sm .bx--modal-header,
3987
- .bx--chart-holder .bx--modal-container--sm .bx--modal-content,
3988
- .bx--chart-holder .bx--modal-container--sm .bx--modal-content__regular-content {
3989
- padding-right: 20%;
3990
- }
3991
- .bx--chart-holder .bx--modal-container--sm .bx--modal-content--with-form {
3992
- padding-right: 1rem;
3993
- }
3994
- }
3995
- .bx--chart-holder .bx--modal-container--lg .bx--modal-header {
3996
- padding-right: 3rem;
3997
- }
3998
- .bx--chart-holder .bx--modal-container--lg .bx--modal-content,
3999
- .bx--chart-holder .bx--modal-container--lg .bx--modal-content__regular-content,
4000
- .bx--chart-holder .bx--modal-container--lg .bx--modal-content--with-form {
4001
- padding-right: 1rem;
4002
- }
4003
- @media (min-width: 42rem) {
4004
- .bx--chart-holder .bx--modal-container--lg {
4005
- width: 96%;
4006
- }
4007
- .bx--chart-holder .bx--modal-container--lg .bx--modal-header,
4008
- .bx--chart-holder .bx--modal-container--lg .bx--modal-content,
4009
- .bx--chart-holder .bx--modal-container--lg .bx--modal-content__regular-content {
4010
- padding-right: 20%;
4011
- }
4012
- .bx--chart-holder .bx--modal-container--lg .bx--modal-content--with-form {
4013
- padding-right: 1rem;
4014
- }
4015
- }
4016
- @media (min-width: 66rem) {
4017
- .bx--chart-holder .bx--modal-container--lg {
4018
- width: 84%;
4019
- max-height: 96%;
4020
- }
4021
- }
4022
- @media (min-width: 82rem) {
4023
- .bx--chart-holder .bx--modal-container--lg {
4024
- width: 72%;
4025
- }
4026
- }
4027
- .bx--chart-holder .bx--modal-header {
4028
- padding-top: 1rem;
4029
- padding-right: 3rem;
4030
- margin-bottom: 0.5rem;
4031
- grid-column: 1/-1;
4032
- grid-row: 1/1;
4033
- }
4034
- .bx--chart-holder .bx--modal-header__label {
4035
- font-size: 0.75rem;
4036
- font-weight: 400;
4037
- line-height: 1.34;
4038
- letter-spacing: 0.32px;
4039
- margin-bottom: 0.25rem;
4040
- color: #525252;
4041
- }
4042
- .bx--chart-holder .bx--modal-header__heading {
4043
- font-size: 1.25rem;
4044
- font-weight: 400;
4045
- line-height: 1.4;
4046
- letter-spacing: 0;
4047
- color: #161616;
4048
- }
4049
- .bx--chart-holder .bx--modal-content {
4050
- font-size: 0.875rem;
4051
- font-weight: 400;
4052
- line-height: 1.43;
4053
- letter-spacing: 0.16px;
4054
- position: relative;
4055
- padding-top: 0.5rem;
4056
- margin-bottom: 3rem;
4057
- color: #161616;
4058
- font-weight: 400;
4059
- grid-column: 1/-1;
4060
- grid-row: 2/-2;
4061
- overflow-y: auto;
4062
- }
4063
- .bx--chart-holder .bx--modal-content:focus {
4064
- outline: 2px solid #0f62fe;
4065
- outline-offset: -2px;
4066
- }
4067
- @media screen and (prefers-contrast) {
4068
- .bx--chart-holder .bx--modal-content:focus {
4069
- outline-style: dotted;
4070
- }
4071
- }
4072
- .bx--chart-holder .bx--modal-content > p {
4073
- font-size: 0.875rem;
4074
- font-weight: 400;
4075
- line-height: 1.43;
4076
- letter-spacing: 0.16px;
4077
- }
4078
- .bx--chart-holder .bx--modal-scroll-content > *:last-child {
4079
- padding-bottom: 2rem;
4080
- }
4081
- .bx--chart-holder .bx--modal-content--overflow-indicator {
4082
- position: absolute;
4083
- bottom: 3rem;
4084
- left: 0;
4085
- width: 100%;
4086
- height: 2rem;
4087
- background-image: linear-gradient(to bottom, rgba(244, 244, 244, 0), #f4f4f4);
4088
- content: "";
4089
- grid-column: 1/-1;
4090
- grid-row: 2/-2;
4091
- pointer-events: none;
4092
- }
4093
- @media not all and (min-resolution: 0.001dpcm) {
4094
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
4095
- .bx--chart-holder .bx--modal-content--overflow-indicator {
4096
- background-image: linear-gradient(to bottom, rgba(244, 244, 244, 0), #f4f4f4);
4097
- }
4098
- }
4099
- }
4100
- .bx--chart-holder .bx--modal-content:focus ~ .bx--modal-content--overflow-indicator {
4101
- width: calc(100% - 4px);
4102
- margin: 0 2px 2px;
4103
- }
4104
- @media screen and (-ms-high-contrast: active) {
4105
- .bx--chart-holder .bx--modal-scroll-content > *:last-child {
4106
- padding-bottom: 0;
4107
- }
4108
- .bx--chart-holder .bx--modal-content--overflow-indicator {
4109
- display: none;
4110
- }
4111
- }
4112
- .bx--chart-holder .bx--modal-footer {
4113
- display: flex;
4114
- height: 4rem;
4115
- justify-content: flex-end;
4116
- margin-top: auto;
4117
- grid-column: 1/-1;
4118
- grid-row: -1/-1;
4119
- }
4120
- .bx--chart-holder .bx--modal-footer .bx--btn {
4121
- max-width: none;
4122
- height: 4rem;
4123
- flex: 0 1 50%;
4124
- padding-top: 1rem;
4125
- padding-bottom: 2rem;
4126
- margin: 0;
4127
- }
4128
- .bx--chart-holder .bx--modal-footer--three-button .bx--btn {
4129
- flex: 0 1 25%;
4130
- align-items: flex-start;
4131
- }
4132
- .bx--chart-holder .bx--modal-close {
4133
- position: absolute;
4134
- z-index: 2;
4135
- top: 0;
4136
- right: 0;
4137
- overflow: hidden;
4138
- width: 3rem;
4139
- height: 3rem;
4140
- padding: 0.75rem;
4141
- border: 2px solid transparent;
4142
- background-color: transparent;
4143
- cursor: pointer;
4144
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
4145
- }
4146
- .bx--chart-holder .bx--modal-close:hover {
4147
- background-color: #e5e5e5;
4148
- }
4149
- .bx--chart-holder .bx--modal-close:focus {
4150
- border-color: #0f62fe;
4151
- outline: none;
4152
- }
4153
- .bx--chart-holder .bx--modal-close::-moz-focus-inner {
4154
- border: 0;
4155
- }
4156
- .bx--chart-holder .bx--modal-close__icon {
4157
- width: 1.25rem;
4158
- height: 1.25rem;
4159
- fill: #161616;
4160
- }
4161
- .bx--chart-holder .bx--body--with-modal-open {
4162
- overflow: hidden;
4163
- }
4164
- .bx--chart-holder .bx--body--with-modal-open .bx--tooltip,
4165
- .bx--chart-holder .bx--body--with-modal-open .bx--overflow-menu-options {
4166
- z-index: 9000;
4167
- }
4168
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4169
- .bx--chart-holder .bx--modal-close__icon {
4170
- fill: ButtonText;
4171
- }
4172
- }
4173
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4174
- .bx--chart-holder .bx--modal-close:focus {
4175
- color: Highlight;
4176
- outline: 1px solid Highlight;
4177
- }
4178
- }
4179
- .bx--chart-holder .bx--modal.is-visible {
4180
- z-index: 99999;
4181
- }
4182
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-header__label {
4183
- margin-top: 0;
4184
- margin-bottom: 0;
4185
- }
4186
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-header__heading {
4187
- margin-top: 0.5rem;
4188
- margin-bottom: 1rem;
4189
- }
4190
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content {
4191
- padding: 0;
4192
- margin-bottom: 0;
4193
- }
4194
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table {
4195
- position: relative;
4196
- border-collapse: collapse;
4197
- }
4198
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table th {
4199
- position: sticky;
4200
- top: 0;
4201
- }
4202
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer {
4203
- background-color: transparent;
4204
- }
4205
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer .bx--cc-modal-footer-spacer {
4206
- width: 50%;
4207
- }
4208
-
4209
- .bx--cc--title p.title {
4210
- color: #161616;
4211
- font-size: 16px;
4212
- font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
4213
- font-weight: 600;
4214
- white-space: nowrap;
4215
- overflow: hidden;
4216
- text-overflow: ellipsis;
4217
- padding-right: 15px;
4218
- }
4219
-
4220
- .layout-child.title {
4221
- height: unset !important;
4222
- overflow: hidden;
4223
- }
4224
-
4225
- .bx--cc--meter-title {
4226
- overflow: visible;
4227
- }
4228
- .bx--cc--meter-title text.meter-title,
4229
- .bx--cc--meter-title text.proportional-meter-title,
4230
- .bx--cc--meter-title text.proportional-meter-total,
4231
- .bx--cc--meter-title text.percent-value {
4232
- fill: #161616;
4233
- }
4234
- .bx--cc--meter-title g.status-indicator.status--danger circle.status {
4235
- fill: #da1e28;
4236
- }
4237
- .bx--cc--meter-title g.status-indicator.status--warning circle.status {
4238
- fill: #f1c21b;
4239
- }
4240
- .bx--cc--meter-title g.status-indicator.status--warning path.innerFill {
4241
- fill: #000000;
4242
- }
4243
- .bx--cc--meter-title g.status-indicator.status--success circle.status {
4244
- fill: #198038;
4245
- }
4246
- .bx--cc--meter-title g.status-indicator path.innerFill {
4247
- fill: #ffffff;
4248
- }
4249
-
4250
- @keyframes skeleton {
4251
- 0% {
4252
- opacity: 0.3;
4253
- transform: scaleX(0);
4254
- transform-origin: left;
4255
- }
4256
- 20% {
4257
- opacity: 1;
4258
- transform: scaleX(1);
4259
- transform-origin: left;
4260
- }
4261
- 28% {
4262
- transform: scaleX(1);
4263
- transform-origin: right;
4264
- }
4265
- 51% {
4266
- transform: scaleX(0);
4267
- transform-origin: right;
4268
- }
4269
- 58% {
4270
- transform: scaleX(0);
4271
- transform-origin: right;
4272
- }
4273
- 82% {
4274
- transform: scaleX(1);
4275
- transform-origin: right;
4276
- }
4277
- 83% {
4278
- transform: scaleX(1);
4279
- transform-origin: left;
4280
- }
4281
- 96% {
4282
- transform: scaleX(0);
4283
- transform-origin: left;
4284
- }
4285
- 100% {
4286
- opacity: 0.3;
4287
- transform: scaleX(0);
4288
- transform-origin: left;
4289
- }
4290
- }
4291
- .bx--assistive-text,
4292
- .bx--visually-hidden {
4293
- position: absolute;
4294
- overflow: hidden;
4295
- width: 1px;
4296
- height: 1px;
4297
- padding: 0;
4298
- border: 0;
4299
- margin: -1px;
4300
- clip: rect(0, 0, 0, 0);
4301
- visibility: inherit;
4302
- white-space: nowrap;
4303
- }
4304
-
4305
- .bx--body {
4306
- box-sizing: border-box;
4307
- padding: 0;
4308
- border: 0;
4309
- margin: 0;
4310
- font-family: inherit;
4311
- font-size: 100%;
4312
- vertical-align: baseline;
4313
- font-size: 0.875rem;
4314
- font-weight: 400;
4315
- line-height: 1.29;
4316
- letter-spacing: 0.16px;
4317
- background-color: #ffffff;
4318
- color: #161616;
4319
- line-height: 1;
4320
- }
4321
- .bx--body *,
4322
- .bx--body *::before,
4323
- .bx--body *::after {
4324
- box-sizing: inherit;
4325
- }
4326
-
4327
- .bx--text-truncate--end {
4328
- display: inline-block;
4329
- overflow: hidden;
4330
- width: 100%;
4331
- text-overflow: ellipsis;
4332
- white-space: nowrap;
4333
- }
4334
-
4335
- .bx--text-truncate--front {
4336
- display: inline-block;
4337
- overflow: hidden;
4338
- width: 100%;
4339
- direction: rtl;
4340
- text-overflow: ellipsis;
4341
- white-space: nowrap;
4342
- }
4343
-
4344
- .bx--overflow-menu,
4345
- .bx--overflow-menu__trigger {
4346
- box-sizing: border-box;
4347
- padding: 0;
4348
- border: 0;
4349
- margin: 0;
4350
- font-family: inherit;
4351
- font-size: 100%;
4352
- vertical-align: baseline;
4353
- display: inline-block;
4354
- padding: 0;
4355
- border: 0;
4356
- appearance: none;
4357
- background: none;
4358
- cursor: pointer;
4359
- width: 100%;
4360
- box-sizing: border-box;
4361
- padding: 0;
4362
- border: 0;
4363
- margin: 0;
4364
- font-family: inherit;
4365
- font-size: 100%;
4366
- vertical-align: baseline;
4367
- outline: 2px solid transparent;
4368
- outline-offset: -2px;
4369
- position: relative;
4370
- display: flex;
4371
- width: 2.5rem;
4372
- height: 2.5rem;
4373
- align-items: center;
4374
- justify-content: center;
4375
- cursor: pointer;
4376
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4377
- }
4378
- .bx--overflow-menu *,
4379
- .bx--overflow-menu *::before,
4380
- .bx--overflow-menu *::after,
4381
- .bx--overflow-menu__trigger *,
4382
- .bx--overflow-menu__trigger *::before,
4383
- .bx--overflow-menu__trigger *::after {
4384
- box-sizing: inherit;
4385
- }
4386
- .bx--overflow-menu::-moz-focus-inner,
4387
- .bx--overflow-menu__trigger::-moz-focus-inner {
4388
- border: 0;
4389
- }
4390
- .bx--overflow-menu *,
4391
- .bx--overflow-menu *::before,
4392
- .bx--overflow-menu *::after,
4393
- .bx--overflow-menu__trigger *,
4394
- .bx--overflow-menu__trigger *::before,
4395
- .bx--overflow-menu__trigger *::after {
4396
- box-sizing: inherit;
4397
- }
4398
- .bx--overflow-menu:focus,
4399
- .bx--overflow-menu__trigger:focus {
4400
- outline: 2px solid #0f62fe;
4401
- outline-offset: -2px;
4402
- }
4403
- @media screen and (prefers-contrast) {
4404
- .bx--overflow-menu:focus,
4405
- .bx--overflow-menu__trigger:focus {
4406
- outline-style: dotted;
4407
- }
4408
- }
4409
- .bx--overflow-menu:hover,
4410
- .bx--overflow-menu__trigger:hover {
4411
- background-color: #e5e5e5;
4412
- }
4413
-
4414
- .bx--overflow-menu--sm {
4415
- width: 2rem;
4416
- height: 2rem;
4417
- }
4418
-
4419
- .bx--overflow-menu--xl,
4420
- .bx--overflow-menu--lg {
4421
- width: 3rem;
4422
- height: 3rem;
4423
- }
4424
-
4425
- .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4426
- outline: 2px solid #0f62fe;
4427
- outline-offset: -2px;
4428
- }
4429
- @media screen and (prefers-contrast) {
4430
- .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4431
- outline-style: dotted;
4432
- }
4433
- }
4434
- .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg {
4435
- outline: none;
4436
- }
4437
-
4438
- .bx--overflow-menu.bx--overflow-menu--open,
4439
- .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger {
4440
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4441
- background-color: #f4f4f4;
4442
- transition: none;
4443
- }
4444
-
4445
- .bx--overflow-menu--light.bx--overflow-menu--open,
4446
- .bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger {
4447
- background-color: #ffffff;
4448
- }
4449
-
4450
- .bx--overflow-menu__icon {
4451
- width: 1rem;
4452
- height: 1rem;
4453
- fill: #161616;
4454
- }
4455
-
4456
- .bx--overflow-menu-options {
4457
- box-sizing: border-box;
4458
- padding: 0;
4459
- border: 0;
4460
- margin: 0;
4461
- font-family: inherit;
4462
- font-size: 100%;
4463
- vertical-align: baseline;
4464
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4465
- position: absolute;
4466
- z-index: 6000;
4467
- top: 32px;
4468
- left: 0;
4469
- display: none;
4470
- width: 10rem;
4471
- flex-direction: column;
4472
- align-items: flex-start;
4473
- background-color: #f4f4f4;
4474
- list-style: none;
4475
- }
4476
- .bx--overflow-menu-options *,
4477
- .bx--overflow-menu-options *::before,
4478
- .bx--overflow-menu-options *::after {
4479
- box-sizing: inherit;
4480
- }
4481
- .bx--overflow-menu-options::after {
4482
- position: absolute;
4483
- display: block;
4484
- background-color: #f4f4f4;
4485
- content: "";
4486
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4487
- }
4488
-
4489
- .bx--overflow-menu.bx--overflow-menu--open:hover {
4490
- background-color: #f4f4f4;
4491
- }
4492
-
4493
- .bx--overflow-menu-options--light {
4494
- background-color: #ffffff;
4495
- }
4496
- .bx--overflow-menu-options--light::after {
4497
- background-color: #ffffff;
4498
- }
4499
-
4500
- .bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover {
4501
- background-color: #ffffff;
4502
- }
4503
-
4504
- .bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4505
- top: -0.1875rem;
4506
- left: 0;
4507
- width: 2.5rem;
4508
- height: 0.1875rem;
4509
- }
4510
-
4511
- .bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4512
- bottom: -0.5rem;
4513
- left: 0;
4514
- width: 2.5rem;
4515
- height: 0.5rem;
4516
- }
4517
-
4518
- .bx--overflow-menu-options[data-floating-menu-direction=left]::after {
4519
- top: 0;
4520
- right: -0.375rem;
4521
- width: 0.375rem;
4522
- height: 2.5rem;
4523
- }
4524
-
4525
- .bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4526
- top: 0;
4527
- left: -0.375rem;
4528
- width: 0.375rem;
4529
- height: 2.5rem;
4530
- }
4531
-
4532
- .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after, .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4533
- width: 2rem;
4534
- }
4535
- .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=left]::after, .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4536
- height: 2rem;
4537
- }
4538
-
4539
- .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after, .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=top]::after,
4540
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after,
4541
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4542
- width: 3rem;
4543
- }
4544
- .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=left]::after, .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=right]::after,
4545
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4546
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4547
- height: 3rem;
4548
- }
4549
-
4550
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=top]::after,
4551
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4552
- right: 0;
4553
- left: auto;
4554
- }
4555
-
4556
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4557
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4558
- top: auto;
4559
- bottom: 0;
4560
- }
4561
-
4562
- .bx--overflow-menu-options--open {
4563
- display: flex;
4564
- }
4565
-
4566
- .bx--overflow-menu-options__content {
4567
- width: 100%;
4568
- }
4569
-
4570
- .bx--overflow-menu-options__option {
4571
- box-sizing: border-box;
4572
- padding: 0;
4573
- border: 0;
4574
- margin: 0;
4575
- font-family: inherit;
4576
- font-size: 100%;
4577
- vertical-align: baseline;
4578
- display: flex;
4579
- width: 100%;
4580
- height: 2.5rem;
4581
- align-items: center;
4582
- padding: 0;
4583
- background-color: transparent;
4584
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4585
- }
4586
- .bx--overflow-menu-options__option *,
4587
- .bx--overflow-menu-options__option *::before,
4588
- .bx--overflow-menu-options__option *::after {
4589
- box-sizing: inherit;
4590
- }
4591
-
4592
- .bx--overflow-menu-options--sm .bx--overflow-menu-options__option {
4593
- height: 2rem;
4594
- }
4595
-
4596
- .bx--overflow-menu-options--xl .bx--overflow-menu-options__option,
4597
- .bx--overflow-menu-options--lg .bx--overflow-menu-options__option {
4598
- height: 3rem;
4599
- }
4600
-
4601
- .bx--overflow-menu--divider {
4602
- border-top: 1px solid #e0e0e0;
4603
- }
4604
-
4605
- .bx--overflow-menu--light .bx--overflow-menu--divider {
4606
- border-top: 1px solid #e0e0e0;
4607
- }
4608
-
4609
- a.bx--overflow-menu-options__btn::before {
4610
- display: inline-block;
4611
- height: 100%;
4612
- content: "";
4613
- vertical-align: middle;
4614
- }
4615
-
4616
- .bx--overflow-menu-options__btn {
4617
- box-sizing: border-box;
4618
- padding: 0;
4619
- border: 0;
4620
- margin: 0;
4621
- font-family: inherit;
4622
- font-size: 100%;
4623
- vertical-align: baseline;
4624
- font-size: 0.875rem;
4625
- font-weight: 400;
4626
- line-height: 1.29;
4627
- letter-spacing: 0.16px;
4628
- outline: 2px solid transparent;
4629
- outline-offset: -2px;
4630
- display: inline-flex;
4631
- width: 100%;
4632
- max-width: 11.25rem;
4633
- height: 100%;
4634
- align-items: center;
4635
- padding: 0 1rem;
4636
- border: none;
4637
- background-color: transparent;
4638
- color: #525252;
4639
- cursor: pointer;
4640
- font-weight: 400;
4641
- text-align: left;
4642
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4643
- }
4644
- .bx--overflow-menu-options__btn *,
4645
- .bx--overflow-menu-options__btn *::before,
4646
- .bx--overflow-menu-options__btn *::after {
4647
- box-sizing: inherit;
4648
- }
4649
- .bx--overflow-menu-options__btn:hover {
4650
- color: #161616;
4651
- }
4652
- .bx--overflow-menu-options__btn:focus {
4653
- outline: 2px solid #0f62fe;
4654
- outline-offset: -2px;
4655
- }
4656
- @media screen and (prefers-contrast) {
4657
- .bx--overflow-menu-options__btn:focus {
4658
- outline-style: dotted;
4659
- }
4660
- }
4661
- .bx--overflow-menu-options__btn::-moz-focus-inner {
4662
- border: none;
4663
- }
4664
-
4665
- .bx--overflow-menu-options__btn svg {
4666
- fill: #525252;
4667
- }
4668
-
4669
- .bx--overflow-menu-options__btn:hover svg {
4670
- fill: #161616;
4671
- }
4672
-
4673
- .bx--overflow-menu-options__option-content {
4674
- overflow: hidden;
4675
- text-overflow: ellipsis;
4676
- white-space: nowrap;
4677
- }
4678
-
4679
- .bx--overflow-menu-options__option:hover {
4680
- background-color: #e5e5e5;
4681
- }
4682
-
4683
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover,
4684
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
4685
- background-color: #da1e28;
4686
- color: #ffffff;
4687
- }
4688
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover svg,
4689
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus svg {
4690
- fill: currentColor;
4691
- }
4692
-
4693
- .bx--overflow-menu-options__option--disabled:hover {
4694
- background-color: #f4f4f4;
4695
- cursor: not-allowed;
4696
- }
4697
-
4698
- .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn {
4699
- color: #c6c6c6;
4700
- pointer-events: none;
4701
- }
4702
- .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:hover, .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:active, .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:focus {
4703
- outline: 2px solid transparent;
4704
- outline-offset: -2px;
4705
- background-color: #f4f4f4;
4706
- }
4707
-
4708
- .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg {
4709
- fill: #c6c6c6;
4710
- }
4711
-
4712
- .bx--overflow-menu--flip {
4713
- left: -140px;
4714
- }
4715
- .bx--overflow-menu--flip::before {
4716
- left: 145px;
4717
- }
4718
-
4719
- .bx--overflow-menu__container {
4720
- display: inline-block;
4721
- }
4722
-
4723
- /* stylelint-disable */
4724
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4725
- .bx--overflow-menu:focus,
4726
- .bx--overflow-menu-options__btn:focus {
4727
- color: Highlight;
4728
- outline: 1px solid Highlight;
4729
- }
4730
- }
4731
-
4732
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4733
- .bx--overflow-menu svg {
4734
- fill: ButtonText;
4735
- }
4736
- }
4737
-
4738
- /*stylelint-enable */
4739
- .bx--chart-holder {
4740
- /* stylelint-disable */
4741
- /*stylelint-enable */
4742
- }
4743
- .bx--chart-holder .bx--overflow-menu,
4744
- .bx--chart-holder .bx--overflow-menu__trigger {
4745
- box-sizing: border-box;
4746
- padding: 0;
4747
- border: 0;
4748
- margin: 0;
4749
- font-family: inherit;
4750
- font-size: 100%;
4751
- vertical-align: baseline;
4752
- display: inline-block;
4753
- padding: 0;
4754
- border: 0;
4755
- appearance: none;
4756
- background: none;
4757
- cursor: pointer;
4758
- width: 100%;
4759
- box-sizing: border-box;
4760
- padding: 0;
4761
- border: 0;
4762
- margin: 0;
4763
- font-family: inherit;
4764
- font-size: 100%;
4765
- vertical-align: baseline;
4766
- outline: 2px solid transparent;
4767
- outline-offset: -2px;
4768
- position: relative;
4769
- display: flex;
4770
- width: 2.5rem;
4771
- height: 2.5rem;
4772
- align-items: center;
4773
- justify-content: center;
4774
- cursor: pointer;
4775
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4776
- }
4777
- .bx--chart-holder .bx--overflow-menu *,
4778
- .bx--chart-holder .bx--overflow-menu *::before,
4779
- .bx--chart-holder .bx--overflow-menu *::after,
4780
- .bx--chart-holder .bx--overflow-menu__trigger *,
4781
- .bx--chart-holder .bx--overflow-menu__trigger *::before,
4782
- .bx--chart-holder .bx--overflow-menu__trigger *::after {
4783
- box-sizing: inherit;
4784
- }
4785
- .bx--chart-holder .bx--overflow-menu::-moz-focus-inner,
4786
- .bx--chart-holder .bx--overflow-menu__trigger::-moz-focus-inner {
4787
- border: 0;
4788
- }
4789
- .bx--chart-holder .bx--overflow-menu *,
4790
- .bx--chart-holder .bx--overflow-menu *::before,
4791
- .bx--chart-holder .bx--overflow-menu *::after,
4792
- .bx--chart-holder .bx--overflow-menu__trigger *,
4793
- .bx--chart-holder .bx--overflow-menu__trigger *::before,
4794
- .bx--chart-holder .bx--overflow-menu__trigger *::after {
4795
- box-sizing: inherit;
4796
- }
4797
- .bx--chart-holder .bx--overflow-menu:focus,
4798
- .bx--chart-holder .bx--overflow-menu__trigger:focus {
4799
- outline: 2px solid #0f62fe;
4800
- outline-offset: -2px;
4801
- }
4802
- @media screen and (prefers-contrast) {
4803
- .bx--chart-holder .bx--overflow-menu:focus,
4804
- .bx--chart-holder .bx--overflow-menu__trigger:focus {
4805
- outline-style: dotted;
4806
- }
4807
- }
4808
- .bx--chart-holder .bx--overflow-menu:hover,
4809
- .bx--chart-holder .bx--overflow-menu__trigger:hover {
4810
- background-color: #e5e5e5;
4811
- }
4812
- .bx--chart-holder .bx--overflow-menu--sm {
4813
- width: 2rem;
4814
- height: 2rem;
4815
- }
4816
- .bx--chart-holder .bx--overflow-menu--xl,
4817
- .bx--chart-holder .bx--overflow-menu--lg {
4818
- width: 3rem;
4819
- height: 3rem;
4820
- }
4821
- .bx--chart-holder .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4822
- outline: 2px solid #0f62fe;
4823
- outline-offset: -2px;
4824
- }
4825
- @media screen and (prefers-contrast) {
4826
- .bx--chart-holder .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4827
- outline-style: dotted;
4828
- }
4829
- }
4830
- .bx--chart-holder .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg {
4831
- outline: none;
4832
- }
4833
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--open,
4834
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger {
4835
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4836
- background-color: #f4f4f4;
4837
- transition: none;
4838
- }
4839
- .bx--chart-holder .bx--overflow-menu--light.bx--overflow-menu--open,
4840
- .bx--chart-holder .bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger {
4841
- background-color: #ffffff;
4842
- }
4843
- .bx--chart-holder .bx--overflow-menu__icon {
4844
- width: 1rem;
4845
- height: 1rem;
4846
- fill: #161616;
4847
- }
4848
- .bx--chart-holder .bx--overflow-menu-options {
4849
- box-sizing: border-box;
4850
- padding: 0;
4851
- border: 0;
4852
- margin: 0;
4853
- font-family: inherit;
4854
- font-size: 100%;
4855
- vertical-align: baseline;
4856
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4857
- position: absolute;
4858
- z-index: 6000;
4859
- top: 32px;
4860
- left: 0;
4861
- display: none;
4862
- width: 10rem;
4863
- flex-direction: column;
4864
- align-items: flex-start;
4865
- background-color: #f4f4f4;
4866
- list-style: none;
4867
- }
4868
- .bx--chart-holder .bx--overflow-menu-options *,
4869
- .bx--chart-holder .bx--overflow-menu-options *::before,
4870
- .bx--chart-holder .bx--overflow-menu-options *::after {
4871
- box-sizing: inherit;
4872
- }
4873
- .bx--chart-holder .bx--overflow-menu-options::after {
4874
- position: absolute;
4875
- display: block;
4876
- background-color: #f4f4f4;
4877
- content: "";
4878
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4879
- }
4880
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--open:hover {
4881
- background-color: #f4f4f4;
4882
- }
4883
- .bx--chart-holder .bx--overflow-menu-options--light {
4884
- background-color: #ffffff;
4885
- }
4886
- .bx--chart-holder .bx--overflow-menu-options--light::after {
4887
- background-color: #ffffff;
4888
- }
4889
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover {
4890
- background-color: #ffffff;
4891
- }
4892
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4893
- top: -0.1875rem;
4894
- left: 0;
4895
- width: 2.5rem;
4896
- height: 0.1875rem;
4897
- }
4898
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4899
- bottom: -0.5rem;
4900
- left: 0;
4901
- width: 2.5rem;
4902
- height: 0.5rem;
4903
- }
4904
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=left]::after {
4905
- top: 0;
4906
- right: -0.375rem;
4907
- width: 0.375rem;
4908
- height: 2.5rem;
4909
- }
4910
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4911
- top: 0;
4912
- left: -0.375rem;
4913
- width: 0.375rem;
4914
- height: 2.5rem;
4915
- }
4916
- .bx--chart-holder .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after, .bx--chart-holder .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4917
- width: 2rem;
4918
- }
4919
- .bx--chart-holder .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=left]::after, .bx--chart-holder .bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4920
- height: 2rem;
4921
- }
4922
- .bx--chart-holder .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after, .bx--chart-holder .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=top]::after,
4923
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after,
4924
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4925
- width: 3rem;
4926
- }
4927
- .bx--chart-holder .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=left]::after, .bx--chart-holder .bx--overflow-menu-options--xl.bx--overflow-menu-options[data-floating-menu-direction=right]::after,
4928
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4929
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4930
- height: 3rem;
4931
- }
4932
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=top]::after,
4933
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4934
- right: 0;
4935
- left: auto;
4936
- }
4937
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4938
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4939
- top: auto;
4940
- bottom: 0;
4941
- }
4942
- .bx--chart-holder .bx--overflow-menu-options--open {
4943
- display: flex;
4944
- }
4945
- .bx--chart-holder .bx--overflow-menu-options__content {
4946
- width: 100%;
4947
- }
4948
- .bx--chart-holder .bx--overflow-menu-options__option {
4949
- box-sizing: border-box;
4950
- padding: 0;
4951
- border: 0;
4952
- margin: 0;
4953
- font-family: inherit;
4954
- font-size: 100%;
4955
- vertical-align: baseline;
4956
- display: flex;
4957
- width: 100%;
4958
- height: 2.5rem;
4959
- align-items: center;
4960
- padding: 0;
4961
- background-color: transparent;
4962
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4963
- }
4964
- .bx--chart-holder .bx--overflow-menu-options__option *,
4965
- .bx--chart-holder .bx--overflow-menu-options__option *::before,
4966
- .bx--chart-holder .bx--overflow-menu-options__option *::after {
4967
- box-sizing: inherit;
4968
- }
4969
- .bx--chart-holder .bx--overflow-menu-options--sm .bx--overflow-menu-options__option {
4970
- height: 2rem;
4971
- }
4972
- .bx--chart-holder .bx--overflow-menu-options--xl .bx--overflow-menu-options__option,
4973
- .bx--chart-holder .bx--overflow-menu-options--lg .bx--overflow-menu-options__option {
4974
- height: 3rem;
4975
- }
4976
- .bx--chart-holder .bx--overflow-menu--divider {
4977
- border-top: 1px solid #e0e0e0;
4978
- }
4979
- .bx--chart-holder .bx--overflow-menu--light .bx--overflow-menu--divider {
4980
- border-top: 1px solid #e0e0e0;
4981
- }
4982
- .bx--chart-holder a.bx--overflow-menu-options__btn::before {
4983
- display: inline-block;
4984
- height: 100%;
4985
- content: "";
4986
- vertical-align: middle;
4987
- }
4988
- .bx--chart-holder .bx--overflow-menu-options__btn {
4989
- box-sizing: border-box;
4990
- padding: 0;
4991
- border: 0;
4992
- margin: 0;
4993
- font-family: inherit;
4994
- font-size: 100%;
4995
- vertical-align: baseline;
4996
- font-size: 0.875rem;
4997
- font-weight: 400;
4998
- line-height: 1.29;
4999
- letter-spacing: 0.16px;
5000
- outline: 2px solid transparent;
5001
- outline-offset: -2px;
5002
- display: inline-flex;
5003
- width: 100%;
5004
- max-width: 11.25rem;
5005
- height: 100%;
5006
- align-items: center;
5007
- padding: 0 1rem;
5008
- border: none;
5009
- background-color: transparent;
5010
- color: #525252;
5011
- cursor: pointer;
5012
- font-weight: 400;
5013
- text-align: left;
5014
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
5015
- }
5016
- .bx--chart-holder .bx--overflow-menu-options__btn *,
5017
- .bx--chart-holder .bx--overflow-menu-options__btn *::before,
5018
- .bx--chart-holder .bx--overflow-menu-options__btn *::after {
5019
- box-sizing: inherit;
5020
- }
5021
- .bx--chart-holder .bx--overflow-menu-options__btn:hover {
5022
- color: #161616;
5023
- }
5024
- .bx--chart-holder .bx--overflow-menu-options__btn:focus {
5025
- outline: 2px solid #0f62fe;
5026
- outline-offset: -2px;
5027
- }
5028
- @media screen and (prefers-contrast) {
5029
- .bx--chart-holder .bx--overflow-menu-options__btn:focus {
5030
- outline-style: dotted;
5031
- }
5032
- }
5033
- .bx--chart-holder .bx--overflow-menu-options__btn::-moz-focus-inner {
5034
- border: none;
5035
- }
5036
- .bx--chart-holder .bx--overflow-menu-options__btn svg {
5037
- fill: #525252;
5038
- }
5039
- .bx--chart-holder .bx--overflow-menu-options__btn:hover svg {
5040
- fill: #161616;
5041
- }
5042
- .bx--chart-holder .bx--overflow-menu-options__option-content {
5043
- overflow: hidden;
5044
- text-overflow: ellipsis;
5045
- white-space: nowrap;
5046
- }
5047
- .bx--chart-holder .bx--overflow-menu-options__option:hover {
5048
- background-color: #e5e5e5;
5049
- }
5050
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover,
5051
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
5052
- background-color: #da1e28;
5053
- color: #ffffff;
5054
- }
5055
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover svg,
5056
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus svg {
5057
- fill: currentColor;
5058
- }
5059
- .bx--chart-holder .bx--overflow-menu-options__option--disabled:hover {
5060
- background-color: #f4f4f4;
5061
- cursor: not-allowed;
5062
- }
5063
- .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn {
5064
- color: #c6c6c6;
5065
- pointer-events: none;
5066
- }
5067
- .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:hover, .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:active, .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:focus {
5068
- outline: 2px solid transparent;
5069
- outline-offset: -2px;
5070
- background-color: #f4f4f4;
5071
- }
5072
- .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg {
5073
- fill: #c6c6c6;
5074
- }
5075
- .bx--chart-holder .bx--overflow-menu--flip {
5076
- left: -140px;
5077
- }
5078
- .bx--chart-holder .bx--overflow-menu--flip::before {
5079
- left: 145px;
5080
- }
5081
- .bx--chart-holder .bx--overflow-menu__container {
5082
- display: inline-block;
5083
- }
5084
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
5085
- .bx--chart-holder .bx--overflow-menu:focus,
5086
- .bx--chart-holder .bx--overflow-menu-options__btn:focus {
5087
- color: Highlight;
5088
- outline: 1px solid Highlight;
5089
- }
5090
- }
5091
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
5092
- .bx--chart-holder .bx--overflow-menu svg {
5093
- fill: ButtonText;
5094
- }
5095
- }
5096
1616
  .bx--chart-holder .bx--overflow-menu,
5097
1617
  .bx--chart-holder .bx--overflow-menu__trigger {
5098
1618
  width: 2rem;