meri-design/dist/theme/SelectScreen.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
 */.p-checkbox{align-items:center;cursor:pointer;display:inline-flex;min-height:16px;min-width:16px;vertical-align:middle;z-index:1}.p-checkbox+.p-checkbox{margin-left:8px}.p-checkbox-box{border:1px solid transparent;border-radius:2px;height:16px;position:relative;transition:all .3s;vertical-align:middle;width:16px}.p-checkbox-box:hover{box-shadow:0 0 4px 0 rgba(78,131,253,.4)}.p-checkbox-box:after{background:none;content:"";pointer-events:none;position:absolute;transform:rotate(0) scale(0);transition:transform .2s ease-in-out;z-index:1}.p-checkbox-uncheck{background-color:#fff;border-color:#c4c9cf}.p-checkbox-checked,.p-checkbox-uncheck:hover{border-color:#246fe5}.p-checkbox-checked{background-color:#246fe5}.p-checkbox-checked:after{border-bottom:2px solid #fff;border-right:2px solid #fff;height:8px;left:5px;top:2px;transform:rotate(45deg) scale(1);width:4px}.p-checkbox-notNull{background-color:#246fe5;border-color:#246fe5}.p-checkbox-notNull:after{background-color:#fff;height:2px;left:3px;top:6px;transform:scale(1);width:8px}.p-checkbox-text{color:#1b2129;font-size:14px;overflow:hidden;padding-left:8px;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:calc(100% - 16px)}.p-checkbox-disabled{cursor:not-allowed}.p-checkbox-disabled>i{pointer-events:none}.p-checkbox-disabled .p-checkbox-uncheck{background-color:#e1e5eb}.p-checkbox-disabled .p-checkbox-checked,.p-checkbox-disabled .p-checkbox-notNull{background-color:#c4c9cf;border-color:#c4c9cf}.p-drop-box{background-color:#fff;border:1px solid #e1e5eb;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);font-size:0;max-width:240px;min-width:120px;outline:none;overflow:hidden;padding-bottom:8px;padding-top:8px;position:absolute;z-index:7000}.p-drop-box-multiple{max-height:250px}.p-drop-box-multiple-search{height:250px}.p-drop-box-single{max-height:208px}.p-drop-box-single-search{height:208px}.p-drop-box-search{margin:4px 12px;position:relative;width:calc(100% - 24px)}.p-drop-box-input{border:1px solid #c4c9cf;border-radius:4px;color:#1b2129;font-size:14px;height:32px;outline:none;padding-left:8px;padding-right:30px;transition:border-color .3s;width:100%}.p-drop-box-input:active,.p-drop-box-input:focus,.p-drop-box-input:hover{border-color:#246fe5}.p-drop-box-input-clear{cursor:pointer;display:inline-block;height:30px;padding-top:7px;position:absolute;right:1px;text-align:center;top:1px;width:30px}.p-drop-box-input-clear svg{height:16px;width:16px}.p-drop-box-input-clear svg path{transition:fill .3s}.p-drop-box-input-clear:hover svg path{fill:#246fe5}.p-drop-box-list{max-height:190px;overflow-x:hidden;overflow-y:auto;width:100%}.p-drop-box-item{align-items:center;color:#1b2129;cursor:pointer;display:flex;height:38px;line-height:38px;overflow:hidden;padding-left:12px;padding-right:12px;text-overflow:ellipsis;transition:background-color .3s;white-space:nowrap;width:100%}.p-drop-box-item:hover{background-color:#e8ecf0}.p-drop-box-item.p-drop-item-selected{background-color:#d9ebff;color:#246fe5}.p-drop-box-item .p-drop-box-text{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.p-drop-box-item-checkbox .p-drop-box-text{width:calc(100% - 20px)}.p-drop-box-item-selected{background-color:#d9ebff}.p-drop-box-item-selected .p-drop-box-text{color:#246fe5}.p-drop-box-handle{background-color:#fff;bottom:0;display:flex;height:42px;justify-content:flex-end;left:0;line-height:42px;padding-left:12px;padding-right:12px;position:absolute;width:100%;z-index:10}.p-drop-box-handle .p-drop-box-btn{cursor:pointer;font-size:14px;transition:color .3s}.p-drop-box-handle .p-drop-box-cancel{color:#1b2129;margin-right:16px}.p-drop-box-handle .p-drop-box-cancel:hover,.p-drop-box-handle .p-drop-box-confirm{color:#246fe5}.p-drop-box-handle .p-drop-box-confirm:active{color:#215dd9}.p-drop-box-handle .p-drop-box-disabled{color:#c4c9cf;cursor:not-allowed}.p-drop-box-handle-shadow{box-shadow:0 -2px 10px rgba(31,35,41,.1)}.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-popover-tip{border-radius:4px;display:inline-block;font-size:0;max-width:480px;padding-top:8px;position:absolute;z-index:7000}.p-popover-tip .p-popover-tip-triangle{border-style:solid;height:0;left:50%;position:absolute;width:0}.p-popover-tip-split{background-color:#fff}.p-popover-tip-split.p-popover-tip-top .p-popover-tip-triangle{border-color:#fff transparent transparent}.p-popover-tip-split.p-popover-tip-bottom .p-popover-tip-triangle{border-color:transparent transparent #fff}.p-popover-tip-words{background-color:rgba(31,36,41,.8)}.p-popover-tip-words.p-popover-tip-top .p-popover-tip-triangle{border-color:rgba(31,36,41,.8) transparent transparent}.p-popover-tip-words.p-popover-tip-bottom .p-popover-tip-triangle{border-color:transparent transparent rgba(31,36,41,.8)}.p-popover-tip-top{filter:drop-shadow(0 2px 4px rgba(31,35,41,.1))}.p-popover-tip-top .p-popover-tip-triangle{border-width:6px 6px 0;bottom:-6px}.p-popover-tip-bottom{filter:drop-shadow(0 -2px 4px rgba(31,35,41,.1))}.p-popover-tip-bottom .p-popover-tip-triangle{border-width:0 6px 6px;top:-6px}.p-popover-tip-content{display:flex;flex-wrap:wrap;max-height:184px;max-width:480px;padding-left:4px;padding-right:8px}.p-popover-tip-content .p-popover-tip-content-item{background-color:#f1f4f6;border-radius:2px;margin-bottom:8px;margin-left:4px;max-width:100%;overflow:hidden;padding-left:4px;padding-right:4px;white-space:nowrap}.p-popover-tip-content .p-popover-tip-content-item .p-popover-tip-item-text{color:#1b2129;display:inline-block;font-size:14px;line-height:24px;width:100%}.p-popover-tip-content .p-popover-tip-content-item-before{position:relative}.p-popover-tip-content .p-popover-tip-content-item-before:before{background-color:#f1f4f6;border-radius:2px;color:#1b2129;content:"...";display:inline-block;font-size:14px;height:24px;left:0;position:absolute;text-align:center;top:0;width:20px;z-index:1}.p-popover-tip-content-words{color:#fff;display:inline-block;font-size:14px;line-height:24px;padding-bottom:8px;padding-left:4px;width:100%}.p-select-screen{align-items:center;cursor:pointer;display:inline-flex;font-size:0;height:20px;line-height:20px;position:relative}.p-select-screen-none{pointer-events:none}.p-select-screen-title{color:#1b2129;font-size:12px}.p-select-screen-num{color:#246fe5;padding-left:4px;padding-right:4px}.p-select-screen-svg{height:20px;margin-left:8px}.p-select-screen-svg svg{height:16px;transition:transform .3s;vertical-align:middle;width:16px}.p-select-screen-svg svg path{transition:fill .3s}.p-select-screen-svg:hover svg path{fill:#246fe5}.p-select-triangle-open svg{transform:rotate(180deg)}.p-select-screen-svg-active svg path{fill:#246fe5}.p-select-screen-shade{cursor:pointer;height:100%;opacity:0;pointer-events:auto;position:absolute;width:100%}