@arco-design/web-vue/es/switch/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';

@switch-prefix-cls: ~'@{prefix}-switch';

@switch-size-default-gap: (
  (@switch-size-default - @switch-size-dot-default) / 2
);
@switch-size-small-gap: ((@switch-size-small - @switch-size-dot-small) / 2);

@switch-size-default-line-gap: (
  (@switch-size-default - @switch-line-size-dot-default) / 2
);
@switch-size-small-line-gap: (
  (@switch-size-small - @switch-line-size-dot-small) / 2
);

.switch-slide-text-enter-from {
  left: -100% !important;
}

.switch-slide-text-enter-to {
  left: 8px !important;
}

.switch-slide-text-enter-active {
  transition: left @transition-duration-2 @transition-timing-function-standard;
}

.switch-slide-text-leave-from {
  left: 100% !important;
}

.switch-slide-text-leave-to {
  left: @switch-size-dot-default + @switch-size-default-gap + 6px !important;
}

.switch-slide-text-leave-active {
  transition: left @transition-duration-2 @transition-timing-function-standard;
}

.@{switch-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  min-width: @switch-circle-default-width;
  height: @switch-size-default;
  padding: 0;
  overflow: hidden;
  line-height: @switch-size-default;
  vertical-align: middle;
  background-color: @switch-color-bg_off;
  border: none;
  border-radius: (@switch-size-default / 2);
  outline: none;
  cursor: pointer;
  transition: background-color @transition-duration-2
    @transition-timing-function-standard;

  &-handle {
    position: absolute;
    top: @switch-size-default-gap;
    left: @switch-size-default-gap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: @switch-size-dot-default;
    height: @switch-size-dot-default;
    color: @switch-color-dot-icon_off;
    font-size: 12px;
    background-color: @switch-color-dot-bg;
    border-radius: 50%;
    transition: all @transition-duration-2 @transition-timing-function-standard;
  }

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

  &-checked &-handle {
    left: calc(100% - @switch-size-dot-default - @switch-size-default-gap);
    color: @switch-color-dot-icon_on;
  }

  &[disabled] &-handle {
    color: @switch-color-dot-icon_off_disabled;
  }

  &[disabled]&-checked &-handle {
    color: @switch-color-dot-icon_on_disabled;
  }

  &[disabled] &-handle {
    color: @switch-color-dot-icon_off_disabled;
  }

  &[disabled]&-checked &-handle {
    color: @switch-color-dot-icon_on_disabled;
  }

  &-text-holder {
    margin: 0 8px 0 @switch-size-dot-default + @switch-size-default-gap + 6px;
    font-size: @switch-font-size-text;
    opacity: 0;
  }

  &-text {
    position: absolute;
    top: 0;
    left: @switch-size-dot-default + @switch-size-default-gap + 6px;
    color: @switch-color-text_off;
    font-size: @switch-font-size-text;
  }

  &-checked &-text-holder {
    margin: 0 @switch-size-dot-default + @switch-size-default-gap + 6px 0 8px;
  }

  &-checked &-text {
    left: 8px;
    color: @switch-color-text_on;
  }

  // Disabled
  &[disabled] {
    background-color: @switch-color-bg_off_disabled;
    cursor: not-allowed;
  }

  &[disabled] &-text {
    color: @switch-color-text_off_disabled;
  }

  &[disabled]&-checked {
    background-color: @switch-color-bg_on_disabled;
  }

  &[disabled]&-checked &-text {
    color: @switch-color-text_on_disabled;
  }

  // Loading
  &-loading {
    background-color: @switch-color-bg_off_loading;
  }

  &-loading &-handle {
    color: @switch-color-dot-icon_off_loading;
  }

  &-loading &-text {
    color: @switch-color-text_off_loading;
  }

  &-loading&-checked {
    background-color: @switch-color-bg_on_loading;
  }

  &-loading&-checked &-handle {
    color: @switch-color-dot-icon_on_loading;
  }

  &-loading&-checked &-text {
    color: @switch-color-text_on_loading;
  }

  &-small {
    min-width: @switch-circle-small-width;
    height: @switch-size-small;
    line-height: @switch-size-small;
  }

  &-small&-checked {
    padding-left: -@switch-size-small-gap;
  }

  &-small &-handle {
    top: @switch-size-small-gap;
    left: @switch-size-small-gap;
    width: @switch-size-dot-small;
    height: @switch-size-dot-small;
    border-radius: (@switch-size-small / 2);

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.66667);
    }
  }

  &-small&-checked &-handle {
    left: calc(100% - @switch-size-dot-small - @switch-size-small-gap);
  }
}

// Round
.@{switch-prefix-cls} {
  &-type-round {
    min-width: @switch-round-default-width;
    border-radius: @radius-small;
  }

  &-type-round &-handle {
    border-radius: 2px;
  }

  &-type-round&-small {
    min-width: @switch-round-small-width;
    height: @switch-size-small;
    line-height: @switch-size-small;
    border-radius: 2px;
  }

  &-type-round&-small &-handle {
    border-radius: 1px;
  }
}

// Line
.@{switch-prefix-cls} {
  &-type-line {
    min-width: @switch-line-default-width;
    overflow: unset;
    background-color: transparent;

    &::after {
      display: block;
      width: 100%;
      height: @switch-line-height-bg-line;
      background-color: @switch-color-bg_off;
      border-radius: (@switch-line-height-bg-line / 2);
      transition: background-color @transition-duration-2
        @transition-timing-function-standard;
      content: '';
    }
  }

  &-type-line &-handle {
    top: @switch-size-default-line-gap;
    left: 0;
    width: @switch-line-size-dot-default;
    height: @switch-line-size-dot-default;
    background-color: @switch-color-dot-bg;
    border-radius: (@switch-line-size-dot-default / 2);
    box-shadow: 0 1px 3px @switch-line-color-dot-shadow;
  }

  &-type-line&-checked {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_on;
    }
  }

  &-type-line&-custom-color {
    --custom-color: @switch-color-bg_off;

    &::after {
      background-color: var(--custom-color);
    }
  }

  &-type-line&-custom-color&-checked {
    --custom-color: @switch-color-bg_on;
  }

  &-type-line&-checked &-handle {
    left: calc(100% - @switch-line-size-dot-default);
  }

  // Disabled
  &-type-line[disabled] {
    background-color: transparent;
    cursor: not-allowed;

    &::after {
      background-color: @switch-color-bg_off_disabled;
    }
  }

  &-type-line[disabled]&-checked {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_on_disabled;
    }
  }

  // Loading
  &-type-line&-loading {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_off_loading;
    }
  }

  &-type-line&-loading&-checked {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_on_loading;
    }
  }

  &-type-line&-small {
    min-width: @switch-line-small-width;
    height: @switch-size-small;
    line-height: @switch-size-small;
  }

  &-type-line&-small&-checked {
    padding-left: -@switch-size-small-line-gap;
  }

  &-type-line&-small &-handle {
    top: @switch-size-small-line-gap;
    width: @switch-line-size-dot-small;
    height: @switch-line-size-dot-small;
    border-radius: (@switch-size-small / 2);

    &-icon {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &-type-line&-small&-checked &-handle {
    left: calc(
      100% - @switch-line-size-dot-small - @switch-size-small-line-gap
    );
  }
}