@tabula/ui-multi-selector
Version:
A MultiSelector allows users to select one or more items from a list of choices, or suggest own item.
382 lines (377 loc) • 17.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=#H4sIAAAAAAAAA71Wy24iMRC85yt8WYkcejUzeTuX7Jcgz9iAFeMetdsEdpV_XzGvEAQZI0huTGNVVZerbb84tTEkuHQAFS5r9MZzeL56OVgX_66E-M2qjE5No50uo2M7DcaZipGmUz172mR3j80yIQDGVmZSrBRNADoehxQASiRtCCr0TOgAtJmp6Pj6ORE1P4jqTWRSDuBPkSVDFSNQtz1UjcGyRS8FGafYrkxb73ohpW0MUtzX6926FHm9FgGd1T3PmGMdXxUpIElRo_VsqC3iytDM4ZsUC6u18W2VSfle3GCtQ9rtTEdS2xUAMxUYIL_e_deoYP0cILDyWpEGqAl1rLZtNnrev45FHlbLVXaXJSenVNXrnDB63Uo9HJOPRVCTXSraNJkxnk8QlZ8hqnG2VmQ8JxB2aHKx3aYec2c_ZGIE8pTuBjIVJtbXkeUMqxiuz-AtuuhhZGe9kaLYz-5XQ9zQQ5Gu_eGyaRlmdhihgx4cHvOHvanrTqRL9jIei6-kXUyFR56MLrv5HCMpPPr-vLvIkNz9-B3zpshbPz_zjjmC2ob_zEtnHDvJ2vsft9YQIV3Y2AbzW2zdR04y9amz7OMVoMqALnI3FYy1FFn725kZDx9_wXpt1sP3m9W8kCLPsl9tYWHsfMG7ldEJ-zim2KzTZ051PWgbaqc2Uli_PeahdFi9JqPcpBPt9ZoGP36hF-kKenOLon2WXUrCCSYM-3t7goT0Y3pcx-iK24bs8_PhWM6pbSbrL1hmXB7NOtaqsrzpvpMaL0f4j1-Y3cMQgA2xVbQ54YmYkKheWDPowyO_syNta9Oz84msD87A9nhKlk8ke9jjyofBef8PsVi4_0kOAAA */
@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__df9y05a {
width: 100%;
}
.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=#H4sIAAAAAAAAA91XYW-bMBD93l9hVZoUtnnCJM0690v3SyIHH8GrsZF9NERT__sEOCnJSAttqkn7Fh2-53e-d8_OvRY7cATXmtLUFqU1YNDfXd0PxsnvK0K-oVhXWqwqtSoqjWrlQUOK1q1WTLFsm9Vxu46QQtQ0B7XJkZNU6HTGYvKZzJOyJl_Isqyju3ZZKaRUZsObEIm72No6CY46IVXl2y8hLtKHjbOVkTS12jpOHoWbURqIaus8pb1FtHSqEG5HU2sQDEZ7-Jr6XEi75aQNEBKTRVkT1nIYAu2WU7qMvh4yWFm3WS8msOQkI3ktYxG16zuq9hFcpu2W1pzkSkowJ_EdJ6JC20SfxrWHc7qF9YNC6lNntV4LFzomlS-12HFirIHxiElIz6zBo440gaYwYTz14FRG6dpqSVnSfQvt0IAIjvpSpK0QRiIcpwUshBopOmF8Zl0xGus4LRpf-_y_rL0nBWW0MkDX2qYPJwObdPofHNnFpJE1UKETmtKfLJ5w-Itw-FslMeeExfGnbtO97bA9i0K4jTK8G9c3EbuZwOtmLwoNNScxiQ8j-sz14GkHriEybovl6cg2e3WAQquNoQqh8JykYBDcSeNiwpLT7efJpO05FxnC3jiCvXJyfT1c1L_Rx5IbzGmaKy1nLDqmHPqw7CQzHS8Zxrt9K958GG9xMwHv-wQzKkCqqnifHfUwLmBIPbSXLelZ6s0vKpWDFJU1nDi77T78qjyq7HDvdznUo3D4ypBsRNl7cJx1lvlhgAanqlP780U6pPO2vlI4MIHTef2HMg7vmf75tpVwoiHDCUrhefOCCHr5QCtkE2QbTpI2pUw1pFH78Fz42Qj7jgYJsUmEbo_uAEZY_w7IFUI7K9BIZOtE2Wvo_mnHCWitSq_88ZOv_xAcx-XHx_c5DoIaQYYbi7NueXSW2MlwjCMhJvifg02lhXufAfZBLuCAfbjLW2Df5c7a398X9wv-NnCbB99r_uh4q5UcdZuPsj4Eh2rvfZcWpTj_D-jpD-oujO4lDwAA */
@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 {
display: flex;
align-items: center;
padding: 0 12px;
height: 32px;
}
.tabula_ui_multi_selector__1i1fwfx6::after {
content: "";
height: 16px;
border-radius: 4px;
background-color: var(--tbl--colors--neutral--A10);
}
.tabula_ui_multi_selector__1i1fwfx6:nth-child(1)::after {
width: 60%;
}
.tabula_ui_multi_selector__1i1fwfx6:nth-child(2)::after {
width: 80%;
}
.tabula_ui_multi_selector__1i1fwfx6:nth-child(3)::after {
width: 45%;
}
.tabula_ui_multi_selector__1i1fwfx7 {
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__1i1fwfx7:hover {
background-color: var(--tbl--colors--neutral--A5);
}
.tabula_ui_multi_selector__1i1fwfx1 .tabula_ui_multi_selector__1i1fwfx7 {
padding-left: 32px;
}
.tabula_ui_multi_selector__1i1fwfx1 .tabula_ui_multi_selector__1i1fwfx7:has(.tabula_ui_multi_selector__1i1fwfx5) {
padding-left: 12px;
}
.tabula_ui_multi_selector__1i1fwfx8 {
flex: 1 1 auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tabula_ui_multi_selector__1i1fwfx9 {
background-color: var(--tbl--colors--neutral--A5);
}
.tabula_ui_multi_selector__1i1fwfx0:hover .tabula_ui_multi_selector__1i1fwfx9:not(:hover) {
background-color: transparent;
}
.tabula_ui_multi_selector__1i1fwfxa {
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__1i1fwfxa {
display: none;
}
}
/* vanilla-extract-css-ns:src/Search/Search.css.ts.vanilla.css?source=#H4sIAAAAAAAAA61UTW_bMAy991foMqA5cLCDtRjUS_-JwVh0LEwWDZFyEhT974M_2jjDhjnDToIexcdHPUqvAS-UjB4CQM1dz5GiysvD629x8_ZgzFfFQw5YZV91OaivhALVyqmqSt8-7_NzMZ0zpuGo1gyYHgEmphEQAMEoIJR8A9CR87mDcj9Hdy9TZiBVSiA91j4e7-C4TVzYlM4KmjBKw6m7g-02cWHr0blJVGG-9ecZa8kfW7Vm__0D6fAMJ--0taYsii8zeODkKFkTOdKCYP3jmDhHZ81UqMdEUedgzYHTjdwJkXGNSlEB-uQ7TJdJ2vs2c2zDdZbFIs4afKSrpL-RyNANxVOxqZDzgodAbql17RX-3Nnq0NRl4iDgSNEH2dTlLLD8PwJ_sWTrDds-YE0tB0dp4d7i5TXpY3DH8l49RzsTrPNdTjiGABoUBSh36yih-HgEEMXoMLlxVNjlWv1Ad03LShVIy6e4NDS9DR4oNYFP1lAIvhcv91BH1sdPD3bzdhrOnW1H5n-9x9WbMIbHr0Av1pSztPefMp8_9_MEAAA */
@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:placeholder-shown {
text-overflow: ellipsis;
}
.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=#H4sIAAAAAAAAA71WXWvCMBR991fcl8HGyEg_lBFf_CclttFeSJPQpLZu-N9HbZ3oBBuJeynlJjfn3HNvDllJvhc1uLUkJNeV0UooZ5ez1c04fM8APhxfN5JnDWZVIx1mVkiRO11nWVQtvnJro-M-gIp3pMXClQwiSl-Wx6BEJUgpcFs6BrSPHe4canfVjs5jD2DDiwLVlkFquukIySMIn9MQhmz6AMAkiYbc-JSrLTrUigFfWy0bJ8LKfMJx2vxKDFAPLfWSPL6_JfUgNFKIg7f9ouKIXpU8cQZGuKeUnMQ-c5iMyQVaI_mewUaKsaT-j7Q1Nwz6b9jBOeFuuXnC3bw43asngcYw-et7OZf5a29-QCCmpnsLfRPfA_BK_XiFGuAA1FM_6oHuXlg9p_lPALF6j_h_sYJQny8mUh9OS6_9DdXx2XG2uZtPEyc6R_RO1BupWwZCSjQW7bB4jpdYFEIN0bZEJ4g1PBcMlD5b5uEHFkSay1oJAAA */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__1m6zcss1 {
max-width: 100%;
line-height: 0;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss1 {
padding: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss1 {
padding: 8px;
}
.tabula_ui_multi_selector__1m6zcss0.tabula_ui_multi_selector__1m6zcss1 {
padding: 0;
}
.tabula_ui_multi_selector__1m6zcss2 {
position: absolute;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss2 {
top: 4px;
right: 4px;
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss2 {
right: 24px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss2 {
top: 10px;
right: 8px;
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss2 {
right: 32px;
}
.tabula_ui_multi_selector__1m6zcss3 {
display: flex;
flex-wrap: wrap;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss3 {
gap: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss3 {
gap: 8px;
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 20px);
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss2 + .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 24px);
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss2 + .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 44px);
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 24px);
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss2 + .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 32px);
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss2 + .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 56px);
}
.tabula_ui_multi_selector__1m6zcss4 {
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 */