@uicapivara/cp-select/dist/cp-select.min.css

cp-select

cp-select *{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}cp-select ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:3px}cp-select ::-webkit-scrollbar{width:5px}cp-select ::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}cp-select .cp-select-container{margin:0;padding:0;display:flex;align-items:center;width:100%;position:relative;border-radius:3px;background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;height:34px}cp-select .cp-select-container div.cp-select-view{flex:1;padding:0 14px}cp-select .cp-select-container input{margin:0;padding:0 14px;display:block;width:100%;height:100%;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:none;outline:none}cp-select .cp-select-container input~label{display:none}cp-select .cp-select-container ul{z-index:99999999999;display:none;flex-direction:column;border:1px solid #ccc;position:fixed;background:#fff;padding:0;margin:0;max-height:300px;overflow:auto}cp-select .cp-select-container ul li{max-width:100%;min-height:48px;display:flex;align-items:center;padding:5px 14px;cursor:pointer}cp-select .cp-select-container ul li.focused,cp-select .cp-select-container ul li:hover{background:#f5f5f5}cp-select .cp-select-container ul li>*{display:flex;align-items:center}cp-select .cp-select-container ul li img{margin-right:10px}cp-select .cp-select-container ul li .cp-option-content{flex:1}cp-select .cp-select-container ul li .cp-favorite-content{width:30px}cp-select .cp-select-container ul li .cp-favorite-content svg{width:18px}cp-select .cp-select-container .cp-select-btns{cursor:pointer;height:100%;display:flex;align-items:center;margin-right:14px}cp-select .cp-select-container .arrow-down{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #666}cp-select .cp-select-container .close{position:relative;width:24px;height:12px;opacity:1}cp-select .cp-select-container .close:hover{opacity:1}cp-select .cp-select-container .close:after,cp-select .cp-select-container .close:before{position:absolute;left:15px;content:" ";height:12px;width:2px;background-color:#333}cp-select .cp-select-container .close:before{transform:rotate(45deg)}cp-select .cp-select-container .close:after{transform:rotate(-45deg)}cp-select .cp-select-loading{display:inline-block;width:14px;height:14px;border:2px solid #333;border-radius:100%;border-top:2px solid transparent;-webkit-animation:load-animate infinite linear 1s;animation:load-animate infinite linear 1s}@-webkit-keyframes load-animate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes load-animate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}cp-select.md .cp-select-container{background:transparent;box-shadow:none;border:none;border-bottom:1px solid #ccc;border-radius:0}cp-select.md .cp-select-container input{background:transparent;padding:0;height:34px;font-size:14px;line-height:1.42857143}cp-select.md .cp-select-container input~label{display:block;position:absolute;letter-spacing:2px;font-size:15px;pointer-events:none;left:0;top:7px;transition:all .2s ease;color:#999;font-weight:400;font-family:Roboto,sans-serif}cp-select.md .cp-select-container input.focused~label,cp-select.md .cp-select-container input:focus~label,cp-select.md .cp-select-container input[reflect-value]:not([reflect-value=""])~label{top:-12px;transform:translateZ(0) scale(.8);transform-origin:left top;font-size:1.6rem}cp-select.md .cp-select-container ul{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);transition:all .4s cubic-bezier(.25,.8,.25,1);border-radius:2px;border:none}cp-select.md .cp-select-container .cp-select-btns{margin-right:5px}