@bi-digital/css 0.7.0 → 0.8.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.
@@ -1671,6 +1671,94 @@ body:has(.bi-dialog:modal) {
1671
1671
  }
1672
1672
  }
1673
1673
 
1674
+ .bi-popover {
1675
+ --bic-popover-arrow-size: var(--bi-scale-3x);
1676
+ --bic-popover-background: var(--bi-basic-white);
1677
+ --bic-popover-border-width: var(--bi-stroke-thin);
1678
+ --bic-popover-border-style: solid;
1679
+ --bic-popover-border-color: var(--bi-neutral-15);
1680
+ --bic-popover-color: var(--bi-neutral-90);
1681
+ --bic-popover-border-radius: var(--bi-radius-medium);
1682
+ --bic-popover-max-width: 300px;
1683
+ --bic-popover-padding: var(--bi-scale-1x);
1684
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1685
+ 0px 2px 2px -1px #26333f0a;
1686
+ }
1687
+
1688
+ .bi-popover[data-dark="true"] {
1689
+ --bic-popover-background: var(--bi-neutral-95);
1690
+ --bic-popover-border-color: var(--bi-neutral-70);
1691
+ --bic-popover-color: var(--bi-neutral-5);
1692
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1693
+ 0px 2px 2px -1px #26333f0a;
1694
+ }
1695
+
1696
+ .bi-popover {
1697
+ background: var(--bic-popover-background);
1698
+ border-radius: var(--bic-popover-border-radius);
1699
+ border-width: var(--bic-popover-border-width);
1700
+ border-style: var(--bic-popover-border-style);
1701
+ border-color: var(--bic-popover-border-color);
1702
+ box-shadow: var(--bic-popover-box-shadow);
1703
+ box-sizing: border-box;
1704
+ color: var(--bic-popover-color);
1705
+ max-width: var(--bic-popover-max-width);
1706
+ padding: var(--bic-popover-padding);
1707
+ z-index: 100000;
1708
+ display: none;
1709
+ position: fixed;
1710
+ inset: 0 auto auto 0;
1711
+ overflow: visible;
1712
+ }
1713
+
1714
+ .bi-popover[aria-hidden="false"] {
1715
+ display: block;
1716
+ }
1717
+
1718
+ .bi-popover[data-arrow="true"]:before {
1719
+ background: var(--bic-popover-background);
1720
+ border: inherit;
1721
+ box-sizing: border-box;
1722
+ content: "";
1723
+ height: var(--bic-popover-arrow-size);
1724
+ left: var(--bic-popover-arrow-x);
1725
+ top: var(--bic-popover-arrow-y);
1726
+ width: var(--bic-popover-arrow-size);
1727
+ border-top-color: #0000;
1728
+ border-left-color: #0000;
1729
+ position: absolute;
1730
+ translate: -50% -50%;
1731
+ }
1732
+
1733
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
1734
+ rotate: 45deg;
1735
+ }
1736
+
1737
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
1738
+ rotate: -45deg;
1739
+ }
1740
+
1741
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
1742
+ rotate: 135deg;
1743
+ }
1744
+
1745
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
1746
+ rotate: -135deg;
1747
+ }
1748
+
1749
+ [data-popover="inline"] {
1750
+ all: unset;
1751
+ cursor: pointer;
1752
+ text-underline-offset: .27em;
1753
+ font-size: inherit;
1754
+ -webkit-text-decoration: underline dotted;
1755
+ text-decoration: underline dotted;
1756
+ }
1757
+
1758
+ [data-popover="inline"]:not([hidden]) {
1759
+ display: inline;
1760
+ }
1761
+
1674
1762
  .bi-dropdown {
1675
1763
  --bic-dropdown-padding: var(--bi-scale-1x);
1676
1764
  --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
@@ -1681,6 +1769,7 @@ body:has(.bi-dialog:modal) {
1681
1769
  --bic-dropdown-border-color: var(--bi-neutral-15);
1682
1770
  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
1683
1771
  0px 2px 2px -1px #26333f0a;
1772
+ --bic-dropdown-min-width: var(--bi-scale-64x);
1684
1773
  }
1685
1774
 
1686
1775
  .bi-dropdown[data-dark="true"] {
@@ -1699,33 +1788,270 @@ body:has(.bi-dialog:modal) {
1699
1788
  border-color: var(--bic-dropdown-border-color);
1700
1789
  box-shadow: var(--bic-dropdown-box-shadow);
1701
1790
  box-sizing: border-box;
1702
- min-width: var(--bi-scale-64x);
1791
+ min-width: max(var(--bic-dropdown-min-width), var(--bic-popover-trigger-width, 0px));
1703
1792
  padding: var(--bic-dropdown-padding);
1704
1793
  list-style: none;
1705
1794
  }
1706
1795
 
1707
- .bi-dropdown ul {
1708
- gap: var(--bi-scale-1x);
1709
- flex-direction: column;
1710
- margin: 0;
1711
- padding: 0;
1712
- list-style: none;
1713
- display: flex;
1796
+ .bi-dropdown ul {
1797
+ gap: var(--bi-scale-1x);
1798
+ flex-direction: column;
1799
+ margin: 0;
1800
+ padding: 0;
1801
+ list-style: none;
1802
+ display: flex;
1803
+ }
1804
+
1805
+ .bi-dropdown :is(a, button, [role="button"]) {
1806
+ padding: var(--bic-dropdown-item-padding);
1807
+ min-height: var(--bic-dropdown-item-size);
1808
+ justify-content: start;
1809
+ width: 100%;
1810
+ }
1811
+
1812
+ .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1813
+ margin-left: auto;
1814
+ }
1815
+
1816
+ .bi-button[aria-expanded="true"] {
1817
+ box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
1818
+ }
1819
+
1820
+ :where(.bi-input) {
1821
+ margin: 0;
1822
+ }
1823
+
1824
+ .bi-input {
1825
+ --bic-input-border-color-invalid: var(--bi-alert-50);
1826
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
1827
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
1828
+ --bic-input-caret-color: var(--bi-primary-50);
1829
+ --bic-input-font-size: 1rem;
1830
+ --bic-input-padding: var(--bi-scale-3x);
1831
+ --bic-input-size: var(--bi-scale-11x);
1832
+ --bic-input-toggle-background: var(--bi-primary-50);
1833
+ --bic-input-toggle-color: var(--bi-basic-white);
1834
+ --bic-input-toggle-size: 1.125rem;
1835
+ --bic-input-background: var(--bi-basic-white);
1836
+ --bic-input-background-readonly: var(--bi-neutral-10);
1837
+ --bic-input-border-color: var(--bi-neutral-50);
1838
+ --bic-input-border-color-hover: var(--bi-neutral-50);
1839
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
1840
+ --bic-input-color-readonly: var(--bi-neutral-95);
1841
+ --bic-input-color: var(--bi-neutral-95);
1842
+ --bic-input-disabled-color: var(--bi-neutral-50);
1843
+ --bic-input-placeholder-color: var(--bi-neutral-60);
1844
+ --bic-input-focus-outline-color: var(--bi-primary-50);
1845
+ --bic-input-focus-shadow-color: var(--bi-basic-white);
1846
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1847
+ }
1848
+
1849
+ .bi-input[data-dark="true"] {
1850
+ --bic-input-background: var(--bi-neutral-95);
1851
+ --bic-input-background-readonly: var(--bi-neutral-50);
1852
+ --bic-input-border-color-hover: var(--bi-neutral-25);
1853
+ --bic-input-color-readonly: var(--bi-basic-white);
1854
+ --bic-input-color: var(--bi-basic-white);
1855
+ --bic-input-disabled-color: var(--bi-neutral-40);
1856
+ --bic-input-placeholder-color: var(--bi-neutral-30);
1857
+ --bic-input-focus-outline-color: var(--bi-primary-30);
1858
+ --bic-input-focus-shadow-color: var(--bi-neutral-95);
1859
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
1860
+ }
1861
+
1862
+ .bi-input {
1863
+ appearance: none;
1864
+ background: var(--bic-input-background);
1865
+ border-radius: var(--bi-radius-medium);
1866
+ box-shadow: var(--bic-input-box-shadow);
1867
+ box-sizing: border-box;
1868
+ color: var(--bic-input-color);
1869
+ font-family: inherit;
1870
+ font-size: var(--bic-input-font-size);
1871
+ height: var(--bic-input-size);
1872
+ min-width: 0;
1873
+ max-width: 100%;
1874
+ padding: var(--bic-input-padding);
1875
+ vertical-align: middle;
1876
+ caret-color: var(--bic-input-caret-color);
1877
+ border: none;
1878
+ line-height: 1;
1879
+ position: relative;
1880
+ }
1881
+
1882
+ .bi-input[data-size="large"] {
1883
+ --bic-input-size: var(--bi-scale-14x);
1884
+ --bic-input-font-size: 1.25rem;
1885
+ }
1886
+
1887
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
1888
+ box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
1889
+ }
1890
+
1891
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
1892
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
1893
+ }
1894
+
1895
+ .bi-input:focus-visible {
1896
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1897
+ outline-offset: 0;
1898
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
1899
+ 0px 0px 10px 0px #0000000d);
1900
+ }
1901
+
1902
+ .bi-input:focus-visible * {
1903
+ --_bi--focus: ;
1904
+ }
1905
+
1906
+ .bi-input::placeholder {
1907
+ color: var(--bic-input-placeholder-color);
1908
+ }
1909
+
1910
+ .bi-input:not([size], [cols]) {
1911
+ width: 100%;
1912
+ }
1913
+
1914
+ .bi-input:disabled, .bi-input[aria-disabled="true"] {
1915
+ cursor: not-allowed;
1916
+ }
1917
+
1918
+ .bi-input[aria-invalid="true"] {
1919
+ --bic-input-border-color: var(--bic-input-border-color-invalid);
1920
+ }
1921
+
1922
+ .bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
1923
+ background: var(--bic-input-background-readonly);
1924
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
1925
+ color: var(--bic-input-color-readonly);
1926
+ }
1927
+
1928
+ .bi-input:is(textarea) {
1929
+ height: auto;
1930
+ min-height: calc(var(--bic-input-size) * 2);
1931
+ resize: vertical;
1932
+ }
1933
+
1934
+ .bi-input:is(textarea):not([rows]) {
1935
+ field-sizing: content;
1936
+ }
1937
+
1938
+ .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
1939
+ cursor: pointer;
1940
+ }
1941
+
1942
+ .bi-input:is(select) {
1943
+ background-image: var(--bic-input-select-chevron);
1944
+ background-position: calc(100% - .5em);
1945
+ background-repeat: no-repeat;
1946
+ background-size: 1.5em;
1947
+ }
1948
+
1949
+ .bi-input[type="checkbox"], .bi-input[type="radio"] {
1950
+ padding: var(--bi-scale-0-50x);
1951
+ line-height: inherit;
1952
+ height: var(--bic-input-toggle-size);
1953
+ width: var(--bic-input-toggle-size);
1954
+ box-shadow: none;
1955
+ border-width: var(--bi-stroke-medium);
1956
+ border-style: solid;
1957
+ border-color: var(--bic-input-border-color);
1958
+ background: none;
1959
+ flex-shrink: 0;
1960
+ }
1961
+
1962
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
1963
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
1964
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
1965
+ outline-offset: var(--_bi--focus, 3px);
1966
+ }
1967
+
1968
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
1969
+ --_bi--focus: ;
1970
+ }
1971
+
1972
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
1973
+ cursor: pointer;
1974
+ }
1975
+
1976
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
1977
+ border-radius: var(--bi-radius-full);
1978
+ }
1979
+
1980
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
1981
+ content: "";
1982
+ background-color: var(--bic-input-toggle-background);
1983
+ border-radius: 100%;
1984
+ width: 0;
1985
+ height: 0;
1986
+ transition: width .1s ease-in-out, height .1s ease-in-out;
1987
+ display: block;
1988
+ position: absolute;
1989
+ top: 50%;
1990
+ left: 50%;
1991
+ transform: translate(-50%, -50%);
1992
+ }
1993
+
1994
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
1995
+ --bic-input-border-color: var(--bic-input-toggle-background);
1996
+ }
1997
+
1998
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
1999
+ width: 12px;
2000
+ height: 12px;
2001
+ }
2002
+
2003
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
2004
+ border-radius: var(--bi-radius-small);
2005
+ place-content: center;
2006
+ display: grid;
2007
+ }
2008
+
2009
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
2010
+ content: "";
2011
+ width: .7em;
2012
+ height: .7em;
2013
+ box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2014
+ transform-origin: center;
2015
+ clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2016
+ transition: transform .2s ease-in-out;
2017
+ transform: scale(0);
2018
+ }
2019
+
2020
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
2021
+ background: var(--bic-input-toggle-background);
2022
+ --bic-input-border-color: var(--bic-input-toggle-background);
2023
+ }
2024
+
2025
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
2026
+ transform: scale(1);
1714
2027
  }
