@tabula/ui-multi-selector
Version:
A MultiSelector allows users to select one or more items from a list of choices, or suggest own item.
344 lines (339 loc) • 15.7 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=#H4sIAAAAAAAAA71Wy3LiMBC85yt0hMNs2U7Issol+yUu2RKgWqFxjUYkVCr/nsKPhKVILALhyDDV3dPT9vjRqa0hwZUDqHHdoDeew8PN49G6eLkR4herKjpVRluuo2NbBuNMzUhlqRd/ttnsd9smBMBYZybFRtEEoOdxSAGgQtKGoEbPhA5Am4WKjqcPiaj5UVRvIpNyAH+LLBmqGIG6G6AaDJYteinIOMV2Y7p6PwspbWOQ4r553q9LkTfPIqCzeuAZc6znqyMFJCkatJ4NdUXcGFo4fJJiZbU2vqsyKT+Ie7fWIe1PpiOpXQfAQgUGyKf7/xoVrF8CBFZeK9IADaGO9W7MVs/r17HIw2a9yWZZcnIqVf9bEkavO6nHY/LRBA3ZtaJtmxnj+QRR+RmiWmcbRcZzAmGPJle7NQ2Ye/uQiRHIU6Z7J1NhYn0TWS6wjmF6Bm/RRw8jO+uNFMVhdr96iFt6KNK1319uMd+b9/BR619DlxxAeuTJaNvt/1uTwqM3F5VxbiSz9LXeXf18PCny1i/PPB+foHa5PvOejGMnWTu7urWGCOnCxraYP2LrIXKSqfPeso8Dr6qALnJ/4D+/T/0tAmBDbBVtT7hKRbowxkaKPBs+LMguVyzFvPudyDb+CjpRz/xATl6coudUtgH9e9PfXnH61zd9W1DjcAsAAA== */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__df9y057 {
--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__df9y057 {
background-color: var(--tbl--colors--background--primary-content);
}
.tabula_ui_multi_selector__1svmv051.tabula_ui_multi_selector__df9y057 {
background-color: transparent;
}
.tabula_ui_multi_selector__df9y057:hover {
border-color: var(--tabula_ui_multi_selector__df9y051);
}
.tabula_ui_multi_selector__df9y057: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__df9y056.tabula_ui_multi_selector__df9y057 {
background-color: transparent;
border-color: var(--tabula_ui_multi_selector__df9y050);
cursor: default;
}
.tabula_ui_multi_selector__df9y056.tabula_ui_multi_selector__df9y057:not(.tabula_ui_multi_selector__df9y053) {
border: none;
}
.tabula_ui_multi_selector__df9y056.tabula_ui_multi_selector__df9y057:hover {
border-color: var(--tabula_ui_multi_selector__df9y050);
}
.tabula_ui_multi_selector__df9y054.tabula_ui_multi_selector__df9y057 {
--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__df9y055.tabula_ui_multi_selector__df9y057 {
--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__df9y058 {
position: absolute;
color: var(--tbl--colors--content--tertiary);
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__df9y058 {
top: 10px;
right: 8px;
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__df9y053 .tabula_ui_multi_selector__df9y058 {
top: 8px;
right: 12px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__df9y058 {
top: 12px;
right: 8px;
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__df9y053 .tabula_ui_multi_selector__df9y058 {
top: 8px;
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=#H4sIAAAAAAAAA61TwW7bMAy99yt0GdAcONgZ1oN66Z8YjEXHwmTRoCi3wdB/Hyy7SzK0mFP0ZOhR7/E9kX4KeCIxeggALQ8jR4qaHu+e3sXN7ztjvisecsAm+2bIQX2TKFCrLE1T+/5hnx+qcs+YjqNaM6HcAxSlGUgACWOCROI7gIGczwPU+6W6eyzMQKokkEZsfTzeoHFNXNWUXhRUMKaOZbhB7Zq4qj17p701dVV9W4Ce/LFXa35U48uCjOhc8V2Zev8GHlgciTWRI60Itr+Owjk6a0qXEYWiLsWWA8uV14Kk+RuVogKM4geUU/H1um0ytuM2p3U+nDX4SGdL/xNJ0zBVP6tNjZxPeAjk1l7nrPBxsotLJaVwSOBI0Ye0KeVisP4ag/+MZOsL2zFgSz0HR7Jqb5nlmfS2tXN7r56jXQQu+S4LziWADpMC1LvLKmHy8QiQFKNDcfOqsMut+olu2pbIev/3oXbLsWzQzvY8kXw27MXiGsPzz6ona+rF2usfTS3DJpUEAAA= */
@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);
width: 100%;
height: 30px;
padding: 0 12px;
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=#H4sIAAAAAAAAA7VW246bMBB9368YrVSpVeXKgTSKnJf9E2TMBKw1NrKHwO5q/73iljTZSIGKPoDgGM/lzJzBL0a+oQdKDWPKlZWzaCkcnl7u4vDxBPCLZFobmdQ6KWtDOgloUJHzSbIpd+8qBN5/B1C5oEk7K8CjkaRPeOjxUras0RkVAjacfxtAoy2yAnVekADeYZ8PnIVTeeK/oyUBySzTNhewrdr5HuJ/8cCBw75q52Uy2hBCHgn9aEo5S2hJwPPzwFCmQ2Xkm4DUOPU6YMqg9AJSR8V8R5vRw9ng0WA72OueWKY9qrFwrvlrofGyEtDdDzfZrluvKcC8c7d6ra6s7+dZH3ZGDxr7aJwkAb5r4nUZmTyX0ufa9qT0F19GT/T4k+3iaJgfRBvt1q7UbdadoHpRzS3b6Op/Zh3zJR0U30pP237wXRRI2BJzJ/RH4xoBaIyugg7D4gUvdJahHdCm0IQsVFKhAOsmfa7XffF15uQusjyDBo90hZ5nvJJGfe8GPbCubj/WVsbPRRncDSuOFsU1p3fvcba/y9n+AWeb3erBrULadm4xp7G7lLSZ/5Vh6/bLbJZpcKamcTb3BeDjWaPnfXz5chKZDiEXJJXqNfeuthlTzjgvgLy0oZIe7TjoP/8A8O9wnEoJAAA= */
@layer tbl--components;
@layer tbl--components {
.tabula_ui_multi_selector__1m6zcss0 {
position: relative;
max-width: 100%;
line-height: 0;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss0 {
padding: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss0 {
padding: 0 0 8px 0;
}
.tabula_ui_multi_selector__1m6zcss0::after {
content: "";
display: block;
clear: both;
}
.tabula_ui_multi_selector__1m6zcss1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss1 {
gap: 4px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss1 {
gap: 8px;
}
.tabula_ui_multi_selector__1m6zcss2 {
position: relative;
float: right;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss2 {
margin: 4px 4px 0 4px;
}
.tabula_ui_multi_selector__1svmv052.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss2 {
margin-right: 26px;
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss2 {
margin: 8px 8px 0 8px;
}
.tabula_ui_multi_selector__1svmv053.tabula_ui_multi_selector__1svmv054 .tabula_ui_multi_selector__1m6zcss2 {
margin-right: 30px;
}
.tabula_ui_multi_selector__1m6zcss3 {
display: inline-flex;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss3 {
margin-top: 4px;
margin-left: 4px;
max-width: calc(100% - 8px);
}
.tabula_ui_multi_selector__1svmv052 .tabula_ui_multi_selector__1m6zcss2 + .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 32px);
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss3 {
margin-top: 8px;
margin-left: 8px;
max-width: calc(100% - 16px);
}
.tabula_ui_multi_selector__1svmv053 .tabula_ui_multi_selector__1m6zcss2 + .tabula_ui_multi_selector__1m6zcss3 {
max-width: calc(100% - 48px);
}
.tabula_ui_multi_selector__1m6zcss1 .tabula_ui_multi_selector__1m6zcss3 {
margin: 0;
}
.tabula_ui_multi_selector__1m6zcss4 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
}
/* 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 */