yu.css.ui/dist/component/pagination.css

纯CSS通用UI模块和组件

.yu-select{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;position:relative}.yu-select input,.yu-select input+span.suffix>i.icon-angle-down{transition:all .4s ease}.yu-select input:hover{cursor:pointer}.yu-select input:focus:not([readonly]){border:1px solid #409eff}.yu-select input:focus:not([readonly])+span.suffix>i.icon-angle-down{transform:rotate(-180deg)}.yu-select .transition{transform:scaleY(0);opacity:0;transform-origin:center top;transition:transform .3s ease,opacity .3s ease}.yu-select .transition.transition-enter{transform:scaleY(1);opacity:1}.yu-select .transition.transition-leave{transform:scaleY(0);opacity:0}.yu-select.prepend{display:inline-block;vertical-align:top;margin:0}.yu-select.prepend>.yu-input{margin:0}.yu-select.prepend>.yu-input>input{border-radius:4px 0 0 4px}.yu-select.append{display:inline-block;vertical-align:top}.yu-select.append>.yu-input{margin:0}.yu-select.append>.yu-input>input{border-radius:0 4px 4px 0}.yu-select>.yu-option{margin-top:8px;position:absolute;top:30px;z-index:1}.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:1}.yu-pagination{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-size:14px}.yu-pagination>ul{padding-inline-start:0;padding:0;display:inline-block;user-select:none}.yu-pagination>ul>li{list-style:none;font-size:14px;padding:0 12px;display:inline-block;height:32px;line-height:32px;cursor:pointer;color:#606266;transition:all .4s}.yu-pagination>ul>li:hover:not(.disabled){color:#409eff}.yu-pagination>ul>li.disabled{cursor:not-allowed;background-color:#fff;color:#c0c4cc}.yu-pagination>ul>li.more span{display:inline}.yu-pagination>ul>li.more i{display:none}.yu-pagination>ul>li.more:hover i{display:inline-block}.yu-pagination>ul>li.more:hover span{display:none}.yu-pagination>ul>li.current{cursor:default;background-color:#409eff;border-radius:4px;color:#fff}.yu-pagination.border>ul>li{background-color:#fff;margin-right:8px;border-radius:4px;border:1px solid #e4e7ed}.yu-pagination.border>ul>li:hover:not(.disabled){color:#409eff;border-color:#409eff}.yu-pagination.border>ul>li.current{background-color:#409eff;border-color:#409eff;color:#fff}.yu-pagination>label,.yu-pagination>span{margin-right:8px}.yu-pagination>.yu-select.page-size{display:inline-block}.yu-pagination>.yu-select.page-size .yu-option,.yu-pagination>.yu-select.page-size input{width:100px}.yu-pagination>.yu-input.goto{display:inline-block}.yu-pagination>.yu-input.goto input{width:50px}