mdui/src/components/selection_control/switch.less

a CSS Framework based on material design

/**
 * =============================================================================
 * ************   Switch 单选框   ************
 * =============================================================================
 */

.mdui-switch {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  user-select: none;

  // 隐藏系统 input 标签，用自定义的图标代替
  input {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
  }
}

/* 图标轨道 */
.mdui-switch-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 14px;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.38);
  border-radius: 14px;
  transition: background-color .3s @animation-curve-default;

  // 圆形图标
  &::before {
    position: absolute;
    top: -3px;
    left: -3px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: @color-grey-50;
    border-radius: 20px;
    transition: box-shadow .14s @animation-curve-default,
                background-color .3s @animation-curve-default,
                left .3s @animation-curve-default;
    content: ' ';
    .mdui-shadow(1);
  }
}

/* 选中状态的图标 */
.mdui-switch input[type="checkbox"]:checked + .mdui-switch-icon {
  background-color: rgba(red(@color-default-a200), green(@color-default-a200), blue(@color-default-a200), 0.5);

  &::before {
    left: 20px;
    background-color: @color-default-a200;
  }
}

/* 未选中时或禁用时 按下的阴影 */
.mdui-switch:active input[type="checkbox"],
.mdui-switch input[type="checkbox"]:focus {
  & + .mdui-switch-icon::before {
    box-shadow:
      // box-shadow(1)
      0 2px 1px -1px rgba(0, 0, 0, .2),
      0 1px 1px 0 rgba(0, 0, 0, .14),
      0 1px 3px 0 rgba(0, 0, 0, .12),

        // 颜色阴影
      0 0 0 15px rgba(0, 0, 0, 0.1);
  }
}

/* 已选中时按下的阴影 */
.mdui-switch:active input[type="checkbox"],
.mdui-switch input[type="checkbox"]:focus {
  &:checked:not(:disabled) + .mdui-switch-icon::before {
    box-shadow:
      // box-shadow(1)
      0 2px 1px -1px rgba(0, 0, 0, .2),
      0 1px 1px 0 rgba(0, 0, 0, .14),
      0 1px 3px 0 rgba(0, 0, 0, .12),

        // 颜色阴影
      0 0 0 15px rgba(red(@color-default-a200), green(@color-default-a200), blue(@color-default-a200), 0.16);
  }
}

/* 禁用状态 */
.mdui-switch input[type="checkbox"]:disabled + .mdui-switch-icon {
  background-color: rgba(0, 0, 0, 0.12) !important;

  &::before {
    background-color: @color-grey-400 !important;
  }
}


/**
 * =============================================================================
 * ************   Switch 强调色   ************
 * =============================================================================
 */

& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    @color: 'color-@{colorName}-a200';

    .mdui-theme-accent-@{colorName} when not (@colorName = null) {

      // 选中状态的图标
      .mdui-switch input[type="checkbox"]:checked + .mdui-switch-icon {
        background-color: rgba(red(@@color), green(@@color), blue(@@color), 0.5);

        &::before {
          background-color: @@color;
        }
      }

      // 已选中时按下的阴影
      .mdui-switch:active input[type="checkbox"],
      .mdui-switch input[type="checkbox"]:focus {
        &:checked:not(:disabled) + .mdui-switch-icon::before {
          box-shadow:
            // box-shadow(1)
            0 2px 1px -1px rgba(0, 0, 0, .2),
            0 1px 1px 0 rgba(0, 0, 0, .14),
            0 1px 3px 0 rgba(0, 0, 0, .12),

              // 颜色阴影
            0 0 0 15px rgba(red(@@color), green(@@color), blue(@@color), 0.16);
        }
      }

    }
  }
  .loop-accent-theme(length(@globalAccentColors));
}


/**
 * =============================================================================
 * ************   Radio dark   ************
 * =============================================================================
 */
.layout-theme({
  // 默认状态
  .mdui-switch-icon {
    background-color: rgba(255, 255, 255, 0.3);

    &::before {
      background-color: @color-grey-400;
    }
  }

  // 选中状态
  & {
    .loop-accent-theme(@counter-color) when (@counter-color > 0) {
      .loop-accent-theme((@counter-color - 1));
      @colorName: extract(@globalAccentColors, @counter-color);

      @color: 'color-@{colorName}-a200';
      @color-a100: 'color-@{colorName}-a100';

      &.mdui-theme-accent-@{colorName} when not (@colorName = null) {

        .mdui-switch input[type="checkbox"]:checked + .mdui-switch-icon {
          background-color: rgba(red(@@color-a100), green(@@color-a100), blue(@@color-a100), 0.5);

          &::before {
            background-color: @@color-a100;
          }
        }

      }
    }
    .loop-accent-theme(length(@globalAccentColors));
  }

  // 未选中或禁用时 按下的阴影
  .mdui-switch:active input[type="checkbox"],
  .mdui-switch input[type="checkbox"]:focus {
    & + .mdui-switch-icon::before {
      box-shadow:
        // box-shadow(1)
        0 2px 1px -1px rgba(0, 0, 0, .2),
        0 1px 1px 0 rgba(0, 0, 0, .14),
        0 1px 3px 0 rgba(0, 0, 0, .12),

          // 颜色阴影
        0 0 0 15px rgba(255, 255, 255, 0.1);
    }
  }

  // 禁用状态
  .mdui-switch input[type="checkbox"]:disabled + .mdui-switch-icon {
    background-color: rgba(255, 255, 255, 0.1) !important;

    &::before {
      background-color: @color-grey-800 !important;
    }
  }
});