fine-true/lib/switch/index.less

A small and beautiful Vue3 version of the UI Library

.fine-switch {
  position: relative;
  display: inline-block;
  background-color: var(--fine-switch-backgrond-color);
  border: 1px solid var(--fine-switch-border-color);
  transition: background-color var(--fine-switch-transition-duration);
  cursor: pointer;
  &-on {
    background-color: var(--fine-switch-on-background-color);
  }
  &-node {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--fine-switch-node-zindex);
    background-color: var(--fine-switch-node-background-color);
    border-radius: 100%;
    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
      0 3px 3px 0 rgba(0, 0, 0, 0.05);
    transition: transform var(--fine-switch-transition-duration);
  }

  &-disabled {
    opacity: var(--fine-switch-disabled-opacity);
    cursor: not-allowed;
  }
  .fine-switch-on-text,
  .fine-switch-off-text {
    position: absolute;
    top: 0;
    height: 100%;
    text-align: center;
    color: #fff;
  }
  .fine-switch-on-text {
    left: 0;
  }
  .fine-switch-off-text {
    right: 0;
  }
}

.fine-switch-size-default {
  width: var(--fine-switch-default-width);
  height: var(--fine-switch-default-height);
  border-radius: var(--fine-switch-default-radius);
  .fine-switch-node {
    width: var(--fine-switch-node-default-width);
    height: var(--fine-switch-node-default-height);
  }
  .fine-switch-on-text,
  .fine-switch-off-text {
    width: calc(
      var(--fine-switch-default-width) - var(--fine-switch-node-default-width)
    );
    line-height: var(--fine-switch-default-height);
    font-size: var(--fine-switch-default-text-size);
    > * {
      font-size: var(--fine-switch-default-text-size);
    }
  }
}
.fine-switch-on.fine-switch-size-default {
  .fine-switch-node {
    transform: translateX(
      calc(
        var(--fine-switch-default-width) - var(--fine-switch-node-default-width)
      )
    );
  }
}

.fine-switch-size-large {
  width: var(--fine-switch-large-width);
  height: var(--fine-switch-large-height);
  border-radius: var(--fine-switch-large-radius);
  .fine-switch-node {
    width: var(--fine-switch-node-large-width);
    height: var(--fine-switch-node-large-height);
  }
  .fine-switch-on-text,
  .fine-switch-off-text {
    width: calc(
      var(--fine-switch-large-width) - var(--fine-switch-node-large-width)
    );
    line-height: var(--fine-switch-large-height);
    font-size: var(--fine-switch-large-text-size);
    > * {
      font-size: var(--fine-switch-large-text-size);
    }
  }
}
.fine-switch-on.fine-switch-size-large {
  .fine-switch-node {
    transform: translateX(
      calc(var(--fine-switch-large-width) - var(--fine-switch-node-large-width))
    );
  }
}

.fine-switch-size-small {
  width: var(--fine-switch-small-width);
  height: var(--fine-switch-small-height);
  border-radius: var(--fine-switch-small-radius);
  .fine-switch-node {
    width: var(--fine-switch-node-small-width);
    height: var(--fine-switch-node-small-height);
  }
  .fine-switch-on-text,
  .fine-switch-off-text {
    width: calc(
      var(--fine-switch-small-width) - var(--fine-switch-node-small-width)
    );
    line-height: var(--fine-switch-small-height);
    font-size: var(--fine-switch-small-text-size);
    > * {
      font-size: var(--fine-switch-small-text-size);
    }
  }
}
.fine-switch-on.fine-switch-size-small {
  .fine-switch-node {
    transform: translateX(
      calc(var(--fine-switch-small-width) - var(--fine-switch-node-small-width))
    );
  }
}