CodePen Embed - Flat UI Checkbox & radio buttons

/ Checkbox elements
%div.row
  %div.col_3
    .row
      .col_1
        %a{:href=>"https://designmodo.github.io/Flat-UI/"}
          %img{:src=>"https://i.imgur.com/HoeMpum.png"}
  %div.col_3
    %div.row
      %h3.col_1 Checkboxes
    %div.row
      %div.col_1
        %label.checkbox{:for => "checkbox1"}
          %input#checkbox1{:type => "checkbox", :value => ""} Unchecked
    %div.row
      %div.col_1
        %label.checkbox{:for => "checkbox2"}
          %input#checkbox2{:checked => "checked", :type => "checkbox", :value => ""} Checked
    %div.row
      %div.col_1
        %label.checkbox.disabled{:for => "checkbox3"}
          %input#checkbox3{:disabled => "", :type => "checkbox", :value => ""} Disabled unchecked
    %div.row
      %div.col_1
        %label.checkbox.disabled.checked{:for => "checkbox4"}
          %input#checkbox4{:checked => "checked", :disabled => "", :type => "checkbox", :value => ""} Disabled checked

  %div.col_3
    %div.row
      %h2.col_1 Radio options
    %div.row
      %div.col_1
        %label.radio
          %input#optionsRadios1{:name => "optionsRadios", :type => "radio", :value => "option1"} Radio is off
    %div.row
      %div.col_1
        %label.radio.checked
          %input#optionsRadios2{:checked => "", :name => "optionsRadios", :type => "radio", :value => "option1"} Radio is on
    %div.row
      %div.col_1
        %label.radio.disabled
          %input#optionsRadios3{:disabled => "", :name => "optionsRadiosDisabled", :type => "radio", :value => "option2"} Disabled radio is off
    %div.row
      %div.col_1
        %label.radio.checked.disabled
          %input#optionsRadios4{:checked => "", :disabled => "", :name => "optionsRadiosDisabled", :type => "radio", :value => "option2"} Disabled radio is on

View Compiled

@import "compass/css3";

/*not part of default style*/
body{font-family:tahoma;padding:24px;}
div{margin-bottom:12px;}

$checkbox-img: "https://i.imgur.com/XjDP97w.png";
$checkbox-img-2x: "https://i.imgur.com/hUswNbM.png";

$radio-img: "https://i.imgur.com/tB5INaV.png";
$radio-img-2x: "https://i.imgur.com/qPWDmra.png";

$disc-on-img: "https://i.imgur.com/el3jUyH.png";
$disc-off-img: "https://i.imgur.com/2n5fl9B.png";

$block-on-img: "https://i.imgur.com/7ytovdb.png";
$block-off-img: "https://i.imgur.com/gcLG3Og.png";

.checkbox,
.radio {
  margin-bottom: 12px;
  padding-left: 32px;
  position: relative;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  -webkit-backface-visibility: hidden; }
  .checkbox:hover,
  .radio:hover {
    color: #1abc9c; }
  .checkbox input,
  .radio input {
    outline: none !important;
    opacity: 0;
    filter: alpha(opacity=0);
    zoom: 1; }
  .checkbox.checked .icon,
  .radio.checked .icon {
    background-position: -60px -30px;
    opacity: 1;
    display: block\9; }
  .checkbox.checked .icon-to-fade,
  .radio.checked .icon-to-fade {
    opacity: 0;
    display: none\9; }
  .checkbox.disabled,
  .radio.disabled {
    color: #d7dddd;
    cursor: default; }
    .checkbox.disabled .icon,
    .radio.disabled .icon {
      opacity: 0;
      display: none\9; }
    .checkbox.disabled .icon-to-fade,
    .radio.disabled .icon-to-fade {
      background-position: -30px -60px;
      opacity: 1;
      display: block\9; }
    .checkbox.disabled.checked .icon,
    .radio.disabled.checked .icon {
      background-position: 0 -90px;
      opacity: 1;
      display: block\9; }
    .checkbox.disabled.checked .icon-to-fade,
    .radio.disabled.checked .icon-to-fade {
      opacity: 0;
      display: none\9; }
  .checkbox .icon,
  .checkbox .icon-to-fade,
  .radio .icon,
  .radio .icon-to-fade {
    background: url($checkbox-img) -90px 0 no-repeat;
    display: block;
    height: 20px;
    left: 0;
    opacity: 1;
    position: absolute;
    top: -1px;
    width: 20px;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    -webkit-backface-visibility: hidden; }
  .checkbox .icon,
  .radio .icon {
    opacity: 0;
    top: 0;
    z-index: 2;
    display: none\9; }

.radio .icon,
.radio .icon-to-fade {
  background-image: url($radio-img); }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
  .checkbox .icon {
    background-image: url($checkbox-img-2x);
    background-size: 110px 110px; }

  .radio .icon {
    background-image: url($radio-img-2x);
    background-size: 110px 110px; } }
