meri-design/dist/theme/Cascader.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-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-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-cascader-column{box-sizing:border-box;overflow:auto;width:100%}.p-cascader-column .p-cascader-menu{border-right:1px solid #e8ecf0;display:inline-block;font-size:0;height:222px;min-width:120px;overflow:auto;padding:8px 0;vertical-align:top}.p-cascader-column .p-cascader-menu li.p-cascader-item{align-items:center;box-sizing:border-box;color:#1b2129;cursor:pointer;display:flex;font-size:14px;height:38px;line-height:22px;list-style:none;padding:8px 12px;text-align:left;transition:all .3s;white-space:nowrap}.p-cascader-column .p-cascader-menu li.p-cascader-item .p-cascader-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-cascader-column .p-cascader-menu li.p-cascader-item .p-checkbox{height:24px;padding-right:4px;padding-top:0}.p-cascader-column .p-cascader-menu li.p-cascader-item .p-cascader-item-text-disabled{color:#c4c9cf;cursor:not-allowed}.p-cascader-column .p-cascader-menu li.p-cascader-item:hover{background-color:#f1f4f6}.p-cascader-column .p-cascader-menu li.p-cascader-item-active{background:#d9ebff;color:#246fe5}.p-cascader-column .p-cascader-menu li.p-cascader-item-active i.p-cascader-item-loading{pointer-events:none}.p-cascader-column .p-cascader-menu li.p-cascader-item-disabled{color:#c4c9cf;cursor:not-allowed}.p-cascader-column .p-cascader-menu li.p-cascader-item-disabled:hover{background:transparent}.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-cascader-drop{background:#fff;border:1px solid #e1e5eb;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);font-size:0;position:absolute;width:auto}.p-cascader-drop .p-cascader-select-container{background:#fff;display:flex;justify-content:flex-start;white-space:nowrap}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-filter{border-right:1px solid #e1e5eb;min-width:120px;width:100%}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-filter ul.p-cascader-filter-menu{height:222px;overflow:auto}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-filter ul.p-cascader-filter-menu li.p-cascader-filter-menu-item{align-items:center;color:#1b2129;cursor:pointer;display:flex;height:38px;list-style:none;padding:8px 16px;white-space:nowrap}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-filter ul.p-cascader-filter-menu li.p-cascader-filter-menu-item .p-cascader-item-text{display:inline-block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-no-found{background:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);box-sizing:border-box;color:#c4c9cf;font-size:14px;line-height:22px;max-width:600px;min-width:180px;overflow:hidden;padding:16px 0 16px 12px;text-overflow:ellipsis;white-space:nowrap;width:100%}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-select-panel-footer{align-items:center;border-top:1px solid #e8ecf0;display:flex;font-size:14px;height:45px;justify-content:flex-end;line-height:45px;padding:0 12px 0 16px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-select-panel-footer span{cursor:pointer}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-select-panel-footer span:first-child{color:#1b2129;margin-right:16px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-select-panel-footer span:last-child{color:#246fe5;margin-right:12px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-panel .p-cascader-select-panel-footer span.disabled-confirm-btn{color:#c4c9cf;cursor:not-allowed}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list{height:222px;min-width:200px;position:relative}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .disabled-confirm-btn{color:#c4c9cf;cursor:not-allowed}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-header{align-items:center;border-bottom:1px solid #e8ecf0;color:#8b949e;display:flex;font-size:14px;height:45px;justify-content:space-between;line-height:45px;padding:0 12px 0 16px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-header .p-cascader-selected-text{color:#1b2129;font-weight:600;margin:0 4px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-header span.p-cascader-clear{color:#c4c9cf}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body{height:calc(100% - 90px)}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body .p-cascader-select-list-items{height:100%;overflow-y:auto}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body .p-cascader-select-list-items li{align-items:center;color:#1b2129;cursor:pointer;display:flex;font-size:14px;justify-content:flex-start;line-height:22px;list-style:none;padding:8px 16px;position:relative}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body .p-cascader-select-list-items li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body .p-cascader-select-list-items li .p-cascader-clear-icon{height:14px;position:absolute;right:16px;top:50%;transform:translateY(-60%);width:14px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body .p-cascader-select-list-items li .p-cascader-clear-icon:hover svg path{fill:#246fe5}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-body .p-cascader-select-list-items li:hover{background:#f1f4f6}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-footer{align-items:center;color:#1b2129;display:flex;font-size:14px;height:45px;justify-content:flex-end;width:100%}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-footer span{cursor:pointer}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-footer span:first-child{color:#1b2129;margin-right:16px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-footer span:last-child{color:#246fe5;margin-right:12px}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-footer span.disabled-confirm-btn{color:#c4c9cf;cursor:not-allowed}.p-cascader-drop .p-cascader-select-container .p-cascader-select-list .p-cascader-select-list-footer-shadow{box-shadow:0 -2px 10px rgba(31,35,41,.1)}.p-cascader{cursor:pointer;height:32px;width:400px}.p-cascader .p-cascader-header{border:1px solid #c4c9cf;border-radius:4px;height:32px;position:relative;width:100%;z-index:10}.p-cascader .p-cascader-header .p-cascader-caption{color:#8b949e;display:inline-block;float:left;font-size:14px;height:30px;line-height:30px;max-width:196px;overflow:hidden;padding-left:12px;text-overflow:ellipsis;white-space:nowrap}.p-cascader .p-cascader-header .p-cascader-fake-input{display:inline-block;float:left;height:30px;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-input,.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-placeholder{color:#c4c9cf;font-size:14px;height:30px;left:0;line-height:30px;overflow:hidden;padding-left:12px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-placeholder-input{color:#1b2129}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-placeholder{pointer-events:none}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-placeholder .p-cascader-selected{color:#1b2129}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-placeholder .p-cascader-number{color:#246fe5}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-placeholder .p-cascader-normal{color:#c4c9cf}.p-cascader .p-cascader-header .p-cascader-fake-input .p-cascader-input{background:transparent;border:none;color:#1b2129;cursor:pointer;outline:none}.p-cascader .p-cascader-header .p-cascader-triangle{height:16px;position:absolute;right:8px;top:8px;transform:rotate(180deg);transform-origin:center center;transition:transform .3s;width:16px;will-change:rotate}.p-cascader .p-cascader-header .p-cascader-clear{height:14px;position:absolute;right:8px;top:8px;width:14px}.p-cascader .p-cascader-header .p-cascader-clear path{fill:#e1e5eb}.p-cascader .p-cascader-header .p-cascader-clear:hover path{fill:#246fe5;transition:fill .3s}.p-cascader .p-cascader-header .p-cascader-triangle-up{transform:rotate(0deg)}.p-cascader .p-cascader-header .p-cascader-triangle-down{transform:rotate(180deg)}.p-cascader .p-cascader-header:hover{border:1px solid #246fe5;transition:.3s}.p-cascader .p-cascader-header .p-select-input-tip{background-color:#fff;border-radius:4px;max-height:104px;max-width:280px;padding:16px 20px;pointer-events:none;position:absolute;z-index:100}.p-cascader .p-cascader-header .p-select-input-tip:after{border-style:solid;border-width:4px;content:"";display:inline-block;height:0;position:absolute;transform:rotate(-45deg);width:0;z-index:0}.p-cascader .p-cascader-header .p-select-input-tip .p-select-input-tip-item{word-wrap:break-word;font-size:14px;line-height:22px;max-height:66px;overflow:hidden;position:relative;word-break:break-all}.p-cascader .p-cascader-header .p-select-input-tip .p-select-input-tip-overflow:after{background-color:#fff;bottom:0;content:"...";display:inline-block;height:22px;position:absolute;right:0;width:20px}.p-cascader .p-cascader-header .p-select-input-tip-top{box-shadow:0 2px 10px rgba(31,35,41,.1)}.p-cascader .p-cascader-header .p-select-input-tip-top:after{border-color:transparent transparent #fff #fff;bottom:-4px;box-shadow:-2px 2px 4px rgba(31,35,41,.1);left:58px;z-index:-1}.p-cascader .p-cascader-header .p-select-input-tip-bottom{box-shadow:-2px 0 10px rgba(31,35,41,.1)}.p-cascader .p-cascader-header .p-select-input-tip-bottom:after{border-color:#fff #fff transparent transparent;box-shadow:2px -2px 4px rgba(31,35,41,.1);left:58px;top:-4px}.p-cascader .p-cascader-header .p-select-input-tip-left{box-shadow:2px 0 10px rgba(31,35,41,.1)}.p-cascader .p-cascader-header .p-select-input-tip-left:after{border-color:transparent #fff #fff transparent;box-shadow:2px 2px 4px rgba(31,35,41,.1);right:-4px;top:49%}.p-cascader .p-cascader-header .p-select-input-tip-right{box-shadow:0 -2px 10px rgba(31,35,41,.1)}.p-cascader .p-cascader-header .p-select-input-tip-right:after{border-color:#fff transparent transparent #fff;box-shadow:-2px -2px 4px rgba(31,35,41,.1);left:-4px;top:49%}.p-cascader .p-cascader-focused{border:1px solid #246fe5;box-shadow:0 0 0 2px rgba(0,145,255,.2);transition:.3s}.p-cascader .p-cascader-focused path{fill:#e1e5eb}.p-cascader .p-cascader-highlight{color:#246fe5}