@clayui/css 3.100.0 → 3.102.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.100.0
3
+ * Clay 3.102.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>
@@ -1178,18 +1178,18 @@ button.collapse-icon .c-inner {
1178
1178
  color: #212529;
1179
1179
  text-decoration: none;
1180
1180
  }
1181
- .btn:focus, .btn.focus {
1181
+ .btn.focus, .btn:focus-visible, .c-prefers-focus .btn:focus {
1182
1182
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
1183
1183
  outline: 0;
1184
1184
  }
1185
- .btn:active:focus {
1185
+ .btn:active:focus-visible, .c-prefers-focus .btn:active:focus {
1186
1186
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
1187
1187
  }
1188
1188
  .btn:disabled, .btn.disabled {
1189
1189
  cursor: not-allowed;
1190
1190
  opacity: 0.65;
1191
1191
  }
1192
- .btn:disabled:focus, .btn.disabled:focus {
1192
+ .btn:disabled:focus-visible, .c-prefers-focus .btn:disabled:focus, .btn.disabled:focus-visible, .c-prefers-focus .btn.disabled:focus {
1193
1193
  box-shadow: none;
1194
1194
  }
1195
1195
  .btn:disabled:active, .btn.disabled:active {
@@ -1384,7 +1384,7 @@ input[type=button].btn-block {
1384
1384
  border-color: #0062cc;
1385
1385
  color: #fff;
1386
1386
  }
1387
- .btn-primary:focus, .btn-primary.focus {
1387
+ .btn-primary.focus, .btn-primary:focus-visible, .c-prefers-focus .btn-primary:focus {
1388
1388
  background-color: #0069d9;
1389
1389
  border-color: #0062cc;
1390
1390
  color: #fff;
@@ -1419,7 +1419,7 @@ input[type=button].btn-block {
1419
1419
  border-color: #545b62;
1420
1420
  color: #fff;
1421
1421
  }
1422
- .btn-secondary:focus, .btn-secondary.focus {
1422
+ .btn-secondary.focus, .btn-secondary:focus-visible, .c-prefers-focus .btn-secondary:focus {
1423
1423
  background-color: #5a6268;
1424
1424
  border-color: #545b62;
1425
1425
  color: #fff;
@@ -1454,7 +1454,7 @@ input[type=button].btn-block {
1454
1454
  border-color: #1e7e34;
1455
1455
  color: #fff;
1456
1456
  }
1457
- .btn-success:focus, .btn-success.focus {
1457
+ .btn-success.focus, .btn-success:focus-visible, .c-prefers-focus .btn-success:focus {
1458
1458
  background-color: #218838;
1459
1459
  border-color: #1e7e34;
1460
1460
  color: #fff;
@@ -1489,7 +1489,7 @@ input[type=button].btn-block {
1489
1489
  border-color: #117a8b;
1490
1490
  color: #fff;
1491
1491
  }
1492
- .btn-info:focus, .btn-info.focus {
1492
+ .btn-info.focus, .btn-info:focus-visible, .c-prefers-focus .btn-info:focus {
1493
1493
  background-color: #138496;
1494
1494
  border-color: #117a8b;
1495
1495
  color: #fff;
@@ -1524,7 +1524,7 @@ input[type=button].btn-block {
1524
1524
  border-color: #d39e00;
1525
1525
  color: #212529;
1526
1526
  }
1527
- .btn-warning:focus, .btn-warning.focus {
1527
+ .btn-warning.focus, .btn-warning:focus-visible, .c-prefers-focus .btn-warning:focus {
1528
1528
  background-color: #e0a800;
1529
1529
  border-color: #d39e00;
1530
1530
  color: #212529;
@@ -1559,7 +1559,7 @@ input[type=button].btn-block {
1559
1559
  border-color: #bd2130;
1560
1560
  color: #fff;
1561
1561
  }
1562
- .btn-danger:focus, .btn-danger.focus {
1562
+ .btn-danger.focus, .btn-danger:focus-visible, .c-prefers-focus .btn-danger:focus {
1563
1563
  background-color: #c82333;
1564
1564
  border-color: #bd2130;
1565
1565
  color: #fff;
@@ -1594,7 +1594,7 @@ input[type=button].btn-block {
1594
1594
  border-color: #dae0e5;
1595
1595
  color: #212529;
1596
1596
  }
1597
- .btn-light:focus, .btn-light.focus {
1597
+ .btn-light.focus, .btn-light:focus-visible, .c-prefers-focus .btn-light:focus {
1598
1598
  background-color: #e2e6ea;
1599
1599
  border-color: #dae0e5;
1600
1600
  color: #212529;
@@ -1629,7 +1629,7 @@ input[type=button].btn-block {
1629
1629
  border-color: #1d2124;
1630
1630
  color: #fff;
1631
1631
  }
1632
- .btn-dark:focus, .btn-dark.focus {
1632
+ .btn-dark.focus, .btn-dark:focus-visible, .c-prefers-focus .btn-dark:focus {
1633
1633
  background-color: #23272b;
1634
1634
  border-color: #1d2124;
1635
1635
  color: #fff;
@@ -1664,11 +1664,11 @@ input[type=button].btn-block {
1664
1664
  color: #0056b3;
1665
1665
  text-decoration: underline;
1666
1666
  }
1667
- .btn-link:focus, .btn-link.focus {
1667
+ .btn-link.focus, .btn-link:focus-visible, .c-prefers-focus .btn-link:focus {
1668
1668
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
1669
1669
  text-decoration: none;
1670
1670
  }
1671
- .btn-link:active:focus {
1671
+ .btn-link:active:focus-visible, .c-prefers-focus .btn-link:active:focus {
1672
1672
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
1673
1673
  }
1674
1674
  .btn-link:disabled, .btn-link.disabled {
@@ -1685,7 +1685,7 @@ input[type=button].btn-block {
1685
1685
  background-color: rgba(19, 132, 150, 0.06);
1686
1686
  color: #138496;
1687
1687
  }
1688
- .btn-beta:focus, .focus.btn-beta {
1688
+ .focus.btn-beta, .btn-beta:focus-visible, .c-prefers-focus .btn-beta:focus {
1689
1689
  background-color: rgba(19, 132, 150, 0.06);
1690
1690
  color: #138496;
1691
1691
  }
@@ -1699,7 +1699,7 @@ input[type=button].btn-block {
1699
1699
  background-color: rgba(135, 226, 240, 0.06);
1700
1700
  color: #5ad7ea;
1701
1701
  }
1702
- .btn-beta-dark:focus, .focus.btn-beta-dark {
1702
+ .focus.btn-beta-dark, .btn-beta-dark:focus-visible, .c-prefers-focus .btn-beta-dark:focus {
1703
1703
  background-color: rgba(135, 226, 240, 0.06);
1704
1704
  color: #5ad7ea;
1705
1705
  }
@@ -1712,7 +1712,7 @@ input[type=button].btn-block {
1712
1712
  border-color: #007bff;
1713
1713
  color: #fff;
1714
1714
  }
1715
- .btn-outline-primary:focus, .btn-outline-primary.focus {
1715
+ .btn-outline-primary.focus, .btn-outline-primary:focus-visible, .c-prefers-focus .btn-outline-primary:focus {
1716
1716
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
1717
1717
  }
1718
1718
  .btn-outline-primary:active {
@@ -1720,7 +1720,7 @@ input[type=button].btn-block {
1720
1720
  border-color: #007bff;
1721
1721
  color: #fff;
1722
1722
  }
1723
- .btn-outline-primary:active:focus {
1723
+ .btn-outline-primary:active:focus-visible, .c-prefers-focus .btn-outline-primary:active:focus {
1724
1724
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
1725
1725
  }
1726
1726
  .btn-outline-primary.active {
@@ -1746,7 +1746,7 @@ input[type=button].btn-block {
1746
1746
  border-color: #6c757d;
1747
1747
  color: #fff;
1748
1748
  }
1749
- .btn-outline-secondary:focus, .btn-outline-secondary.focus {
1749
+ .btn-outline-secondary.focus, .btn-outline-secondary:focus-visible, .c-prefers-focus .btn-outline-secondary:focus {
1750
1750
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
1751
1751
  }
1752
1752
  .btn-outline-secondary:active {
@@ -1754,7 +1754,7 @@ input[type=button].btn-block {
1754
1754
  border-color: #6c757d;
1755
1755
  color: #fff;
1756
1756
  }
1757
- .btn-outline-secondary:active:focus {
1757
+ .btn-outline-secondary:active:focus-visible, .c-prefers-focus .btn-outline-secondary:active:focus {
1758
1758
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
1759
1759
  }
1760
1760
  .btn-outline-secondary.active {
@@ -1780,7 +1780,7 @@ input[type=button].btn-block {
1780
1780
  border-color: #28a745;
1781
1781
  color: #fff;
1782
1782
  }
1783
- .btn-outline-success:focus, .btn-outline-success.focus {
1783
+ .btn-outline-success.focus, .btn-outline-success:focus-visible, .c-prefers-focus .btn-outline-success:focus {
1784
1784
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
1785
1785
  }
1786
1786
  .btn-outline-success:active {
@@ -1788,7 +1788,7 @@ input[type=button].btn-block {
1788
1788
  border-color: #28a745;
1789
1789
  color: #fff;
1790
1790
  }
1791
- .btn-outline-success:active:focus {
1791
+ .btn-outline-success:active:focus-visible, .c-prefers-focus .btn-outline-success:active:focus {
1792
1792
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
1793
1793
  }
1794
1794
  .btn-outline-success.active {
@@ -1814,7 +1814,7 @@ input[type=button].btn-block {
1814
1814
  border-color: #17a2b8;
1815
1815
  color: #fff;
1816
1816
  }
1817
- .btn-outline-info:focus, .btn-outline-info.focus {
1817
+ .btn-outline-info.focus, .btn-outline-info:focus-visible, .c-prefers-focus .btn-outline-info:focus {
1818
1818
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
1819
1819
  }
1820
1820
  .btn-outline-info:active {
@@ -1822,7 +1822,7 @@ input[type=button].btn-block {
1822
1822
  border-color: #17a2b8;
1823
1823
  color: #fff;
1824
1824
  }
1825
- .btn-outline-info:active:focus {
1825
+ .btn-outline-info:active:focus-visible, .c-prefers-focus .btn-outline-info:active:focus {
1826
1826
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
1827
1827
  }
1828
1828
  .btn-outline-info.active {
@@ -1848,7 +1848,7 @@ input[type=button].btn-block {
1848
1848
  border-color: #ffc107;
1849
1849
  color: #212529;
1850
1850
  }
1851
- .btn-outline-warning:focus, .btn-outline-warning.focus {
1851
+ .btn-outline-warning.focus, .btn-outline-warning:focus-visible, .c-prefers-focus .btn-outline-warning:focus {
1852
1852
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
1853
1853
  }
1854
1854
  .btn-outline-warning:active {
@@ -1856,7 +1856,7 @@ input[type=button].btn-block {
1856
1856
  border-color: #ffc107;
1857
1857
  color: #212529;
1858
1858
  }
1859
- .btn-outline-warning:active:focus {
1859
+ .btn-outline-warning:active:focus-visible, .c-prefers-focus .btn-outline-warning:active:focus {
1860
1860
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
1861
1861
  }
1862
1862
  .btn-outline-warning.active {
@@ -1882,7 +1882,7 @@ input[type=button].btn-block {
1882
1882
  border-color: #dc3545;
1883
1883
  color: #fff;
1884
1884
  }
1885
- .btn-outline-danger:focus, .btn-outline-danger.focus {
1885
+ .btn-outline-danger.focus, .btn-outline-danger:focus-visible, .c-prefers-focus .btn-outline-danger:focus {
1886
1886
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
1887
1887
  }
1888
1888
  .btn-outline-danger:active {
@@ -1890,7 +1890,7 @@ input[type=button].btn-block {
1890
1890
  border-color: #dc3545;
1891
1891
  color: #fff;
1892
1892
  }
1893
- .btn-outline-danger:active:focus {
1893
+ .btn-outline-danger:active:focus-visible, .c-prefers-focus .btn-outline-danger:active:focus {
1894
1894
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
1895
1895
  }
1896
1896
  .btn-outline-danger.active {
@@ -1916,7 +1916,7 @@ input[type=button].btn-block {
1916
1916
  border-color: #f8f9fa;
1917
1917
  color: #212529;
1918
1918
  }
1919
- .btn-outline-light:focus, .btn-outline-light.focus {
1919
+ .btn-outline-light.focus, .btn-outline-light:focus-visible, .c-prefers-focus .btn-outline-light:focus {
1920
1920
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
1921
1921
  }
1922
1922
  .btn-outline-light:active {
@@ -1924,7 +1924,7 @@ input[type=button].btn-block {
1924
1924
  border-color: #f8f9fa;
1925
1925
  color: #212529;
1926
1926
  }
1927
- .btn-outline-light:active:focus {
1927
+ .btn-outline-light:active:focus-visible, .c-prefers-focus .btn-outline-light:active:focus {
1928
1928
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
1929
1929
  }
1930
1930
  .btn-outline-light.active {
@@ -1950,7 +1950,7 @@ input[type=button].btn-block {
1950
1950
  border-color: #343a40;
1951
1951
  color: #fff;
1952
1952
  }
1953
- .btn-outline-dark:focus, .btn-outline-dark.focus {
1953
+ .btn-outline-dark.focus, .btn-outline-dark:focus-visible, .c-prefers-focus .btn-outline-dark:focus {
1954
1954
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
1955
1955
  }
1956
1956
  .btn-outline-dark:active {
@@ -1958,7 +1958,7 @@ input[type=button].btn-block {
1958
1958
  border-color: #343a40;
1959
1959
  color: #fff;
1960
1960
  }
1961
- .btn-outline-dark:active:focus {
1961
+ .btn-outline-dark:active:focus-visible, .c-prefers-focus .btn-outline-dark:active:focus {
1962
1962
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
1963
1963
  }
1964
1964
  .btn-outline-dark.active {
@@ -1981,7 +1981,7 @@ input[type=button].btn-block {
1981
1981
  .btn-outline-borderless:hover {
1982
1982
  border-color: transparent;
1983
1983
  }
1984
- .btn-outline-borderless:focus, .btn-outline-borderless.focus {
1984
+ .btn-outline-borderless.focus, .btn-outline-borderless:focus-visible, .c-prefers-focus .btn-outline-borderless:focus {
1985
1985
  border-color: transparent;
1986
1986
  }
1987
1987
  .btn-outline-borderless:disabled, .btn-outline-borderless.disabled {
@@ -3385,9 +3385,10 @@ input[type=button].btn-block {
3385
3385
  .alert-link.btn-unstyled.hover {
3386
3386
  text-decoration: underline;
3387
3387
  }
3388
- .alert-link.focus, .alert-link:focus,
3388
+ .alert-link.focus, .alert-link:focus-visible, .c-prefers-focus .alert-link:focus,
3389
3389
  .alert-link.btn-unstyled.focus,
3390
- .alert-link.btn-unstyled:focus {
3390
+ .alert-link.btn-unstyled:focus-visible,
3391
+ .c-prefers-focus .alert-link.btn-unstyled:focus {
3391
3392
  text-decoration: underline;
3392
3393
  }
3393
3394
  .alert-indicator {
@@ -3925,7 +3926,7 @@ input[type=button].btn-block {
3925
3926
  .badge[href]:hover, .badge[href].hover, .badge[type]:hover, .badge[type].hover {
3926
3927
  text-decoration: none;
3927
3928
  }
3928
- .badge[href].focus, .badge[href]:focus, .badge[type].focus, .badge[type]:focus {
3929
+ .badge[href].focus, .badge[href]:focus-visible, .c-prefers-focus .badge[href]:focus, .badge[type].focus, .badge[type]:focus-visible, .c-prefers-focus .badge[type]:focus {
3929
3930
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
3930
3931
  outline: 0;
3931
3932
  }
@@ -3936,7 +3937,7 @@ input[type=button].btn-block {
3936
3937
  .badge a:hover, .badge a.hover {
3937
3938
  text-decoration: none;
3938
3939
  }
3939
- .badge a.focus, .badge a:focus {
3940
+ .badge a.focus, .badge a:focus-visible, .c-prefers-focus .badge a:focus {
3940
3941
  text-decoration: none;
3941
3942
  }
3942
3943
  .badge > .c-inner {
@@ -4005,9 +4006,10 @@ input[type=button].btn-block {
4005
4006
  color: inherit;
4006
4007
  opacity: 1;
4007
4008
  }
4008
- .badge-item .close:focus {
4009
+ .badge-item .close.focus, .badge-item .close:focus-visible, .c-prefers-focus .badge-item .close:focus {
4009
4010
  opacity: 1;
4010
4011
  }
4012
+
4011
4013
  .badge-item .lexicon-icon {
4012
4014
  height: 0.875em;
4013
4015
  margin-top: 0;
@@ -4051,7 +4053,7 @@ input[type=button].btn-block {
4051
4053
  background-color: #0062cc;
4052
4054
  color: #fff;
4053
4055
  }
4054
- [href].focus.badge-primary, [href].badge-primary:focus, [type].focus.badge-primary, [type].badge-primary:focus {
4056
+ [href].focus.badge-primary, [href].badge-primary:focus-visible, .c-prefers-focus [href].badge-primary:focus, [type].focus.badge-primary, [type].badge-primary:focus-visible, .c-prefers-focus [type].badge-primary:focus {
4055
4057
  background-color: #0062cc;
4056
4058
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
4057
4059
  color: #fff;
@@ -4064,7 +4066,7 @@ input[type=button].btn-block {
4064
4066
  background-color: #545b62;
4065
4067
  color: #fff;
4066
4068
  }
4067
- [href].focus.badge-secondary, [href].badge-secondary:focus, [type].focus.badge-secondary, [type].badge-secondary:focus {
4069
+ [href].focus.badge-secondary, [href].badge-secondary:focus-visible, .c-prefers-focus [href].badge-secondary:focus, [type].focus.badge-secondary, [type].badge-secondary:focus-visible, .c-prefers-focus [type].badge-secondary:focus {
4068
4070
  background-color: #545b62;
4069
4071
  color: #fff;
4070
4072
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
@@ -4077,7 +4079,7 @@ input[type=button].btn-block {
4077
4079
  background-color: #1e7e34;
4078
4080
  color: #fff;
4079
4081
  }
4080
- [href].focus.badge-success, [href].badge-success:focus, [type].focus.badge-success, [type].badge-success:focus {
4082
+ [href].focus.badge-success, [href].badge-success:focus-visible, .c-prefers-focus [href].badge-success:focus, [type].focus.badge-success, [type].badge-success:focus-visible, .c-prefers-focus [type].badge-success:focus {
4081
4083
  background-color: #1e7e34;
4082
4084
  color: #fff;
4083
4085
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
@@ -4090,7 +4092,7 @@ input[type=button].btn-block {
4090
4092
  background-color: #117a8b;
4091
4093
  color: #fff;
4092
4094
  }
4093
- [href].focus.badge-info, [href].badge-info:focus, [type].focus.badge-info, [type].badge-info:focus {
4095
+ [href].focus.badge-info, [href].badge-info:focus-visible, .c-prefers-focus [href].badge-info:focus, [type].focus.badge-info, [type].badge-info:focus-visible, .c-prefers-focus [type].badge-info:focus {
4094
4096
  background-color: #117a8b;
4095
4097
  color: #fff;
4096
4098
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
@@ -4103,7 +4105,7 @@ input[type=button].btn-block {
4103
4105
  background-color: #d39e00;
4104
4106
  color: #212529;
4105
4107
  }
4106
- [href].focus.badge-warning, [href].badge-warning:focus, [type].focus.badge-warning, [type].badge-warning:focus {
4108
+ [href].focus.badge-warning, [href].badge-warning:focus-visible, .c-prefers-focus [href].badge-warning:focus, [type].focus.badge-warning, [type].badge-warning:focus-visible, .c-prefers-focus [type].badge-warning:focus {
4107
4109
  background-color: #d39e00;
4108
4110
  color: #212529;
4109
4111
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
@@ -4116,7 +4118,7 @@ input[type=button].btn-block {
4116
4118
  background-color: #bd2130;
4117
4119
  color: #fff;
4118
4120
  }
4119
- [href].focus.badge-danger, [href].badge-danger:focus, [type].focus.badge-danger, [type].badge-danger:focus {
4121
+ [href].focus.badge-danger, [href].badge-danger:focus-visible, .c-prefers-focus [href].badge-danger:focus, [type].focus.badge-danger, [type].badge-danger:focus-visible, .c-prefers-focus [type].badge-danger:focus {
4120
4122
  background-color: #bd2130;
4121
4123
  color: #fff;
4122
4124
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
@@ -4129,7 +4131,7 @@ input[type=button].btn-block {
4129
4131
  background-color: #dae0e5;
4130
4132
  color: #212529;
4131
4133
  }
4132
- [href].focus.badge-light, [href].badge-light:focus, [type].focus.badge-light, [type].badge-light:focus {
4134
+ [href].focus.badge-light, [href].badge-light:focus-visible, .c-prefers-focus [href].badge-light:focus, [type].focus.badge-light, [type].badge-light:focus-visible, .c-prefers-focus [type].badge-light:focus {
4133
4135
  background-color: #dae0e5;
4134
4136
  color: #212529;
4135
4137
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
@@ -4142,7 +4144,7 @@ input[type=button].btn-block {
4142
4144
  background-color: #1d2124;
4143
4145
  color: #fff;
4144
4146
  }
4145
- [href].focus.badge-dark, [href].badge-dark:focus, [type].focus.badge-dark, [type].badge-dark:focus {
4147
+ [href].focus.badge-dark, [href].badge-dark:focus-visible, .c-prefers-focus [href].badge-dark:focus, [type].focus.badge-dark, [type].badge-dark:focus-visible, .c-prefers-focus [type].badge-dark:focus {
4146
4148
  background-color: #1d2124;
4147
4149
  color: #fff;
4148
4150
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
@@ -4176,7 +4178,7 @@ input[type=button].btn-block {
4176
4178
  color: #0056b3;
4177
4179
  text-decoration: underline;
4178
4180
  }
4179
- .breadcrumb-link.focus, .breadcrumb-link:focus {
4181
+ .breadcrumb-link.focus, .breadcrumb-link:focus-visible, .c-prefers-focus .breadcrumb-link:focus {
4180
4182
  color: #0056b3;
4181
4183
  text-decoration: underline;
4182
4184
  }
@@ -4222,7 +4224,7 @@ input[type=button].btn-block {
4222
4224
  .breadcrumb-item .dropdown-toggle:hover {
4223
4225
  text-decoration: none;
4224
4226
  }
4225
- .breadcrumb-item .dropdown-toggle:focus, .breadcrumb-item .dropdown-toggle.focus {
4227
+ .breadcrumb-item .dropdown-toggle.focus, .breadcrumb-item .dropdown-toggle:focus-visible, .c-prefers-focus .breadcrumb-item .dropdown-toggle:focus {
4226
4228
  text-decoration: none;
4227
4229
  }
4228
4230
  .breadcrumb-text-truncate {
@@ -4467,9 +4469,10 @@ input[type=button].btn-block {
4467
4469
  color: inherit;
4468
4470
  text-decoration: none;
4469
4471
  }
4470
- .label a.focus, .label a:focus,
4472
+ .label a.focus, .label a:focus-visible, .c-prefers-focus .label a:focus,
4471
4473
  .label .btn-unstyled.focus,
4472
- .label .btn-unstyled:focus {
4474
+ .label .btn-unstyled:focus-visible,
4475
+ .c-prefers-focus .label .btn-unstyled:focus {
4473
4476
  color: inherit;
4474
4477
  text-decoration: none;
4475
4478
  }
@@ -4547,9 +4550,10 @@ input[type=button].btn-block {
4547
4550
  color: inherit;
4548
4551
  opacity: 1;
4549
4552
  }
4550
- .label-item .close:focus {
4553
+ .label-item .close.focus, .label-item .close:focus-visible, .c-prefers-focus .label-item .close:focus {
4551
4554
  opacity: 1;
4552
4555
  }
4556
+
4553
4557
  .label-item .close:disabled, .label-item .close.disabled {
4554
4558
  opacity: 0.65;
4555
4559
  }
@@ -4603,7 +4607,7 @@ input[type=button].btn-block {
4603
4607
  border-color: #0062cc;
4604
4608
  color: #0062cc;
4605
4609
  }
4606
- [href].focus.label-primary, [href].label-primary:focus, [type].focus.label-primary, [type].label-primary:focus, [tabindex].focus.label-primary, [tabindex].label-primary:focus {
4610
+ [href].focus.label-primary, [href].label-primary:focus-visible, .c-prefers-focus [href].label-primary:focus, [type].focus.label-primary, [type].label-primary:focus-visible, .c-prefers-focus [type].label-primary:focus, [tabindex].focus.label-primary, [tabindex].label-primary:focus-visible, .c-prefers-focus [tabindex].label-primary:focus {
4607
4611
  color: #0062cc;
4608
4612
  }
4609
4613
  .label-primary a:hover, .label-primary a.hover,
@@ -4614,9 +4618,10 @@ input[type=button].btn-block {
4614
4618
  .label-primary .close:hover {
4615
4619
  color: #0062cc;
4616
4620
  }
4617
- .label-primary .close:focus {
4621
+ .label-primary .close.focus, .label-primary .close:focus-visible, .c-prefers-focus .label-primary .close:focus {
4618
4622
  color: #0062cc;
4619
4623
  }
4624
+
4620
4625
  .label-secondary {
4621
4626
  background-color: #fff;
4622
4627
  border-color: #6c757d;
@@ -4626,7 +4631,7 @@ input[type=button].btn-block {
4626
4631
  border-color: #545b62;
4627
4632
  color: #545b62;
4628
4633
  }
4629
- [href].focus.label-secondary, [href].label-secondary:focus, [type].focus.label-secondary, [type].label-secondary:focus, [tabindex].focus.label-secondary, [tabindex].label-secondary:focus {
4634
+ [href].focus.label-secondary, [href].label-secondary:focus-visible, .c-prefers-focus [href].label-secondary:focus, [type].focus.label-secondary, [type].label-secondary:focus-visible, .c-prefers-focus [type].label-secondary:focus, [tabindex].focus.label-secondary, [tabindex].label-secondary:focus-visible, .c-prefers-focus [tabindex].label-secondary:focus {
4630
4635
  color: #545b62;
4631
4636
  }
4632
4637
  .label-secondary a:hover, .label-secondary a.hover,
@@ -4637,9 +4642,10 @@ input[type=button].btn-block {
4637
4642
  .label-secondary .close:hover {
4638
4643
  color: #545b62;
4639
4644
  }
4640
- .label-secondary .close:focus {
4645
+ .label-secondary .close.focus, .label-secondary .close:focus-visible, .c-prefers-focus .label-secondary .close:focus {
4641
4646
  color: #545b62;
4642
4647
  }
4648
+
4643
4649
  .label-success {
4644
4650
  background-color: #fff;
4645
4651
  border-color: #28a745;
@@ -4649,7 +4655,7 @@ input[type=button].btn-block {
4649
4655
  border-color: #1e7e34;
4650
4656
  color: #1e7e34;
4651
4657
  }
4652
- [href].focus.label-success, [href].label-success:focus, [type].focus.label-success, [type].label-success:focus, [tabindex].focus.label-success, [tabindex].label-success:focus {
4658
+ [href].focus.label-success, [href].label-success:focus-visible, .c-prefers-focus [href].label-success:focus, [type].focus.label-success, [type].label-success:focus-visible, .c-prefers-focus [type].label-success:focus, [tabindex].focus.label-success, [tabindex].label-success:focus-visible, .c-prefers-focus [tabindex].label-success:focus {
4653
4659
  color: #1e7e34;
4654
4660
  }
4655
4661
  .label-success a:hover, .label-success a.hover,
@@ -4660,9 +4666,10 @@ input[type=button].btn-block {
4660
4666
  .label-success .close:hover {
4661
4667
  color: #1e7e34;
4662
4668
  }
4663
- .label-success .close:focus {
4669
+ .label-success .close.focus, .label-success .close:focus-visible, .c-prefers-focus .label-success .close:focus {
4664
4670
  color: #1e7e34;
4665
4671
  }
4672
+
4666
4673
  .label-info {
4667
4674
  background-color: #fff;
4668
4675
  border-color: #17a2b8;
@@ -4672,7 +4679,7 @@ input[type=button].btn-block {
4672
4679
  border-color: #117a8b;
4673
4680
  color: #117a8b;
4674
4681
  }
4675
- [href].focus.label-info, [href].label-info:focus, [type].focus.label-info, [type].label-info:focus, [tabindex].focus.label-info, [tabindex].label-info:focus {
4682
+ [href].focus.label-info, [href].label-info:focus-visible, .c-prefers-focus [href].label-info:focus, [type].focus.label-info, [type].label-info:focus-visible, .c-prefers-focus [type].label-info:focus, [tabindex].focus.label-info, [tabindex].label-info:focus-visible, .c-prefers-focus [tabindex].label-info:focus {
4676
4683
  color: #117a8b;
4677
4684
  }
4678
4685
  .label-info a:hover, .label-info a.hover,
@@ -4683,9 +4690,10 @@ input[type=button].btn-block {
4683
4690
  .label-info .close:hover {
4684
4691
  color: #117a8b;
4685
4692
  }
4686
- .label-info .close:focus {
4693
+ .label-info .close.focus, .label-info .close:focus-visible, .c-prefers-focus .label-info .close:focus {
4687
4694
  color: #117a8b;
4688
4695
  }
4696
+
4689
4697
  .label-warning {
4690
4698
  background-color: #fff;
4691
4699
  border-color: #ffc107;
@@ -4695,7 +4703,7 @@ input[type=button].btn-block {
4695
4703
  border-color: #d39e00;
4696
4704
  color: #d39e00;
4697
4705
  }
4698
- [href].focus.label-warning, [href].label-warning:focus, [type].focus.label-warning, [type].label-warning:focus, [tabindex].focus.label-warning, [tabindex].label-warning:focus {
4706
+ [href].focus.label-warning, [href].label-warning:focus-visible, .c-prefers-focus [href].label-warning:focus, [type].focus.label-warning, [type].label-warning:focus-visible, .c-prefers-focus [type].label-warning:focus, [tabindex].focus.label-warning, [tabindex].label-warning:focus-visible, .c-prefers-focus [tabindex].label-warning:focus {
4699
4707
  color: #d39e00;
4700
4708
  }
4701
4709
  .label-warning a:hover, .label-warning a.hover,
@@ -4706,9 +4714,10 @@ input[type=button].btn-block {
4706
4714
  .label-warning .close:hover {
4707
4715
  color: #d39e00;
4708
4716
  }
4709
- .label-warning .close:focus {
4717
+ .label-warning .close.focus, .label-warning .close:focus-visible, .c-prefers-focus .label-warning .close:focus {
4710
4718
  color: #d39e00;
4711
4719
  }
4720
+
4712
4721
  .label-danger {
4713
4722
  background-color: #fff;
4714
4723
  border-color: #dc3545;
@@ -4718,7 +4727,7 @@ input[type=button].btn-block {
4718
4727
  border-color: #bd2130;
4719
4728
  color: #bd2130;
4720
4729
  }
4721
- [href].focus.label-danger, [href].label-danger:focus, [type].focus.label-danger, [type].label-danger:focus, [tabindex].focus.label-danger, [tabindex].label-danger:focus {
4730
+ [href].focus.label-danger, [href].label-danger:focus-visible, .c-prefers-focus [href].label-danger:focus, [type].focus.label-danger, [type].label-danger:focus-visible, .c-prefers-focus [type].label-danger:focus, [tabindex].focus.label-danger, [tabindex].label-danger:focus-visible, .c-prefers-focus [tabindex].label-danger:focus {
4722
4731
  color: #bd2130;
4723
4732
  }
4724
4733
  .label-danger a:hover, .label-danger a.hover,
@@ -4729,9 +4738,10 @@ input[type=button].btn-block {
4729
4738
  .label-danger .close:hover {
4730
4739
  color: #bd2130;
4731
4740
  }
4732
- .label-danger .close:focus {
4741
+ .label-danger .close.focus, .label-danger .close:focus-visible, .c-prefers-focus .label-danger .close:focus {
4733
4742
  color: #bd2130;
4734
4743
  }
4744
+
4735
4745
  .label-dark {
4736
4746
  background-color: #fff;
4737
4747
  border-color: #343a40;
@@ -4741,7 +4751,7 @@ input[type=button].btn-block {
4741
4751
  border-color: #1d2124;
4742
4752
  color: #1d2124;
4743
4753
  }
4744
- [href].focus.label-dark, [href].label-dark:focus, [type].focus.label-dark, [type].label-dark:focus, [tabindex].focus.label-dark, [tabindex].label-dark:focus {
4754
+ [href].focus.label-dark, [href].label-dark:focus-visible, .c-prefers-focus [href].label-dark:focus, [type].focus.label-dark, [type].label-dark:focus-visible, .c-prefers-focus [type].label-dark:focus, [tabindex].focus.label-dark, [tabindex].label-dark:focus-visible, .c-prefers-focus [tabindex].label-dark:focus {
4745
4755
  color: #1d2124;
4746
4756
  }
4747
4757
  .label-dark a:hover, .label-dark a.hover,
@@ -4752,9 +4762,10 @@ input[type=button].btn-block {
4752
4762
  .label-dark .close:hover {
4753
4763
  color: #1d2124;
4754
4764
  }
4755
- .label-dark .close:focus {
4765
+ .label-dark .close.focus, .label-dark .close:focus-visible, .c-prefers-focus .label-dark .close:focus {
4756
4766
  color: #1d2124;
4757
4767
  }
4768
+
4758
4769
  .label-light {
4759
4770
  background-color: #343a40;
4760
4771
  border-color: #f8f9fa;
@@ -4764,7 +4775,7 @@ input[type=button].btn-block {
4764
4775
  border-color: #dae0e5;
4765
4776
  color: #dae0e5;
4766
4777
  }
4767
- [href].focus.label-light, [href].label-light:focus, [type].focus.label-light, [type].label-light:focus, [tabindex].focus.label-light, [tabindex].label-light:focus {
4778
+ [href].focus.label-light, [href].label-light:focus-visible, .c-prefers-focus [href].label-light:focus, [type].focus.label-light, [type].label-light:focus-visible, .c-prefers-focus [type].label-light:focus, [tabindex].focus.label-light, [tabindex].label-light:focus-visible, .c-prefers-focus [tabindex].label-light:focus {
4768
4779
  color: #dae0e5;
4769
4780
  }
4770
4781
  .label-light a:hover, .label-light a.hover,
@@ -4775,9 +4786,10 @@ input[type=button].btn-block {
4775
4786
  .label-light .close:hover {
4776
4787
  color: #dae0e5;
4777
4788
  }
4778
- .label-light .close:focus {
4789
+ .label-light .close.focus, .label-light .close:focus-visible, .c-prefers-focus .label-light .close:focus {
4779
4790
  color: #dae0e5;
4780
4791
  }
4792
+
4781
4793
  .label-inverse-primary {
4782
4794
  background-color: #007bff;
4783
4795
  border-color: #007bff;
@@ -6009,7 +6021,7 @@ input[type=button].btn-block {
6009
6021
  background-color: #f8f9fa;
6010
6022
  text-decoration: none;
6011
6023
  }
6012
- .card-interactive:focus, .card-interactive.focus {
6024
+ .card-interactive.focus, .card-interactive:focus-visible, .c-prefers-focus .card-interactive:focus {
6013
6025
  border-color: #80bdff;
6014
6026
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
6015
6027
  }
@@ -6051,7 +6063,7 @@ input[type=button].btn-block {
6051
6063
  cursor: pointer;
6052
6064
  }
6053
6065
 
6054
- .card-interactive-primary:focus, .card-interactive-primary.focus {
6066
+ .card-interactive-primary.focus, .card-interactive-primary:focus-visible, .c-prefers-focus .card-interactive-primary:focus {
6055
6067
  background-color: #f8f9fa;
6056
6068
  }
6057
6069
  .card-interactive-primary:active, .card-interactive-primary.active {
@@ -6282,7 +6294,7 @@ input[type=button].btn-block {
6282
6294
  color: #16181b;
6283
6295
  text-decoration: none;
6284
6296
  }
6285
- .dropdown-item:focus, .dropdown-item.focus {
6297
+ .dropdown-item.focus, .dropdown-item:focus-visible, .c-prefers-focus .dropdown-item:focus {
6286
6298
  background-color: #f8f9fa;
6287
6299
  color: #16181b;
6288
6300
  text-decoration: none;
@@ -6511,7 +6523,7 @@ input[type=button].btn-block {
6511
6523
  background-image: none;
6512
6524
  color: #16181b;
6513
6525
  }
6514
- .dropdown-menu-select.dropdown-menu .dropdown-item-scroll:focus, .dropdown-menu-select.dropdown-menu .dropdown-item-scroll.focus {
6526
+ .dropdown-menu-select.dropdown-menu .dropdown-item-scroll.focus, .dropdown-menu-select.dropdown-menu .dropdown-item-scroll:focus-visible, .c-prefers-focus .dropdown-menu-select.dropdown-menu .dropdown-item-scroll:focus {
6515
6527
  background-color: #f8f9fa;
6516
6528
  background-image: none;
6517
6529
  color: #16181b;
@@ -6760,7 +6772,7 @@ input[type=button].btn-block {
6760
6772
  color: inherit;
6761
6773
  text-decoration: inherit;
6762
6774
  }
6763
- .dropdown-item-indicator-text-start.focus, .dropdown-item-indicator-text-start:focus {
6775
+ .dropdown-item-indicator-text-start.focus, .dropdown-item-indicator-text-start:focus-visible, .c-prefers-focus .dropdown-item-indicator-text-start:focus {
6764
6776
  color: inherit;
6765
6777
  text-decoration: inherit;
6766
6778
  }
@@ -6815,7 +6827,7 @@ input[type=button].btn-block {
6815
6827
  color: inherit;
6816
6828
  text-decoration: inherit;
6817
6829
  }
6818
- .dropdown-item-indicator-text-end.focus, .dropdown-item-indicator-text-end:focus {
6830
+ .dropdown-item-indicator-text-end.focus, .dropdown-item-indicator-text-end:focus-visible, .c-prefers-focus .dropdown-item-indicator-text-end:focus {
6819
6831
  color: inherit;
6820
6832
  text-decoration: inherit;
6821
6833
  }
@@ -7291,7 +7303,7 @@ fieldset[disabled] label .form-control {
7291
7303
  color: #6c757d;
7292
7304
  opacity: 1;
7293
7305
  }
7294
- .form-control:focus, .form-control.focus {
7306
+ .form-control.focus, .form-control:focus-visible, .c-prefers-focus .form-control:focus {
7295
7307
  background-color: #fff;
7296
7308
  border-color: #80bdff;
7297
7309
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
@@ -7457,7 +7469,7 @@ div.form-control-sm {
7457
7469
  padding: 0;
7458
7470
  width: 50px;
7459
7471
  }
7460
- .form-control-inset:focus, .form-control-inset.focus {
7472
+ .form-control-inset.focus, .form-control-inset:focus-visible, .c-prefers-focus .form-control-inset:focus {
7461
7473
  outline: 0;
7462
7474
  }
7463
7475
  .form-control-inset:disabled, .form-control-inset.disabled {
@@ -7522,7 +7534,7 @@ select.form-control[size] {
7522
7534
  scrollbar-width: thin;
7523
7535
  color: #495057;
7524
7536
  }
7525
- select.form-control[size]:focus, select.form-control[size].focus {
7537
+ select.form-control[size].focus, select.form-control[size]:focus-visible, .c-prefers-focus select.form-control[size]:focus {
7526
7538
  background-image: none;
7527
7539
  }
7528
7540
  select.form-control[size] option {
@@ -7537,7 +7549,7 @@ select.form-control[multiple] {
7537
7549
  scrollbar-width: thin;
7538
7550
  color: #495057;
7539
7551
  }
7540
- select.form-control[multiple]:focus, select.form-control[multiple].focus {
7552
+ select.form-control[multiple].focus, select.form-control[multiple]:focus-visible, .c-prefers-focus select.form-control[multiple]:focus {
7541
7553
  background-image: none;
7542
7554
  }
7543
7555
  select.form-control[multiple] option {
@@ -7658,7 +7670,7 @@ textarea.form-control-plaintext,
7658
7670
  transition: none;
7659
7671
  }
7660
7672
 
7661
- .form-control-plaintext[readonly]:focus, .form-control-plaintext[readonly].focus {
7673
+ .form-control-plaintext[readonly].focus, .form-control-plaintext[readonly]:focus-visible, .c-prefers-focus .form-control-plaintext[readonly]:focus {
7662
7674
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
7663
7675
  }
7664
7676
  .form-control-lg {
@@ -7933,7 +7945,7 @@ textarea.form-control-lg,
7933
7945
  .c-link:hover, .c-link.hover {
7934
7946
  text-decoration: none;
7935
7947
  }
7936
- .c-link.focus, .c-link:focus {
7948
+ .c-link.focus, .c-link:focus-visible, .c-prefers-focus .c-link:focus {
7937
7949
  border-radius: 1px;
7938
7950
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
7939
7951
  outline: 0;
@@ -7944,7 +7956,7 @@ textarea.form-control-lg,
7944
7956
  .c-link.text-secondary:hover, .c-link.text-secondary.hover {
7945
7957
  color: #000 !important;
7946
7958
  }
7947
- .c-link.text-secondary.focus, .c-link.text-secondary:focus {
7959
+ .c-link.text-secondary.focus, .c-link.text-secondary:focus-visible, .c-prefers-focus .c-link.text-secondary:focus {
7948
7960
  color: #000 !important;
7949
7961
  }
7950
7962
  .c-link.text-tertiary {
@@ -8011,7 +8023,7 @@ button.link-outline {
8011
8023
  .link-outline:hover, .link-outline.hover {
8012
8024
  text-decoration: none;
8013
8025
  }
8014
- .link-outline.focus, .link-outline:focus {
8026
+ .link-outline.focus, .link-outline:focus-visible, .c-prefers-focus .link-outline:focus {
8015
8027
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8016
8028
  outline: 0;
8017
8029
  }
@@ -8169,7 +8181,7 @@ button.link-outline {
8169
8181
  background-color: #6c757d;
8170
8182
  color: #fff;
8171
8183
  }
8172
- .component-action.focus, .component-action:focus {
8184
+ .component-action.focus, .component-action:focus-visible, .c-prefers-focus .component-action:focus {
8173
8185
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8174
8186
  outline: 0;
8175
8187
  }
@@ -8427,10 +8439,10 @@ button.link-outline {
8427
8439
  visibility: visible;
8428
8440
  opacity: 1;
8429
8441
  }
8430
- .clay-range-input .form-control-range:focus, .clay-range-input .form-control-range.focus {
8442
+ .clay-range-input .form-control-range.focus, .clay-range-input .form-control-range:focus-visible, .c-prefers-focus .clay-range-input .form-control-range:focus {
8431
8443
  outline: 0;
8432
8444
  }
8433
- .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip, .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip {
8445
+ .clay-range-input .form-control-range.focus ~ .clay-range-progress .tooltip, .clay-range-input .form-control-range:focus-visible ~ .clay-range-progress .tooltip, .c-prefers-focus .clay-range-input .form-control-range:focus ~ .clay-range-progress .tooltip {
8434
8446
  visibility: visible;
8435
8447
  opacity: 1;
8436
8448
  }
@@ -8486,7 +8498,7 @@ button.link-outline {
8486
8498
  padding-top: 0.375rem;
8487
8499
  width: 100%;
8488
8500
  }
8489
- .clay-reorder .form-control-inset:focus, .clay-reorder .form-control-inset.focus {
8501
+ .clay-reorder .form-control-inset.focus, .clay-reorder .form-control-inset:focus-visible, .c-prefers-focus .clay-reorder .form-control-inset:focus {
8490
8502
  background-color: transparent;
8491
8503
  box-shadow: none;
8492
8504
  }
@@ -8549,11 +8561,11 @@ button.link-outline {
8549
8561
  background-color: transparent;
8550
8562
  color: #000;
8551
8563
  }
8552
- .clay-color-dropdown-menu .component-action:focus, .clay-color-dropdown-menu .component-action.focus {
8564
+ .clay-color-dropdown-menu .component-action.focus, .clay-color-dropdown-menu .component-action:focus-visible, .c-prefers-focus .clay-color-dropdown-menu .component-action:focus {
8553
8565
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8554
8566
  color: #000;
8555
8567
  }
8556
- .clay-color-dropdown-menu .component-action:active:focus {
8568
+ .clay-color-dropdown-menu .component-action:active:focus-visible, .c-prefers-focus .clay-color-dropdown-menu .component-action:active:focus {
8557
8569
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8558
8570
  }
8559
8571
  .clay-color-dropdown-menu .form-control {
@@ -8625,11 +8637,11 @@ button.link-outline {
8625
8637
  transition: none;
8626
8638
  }
8627
8639
 
8628
- .clay-color-pointer:focus, .clay-color-pointer.focus {
8640
+ .clay-color-pointer.focus, .clay-color-pointer:focus-visible, .c-prefers-focus .clay-color-pointer:focus {
8629
8641
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8630
8642
  outline: 0;
8631
8643
  }
8632
- .clay-color-pointer:active:focus {
8644
+ .clay-color-pointer:active:focus-visible, .c-prefers-focus .clay-color-pointer:active:focus {
8633
8645
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8634
8646
  }
8635
8647
  .clay-color-pointer .c-inner {
@@ -8892,7 +8904,7 @@ label.custom-control-label {
8892
8904
  width: 1rem;
8893
8905
  z-index: 1;
8894
8906
  }
8895
- .custom-control-input:focus ~ .custom-control-label::before {
8907
+ .custom-control-input:focus-visible ~ .custom-control-label::before, .c-prefers-focus .custom-control-input:focus ~ .custom-control-label::before {
8896
8908
  border-color: #80bdff;
8897
8909
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
8898
8910
  }
@@ -9337,7 +9349,7 @@ label.custom-control-label {
9337
9349
  .clay-time .form-control-inset::-moz-selection, .clay-time .form-control-inset::selection {
9338
9350
  background-color: transparent;
9339
9351
  }
9340
- .clay-time .form-control-inset:focus, .clay-time .form-control-inset.focus {
9352
+ .clay-time .form-control-inset.focus, .clay-time .form-control-inset:focus-visible, .c-prefers-focus .clay-time .form-control-inset:focus {
9341
9353
  background-color: #b3d8fd;
9342
9354
  }
9343
9355
  .clay-time .input-group-text {
@@ -9446,10 +9458,10 @@ label.custom-control-label {
9446
9458
  .date-picker-nav .nav-btn:hover {
9447
9459
  background-color: #e9ecef;
9448
9460
  }
9449
- .date-picker-nav .nav-btn:focus, .date-picker-nav .nav-btn.focus {
9461
+ .date-picker-nav .nav-btn.focus, .date-picker-nav .nav-btn:focus-visible, .c-prefers-focus .date-picker-nav .nav-btn:focus {
9450
9462
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
9451
9463
  }
9452
- .date-picker-nav .nav-btn:active:focus {
9464
+ .date-picker-nav .nav-btn:active:focus-visible, .c-prefers-focus .date-picker-nav .nav-btn:active:focus {
9453
9465
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
9454
9466
  }
9455
9467
  .date-picker-nav .nav-btn:disabled, .date-picker-nav .nav-btn.disabled {
@@ -9600,7 +9612,7 @@ label.custom-control-label {
9600
9612
  .date-picker-date:hover {
9601
9613
  background-color: #e9ecef;
9602
9614
  }
9603
- .date-picker-date:focus, .date-picker-date.focus {
9615
+ .date-picker-date.focus, .date-picker-date:focus-visible, .c-prefers-focus .date-picker-date:focus {
9604
9616
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
9605
9617
  outline: 0;
9606
9618
  }
@@ -9608,7 +9620,7 @@ label.custom-control-label {
9608
9620
  background-color: #007bff;
9609
9621
  color: #fff;
9610
9622
  }
9611
- .date-picker-date:active:focus {
9623
+ .date-picker-date:active:focus-visible, .c-prefers-focus .date-picker-date:active:focus {
9612
9624
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
9613
9625
  }
9614
9626
  .date-picker-date.active {
@@ -9627,7 +9639,7 @@ label.custom-control-label {
9627
9639
  .previous-month-date {
9628
9640
  opacity: 0.65;
9629
9641
  }
9630
- .previous-month-date:focus, .previous-month-date.focus {
9642
+ .previous-month-date.focus, .previous-month-date:focus-visible, .c-prefers-focus .previous-month-date:focus {
9631
9643
  opacity: 1;
9632
9644
  }
9633
9645
  .previous-month-date:active {
@@ -9645,7 +9657,7 @@ label.custom-control-label {
9645
9657
  .next-month-date {
9646
9658
  opacity: 0.65;
9647
9659
  }
9648
- .next-month-date:focus, .next-month-date.focus {
9660
+ .next-month-date.focus, .next-month-date:focus-visible, .c-prefers-focus .next-month-date:focus {
9649
9661
  opacity: 1;
9650
9662
  }
9651
9663
  .next-month-date:active {
@@ -9914,7 +9926,7 @@ label.custom-control-label {
9914
9926
  .has-error .form-control {
9915
9927
  border-color: #dc3545;
9916
9928
  }
9917
- .has-error .form-control:focus, .has-error .form-control.focus {
9929
+ .has-error .form-control.focus, .has-error .form-control:focus-visible, .c-prefers-focus .has-error .form-control:focus {
9918
9930
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
9919
9931
  }
9920
9932
  .has-error .form-feedback-item {
@@ -9958,7 +9970,7 @@ label.custom-control-label {
9958
9970
  .has-warning .form-control {
9959
9971
  border-color: #ffc107;
9960
9972
  }
9961
- .has-warning .form-control:focus, .has-warning .form-control.focus {
9973
+ .has-warning .form-control.focus, .has-warning .form-control:focus-visible, .c-prefers-focus .has-warning .form-control:focus {
9962
9974
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
9963
9975
  }
9964
9976
  .has-warning .form-feedback-item {
@@ -10002,7 +10014,7 @@ label.custom-control-label {
10002
10014
  .has-success .form-control {
10003
10015
  border-color: #28a745;
10004
10016
  }
10005
- .has-success .form-control:focus, .has-success .form-control.focus {
10017
+ .has-success .form-control.focus, .has-success .form-control:focus-visible, .c-prefers-focus .has-success .form-control:focus {
10006
10018
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
10007
10019
  }
10008
10020
  .has-success .form-feedback-item {
@@ -10475,13 +10487,14 @@ label.custom-control-label {
10475
10487
  order: 5;
10476
10488
  width: 1%;
10477
10489
  }
10478
- .input-group-inset:focus, .input-group-inset.focus {
10490
+ .input-group-inset.focus, .input-group-inset:focus-visible, .c-prefers-focus .input-group-inset:focus {
10479
10491
  box-shadow: none;
10480
10492
  }
10481
- .input-group-inset:focus ~ .input-group-inset-item, .input-group-inset.focus ~ .input-group-inset-item {
10493
+ .input-group-inset.focus ~ .input-group-inset-item, .input-group-inset:focus-visible ~ .input-group-inset-item, .c-prefers-focus .input-group-inset:focus ~ .input-group-inset-item {
10482
10494
  background-color: #fff;
10483
10495
  border-color: #80bdff;
10484
10496
  }
10497
+
10485
10498
  .input-group-inset:disabled ~ .input-group-inset-item, .input-group-inset.disabled ~ .input-group-inset-item {
10486
10499
  background-color: #e9ecef;
10487
10500
  }
@@ -11369,6 +11382,7 @@ label.custom-control-label {
11369
11382
  border: 0.0625rem solid rgba(0, 0, 0, 0.2);
11370
11383
  display: flex;
11371
11384
  flex-direction: column;
11385
+ max-height: calc(100vh - 1.75rem * 2);
11372
11386
  outline: 0;
11373
11387
  overflow: hidden;
11374
11388
  pointer-events: auto;
@@ -11396,11 +11410,14 @@ label.custom-control-label {
11396
11410
  flex-grow: 1;
11397
11411
  flex-shrink: 1;
11398
11412
  margin-top: -0.0625rem;
11413
+ overflow: auto;
11414
+ overflow-wrap: break-word;
11415
+ word-wrap: break-word;
11399
11416
  padding: 1rem;
11400
11417
  position: relative;
11401
11418
  }
11402
11419
  .modal-body.inline-scroller {
11403
- max-height: 320px;
11420
+ max-height: none;
11404
11421
  -webkit-overflow-scrolling: touch;
11405
11422
  overflow: auto;
11406
11423
  padding: 1rem;
@@ -11611,6 +11628,9 @@ label.custom-control-label {
11611
11628
  margin-left: calc(-1140px / 2);
11612
11629
  }
11613
11630
  }
11631
+ .modal-height-full .modal-body {
11632
+ overflow: auto;
11633
+ }
11614
11634
  .modal-height-full .modal-content {
11615
11635
  position: absolute;
11616
11636
  bottom: 0.5rem;
@@ -12003,7 +12023,7 @@ label.custom-control-label {
12003
12023
  .nav-link:hover, .nav-link.hover {
12004
12024
  text-decoration: none;
12005
12025
  }
12006
- .nav-link.focus, .nav-link:focus {
12026
+ .nav-link.focus, .nav-link:focus-visible, .c-prefers-focus .nav-link:focus {
12007
12027
  text-decoration: none;
12008
12028
  z-index: 1;
12009
12029
  }
@@ -12042,7 +12062,7 @@ label.custom-control-label {
12042
12062
  text-align: center;
12043
12063
  width: auto;
12044
12064
  }
12045
- .nav-btn:focus, .nav-btn.focus {
12065
+ .nav-btn.focus, .nav-btn:focus-visible, .c-prefers-focus .nav-btn:focus {
12046
12066
  z-index: 1;
12047
12067
  }
12048
12068
  .nav-btn:disabled, .nav-btn.disabled {
@@ -12303,7 +12323,7 @@ label.custom-control-label {
12303
12323
  .nav-tabs .nav-link:hover, .nav-tabs .nav-link.hover {
12304
12324
  border-color: #e9ecef #e9ecef #dee2e6;
12305
12325
  }
12306
- .nav-tabs .nav-link.focus, .nav-tabs .nav-link:focus {
12326
+ .nav-tabs .nav-link.focus, .nav-tabs .nav-link:focus-visible, .c-prefers-focus .nav-tabs .nav-link:focus {
12307
12327
  border-color: #e9ecef #e9ecef #dee2e6;
12308
12328
  }
12309
12329
  .nav-tabs .nav-link:active {
@@ -16467,7 +16487,7 @@ label.custom-control-label {
16467
16487
  text-decoration: none;
16468
16488
  z-index: 2;
16469
16489
  }
16470
- .page-link.focus, .page-link:focus {
16490
+ .page-link.focus, .page-link:focus-visible, .c-prefers-focus .page-link:focus {
16471
16491
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
16472
16492
  outline: 0;
16473
16493
  z-index: 4;
@@ -16574,9 +16594,10 @@ label.custom-control-label {
16574
16594
  border-color: #dee2e6;
16575
16595
  color: #0056b3;
16576
16596
  }
16577
- .pagination-items-per-page > a.focus, .pagination-items-per-page > a:focus,
16597
+ .pagination-items-per-page > a.focus, .pagination-items-per-page > a:focus-visible, .c-prefers-focus .pagination-items-per-page > a:focus,
16578
16598
  .pagination-items-per-page > button.focus,
16579
- .pagination-items-per-page > button:focus {
16599
+ .pagination-items-per-page > button:focus-visible,
16600
+ .c-prefers-focus .pagination-items-per-page > button:focus {
16580
16601
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
16581
16602
  outline: 0;
16582
16603
  }
@@ -16803,7 +16824,7 @@ label.custom-control-label {
16803
16824
  .panel-header-link:hover, .panel-header-link.hover {
16804
16825
  color: inherit;
16805
16826
  }
16806
- .panel-header-link.focus, .panel-header-link:focus {
16827
+ .panel-header-link.focus, .panel-header-link:focus-visible, .c-prefers-focus .panel-header-link:focus {
16807
16828
  z-index: 1;
16808
16829
  }
16809
16830
  .panel-header-link.panel-header.collapsed {
@@ -18105,7 +18126,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
18105
18126
  .sidebar-dark .nav-nested .nav-link:hover, .sidebar-dark .nav-nested .nav-link.hover {
18106
18127
  color: #fff;
18107
18128
  }
18108
- .sidebar-dark .nav-nested .nav-link.focus, .sidebar-dark .nav-nested .nav-link:focus {
18129
+ .sidebar-dark .nav-nested .nav-link.focus, .sidebar-dark .nav-nested .nav-link:focus-visible, .c-prefers-focus .sidebar-dark .nav-nested .nav-link:focus {
18109
18130
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
18110
18131
  outline: 0;
18111
18132
  }
@@ -18167,7 +18188,7 @@ a.sheet-subtitle:hover, a.sheet-subtitle.hover {
18167
18188
  .sidebar-dark-l2 .nav-nested .nav-link:hover, .sidebar-dark-l2 .nav-nested .nav-link.hover {
18168
18189
  color: #fff;
18169
18190
  }
18170
- .sidebar-dark-l2 .nav-nested .nav-link.focus, .sidebar-dark-l2 .nav-nested .nav-link:focus {
18191
+ .sidebar-dark-l2 .nav-nested .nav-link.focus, .sidebar-dark-l2 .nav-nested .nav-link:focus-visible, .c-prefers-focus .sidebar-dark-l2 .nav-nested .nav-link:focus {
18171
18192
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
18172
18193
  outline: 0;
18173
18194
  }
@@ -19603,9 +19624,10 @@ caption {
19603
19624
  margin-top: -0.625rem;
19604
19625
  width: 3rem;
19605
19626
  }
19606
- .subnav-tbar-primary .component-label .close:focus {
19627
+ .subnav-tbar-primary .component-label .close.focus, .subnav-tbar-primary .component-label .close:focus-visible, .c-prefers-focus .subnav-tbar-primary .component-label .close:focus {
19607
19628
  color: inherit;
19608
19629
  }
19630
+
19609
19631
  .subnav-tbar-primary .component-label .close:disabled, .subnav-tbar-primary .component-label .close.disabled {
19610
19632
  color: #6c757d;
19611
19633
  opacity: 0.65;
@@ -19699,10 +19721,10 @@ caption {
19699
19721
  position: relative;
19700
19722
  width: 2.5rem;
19701
19723
  }
19702
- .tbar-stacked .tbar-btn-monospaced:focus, .tbar-stacked .tbar-btn-monospaced.focus {
19724
+ .tbar-stacked .tbar-btn-monospaced.focus, .tbar-stacked .tbar-btn-monospaced:focus-visible, .c-prefers-focus .tbar-stacked .tbar-btn-monospaced:focus {
19703
19725
  box-shadow: inset 0 0 0 0.125rem #47a0ff, inset 0 0 0 0.25rem #fff;
19704
19726
  }
19705
- .tbar-stacked .tbar-btn-monospaced:active:focus {
19727
+ .tbar-stacked .tbar-btn-monospaced:active:focus-visible, .c-prefers-focus .tbar-stacked .tbar-btn-monospaced:active:focus {
19706
19728
  box-shadow: inset 0 0 0 0.125rem #47a0ff, inset 0 0 0 0.25rem #fff;
19707
19729
  }
19708
19730
  .tbar-stacked .tbar-btn-monospaced .c-inner {
@@ -19728,7 +19750,7 @@ caption {
19728
19750
  .tbar-light .tbar-btn-monospaced:hover {
19729
19751
  color: #343a40;
19730
19752
  }
19731
- .tbar-light .tbar-btn-monospaced:focus, .tbar-light .tbar-btn-monospaced.focus {
19753
+ .tbar-light .tbar-btn-monospaced.focus, .tbar-light .tbar-btn-monospaced:focus-visible, .c-prefers-focus .tbar-light .tbar-btn-monospaced:focus {
19732
19754
  color: #343a40;
19733
19755
  }
19734
19756
  .tbar-light .tbar-btn-monospaced:active {
@@ -19764,7 +19786,7 @@ caption {
19764
19786
  .tbar-dark-l2 .tbar-btn-monospaced:hover {
19765
19787
  color: #fff;
19766
19788
  }
19767
- .tbar-dark-l2 .tbar-btn-monospaced:focus, .tbar-dark-l2 .tbar-btn-monospaced.focus {
19789
+ .tbar-dark-l2 .tbar-btn-monospaced.focus, .tbar-dark-l2 .tbar-btn-monospaced:focus-visible, .c-prefers-focus .tbar-dark-l2 .tbar-btn-monospaced:focus {
19768
19790
  color: #fff;
19769
19791
  }
19770
19792
  .tbar-dark-l2 .tbar-btn-monospaced:active {
@@ -19799,7 +19821,7 @@ caption {
19799
19821
  .tbar-dark-d1 .tbar-btn-monospaced:hover {
19800
19822
  color: #fff;
19801
19823
  }
19802
- .tbar-dark-d1 .tbar-btn-monospaced:focus, .tbar-dark-d1 .tbar-btn-monospaced.focus {
19824
+ .tbar-dark-d1 .tbar-btn-monospaced.focus, .tbar-dark-d1 .tbar-btn-monospaced:focus-visible, .c-prefers-focus .tbar-dark-d1 .tbar-btn-monospaced:focus {
19803
19825
  color: #fff;
19804
19826
  }
19805
19827
  .tbar-dark-d1 .tbar-btn-monospaced:active {
@@ -20248,7 +20270,7 @@ caption {
20248
20270
  .toggle-switch-check ~ .toggle-switch-bar .button-icon-on {
20249
20271
  opacity: 0;
20250
20272
  }
20251
- .toggle-switch-check:focus ~ .toggle-switch-bar::before {
20273
+ .toggle-switch-check:focus-visible ~ .toggle-switch-bar::before, .c-prefers-focus .toggle-switch-check:focus ~ .toggle-switch-bar::before {
20252
20274
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
20253
20275
  }
20254
20276
  .toggle-switch-check[disabled] ~ .toggle-switch-bar, .toggle-switch-check:disabled ~ .toggle-switch-bar {
@@ -20695,10 +20717,10 @@ caption {
20695
20717
  padding: 0;
20696
20718
  width: 24px;
20697
20719
  }
20698
- .treeview .btn-monospaced:focus, .treeview .btn-monospaced.focus {
20720
+ .treeview .btn-monospaced.focus, .treeview .btn-monospaced:focus-visible, .c-prefers-focus .treeview .btn-monospaced:focus {
20699
20721
  box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
20700
20722
  }
20701
- .treeview .btn-monospaced:active:focus {
20723
+ .treeview .btn-monospaced:active:focus-visible, .c-prefers-focus .treeview .btn-monospaced:active:focus {
20702
20724
  box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
20703
20725
  }
20704
20726
  .treeview .custom-control {
@@ -20721,7 +20743,7 @@ caption {
20721
20743
  background-color: transparent;
20722
20744
  color: #6c757d;
20723
20745
  }
20724
- .treeview .component-action:focus, .treeview .component-action.focus {
20746
+ .treeview .component-action.focus, .treeview .component-action:focus-visible, .c-prefers-focus .treeview .component-action:focus {
20725
20747
  color: #6c757d;
20726
20748
  }
20727
20749
  .treeview .component-action:active {
@@ -20852,7 +20874,7 @@ caption {
20852
20874
  .treeview-link:hover, .treeview-link.hover {
20853
20875
  text-decoration: none;
20854
20876
  }
20855
- .treeview-link.focus, .treeview-link:focus {
20877
+ .treeview-link.focus, .treeview-link:focus-visible, .c-prefers-focus .treeview-link:focus {
20856
20878
  box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
20857
20879
  outline: 0;
20858
20880
  }
@@ -21011,11 +21033,12 @@ caption {
21011
21033
  opacity: 0.75;
21012
21034
  text-decoration: none;
21013
21035
  }
21014
- .close:focus {
21036
+ .close.focus, .close:focus-visible, .c-prefers-focus .close:focus {
21015
21037
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
21016
21038
  outline: 0;
21017
21039
  opacity: 0.75;
21018
21040
  }
21041
+
21019
21042
  .close:disabled, .close.disabled {
21020
21043
  box-shadow: none;
21021
21044
  cursor: not-allowed;