.toggle {
  background-color: #34495e;
  border-radius: 60px;
  color: white;
  height: 29px;
  margin: 0 12px 12px 0;
  overflow: hidden;
  *zoom: 1;
  display: inline-block;
  zoom: 1;
  *display: inline;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  -webkit-backface-visibility: hidden; }
  .toggle:before, .toggle:after {
    display: table;
    content: ""; }
  .toggle:after {
    clear: both; }
  .toggle.toggle-off {
    background-color: #cbd2d8; }
    .toggle.toggle-off .toggle-radio {
      background-image: url($disc-on-img);
      background-position: 0 0;
      color: white;
      left: 0;
      margin-left: 0.5px;
      margin-right: -13px;
      z-index: 1; }
      .toggle.toggle-off .toggle-radio:first-child {
        left: -120%; }
  .toggle .toggle-radio {
    background: url($disc-off-img) right top no-repeat;
    color: #1abc9c;
    display: block;
    font-weight: 700;
    height: 21px;
    left: 120%;
    margin-left: -13px;
    padding: 5px 32px 3px;
    position: relative;
    text-align: center;
    z-index: 2;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden; }
    .toggle .toggle-radio:first-child {
      margin-bottom: -29px;
      left: 0; }
  .toggle input {
    display: none;
    position: absolute;
    outline: none !important;
    display: block\9;
    opacity: 0.01;
    filter: alpha(opacity=1);
    zoom: 1; }
  .toggle.toggle-icon {
    border-radius: 6px 7px 7px 6px; }
    .toggle.toggle-icon.toggle-off {
      border-radius: 7px 6px 6px 7px; }
      .toggle.toggle-icon.toggle-off .toggle-radio {
        background-image: url($block-off-img);
        background-position: 0 0; }
    .toggle.toggle-icon .toggle-radio {
      background-image: url($block-on-img);
      background-position: 62px 0;
      border-radius: 6px;
      min-width: 27px;
      text-align: right; }
      .toggle.toggle-icon .toggle-radio:first-child {
        text-align: left; }

/* Ass kicking grid system */

/////////////
// Options //
/////////////

$gutter: 6px;
$color: #D5D5D5;

$bg-img: "https://i.imgur.com/3YfrKG7.png";
$dropdown-img: "https://i.imgur.com/kXsFVER.png";

////////////
// Mixins //
////////////

@mixin breakpoint($display) {
  @if $display == widescreen {
    @media (min-width: 1224px) { @content; }
  }
  @else if $display == desktop {
    @media (min-width: 769px) { @content; }
  }
  @else if $display == tablet {
    @media (min-width: 481px) { @content; }
  }
  @else if $display == mobile {
    @media (min-width: 320px)  { @content; }
  }
  @else if $display == mini {
    @media (min-width: 0px)  { @content; }
  }
}

@mixin placeholder {
  &.placeholder { @content }
  &:-moz-placeholder { @content }
  &::-webkit-input-placeholder { @content }
}

@mixin shadow($context) {
  -webkit-box-shadow: $context;
  -moz-box-shadow: $context;
  box-shadow: $context;
}

///////////
// Rules //
///////////

* {
  @include box-sizing(border-box);
  margin:0;
  padding:0;
  //font-weight:bold;
  outline:none;
  word-wrap:break-word; }

img{
  width:100%;max-width:100%; }

body,html{
  font-family: tahoma;
  float: left;
  padding: $gutter*2;
  background:#ecf0f1;
  background-image: url($bg-img); }

h1 {
  font-size: $gutter*5.3333333333;
  font-weight: 900;
  margin-bottom: $gutter*4 !important;
  color: #2c3e50; }

h2 {
  font-size: $gutter*4.3333333333;
  font-weight: 700;
  color: #34495e;
  text-align: left; }

h3 {
  font-size: $gutter*4;
  font-weight: 700; }

h4 {
  font-size: $gutter*3;
  font-weight: 500;
  margin-top: $gutter*1.5; }

h5 {
  font-size: $gutter*2.6666666667;
  font-weight: 500;
  text-transform: uppercase; }

h6 {
  font-size: $gutter*2.1666666667;
  text-weight: 500;
  text-transform: uppercase; }

label {
  float: left;
  margin-bottom: $gutter;
  color: #7f8c8d; 
  &.checkbox {
    margin-bottom: 0; }
  &.radio {
    margin-bottom: 0; }
}

input {
  text-align: left;
  width:100%; 
  .checkbox & {
    width: 0; }
  .radio & {
    width: 0; }
}

.row{
  float: left;
  width: 100%;
  //margin-bottom: $gutter;
  @include breakpoint(mini)       {
    margin-bottom: $gutter;
  }
  @include breakpoint(mobile)     {
    margin-bottom: $gutter/2;
  }
  @include breakpoint(tablet)     {
    margin-bottom: $gutter/1.5;
  }
  @include breakpoint(desktop)    {
    margin-bottom: $gutter;
  }
  @include breakpoint(widescreen) {
    margin-bottom: $gutter*1.5;
  }

    & [class*="col"] {
      position: relative;
      word-wrap: break-word;

      &:after {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        //background: $color;
        //@include background-image(linear-gradient(white, #ccc));
        z-index: -999;
        //box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        //left: $gutter/2;
        //right: $gutter/2;
        
        @include breakpoint(mini)       {
          left:  0;
          right: 0;
          margin-bottom: $gutter*2;
        }
        @include breakpoint(mobile)     {
          left: ($gutter/2)/2;
          right: ($gutter/2)/2;
        }
        @include breakpoint(tablet)     {
          left: ($gutter/2)/1.5;
          right: ($gutter/2)/1.5;
        }
        @include breakpoint(desktop)    {
          left: $gutter/2;
          right: $gutter/2;
        }
        @include breakpoint(widescreen) {
          left: ($gutter/2)*1.5;
          right: ($gutter/2)*1.5;
        }
         

      }

      &:first-of-type {
        &:after {
          left: 0;
        }
      }
      
      &:last-of-type {
        &:after {
          right: 0;
      }
          
      }

    }//col

}//row

@for $i from 1 through 12 {

  .padding_#{$i} {
    padding: $gutter*$i;
  }
}

@for $i from 1 through 12 {
  .col_#{$i} { 
    float: left;
    
    @include single-transition(padding, 0.5s, ease-out);

    @include breakpoint(mini)       {
      padding: 0;
      width: 100/1+0%;
    }
    @include breakpoint(mobile)     {
      padding: $gutter/2;
    }
    @include breakpoint(tablet)     {
      padding: $gutter/1.5;
      width: 100/1+0%;
    }
    @include breakpoint(desktop)    {
      padding: $gutter;
      width: 100/$i+0%;
    }
    @include breakpoint(widescreen) {
      padding: $gutter*1.5;
    }
  }
}

