wetrade-design/lib/switch/style/index-pure.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';

@switch-prefix-cls: ~'@{wd-prefix}-switch';
@switch-duration: 0.2s;

@switch-pin-size: @switch-height - 4px;
@switch-sm-pin-size: @switch-sm-height - 4px;

.@{switch-prefix-cls} {
  .reset-component();

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: @switch-min-width;
  height: @switch-height;
  line-height: @switch-height;
  vertical-align: middle;
  background-color: @disabled-color;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &:focus {
    outline: 0;
    // box-shadow: 0 0 0 2px fade(@disabled-color, 10%);
  }

  &-checked:focus {
    // box-shadow: 0 0 0 2px @primary-1;
  }

  &:focus:hover {
    box-shadow: none;
  }

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

  &-loading,
  &-disabled {
    cursor: not-allowed;
    background-color: @switch-disabled-bg;
    // opacity: @switch-disabled-opacity;

    .@{switch-prefix-cls}-inner {
      color: @switch-disabled-color;
    }

    &.@{switch-prefix-cls}-checked {
      background-color: @switch-disabled-bg-checked;
      // color: @switch-disabled-color-checked;

      .@{switch-prefix-cls}-inner {
        color: @switch-bg;
      }
    }
    * {
      box-shadow: none;
      cursor: not-allowed;
    }
  }

  &-disabled &-handle {
    &::before {
      background-color: @icon-white-disable;
    }
  }

  // ========================= Inner ==========================
  &-inner {
    display: block;
    margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
    color: @text-color-inverse;
    font-size: @font-size-sm;
    transition: margin @switch-duration;
  }

  &-checked &-inner {
    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
  }

  // ========================= Handle =========================
  &-handle {
    position: absolute;
    top: @switch-padding;
    left: @switch-padding;
    width: @switch-pin-size;
    height: @switch-pin-size;
    transition: all @switch-duration ease-in-out;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: @switch-bg;
      border-radius: (@switch-pin-size / 2);
      box-shadow: @switch-shadow;
      // transition: all @switch-duration ease-in-out;
      content: '';
    }
  }

  &-checked &-handle {
    left: calc(100% - @switch-pin-size - @switch-padding);
  }

  // &:not(&-disabled):active {
  //   .@{switch-prefix-cls}-handle::before {
  //     right: -30%;
  //     left: 0;
  //   }

  //   &.@{switch-prefix-cls}-checked {
  //     .@{switch-prefix-cls}-handle::before {
  //       right: 0;
  //       left: -30%;
  //     }
  //   }
  // }

  // ======================== Loading =========================
  &-loading-icon.@{iconfont-css-prefix} {
    position: relative;
    top: ((@switch-pin-size - @font-size-base) / 2);
    color: @switch-disabled-color;
    vertical-align: top;
    animation: loadingCircle 1s infinite linear;
  }

  &-checked &-loading-icon {
    // color: @switch-color;
    color: @switch-disabled-color-checked;
  }

  // ========================== Size ==========================
  &-small {
    min-width: @switch-sm-min-width;
    height: @switch-sm-height;
    line-height: @switch-sm-height;

    .@{switch-prefix-cls}-inner {
      margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
      font-size: @font-size-sm;
    }

    .@{switch-prefix-cls}-handle {
      width: @switch-sm-pin-size;
      height: @switch-sm-pin-size;
      top: @switch-small-padding;
      left: @switch-small-padding;
    }

    .@{switch-prefix-cls}-loading-icon {
      top: ((@switch-sm-pin-size - 10px) / 2);
      font-size: 10px;
    }

    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-inner {
        margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
      }

      .@{switch-prefix-cls}-handle {
        left: calc(100% - @switch-sm-pin-size - @switch-small-padding);
      }
    }
  }
}

@import './rtl';