yu.css.ui/dist/component/dialog.css

纯CSS通用UI模块和组件

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-dialog{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-size:14px;width:100%;height:100%;position:fixed;background-color:rgba(0,0,0,.4);top:0;left:0;z-index:2}.yu-dialog .wrapper{position:absolute;transform:translate(-50%,-50%);width:30%;top:50%;left:50%;border-radius:2px;padding:22px;background-color:#fff;opacity:1}.yu-dialog .wrapper.small{width:15%;top:50%;left:50%}.yu-dialog .wrapper.large{width:50%;top:50%;left:50%}.yu-dialog .wrapper.full{width:100%;top:0;left:50%;height:100%;margin:0;box-sizing:border-box;transform:translate(-50%)}.yu-dialog .wrapper.center{text-align:center}.yu-dialog .wrapper.center .button{float:none}.yu-dialog .wrapper .header{margin-bottom:14px;font-size:16px;color:#303133}.yu-dialog .wrapper .header i{float:right;cursor:pointer;transition:color .4s ease}.yu-dialog .wrapper .header i:hover{color:#409eff}.yu-dialog .wrapper .content,.yu-dialog .wrapper .other{color:#606266;margin:14px 0}.yu-dialog .wrapper .button{float:right}.yu-dialog .wrapper .button .yu-button{margin-bottom:0}body.lock{height:100%;overflow:hidden}