vue-fluent-ui/dist/components/VfToggleSwitch/src/ToggleSwitch.style.css

一个winui3/fluent design风格的vue组件库

.vf-toggle-switch {
  min-width: 154px;
  display: inline-block;
}

.vf-toggle-switch__input {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.vf-toggle-switch__input:focus-visible ~ .vf-toggle-switch__container:after {
  opacity: 1;
  border-color: var(--vf-stroke-focus-outer);
}

.vf-toggle-switch__wrapper {
  cursor: pointer;
  color: var(--vf-text-primary);
  border-radius: var(--vf-radius-control-corner);
  align-items: center;
  font-size: 14px;
  display: inline-flex;
}

.vf-toggle-switch__container {
  border-radius: var(--vf-radius-control-corner);
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  display: inline-flex;
  position: relative;
}

.vf-toggle-switch__container:after {
  content: "";
  pointer-events: none;
  opacity: 0;
  border-radius: var(--vf-radius-overlay-corner);
  border: 2px solid #0000;
  position: absolute;
  inset: -3px -7px;
}

.vf-toggle-switch__track {
  box-sizing: border-box;
  width: 40px;
  height: 20px;
  transition-timing-function: var(--vf-easing-control-fast-out-slow-in-key-spline);
  transition-duration: var(--vf-duration-control-fast-animation);
  border: 1px solid var(--vf-stroke-control-strong-default);
  background-color: var(--vf-fill-control-alt-secondary);
  border-radius: 10px;
  flex-shrink: 0;
  transition-property: background-color, border-color;
  display: inline-block;
  position: relative;
}

.vf-toggle-switch__knob {
  width: 22px;
  height: 20px;
  transition-timing-function: var(--vf-easing-control-fast-out-slow-in-key-spline);
  transition-duration: var(--vf-duration-control-fast-animation);
  background-color: var(--vf-text-secondary);
  clip-path: inset(4px 6px 4px 4px round 20px);
  border-radius: 20px;
  transition-property: transform, background-color, clip-path;
  position: absolute;
  top: -1px;
  left: -1px;
  transform: translateX(0);
}

.vf-toggle-switch.vf-is-on .vf-toggle-switch__track {
  border-color: var(--vf-fill-accent-default);
  background-color: var(--vf-fill-accent-default);
}

.vf-toggle-switch.vf-is-on .vf-toggle-switch__knob {
  background-color: var(--vf-text-on-accent-fill-color-primary);
  transform: translateX(20px);
}

.vf-toggle-switch:not(.vf-is-disabled):hover .vf-toggle-switch__knob {
  clip-path: inset(3px 5px 3px 3px round 20px);
}

.vf-toggle-switch:not(.vf-is-disabled):hover .vf-toggle-switch__track {
  background-color: var(--vf-fill-control-alt-tertiary);
}

.vf-toggle-switch:not(.vf-is-disabled):hover.vf-is-on .vf-toggle-switch__track {
  border-color: var(--vf-fill-accent-secondary);
  background-color: var(--vf-fill-accent-secondary);
}

.vf-toggle-switch:not(.vf-is-disabled):active .vf-toggle-switch__knob {
  clip-path: inset(3px round 20px);
}

.vf-toggle-switch:not(.vf-is-disabled):active .vf-toggle-switch__track {
  background-color: var(--vf-fill-control-alt-quarternary);
}

.vf-toggle-switch:not(.vf-is-disabled):active.vf-is-on .vf-toggle-switch__track {
  border-color: var(--vf-fill-accent-tertiary);
  background-color: var(--vf-fill-accent-tertiary);
}

.vf-toggle-switch:not(.vf-is-disabled):active.vf-is-on .vf-toggle-switch__knob {
  transform: translateX(18px);
}

.vf-toggle-switch.vf-is-disabled .vf-toggle-switch__wrapper {
  cursor: not-allowed;
  color: var(--vf-text-disabled);
}

.vf-toggle-switch.vf-is-disabled .vf-toggle-switch__track {
  border-color: var(--vf-stroke-control-strong-disabled);
  background-color: var(--vf-fill-control-alt-disabled);
}

.vf-toggle-switch.vf-is-disabled .vf-toggle-switch__knob {
  background-color: var(--vf-text-disabled);
}

.vf-toggle-switch.vf-is-disabled.vf-is-on .vf-toggle-switch__track {
  background-color: var(--vf-fill-accent-disabled);
  border: none;
}

.vf-toggle-switch.vf-is-disabled.vf-is-on .vf-toggle-switch__knob {
  background-color: var(--vf-text-on-accent-fill-color-disabled);
}