@opensig/opendesign/lib/toggle/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-toggle {
  --toggle-size: var(--o-control_size-m);
  --toggle-text-size: var(--o-font_size-text1);
  --toggle-text-height: var(--o-line_height-text1);
  --toggle-radius: var(--o-radius_control-s);
  --toggle-gap: 4px;
  --toggle-icon-size: var(--o-icon_size_control-m);
  --toggle-padding: 0 15px;
  --toggle-color: var(--o-color-info1);
  --toggle-color-hover: var(--o-color-info1);
  --toggle-color-active: var(--o-color-info1);
  --toggle-color-disabled: var(--o-color-info4);
  --toggle-bg-color: var(--o-color-control2-light);
  --toggle-bg-color-hover: var(--o-color-control2-light);
  --toggle-bg-color-active: var(--o-color-control3-light);
  --toggle-bg-color-disabled: transparent;
  --toggle-bd-color: var(--o-color-fill1);
  --toggle-bd-color-hover: transparent;
  --toggle-bd-color-active: transparent;
  --toggle-bd-color-disabled: transparent;
  --toggle-color-checked: var(--o-color-primary1);
  --toggle-color-checked-hover: var(--o-color-primary2);
  --toggle-color-checked-active: var(--o-color-primary3);
  --toggle-color-checked-disabled: var(--o-color-primary4);
  --toggle-bg-color-checked: transparent;
  --toggle-bg-color-checked-hover: transparent;
  --toggle-bg-color-checked-active: transparent;
  --toggle-bg-color-checked-disabled: transparent;
  --toggle-bd-color-checked: var(--o-color-primary1);
  --toggle-bd-color-checked-hover: var(--o-color-primary2);
  --toggle-bd-color-checked-active: var(--o-color-primary3);
  --toggle-bd-color-checked-disabled: var(--o-color-primary4);
}

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

.o-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--toggle-size);
  max-width: var(--toggle-max-width);
  min-width: var(--toggle-min-width);
  padding: var(--toggle-padding);
  transition: all var(--o-duration-s) var(--o-easing-standard);
  background-color: var(--toggle-bg-color);
  border: 1px solid var(--toggle-bd-color);
  white-space: nowrap;
  border-radius: var(--toggle-radius);
  cursor: pointer;
}
@media (hover: hover) {
  .o-toggle:hover {
    color: var(--toggle-color-hover);
    background-color: var(--toggle-bg-color-hover);
    border: 1px solid var(--toggle-bd-color-hover);
  }
}
.o-toggle:active {
  color: var(--toggle-color-active);
  background-color: var(--toggle-bg-color-active);
  border: 1px solid var(--toggle-bd-color-active);
}

.o-toggle-checked {
  background-color: var(--toggle-bg-color-checked);
  color: var(--toggle-color-checked);
  border: 1px solid var(--toggle-bd-color-checked);
}
@media (hover: hover) {
  .o-toggle-checked:hover {
    color: var(--toggle-color-checked-hover);
    background-color: var(--toggle-bg-color-checked-hover);
    border: 1px solid var(--toggle-bd-color-checked-hover);
  }
}
.o-toggle-checked:active {
  color: var(--toggle-color-checked-active);
  background-color: var(--toggle-bg-color-checked-active);
  border: 1px solid var(--toggle-bd-color-checked-active);
}

.o-toggle-disabled, .o-toggle-disabled:hover, .o-toggle-disabled.active {
  cursor: not-allowed;
  color: var(--toggle-color-disabled);
  background-color: var(--toggle-bg-color-disabled);
  border-color: var(--toggle-bd-color-disabled);
}

.o-toggle-checked.o-toggle-disabled, .o-toggle-checked.o-toggle-disabled:hover, .o-toggle-checked.o-toggle-disabled.active {
  color: var(--toggle-color-checked-disabled);
  background-color: var(--toggle-bg-color-checked-disabled);
  border-color: var(--toggle-bd-color-checked-disabled);
}

.o-toggle-prefix {
  display: inline-flex;
  align-items: center;
  font-size: var(--toggle-icon-size);
  margin-right: var(--toggle-gap);
}

@media (min-width: 1201px) and (max-width: 1440px) {
  .o-toggle {
    --toggle-text-size: var(--o-font_size-tip1);
    --toggle-text-height: var(--o-line_height-tip1);
    --toggle-icon-size: var(--o-icon_size_control-xs);
  }
}
@media (max-width: 1200px) {
  .o-toggle {
    --toggle-padding: 0 11px;
    --toggle-text-size: var(--o-font_size-tip2);
    --toggle-text-height: var(--o-line_height-tip2);
    --toggle-icon-size: var(--o-icon_size_control-xs);
  }
}