choerodon-ui/pro/lib/switch/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../../../lib/style/themes/default';
@import '../../../../lib/style/mixins/index';
@import '../../radio/style/mixin';

@switch-prefix-cls: ~'@{c7n-pro-prefix}-switch';
@switch-duration: 0.36s;

.@{switch-prefix-cls} {
  &-wrapper {
    padding: @switch-wrapper-padding;

    &.@{switch-prefix-cls}-loading {
      cursor: not-allowed;
      .@{c7n-prefix}-progress-loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: @switch-loading-inner-distance;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        margin: auto 0;
        .@{c7n-prefix}-progress-inner {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: @switch-loading-inner-size;
          height: @switch-loading-inner-size;
          svg {
            width: 100%;
            height: 100%;
            circle {
              stroke: @switch-loading-stroke;
            }
          }
        }
      }
      .size-loading(lg);
      .size-loading(sm);
    }

    &.@{c7n-pro-prefix}-field {
      display: inline-flex;
      width: auto;
      max-width: 100%;
      .@{switch-prefix-cls}-label {
        max-width: inherit;
        &-content {
          display: inline-block;
          max-width: inherit;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .icon-help {
      z-index: 2;
      margin-left: @label-wrapper-padding-horizontal;
      color: @field-icon-help-color;
      font-size: @field-icon-help-font-size;
    }
  }

  .radio-btn;

  &-label {
    position: relative;
    display: inline-block;
    min-width: @switch-min-width;
    height: @switch-height;
    padding-right: 0.05rem;
    padding-left: calc(@switch-button-size * 1.2);
    color: @switch-label-color;
    font-size: @font-size-sm;
    line-height: @switch-line-height;
    text-align: center;
    vertical-align: middle;
    background-color: @switch-bg;
    border: @switch-border;
    border-radius: @switch-radius;

    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: @switch-button-uncheck-left;
      width: @switch-button-size;
      height: @switch-button-size;
      margin-top: auto;
      margin-bottom: auto;
      margin-left: @switch-padding-horizontal;
      background-color: @switch-button-bg;
      border-radius: @switch-button-radius;
      box-shadow: @switch-button-box-shadow;
      cursor: inherit;
      transition: all @switch-duration @ease-in-out-circ;
      content: ' ';
    }

    .icon {
      font-size: @switch-icon-font-size;
      vertical-align: baseline;
    }
  }

  &:active + &-label::after {
    width: @switch-button-active-width;
  }

  &-focused &-label {
    box-shadow: @switch-box-shadow;
  }

  &-focused:hover &-label {
    box-shadow: none;
  }

  &-float-label {
    padding-right: .08rem;
    padding-left: .08rem;
    vertical-align: middle;
  }

  &:checked + .@{c7n-prefix}-progress-loading {
    right: @switch-loading-inner-distance;
    left: auto;
    .@{c7n-prefix}-progress-inner {
      svg circle {
        stroke: @switch-checked-loading-stroke;
      }
    }
  }

  .size-checked-loading(lg);
  .size-checked-loading(sm);

  &:checked + &-label,
  &:checked + .@{c7n-prefix}-progress-loading + &-label {
    padding-right: calc(@switch-button-size * 1.2);
    padding-left: 0.05rem;
    color: @switch-label-check-color;
    background-color: @switch-checked-bg;
    border-color: @switch-check-border-color;

    &::after {
      left: @switch-button-check-left;
      margin-left: calc(-1 * @switch-padding-horizontal);
      background-color: @switch-checked-button-bg;
      transform: translateX(-100%);
    }
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:disabled + &-label,
  &:disabled + .@{c7n-prefix}-progress-loading + &-label {
    color: @switch-disabled-label-color;
    background-color: @switch-disabled-bg;
    opacity: @switch-disabled-opacity;

    &::after {
      background-color: @switch-disabled-button-bg;
    }
  }

  &:checked:disabled + &-label,
  &:checked:disabled + .@{c7n-prefix}-progress-loading + &-label {
    color: @switch-disabled-label-check-color;
    background-color: @switch-disabled-check-bg;

    &::after {
      background-color: @switch-disabled-button-check-bg;
    }
  }

  &-sm {
    padding: @switch-sm-wrapper-padding;
    .size-button-left(@switch-sm-button-uncheck-left, @switch-sm-button-check-left);
  }

  &-sm &-label {
    min-width: @switch-sm-min-width;
    height: @switch-sm-height;
    line-height: @switch-sm-line-height;
    border-radius: @switch-sm-radius;

    .icon {
      font-size: @switch-sm-icon-font-size;
    }

    &::after {
      width: @switch-sm-button-size;
      height: @switch-sm-button-size;
    }
  }

  &-sm &:active + &-label::after {
    width: @switch-sm-button-active-width;
  }

  &-lg {
    padding: @switch-lg-wrapper-padding;
    .size-button-left(@switch-lg-button-uncheck-left, @switch-lg-button-check-left);
  }

  &-lg &-label {
    min-width: @switch-lg-min-width;
    height: @switch-lg-height;
    line-height: @switch-lg-line-height;
    border-radius: @switch-lg-radius;

    .icon {
      font-size: @switch-lg-icon-font-size;
    }

    &::after {
      width: @switch-lg-button-size;
      height: @switch-lg-button-size;
    }
  }

  &-lg &:active + &-label::after {
    width: @switch-lg-button-active-width;
  }

  &-float-label .@{field-label-prefix-cls}-wrapper {
    left: 0;
    transform-origin: @float-label-transform-origin-high;
  }
}

.size-loading(@size) {
  @distance-horizontal: 'switch-@{size}-loading-inner-distance';
  @loading-inner-size: 'switch-@{size}-loading-inner-size';
  &.@{switch-prefix-cls}-@{size} {
    .@{c7n-prefix}-progress-loading {
      left: @@distance-horizontal;

      .@{c7n-prefix}-progress-inner {
        width: @@loading-inner-size;
        height: @@loading-inner-size;
      }
    }
  }
}

.size-checked-loading(@size) {
  @checked-distance-horizontal: 'switch-@{size}-loading-inner-distance';
  &-@{size} .@{switch-prefix-cls}:checked + .@{c7n-prefix}-progress-loading {
    right: @@checked-distance-horizontal;
    left: auto;
  }
}

.size-button-left(@uncheck-left, @check-left) {
  .@{switch-prefix-cls} + .@{switch-prefix-cls}-label,
  .@{switch-prefix-cls} + .@{c7n-prefix}-progress-loading + .@{switch-prefix-cls}-label {
    &::after {
      left: @uncheck-left;
    }
  }
  .@{switch-prefix-cls}:checked + .@{switch-prefix-cls}-label,
  .@{switch-prefix-cls}:checked + .@{c7n-prefix}-progress-loading + .@{switch-prefix-cls}-label {
    &::after {
      left: @check-left;
    }
  }
}