1715
2028
 
1716
- .bi-dropdown :is(a, button, [role="button"]) {
1717
- padding: var(--bic-dropdown-item-padding);
1718
- min-height: var(--bic-dropdown-item-size);
1719
- justify-content: start;
1720
- width: 100%;
2029
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
2030
+ clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
1721
2031
  }
1722
2032
 
1723
- .bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
1724
- margin-left: auto;
2033
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2034
+ --_bic-input-circle-position-x: var(--bi-scale-0-50x);
2035
+ background: var(--bi-neutral-50);
1725
2036
  }
1726
2037
 
1727
- .bi-button[aria-expanded="true"] {
1728
- box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
2038
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
2039
+ --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
2040
+ background: var(--bic-input-toggle-background);
2041
+ --bic-input-border-color: var(--bic-input-toggle-background);
2042
+ }
2043
+
2044
+ :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2045
+ background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
2046
+ background-origin: content-box;
2047
+ background-position: var(--_bic-input-circle-position-x);
2048
+ background-repeat: no-repeat;
2049
+ background-size: calc(var(--bic-input-toggle-size)) 100%;
2050
+ border-radius: var(--bi-radius-full);
2051
+ width: var(--bi-scale-11x);
2052
+ height: var(--bi-scale-6x);
2053
+ padding-inline: 0;
2054
+ transition: background-position .2s;
1729
2055
  }
