rsuite/Toggle/styles/mixin.less

A suite of react components

.toggle-size-variant(
  @toogle-height,
  @min-width,
  @toggle-handle-gap,
  @toggle-inner-margin,
  @toggle-inner-font-size,
  @label-font-size,
) {
  @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
  font-size: @label-font-size;

  .rs-toggle-loader {
    width: @handle-diameter;
    height: @handle-diameter;
    left: @toggle-handle-gap;
    top: @toggle-handle-gap;

    .rs-loader-spin,
    .rs-loader-spin::before,
    .rs-loader-spin::after {
      width: @handle-diameter;
      height: @handle-diameter;
    }

    & when (@handle-diameter < 16px) {
      .rs-loader-spin::before,
      .rs-loader-spin::after {
        border-width: 2px;
      }
    }
  }

  .rs-toggle-presentation {
    height: @toogle-height;
    min-width: @min-width;
    border-radius: (@toogle-height / 2);
  }

  .rs-toggle-presentation::after {
    width: @handle-diameter;
    height: @handle-diameter;
    left: @toggle-handle-gap;
    top: @toggle-handle-gap;
    border-radius: (@handle-diameter / 2);
  }

  .rs-toggle-presentation:active::after {
    width: (@handle-diameter * @toggle-active-scale);
  }

  .rs-toggle-inner {
    margin-left: @toogle-height;
    margin-right: @toggle-inner-margin;
    height: @toogle-height;
    line-height: unit((@toogle-height / @toggle-inner-font-size));
    font-size: @toggle-inner-font-size;

    .rs-icon {
      font-size: @toggle-inner-font-size;
    }
  }

  &.rs-toggle-checked .rs-toggle-presentation {
    &::after {
      left: 100%;
      margin-left: -(@handle-diameter + @toggle-handle-gap);
    }

    &:active::after {
      margin-left: -(@handle-diameter * @toggle-active-scale + @toggle-handle-gap);
    }

    .rs-toggle-inner {
      margin-right: @toogle-height;
      margin-left: @toggle-inner-margin;
    }
  }

  &.rs-toggle-checked .rs-toggle-loader {
    left: 100%;
    margin-left: -(@handle-diameter + @toggle-handle-gap);
  }

  .rs-toggle-label {
    font-size: @label-font-size;
  }
}

// Small
.toggle(sm) {
  .toggle-size-variant(
    @toggle-sm-height,
    @toggle-sm-min-width,
    @toggle-sm-handle-gap,
    @toggle-sm-inner-margin,
    @toggle-sm-inner-font-size,
    @font-size-small
  );
}

// Middle
.toggle(md) {
  .toggle-size-variant(
    @toggle-md-height,
    @toggle-md-min-width,
    @toggle-md-handle-gap,
    @toggle-md-inner-margin,
    @toggle-md-inner-font-size,
    @font-size-base
  );
}

// Large
.toggle(lg) {
  .toggle-size-variant(
    @toggle-lg-height,
    @toggle-lg-min-width,
    @toggle-lg-handle-gap,
    @toggle-lg-inner-margin,
    @toggle-lg-inner-font-size,
    @font-size-large
  );
}