Something went wrong. Try again.
Something went wrong. Try again.
3.3 kB · 155 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156.select { position: relative;}
.select-trigger { position: relative; display: flex; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: space-between; padding: 0.25rem; padding: 8px 12px; border: none; border-radius: 0.5rem; border-radius: calc(0.5rem); background: none; background: var(--light, var(--primary-color)) var(--dark, var(--primary-color-3)); box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6)) var(--dark, var(--primary-color-7)); color: var(--secondary-color-4); cursor: pointer; gap: 0.25rem; transition: background-color 100ms ease-out;}
.select-trigger span[data-placeholder="true"] { color: var(--secondary-color-5);}
.select[data-state="open"] .select-trigger { pointer-events: none;}
.select-expand-icon { width: 20px; height: 20px; fill: none; stroke: var(--primary-color-7); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;}
.select-check-icon { width: 1rem; height: 1rem; fill: none; stroke: var(--secondary-color-5); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;}
.select[data-disabled="true"] .select-trigger { color: var(--secondary-color-5); cursor: not-allowed;}
.select-trigger:hover:not([data-disabled="true"]),.select-trigger:focus-visible { background: var(--light, var(--primary-color-4)) var(--dark, var(--primary-color-5)); color: var(--secondary-color-1); outline: none;}
.select-list { position: absolute; z-index: 1000; top: 100%; left: 0; min-width: 100%; box-sizing: border-box; padding: 0.25rem; border-radius: 0.5rem; margin-top: 0.25rem; background: var(--light, var(--primary-color)) var(--dark, var(--primary-color-5)); box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6)) var(--dark, var(--primary-color-7)); opacity: 0; pointer-events: none; transform-origin: top; will-change: transform, opacity;}
.select-list[data-state="closed"] { animation: select-list-animate-out 150ms ease-in forwards; pointer-events: none;}
@keyframes select-list-animate-out { 0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: 0; transform: scale(0.95) translateY(-2px); }}
.select-list[data-state="open"] { animation: select-list-animate-in 150ms ease-out forwards; pointer-events: auto;}
@keyframes select-list-animate-in { 0% { opacity: 0; transform: scale(0.95) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }}
.select-option { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: calc(0.5rem - 0.25rem); cursor: pointer; font-size: 14px;}
.select-option[data-disabled="true"] { color: var(--secondary-color-5); cursor: not-allowed;}
.select-option:hover:not([data-disabled="true"]),.select-option:focus-visible { background: var(--light, var(--primary-color-4)) var(--dark, var(--primary-color-7)); color: var(--secondary-color-1); outline: none;}
.select-group-label { padding: 4px 12px; color: var(--secondary-color-5); font-size: 0.75rem;}
[data-disabled="true"] { cursor: not-allowed; opacity: 0.5;}