1730
2056
 
1731
2057
  .bi-field {
@@ -2198,359 +2524,122 @@ body:has(.bi-dialog:modal) {
2198
2524
  }
2199
2525
 
2200
2526
  .bi-footer .bi-footer--accreditations {
2201
- justify-content: center;
2202
- align-items: center;
2203
- gap: var(--bi-scale-12x);
2204
- flex-wrap: wrap;
2205
- min-height: 58px;
2206
- display: flex;
2207
- }
2208
-
2209
- @media (width < 600px) {
2210
- .bi-footer .bi-footer--accreditations {
2211
- gap: var(--bi-scale-2x) var(--bi-scale-1x);
2212
- }
2213
- }
2214
-
2215
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
2216
- background-position: center;
2217
- background-repeat: no-repeat;
2218
- background-size: contain;
2219
- height: 58px;
2220
- display: block;
2221
- }
2222
-
2223
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2224
- background-image: url("./assets/accreditations/aacsb.svg");
2225
- width: 127px;
2226
- }
2227
-
2228
- .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2229
- background-image: url("./assets/accreditations/aacsb-neg.svg");
2230
- }
2231
-
2232
- .bi-footer .bi-footer--accreditations .bi-footer--amba {
2233
- background-image: url("./assets/accreditations/amba.svg");
2234
- width: 122px;
2235
- }
2236
-
2237
- .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2238
- background-image: url("./assets/accreditations/amba-neg.svg");
2239
- }
2240
-
2241
- .bi-footer .bi-footer--accreditations .bi-footer--equis {
2242
- background-image: url("./assets/accreditations/equis.svg");
2243
- width: 104px;
2244
- }
2245
-
2246
- .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2247
- background-image: url("./assets/accreditations/equis-neg.svg");
2248
- }
2249
-
2250
- .bi-footer .bi-footer--socials {
2251
- justify-content: center;
2252
- align-items: center;
2253
- gap: var(--bi-scale-8x);
2254
- flex-wrap: wrap;
2255
- display: flex;
2256
- }
2257
-
2258
- @media (width < 600px) {
2259
- .bi-footer .bi-footer--socials {
2260
- gap: var(--bi-scale-2x);
2261
- }
2262
- }
2263
-
2264
- .bi-footer .bi-footer--copyright {
2265
- text-align: center;
2266
- margin: 0;
2267
- font-family: museo-slab, serif;
2268
- font-size: 1rem;
2269
- font-weight: 500;
2270
- line-height: 1.5;
2271
- }
2272
-
2273
- svg {
2274
- --bic-icon-size: inherit;
2275
- font-size: var(--bic-icon-size);
2276
- display: inline-block;
2277
- }
2278
-
2279
- svg[data-size="2xl"] {
2280
- --bic-icon-size: var(--bi-icon-2xl) !important;
2281
- }
2282
-
2283
- svg[data-size="xl"] {
2284
- --bic-icon-size: var(--bi-icon-xl) !important;
2285
- }
2286
-
2287
- svg[data-size="large"] {
2288
- --bic-icon-size: var(--bi-icon-large) !important;
2289
- }
2290
-
2291
- svg[data-size="medium"] {
2292
- --bic-icon-size: var(--bi-icon-medium) !important;
2293
- }
2294
-
2295
- svg[data-size="small"] {
2296
- --bic-icon-size: var(--bi-icon-small) !important;
2297
- }
2298
-
2299
- svg[data-color="inherit"] {
2300
- color: inherit;
2301
- }
2302
-
2303
- svg[data-color="primary"] {
2304
- color: #01417b;
2305
- }
2306
-
2307
- svg[data-color="gray"] {
2308
- color: #1c1b1b;
2309
- }
2310
-
2311
- svg[data-color="black"] {
2312
- color: var(--bi-basic-key);
2313
- }
2314
-
2315
- svg[data-color="white"] {
2316
- color: var(--bi-basic-white);
2317
- }
2318
-
2319
- :where(.bi-input) {
2320
- margin: 0;
2321
- }
2322
-
2323
- .bi-input {
2324
- --bic-input-border-color-invalid: var(--bi-alert-50);
2325
- --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2326
- --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2327
- --bic-input-caret-color: var(--bi-primary-50);
2328
- --bic-input-font-size: 1rem;
2329
- --bic-input-padding: var(--bi-scale-3x);
2330
- --bic-input-size: var(--bi-scale-11x);
2331
- --bic-input-toggle-background: var(--bi-primary-50);
2332
- --bic-input-toggle-color: var(--bi-basic-white);
2333
- --bic-input-toggle-size: 1.125rem;
2334
- --bic-input-background: var(--bi-basic-white);
2335
- --bic-input-background-readonly: var(--bi-neutral-10);
2336
- --bic-input-border-color: var(--bi-neutral-50);
2337
- --bic-input-border-color-hover: var(--bi-neutral-50);
2338
- --bic-input-border-color-readonly: var(--bi-neutral-50);
2339
- --bic-input-color-readonly: var(--bi-neutral-95);
2340
- --bic-input-color: var(--bi-neutral-95);
2341
- --bic-input-disabled-color: var(--bi-neutral-50);
2342
- --bic-input-placeholder-color: var(--bi-neutral-60);
2343
- --bic-input-focus-outline-color: var(--bi-primary-50);
2344
- --bic-input-focus-shadow-color: var(--bi-basic-white);
2345
- --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2346
- }
2347
-
2348
- .bi-input[data-dark="true"] {
2349
- --bic-input-background: var(--bi-neutral-95);
2350
- --bic-input-background-readonly: var(--bi-neutral-50);
2351
- --bic-input-border-color-hover: var(--bi-neutral-25);
2352
- --bic-input-color-readonly: var(--bi-basic-white);
2353
- --bic-input-color: var(--bi-basic-white);
2354
- --bic-input-disabled-color: var(--bi-neutral-40);
2355
- --bic-input-placeholder-color: var(--bi-neutral-30);
2356
- --bic-input-focus-outline-color: var(--bi-primary-30);
2357
- --bic-input-focus-shadow-color: var(--bi-neutral-95);
2358
- --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2359
- }
2360
-
2361
- .bi-input {
2362
- appearance: none;
2363
- background: var(--bic-input-background);
2364
- border-radius: var(--bi-radius-medium);
2365
- box-shadow: var(--bic-input-box-shadow);
2366
- box-sizing: border-box;
2367
- color: var(--bic-input-color);
2368
- font-family: inherit;
2369
- font-size: var(--bic-input-font-size);
2370
- height: var(--bic-input-size);
2371
- min-width: 0;
2372
- max-width: 100%;
2373
- padding: var(--bic-input-padding);
2374
- vertical-align: middle;
2375
- caret-color: var(--bic-input-caret-color);
2376
- border: none;
2377
- line-height: 1;
2378
- position: relative;
2379
- }
2380
-
2381
- .bi-input[data-size="large"] {
2382
- --bic-input-size: var(--bi-scale-14x);
2383
- --bic-input-font-size: 1.25rem;
2384
- }
2385
-
2386
- .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
2387
- box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
2388
- }
2389
-
2390
- .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
2391
- --bic-input-border-color: var(--bic-input-focus-outline-color);
2392
- }
2393
-
2394
- .bi-input:focus-visible {
2395
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2396
- outline-offset: 0;
2397
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
2398
- 0px 0px 10px 0px #0000000d);
2399
- }
2400
-
2401
- .bi-input:focus-visible * {
2402
- --_bi--focus: ;
2403
- }
2404
-
2405
- .bi-input::placeholder {
2406
- color: var(--bic-input-placeholder-color);
2407
- }
2408
-
2409
- .bi-input:not([size], [cols]) {
2410
- width: 100%;
2411
- }
2412
-
2413
- .bi-input:disabled, .bi-input[aria-disabled="true"] {
2414
- cursor: not-allowed;
2527
+ justify-content: center;
2528
+ align-items: center;
2529
+ gap: var(--bi-scale-12x);
2530
+ flex-wrap: wrap;
2531
+ min-height: 58px;
2532
+ display: flex;
2415
2533
  }
