Toggles

Checkboxes are pretty ugly. So let's make them pretty.

<label class="c-toggle c-toggle--primary">
  <input type="checkbox" checked>
  <div class="c-toggle__track">
    <div class="c-toggle__handle"></div>
  </div>
  .c-toggle .c-toggle--primary
</label>

Animation

.a-toggle

Apply the .a-toggle class to enable animation on the toggle when it moves.

--slow, --fast

Every animation comes with slow and fast modifiers.