@clayui/css 3.106.1 → 3.107.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/css/base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.106.1
3
+ * Clay 3.107.0
4
4
  *
5
5
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
6
6
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -1240,7 +1240,7 @@ fieldset:disabled a.btn:active {
1240
1240
  pointer-events: none;
1241
1241
  }
1242
1242
 
1243
- .sidebar-sm .btn.btn-xs, .btn-xs {
1243
+ .sidebar-sm .btn.btn-xs, .btn-translucent, .btn-xs {
1244
1244
  font-size: 0.75rem;
1245
1245
  line-height: 1.5;
1246
1246
  padding-bottom: 0.125rem;
@@ -1248,26 +1248,26 @@ fieldset:disabled a.btn:active {
1248
1248
  padding-right: 0.5rem;
1249
1249
  padding-top: 0.125rem;
1250
1250
  }
1251
- .sidebar-sm .btn.btn-xs .c-inner, .btn-xs .c-inner {
1251
+ .sidebar-sm .btn.btn-xs .c-inner, .btn-translucent .c-inner, .btn-xs .c-inner {
1252
1252
  margin-bottom: -0.125rem;
1253
1253
  margin-left: -0.5rem;
1254
1254
  margin-right: -0.5rem;
1255
1255
  margin-top: -0.125rem;
1256
1256
  }
1257
- .sidebar-sm .btn.btn-xs .lexicon-icon, .btn-xs .lexicon-icon {
1257
+ .sidebar-sm .btn.btn-xs .lexicon-icon, .btn-translucent .lexicon-icon, .btn-xs .lexicon-icon {
1258
1258
  font-size: inherit;
1259
1259
  }
1260
- .sidebar-sm .btn.btn-xs .inline-item, .btn-xs .inline-item {
1260
+ .sidebar-sm .btn.btn-xs .inline-item, .btn-translucent .inline-item, .btn-xs .inline-item {
1261
1261
  font-size: inherit;
1262
1262
  margin-top: -0.16em;
1263
1263
  }
1264
- .sidebar-sm .btn.btn-xs .inline-item-before, .btn-xs .inline-item-before {
1264
+ .sidebar-sm .btn.btn-xs .inline-item-before, .btn-translucent .inline-item-before, .btn-xs .inline-item-before {
1265
1265
  margin-right: 0.25rem;
1266
1266
  }
1267
- .sidebar-sm .btn.btn-xs .inline-item-after, .btn-xs .inline-item-after {
1267
+ .sidebar-sm .btn.btn-xs .inline-item-after, .btn-translucent .inline-item-after, .btn-xs .inline-item-after {
1268
1268
  margin-left: 0.25rem;
1269
1269
  }
1270
- .sidebar-sm .btn.btn-xs .btn-section, .btn-xs .btn-section {
1270
+ .sidebar-sm .btn.btn-xs .btn-section, .btn-translucent .btn-section, .btn-xs .btn-section {
1271
1271
  font-size: 0.375rem;
1272
1272
  }
1273
1273
  .btn-group-lg > .btn,
@@ -1695,33 +1695,284 @@ input[type=button].btn-block {
1695
1695
  color: #6c757d;
1696
1696
  text-decoration: none;
1697
1697
  }
1698
- .btn-beta {
1698
+ .btn-translucent {
1699
+ border-radius: 50rem;
1700
+ }
1701
+ .btn-translucent.btn-primary {
1702
+ background-color: rgba(0, 105, 217, 0.04);
1703
+ border-color: transparent;
1704
+ color: #0069d9;
1705
+ }
1706
+ .btn-translucent.btn-primary:hover {
1707
+ background-color: rgba(0, 105, 217, 0.06);
1708
+ color: #0069d9;
1709
+ }
1710
+ .btn-translucent.btn-primary.focus, .btn-translucent.btn-primary:focus-visible, .c-prefers-focus .btn-translucent.btn-primary:focus {
1711
+ background-color: rgba(0, 105, 217, 0.06);
1712
+ color: #0069d9;
1713
+ }
1714
+ .btn-translucent.btn-primary:active {
1715
+ background-color: rgba(0, 105, 217, 0.08);
1716
+ color: #0069d9;
1717
+ }
1718
+ .btn-translucent.btn-primary.active {
1719
+ background-color: rgba(0, 105, 217, 0.08);
1720
+ color: #0069d9;
1721
+ }
1722
+ .btn-translucent.btn-primary[aria-expanded=true], .btn-translucent.btn-primary.show {
1723
+ background-color: rgba(0, 105, 217, 0.08);
1724
+ color: #0069d9;
1725
+ }
1726
+ .btn-translucent.btn-secondary {
1727
+ background-color: rgba(130, 142, 154, 0.04);
1728
+ border-color: transparent;
1729
+ color: #6c757d;
1730
+ }
1731
+ .btn-translucent.btn-secondary:hover {
1732
+ background-color: rgba(130, 142, 154, 0.06);
1733
+ color: #6c757d;
1734
+ }
1735
+ .btn-translucent.btn-secondary.focus, .btn-translucent.btn-secondary:focus-visible, .c-prefers-focus .btn-translucent.btn-secondary:focus {
1736
+ background-color: rgba(130, 142, 154, 0.06);
1737
+ color: #6c757d;
1738
+ }
1739
+ .btn-translucent.btn-secondary:active {
1740
+ background-color: rgba(130, 142, 154, 0.08);
1741
+ color: #6c757d;
1742
+ }
1743
+ .btn-translucent.btn-secondary.active {
1744
+ background-color: rgba(130, 142, 154, 0.08);
1745
+ color: #6c757d;
1746
+ }
1747
+ .btn-translucent.btn-secondary[aria-expanded=true], .btn-translucent.btn-secondary.show {
1748
+ background-color: rgba(130, 142, 154, 0.08);
1749
+ color: #6c757d;
1750
+ }
1751
+ .btn-translucent.btn-info, .btn-beta {
1699
1752
  background-color: rgba(19, 132, 150, 0.04);
1753
+ border-color: transparent;
1700
1754
  color: #138496;
1701
- text-transform: uppercase;
1702
1755
  }
1703
- .btn-beta:hover {
1756
+ .btn-translucent.btn-info:hover, .btn-beta:hover {
1704
1757
  background-color: rgba(19, 132, 150, 0.06);
1705
1758
  color: #138496;
1706
1759
  }
1707
- .focus.btn-beta, .btn-beta:focus-visible, .c-prefers-focus .btn-beta:focus {
1760
+ .btn-translucent.btn-info.focus, .btn-translucent.btn-info:focus-visible, .c-prefers-focus .btn-translucent.btn-info:focus, .btn-beta.focus, .btn-beta:focus-visible, .c-prefers-focus .btn-beta:focus {
1708
1761
  background-color: rgba(19, 132, 150, 0.06);
1709
1762
  color: #138496;
1710
1763
  }
1711
- .btn-beta-dark {
1764
+ .btn-translucent.btn-info:active, .btn-beta:active {
1765
+ background-color: rgba(19, 132, 150, 0.08);
1766
+ color: #138496;
1767
+ }
1768
+ .btn-translucent.btn-info.active, .btn-beta.active {
1769
+ background-color: rgba(19, 132, 150, 0.08);
1770
+ color: #138496;
1771
+ }
1772
+ .btn-translucent.btn-info[aria-expanded=true], .btn-translucent.btn-info.show, .btn-beta[aria-expanded=true], .btn-beta.show {
1773
+ background-color: rgba(19, 132, 150, 0.08);
1774
+ color: #138496;
1775
+ }
1776
+ .btn-translucent.btn-success {
1777
+ background-color: rgba(33, 136, 56, 0.04);
1778
+ border-color: transparent;
1779
+ color: #218838;
1780
+ }
1781
+ .btn-translucent.btn-success:hover {
1782
+ background-color: rgba(33, 136, 56, 0.06);
1783
+ color: #218838;
1784
+ }
1785
+ .btn-translucent.btn-success.focus, .btn-translucent.btn-success:focus-visible, .c-prefers-focus .btn-translucent.btn-success:focus {
1786
+ background-color: rgba(33, 136, 56, 0.06);
1787
+ color: #218838;
1788
+ }
1789
+ .btn-translucent.btn-success:active {
1790
+ background-color: rgba(33, 136, 56, 0.08);
1791
+ color: #218838;
1792
+ }
1793
+ .btn-translucent.btn-success.active {
1794
+ background-color: rgba(33, 136, 56, 0.08);
1795
+ color: #218838;
1796
+ }
1797
+ .btn-translucent.btn-success[aria-expanded=true], .btn-translucent.btn-success.show {
1798
+ background-color: rgba(33, 136, 56, 0.08);
1799
+ color: #218838;
1800
+ }
1801
+ .btn-translucent.btn-warning {
1802
+ background-color: rgba(224, 168, 0, 0.04);
1803
+ border-color: transparent;
1804
+ color: #e0a800;
1805
+ }
1806
+ .btn-translucent.btn-warning:hover {
1807
+ background-color: rgba(224, 168, 0, 0.06);
1808
+ color: #e0a800;
1809
+ }
1810
+ .btn-translucent.btn-warning.focus, .btn-translucent.btn-warning:focus-visible, .c-prefers-focus .btn-translucent.btn-warning:focus {
1811
+ background-color: rgba(224, 168, 0, 0.06);
1812
+ color: #e0a800;
1813
+ }
1814
+ .btn-translucent.btn-warning:active {
1815
+ background-color: rgba(224, 168, 0, 0.08);
1816
+ color: #e0a800;
1817
+ }
1818
+ .btn-translucent.btn-warning.active {
1819
+ background-color: rgba(224, 168, 0, 0.08);
1820
+ color: #e0a800;
1821
+ }
1822
+ .btn-translucent.btn-warning[aria-expanded=true], .btn-translucent.btn-warning.show {
1823
+ background-color: rgba(224, 168, 0, 0.08);
1824
+ color: #e0a800;
1825
+ }
1826
+ .btn-translucent.btn-danger {
1827
+ background-color: rgba(200, 35, 51, 0.04);
1828
+ border-color: transparent;
1829
+ color: #c82333;
1830
+ }
1831
+ .btn-translucent.btn-danger:hover {
1832
+ background-color: rgba(200, 35, 51, 0.06);
1833
+ color: #c82333;
1834
+ }
1835
+ .btn-translucent.btn-danger.focus, .btn-translucent.btn-danger:focus-visible, .c-prefers-focus .btn-translucent.btn-danger:focus {
1836
+ background-color: rgba(200, 35, 51, 0.06);
1837
+ color: #c82333;
1838
+ }
1839
+ .btn-translucent.btn-danger:active {
1840
+ background-color: rgba(200, 35, 51, 0.08);
1841
+ color: #c82333;
1842
+ }
1843
+ .btn-translucent.btn-danger.active {
1844
+ background-color: rgba(200, 35, 51, 0.08);
1845
+ color: #c82333;
1846
+ }
1847
+ .btn-translucent.btn-danger[aria-expanded=true], .btn-translucent.btn-danger.show {
1848
+ background-color: rgba(200, 35, 51, 0.08);
1849
+ color: #c82333;
1850
+ }
1851
+ .clay-dark.btn-translucent.btn-primary, .clay-dark .btn-translucent.btn-primary {
1852
+ background-color: rgba(168, 210, 255, 0.04);
1853
+ border-color: transparent;
1854
+ color: #75b8ff;
1855
+ }
1856
+ .clay-dark.btn-translucent.btn-primary:hover, .clay-dark .btn-translucent.btn-primary:hover {
1857
+ background-color: rgba(168, 210, 255, 0.06);
1858
+ color: #75b8ff;
1859
+ }
1860
+ .focus.clay-dark.btn-translucent.btn-primary, .clay-dark .focus.btn-translucent.btn-primary, .clay-dark.btn-translucent.btn-primary:focus-visible, .clay-dark .btn-translucent.btn-primary:focus-visible, .c-prefers-focus .clay-dark.btn-translucent.btn-primary:focus, .c-prefers-focus .clay-dark .btn-translucent.btn-primary:focus, .clay-dark .c-prefers-focus .btn-translucent.btn-primary:focus {
1861
+ background-color: rgba(168, 210, 255, 0.06);
1862
+ color: #75b8ff;
1863
+ }
1864
+ .clay-dark.btn-translucent.btn-primary:active, .clay-dark .btn-translucent.btn-primary:active {
1865
+ background-color: rgba(168, 210, 255, 0.08);
1866
+ color: #75b8ff;
1867
+ }
1868
+ .active.clay-dark.btn-translucent.btn-primary, .clay-dark .active.btn-translucent.btn-primary {
1869
+ background-color: rgba(168, 210, 255, 0.08);
1870
+ color: #75b8ff;
1871
+ }
1872
+ [aria-expanded=true].clay-dark.btn-translucent.btn-primary, .clay-dark [aria-expanded=true].btn-translucent.btn-primary, .show.clay-dark.btn-translucent.btn-primary, .clay-dark .show.btn-translucent.btn-primary {
1873
+ background-color: rgba(168, 210, 255, 0.08);
1874
+ color: #75b8ff;
1875
+ }
1876
+ .clay-dark.btn-translucent.btn-info, .clay-dark .btn-translucent.btn-info, .btn-beta-dark {
1712
1877
  background-color: rgba(135, 226, 240, 0.04);
1713
1878
  border-color: transparent;
1714
1879
  color: #5ad7ea;
1715
- text-transform: uppercase;
1716
1880
  }
1717
- .btn-beta-dark:hover {
1881
+ .clay-dark.btn-translucent.btn-info:hover, .clay-dark .btn-translucent.btn-info:hover, .btn-beta-dark:hover {
1718
1882
  background-color: rgba(135, 226, 240, 0.06);
1719
1883
  color: #5ad7ea;
1720
1884
  }
1721
- .focus.btn-beta-dark, .btn-beta-dark:focus-visible, .c-prefers-focus .btn-beta-dark:focus {
1885
+ .focus.clay-dark.btn-translucent.btn-info, .clay-dark .focus.btn-translucent.btn-info, .focus.btn-beta-dark, .clay-dark.btn-translucent.btn-info:focus-visible, .clay-dark .btn-translucent.btn-info:focus-visible, .btn-beta-dark:focus-visible, .c-prefers-focus .clay-dark.btn-translucent.btn-info:focus, .c-prefers-focus .clay-dark .btn-translucent.btn-info:focus, .clay-dark .c-prefers-focus .btn-translucent.btn-info:focus, .c-prefers-focus .btn-beta-dark:focus {
1722
1886
  background-color: rgba(135, 226, 240, 0.06);
1723
1887
  color: #5ad7ea;
1724
1888
  }
1889
+ .clay-dark.btn-translucent.btn-info:active, .clay-dark .btn-translucent.btn-info:active, .btn-beta-dark:active {
1890
+ background-color: rgba(135, 226, 240, 0.08);
1891
+ color: #5ad7ea;
1892
+ }
1893
+ .active.clay-dark.btn-translucent.btn-info, .clay-dark .active.btn-translucent.btn-info, .active.btn-beta-dark {
1894
+ background-color: rgba(135, 226, 240, 0.08);
1895
+ color: #5ad7ea;
1896
+ }
1897
+ [aria-expanded=true].clay-dark.btn-translucent.btn-info, .clay-dark [aria-expanded=true].btn-translucent.btn-info, [aria-expanded=true].btn-beta-dark, .show.clay-dark.btn-translucent.btn-info, .clay-dark .show.btn-translucent.btn-info, .show.btn-beta-dark {
1898
+ background-color: rgba(135, 226, 240, 0.08);
1899
+ color: #5ad7ea;
1900
+ }
1901
+ .clay-dark.btn-translucent.btn-success, .clay-dark .btn-translucent.btn-success {
1902
+ background-color: rgba(146, 229, 165, 0.04);
1903
+ border-color: transparent;
1904
+ color: #69db83;
1905
+ }
1906
+ .clay-dark.btn-translucent.btn-success:hover, .clay-dark .btn-translucent.btn-success:hover {
1907
+ background-color: rgba(146, 229, 165, 0.06);
1908
+ color: #69db83;
1909
+ }
1910
+ .focus.clay-dark.btn-translucent.btn-success, .clay-dark .focus.btn-translucent.btn-success, .clay-dark.btn-translucent.btn-success:focus-visible, .clay-dark .btn-translucent.btn-success:focus-visible, .c-prefers-focus .clay-dark.btn-translucent.btn-success:focus, .c-prefers-focus .clay-dark .btn-translucent.btn-success:focus, .clay-dark .c-prefers-focus .btn-translucent.btn-success:focus {
1911
+ background-color: rgba(146, 229, 165, 0.06);
1912
+ color: #69db83;
1913
+ }
1914
+ .clay-dark.btn-translucent.btn-success:active, .clay-dark .btn-translucent.btn-success:active {
1915
+ background-color: rgba(146, 229, 165, 0.08);
1916
+ color: #69db83;
1917
+ }
1918
+ .active.clay-dark.btn-translucent.btn-success, .clay-dark .active.btn-translucent.btn-success {
1919
+ background-color: rgba(146, 229, 165, 0.08);
1920
+ color: #69db83;
1921
+ }
1922
+ [aria-expanded=true].clay-dark.btn-translucent.btn-success, .clay-dark [aria-expanded=true].btn-translucent.btn-success, .show.clay-dark.btn-translucent.btn-success, .clay-dark .show.btn-translucent.btn-success {
1923
+ background-color: rgba(146, 229, 165, 0.08);
1924
+ color: #69db83;
1925
+ }
1926
+ .clay-dark.btn-translucent.btn-warning, .clay-dark .btn-translucent.btn-warning {
1927
+ background-color: rgba(255, 235, 175, 0.04);
1928
+ border-color: transparent;
1929
+ color: #ffde7c;
1930
+ }
1931
+ .clay-dark.btn-translucent.btn-warning:hover, .clay-dark .btn-translucent.btn-warning:hover {
1932
+ background-color: rgba(255, 235, 175, 0.06);
1933
+ color: #ffde7c;
1934
+ }
1935
+ .focus.clay-dark.btn-translucent.btn-warning, .clay-dark .focus.btn-translucent.btn-warning, .clay-dark.btn-translucent.btn-warning:focus-visible, .clay-dark .btn-translucent.btn-warning:focus-visible, .c-prefers-focus .clay-dark.btn-translucent.btn-warning:focus, .c-prefers-focus .clay-dark .btn-translucent.btn-warning:focus, .clay-dark .c-prefers-focus .btn-translucent.btn-warning:focus {
1936
+ background-color: rgba(255, 235, 175, 0.06);
1937
+ color: #ffde7c;
1938
+ }
1939
+ .clay-dark.btn-translucent.btn-warning:active, .clay-dark .btn-translucent.btn-warning:active {
1940
+ background-color: rgba(255, 235, 175, 0.08);
1941
+ color: #ffde7c;
1942
+ }
1943
+ .active.clay-dark.btn-translucent.btn-warning, .clay-dark .active.btn-translucent.btn-warning {
1944
+ background-color: rgba(255, 235, 175, 0.08);
1945
+ color: #ffde7c;
1946
+ }
1947
+ [aria-expanded=true].clay-dark.btn-translucent.btn-warning, .clay-dark [aria-expanded=true].btn-translucent.btn-warning, .show.clay-dark.btn-translucent.btn-warning, .clay-dark .show.btn-translucent.btn-warning {
1948
+ background-color: rgba(255, 235, 175, 0.08);
1949
+ color: #ffde7c;
1950
+ }
1951
+ .clay-dark.btn-translucent.btn-danger, .clay-dark .btn-translucent.btn-danger {
1952
+ background-color: rgba(245, 196, 201, 0.04);
1953
+ border-color: transparent;
1954
+ color: #ed99a1;
1955
+ }
1956
+ .clay-dark.btn-translucent.btn-danger:hover, .clay-dark .btn-translucent.btn-danger:hover {
1957
+ background-color: rgba(245, 196, 201, 0.06);
1958
+ color: #ed99a1;
1959
+ }
1960
+ .focus.clay-dark.btn-translucent.btn-danger, .clay-dark .focus.btn-translucent.btn-danger, .clay-dark.btn-translucent.btn-danger:focus-visible, .clay-dark .btn-translucent.btn-danger:focus-visible, .c-prefers-focus .clay-dark.btn-translucent.btn-danger:focus, .c-prefers-focus .clay-dark .btn-translucent.btn-danger:focus, .clay-dark .c-prefers-focus .btn-translucent.btn-danger:focus {
1961
+ background-color: rgba(245, 196, 201, 0.06);
1962
+ color: #ed99a1;
1963
+ }
1964
+ .clay-dark.btn-translucent.btn-danger:active, .clay-dark .btn-translucent.btn-danger:active {
1965
+ background-color: rgba(245, 196, 201, 0.08);
1966
+ color: #ed99a1;
1967
+ }
1968
+ .active.clay-dark.btn-translucent.btn-danger, .clay-dark .active.btn-translucent.btn-danger {
1969
+ background-color: rgba(245, 196, 201, 0.08);
1970
+ color: #ed99a1;
1971
+ }
1972
+ [aria-expanded=true].clay-dark.btn-translucent.btn-danger, .clay-dark [aria-expanded=true].btn-translucent.btn-danger, .show.clay-dark.btn-translucent.btn-danger, .clay-dark .show.btn-translucent.btn-danger {
1973
+ background-color: rgba(245, 196, 201, 0.08);
1974
+ color: #ed99a1;
1975
+ }
1725
1976
  .btn-outline-primary {
1726
1977
  border-color: #007bff;
1727
1978
  color: #007bff;
@@ -4168,15 +4419,55 @@ input[type=button].btn-block {
4168
4419
  color: #fff;
4169
4420
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
4170
4421
  }
4171
- .badge-beta {
4422
+ .badge-translucent.badge-primary {
4423
+ background-color: rgba(0, 105, 217, 0.04);
4424
+ border-color: transparent;
4425
+ color: #0069d9;
4426
+ }
4427
+ .badge-translucent.badge-info, .badge-beta {
4172
4428
  background-color: rgba(19, 132, 150, 0.04);
4429
+ border-color: transparent;
4173
4430
  color: #138496;
4174
- text-transform: uppercase;
4175
4431
  }
4176
- .badge-beta-dark {
4432
+ .badge-translucent.badge-success {
4433
+ background-color: rgba(33, 136, 56, 0.04);
4434
+ border-color: transparent;
4435
+ color: #218838;
4436
+ }
4437
+ .badge-translucent.badge-warning {
4438
+ background-color: rgba(224, 168, 0, 0.04);
4439
+ border-color: transparent;
4440
+ color: #e0a800;
4441
+ }
4442
+ .badge-translucent.badge-danger {
4443
+ background-color: rgba(200, 35, 51, 0.04);
4444
+ border-color: transparent;
4445
+ color: #c82333;
4446
+ }
4447
+ .clay-dark.badge-translucent.badge-primary, .clay-dark .badge-translucent.badge-primary {
4448
+ background-color: rgba(168, 210, 255, 0.04);
4449
+ border-color: transparent;
4450
+ color: #75b8ff;
4451
+ }
4452
+ .clay-dark.badge-translucent.badge-info, .clay-dark .badge-translucent.badge-info, .badge-beta-dark {
4177
4453
  background-color: rgba(135, 226, 240, 0.04);
4454
+ border-color: transparent;
4178
4455
  color: #5ad7ea;
4179
- text-transform: uppercase;
4456
+ }
4457
+ .clay-dark.badge-translucent.badge-success, .clay-dark .badge-translucent.badge-success {
4458
+ background-color: rgba(146, 229, 165, 0.04);
4459
+ border-color: transparent;
4460
+ color: #69db83;
4461
+ }
4462
+ .clay-dark.badge-translucent.badge-warning, .clay-dark .badge-translucent.badge-warning {
4463
+ background-color: rgba(255, 235, 175, 0.04);
4464
+ border-color: transparent;
4465
+ color: #ffde7c;
4466
+ }
4467
+ .clay-dark.badge-translucent.badge-danger, .clay-dark .badge-translucent.badge-danger {
4468
+ background-color: rgba(245, 196, 201, 0.04);
4469
+ border-color: transparent;
4470
+ color: #ed99a1;
4180
4471
  }
4181
4472
  .breadcrumb {
4182
4473
  background-color: #e9ecef;
@@ -18886,7 +19177,6 @@ caption {
18886
19177
  }
18887
19178
  .table thead th,
18888
19179
  .table thead td {
18889
- background-color: #fff;
18890
19180
  border-bottom: calc(2 * 0.0625rem) solid #dee2e6;
18891
19181
  border-top-width: 0px;
18892
19182
  vertical-align: bottom;
@@ -18932,25 +19222,20 @@ caption {
18932
19222
  }
18933
19223
  .table .table-divider th,
18934
19224
  .table .table-divider td {
18935
- background-color: #fff;
18936
19225
  padding: 0.75rem;
18937
19226
  }
18938
19227
  .table .table-active {
18939
19228
  background-color: #ececec;
18940
19229
  }
18941
- .table .table-active th,
18942
- .table .table-active td {
18943
- background-color: #ececec;
18944
- }
18945
19230
  .table .table-active .quick-action-menu {
18946
19231
  background-color: #ececec;
18947
19232
  }
18948
19233
  .table .table-disabled {
19234
+ background-color: #fff;
18949
19235
  color: #acacac;
18950
19236
  }
18951
19237
  .table .table-disabled th,
18952
19238
  .table .table-disabled td {
18953
- background-color: #fff;
18954
19239
  cursor: not-allowed;
18955
19240
  }
18956
19241
  .table .table-disabled th a[href],
@@ -19028,11 +19313,6 @@ caption {
19028
19313
  background-color: #ececec;
19029
19314
  color: #212529;
19030
19315
  }
19031
- .table-hover tbody tr:hover th,
19032
- .table-hover tbody tr:hover td {
19033
- background-color: #ececec;
19034
- color: #212529;
19035
- }
19036
19316
  .table-hover tbody tr:hover .quick-action-menu {
19037
19317
  background-color: #ececec;
19038
19318
  }
@@ -19042,10 +19322,53 @@ caption {
19042
19322
  .table-hover .table-disabled:hover {
19043
19323
  background-color: #fff;
19044
19324
  }
19045
- .table-hover .table-disabled:hover th,
19046
- .table-hover .table-disabled:hover td {
19047
- background-color: #fff;
19325
+ tr.table-focus {
19326
+ outline: 0;
19048
19327
  }
19328
+ tr.table-focus td {
19329
+ outline: 0;
19330
+ }
19331
+ tr.table-focus td::before {
19332
+ box-shadow: inset 0 0.2rem 0 0 rgba(0, 123, 255, 0.25), inset 0 -0.2rem 0 0 rgba(0, 123, 255, 0.25);
19333
+ content: "";
19334
+ display: block;
19335
+ position: absolute;
19336
+ left: -0.0625rem;
19337
+ right: -0.0625rem;
19338
+ top: -0.0625rem;
19339
+ bottom: -0.0625rem;
19340
+ pointer-events: none;
19341
+ z-index: 1;
19342
+ }
19343
+ tr.table-focus td:first-child::after {
19344
+ box-shadow: inset 0.2rem 0 0 0 rgba(0, 123, 255, 0.25);
19345
+ content: "";
19346
+ display: block;
19347
+ position: absolute;
19348
+ pointer-events: none;
19349
+ top: 0.0625rem;
19350
+ bottom: 0.0625rem;
19351
+ left: -0.0625rem;
19352
+ z-index: 1;
19353
+ width: 0.25rem;
19354
+ }
19355
+ tr.table-focus td:last-child::after {
19356
+ box-shadow: inset -0.2rem 0 0 0 rgba(0, 123, 255, 0.25);
19357
+ content: "";
19358
+ display: block;
19359
+ position: absolute;
19360
+ pointer-events: none;
19361
+ top: 0.0625rem;
19362
+ bottom: 0.0625rem;
19363
+ right: -0.0625rem;
19364
+ z-index: 1;
19365
+ width: 0.25rem;
19366
+ }
19367
+
19368
+ td.table-focus {
19369
+ outline: none;
19370
+ }
19371
+
19049
19372
  .table .table-primary,
19050
19373
  .table .table-primary > th,
19051
19374
  .table .table-primary > td {
@@ -19361,13 +19684,11 @@ caption {
19361
19684
  margin-bottom: 0.0625rem;
19362
19685
  }
19363
19686
  .table-list thead {
19364
- background-color: #fff;
19365
19687
  border-top-left-radius: calc(0.25rem - 0.0625rem);
19366
19688
  border-top-right-radius: calc(0.25rem - 0.0625rem);
19367
19689
  }
19368
19690
  .table-list thead th,
19369
19691
  .table-list thead td {
19370
- background-color: #fff;
19371
19692
  border-bottom-width: 0;
19372
19693
  }
19373
19694
  .table-list th,
@@ -19435,21 +19756,15 @@ caption {
19435
19756
  border-bottom-right-radius: calc(0.25rem - 0.0625rem);
19436
19757
  }
19437
19758
  .table-list tbody {
19438
- background-color: #fff;
19439
19759
  border-bottom-left-radius: calc(0.25rem - 0.0625rem);
19440
19760
  border-bottom-right-radius: calc(0.25rem - 0.0625rem);
19441
19761
  }
19442
19762
  .table-list tbody th,
19443
19763
  .table-list tbody td {
19444
- background-color: #fff;
19445
19764
  vertical-align: middle;
19446
19765
  }
19447
- .table-list tfoot {
19448
- background-color: #fff;
19449
- }
19450
19766
  .table-list tfoot th,
19451
19767
  .table-list tfoot td {
19452
- background-color: #fff;
19453
19768
  vertical-align: middle;
19454
19769
  }
19455
19770
  .table-list .table-divider th,
@@ -19462,10 +19777,6 @@ caption {
19462
19777
  .table-list .table-active {
19463
19778
  background-color: #dadada;
19464
19779
  }
19465
- .table-list .table-active th,
19466
- .table-list .table-active td {
19467
- background-color: #dadada;
19468
- }
19469
19780
  .table-list .table-active .quick-action-menu {
19470
19781
  background-color: #dadada;
19471
19782
  }
@@ -19473,11 +19784,6 @@ caption {
19473
19784
  background-color: #fff;
19474
19785
  color: #acacac;
19475
19786
  }
19476
- .table-list .table-disabled th,
19477
- .table-list .table-disabled td {
19478
- background-color: #fff;
19479
- color: #acacac;
19480
- }
19481
19787
  .table-list .table-disabled th a[href],
19482
19788
  .table-list .table-disabled td a[href] {
19483
19789
  color: #acacac;
@@ -19517,20 +19823,12 @@ caption {
19517
19823
  .table-list.table-hover tbody tr:hover {
19518
19824
  background-color: #ececec;
19519
19825
  }
19520
- .table-list.table-hover tbody tr:hover th,
19521
- .table-list.table-hover tbody tr:hover td {
19522
- background-color: #ececec;
19523
- }
19524
19826
  .table-list.table-hover tbody tr:hover .quick-action-menu {
19525
19827
  background-color: #ececec;
19526
19828
  }
19527
19829
  .table-list.table-hover .table-active:hover {
19528
19830
  background-color: #dadada;
19529
19831
  }
19530
- .table-list.table-hover .table-active:hover th,
19531
- .table-list.table-hover .table-active:hover td {
19532
- background-color: #dadada;
19533
- }
19534
19832
  .table-list.table-hover .table-active:hover .quick-action-menu {
19535
19833
  background-color: #ececec;
19536
19834
  }
@@ -19540,10 +19838,6 @@ caption {
19540
19838
  .table-list.table-hover .table-disabled:hover {
19541
19839
  background-color: #fff;
19542
19840
  }
19543
- .table-list.table-hover .table-disabled:hover th,
19544
- .table-list.table-hover .table-disabled:hover td {
19545
- background-color: #fff;
19546
- }
19547
19841
  .table-list.table-striped tbody .table-disabled:nth-of-type(odd),
19548
19842
  .table-list.table-striped tbody .table-disabled:nth-of-type(odd) td,
19549
19843
  .table-list.table-striped tbody .table-disabled:nth-of-type(odd) th {
@@ -30704,7 +30998,7 @@ a.text-dark:hover, a.text-dark:focus {
30704
30998
  text-decoration: none !important;
30705
30999
  }
30706
31000
 
30707
- .c-prefers-letter-spacing-1 {
31001
+ .c-prefers-letter-spacing-1, .c-prefers-letter-spacing-1 * {
30708
31002
  letter-spacing: 1px !important;
30709
31003
  }
30710
31004