hy-checkbox/lib/Switch/switch.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:07:14 
 */ 

@import "../../app/variables.less";
@transition: 0.2s linear;
.@{ult-prefix}-switch {
  position: relative;
  display: inline-block;
  width: @switch-width;
  height: @switch-height;
  background-color: @switch-bg;
  border-radius: @switch-height / 2;
  cursor: pointer;
  transition: all @transition;
  font-size: @switch-font-size;
  overflow: hidden;
  &-inner {
    display: block;
    line-height: @switch-line-height;
    color: @switch-color;
    margin-left: @switch-after-width + @switch-padding*2;
    margin-right: @switch-width - (@switch-after-width + @switch-padding*2) - @switch-font-size;
    transition: margin 0.1s linear;
  }
  &::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: @switch-padding;
    top: @switch-padding;
    width: @switch-after-width;
    height: @switch-after-width;
    border: @switch-after-border-width solid @switch-color;
    border-radius: @switch-after-width / 2;
    transition: all @transition;
  }
  &-checked {
    background-color: @switch-checked-bg;
    .@{ult-prefix}-switch-inner {
      margin-left: @switch-width - (@switch-after-width + @switch-padding*2) - @switch-font-size;
      margin-right: @switch-after-width + @switch-padding*2;
    }
    &::after {
      left: 100%;
      margin-left: -@switch-after-width - @switch-padding;
    }
  }
  &-small {
    width: @switch-small-width;
    height: @switch-small-height;
    font-size: @switch-small-font-size;
    .@{ult-prefix}-switch-inner {
      line-height: @switch-small-line-height;
      margin-left: @switch-small-after-width + @switch-small-padding*2;
      margin-right: @switch-small-width - (@switch-small-after-width + @switch-small-padding*2) - @switch-small-font-size;
    }
    &::after {
      left: @switch-small-padding;
      top: @switch-small-padding;
      width: @switch-small-after-width;
      height: @switch-small-after-width;
      border-width: @switch-small-after-border-width;
      border-radius: @switch-small-after-width / 2;
    }
    &.@{ult-prefix}-switch-checked {
      .@{ult-prefix}-switch-inner {
        margin-left: @switch-small-width - (@switch-small-after-width + @switch-small-padding*2) - @switch-small-font-size;
        margin-right: @switch-small-after-width + @switch-small-padding*2;
      }
      &::after {
        left: 100%;
        margin-left: -@switch-small-after-width - @switch-small-padding;
      }
    }
  }
  &-square {
    border-radius: @border-radius;
    &::after {
      border-width: @switch-after-width / 2;
      border-radius: @border-radius;
    }
    &.@{ult-prefix}-switch-small::after {
      border-width: @switch-small-after-width / 2;
    }
  }
  &-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}