vue-choice/dist/vue-choice.umd.css

a vue select/choice component that strives for native-select compatibility

.sg-choice{--sg-choice-accent-color:#2a62ac;--sg-choice-border-color:#dadada;--sg-choice-decorator-border-color:#bbbbbb;--sg-choice-decorator-color:#8b8f8d;--sg-choice-interaction-background:#f2f2f2;position:relative;user-select:none}.sg-choice .content-meta{align-items:center}.sg-choice-current{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--sg-choice-border-color);border-radius:2px;padding:.5rem 1rem;transition:border-color .2s;cursor:pointer;background-color:#fff}.sg-choice-current>:first-child{flex:1}.sg-choice-current:focus,.sg-choice-open .sg-choice-current{outline:0;border-color:var(--sg-choice-accent-color)}.sg-choice-decorator{border-left:2px solid var(--sg-choice-decorator-border-color);min-width:4rem;color:var(--sg-choice-decorator-color);padding:.5rem 1rem .5rem 1.5rem;text-align:center;margin-right:-.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.sg-choice-decorator i{transition:transform .2s,color .2s;display:flex;align-items:center;line-height:1;font-style:normal;font-size:1.75rem;min-height:1.75rem}.sg-choice-current:hover .sg-choice-caret i,.sg-choice-dismiss:hover i{color:var(--sg-choice-accent-color)}.sg-choice-caret i{transform:rotate(360deg) scaleY(.6);font-size:1.25rem}.sg-choice-open .sg-choice-caret i{transform:scaleY(.6) rotate(180deg)}.sg-choice-top .sg-choice-caret i{transform:rotate(180deg) scaleY(.6)}.sg-choice-top.sg-choice-open .sg-choice-caret i{transform:rotate(360deg) scaleY(.6)}.sg-choice-default{text-transform:uppercase;font-size:90%;font-weight:700}.sg-choice-finder{max-width:450px;position:absolute;left:0;right:0;background-color:#fff;z-index:20;border-radius:2px;display:flex;flex-direction:column;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);overscroll-behavior:contain;overflow-y:auto}.sg-choice-finder .sg-choice-bottom{top:100%;margin-top:1rem}.sg-choice-top .sg-choice-finder{bottom:100%;margin-bottom:1rem}.sg-choice-search{padding:1rem;background-color:var(--sg-choice-interaction-background);display:flex;align-items:center}.sg-choice-finder-top .sg-choice-search{order:1}.sg-choice-search-input{display:block;border:none;border-bottom:2px solid var(--sg-choice-decorator-color);background-color:transparent;padding:.625rem .5rem;transition:border-color .2s;flex:1}.sg-choice-search-input:focus{outline:0;border-color:var(--sg-choice-accent-color)}.sg-choice-search-count{display:flex;min-width:40px;line-height:1;justify-content:center;align-items:center;background-color:var(--sg-choice-accent-color);text-align:center;padding:.4rem .5rem;margin-left:1rem;border-radius:50px;color:#fff}.sg-choice-no-results{margin:1rem 0 0 0;padding:0 1rem 1rem}.sg-choice-choices{margin:0;padding:1rem;max-height:400px;overflow:auto;overflow-x:hidden}.sg-choice-choices>li{display:block;cursor:pointer;margin-bottom:.25rem}.sg-choice-choices>li:active,.sg-choice-choices>li:focus,.sg-choice-choices>li:hover{outline:0;background-color:var(--sg-choice-interaction-background);border-radius:2px}.sg-choice-choices .content-meta{padding:.5rem}