View Compiled

// FLAT-UI KIT // custom_checkbox_and_radio.js

// Custom checkbox and radios
function setupLabel() {
    // Checkbox
    var checkBox = ".checkbox";
    var checkBoxInput = checkBox + " input[type='checkbox']";
    var checkBoxChecked = "checked";
    var checkBoxDisabled = "disabled";

    // Radio
    var radio = ".radio";
    var radioInput = radio + " input[type='radio']";
    var radioOn = "checked";
    var radioDisabled = "disabled";

    // Checkboxes
    if ($(checkBoxInput).length) {
        $(checkBox).each(function(){
            $(this).removeClass(checkBoxChecked);
        });
        $(checkBoxInput + ":checked").each(function(){
            $(this).parent(checkBox).addClass(checkBoxChecked);
        });
        $(checkBoxInput + ":disabled").each(function(){
            $(this).parent(checkBox).addClass(checkBoxDisabled);
        });
    };

    // Radios
    if ($(radioInput).length) {
        $(radio).each(function(){
            $(this).removeClass(radioOn);
        });
        $(radioInput + ":checked").each(function(){
            $(this).parent(radio).addClass(radioOn);
        });
        $(radioInput + ":disabled").each(function(){
            $(this).parent(radio).addClass(radioDisabled);
        });
    };
};

// FLAT-UI KIT // custom_radio.js

$(document).ready(function(){
    $("html").addClass("has-js");

    // First let's prepend icons (needed for effects)
    $(".checkbox, .radio").prepend("<span class='icon'></span><span class='icon-to-fade'></span>");

    $(".checkbox, .radio").click(function(){
        setupLabel();
    });
    setupLabel();
});

var toggleHandler = function(toggle) {
    var toggle = toggle;
    var radio = $(toggle).find("input");

    var checkToggleState = function() {
        if (radio.eq(0).is(":checked")) {
            $(toggle).removeClass("toggle-off");
        } else {
            $(toggle).addClass("toggle-off");
        }
    };

    checkToggleState();

    radio.eq(0).click(function() {
        $(toggle).toggleClass("toggle-off");
    });

    radio.eq(1).click(function() {
        $(toggle).toggleClass("toggle-off");
    });
};

$(document).ready(function() {
    $(".toggle").each(function(index, toggle) {
        toggleHandler(toggle);
    });
});

This Pen is owned by Dillon Sylvestre on CodePen.

See more by @uniZero on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js