yu.css.ui/dist/component/switch.css

纯CSS通用UI模块和组件

.yu-switch{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-size:0;color:#606266;display:inline-block;margin:0 8px 14px 0}.yu-switch>input{display:none}.yu-switch>label,.yu-switch>span{font-size:14px;vertical-align:middle}.yu-switch>label{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin-right:8px}.yu-switch>.switch{font-size:14px;display:inline-block;width:40px;height:20px;background:#dcdfe6;border-radius:10px;padding:2px;box-sizing:border-box;cursor:pointer;margin-right:8px;transition:background-color .4s ease}.yu-switch>.switch>.circle{box-sizing:border-box;display:inline-block;width:16px;height:16px;background:#fff;border-radius:8px;transition:all .4s ease;transform:translateX(0)}.yu-switch>.switch.on>.circle{transform:translateX(20px)}.yu-switch>.switch.on.primary{background-color:#409eff;transition:all .3s ease}.yu-switch>.switch.on.success{background-color:#67c23a;transition:all .3s ease}.yu-switch>.switch.on.warning{background-color:#fecf20;transition:all .3s ease}.yu-switch>.switch.on.info{background-color:#909399;transition:all .3s ease}.yu-switch>.switch.on.danger{background-color:#f56c6c;transition:all .3s ease}.yu-switch.disabled{color:#a0a2a6;cursor:not-allowed}.yu-switch.disabled .switch.on.primary{background-color:#c0dfff}.yu-switch.disabled .switch.on.success{background-color:#b2e19b}.yu-switch.disabled .switch.on.warning{background-color:#ffea9f}.yu-switch.disabled .switch.on.info{background-color:#d2d4d6}.yu-switch.disabled .switch.on.danger{background-color:#fde3e3}