yu.css.ui/dist/component/counter.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-option{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;background-color:#fff;min-width:175px;border:1px solid #e4e7ed;border-radius:4px;color:#606266;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:inline-block;padding-inline-start:0;padding:0}.yu-option>li{list-style:none}.yu-option.overflow{overflow:auto;max-height:175px}.yu-option>li{box-sizing:border-box;font-size:14px;padding:8px 14px}.yu-option>li.active,.yu-option>li:hover:not(.disabled){background-color:#f5f5f9}.yu-option>li.active{font-weight:700;color:#409eff}.yu-option>li.hide{display:none}.yu-option>li.disabled{color:#c0c4cc;cursor:not-allowed}.yu-input{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;position:relative;display:block;margin:0 8px 14px 0;font-size:0}.yu-input .transition{transform:scaleY(0);opacity:0;transform-origin:center top;transition:transform .3s ease,opacity .3s ease}.yu-input .transition.transition-enter{transform:scaleY(1);opacity:1}.yu-input .transition.transition-leave{transform:scaleY(0);opacity:0}.yu-input>input{width:175px;padding:4px 14px;outline:none;font-size:14px;color:#606266;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;box-sizing:border-box;height:32px;border:1px solid #e4e7ed;border-radius:4px;transition:all .4s ease}.yu-input>input::placeholder{color:#c0c4cc}.yu-input>input:hover{border:1px solid #c0c4cc}.yu-input>input:focus{border:1px solid #409eff}.yu-input>input.prefix{padding-left:32px}.yu-input>input.suffix{padding-right:32px}.yu-input>input.large{height:40px}.yu-input>input.small{height:24px}.yu-input>input.full{width:100%}.yu-input.textarea{height:auto}.yu-input.disabled>input{color:#c0c4cc;background-color:#f5f5f9}.yu-input.disabled>input:hover{border:1px solid #e4e7ed;cursor:not-allowed}.yu-input.disabled>input:focus{border:1px solid #e4e7ed}.yu-input>span.prefix{position:relative;color:#c0c4cc}.yu-input>span.prefix>i{position:absolute;left:10px;top:-14px}.yu-input>span.suffix{position:relative;color:#c0c4cc}.yu-input>span.suffix>i{position:absolute;left:-25px;top:-14px}.yu-input>span.suffix.clearable>i{transition:color .1s;cursor:pointer}.yu-input>span.suffix.clearable>i:hover{color:#909399}.yu-input>textarea{padding:8px;border-color:#e4e7ed;border-radius:4px;font-size:14px;outline:none;box-sizing:border-box;transition:all .4s ease}.yu-input>textarea:hover{border:1px solid #c0c4cc}.yu-input>textarea:focus{border:1px solid #409eff}.yu-input>textarea::placeholder{color:#dcdfe6;font-weight:lighter}.yu-input>input.append{border-radius:4px 0 0 4px}.yu-input>input.prepend{border-radius:0 4px 4px 0}.yu-input>input.number{padding-right:0}.yu-input>.yu-button.prepend{margin:0;border-radius:4px 0 0 4px;vertical-align:top}.yu-input>.yu-button.append{margin:0;border-radius:0 4px 4px 0;vertical-align:top}.yu-input>.yu-option{margin-top:8px;position:absolute;top:30px;left:0;z-index:2}.yu-counter{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;display:inline-block;font-size:0;margin:0 8px 14px 0}.yu-counter>.yu-input{vertical-align:top;display:inline-block;box-sizing:border-box;margin:0}.yu-counter>.yu-input>input{width:80px;border-radius:0;text-align:center}.yu-counter>.yu-button{margin:0;font-size:16px;line-height:16px;background:#f5f5f9}.yu-counter>.yu-button:first-child{border-radius:4px 0 0 4px}.yu-counter>.yu-button:last-child{border-radius:0 4px 4px 0}.yu-counter-side{display:inline-block;font-size:0;vertical-align:top;margin:0 8px 14px 0}.yu-counter-side>.yu-input{display:inline-block;box-sizing:border-box;margin-right:0}.yu-counter-side>.yu-input>input{width:80px;text-align:center}.yu-counter-side>div.right{height:32px;vertical-align:top;display:inline-block}.yu-counter-side>div.right>button{height:50%;border:1px solid #e4e7ed;color:#606266;padding:0 14px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;transition:all .4s ease;outline:none;display:block;vertical-align:top;background:#f5f5f9;margin:0;line-height:16px}.yu-counter-side>div.right>button>i{margin-left:-2px;font-size:14px}.yu-counter-side>div.right>button:focus:not(.disabled),.yu-counter-side>div.right>button:hover:not(.disabled){color:#409eff;border:1px solid #73b8ff;background-color:#f3f9ff}.yu-counter-side>div.right>button.disabled{color:#c0c4cc;cursor:not-allowed}.yu-counter-side>div.right>button:first-child{border-top-right-radius:4px}.yu-counter-side>div.right>button:last-child{border-bottom-right-radius:4px}.yu-counter-side>div.button{height:32px;vertical-align:top;display:inline-block}.yu-counter-side>div.button.large{height:40px}.yu-counter-side>div.button.small{height:24px}.yu-counter-side>div.button.small>button>i:before{display:block;margin-top:-19px}.yu-counter-side>div.button>button{cursor:pointer;height:50%;background-color:#fff;border:1px solid #e4e7ed;color:#606266;padding:0 14px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;transition:all .4s ease;outline:none;display:block;vertical-align:top;background:#f5f5f9;margin:0;line-height:16px}.yu-counter-side>div.button>button>i{margin-left:-2px;font-size:14px}.yu-counter-side>div.button>button:focus:not(.disabled),.yu-counter-side>div.button>button:hover:not(.disabled){color:#409eff;border:1px solid #73b8ff;background-color:#f3f9ff}.yu-counter-side>div.button>button.disabled{color:#c0c4cc;background:#f5f5f9;cursor:not-allowed}.yu-counter-side.right>.button>button:first-child{border-top-right-radius:4px}.yu-counter-side.right>.button>button:last-child{border-bottom-right-radius:4px}.yu-counter-side.right>.yu-input>input{border-radius:4px 0 0 4px}.yu-counter-side.left>.button>button:first-child{border-top-left-radius:4px}.yu-counter-side.left>.button>button:last-child{border-bottom-left-radius:4px}.yu-counter-side.left>.yu-input>input{border-radius:0 4px 4px 0}