yu.css.ui/css/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 > 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;
    font-size: 14px;
    vertical-align: middle;
    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 0.4s ease; }
    .yu-switch > .switch > .circle {
      box-sizing: border-box;
      display: inline-block;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 8px;
      transition: all 0.4s ease;
      transform: translateX(0px); }
    .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; }