@carbon/charts 0.49.5 → 0.50.1

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 +44 -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-g100.css CHANGED
@@ -1542,3558 +1542,78 @@ div.bx--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox
1542
1542
  border-color: #c6c6c6;
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;
1559
+ color-scheme: dark;
1656
1560
  }
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: #161616;
1671
- color: #f4f4f4;
1672
- line-height: 1;
1561
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table {
1562
+ position: relative;
1563
+ border-collapse: collapse;
1673
1564
  }
1674
- .bx--body *,
1675
- .bx--body *::before,
1676
- .bx--body *::after {
1677
- box-sizing: inherit;
1565
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table th {
1566
+ position: sticky;
1567
+ top: 0;
1678
1568
  }
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
- }
1569
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer {
1570
+ background-color: transparent;
1720
1571
  }
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;
1572
+ .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer .bx--cc-modal-footer-spacer {
1573
+ width: 50%;
1733
1574
  }
1734
1575
 
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: #161616;
1576
+ .bx--cc--title p.title {
1748
1577
  color: #f4f4f4;
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;
1578
+ font-size: 16px;
1579
+ font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
1580
+ font-weight: 600;
1762
1581
  white-space: nowrap;
1763
- }
1764
-
1765
- .bx--text-truncate--front {
1766
- display: inline-block;
1767
1582
  overflow: hidden;
1768
- width: 100%;
1769
- direction: rtl;
1770
1583
  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: #525252;
1810
- background: #525252;
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;
1584
+ padding-right: 15px;
1821
1585
  }
1822
1586
 
