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

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

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

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

.@{switch-prefix-cls} {
  &-wrapper {
    padding: 0.03rem;
    &.@{c7n-pro-prefix}-field {
      width: auto;
    }
  }

  .radio-btn;

  &-label {
    position: relative;
    display: block;
    min-width: 0.36rem;
    height: @switch-height - 0.04rem;
    padding: 0 0.05rem 0 @switch-height;
    color: #fff;
    font-size: @font-size-sm;
    line-height: @switch-height - 0.06rem;
    background-color: rgba(0, 0, 0, 0.38);
    border-radius: @switch-height / 2;
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: @switch-height;
      height: @switch-height;
      margin-top: auto;
      margin-bottom: auto;
      background-color: @component-background;
      border-radius: 50%;
      box-shadow: 0 0.02rem 0.01rem -0.01rem rgba(0, 0, 0, 0.2),
        0 0.01rem 0.01rem 0 rgba(0, 0, 0, 0.14), 0 0.01rem 0.03rem 0 rgba(0, 0, 0, 0.12);
      cursor: inherit;
      transition: all @switch-duration @ease-in-out-circ;
      content: ' ';
    }
  }

  &:active + &-label::after {
    width: @switch-height + 0.04rem;
  }

  &-focused &-label {
    box-shadow: 0 0 0 0.02rem fade(@switch-color, 20%);
  }

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

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

  &:checked + &-label {
    padding: 0 @switch-height 0 0.05rem;
    background-color: @switch-color;
    &::after {
      left: 100%;
      margin-left: 0 - @switch-height;
      background-color: @switch-checked-color;
    }
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled + &-label {
    opacity: @switch-disabled-opacity;
  }

  &-sm {
    padding: 0;
  }

  &-sm &-label {
    min-width: 0.3rem;
    height: @switch-sm-height - 0.04rem;
    &::after {
      left: 0.01rem;
      width: @switch-sm-height;
      height: @switch-sm-height;
    }
  }

  &-sm &:checked + &-label::after {
    margin-left: -0.01rem - @switch-sm-height;
  }

  &-lg {
    padding: 0.03rem 0;
  }

  &-lg &-label {
    min-width: 0.4rem;
    height: @switch-lg-height - 0.04rem;
    &::after {
      left: 0.01rem;
      width: @switch-lg-height;
      height: @switch-lg-height;
    }
  }
  &-lg &:checked + &-label::after {
    margin-left: 0.01rem - @switch-lg-height;
  }

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