meri-design/dist/theme/TransferTab.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
 */.m-input{border:1px solid #c4c9cf;border-radius:4px;display:inline-flex;height:32px;width:100%}.m-input-error{border-color:#f55047;position:relative}.m-input-error-text{bottom:-24px;color:#f55047;font-size:12px;left:0;line-height:20px;position:absolute}.m-input-main{align-items:center;display:inline-flex;width:100%}.m-input-icon{align-items:center;display:flex;height:30px;justify-content:center;width:30px}.m-input-icon svg{height:16px;width:16px}.m-input-icon svg path{transition:fill .2s}.m-input-clear{cursor:pointer;visibility:hidden}.m-input-clear:hover path{fill:#246fe5}.m-input-inline{background:none;border:0;color:#1b2129;flex:auto;font-size:14px;height:100%;outline:none}.m-input-inline::placeholder{color:#c4c9cf}.m-input-inline:valid+.m-input-clear{visibility:visible}.m-input-inline-0{width:100%}.m-input-inline-60{width:calc(100% - 60px)}.m-input-inline-30{width:calc(100% - 30px)}.m-input-inline-padding-none{padding-left:0;padding-right:0}.m-input-inline-padding-left{padding-left:12px}.m-input-inline-padding-right{padding-right:12px}.m-input-inline-padding-left-right{padding-left:12px;padding-right:12px}.m-tab{border-bottom:1px solid #e8ecf0;display:flex;position:relative}.m-tab-average .m-tab-item{flex:1}.m-tab-item{color:#1b2129;cursor:pointer;font-size:14px;line-height:22px;padding-bottom:12px;padding-top:12px;text-align:center;transition:color .2s}.m-tab-item-active,.m-tab-item:hover{color:#246fe5}.m-tab-line{background-color:#246fe5;bottom:-1px;height:2px;left:0;position:absolute;transition:transform .2s;width:24px}.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}.fadeDownUpUi-enter-active{animation:fadeInDownUi .3s ease-out}.fadeDownUpUi-leave-active{animation:fadeOutUpUi .3s ease-in}@-moz-keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@-o-keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@-moz-keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@-webkit-keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@-o-keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.p-tooltip-box{border:1px solid #e1e5eb;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);font-size:12px;padding:8px 12px;pointer-events:none;position:absolute}.p-tooltip-light{background-color:#fff;color:#1b2129}.p-tooltip-dark{background-color:rgba(31,36,41,.8);color:#fff}.p-select-checkbox{border-radius:4px;font-size:0;width:100%}.p-select-checkbox-item{color:#1b2129;font-size:0;height:38px;line-height:38px;padding-left:16px;padding-right:8px;transition:background-color .3s;width:100%}.p-select-checkbox-item:hover,.p-select-checkbox-item:hover .p-select-checkbox-text-ellipsis-start:before{background-color:#f1f4f6}.p-select-checkbox-item .p-checkbox{width:100%}.p-select-checkbox-disabled .p-select-checkbox-text{color:#c4c9cf}.p-select-checkbox-text{display:inline-block;font-size:14px;height:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;width:100%}.p-select-checkbox-text-ellipsis-start{position:relative}.p-select-checkbox-text-ellipsis-start:before{background-color:#fff;color:#1b2129;content:"...";display:inline-block;font-size:14px;height:100%;left:-1px;pointer-events:none;position:absolute;text-align:right;top:-1px;transition:background-color .3s;width:12px}.per-drop-tree-highlight{color:#246fe5}.m-transfer-selected{width:100%}.m-transfer-selected-item{align-items:center;cursor:pointer;display:inline-flex;height:38px;padding-left:16px;padding-right:12px;transition:background-color .2s;width:100%}.m-transfer-selected-item:hover{background-color:#f1f4f6}.m-transfer-selected-disabled{cursor:not-allowed}.m-transfer-selected-disabled .m-transfer-selected-text{color:#c4c9cf}.m-transfer-selected-disabled .m-transfer-selected-clear svg{pointer-events:none}.m-transfer-selected-disabled .m-transfer-selected-clear svg path{fill:#e8ecf0}.m-transfer-selected-tag{align-items:center;display:inline-flex;flex:none}.m-transfer-selected-tag-item{background-color:#e8ecf0;border-radius:2px;height:24px;margin-right:8px;min-width:44px;padding:1px 8px}.m-transfer-selected-tag-item,.m-transfer-selected-text{color:#1b2129;font-size:14px;line-height:22px;overflow:hidden}.m-transfer-selected-text{text-overflow:ellipsis;white-space:nowrap}.m-transfer-selected-clear{align-items:center;display:flex;flex:none;height:16px;justify-content:flex-end;margin-left:auto;width:16px}.m-transfer-selected-clear svg{cursor:pointer;height:14px;width:14px}.m-transfer-selected-clear svg path{transition:fill .2s}.m-transfer-selected-clear svg:hover path{fill:#246fe5}.m-handle-bar{align-items:center;background-color:#fff;display:flex;justify-content:flex-end;padding:8px 16px}.m-handle-bar-shadow{box-shadow:0 2px 10px rgba(31,35,41,.1)}.m-handle-bar-btn{cursor:pointer;font-size:14px;line-height:22px}.m-handle-bar-cancel{color:#1b2129}.m-handle-bar-confirm{color:#246fe5;margin-left:16px;transition:color .2s}.m-handle-bar-confirm:hover{color:#2481f2}.m-handle-bar-confirm:active{color:#215dd9}.m-handle-bar-btn-disabled{color:#c4c9cf;cursor:not-allowed}.m-handle-bar-btn-disabled:active,.m-handle-bar-btn-disabled:hover{color:#c4c9cf}.p-modal-main-tip{border-radius:8px;left:50%;margin-left:-210px;top:120px;width:420px}.p-modal-main-tip .p-modal-info-svg{height:24px;top:20px!important;width:24px}.p-modal-main-tip .p-modal-info-svg svg{height:24px;width:24px}.p-modal-main-tip .p-modal-title{border:0;height:44px;padding-top:4px!important}.p-modal-main-tip .p-modal-content{min-height:auto;width:calc(100% - 32px)}.p-modal-main-tip .p-modal-content .p-modal-content-main-text{color:#1b2129;font-size:14px;line-height:22px;margin-top:24px}.p-modal-main-tip .p-modal-content .p-modal-content-main-text-has-title{color:#626c78;margin-bottom:12px;margin-top:8px}.p-modal-main-tip .p-modal-content .p-modal-content-main-text-no-title{font-size:16px}.p-modal-main-tip-svg .p-modal-info-svg{left:32px;position:absolute;top:24px}.p-modal-main-tip-svg .p-modal-title{padding-left:72px;padding-top:8px}.p-modal-main-tip-svg .p-modal-content{padding-left:72px}.m-pre-button{border-radius:4px;border-style:solid;border-width:1px;display:inline-block;font-size:0;padding-left:8px;padding-right:8px;text-align:center;transition:background-color .3s,border .3s;vertical-align:middle}.m-pre-button+.m-pre-button{margin-left:12px}.m-pre-button .m-pre-button-content{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.m-pre-button-default{background-color:#fff;border-color:#c4c9cf;color:#1b2129}.m-pre-button-default:hover{border-color:#246fe5}.m-pre-button-default:hover .m-pre-button-content-text{color:#246fe5}.m-pre-button-default:active{border-color:#215dd9}.m-pre-button-default:active .m-pre-button-content-text{color:#215dd9}.m-pre-button-default .m-pre-button-loading svg path{stroke:#1b2129}.m-pre-button-blue,.m-pre-button-primary{background-color:#246fe5;border-color:#246fe5;color:#fff}.m-pre-button-blue:hover,.m-pre-button-primary:hover{background-color:#2481f2;border-color:#2481f2}.m-pre-button-blue:active,.m-pre-button-primary:active{background-color:#215dd9;border-color:#215dd9}.m-pre-button-danger,.m-pre-button-red{background-color:#f55047;border-color:#f55047;color:#fff}.m-pre-button-danger:hover,.m-pre-button-red:hover{background-color:#f8766f;border-color:#f8766f}.m-pre-button-danger:active,.m-pre-button-red:active{background-color:#e63c35;border-color:#e63c35}.m-pre-button-word{background:none;border-color:transparent;color:#1b2129}.m-pre-button-word .m-pre-button-content-text{font-weight:500}.m-pre-button-word:hover .m-pre-button-content-text{color:#246fe5}.m-pre-button-word:active .m-pre-button-content-text{color:#215dd9}.m-pre-button-icon{border-color:transparent}.m-pre-button-icon.icon-bg{background-color:#f1f4f6}.m-pre-button-icon.icon-bg:hover{background-color:#e8ecf0}.m-pre-button-icon.icon-bg:active{background:#e1e5eb}.m-pre-button-icon:hover{background:#e8ecf0}.m-pre-button-icon:active{background:#e1e5eb}.m-pre-button-link{background:none;border-color:transparent;color:#246fe5}.m-pre-button-link .m-pre-button-content-text{font-weight:400}.m-pre-button-link:hover{background:#e8ecf0}.m-pre-button-link:hover .m-pre-button-content-text{color:#246fe5}.m-pre-button-link:active{background:#e8ecf0}.m-pre-button-link:active .m-pre-button-content-text{color:#215dd9}.m-pre-button-text{background:none;border-color:transparent;color:#1b2129}.m-pre-button-text .m-pre-button-content-text{font-weight:400;gap:5px}.m-pre-button-text:active,.m-pre-button-text:hover{background:#e8ecf0}.m-pre-button-large{height:40px}.m-pre-button-large.m-pre-button-blue,.m-pre-button-large.m-pre-button-danger,.m-pre-button-large.m-pre-button-default,.m-pre-button-large.m-pre-button-primary,.m-pre-button-large.m-pre-button-red{min-width:80px;padding-left:16px;padding-right:16px}.m-pre-button-large.m-pre-button-icon{width:40px}.m-pre-button-large .m-pre-button-content{height:38px;line-height:38px}.m-pre-button-large .m-pre-button-content-text{font-size:16px}.m-pre-button-medium{height:32px}.m-pre-button-medium.m-pre-button-blue,.m-pre-button-medium.m-pre-button-danger,.m-pre-button-medium.m-pre-button-default,.m-pre-button-medium.m-pre-button-primary,.m-pre-button-medium.m-pre-button-red{min-width:80px;padding-left:16px;padding-right:16px}.m-pre-button-medium.m-pre-button-icon{width:32px}.m-pre-button-medium .m-pre-button-content{height:30px;line-height:30px}.m-pre-button-small{height:28px}.m-pre-button-small padding-left 12px,.m-pre-button-small.m-pre-button-blue,.m-pre-button-small.m-pre-button-danger,.m-pre-button-small.m-pre-button-default,.m-pre-button-small.m-pre-button-primary,.m-pre-button-small.m-pre-button-red{padding-right:12px}.m-pre-button-small.m-pre-button-link,.m-pre-button-small.m-pre-button-text,.m-pre-button-small.m-pre-button-word{padding-left:4px;padding-right:4px}.m-pre-button-small.m-pre-button-icon{width:28px}.m-pre-button-small .m-pre-button-content{height:26px;line-height:26px}.m-pre-button-normal{cursor:pointer}.m-pre-button.m-pre-button-disabled{cursor:not-allowed}.m-pre-button.m-pre-button-disabled .m-pre-button-content-text{color:#c4c9cf}.m-pre-button.m-pre-button-disabled svg path{fill:#c4c9cf;stroke:#c4c9cf}.m-pre-button-disabled:not([type=word]){background-color:#e8ecf0;border-color:#e8ecf0}.m-pre-button-disabled[type=icon],.m-pre-button-disabled[type=link],.m-pre-button-disabled[type=text]{background-color:transparent;border-color:transparent}.m-pre-button-disabled[type=icon].icon-bg,.m-pre-button-disabled[type=icon].icon-bg:active{background-color:#e8ecf0}.m-pre-button-disabled[type=icon]:active{background-color:transparent}.m-pre-button-content-text{display:flex;font-size:14px;pointer-events:none;transition:color .3s}.m-pre-button-content-text.loading{opacity:0}.m-pre-button-loading{display:flex;height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px}.p-loading16px{display:inline-block;height:100%;line-height:100%;text-align:center;width:100%}.p-loading16px .p-loading16px-line{animation:loading16px .5s linear infinite;height:100%;min-height:12px;min-width:12px;width:100%}@-moz-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-o-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.bounceInUiOutScale-enter-active{animation:bounceInUiScale .2s ease-out}.bounceInUiOutScale-leave-active{animation:bounceOutUiScale .2s ease-in}@-moz-keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@-o-keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounceInUiScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@-moz-keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@-webkit-keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@-o-keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes bounceOutUiScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.p-modal-bg{background-color:hsla(208,7%,42%,.5);height:100%;left:0;top:0;width:100%}.p-modal-bg,.p-modal-main{position:fixed;z-index:5000}.p-modal-main{background-color:#fff;box-shadow:0 20px 30px rgba(31,35,41,.15)}.p-modal-title{border-bottom:1px solid #e1e5eb;display:flex;height:56px;justify-content:space-between;padding-left:32px;padding-right:28px;position:relative;width:100%}.p-modal-title .p-title-text{color:#1b2129;font-size:16px;font-weight:600;line-height:55px;max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-modal-title .p-modal-title-icon{display:inline-block;height:55px;line-height:55px;width:16px}.p-modal-title .p-modal-title-icon svg{cursor:pointer;vertical-align:middle}.p-modal-title .p-modal-title-icon svg:hover path{fill:#246fe5;transition:fill .2s}.p-modal-content{width:100%}.p-modal-handle{font-size:0;padding:12px 32px 20px;text-align:right;width:100%}.p-modal-handle-shadow{box-shadow:0 -2px 10px rgba(31,35,41,.1);position:relative;z-index:1}.opacityInUiOut-enter-active{animation:opacityInUi .2s ease-out}.opacityInUiOut-leave-active{animation:opacityOutUi .2s ease-in}@-moz-keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@-webkit-keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@-o-keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@keyframes opacityInUi{0%{opacity:0}to{opacity:1}}@-moz-keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}@-webkit-keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}@-o-keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}@keyframes opacityOutUi{0%{opacity:1}to{opacity:0}}.bounceInUiOut-enter-active{animation:bounceInUi .2s ease-out}.bounceInUiOut-leave-active{animation:bounceOutUi .2s ease-in}@-moz-keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@-o-keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes bounceInUi{0%{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}@-moz-keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}@-webkit-keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}@-o-keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}@keyframes bounceOutUi{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,24px,0)}}.m-transfer-tab-bg{background-color:hsla(208,7%,42%,.5);height:100%;left:0;position:absolute;top:0;width:100%;z-index:5000}.m-transfer-tab{background-color:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);display:flex;height:498px;left:calc(50% - 420px);overflow:hidden;position:absolute;top:calc(50% - 249px);width:840px;z-index:5000}.m-transfer-tab-left{border-right:1px solid #e8ecf0;height:100%;padding-bottom:12px;padding-top:12px;width:50%}.m-transfer-tab-left-header{padding-left:12px;padding-right:12px}.m-transfer-tab-left-tabs{width:100%}.m-transfer-tab-left-main{height:calc(100% - 78px);overflow-y:auto;padding-top:8px;width:100%}.m-transfer-tab-left-no-content{align-items:center;color:#626c78;display:flex;font-size:14px;height:100%;justify-content:center;width:100%}.m-transfer-tab-right{height:100%;padding-top:12px;width:50%}.m-transfer-tab-right-header{padding-left:12px;padding-right:12px}.m-transfer-tab-right-count{align-items:center;border-bottom:1px solid #e8ecf0;display:flex;justify-content:space-between;padding-bottom:6px;padding-left:4px;padding-right:4px}.m-transfer-tab-right-count>section{font-size:14px;line-height:22px}.m-transfer-tab-right-count>section>span{color:#1b2129;padding-left:4px}.m-transfer-tab-right-text{color:#626c78}.m-transfer-tab-right-clear{color:#246fe5;cursor:pointer;transition:color .2s}.m-transfer-tab-right-clear:hover{color:#2481f2}.m-transfer-tab-right-clear:active{color:#215dd9}.m-transfer-tab-right-main{height:calc(100% - 68px);overflow-y:auto;padding-top:8px;width:100%}