@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 */