deer-ui/lib/select/style.css

React.js UI components for PC Web

@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes b{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}to{opacity:1;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@keyframes b{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}to{opacity:1;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@-webkit-keyframes c{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}}@keyframes c{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}}.deer-ui-select{width:200px}.deer-ui-select,.deer-ui-select-inner{position:relative;display:inline-block}.deer-ui-select-inner{width:100%}.deer-ui-select-inner svg{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s cubic-bezier(.165,.84,.44,1);transition:.5s cubic-bezier(.165,.84,.44,1)}.deer-ui-select-open{-webkit-animation:b .5s cubic-bezier(.165,.84,.44,1) forwards;animation:b .5s cubic-bezier(.165,.84,.44,1) forwards}.deer-ui-select-close{-webkit-animation:c .5s cubic-bezier(.165,.84,.44,1) forwards;animation:c .5s cubic-bezier(.165,.84,.44,1) forwards;pointer-events:none}.deer-ui-select-active .deer-ui-select-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:.5s cubic-bezier(.165,.84,.44,1);transition:.5s cubic-bezier(.165,.84,.44,1)}.deer-ui-select-loading{-webkit-animation:a 1.5s linear infinite;animation:a 1.5s linear infinite}.deer-ui-select-content{width:100%;max-height:200px;overflow-x:hidden;overflow-y:auto;position:absolute;z-index:1;left:0;top:0;margin-top:5px;-webkit-transform:scale(0);transform:scale(0);background:#fff;border:1px solid #e8e8e8;box-shadow:0 4px 22px 0 rgba(15,35,95,.12);border-radius:4px}.deer-ui-select-option{width:100%;border-bottom:1px solid #e8e8e8;background:#fff;-webkit-transition:all .5s cubic-bezier(.165,.84,.44,1);transition:all .5s cubic-bezier(.165,.84,.44,1);cursor:pointer;text-align:left;overflow:hidden;padding:8px 5px;color:rgba(0,0,0,.65);font-size:14px}.deer-ui-select-option:hover{border-color:transparent;background-color:rgba(49,194,124,.2)}.deer-ui-select-option:last-child{border-bottom:none}.deer-ui-select-option-selected{color:#fff;background-color:#31c27c;border-color:#31c27c;border-bottom:1px solid #31c27c;text-shadow:0 1px 0 rgba(0,0,0,.1)}.deer-ui-select-option-selected:hover{border-color:transparent;background-color:#31c27c}.deer-ui-select-option-disabled{background-color:#f5f5f5;cursor:not-allowed;color:rgba(0,0,0,.2)}.deer-ui-select-option-disabled:hover{border-color:transparent;background-color:#f5f5f5}