vui-design/src/style/components/switch.less

A high quality UI Toolkit based on Vue.js

@vui-switch: ~"@{vui}-switch";

@switch-input-size-sm: @switch-size-sm - 4px;
@switch-input-size-md: @switch-size-md - 4px;
@switch-input-size-lg: @switch-size-lg - 4px;

@switch-input-spin-size-sm: @switch-input-size-sm - 4px;
@switch-input-spin-size-md: @switch-input-size-md - 4px;
@switch-input-spin-size-lg: @switch-input-size-lg - 4px;

@keyframes vuiSwitchLoading {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

.@{vui-switch} {
  position:relative;
  cursor:pointer;
  display:inline-block;
  border:none;
  background-color:@switch-background-color;
  vertical-align:middle;
  user-select:none;
  white-space:nowrap;
  color:@switch-font-color;
  text-align:right;
  transition:all @transition-duration @transition-timing-function;

  &-input {
    position:absolute;
    top:2px;
    left:2px;
    display:block;
    border-radius:50%;
    box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.35);
    background-color:@switch-input-background-color;
    transition:all @transition-duration @transition-timing-function;

    &-spin {
      content:"";
      display:block;
      border-width:1px;
      border-style:solid;
      border-color:transparent;
      border-radius:50%;
      margin:2px;
      animation:vuiSwitchLoading 1s infinite linear;
    }
  }

  &-label {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    transition:all @transition-duration @transition-timing-function;
  }

  // loading
  &-loading {
    cursor:not-allowed;
    background-color:tint(@switch-background-color, 40%);
  }
  &-loading &-input {
    &-spin {
      border-bottom-color:tint(@switch-background-color, 40%);
    }
  }

  // checked
  &-checked {
    background-color:@switch-checked-background-color;
  }

  // disabled
  &-disabled {
    cursor:not-allowed;
    background-color:tint(@switch-background-color, 40%);
  }

  // loading && checked
  &-loading&-checked {
    background-color:tint(@switch-checked-background-color, 40%);
  }
  &-loading&-checked &-input {
    &-spin {
      border-bottom-color:tint(@switch-checked-background-color, 40%);
    }
  }

  // checked & disabled
  &-checked&-disabled {
    background-color:tint(@switch-checked-background-color, 40%);
  }

  // size
  &-small {
    min-width:@switch-input-size-sm * 2 + 4px;
    height:@switch-size-sm;
    border-radius:@switch-size-sm;
    font-size:@switch-font-size-sm;
    line-height:@switch-size-sm;
  }
  &-small &-input {
    width:@switch-input-size-sm;
    height:@switch-input-size-sm;

    &-spin {
      width:@switch-input-spin-size-sm;
      height:@switch-input-spin-size-sm;
    }
  }
  &-small &-label {
    padding-left:@switch-input-size-sm + 2px + 6px;
    padding-right:6px;
  }

  &-medium {
    min-width:@switch-input-size-md * 2 + 4px;
    height:@switch-size-md;
    border-radius:@switch-size-md;
    font-size:@switch-font-size-md;
    line-height:@switch-size-md;
  }
  &-medium &-input {
    width:@switch-input-size-md;
    height:@switch-input-size-md;

    &-spin {
      width:@switch-input-spin-size-md;
      height:@switch-input-spin-size-md;
    }
  }
  &-medium &-label {
    padding-left:@switch-input-size-md + 2px + 8px;
    padding-right:8px;
  }

  &-large {
    min-width:@switch-input-size-lg * 2 + 4px;
    height:@switch-size-lg;
    border-radius:@switch-size-lg;
    font-size:@switch-font-size-lg;
    line-height:@switch-size-lg;
  }
  &-large &-input {
    width:@switch-input-size-lg;
    height:@switch-input-size-lg;

    &-spin {
      width:@switch-input-spin-size-lg;
      height:@switch-input-spin-size-lg;
    }
  }
  &-large &-label {
    padding-left:@switch-input-size-lg + 2px + 10px;
    padding-right:10px;
  }

  //
  &-small&-checked &-input {
    left:calc(100% - @switch-input-size-sm - 2px);
  }
  &-small&-checked &-label {
    padding-left:6px;
    padding-right:@switch-input-size-sm + 2px + 6px;
  }

  &-medium&-checked &-input {
    left:calc(100% - @switch-input-size-md - 2px);
  }
  &-medium&-checked &-label {
    padding-left:8px;
    padding-right:@switch-input-size-md + 2px + 8px;
  }

  &-large&-checked &-input {
    left:calc(100% - @switch-input-size-lg - 2px);
  }
  &-large&-checked &-label {
    padding-left:10px;
    padding-right:@switch-input-size-lg + 2px + 10px;
  }
}