Contents

.switch {
  appearance: none;
  background-color: var(--color-border);
  border-color: transparent;
  border-radius: var(--rounded-full);
  border-width: var(--border-2);
  block-size: var(--size-6);
  cursor: pointer;
  inline-size: var(--size-11);
  transition-duration: var(--time-150);
  transition-property: var(--transition-colors);
  transition-timing-function: var(--ease-in-out);

  &:checked {
    background-color: var(--color-primary);
  }

  &:checked::before {
    margin-inline-start: var(--size-5);
  }

  &::before {
    aspect-ratio: 1;
    background-color: var(--color-text-reversed);
    block-size: var(--size-full);
    border-radius: var(--rounded-full);
    content: "";
    display: block;
    transition: margin var(--time-150) var(--ease-in-out);
  }

  &:focus-visible {
    outline: var(--border-2) solid var(--color-primary);
    outline-offset: var(--border-2);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-50);
  }
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
css-zero-0.0.22	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-0.0.21	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-0.0.20	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-0.0.19	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css