1823
- .bx--btn::-moz-focus-inner {
1824
- padding: 0;
1825
- border: 0;
1587
+ .layout-child.title {
1588
+ height: unset !important;
1589
+ overflow: hidden;
1826
1590
  }
1827
1591
 
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: #ffffff;
1840
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
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;
1592
+ .bx--cc--meter-title {
1593
+ overflow: visible;
1851
1594
  }
1852
-
1853
- .bx--btn--secondary {
1854
- border-width: 1px;
1855
- border-style: solid;
1856
- border-color: transparent;
1857
- background-color: #6f6f6f;
1858
- color: #ffffff;
1595
+ .bx--cc--meter-title text.meter-title,
1596
+ .bx--cc--meter-title text.proportional-meter-title,
1597
+ .bx--cc--meter-title text.proportional-meter-total,
1598
+ .bx--cc--meter-title text.percent-value {
1599
+ fill: #f4f4f4;
1859
1600
  }
1860
- .bx--btn--secondary:hover {
1861
- background-color: #606060;
1601
+ .bx--cc--meter-title g.status-indicator.status--danger circle.status {
1602
+ fill: #fa4d56;
1862
1603
  }
1863
- .bx--btn--secondary:focus {
1864
- border-color: #ffffff;
1865
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
1604
+ .bx--cc--meter-title g.status-indicator.status--warning circle.status {
1605
+ fill: #f1c21b;
1866
1606
  }
1867
- .bx--btn--secondary:active {
1868
- background-color: #393939;
1607
+ .bx--cc--meter-title g.status-indicator.status--warning path.innerFill {
1608
+ fill: #000000;
1869
1609
  }
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;
1610
+ .bx--cc--meter-title g.status-indicator.status--success circle.status {
1611
+ fill: #42be65;
1873
1612
  }
1874
- .bx--btn--secondary:hover, .bx--btn--secondary:focus {
1875
- color: #ffffff;
1613
+ .bx--cc--meter-title g.status-indicator path.innerFill {
1614
+ fill: #000000;
1876
1615
  }
1877
1616
 
1878
- .bx--btn--tertiary {
1879
- border-width: 1px;
1880
- border-style: solid;
1881
- border-color: #ffffff;
1882
- background-color: transparent;
1883
- color: #ffffff;
1884
- }
1885
- .bx--btn--tertiary:hover {
1886
- background-color: #f4f4f4;
1887
- }
1888
- .bx--btn--tertiary:focus {
1889
- border-color: #ffffff;
1890
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
1891
- }
1892
- .bx--btn--tertiary:active {
1893
- background-color: #c6c6c6;
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: #161616;
1901
- }
1902
- .bx--btn--tertiary:focus {
1903
- background-color: #ffffff;
1904
- color: #161616;
1905
- }
1906
- .bx--btn--tertiary:active {
1907
- border-color: transparent;
1908
- background-color: #c6c6c6;
1909
- color: #161616;
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: #78a9ff;
1923
- padding: calc(0.875rem - 3px) 16px;
1924
- }
1925
- .bx--btn--ghost:hover {
1926
- background-color: #353535;
1927
- }
1928
- .bx--btn--ghost:focus {
1929
- border-color: #ffffff;
1930
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
1931
- }
1932
- .bx--btn--ghost:active {
1933
- background-color: #525252;
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: #a6c8ff;
1945
- }
1946
- .bx--btn--ghost:active {
1947
- background-color: #525252;
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 #ffffff;
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 #ffffff;
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: #f4f4f4;
2036
- border-radius: 0.125rem;
2037
- color: #161616;
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: #ffffff;
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 #ffffff;
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 #ffffff;
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: #f4f4f4;
2221
- border-radius: 0.125rem;
2222
- color: #161616;
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: #f4f4f4 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: #f4f4f4 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: #f4f4f4 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: #f4f4f4 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 #ffffff;
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 #ffffff;
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: #f4f4f4;
2487
- border-radius: 0.125rem;
2488
- color: #161616;
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 #f4f4f4 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 #f4f4f4 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 #f4f4f4 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 #f4f4f4 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 #ffffff;
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 #ffffff;
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: #f4f4f4;
2748
- border-radius: 0.125rem;
2749
- color: #161616;
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 #f4f4f4 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 #f4f4f4 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 #f4f4f4 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 #f4f4f4 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 #ffffff;
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 #ffffff;
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: #f4f4f4;
3012
- border-radius: 0.125rem;
3013
- color: #161616;
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 #f4f4f4;
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 #f4f4f4;
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 #f4f4f4;
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 #f4f4f4;
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: #393939;
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: #f4f4f4;
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: #ffffff;
3256
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
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: #fa4d56;
3272
- background-color: transparent;
3273
- color: #fa4d56;
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: #ffffff;
3280
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
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: #fa4d56;
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: #ffffff;
3320
- box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px #161616;
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: #525252;
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: #353535;
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: #525252;
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 #161616;
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 #161616;
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.7);
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: #393939;
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: #262626;
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: #c6c6c6;
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: #f4f4f4;
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: #f4f4f4;
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 #ffffff;
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(38, 38, 38, 0), #262626);
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(38, 38, 38, 0), #262626);
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: #353535;
3802
- }
3803
- .bx--modal-close:focus {
3804
- border-color: #ffffff;
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: #f4f4f4;
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.7);
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: #393939;
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: #262626;
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: #c6c6c6;
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: #f4f4f4;
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: #f4f4f4;
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 #ffffff;
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(38, 38, 38, 0), #262626);
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(38, 38, 38, 0), #262626);
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: #353535;
4148
- }
4149
- .bx--chart-holder .bx--modal-close:focus {
4150
- border-color: #ffffff;
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: #f4f4f4;
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
- color-scheme: dark;
4194
- }
4195
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table {
4196
- position: relative;
4197
- border-collapse: collapse;
4198
- }
4199
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-content table th {
4200
- position: sticky;
4201
- top: 0;
4202
- }
4203
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer {
4204
- background-color: transparent;
4205
- }
4206
- .bx--chart-holder .bx--modal .bx--modal-container .bx--modal-footer .bx--cc-modal-footer-spacer {
4207
- width: 50%;
4208
- }
4209
-
4210
- .bx--cc--title p.title {
4211
- color: #f4f4f4;
4212
- font-size: 16px;
4213
- font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
4214
- font-weight: 600;
4215
- white-space: nowrap;
4216
- overflow: hidden;
4217
- text-overflow: ellipsis;
4218
- padding-right: 15px;
4219
- }
4220
-
4221
- .layout-child.title {
4222
- height: unset !important;
4223
- overflow: hidden;
4224
- }
4225
-
4226
- .bx--cc--meter-title {
4227
- overflow: visible;
4228
- }
4229
- .bx--cc--meter-title text.meter-title,
4230
- .bx--cc--meter-title text.proportional-meter-title,
4231
- .bx--cc--meter-title text.proportional-meter-total,
4232
- .bx--cc--meter-title text.percent-value {
4233
- fill: #f4f4f4;
4234
- }
4235
- .bx--cc--meter-title g.status-indicator.status--danger circle.status {
4236
- fill: #fa4d56;
4237
- }
4238
- .bx--cc--meter-title g.status-indicator.status--warning circle.status {
4239
- fill: #f1c21b;
4240
- }
4241
- .bx--cc--meter-title g.status-indicator.status--warning path.innerFill {
4242
- fill: #000000;
4243
- }
4244
- .bx--cc--meter-title g.status-indicator.status--success circle.status {
4245
- fill: #42be65;
4246
- }
4247
- .bx--cc--meter-title g.status-indicator path.innerFill {
4248
- fill: #000000;
4249
- }
4250
-
4251
- @keyframes skeleton {
4252
- 0% {
4253
- opacity: 0.3;
4254
- transform: scaleX(0);
4255
- transform-origin: left;
4256
- }
4257
- 20% {
4258
- opacity: 1;
4259
- transform: scaleX(1);
4260
- transform-origin: left;
4261
- }
4262
- 28% {
4263
- transform: scaleX(1);
4264
- transform-origin: right;
4265
- }
4266
- 51% {
4267
- transform: scaleX(0);
4268
- transform-origin: right;
4269
- }
4270
- 58% {
4271
- transform: scaleX(0);
4272
- transform-origin: right;
4273
- }
4274
- 82% {
4275
- transform: scaleX(1);
4276
- transform-origin: right;
4277
- }
4278
- 83% {
4279
- transform: scaleX(1);
4280
- transform-origin: left;
4281
- }
4282
- 96% {
4283
- transform: scaleX(0);
4284
- transform-origin: left;
4285
- }
4286
- 100% {
4287
- opacity: 0.3;
4288
- transform: scaleX(0);
4289
- transform-origin: left;
4290
- }
4291
- }
4292
- .bx--assistive-text,
4293
- .bx--visually-hidden {
4294
- position: absolute;
4295
- overflow: hidden;
4296
- width: 1px;
4297
- height: 1px;
4298
- padding: 0;
4299
- border: 0;
4300
- margin: -1px;
4301
- clip: rect(0, 0, 0, 0);
4302
- visibility: inherit;
4303
- white-space: nowrap;
4304
- }
4305
-
4306
- .bx--body {
4307
- box-sizing: border-box;
4308
- padding: 0;
4309
- border: 0;
4310
- margin: 0;
4311
- font-family: inherit;
4312
- font-size: 100%;
4313
- vertical-align: baseline;
4314
- font-size: 0.875rem;
4315
- font-weight: 400;
4316
- line-height: 1.29;
4317
- letter-spacing: 0.16px;
4318
- background-color: #161616;
4319
- color: #f4f4f4;
4320
- line-height: 1;
4321
- }
4322
- .bx--body *,
4323
- .bx--body *::before,
4324
- .bx--body *::after {
4325
- box-sizing: inherit;
4326
- }
4327
-
4328
- .bx--text-truncate--end {
4329
- display: inline-block;
4330
- overflow: hidden;
4331
- width: 100%;
4332
- text-overflow: ellipsis;
4333
- white-space: nowrap;
4334
- }
4335
-
4336
- .bx--text-truncate--front {
4337
- display: inline-block;
4338
- overflow: hidden;
4339
- width: 100%;
4340
- direction: rtl;
4341
- text-overflow: ellipsis;
4342
- white-space: nowrap;
4343
- }
4344
-
4345
- .bx--overflow-menu,
4346
- .bx--overflow-menu__trigger {
4347
- box-sizing: border-box;
4348
- padding: 0;
4349
- border: 0;
4350
- margin: 0;
4351
- font-family: inherit;
4352
- font-size: 100%;
4353
- vertical-align: baseline;
4354
- display: inline-block;
4355
- padding: 0;
4356
- border: 0;
4357
- appearance: none;
4358
- background: none;
4359
- cursor: pointer;
4360
- width: 100%;
4361
- box-sizing: border-box;
4362
- padding: 0;
4363
- border: 0;
4364
- margin: 0;
4365
- font-family: inherit;
4366
- font-size: 100%;
4367
- vertical-align: baseline;
4368
- outline: 2px solid transparent;
4369
- outline-offset: -2px;
4370
- position: relative;
4371
- display: flex;
4372
- width: 2.5rem;
4373
- height: 2.5rem;
4374
- align-items: center;
4375
- justify-content: center;
4376
- cursor: pointer;
4377
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4378
- }
4379
- .bx--overflow-menu *,
4380
- .bx--overflow-menu *::before,
4381
- .bx--overflow-menu *::after,
4382
- .bx--overflow-menu__trigger *,
4383
- .bx--overflow-menu__trigger *::before,
4384
- .bx--overflow-menu__trigger *::after {
4385
- box-sizing: inherit;
4386
- }
4387
- .bx--overflow-menu::-moz-focus-inner,
4388
- .bx--overflow-menu__trigger::-moz-focus-inner {
4389
- border: 0;
4390
- }
4391
- .bx--overflow-menu *,
4392
- .bx--overflow-menu *::before,
4393
- .bx--overflow-menu *::after,
4394
- .bx--overflow-menu__trigger *,
4395
- .bx--overflow-menu__trigger *::before,
4396
- .bx--overflow-menu__trigger *::after {
4397
- box-sizing: inherit;
4398
- }
4399
- .bx--overflow-menu:focus,
4400
- .bx--overflow-menu__trigger:focus {
4401
- outline: 2px solid #ffffff;
4402
- outline-offset: -2px;
4403
- }
4404
- @media screen and (prefers-contrast) {
4405
- .bx--overflow-menu:focus,
4406
- .bx--overflow-menu__trigger:focus {
4407
- outline-style: dotted;
4408
- }
4409
- }
4410
- .bx--overflow-menu:hover,
4411
- .bx--overflow-menu__trigger:hover {
4412
- background-color: #353535;
4413
- }
4414
-
4415
- .bx--overflow-menu--sm {
4416
- width: 2rem;
4417
- height: 2rem;
4418
- }
4419
-
4420
- .bx--overflow-menu--xl,
4421
- .bx--overflow-menu--lg {
4422
- width: 3rem;
4423
- height: 3rem;
4424
- }
4425
-
4426
- .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4427
- outline: 2px solid #ffffff;
4428
- outline-offset: -2px;
4429
- }
4430
- @media screen and (prefers-contrast) {
4431
- .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4432
- outline-style: dotted;
4433
- }
4434
- }
4435
- .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg {
4436
- outline: none;
4437
- }
4438
-
4439
- .bx--overflow-menu.bx--overflow-menu--open,
4440
- .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger {
4441
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4442
- background-color: #262626;
4443
- transition: none;
4444
- }
4445
-
4446
- .bx--overflow-menu--light.bx--overflow-menu--open,
4447
- .bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger {
4448
- background-color: #393939;
4449
- }
4450
-
4451
- .bx--overflow-menu__icon {
4452
- width: 1rem;
4453
- height: 1rem;
4454
- fill: #f4f4f4;
4455
- }
4456
-
4457
- .bx--overflow-menu-options {
4458
- box-sizing: border-box;
4459
- padding: 0;
4460
- border: 0;
4461
- margin: 0;
4462
- font-family: inherit;
4463
- font-size: 100%;
4464
- vertical-align: baseline;
4465
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4466
- position: absolute;
4467
- z-index: 6000;
4468
- top: 32px;
4469
- left: 0;
4470
- display: none;
4471
- width: 10rem;
4472
- flex-direction: column;
4473
- align-items: flex-start;
4474
- background-color: #262626;
4475
- list-style: none;
4476
- }
4477
- .bx--overflow-menu-options *,
4478
- .bx--overflow-menu-options *::before,
4479
- .bx--overflow-menu-options *::after {
4480
- box-sizing: inherit;
4481
- }
4482
- .bx--overflow-menu-options::after {
4483
- position: absolute;
4484
- display: block;
4485
- background-color: #262626;
4486
- content: "";
4487
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4488
- }
4489
-
4490
- .bx--overflow-menu.bx--overflow-menu--open:hover {
4491
- background-color: #262626;
4492
- }
4493
-
4494
- .bx--overflow-menu-options--light {
4495
- background-color: #393939;
4496
- }
4497
- .bx--overflow-menu-options--light::after {
4498
- background-color: #393939;
4499
- }
4500
-
4501
- .bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover {
4502
- background-color: #393939;
4503
- }
4504
-
4505
- .bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4506
- top: -0.1875rem;
4507
- left: 0;
4508
- width: 2.5rem;
4509
- height: 0.1875rem;
4510
- }
4511
-
4512
- .bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4513
- bottom: -0.5rem;
4514
- left: 0;
4515
- width: 2.5rem;
4516
- height: 0.5rem;
4517
- }
4518
-
4519
- .bx--overflow-menu-options[data-floating-menu-direction=left]::after {
4520
- top: 0;
4521
- right: -0.375rem;
4522
- width: 0.375rem;
4523
- height: 2.5rem;
4524
- }
4525
-
4526
- .bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4527
- top: 0;
4528
- left: -0.375rem;
4529
- width: 0.375rem;
4530
- height: 2.5rem;
4531
- }
4532
-
4533
- .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 {
4534
- width: 2rem;
4535
- }
4536
- .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 {
4537
- height: 2rem;
4538
- }
4539
-
4540
- .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,
4541
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after,
4542
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4543
- width: 3rem;
4544
- }
4545
- .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,
4546
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4547
- .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4548
- height: 3rem;
4549
- }
4550
-
4551
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=top]::after,
4552
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4553
- right: 0;
4554
- left: auto;
4555
- }
4556
-
4557
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4558
- .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4559
- top: auto;
4560
- bottom: 0;
4561
- }
4562
-
4563
- .bx--overflow-menu-options--open {
4564
- display: flex;
4565
- }
4566
-
4567
- .bx--overflow-menu-options__content {
4568
- width: 100%;
4569
- }
4570
-
4571
- .bx--overflow-menu-options__option {
4572
- box-sizing: border-box;
4573
- padding: 0;
4574
- border: 0;
4575
- margin: 0;
4576
- font-family: inherit;
4577
- font-size: 100%;
4578
- vertical-align: baseline;
4579
- display: flex;
4580
- width: 100%;
4581
- height: 2.5rem;
4582
- align-items: center;
4583
- padding: 0;
4584
- background-color: transparent;
4585
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4586
- }
4587
- .bx--overflow-menu-options__option *,
4588
- .bx--overflow-menu-options__option *::before,
4589
- .bx--overflow-menu-options__option *::after {
4590
- box-sizing: inherit;
4591
- }
4592
-
4593
- .bx--overflow-menu-options--sm .bx--overflow-menu-options__option {
4594
- height: 2rem;
4595
- }
4596
-
4597
- .bx--overflow-menu-options--xl .bx--overflow-menu-options__option,
4598
- .bx--overflow-menu-options--lg .bx--overflow-menu-options__option {
4599
- height: 3rem;
4600
- }
4601
-
4602
- .bx--overflow-menu--divider {
4603
- border-top: 1px solid #393939;
4604
- }
4605
-
4606
- .bx--overflow-menu--light .bx--overflow-menu--divider {
4607
- border-top: 1px solid #525252;
4608
- }
4609
-
4610
- a.bx--overflow-menu-options__btn::before {
4611
- display: inline-block;
4612
- height: 100%;
4613
- content: "";
4614
- vertical-align: middle;
4615
- }
4616
-
4617
- .bx--overflow-menu-options__btn {
4618
- box-sizing: border-box;
4619
- padding: 0;
4620
- border: 0;
4621
- margin: 0;
4622
- font-family: inherit;
4623
- font-size: 100%;
4624
- vertical-align: baseline;
4625
- font-size: 0.875rem;
4626
- font-weight: 400;
4627
- line-height: 1.29;
4628
- letter-spacing: 0.16px;
4629
- outline: 2px solid transparent;
4630
- outline-offset: -2px;
4631
- display: inline-flex;
4632
- width: 100%;
4633
- max-width: 11.25rem;
4634
- height: 100%;
4635
- align-items: center;
4636
- padding: 0 1rem;
4637
- border: none;
4638
- background-color: transparent;
4639
- color: #c6c6c6;
4640
- cursor: pointer;
4641
- font-weight: 400;
4642
- text-align: left;
4643
- 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);
4644
- }
4645
- .bx--overflow-menu-options__btn *,
4646
- .bx--overflow-menu-options__btn *::before,
4647
- .bx--overflow-menu-options__btn *::after {
4648
- box-sizing: inherit;
4649
- }
4650
- .bx--overflow-menu-options__btn:hover {
4651
- color: #f4f4f4;
4652
- }
4653
- .bx--overflow-menu-options__btn:focus {
4654
- outline: 2px solid #ffffff;
4655
- outline-offset: -2px;
4656
- }
4657
- @media screen and (prefers-contrast) {
4658
- .bx--overflow-menu-options__btn:focus {
4659
- outline-style: dotted;
4660
- }
4661
- }
4662
- .bx--overflow-menu-options__btn::-moz-focus-inner {
4663
- border: none;
4664
- }
4665
-
4666
- .bx--overflow-menu-options__btn svg {
4667
- fill: #c6c6c6;
4668
- }
4669
-
4670
- .bx--overflow-menu-options__btn:hover svg {
4671
- fill: #f4f4f4;
4672
- }
4673
-
4674
- .bx--overflow-menu-options__option-content {
4675
- overflow: hidden;
4676
- text-overflow: ellipsis;
4677
- white-space: nowrap;
4678
- }
4679
-
4680
- .bx--overflow-menu-options__option:hover {
4681
- background-color: #353535;
4682
- }
4683
-
4684
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover,
4685
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
4686
- background-color: #da1e28;
4687
- color: #ffffff;
4688
- }
4689
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover svg,
4690
- .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus svg {
4691
- fill: currentColor;
4692
- }
4693
-
4694
- .bx--overflow-menu-options__option--disabled:hover {
4695
- background-color: #262626;
4696
- cursor: not-allowed;
4697
- }
4698
-
4699
- .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn {
4700
- color: #525252;
4701
- pointer-events: none;
4702
- }
4703
- .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 {
4704
- outline: 2px solid transparent;
4705
- outline-offset: -2px;
4706
- background-color: #262626;
4707
- }
4708
-
4709
- .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg {
4710
- fill: #525252;
4711
- }
4712
-
4713
- .bx--overflow-menu--flip {
4714
- left: -140px;
4715
- }
4716
- .bx--overflow-menu--flip::before {
4717
- left: 145px;
4718
- }
4719
-
4720
- .bx--overflow-menu__container {
4721
- display: inline-block;
4722
- }
4723
-
4724
- /* stylelint-disable */
4725
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4726
- .bx--overflow-menu:focus,
4727
- .bx--overflow-menu-options__btn:focus {
4728
- color: Highlight;
4729
- outline: 1px solid Highlight;
4730
- }
4731
- }
4732
-
4733
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
4734
- .bx--overflow-menu svg {
4735
- fill: ButtonText;
4736
- }
4737
- }
4738
-
4739
- /*stylelint-enable */
4740
- .bx--chart-holder {
4741
- /* stylelint-disable */
4742
- /*stylelint-enable */
4743
- }
4744
- .bx--chart-holder .bx--overflow-menu,
4745
- .bx--chart-holder .bx--overflow-menu__trigger {
4746
- box-sizing: border-box;
4747
- padding: 0;
4748
- border: 0;
4749
- margin: 0;
4750
- font-family: inherit;
4751
- font-size: 100%;
4752
- vertical-align: baseline;
4753
- display: inline-block;
4754
- padding: 0;
4755
- border: 0;
4756
- appearance: none;
4757
- background: none;
4758
- cursor: pointer;
4759
- width: 100%;
4760
- box-sizing: border-box;
4761
- padding: 0;
4762
- border: 0;
4763
- margin: 0;
4764
- font-family: inherit;
4765
- font-size: 100%;
4766
- vertical-align: baseline;
4767
- outline: 2px solid transparent;
4768
- outline-offset: -2px;
4769
- position: relative;
4770
- display: flex;
4771
- width: 2.5rem;
4772
- height: 2.5rem;
4773
- align-items: center;
4774
- justify-content: center;
4775
- cursor: pointer;
4776
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4777
- }
4778
- .bx--chart-holder .bx--overflow-menu *,
4779
- .bx--chart-holder .bx--overflow-menu *::before,
4780
- .bx--chart-holder .bx--overflow-menu *::after,
4781
- .bx--chart-holder .bx--overflow-menu__trigger *,
4782
- .bx--chart-holder .bx--overflow-menu__trigger *::before,
4783
- .bx--chart-holder .bx--overflow-menu__trigger *::after {
4784
- box-sizing: inherit;
4785
- }
4786
- .bx--chart-holder .bx--overflow-menu::-moz-focus-inner,
4787
- .bx--chart-holder .bx--overflow-menu__trigger::-moz-focus-inner {
4788
- border: 0;
4789
- }
4790
- .bx--chart-holder .bx--overflow-menu *,
4791
- .bx--chart-holder .bx--overflow-menu *::before,
4792
- .bx--chart-holder .bx--overflow-menu *::after,
4793
- .bx--chart-holder .bx--overflow-menu__trigger *,
4794
- .bx--chart-holder .bx--overflow-menu__trigger *::before,
4795
- .bx--chart-holder .bx--overflow-menu__trigger *::after {
4796
- box-sizing: inherit;
4797
- }
4798
- .bx--chart-holder .bx--overflow-menu:focus,
4799
- .bx--chart-holder .bx--overflow-menu__trigger:focus {
4800
- outline: 2px solid #ffffff;
4801
- outline-offset: -2px;
4802
- }
4803
- @media screen and (prefers-contrast) {
4804
- .bx--chart-holder .bx--overflow-menu:focus,
4805
- .bx--chart-holder .bx--overflow-menu__trigger:focus {
4806
- outline-style: dotted;
4807
- }
4808
- }
4809
- .bx--chart-holder .bx--overflow-menu:hover,
4810
- .bx--chart-holder .bx--overflow-menu__trigger:hover {
4811
- background-color: #353535;
4812
- }
4813
- .bx--chart-holder .bx--overflow-menu--sm {
4814
- width: 2rem;
4815
- height: 2rem;
4816
- }
4817
- .bx--chart-holder .bx--overflow-menu--xl,
4818
- .bx--chart-holder .bx--overflow-menu--lg {
4819
- width: 3rem;
4820
- height: 3rem;
4821
- }
4822
- .bx--chart-holder .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4823
- outline: 2px solid #ffffff;
4824
- outline-offset: -2px;
4825
- }
4826
- @media screen and (prefers-contrast) {
4827
- .bx--chart-holder .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
4828
- outline-style: dotted;
4829
- }
4830
- }
4831
- .bx--chart-holder .bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus svg {
4832
- outline: none;
4833
- }
4834
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--open,
4835
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger {
4836
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4837
- background-color: #262626;
4838
- transition: none;
4839
- }
4840
- .bx--chart-holder .bx--overflow-menu--light.bx--overflow-menu--open,
4841
- .bx--chart-holder .bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger {
4842
- background-color: #393939;
4843
- }
4844
- .bx--chart-holder .bx--overflow-menu__icon {
4845
- width: 1rem;
4846
- height: 1rem;
4847
- fill: #f4f4f4;
4848
- }
4849
- .bx--chart-holder .bx--overflow-menu-options {
4850
- box-sizing: border-box;
4851
- padding: 0;
4852
- border: 0;
4853
- margin: 0;
4854
- font-family: inherit;
4855
- font-size: 100%;
4856
- vertical-align: baseline;
4857
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
4858
- position: absolute;
4859
- z-index: 6000;
4860
- top: 32px;
4861
- left: 0;
4862
- display: none;
4863
- width: 10rem;
4864
- flex-direction: column;
4865
- align-items: flex-start;
4866
- background-color: #262626;
4867
- list-style: none;
4868
- }
4869
- .bx--chart-holder .bx--overflow-menu-options *,
4870
- .bx--chart-holder .bx--overflow-menu-options *::before,
4871
- .bx--chart-holder .bx--overflow-menu-options *::after {
4872
- box-sizing: inherit;
4873
- }
4874
- .bx--chart-holder .bx--overflow-menu-options::after {
4875
- position: absolute;
4876
- display: block;
4877
- background-color: #262626;
4878
- content: "";
4879
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4880
- }
4881
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--open:hover {
4882
- background-color: #262626;
4883
- }
4884
- .bx--chart-holder .bx--overflow-menu-options--light {
4885
- background-color: #393939;
4886
- }
4887
- .bx--chart-holder .bx--overflow-menu-options--light::after {
4888
- background-color: #393939;
4889
- }
4890
- .bx--chart-holder .bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover {
4891
- background-color: #393939;
4892
- }
4893
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4894
- top: -0.1875rem;
4895
- left: 0;
4896
- width: 2.5rem;
4897
- height: 0.1875rem;
4898
- }
4899
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4900
- bottom: -0.5rem;
4901
- left: 0;
4902
- width: 2.5rem;
4903
- height: 0.5rem;
4904
- }
4905
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=left]::after {
4906
- top: 0;
4907
- right: -0.375rem;
4908
- width: 0.375rem;
4909
- height: 2.5rem;
4910
- }
4911
- .bx--chart-holder .bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4912
- top: 0;
4913
- left: -0.375rem;
4914
- width: 0.375rem;
4915
- height: 2.5rem;
4916
- }
4917
- .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 {
4918
- width: 2rem;
4919
- }
4920
- .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 {
4921
- height: 2rem;
4922
- }
4923
- .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,
4924
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after,
4925
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=top]::after {
4926
- width: 3rem;
4927
- }
4928
- .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,
4929
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4930
- .bx--chart-holder .bx--overflow-menu-options--lg.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4931
- height: 3rem;
4932
- }
4933
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=top]::after,
4934
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4935
- right: 0;
4936
- left: auto;
4937
- }
4938
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=left]::after,
4939
- .bx--chart-holder .bx--overflow-menu--flip.bx--overflow-menu-options[data-floating-menu-direction=right]::after {
4940
- top: auto;
4941
- bottom: 0;
4942
- }
4943
- .bx--chart-holder .bx--overflow-menu-options--open {
4944
- display: flex;
4945
- }
4946
- .bx--chart-holder .bx--overflow-menu-options__content {
4947
- width: 100%;
4948
- }
4949
- .bx--chart-holder .bx--overflow-menu-options__option {
4950
- box-sizing: border-box;
4951
- padding: 0;
4952
- border: 0;
4953
- margin: 0;
4954
- font-family: inherit;
4955
- font-size: 100%;
4956
- vertical-align: baseline;
4957
- display: flex;
4958
- width: 100%;
4959
- height: 2.5rem;
4960
- align-items: center;
4961
- padding: 0;
4962
- background-color: transparent;
4963
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4964
- }
4965
- .bx--chart-holder .bx--overflow-menu-options__option *,
4966
- .bx--chart-holder .bx--overflow-menu-options__option *::before,
4967
- .bx--chart-holder .bx--overflow-menu-options__option *::after {
4968
- box-sizing: inherit;
4969
- }
4970
- .bx--chart-holder .bx--overflow-menu-options--sm .bx--overflow-menu-options__option {
4971
- height: 2rem;
4972
- }
4973
- .bx--chart-holder .bx--overflow-menu-options--xl .bx--overflow-menu-options__option,
4974
- .bx--chart-holder .bx--overflow-menu-options--lg .bx--overflow-menu-options__option {
4975
- height: 3rem;
4976
- }
4977
- .bx--chart-holder .bx--overflow-menu--divider {
4978
- border-top: 1px solid #393939;
4979
- }
4980
- .bx--chart-holder .bx--overflow-menu--light .bx--overflow-menu--divider {
4981
- border-top: 1px solid #525252;
4982
- }
4983
- .bx--chart-holder a.bx--overflow-menu-options__btn::before {
4984
- display: inline-block;
4985
- height: 100%;
4986
- content: "";
4987
- vertical-align: middle;
4988
- }
4989
- .bx--chart-holder .bx--overflow-menu-options__btn {
4990
- box-sizing: border-box;
4991
- padding: 0;
4992
- border: 0;
4993
- margin: 0;
4994
- font-family: inherit;
4995
- font-size: 100%;
4996
- vertical-align: baseline;
4997
- font-size: 0.875rem;
4998
- font-weight: 400;
4999
- line-height: 1.29;
5000
- letter-spacing: 0.16px;
5001
- outline: 2px solid transparent;
5002
- outline-offset: -2px;
5003
- display: inline-flex;
5004
- width: 100%;
5005
- max-width: 11.25rem;
5006
- height: 100%;
5007
- align-items: center;
5008
- padding: 0 1rem;
5009
- border: none;
5010
- background-color: transparent;
5011
- color: #c6c6c6;
5012
- cursor: pointer;
5013
- font-weight: 400;
5014
- text-align: left;
5015
- 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);
5016
- }
5017
- .bx--chart-holder .bx--overflow-menu-options__btn *,
5018
- .bx--chart-holder .bx--overflow-menu-options__btn *::before,
5019
- .bx--chart-holder .bx--overflow-menu-options__btn *::after {
5020
- box-sizing: inherit;
5021
- }
5022
- .bx--chart-holder .bx--overflow-menu-options__btn:hover {
5023
- color: #f4f4f4;
5024
- }
5025
- .bx--chart-holder .bx--overflow-menu-options__btn:focus {
5026
- outline: 2px solid #ffffff;
5027
- outline-offset: -2px;
5028
- }
5029
- @media screen and (prefers-contrast) {
5030
- .bx--chart-holder .bx--overflow-menu-options__btn:focus {
5031
- outline-style: dotted;
5032
- }
5033
- }
5034
- .bx--chart-holder .bx--overflow-menu-options__btn::-moz-focus-inner {
5035
- border: none;
5036
- }
5037
- .bx--chart-holder .bx--overflow-menu-options__btn svg {
5038
- fill: #c6c6c6;
5039
- }
5040
- .bx--chart-holder .bx--overflow-menu-options__btn:hover svg {
5041
- fill: #f4f4f4;
5042
- }
5043
- .bx--chart-holder .bx--overflow-menu-options__option-content {
5044
- overflow: hidden;
5045
- text-overflow: ellipsis;
5046
- white-space: nowrap;
5047
- }
5048
- .bx--chart-holder .bx--overflow-menu-options__option:hover {
5049
- background-color: #353535;
5050
- }
5051
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover,
5052
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
5053
- background-color: #da1e28;
5054
- color: #ffffff;
5055
- }
5056
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover svg,
5057
- .bx--chart-holder .bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus svg {
5058
- fill: currentColor;
5059
- }
5060
- .bx--chart-holder .bx--overflow-menu-options__option--disabled:hover {
5061
- background-color: #262626;
5062
- cursor: not-allowed;
5063
- }
5064
- .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn {
5065
- color: #525252;
5066
- pointer-events: none;
5067
- }
5068
- .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 {
5069
- outline: 2px solid transparent;
5070
- outline-offset: -2px;
5071
- background-color: #262626;
5072
- }
5073
- .bx--chart-holder .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg {
5074
- fill: #525252;
5075
- }
5076
- .bx--chart-holder .bx--overflow-menu--flip {
5077
- left: -140px;
5078
- }
5079
- .bx--chart-holder .bx--overflow-menu--flip::before {
5080
- left: 145px;
5081
- }
5082
- .bx--chart-holder .bx--overflow-menu__container {
5083
- display: inline-block;
5084
- }
5085
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
5086
- .bx--chart-holder .bx--overflow-menu:focus,
5087
- .bx--chart-holder .bx--overflow-menu-options__btn:focus {
5088
- color: Highlight;
5089
- outline: 1px solid Highlight;
5090
- }
5091
- }
5092
- @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
5093
- .bx--chart-holder .bx--overflow-menu svg {
5094
- fill: ButtonText;
5095
- }
5096
- }
5097
1617
  .bx--chart-holder .bx--overflow-menu,
5098
1618
  .bx--chart-holder .bx--overflow-menu__trigger {
5099
1619
  width: 2rem;