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-5);
  cursor: pointer;
  inline-size: var(--size-9);
  transition-duration: var(--time-150);
  transition-property: var(--transition-colors);

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

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

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

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

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

Version data entries

6 entries across 6 versions & 1 rubygems

Version	Path
css-zero-1.0.4	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-1.0.3	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-1.0.2	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-1.0.1	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-1.0.0	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
css-zero-0.0.98	lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css