2416
2534
 
2417
- .bi-input[aria-invalid="true"] {
2418
- --bic-input-border-color: var(--bic-input-border-color-invalid);
2535
+ @media (width < 600px) {
2536
+ .bi-footer .bi-footer--accreditations {
2537
+ gap: var(--bi-scale-2x) var(--bi-scale-1x);
2538
+ }
2419
2539
  }
2420
2540
 
2421
- .bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
2422
- background: var(--bic-input-background-readonly);
2423
- --bic-input-border-color: var(--bic-input-border-color-readonly);
2424
- color: var(--bic-input-color-readonly);
2541
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb, .bi-footer .bi-footer--accreditations .bi-footer--amba, .bi-footer .bi-footer--accreditations .bi-footer--equis {
2542
+ background-position: center;
2543
+ background-repeat: no-repeat;
2544
+ background-size: contain;
2545
+ height: 58px;
2546
+ display: block;
2425
2547
  }
2426
2548
 
2427
- .bi-input:is(textarea) {
2428
- height: auto;
2429
- min-height: calc(var(--bic-input-size) * 2);
2430
- resize: vertical;
2549
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb {
2550
+ background-image: url("./assets/accreditations/aacsb.svg");
2551
+ width: 127px;
2431
2552
  }
2432
2553
 
2433
- .bi-input:is(textarea):not([rows]) {
2434
- field-sizing: content;
2554
+ .bi-footer .bi-footer--accreditations .bi-footer--aacsb:is([data-dark="true"] .bi-footer--aacsb) {
2555
+ background-image: url("./assets/accreditations/aacsb-neg.svg");
2435
2556
  }
2436
2557
 
2437
- .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
2438
- cursor: pointer;
2558
+ .bi-footer .bi-footer--accreditations .bi-footer--amba {
2559
+ background-image: url("./assets/accreditations/amba.svg");
2560
+ width: 122px;
2439
2561
  }
2440
2562
 
2441
- .bi-input:is(select) {
2442
- background-image: var(--bic-input-select-chevron);
2443
- background-position: calc(100% - .5em);
2444
- background-repeat: no-repeat;
2445
- background-size: 1.5em;
2563
+ .bi-footer .bi-footer--accreditations .bi-footer--amba:is([data-dark="true"] .bi-footer--amba) {
2564
+ background-image: url("./assets/accreditations/amba-neg.svg");
2446
2565
  }
2447
2566
 
2448
- .bi-input[type="checkbox"], .bi-input[type="radio"] {
2449
- padding: var(--bi-scale-0-50x);
2450
- line-height: inherit;
2451
- height: var(--bic-input-toggle-size);
2452
- width: var(--bic-input-toggle-size);
2453
- box-shadow: none;
2454
- border-width: var(--bi-stroke-medium);
2455
- border-style: solid;
2456
- border-color: var(--bic-input-border-color);
2457
- background: none;
2458
- flex-shrink: 0;
2567
+ .bi-footer .bi-footer--accreditations .bi-footer--equis {
2568
+ background-image: url("./assets/accreditations/equis.svg");
2569
+ width: 104px;
2459
2570
  }
2460
2571
 
2461
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
2462
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2463
- outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2464
- outline-offset: var(--_bi--focus, 3px);
2572
+ .bi-footer .bi-footer--accreditations .bi-footer--equis:is([data-dark="true"] .bi-footer--equis) {
2573
+ background-image: url("./assets/accreditations/equis-neg.svg");
2465
2574
  }
2466
2575
 
2467
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
2468
- --_bi--focus: ;
2576
+ .bi-footer .bi-footer--socials {
2577
+ justify-content: center;
2578
+ align-items: center;
2579
+ gap: var(--bi-scale-8x);
2580
+ flex-wrap: wrap;
2581
+ display: flex;
2469
2582
  }
2470
2583
 
2471
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2472
- cursor: pointer;
2584
+ @media (width < 600px) {
2585
+ .bi-footer .bi-footer--socials {
2586
+ gap: var(--bi-scale-2x);
2587
+ }
2473
2588
  }
2474
2589
 
2475
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
2476
- border-radius: var(--bi-radius-full);
2590
+ .bi-footer .bi-footer--copyright {
2591
+ text-align: center;
2592
+ margin: 0;
2593
+ font-family: museo-slab, serif;
2594
+ font-size: 1rem;
2595
+ font-weight: 500;
2596
+ line-height: 1.5;
2477
2597
  }
2478
2598
 
2479
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
2480
- content: "";
2481
- background-color: var(--bic-input-toggle-background);
2482
- border-radius: 100%;
2483
- width: 0;
2484
- height: 0;
2485
- transition: width .1s ease-in-out, height .1s ease-in-out;
2486
- display: block;
2487
- position: absolute;
2488
- top: 50%;
2489
- left: 50%;
2490
- transform: translate(-50%, -50%);
2599
+ svg {
2600
+ --bic-icon-size: inherit;
2601
+ font-size: var(--bic-icon-size);
2602
+ display: inline-block;
2491
2603
  }
2492
2604
 
2493
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
2494
- --bic-input-border-color: var(--bic-input-toggle-background);
2605
+ svg[data-size="2xl"] {
2606
+ --bic-icon-size: var(--bi-icon-2xl) !important;
2495
2607
  }
2496
2608
 
2497
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
2498
- width: 12px;
2499
- height: 12px;
2609
+ svg[data-size="xl"] {
2610
+ --bic-icon-size: var(--bi-icon-xl) !important;
2500
2611
  }
2501
2612
 
2502
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
2503
- border-radius: var(--bi-radius-small);
2504
- place-content: center;
2505
- display: grid;
2613
+ svg[data-size="large"] {
2614
+ --bic-icon-size: var(--bi-icon-large) !important;
2506
2615
  }
2507
2616
 
2508
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
2509
- content: "";
2510
- width: .7em;
2511
- height: .7em;
2512
- box-shadow: inset 1em 1em var(--bic-input-toggle-color);
2513
- transform-origin: center;
2514
- clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
2515
- transition: transform .2s ease-in-out;
2516
- transform: scale(0);
2617
+ svg[data-size="medium"] {
2618
+ --bic-icon-size: var(--bi-icon-medium) !important;
2517
2619
  }
2518
2620
 
2519
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
2520
- background: var(--bic-input-toggle-background);
2521
- --bic-input-border-color: var(--bic-input-toggle-background);
2621
+ svg[data-size="small"] {
2622
+ --bic-icon-size: var(--bi-icon-small) !important;
2522
2623
  }
2523
2624
 
2524
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
2525
- transform: scale(1);
2625
+ svg[data-color="inherit"] {
2626
+ color: inherit;
2526
2627
  }
2527
2628
 
2528
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
2529
- clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
2629
+ svg[data-color="primary"] {
2630
+ color: #01417b;
2530
2631
  }
2531
2632
 
2532
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2533
- --_bic-input-circle-position-x: var(--bi-scale-0-50x);
2534
- background: var(--bi-neutral-50);
2633
+ svg[data-color="gray"] {
2634
+ color: #1c1b1b;
2535
2635
  }
2536
2636
 
2537
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
2538
- --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
2539
- background: var(--bic-input-toggle-background);
2540
- --bic-input-border-color: var(--bic-input-toggle-background);
2637
+ svg[data-color="black"] {
2638
+ color: var(--bi-basic-key);
2541
2639
  }
2542
2640
 
2543
- :is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
2544
- background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
2545
- background-origin: content-box;
2546
- background-position: var(--_bic-input-circle-position-x);
2547
- background-repeat: no-repeat;
2548
- background-size: calc(var(--bic-input-toggle-size)) 100%;
2549
- border-radius: var(--bi-radius-full);
2550
- width: var(--bi-scale-11x);
2551
- height: var(--bi-scale-6x);
2552
- padding-inline: 0;
2553
- transition: background-position .2s;
2641
+ svg[data-color="white"] {
2642
+ color: var(--bi-basic-white);
2554
2643
  }
2555
2644
 
2556
2645
  .bi-label {
@@ -2850,94 +2939,6 @@ svg[data-color="white"] {
2850
2939
  background-color: var(--bic-pagination-selected-background);
2851
2940
  }
2852
2941
 
2853
- .bi-popover {
2854
- --bic-popover-arrow-size: var(--bi-scale-3x);
2855
- --bic-popover-background: var(--bi-basic-white);
2856
- --bic-popover-border-width: var(--bi-stroke-thin);
2857
- --bic-popover-border-style: solid;
2858
- --bic-popover-border-color: var(--bi-neutral-15);
2859
- --bic-popover-color: var(--bi-neutral-90);
2860
- --bic-popover-border-radius: var(--bi-radius-medium);
2861
- --bic-popover-max-width: 300px;
2862
- --bic-popover-padding: var(--bi-scale-1x);
2863
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
2864
- 0px 2px 2px -1px #26333f0a;
2865
- }
2866
-
2867
- .bi-popover[data-dark="true"] {
2868
- --bic-popover-background: var(--bi-neutral-95);
2869
- --bic-popover-border-color: var(--bi-neutral-70);
2870
- --bic-popover-color: var(--bi-neutral-5);
2871
- --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
2872
- 0px 2px 2px -1px #26333f0a;
2873
- }
2874
-
2875
- .bi-popover {
2876
- background: var(--bic-popover-background);
2877
- border-radius: var(--bic-popover-border-radius);
2878
- border-width: var(--bic-popover-border-width);
2879
- border-style: var(--bic-popover-border-style);
2880
- border-color: var(--bic-popover-border-color);
2881
- box-shadow: var(--bic-popover-box-shadow);
2882
- box-sizing: border-box;
2883
- color: var(--bic-popover-color);
2884
- max-width: var(--bic-popover-max-width);
2885
- padding: var(--bic-popover-padding);
2886
- z-index: 100000;
2887
- display: none;
2888
- position: fixed;
2889
- inset: 0 auto auto 0;
2890
- overflow: visible;
2891
- }
2892
-
2893
- .bi-popover[aria-hidden="false"] {
2894
- display: block;
2895
- }
2896
-
2897
- .bi-popover[data-arrow="true"]:before {
2898
- background: var(--bic-popover-background);
2899
- border: inherit;
2900
- box-sizing: border-box;
2901
- content: "";
2902
- height: var(--bic-popover-arrow-size);
2903
- left: var(--bic-popover-arrow-x);
2904
- top: var(--bic-popover-arrow-y);
2905
- width: var(--bic-popover-arrow-size);
2906
- border-top-color: #0000;
2907
- border-left-color: #0000;
2908
- position: absolute;
2909
- translate: -50% -50%;
2910
- }
2911
-
2912
- .bi-popover[data-arrow="true"][data-placement="top"]:before {
2913
- rotate: 45deg;
2914
- }
2915
-
2916
- .bi-popover[data-arrow="true"][data-placement="left"]:before {
2917
- rotate: -45deg;
2918
- }
2919
-
2920
- .bi-popover[data-arrow="true"][data-placement="right"]:before {
2921
- rotate: 135deg;
2922
- }
2923
-
2924
- .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
2925
- rotate: -135deg;
2926
- }
2927
-
2928
- [data-popover="inline"] {
2929
- all: unset;
2930
- cursor: pointer;
2931
- text-underline-offset: .27em;
2932
- font-size: inherit;
2933
- -webkit-text-decoration: underline dotted;
2934
- text-decoration: underline dotted;
2935
- }
2936
-
2937
- [data-popover="inline"]:not([hidden]) {
2938
- display: inline;
2939
- }
2940
-
2941
2942
  .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2942
2943
  color: var(--bi-primary-50);
2943
2944
  }
@@ -2992,6 +2993,7 @@ svg[data-color="white"] {
2992
2993
  width: 1em;
2993
2994
  height: 1em;
2994
2995
  animation: 1s linear infinite bi-spinner;
2996
+ display: inline-block;
2995
2997
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
2996
2998
  mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
2997
2999
  }