Checkbox Switch

checkbox-switch.markdown

Checkbox Switch

A Pen by Lee Munroe on CodePen.

License.

index.html

<div class="switch">
    <input id="switch-1" type="checkbox" class="switch-input" />
    <label for="switch-1" class="switch-label">Switch</label>
  </div>


<h1>Emoji</h1>
<div class="emoji-toggle emoji-happy">
  <input type="checkbox" id="toggle1" class="toggle">
  <div class="emoji"></div>
  <label for="toggle1" class="well"></label>
</div>

<div class="emoji-toggle emoji-travel">
  <input type="checkbox" id="toggle2" class="toggle">
  <div class="emoji"></div>
  <label for="toggle2" class="well"></label>
</div>

<div class="emoji-toggle emoji-food">
  <input type="checkbox" id="toggle3" class="toggle">
  <div class="emoji"></div>
  <label for="toggle3" class="well"></label>
</div>

<div class="emoji-toggle emoji-vote">
  <input type="checkbox" id="toggle4" class="toggle">
  <div class="emoji"></div>
  <label for="toggle4" class="well"></label>
</div>

<div class="emoji-toggle emoji-love">
  <input type="checkbox" id="toggle5" class="toggle">
  <div class="emoji"></div>
  <label for="toggle5" class="well"></label>
</div>

style.scss

.switch {
  position: relative;
  display: inline-block;
}
.switch-input {
  display: none;
}
.switch-label {
  display: block;
  width: 240px;
  height: 92px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  user-select: none;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  background-color: #89c12d;
}
.switch-input:checked + .switch-label::after {
  left: 148px;
}




body {
  text-align: center;
  padding: 2rem;
}






// Base class
.emoji-toggle {
  position: relative;
  width: 60px;
  margin: 40px auto;
  .well {
    display: block;
    background: #eee;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
  }
  .toggle {
    opacity: 0;
    border: 0;
    outline: none;
    height: 100%;
    width: 100%;
    background: transparent;
    position: absolute;
    cursor: pointer;
    z-index: 100; 
    ~.emoji:before {
      content: "\01F431";
      position: absolute;
      left: 0;
      top: -15px;
      font-size: 40px;
      transition: 0.2s;
    }
    &:checked {
      ~.emoji:before {
        left: 100%;
        margin-left: -1em;
      }
    }
    ~label {
      white-space: nowrap;
      &:before {
        position: absolute;
        right: 100%;
        margin-right: 5px;
        top: 0;
      }
      &:after {
        position: absolute;
        left: 100%;
        margin-left: 5px; 
        top: 0;
      }
    }
  }
}

@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
  .toggle {
    ~.emoji:before {
      content: $leftEmoji;
    }
    &:checked {
      ~.emoji:before {
        content: $rightEmoji;
      }
    }
     ~label {
      &:before {
        content: $leftLabel;
      }
      &:after {
        content: $rightLabel;
      }
    }
  }
}

.emoji-happy {
  @include emojiType(
    "\01F604", "\01F620", "Happy", "Mad"
  );
}

.emoji-travel {
  @include emojiType(
    "\02708", "\01F683", "Plane", "Train"
  );
}

.emoji-food {
  @include emojiType(
    "\01F354", "\01F355", "Burger", "Pizza"
  );
}

.emoji-vote {
  @include emojiType(
    "\01F44D", "\01F44E", "Thumbs Up", "Thumbs Down"
  );
}

.emoji-love {
  @include emojiType(
    "\01F498", "\01F494", "Loves Me", "Loves Me Not"
  );
}