yu.css.ui/dist/component/transfer.css

纯CSS通用UI模块和组件

.yu-checkbox{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-size:14px;color:#606266;cursor:pointer;margin-right:14px}.yu-checkbox>span{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.yu-checkbox>.checkbox{transition:background-color .4s;margin-right:4px;margin-bottom:-2px;display:inline-block;width:14px;height:14px;border:1px solid #dcdfe6;border-radius:2px;background-color:#fff}.yu-checkbox>.checkbox:hover{border:1px solid #409eff}.yu-checkbox>.checkbox>input{display:none}.yu-checkbox.checked>.checkbox{position:relative;border:1px solid #409eff;border-radius:2px;background-color:#409eff}.yu-checkbox.checked>.checkbox:after{content:"\00a0";display:inline-block;border:2px solid #fff;border-top-width:0;border-right-width:0;width:8px;height:4px;-webkit-transform:rotate(-50deg);position:absolute;top:3px;left:2px}.yu-checkbox.checked.disabled>.checkbox{border:1px solid #c0c4cc;background-color:#c0c4cc}.yu-checkbox.checked.disabled>.checkbox+span,.yu-checkbox.disabled{color:#c0c4cc}.yu-checkbox.disabled>.checkbox:hover{border:1px solid #dcdfe6}.yu-checkbox.control{display:block;margin-bottom:8px}.yu-checkbox.control.part>.checkbox{position:relative;border:1px solid #409eff;border-radius:2px;background-color:#409eff}.yu-checkbox.control.part>.checkbox+span{color:#409eff}.yu-checkbox.control.part>.checkbox:after{content:"\00a0";display:inline-block;border:2px solid #fff;border-top-width:0;border-right-width:0;border-left-width:0;width:10px;height:5px;-webkit-transform:rotate(180deg);position:absolute;top:6px;left:2px}.yu-checkbox-group{margin-bottom:14px}.yu-checkbox-group.vertical>.yu-checkbox{display:block;margin-bottom:14px}div.yu-button{vertical-align:top;line-height:32px}div.yu-button.large{line-height:40px}div.yu-button.small{line-height:24px}.yu-button{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;height:32px;font-size:14px;padding:0 14px;margin:0 8px 14px 0;display:inline-block;color:#606266;box-sizing:border-box;border-radius:4px;background-color:#fff;border:1px solid #e4e7ed;cursor:pointer;transition:border .4s,color .4s;outline:none;position:relative;overflow:hidden}.yu-button:not(.disabled):hover{z-index:1}.yu-button:not(.disabled):focus,.yu-button:not(.disabled):hover{border:1px solid #409eff;color:#409eff}.yu-button.disabled{color:#c0c4cc;background:#f5f5f9;cursor:not-allowed}.yu-button.primary{color:#fff;border:1px solid #409eff;background-color:#409eff;transition:all .3s ease}.yu-button.primary.disabled{border:1px solid #c0dfff;background-color:#c0dfff;cursor:not-allowed}.yu-button.primary:focus:not(.disabled),.yu-button.primary:hover:not(.disabled){color:#fff;border:1px solid #73b8ff;background-color:#73b8ff}.yu-button.success{color:#fff;border:1px solid #67c23a;background-color:#67c23a;transition:all .3s ease}.yu-button.success.disabled{border:1px solid #b2e19b;background-color:#b2e19b;cursor:not-allowed}.yu-button.success:focus:not(.disabled),.yu-button.success:hover:not(.disabled){color:#fff;border:1px solid #85cf60;background-color:#85cf60}.yu-button.warning{color:#fff;border:1px solid #fecf20;background-color:#fecf20;transition:all .3s ease}.yu-button.warning.disabled{border:1px solid #ffea9f;background-color:#ffea9f;cursor:not-allowed}.yu-button.warning:focus:not(.disabled),.yu-button.warning:hover:not(.disabled){color:#fff;border:1px solid #feda53;background-color:#feda53}.yu-button.info{color:#fff;border:1px solid #909399;background-color:#909399;transition:all .3s ease}.yu-button.info.disabled{border:1px solid #d2d4d6;background-color:#d2d4d6;cursor:not-allowed}.yu-button.info:focus:not(.disabled),.yu-button.info:hover:not(.disabled){color:#fff;border:1px solid #abadb1;background-color:#abadb1}.yu-button.danger{color:#fff;border:1px solid #f56c6c;background-color:#f56c6c;transition:all .3s ease}.yu-button.danger.disabled{border:1px solid #fde3e3;background-color:#fde3e3;cursor:not-allowed}.yu-button.danger:focus:not(.disabled),.yu-button.danger:hover:not(.disabled){color:#fff;border:1px solid #f89c9c;background-color:#f89c9c}.yu-button.circle{padding:0;width:32px;height:32px;border-radius:50%}.yu-button.plain:focus:not(.disabled),.yu-button.plain:hover:not(.disabled){border:1px solid #409eff;color:#409eff;background:#fff}.yu-button.plain.primary{color:#409eff;border:1px solid #409eff;background-color:#f3f9ff;transition:all .3s ease}.yu-button.plain.primary.disabled{color:#a6d2ff;border:1px solid #c0dfff;background-color:#fdfeff;cursor:not-allowed}.yu-button.plain.primary:focus:not(.disabled),.yu-button.plain.primary:hover:not(.disabled){border:1px solid #409eff;background-color:#409eff;color:#fff}.yu-button.plain.success{color:#67c23a;border:1px solid #67c23a;background-color:#eef8e9;transition:all .3s ease}.yu-button.plain.success.disabled{color:#a3db87;border:1px solid #b2e19b;background-color:#f4fbf1;cursor:not-allowed}.yu-button.plain.success:focus:not(.disabled),.yu-button.plain.success:hover:not(.disabled){border:1px solid #67c23a;background-color:#67c23a;color:#fff}.yu-button.plain.warning{color:#fecf20;border:1px solid #fecf20;background-color:#fffbeb;transition:all .3s ease}.yu-button.plain.warning.disabled{color:#fee586;border:1px solid #ffea9f;background-color:#fffdf5;cursor:not-allowed}.yu-button.plain.warning:focus:not(.disabled),.yu-button.plain.warning:hover:not(.disabled){border:1px solid #fecf20;background-color:#fecf20;color:#fff}.yu-button.plain.info{color:#909399;border:1px solid #909399;background-color:#f2f3f3;transition:all .3s ease}.yu-button.plain.info.disabled{color:#c5c7ca;border:1px solid #d2d4d6;background-color:#f8f8f8;cursor:not-allowed}.yu-button.plain.info:focus:not(.disabled),.yu-button.plain.info:hover:not(.disabled){border:1px solid #909399;background-color:#909399;color:#fff}.yu-button.plain.danger{color:#f56c6c;border:1px solid #f56c6c;background-color:#feeded;transition:all .3s ease}.yu-button.plain.danger.disabled{color:#fbcccc;border:1px solid #fde3e3;background-color:#fef6f6;cursor:not-allowed}.yu-button.plain.danger:focus:not(.disabled),.yu-button.plain.danger:hover:not(.disabled){border:1px solid #f56c6c;background-color:#f56c6c;color:#fff}.yu-button.large{padding:0 22px;font-size:16px;height:40px}.yu-button.large.circle{padding:0;width:40px;height:40px}.yu-button.small{height:24px}.yu-button.small.circle{padding:0;width:24px;height:24px}.yu-button:not(.disabled):after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#999 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .4s,opacity .5s}.yu-button:not(.disabled):active:after{transform:scale(0);opacity:.3;transition:0s}.yu-button-group{font-size:0;display:inline-block;margin-right:8px}.yu-button-group>.yu-button{margin-right:-1px;float:left;position:relative;border-radius:0}.yu-button-group>.yu-button:first-child{border-radius:4px 0 0 4px}.yu-button-group>.yu-button:last-child{border-radius:0 4px 4px 0}.yu-transfer{display:flex;align-items:center;font-size:0}.yu-transfer ul{min-width:120px;padding-inline-start:0;padding:0;padding:8px;height:180px;margin:0;overflow-y:scroll}.yu-transfer ul>li{list-style:none}.yu-transfer ul li{margin:8px 0}.yu-transfer ul li span:last-child{vertical-align:middle;display:inline-block;width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yu-transfer .yu-button{display:block;margin:8px}.yu-transfer .option{border:1px solid #e4e7ed;border-radius:4px}.yu-transfer .head{padding:8px;border-bottom:1px solid #e4e7ed}.yu-transfer .head span.tag{float:right;font-size:14px}.yu-transfer .head .yu-checkbox{margin:0;display:inline-block}