@opensig/opendesign/es/switch/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-switch {
  --switch-radius: var(--o-control_size-s);
  --switch-color: var(--o-color-info1-inverse);
  --switch-bg-color: var(--o-color-control1-light);
  --switch-bg-color-hover: var(--o-color-control2-light);
  --switch-bg-color-active: var(--o-color-control3-light);
  --switch-bg-color-disabled: var(--o-color-control4-light);
  --switch-bg-color-checked: var(--o-color-primary1);
  --switch-bg-color-checked-hover: var(--o-color-primary2);
  --switch-bg-color-checked-active: var(--o-color-primary3);
  --switch-bg-color-checked-disabled: var(--o-color-primary4);
  --switch-handler-bg-color: var(--o-color-white);
  --switch-handler-bg-color-disabled: rgb(var(--o-white), 0.6);
  --switch-handler-bg-color-checked-disabled: rgb(var(--o-white), 0.4);
  --switch-icon-loading-color: var(--o-color-primary1);
}

.o-switch-medium {
  --switch-min-width: 40px;
  --switch-size: var(--o-control_size-s);
  --switch-text-size: var(--o-font_size-tip1);
  --switch-text-height: var(--o-line_height-tip1);
  --switch-handler-size: var(--o-control_size-xs);
  --switch-handler-offset: 4px;
  --switch-label-padding: 6px;
}

.o-switch-small {
  --switch-min-width: 28px;
  --switch-size: var(--o-control_size-xs);
  --switch-text-size: var(--o-font_size-tip2);
  --switch-text-height: var(--o-line_height-tip2);
  --switch-handler-size: calc(var(--o-control_size-2xs) - 4px);
  --switch-handler-offset: 4px;
  --switch-label-padding: 4px;
}

.o-switch-round-pill {
  --switch-radius: var(--o-control_size-l);
}

.o-switch {
  display: inline-block;
  height: var(--switch-size);
  font-size: var(--switch-text-size);
  line-height: var(--switch-text-height);
  color: var(--switch-color);
  background-color: var(--switch-bg-color);
  border-radius: var(--switch-radius);
  transition: background-color var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;
  min-width: var(--switch-min-width);
}
@media (hover: hover) {
  .o-switch:hover {
    background-color: var(--switch-bg-color-hover);
  }
}
.o-switch:active {
  background-color: var(--switch-bg-color-active);
}

.o-switch-wrap {
  position: relative;
  height: 100%;
}

.o-switch-handler {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--switch-handler-size);
  height: var(--switch-handler-size);
  border-radius: calc(var(--switch-radius) - 2px);
  background-color: var(--switch-handler-bg-color);
  transition: left var(--o-duration-s) var(--o-easing-standard);
  left: var(--switch-handler-offset);
}
.o-switch-handler .o-switch-icon-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--switch-bg-color);
}

.o-switch-checked {
  background-color: var(--switch-bg-color-checked);
}
.o-switch-checked .o-switch-handler {
  left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
}
.o-switch-checked .o-switch-label {
  padding-left: var(--switch-label-padding);
  padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
}
@media (hover: hover) {
  .o-switch-checked:hover {
    background-color: var(--switch-bg-color-checked-hover);
  }
}
.o-switch-checked:active {
  background-color: var(--switch-bg-color-checked-active);
}

.o-switch-disabled,
.o-switch-loading {
  cursor: not-allowed;
}
.o-switch-disabled, .o-switch-disabled:hover, .o-switch-disabled:active,
.o-switch-loading,
.o-switch-loading:hover,
.o-switch-loading:active {
  background-color: var(--switch-bg-color-disabled);
}
.o-switch-disabled .o-switch-handler, .o-switch-disabled:hover .o-switch-handler, .o-switch-disabled:active .o-switch-handler,
.o-switch-loading .o-switch-handler,
.o-switch-loading:hover .o-switch-handler,
.o-switch-loading:active .o-switch-handler {
  background-color: var(--switch-handler-bg-color-disabled);
}
.o-switch-disabled .o-switch-handler .o-switch-icon-loading, .o-switch-disabled:hover .o-switch-handler .o-switch-icon-loading, .o-switch-disabled:active .o-switch-handler .o-switch-icon-loading,
.o-switch-loading .o-switch-handler .o-switch-icon-loading,
.o-switch-loading:hover .o-switch-handler .o-switch-icon-loading,
.o-switch-loading:active .o-switch-handler .o-switch-icon-loading {
  color: var(--switch-icon-loading-color);
}

.o-switch-disabled.o-switch-checked, .o-switch-disabled.o-switch-checked:hover, .o-switch-disabled.o-switch-checked:active,
.o-switch-loading.o-switch-checked,
.o-switch-loading.o-switch-checked:hover,
.o-switch-loading.o-switch-checked:active {
  background-color: var(--switch-bg-color-checked-disabled);
}
.o-switch-disabled.o-switch-checked .o-switch-handler, .o-switch-disabled.o-switch-checked:hover .o-switch-handler, .o-switch-disabled.o-switch-checked:active .o-switch-handler,
.o-switch-loading.o-switch-checked .o-switch-handler,
.o-switch-loading.o-switch-checked:hover .o-switch-handler,
.o-switch-loading.o-switch-checked:active .o-switch-handler {
  background-color: var(--switch-handler-bg-color-checked-disabled);
}

.o-switch-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
  padding-right: var(--switch-label-padding);
}