zarm/es/switch/style/index.css

基于 React 的移动端UI库

.za-switch {
  --width: var(--za-switch-width, 52px);
  --height: var(--za-switch-height, 32px);
  --background: var(--za-switch-background, rgba(120, 120, 128, 0.16));
  --border-radius: var(--za-switch-border-radius, var(--za-radius-round));
  --transition: var(--za-switch-transition, all 0.3s);
  --checked-background: var(--za-switch-checked-background, var(--za-theme-primary));
  --knob-background: var(--za-switch-knob-background, #fff);
  --knob-size: var(--za-switch-knob-size, 28px);
  --knob-box-shadow: var(--za-switch-knob-box-shadow, 0 3px 1px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.15));
  --knob-border-color: var(--za-switch-knob-border-color, rgba(0, 0, 0, 0.04));
  --knob-border-width: var(--za-switch-knob-border-width, 0.5px);
  --knob-transition: var(--za-switch-knob-transition, transform 0.3s cubic-bezier(0.45, 1, 0.4, 1), transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35));
}
.za-switch__input {
  position: relative;
  width: var(--width);
  height: var(--height);
  border: calc((var(--height) - var(--knob-size)) / 2) solid transparent;
  border-radius: var(--border-radius);
  background: var(--background);
  vertical-align: middle;
  transition: var(--transition);
  outline: 0;
  -webkit-appearance: none;
}
.za-switch__input:before, .za-switch__input:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--knob-size);
  border-radius: var(--border-radius);
}
.za-switch__input:before {
  width: calc(var(--width) - var(--height) + var(--knob-size));
  transition: var(--knob-transition);
}
.za-switch__input:after {
  width: var(--knob-size);
  background: var(--knob-background);
  border: var(--knob-border-width) solid var(--knob-border-color);
  box-shadow: var(--knob-box-shadow);
  transition: var(--knob-transition);
}
.za-switch__input:checked {
  background: var(--checked-background);
}
.za-switch__input:checked:after {
  transform: translateX(calc(var(--width) - var(--height)));
}

.za-switch--disabled .za-switch__input {
  cursor: not-allowed;
  opacity: var(--za-opacity-disabled);
}