meri-design/dist/theme/DropDownButton.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)}}.disable-element{pointer-events:none}.drop-list-padding-top{padding-top:7px}.drop-list-padding-btm{padding-bottom:7px}.drop-list-surround{max-width:240px;min-width:180px;outline:0;position:absolute;z-index:7000}.drop-list-surround .drop-list-input{border:none;height:0;opacity:0;width:0}.drop-list-surround .drop-list{position:relative;z-index:7001}.drop-list-surround .drop-list .drop-list-inner{background-color:#fff;border:1px solid #e1e5eb;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);max-height:190px;overflow-y:auto;padding-bottom:6px;padding-top:6px}.drop-list-surround .drop-list .drop-list-inner .active{background-color:#d9ebff;color:#246fe5}.drop-list-surround .drop-list .drop-list-inner .drop-item:hover{background-color:#f1f4f6}.drop-list-surround .drop-list .drop-list-inner div{color:#1b2129;cursor:pointer;font-size:14px;height:38px;line-height:38px;overflow:hidden;padding-left:12px;padding-right:12px;text-overflow:ellipsis;white-space:nowrap}.drop-list-surround .drop-list .drop-list-inner div:active,.drop-list-surround .drop-list .drop-list-inner div:after{background-color:#d9ebff}.drop-list-surround .drop-list .drop-list-inner .disabled{color:#c4c9cf;cursor:not-allowed}.drop-list-surround .drop-list .drop-list-inner .disabled:active,.drop-list-surround .drop-list .drop-list-inner .disabled:hover{background-color:#f1f4f6}.p-d-button{align-items:center;border-radius:4px;display:inline-flex;font-size:0;position:relative;transition:all .36s}.p-d-button:after,.p-d-button:before{color:transparent;content:"1"}.p-d-button+.p-d-button{margin-left:12px}.p-d-button .p-d-button-text{border-bottom-left-radius:4px;border-top-left-radius:4px;flex-grow:1;overflow:hidden;padding-left:8px;text-align:center;text-overflow:ellipsis;transition:background-color .36s;white-space:nowrap}.p-d-button .p-d-button-split-line{width:1px}.p-d-button .p-d-button-triangle{border-bottom-right-radius:4px;border-top-right-radius:4px;text-align:center;transition:all .36s}.p-d-button .p-d-button-triangle .p-d-button-rotate,.p-d-button .p-d-button-triangle .p-d-button-triangle-svg{height:16px;transition:all .36s;vertical-align:middle;width:16px}.p-d-button .p-d-button-triangle .p-d-button-rotate path,.p-d-button .p-d-button-triangle .p-d-button-triangle-svg path{transition:all .36s}.p-d-button .p-d-button-triangle .p-d-button-rotate{transform:rotate(180deg)}.p-d-button-default.p-d-button-drop,.p-d-button-default.p-d-button-split-drop{background-color:#fff;border:1px solid #c4c9cf}.p-d-button-default{border-color:#c4c9cf;color:#1b2129;cursor:pointer}.p-d-button-default:hover{border-color:#246fe5}.p-d-button-default:active{border-color:#215dd9}.p-d-button-default-drop:hover,.p-d-button-default.p-d-button-drop:hover{color:#246fe5}.p-d-button-default-drop:hover .p-d-button-triangle path,.p-d-button-default.p-d-button-drop:hover .p-d-button-triangle path{fill:#246fe5}.p-d-button-default-drop:active,.p-d-button-default.p-d-button-drop:active{color:#215dd9}.p-d-button-default-drop:active .p-d-button-triangle path,.p-d-button-default.p-d-button-drop:active .p-d-button-triangle path{fill:#215dd9}.p-d-button-default.p-d-button-split-drop .p-d-button-split-line{background-color:#c4c9cf}.p-d-button-default.p-d-button-split-drop .p-d-button-text:hover{color:#246fe5}.p-d-button-default.p-d-button-split-drop .p-d-button-text:active{color:#215dd9}.p-d-button-default.p-d-button-split-drop .p-d-button-triangle:hover path{fill:#246fe5}.p-d-button-default.p-d-button-split-drop .p-d-button-triangle:active path{fill:#215dd9}.p-d-button-primary.p-d-button-drop,.p-d-button-primary.p-d-button-split-drop{background-color:#246fe5;color:#fff;cursor:pointer}.p-d-button-primary.p-d-button-drop .p-d-button-triangle path,.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle path{fill:#fff}.p-d-button-primary.p-d-button-drop:hover{background-color:#2481f2}.p-d-button-primary.p-d-button-drop:active{background-color:#215dd9}.p-d-button-primary.p-d-button-drop:after{background:radial-gradient(circle,#64a6f7 10%,transparent 0)}.p-d-button-primary.p-d-button-split-drop .p-d-button-split-line{background-color:#d9ebff}.p-d-button-primary.p-d-button-split-drop .p-d-button-text:hover,.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle:hover{background-color:#2481f2}.p-d-button-primary.p-d-button-split-drop .p-d-button-text:active,.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle:active{background-color:#215dd9}.p-d-button-primary.p-d-button-split-drop .p-d-button-text:after,.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle:after{background:radial-gradient(circle,#64a6f7 10%,transparent 0)}.p-d-button-large{height:40px;max-width:154px;min-width:98px}.p-d-button-large .p-d-button-text{font-size:16px}.p-d-button-large .p-d-button-triangle{width:32px}.p-d-button-drop.p-d-button-large{line-height:38px}.p-d-button-default-drop.p-d-button-large,.p-d-button-split-drop.p-d-button-large{line-height:40px}.p-d-button-split-drop.p-d-button-large.p-d-button-default .p-d-button-split-line,.p-d-button-split-drop.p-d-button-large.p-d-button-primary .p-d-button-split-line{height:14px}.p-d-button-split-drop.p-d-button-large .p-d-button-text{padding-right:14px}.p-d-button-medium{height:32px;max-width:126px;min-width:86px}.p-d-button-medium .p-d-button-text{font-size:14px}.p-d-button-medium .p-d-button-triangle{width:28px}.p-d-button-drop.p-d-button-medium{line-height:30px}.p-d-button-default-drop.p-d-button-medium,.p-d-button-split-drop.p-d-button-medium{line-height:32px}.p-d-button-split-drop.p-d-button-medium.p-d-button-default .p-d-button-split-line,.p-d-button-split-drop.p-d-button-medium.p-d-button-primary .p-d-button-split-line{height:12px}.p-d-button-split-drop.p-d-button-medium .p-d-button-text{padding-right:12px}.p-d-button-small{height:28px;max-width:126px}.p-d-button-small .p-d-button-text{font-size:14px}.p-d-button-small .p-d-button-triangle{width:24px}.p-d-button-drop.p-d-button-small{line-height:26px}.p-d-button-default-drop.p-d-button-small,.p-d-button-split-drop.p-d-button-small{line-height:28px}.p-d-button-split-drop.p-d-button-small.p-d-button-default .p-d-button-split-line,.p-d-button-split-drop.p-d-button-small.p-d-button-primary .p-d-button-split-line{height:10px}.p-d-button-split-drop.p-d-button-small .p-d-button-text{padding-right:10px}.p-d-button-split-drop.p-dd-button-disabled,.p-d-button.p-dd-button-disabled{background-color:#e8ecf0;border-style:none;color:#c4c9cf;cursor:not-allowed}.p-d-button-split-drop.p-dd-button-disabled .p-d-button-split-line,.p-d-button.p-dd-button-disabled .p-d-button-split-line{background-color:#c4c9cf}.p-d-button-split-drop.p-dd-button-disabled:active,.p-d-button-split-drop.p-dd-button-disabled:hover,.p-d-button.p-dd-button-disabled:active,.p-d-button.p-dd-button-disabled:hover{background-color:#e8ecf0;color:#c4c9cf}.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text path,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle path,.p-d-button.p-dd-button-disabled .p-d-button-text path,.p-d-button.p-dd-button-disabled .p-d-button-triangle path{fill:#8b949e}.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:active,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:hover,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:active,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:hover,.p-d-button.p-dd-button-disabled .p-d-button-text:active,.p-d-button.p-dd-button-disabled .p-d-button-text:hover,.p-d-button.p-dd-button-disabled .p-d-button-triangle:active,.p-d-button.p-dd-button-disabled .p-d-button-triangle:hover{background-color:#e8ecf0;color:#c4c9cf}.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:active path,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:hover path,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:active path,.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:hover path,.p-d-button.p-dd-button-disabled .p-d-button-text:active path,.p-d-button.p-dd-button-disabled .p-d-button-text:hover path,.p-d-button.p-dd-button-disabled .p-d-button-triangle:active path,.p-d-button.p-dd-button-disabled .p-d-button-triangle:hover path{fill:#8b949e}