meri-design/dist/theme/SelectAndInput.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.selectDownUpExtend-enter-active{animation:selectDownUpExtend .3s}.selectDownUpExtend-leave-active{animation:selectDownUpExtend .3s reverse}.selectDownUpExtendTop-enter-active{animation:selectDownUpExtendTop .3s}.selectDownUpExtendTop-leave-active{animation:selectDownUpExtendTop .3s reverse}@-moz-keyframes selectDownUpExtend{0%{opacity:0;pointer-events:none;transform:translate3d(0,-8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@-webkit-keyframes selectDownUpExtend{0%{opacity:0;pointer-events:none;transform:translate3d(0,-8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@-o-keyframes selectDownUpExtend{0%{opacity:0;pointer-events:none;transform:translate3d(0,-8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@keyframes selectDownUpExtend{0%{opacity:0;pointer-events:none;transform:translate3d(0,-8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@-moz-keyframes selectDownUpExtendTop{0%{opacity:0;pointer-events:none;transform:translate3d(0,8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@-webkit-keyframes selectDownUpExtendTop{0%{opacity:0;pointer-events:none;transform:translate3d(0,8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@-o-keyframes selectDownUpExtendTop{0%{opacity:0;pointer-events:none;transform:translate3d(0,8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}@keyframes selectDownUpExtendTop{0%{opacity:0;pointer-events:none;transform:translate3d(0,8px,0)}to{opacity:1;pointer-events:auto;transform:translateZ(0)}}.p-drop{display:inline-block;font-size:0;text-align:left;vertical-align:middle}.p-drop+.p-drop{margin-left:8px}.p-drop:hover .p-drop-title-content{color:#246fe5}.p-drop:hover .p-drop-svg path{fill:#246fe5}.p-drop:hover .p-drop-clear{display:block}.p-drop-title{align-items:center;cursor:pointer;display:flex;position:relative}.p-drop-title .p-drop-title-content{font-size:14px;transition:color .3s}.p-drop-title .p-drop-svg{height:16px;line-height:1;width:16px}.p-drop-title .p-drop-svg svg{transition:transform .3s}.p-drop-title .p-drop-svg svg path{transition:fill .3s}.p-drop-title .p-drop-triangle-rotate svg{transform:rotate(180deg)}.p-drop-title .p-drop-clear{background-color:#fff;display:none;position:absolute;right:0;z-index:1}.p-drop-show .p-drop-title-content{color:#246fe5}.p-drop-show .p-drop-triangle path{fill:#246fe5}.p-drop-disabled .p-drop-title{cursor:not-allowed}.p-drop-light .p-drop-title{color:#1b2129}.p-drop-dark .p-drop-title{color:#fff}.p-drop-dark .p-drop-triangle svg path{fill:#246fe5}.p-drop-content{border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);display:inline-block;font-size:0;min-width:120px;outline:none;padding-bottom:8px;padding-top:8px;pointer-events:none;position:absolute;z-index:7000}.p-drop-content-top-arrow{filter:drop-shadow(0 -2px 4px rgba(31,35,41,.1))}.p-drop-content-top-arrow:before{border-color:transparent transparent #fff;border-style:solid;border-width:0 6px 6px;content:"";height:0;position:absolute;right:12px;top:-6px;width:0}.p-drop-content-bottom-arrow{filter:drop-shadow(0 2px 4px rgba(31,35,41,.1))}.p-drop-content-bottom-arrow:after{border-color:#fff transparent transparent;border-style:solid;border-width:6px 6px 0;bottom:-6px;content:"";height:0;position:absolute;right:12px;width:0}.p-drop-option{min-height:38px;width:100%}.p-drop-option .p-drop-option-item{cursor:pointer;font-size:14px;height:38px;overflow:hidden;padding-left:12px;padding-right:12px;text-overflow:ellipsis;transition:background-color .3s;white-space:nowrap;width:100%}.p-drop-option .p-drop-option-item .p-drop-option-svg{margin-right:8px}.p-drop-option .p-drop-option-item .p-drop-option-svg svg{vertical-align:middle}.p-drop-option .p-drop-option-item span{line-height:38px;vertical-align:middle}.p-drop-option .p-drop-option-item span .p-drop-option-svg svg path{fill:#246fe5}.p-drop-option .p-drop-option-item.p-drop-option-disable{cursor:not-allowed}.p-drop-search{display:block;height:40px;padding-bottom:8px;padding-left:12px;padding-right:12px;position:relative;width:100%}.p-drop-search .p-drop-input{background:none;border:1px solid #c4c9cf;border-radius:4px;color:#1b2129;font-size:14px;height:100%;outline:none;padding-left:12px;padding-right:30px;width:100%}.p-drop-search .p-drop-clear{cursor:pointer;height:30px;line-height:30px;position:absolute;right:13px;text-align:center;top:1px;width:30px}.p-drop-search .p-drop-clear:hover path{fill:#246fe5}.p-drop-search .p-drop-clear svg{font-size:0;height:16px;vertical-align:middle;width:16px}.p-drop-search .p-drop-clear svg path{transition:fill .3s}.p-drop-search-shadow{box-shadow:0 2px 10px rgba(31,35,41,.1)}.p-drop-content-light{background-color:#fff;border:1px solid #e1e5eb}.p-drop-content-light .p-drop-option-item{color:#1b2129}.p-drop-content-light .p-drop-option-item:hover{background-color:#f1f4f6}.p-drop-content-light .p-drop-option-item.p-drop-option-selected{background-color:#d9ebff;color:#246fe5}.p-drop-content-light .p-drop-option-item.p-drop-option-disable{color:#c4c9cf}.p-drop-content-dark{background-color:#1034b2;border:1px solid #246fe5}.p-drop-content-dark .p-drop-option-item{color:#fff}.p-drop-content-dark .p-drop-option-item:hover{background-color:#1241bf}.p-drop-content-dark .p-drop-option-item.p-drop-option-selected{background-color:#1b4acc;color:#ebf6ff}.p-drop-content-dark .p-drop-option-item.p-drop-option-disable{color:#9fc9fb}.m-select-and-input{border:1px solid #c4c9cf;border-radius:4px;display:inline-flex;font-size:0;height:32px;overflow:hidden;transition:border-color .2s}.m-select-and-input+.m-select-and-input{margin-top:8px}.m-select-and-input:hover,.m-select-and-input:hover .m-select-dropdown{border-color:#246fe5}.m-select-dropdown{border-right:1px solid #c4c9cf;padding-left:12px;padding-right:8px;transition:border-color .2s}.m-select-dropdown-placeholder,.m-select-dropdown-text{height:30px;line-height:30px;width:100%}.m-select-dropdown-placeholder{color:#c4c9cf}.m-select-input{display:flex}.m-select-input-item{align-items:center;color:#1b2129;display:flex}.m-select-input-line{color:#626c78;font-size:14px;padding-left:12px;transform:translateY(-2px)}.m-select-input-field{background:none;border:0;font-size:14px;height:30px;outline:none;padding-left:12px;width:64px}.m-select-input-field::placeholder{color:#c4c9cf}.m-select-input-unit{background-color:#e8ecf0;font-size:14px;height:30px;line-height:30px;text-align:center;width:30px}