JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<div class="switch">
  <input id="active" type="checkbox">
  <label for="active">
    <div class="switcher" data-checked="Yes" data-unchecked="No"></div>
  </label>
</div>

SCSS

body {
  font-family: 'Source Sans Pro', sans-serif;
}

@mixin switch-branding(
  $can-toggle-off-color: #777, 
  $can-toggle-on-color: #5fc054,
  $can-toggle-inactive-text: rgba(white, 0.5),
  $can-toggle-transition: cubic-bezier(0,1,0.5,1)
  ) {

    input[type="checkbox"] {

      &[disabled] ~ label {
        color: rgba($can-toggle-off-color, 0.5);
      }

      &:focus ~ label, &:hover ~ label {
        .switcher {
          background-color: $can-toggle-off-color;
          &:after { color: darken($can-toggle-off-color, 10%); }
        }
      }
      &:hover ~label { color: darken($can-toggle-off-color, 5%); }
      &:checked {
        ~ label {
          &:hover { color: darken($can-toggle-on-color, 3%); }

          .switcher {
            background-color: lighten($can-toggle-on-color, 5%);
            &:after { color: darken($can-toggle-on-color, 5%); }
          }
        }

        &:focus, &:hover {
          ~ label {
            .switcher {
              background-color: $can-toggle-on-color;
              &:after { color: darken($can-toggle-on-color, 10%); }
            }
          } 
        }
      }
    }

    label {
      .switcher {
        transition: background-color 0.3s $can-toggle-transition;
        background: lighten($can-toggle-off-color, 5%);
        &:before { color: $can-toggle-inactive-text; }
        &:after {
          // Autoprefixer choked here, so making the prefixes explicit
          -webkit-transition: -webkit-transform 0.3s $can-toggle-transition;
          transition: transform 0.3s $can-toggle-transition;
          color: $can-toggle-off-color; 
        }
      }

    }
}

@mixin switch-appearance 
  (
  $can-toggle-width: 134px,
  $can-toggle-height: 36px,
  $can-toggle-border-radius: 4px,
  $can-toggle-offset: 2px,
  $can-toggle-label-font-size: 14px,
  $can-toggle-switch-font-size: 12px,
  $can-toggle-shadow: 0 3px 3px rgba(black, 0.4)
  ){

    $can-toggle-switch-width: $can-toggle-width/2;

   ...