@tabula/ui-multi-selector
Version:
A MultiSelector allows users to select one or more items from a list of choices, or suggest own item.
352 lines (347 loc) • 16.3 kB
CSS
/* vanilla-extract-css-ns:src/shared.css.ts.vanilla.css?source= */
/* vanilla-extract-css-ns:src/UiMultiSelector/UiMultiSelector.css.ts.vanilla.css?source=#H4sIAAAAAAAAA71W224iMQx971fkZSX64NXM9J6+dL8EZSYBooZ45DgUdtV/XzG3UgSdIGjfiLHOOfYcx3lxamNIcOkAKlzW6I3n8Hz1cjAu/l0J8ZtVGZ2aRjtdRsd2GowzFSNNp3r2tMnuHps0IQDGMjMpVoomAB2PQwoAJZI2BBV6JnQA2sxUdHz9nIiaH0T1JjIpB/CnyJKhihGo2x6qxmDZopeCjFNsV6aNd7WQ0jYGKe7r9W5cirxei4DO6p5nrGMdXxUpIElRo/VsqA3iytDM4ZsUC6u18W2USfle3NBah7RbmY6kthkAMxUYIL/e/deoYP0cILDyWpEGqAl1rLZlNnrev7ZFHlbLVXaXJTunVNXrnDB63Uo9bJOPJKjJLhVtGs8YzyeIys8Q1XS2VmQ8JxB2aHKx/Uw95s73kIkWyFOqG8hUmFhfR5YzrGK4PoO36KyHkZ31Ropi37tfDXFDD0W69ofLumWY2WGEDvbg8Jg/7E1ddyNdspZxW3wl7WIqPPJkNO3ms42k8Oj7++4iQ3L34zvmTZG3fn7mjjmC2pr/zKUzjp3U2vsfb60hQrpwYxvMb2nrPnJSU5+6ln28AlQZ0EXupoKxliJrfzsz4+HwF6zXZj2c36zmhRR5lv1qAwtj5wvejYxO2Mc1xWadPnOqq0HbUDu1kcL67TUPpcPqNRnlZnzjFula+uqLon03XUrCzekS8tsTJKTfo+M6RjNuG7LP+/2YEaktJus3IDMuj5oRa1VZ3nTnpMLLEf7jG617uQGwIbaKNie84RIc1QtrJnF4hXftSPu06d75RNYbZ2B7PMXLJ5I97HHlw+C8/wfwKe0u6g0AAA== */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__df9y058 {
--tabula_ui_multi_selector__df9y050: var(--tbl--colors--border-control--default);
--tabula_ui_multi_selector__df9y051: var(--tbl--colors--neutral--A20);
--tabula_ui_multi_selector__df9y052: var(--tbl--colors--neutral--A40);
position: relative;
border-radius: 6px;
border: 1px solid var(--tabula_ui_multi_selector__df9y050);
cursor: pointer;
overflow: hidden;
transition: border-color var(--tbl--duration--fast--1) var(--tbl--easing--standard--productive);
}
.tabula_ui_multi_selector__1svmv050.tabula_ui_multi_selector__df9y058 {
background-color: var(--tbl--colors--background--primary-content);
}
.tabula_ui_multi_selector__1svmv051.tabula_ui_multi_selector__df9y058 {
background-color: transparent;
}
.tabula_ui_multi_selector__df9y058:hover {
border-color: var(--tabula_ui_multi_selector__df9y051);
}
.tabula_ui_multi_selector__df9y058:has(input:focus) {
border-color: var(--tabula_ui_multi_selector__df9y052);
outline: 2px solid var(--tbl--colors--border-control--focus-2);
}
.tabula_ui_multi_selector__df9y057.tabula_ui_multi_selector__df9y058 {
background-color: var(--tbl--colors--neutral--50);
border-color: var(--tbl--colors--neutral--A7);
cursor: default;
}
.tabula_ui_multi_selector__df9y057.tabula_ui_multi_selector__df9y058:hover {
border-color: var(--tbl--colors--neutral--A7);
}
.tabula_ui_multi_selector__df9y057.tabula_ui_multi_selector__df9y058:not(.tabula_ui_multi_selector__df9y053) {
border: none;
background-color: transparent;
}
.tabula_ui_multi_selector__df9y055.tabula_ui_multi_selector__df9y058 {
--tabula_ui_multi_selector__df9y050: var(--tbl--colors--border-control--warning);
--tabula_ui_multi_selector__df9y051: var(--tbl--colors--border-control--warning-focus);
--tabula_ui_multi_selector__df9y052: var(--tbl--colors--border-control--warning-focus);
}
.tabula_ui_multi_selector__df9y056.tabula_ui_multi_selector__df9y058 {
--tabula_ui_multi_selector__df9y050: var(--tbl--colors--border-control--error);
--tabula_ui_multi_selector__df9y051: var(--tbl--colors--border-control--error-focus);
--tabula_ui_multi_selector__df9y052: var(--tbl--colors--border-control--error-focus);
}
.tabula_ui_multi_selector__df9y059 {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-color: transparent;
cursor: text;
}
.tabula_ui_multi_selector__df9y05a {
display: inline-block;
}
.tabula_ui_multi_selector__df9y053.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__df9y05a {
height: 22px;
}
.tabula_ui_multi_selector__df9y053.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__df9y05a {
height: 14px;
}
.tabula_ui_multi_selector__df9y058:not(.tabula_ui_multi_selector__df9y053) .tabula_ui_multi_selector__df9y05a.tabula_ui_multi_selector__df9y054:not(:focus) {
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
opacity: 0;
}
.tabula_ui_multi_selector__df9y05b {
position: absolute;
color: var(--tbl--colors--content--tertiary);
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__df9y05b {
top: 6px;
right: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__df9y05b {
top: 14px;
right: 8px;
}
.tabula_ui_multi_selector__df9y053 .tabula_ui_multi_selector__df9y05b {
top: 7px;
right: 12px;
}
}
/* vanilla-extract-css-ns:src/Dropdown/Dropdown.css.ts.vanilla.css?source=#H4sIAAAAAAAAA91WTW/bMAy991fwMiDexsFK025VL90vCRSbjrXKkkHJjYOh/33wR1InSDJ7TS+7UiT9SD4++smoLTGElUFMXFE6Szb4x5unk3b4fQPwLahVZdSy0suiMkEvPRlKguPlUmiRbbI6bv0AClVjTnqdBwmJMslMxPAZbudlDV/gvqyjx9atVGmq7Vo2Jog728pxSoysUl359qW3q+R5za6yKSbOOJbwoniG2AM1jj3iwAlL1oXiLSbOBrIh2qWv0ecqdRsJrQEghkVZg2gxnErauSPeR1/3EaKs26iLAWJ+FDH/W8Qiav07qO6FODNug7WEXKcp2SP7VoKqgmusr+PGIyVuaPWsA/qEnTErxf3EUu1Lo7YSrLM0PuO8D8+cDQcTaQxNYcp69MQ6Q1w5k6KYd2/9OAyFQIy+VElLhJEZDsP6XIHqgIGV9ZnjYnSuw7BofO23/2XtAypoa7QlXBmXPB8t7Lzj/8mVXUxaWUtVYGUQf4p4QvMXffM3Og25BBHHn7qP7mRH7FAUitfaym5d/wnY3QRcdztSGKolxBDvV/QN617T9lh7y7hP3E/gXUGpror3MW+Q4wrcG2S7zL6mg4/7XmKqmZKgnZXAbtM9/Kp80Nle4rsY9EFx6ByU0WuLOlDhJSRkA3H3sFbl4LacJVFzsY6YH4OYHxL/TTNPMautr1RMtsd0nnF9GfvTNexvW4kEQ1mYwBSZN8ei58sHsl5MoG3fSWxKeevwFb8jc+VnIzY1OglITAL0/WDdBYjhuuc6ULsr1FBkw6ocDHR3xSWQMbr02h9e9+HNH4flx8fPOe4JNQKMtC7MOvfoLLCj5RgH4mGC/jGtK6P4fQI4THIFBRymu74EDlXurPwdH56L+nbisPe61/zTemd0Ouqwj5K+QBz0TvuuTcqH8z+7r38AFCLEQRANAAA= */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__1i1fwfx0 {
max-height: calc(10 * 32px + 6px);
padding: 6px 0;
border-radius: 6px;
background-color: var(--tbl--colors--background--primary-content);
box-shadow:
0 4px 16px 0 var(--tbl--colors--shadow--6),
0 1px 4px 0 var(--tbl--colors--shadow--12),
0 1px 2px 0 var(--tbl--colors--shadow--4);
overflow-x: hidden;
overflow-y: auto;
}
.tabula_ui_multi_selector__1i1fwfx0::-webkit-scrollbar {
display: none;
}
.tabula_ui_multi_selector__1i1fwfx2 {
font: var(--tbl--fonts--sans-serif--bold-12--font);
letter-spacing: var(--tbl--fonts--sans-serif--bold-12--letter-spacing);
text-transform: var(--tbl--fonts--sans-serif--bold-12--text-transform);
}
.tabula_ui_multi_selector__1i1fwfx3 {
font: var(--tbl--fonts--sans-serif--bold-12--font);
letter-spacing: var(--tbl--fonts--sans-serif--bold-12--letter-spacing);
text-transform: var(--tbl--fonts--sans-serif--bold-12--text-transform);
display: inline-block;
padding: 2px 4px;
border-radius: 4px;
background-color: var(--tbl--colors--neutral--A10);
}
.tabula_ui_multi_selector__1i1fwfx4 {
width: 100%;
height: 1px;
margin: 4px 0;
background-color: var(--tbl--colors--neutral--A5);
}
.tabula_ui_multi_selector__1i1fwfx5 {
flex: 0 0 auto;
width: 16px;
height: 16px;
}
.tabula_ui_multi_selector__1i1fwfx6 {
font: var(--tbl--fonts--sans-serif--medium-12--font);
letter-spacing: var(--tbl--fonts--sans-serif--medium-12--letter-spacing);
text-transform: var(--tbl--fonts--sans-serif--medium-12--text-transform);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 6px;
width: 100%;
height: 32px;
padding: 0 12px;
border: none;
background-color: transparent;
color: var(--tbl--colors--content--primary);
text-align: left;
}
.tabula_ui_multi_selector__1i1fwfx6:hover {
background-color: var(--tbl--colors--neutral--A5);
}
.tabula_ui_multi_selector__1i1fwfx1 .tabula_ui_multi_selector__1i1fwfx6 {
padding-left: 32px;
}
.tabula_ui_multi_selector__1i1fwfx1 .tabula_ui_multi_selector__1i1fwfx6:has(.tabula_ui_multi_selector__1i1fwfx5) {
padding-left: 12px;
}
.tabula_ui_multi_selector__1i1fwfx7 {
flex: 1 1 auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tabula_ui_multi_selector__1i1fwfx8 {
background-color: var(--tbl--colors--neutral--A5);
}
.tabula_ui_multi_selector__1i1fwfx0:hover .tabula_ui_multi_selector__1i1fwfx8:not(:hover) {
background-color: transparent;
}
.tabula_ui_multi_selector__1i1fwfx9 {
font: var(--tbl--fonts--sans-serif--regular-12--font);
letter-spacing: var(--tbl--fonts--sans-serif--regular-12--letter-spacing);
text-transform: var(--tbl--fonts--sans-serif--regular-12--text-transform);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 16px;
padding: 0 12px;
border-radius: 4px;
border: 1px solid var(--tbl--colors--neutral--A10);
color: var(--tbl--colors--content--tertiary);
}
.tabula_ui_multi_selector__1i1fwfx0:hover .tabula_ui_multi_selector__1i1fwfx9 {
display: none;
}
}
/* vanilla-extract-css-ns:src/Search/Search.css.ts.vanilla.css?source=#H4sIAAAAAAAAA61TwW7bMAy99yt0GdAcONhBVwzqpX9iMBYdC5NFg6K8BEP/vbDsLsmwYc6wk6FHvcf3RPo14JnE6CEAtDyMHClqenl4/S1ufjwY81nxkAM22TdDDuqbRIFaZWma2vfP+/xclXvGdBzVmgnlEaAozUACSBgTJBLfAQzkfB6g3i/V3UthBlIlgTRi6+PxDo1b4qqmdFJQwZg6luEOtVviqjaic8VUZZ7G04L15I+9WrP/+oEMeILv3mlvTV1VnxbwwOJIrIkcaUWw/XYUztFZUxqNKBR1KbYcWG7sFiTN36gUFWAUP6Cci7W3bcOxHbc5rSPirMFHulj6m0iahqn6Um1q5HzCQyC39rpkhT8nu7pUUgqHBI4UfUibUi4G6/9j8JeRbH1hOwZsqefgSFbtLbO8kD4Wd27v1XO0i8A132XBuQTQYVKAenddJUw+HgGSYnQobl4VdrlVP9Fd2xJZH38+1G45lg3a2Z4nkn8Ne7W4xvD8v+rZmnqx9vYORidLnpgEAAA= */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__1ih62u60 {
font: var(--tbl--fonts--sans-serif--medium-12--font);
letter-spacing: var(--tbl--fonts--sans-serif--medium-12--letter-spacing);
text-transform: var(--tbl--fonts--sans-serif--medium-12--text-transform);
padding: 0 4px;
height: 28px;
max-width: 100%;
border: none;
background: transparent;
color: var(--tbl--colors--content--primary);
}
.tabula_ui_multi_selector__1ih62u60:focus {
outline: none;
}
.tabula_ui_multi_selector__1svmv050 .tabula_ui_multi_selector__1ih62u60:disabled {
background-color: var(--tbl--colors--background--controls-details);
}
.tabula_ui_multi_selector__1svmv051 .tabula_ui_multi_selector__1ih62u60:disabled {
background-color: transparent;
}
.tabula_ui_multi_selector__1ih62u60::placeholder {
color: var(--tbl--colors--content--placeholder);
transition: color var(--tbl--duration--fast--1) var(--tbl--easing--standard--productive);
}
.tabula_ui_multi_selector__1ih62u60:not(:disabled):not(:focus):hover::placeholder {
color: var(--tbl--colors--content--primary);
opacity: 1;
}
}
/* vanilla-extract-css-ns:src/Tags/Tags.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81WUW+CMBB+91fcyxLN1gUQzVJf/CekQoVLStvQIrrF/74AMqcxsTWY7aUhx91937XfXbsW7MArsBtBSKpKrSSX1qwm65t2+JoAvFu2qQVLakzKWlhMDBc8tapKkrBcfqbGRJ0fQMn2pMHMFhTCIHhZdUaBkpOCY15YCkFrO95JanblLlhEHsCaZRnKnEKs9+4I80cQPtwQ+uiQSmWn9/2C2QNMnPayj50PscqgRSUpsI1RorZ8yEHROPAM3xzAgpkHowyNFuxAQSrJxxXHAGGV/hEGQNUL0Uso0X2X2IPQiUI0ulgvKg6Dq5IdlXuCe0rJ88ine+JrjWwFP5XUfpGmYppCu44rnAE3Z/oJE+Uiu9eZuIn+1YPDr4GdMpFO26kNpFPm7A/aYwTqsR91t64agVerfB9e/2hLF0tH6n22xXXXouyeAOfmvflMsHxvidrxaitUQ4ELgdqg6X+e7QVmGZe9tSnQcmI0S3l7f5wHwfEbI/45k+YIAAA= */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__1m6zcss2 {
max-width: 100%;
line-height: 0;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss2 {
padding: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss2 {
padding: 8px;
}
.tabula_ui_multi_selector__1m6zcss1:not(.tabula_ui_multi_selector__1m6zcss0).tabula_ui_multi_selector__1m6zcss2 {
padding: 0;
}
.tabula_ui_multi_selector__1m6zcss3 {
position: absolute;
}
:is(.tabula_ui_multi_selector__1m6zcss1, .tabula_ui_multi_selector__1m6zcss0) .tabula_ui_multi_selector__1m6zcss3 {
display: none;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss3 {
top: 4px;
right: 4px;
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss3 {
right: 24px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss3 {
top: 10px;
right: 8px;
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss3 {
right: 32px;
}
.tabula_ui_multi_selector__1m6zcss4 {
display: flex;
flex-wrap: wrap;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss4 {
gap: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss4 {
gap: 8px;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss3 + .tabula_ui_multi_selector__1m6zcss4 {
max-width: calc(100% - 24px);
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss3 + .tabula_ui_multi_selector__1m6zcss4 {
max-width: calc(100% - 44px);
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss3 + .tabula_ui_multi_selector__1m6zcss4 {
max-width: calc(100% - 32px);
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss3 + .tabula_ui_multi_selector__1m6zcss4 {
max-width: calc(100% - 56px);
}
.tabula_ui_multi_selector__1m6zcss5 {
display: inline-flex;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
/* vanilla-extract-css-ns:src/Clear/Clear.css.ts.vanilla.css?source=#H4sIAAAAAAAAA72VwW7bMAyG73kKXQYsBw52lqCYeumexGAsxtEqSwZFuQ2KvHsR28FSzMHswujNJmX9309S1pPDE7GSvQMoQ90ET17i4+ppNK7eVkr9ENwnh0WyRZ2c2CKSo1ICF0Uemu3Dr+esW6eUsbFxeNLq4Oj1sQtdnsBYplJs8FpxeOkTf1IUezhBGbyQF61K8kLcJ9HZyoMVquPHRIPGWF9plfXv+8CGGBiNTVGrXfatj5fBBdaqRf4OMJhygSNc9QCEWCzyaX354vwfn7Gt22y3mVGLF2vkqNUma4ZKHMlWR/kbmSb58xOS238kt3MksxmSff218sHT0BEsnysOyRu43wRPSRgdwO/djPJPAtPH0BIvhfewOB6WYltaii/PZgDmn2hs3ryqGJw1YxzD6bscKQ4OwNABk5P1PSvC6GODTF4Wph7t+iz2boO75IsNyTQ3o0PyVXYmztSV9RDKFAfUkMRZT1pt5rB2O8Bmluptv7uxsv39gs7dSprEeEkAHDAKQL6+zRJG6yuAKOgNsgFoOJjUFX89+SJp2NZT75HRBs/U+Gj4+us4r87vHclDedwHAAA= */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__1op479k0 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0;
border-radius: 50%;
color: var(--tbl--colors--content--tertiary);
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1op479k0 {
width: 20px;
height: 20px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1op479k0 {
width: 24px;
height: 24px;
}
.tabula_ui_multi_selector__1svmv050 .tabula_ui_multi_selector__1op479k0 {
border: none;
background-color: var(--tbl--colors--neutral--A5);
}
.tabula_ui_multi_selector__1svmv050 .tabula_ui_multi_selector__1op479k0:hover {
border: none;
background-color: var(--tbl--colors--neutral--A7);
}
.tabula_ui_multi_selector__1svmv050 .tabula_ui_multi_selector__1op479k0:active {
border: none;
background-color: var(--tbl--colors--neutral--A10);
}
.tabula_ui_multi_selector__1svmv051 .tabula_ui_multi_selector__1op479k0 {
border: 1px solid var(--tbl--colors--border-control--default);
background-color: transparent;
}
.tabula_ui_multi_selector__1svmv051 .tabula_ui_multi_selector__1op479k0:hover {
border: 1px solid var(--tbl--colors--border-control--hover);
background-color: var(--tbl--colors--neutral--A7);
}
.tabula_ui_multi_selector__1svmv051 .tabula_ui_multi_selector__1op479k0:active {
border: 1px solid var(--tbl--colors--border-control--hover);
background-color: var(--tbl--colors--neutral--A10);
}
.tabula_ui_multi_selector__1op479k0:focus {
outline: 2px solid var(--tbl--colors--border-control--focus-2);
}
.tabula_ui_multi_selector__1op479k0:hover {
transition: all var(--tbl--duration--fast--1) var(--tbl--easing--standard--productive);
color: var(--tbl--colors--content--primary);
}
.tabula_ui_multi_selector__1op479k0:active {
color: var(--tbl--colors--content--primary);
transition: none;
}
}
/*# sourceMappingURL=index.css.map */