@livelybone/vue-select
Version:
A vue select component, includes cascader
2 lines (1 loc) • 14.5 kB
CSS
.scrollbar-wrap .scrollbar{width:4px ;border-radius:6px ;background:#eee }.vue-popper{border-color:rgba(194,204,220,0.5) }.vue-popper[x-placement^='bottom'] .arrow{border-bottom-color:rgba(194,204,220,0.5) }.vue-popper[x-placement^='top'] .arrow{border-top-color:rgba(194,204,220,0.5) }.split{color:#aaa }.select-base,.select-multi,.cascader,.cascader-multi{position:relative;padding:0 10px;font-size:14px;color:#666;border:1px solid #c2ccdc;border-radius:3px;background:transparent;cursor:pointer}.select-base *,.select-multi *,.cascader *,.cascader-multi *{box-sizing:border-box;outline:none }.select-base .input,.select-multi .input,.cascader .input,.cascader-multi .input{cursor:pointer}.select-base.disabled,.select-multi.disabled,.cascader.disabled,.cascader-multi.disabled{background:#f9f9f9;cursor:default}.select-base.select-multi .options .option.selected,.select-base.cascader .options .option.selected,.select-base.cascader-multi .options .option.selected,.select-multi.select-multi .options .option.selected,.select-multi.cascader .options .option.selected,.select-multi.cascader-multi .options .option.selected,.cascader.select-multi .options .option.selected,.cascader.cascader .options .option.selected,.cascader.cascader-multi .options .option.selected,.cascader-multi.select-multi .options .option.selected,.cascader-multi.cascader .options .option.selected,.cascader-multi.cascader-multi .options .option.selected{color:#30b386 ;background:transparent ;font-weight:600}.select-base.select-multi .options .option.selected .icon-selected,.select-base.cascader .options .option.selected .icon-selected,.select-base.cascader-multi .options .option.selected .icon-selected,.select-multi.select-multi .options .option.selected .icon-selected,.select-multi.cascader .options .option.selected .icon-selected,.select-multi.cascader-multi .options .option.selected .icon-selected,.cascader.select-multi .options .option.selected .icon-selected,.cascader.cascader .options .option.selected .icon-selected,.cascader.cascader-multi .options .option.selected .icon-selected,.cascader-multi.select-multi .options .option.selected .icon-selected,.cascader-multi.cascader .options .option.selected .icon-selected,.cascader-multi.cascader-multi .options .option.selected .icon-selected{float:right;position:relative;width:15px;height:100%}.select-base.select-multi .options .option.selected .icon-selected:before,.select-base.cascader .options .option.selected .icon-selected:before,.select-base.cascader-multi .options .option.selected .icon-selected:before,.select-multi.select-multi .options .option.selected .icon-selected:before,.select-multi.cascader .options .option.selected .icon-selected:before,.select-multi.cascader-multi .options .option.selected .icon-selected:before,.cascader.select-multi .options .option.selected .icon-selected:before,.cascader.cascader .options .option.selected .icon-selected:before,.cascader.cascader-multi .options .option.selected .icon-selected:before,.cascader-multi.select-multi .options .option.selected .icon-selected:before,.cascader-multi.cascader .options .option.selected .icon-selected:before,.cascader-multi.cascader-multi .options .option.selected .icon-selected:before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:3px;background:#30b386}.select-base.select-multi .options .option.selected .icon-expand:before,.select-base.cascader .options .option.selected .icon-expand:before,.select-base.cascader-multi .options .option.selected .icon-expand:before,.select-multi.select-multi .options .option.selected .icon-expand:before,.select-multi.cascader .options .option.selected .icon-expand:before,.select-multi.cascader-multi .options .option.selected .icon-expand:before,.cascader.select-multi .options .option.selected .icon-expand:before,.cascader.cascader .options .option.selected .icon-expand:before,.cascader.cascader-multi .options .option.selected .icon-expand:before,.cascader-multi.select-multi .options .option.selected .icon-expand:before,.cascader-multi.cascader .options .option.selected .icon-expand:before,.cascader-multi.cascader-multi .options .option.selected .icon-expand:before{border-left-color:#30b386}.select-base.select-multi .options .option:hover,.select-base.cascader .options .option:hover,.select-base.cascader-multi .options .option:hover,.select-multi.select-multi .options .option:hover,.select-multi.cascader .options .option:hover,.select-multi.cascader-multi .options .option:hover,.cascader.select-multi .options .option:hover,.cascader.cascader .options .option:hover,.cascader.cascader-multi .options .option:hover,.cascader-multi.select-multi .options .option:hover,.cascader-multi.cascader .options .option:hover,.cascader-multi.cascader-multi .options .option:hover{background:#e9f9f4 }.select-base.select-multi .options .option:hover .icon-expand:after,.select-base.cascader .options .option:hover .icon-expand:after,.select-base.cascader-multi .options .option:hover .icon-expand:after,.select-multi.select-multi .options .option:hover .icon-expand:after,.select-multi.cascader .options .option:hover .icon-expand:after,.select-multi.cascader-multi .options .option:hover .icon-expand:after,.cascader.select-multi .options .option:hover .icon-expand:after,.cascader.cascader .options .option:hover .icon-expand:after,.cascader.cascader-multi .options .option:hover .icon-expand:after,.cascader-multi.select-multi .options .option:hover .icon-expand:after,.cascader-multi.cascader .options .option:hover .icon-expand:after,.cascader-multi.cascader-multi .options .option:hover .icon-expand:after{border-left-color:#e9f9f4}.select-base.select-multi .options .option .icon-expand,.select-base.cascader .options .option .icon-expand,.select-base.cascader-multi .options .option .icon-expand,.select-multi.select-multi .options .option .icon-expand,.select-multi.cascader .options .option .icon-expand,.select-multi.cascader-multi .options .option .icon-expand,.cascader.select-multi .options .option .icon-expand,.cascader.cascader .options .option .icon-expand,.cascader.cascader-multi .options .option .icon-expand,.cascader-multi.select-multi .options .option .icon-expand,.cascader-multi.cascader .options .option .icon-expand,.cascader-multi.cascader-multi .options .option .icon-expand{display:block;float:right;position:relative;top:calc((30px - 10px) / 2);width:10px;height:10px}.select-base.select-multi .options .option .icon-expand:before,.select-base.cascader .options .option .icon-expand:before,.select-base.cascader-multi .options .option .icon-expand:before,.select-multi.select-multi .options .option .icon-expand:before,.select-multi.cascader .options .option .icon-expand:before,.select-multi.cascader-multi .options .option .icon-expand:before,.cascader.select-multi .options .option .icon-expand:before,.cascader.cascader .options .option .icon-expand:before,.cascader.cascader-multi .options .option .icon-expand:before,.cascader-multi.select-multi .options .option .icon-expand:before,.cascader-multi.cascader .options .option .icon-expand:before,.cascader-multi.cascader-multi .options .option .icon-expand:before{content:'';position:absolute;right:-6px;width:0;height:0;border:5px solid transparent;border-right:0;border-left-color:#666;right:0}.select-base.select-multi .options .option .icon-expand:after,.select-base.cascader .options .option .icon-expand:after,.select-base.cascader-multi .options .option .icon-expand:after,.select-multi.select-multi .options .option .icon-expand:after,.select-multi.cascader .options .option .icon-expand:after,.select-multi.cascader-multi .options .option .icon-expand:after,.cascader.select-multi .options .option .icon-expand:after,.cascader.cascader .options .option .icon-expand:after,.cascader.cascader-multi .options .option .icon-expand:after,.cascader-multi.select-multi .options .option .icon-expand:after,.cascader-multi.cascader .options .option .icon-expand:after,.cascader-multi.cascader-multi .options .option .icon-expand:after{content:'';position:absolute;right:-6px;width:0;height:0;border:5px solid transparent;border-right:0;border-left-color:#fff;right:1px}.select-base.cascader .options,.select-base.cascader-multi .options,.select-multi.cascader .options,.select-multi.cascader-multi .options,.cascader.cascader .options,.cascader.cascader-multi .options,.cascader-multi.cascader .options,.cascader-multi.cascader-multi .options{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;right:auto;width:auto}.select-base.cascader .options .scrollbar-wrap,.select-base.cascader-multi .options .scrollbar-wrap,.select-multi.cascader .options .scrollbar-wrap,.select-multi.cascader-multi .options .scrollbar-wrap,.cascader.cascader .options .scrollbar-wrap,.cascader.cascader-multi .options .scrollbar-wrap,.cascader-multi.cascader .options .scrollbar-wrap,.cascader-multi.cascader-multi .options .scrollbar-wrap{width:auto;min-width:160px}.select-base.cascader .options .option.selected,.select-base.cascader-multi .options .option.selected,.select-multi.cascader .options .option.selected,.select-multi.cascader-multi .options .option.selected,.cascader.cascader .options .option.selected,.cascader.cascader-multi .options .option.selected,.cascader-multi.cascader .options .option.selected,.cascader-multi.cascader-multi .options .option.selected{font-weight:500}.select-base.cascader .options .line,.select-base.cascader-multi .options .line,.select-multi.cascader .options .line,.select-multi.cascader-multi .options .line,.cascader.cascader .options .line,.cascader.cascader-multi .options .line,.cascader-multi.cascader .options .line,.cascader-multi.cascader-multi .options .line{float:left;width:1px;margin:-4px 0;background:rgba(194,204,220,0.5)}.select-base .value,.select-base .input,.select-multi .value,.select-multi .input,.cascader .value,.cascader .input,.cascader-multi .value,.cascader-multi .input{width:100%;height:30px;line-height:30px;margin:0;padding:0;border:none}.select-base .placeholder,.select-multi .placeholder,.cascader .placeholder,.cascader-multi .placeholder{color:#aaa}.select-base .input,.select-multi .input,.cascader .input,.cascader-multi .input{display:block;outline:none }.select-base .input::-webkit-input-placeholder,.select-multi .input::-webkit-input-placeholder,.cascader .input::-webkit-input-placeholder,.cascader-multi .input::-webkit-input-placeholder{color:#aaa}.select-base .input:-moz-placeholder,.select-multi .input:-moz-placeholder,.cascader .input:-moz-placeholder,.cascader-multi .input:-moz-placeholder{color:#aaa}.select-base .input::-moz-placeholder,.select-multi .input::-moz-placeholder,.cascader .input::-moz-placeholder,.cascader-multi .input::-moz-placeholder{color:#aaa}.select-base .input:-ms-input-placeholder,.select-multi .input:-ms-input-placeholder,.cascader .input:-ms-input-placeholder,.cascader-multi .input:-ms-input-placeholder{color:#aaa}.select-base .values,.select-multi .values,.cascader .values,.cascader-multi .values{min-height:30px;height:auto;overflow:hidden}.select-base .val,.select-multi .val,.cascader .val,.cascader-multi .val{display:inline-block;width:auto;height:24px;line-height:24px;padding:0 6px;margin:3px;margin-left:0;border-radius:2px;background:#eee;white-space:nowrap;vertical-align:top}.select-base .val.input,.select-base .val.placeholder,.select-multi .val.input,.select-multi .val.placeholder,.cascader .val.input,.cascader .val.placeholder,.cascader-multi .val.input,.cascader-multi .val.placeholder{background:transparent}.select-base .val .v,.select-multi .val .v,.cascader .val .v,.cascader-multi .val .v{float:left;font-size:12px}.select-base .val .icon-del,.select-multi .val .icon-del,.cascader .val .icon-del,.cascader-multi .val .icon-del{float:right;margin:0 0 0 10px;position:relative;width:12px;height:100%}.select-base .val .icon-del:hover:before,.select-base .val .icon-del:hover:after,.select-multi .val .icon-del:hover:before,.select-multi .val .icon-del:hover:after,.cascader .val .icon-del:hover:before,.cascader .val .icon-del:hover:after,.cascader-multi .val .icon-del:hover:before,.cascader-multi .val .icon-del:hover:after{background:#333}.select-base .val .icon-del:before,.select-base .val .icon-del:after,.select-multi .val .icon-del:before,.select-multi .val .icon-del:after,.cascader .val .icon-del:before,.cascader .val .icon-del:after,.cascader-multi .val .icon-del:before,.cascader-multi .val .icon-del:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#666;transform:rotate(45deg)}.select-base .val .icon-del:after,.select-multi .val .icon-del:after,.cascader .val .icon-del:after,.cascader-multi .val .icon-del:after{transform:rotate(-45deg)}.select-base .icon-arrow,.select-multi .icon-arrow,.cascader .icon-arrow,.cascader-multi .icon-arrow{display:block;position:absolute;right:4px;top:50%;width:10px;height:5px;margin:-2.5px 0 0;transition:transform 0.3s ease}.select-base .icon-arrow:before,.select-multi .icon-arrow:before,.cascader .icon-arrow:before,.cascader-multi .icon-arrow:before{content:'';position:absolute;bottom:-6px;width:0;height:0;border:5px solid transparent;border-bottom:0;border-top-color:#666;bottom:0}.select-base .icon-arrow:after,.select-multi .icon-arrow:after,.cascader .icon-arrow:after,.cascader-multi .icon-arrow:after{content:'';position:absolute;bottom:-6px;width:0;height:0;border:5px solid transparent;border-bottom:0;border-top-color:#fff;bottom:1px}.select-base .icon-arrow.reverse,.select-multi .icon-arrow.reverse,.cascader .icon-arrow.reverse,.cascader-multi .icon-arrow.reverse{transform:rotate(180deg)}.select-base .options,.select-multi .options,.cascader .options,.cascader-multi .options{width:100%;padding:4px 0;z-index:9999;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.select-base .options .option,.select-multi .options .option,.cascader .options .option,.cascader-multi .options .option{height:30px;line-height:30px;padding:0 10px}.select-base .options .option:hover,.select-multi .options .option:hover,.cascader .options .option:hover,.cascader-multi .options .option:hover{background:#e9f9f4 }.select-base .options .option.selected,.select-multi .options .option.selected,.cascader .options .option.selected,.cascader-multi .options .option.selected{color:#fff ;background:#30b386 }