<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rkchauhan/pen/ONJEYL?depth=everything&limit=all&order=popularity&page=12&q=material+&show_forks=false" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Ravikumar Chauhan">
<!-- Meta and Opengraph tags -->
<meta name="description" content="Material Design Checkbox | by Ravikumar Chauhan">
<meta name="keywords" content="material design, checkbox, material checkbox, css3, html5">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'>
<style class="cp-pen-styles">/* -----------------------------------------------------
Material Design Checkbox
CodePen URL: https://codepen.io/rkchauhan/pen/ONJEYL
By: Ravikumar Chauhan
Find me on:-
* Twitter: https://twitter.com/rkchauhan01
* Facebook: https://www.facebook.com/ravi032chauhan
* GitHub: https://github.com/rkchauhan
* CodePen: https://codepen.io/rkchauhan
Thanks to:-
* Google Material design - https://www.google.com/design/spec/material-design/introduction.html
* Google Material Color - https://www.google.com/design/spec/style/color.html
* Google Material Icons - https://design.google.com/icons/
* Roboto Font - https://google.com/fonts/specimen/Roboto
* jQuery - https://jquery.com
-------------------------------------------------------- */
/* -----------------------------------------------------
Body
-------------------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #646360;
font-size: 16px;
font-family: 'Roboto', sans-serif;
background-color: #fafafa;
}
*, *::after, *::before {
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #03a9f4;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.color-box {
position: fixed;
top: 22%;
right: 0px;
width: 100px;
padding: 20px 18px 14px 20px;
background-color: #fff;
border-radius: 2px 0 0 2px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.175);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translate3d(102px, 0, 0);
transform: translate3d(102px, 0, 0);
z-index: 2;
}
.color-box.open {
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.color-box .show-box {
position: absolute;
left: -38px;
top: 15px;
width: 38px;
height: 38px;
display: block;
background-color: #fff;
border-radius: 2px 0 0 2px;
box-shadow: -4px 2px 2px -2px rgba(0, 0, 0, 0.175);
cursor: pointer;
z-index: 1;
}
.color-box .show-box i {
color: rgba(0, 0, 0, 0.575);
font-size: 20px;
line-height: 38px;
margin-left: 8px;
}
.color-box p {
margin: 0 0 8px 0;
padding: 0;
font-size: 11px;
}
.color-box .colors-list {
margin: 0;
padding: 0;
}
.color-box .colors-list li {
float: left;
display: block;
margin-bottom: 2px;
margin-right: 6px;
}
.color-box .colors-list li a {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 2px;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
cursor: pointer;
}
.color-box .colors-list li a.teal {
background-color: #009688;
}
.color-box .colors-list li a.lightBlue {
background-color: #03a9f4;
}
.color-box .colors-list li a.green {
background-color: #4caf50;
}
.color-box .colors-list li a.amber {
background-color: #ffc107;
}
.color-box .colors-list li a.orange {
background-color: #ff9800;
}
.color-box .colors-list li a.cyan {
background-color: #00bcd4;
}
.color-box .colors-list li a.pink {
background-color: #e91e63;
}
.color-box .colors-list li a.deepPurple {
background-color: #673ab7;
}
.color-box .colors-list li a.indigo {
background-color: #3f51b5;
}
.color-box .colors-list li a.red {
background-color: #f44336;
}
.color-box .colors-list li a.yellow {
background-color: #ffeb3b;
}
.color-box .colors-list li a.lime {
background-color: #cddc39;
}
.color-box .colors-list li a.brown {
background-color: #795548;
}
/* -----------------------------------------------------
Main
-------------------------------------------------------- */
main {
width: 100%;
max-width: 940px;
margin: 2rem auto;
}
main section {
display: block;
margin-bottom: 2rem;
padding: 1rem;
background-color: #eee;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.157);
}
main section:last-child {
margin-bottom: 0;
}
main section .heading {
margin: 0;
padding: 0;
font-size: 1.2rem;
}
main section .wrap {
overflow: hidden;
display: block;
margin: 0.4rem 0;
text-align: center;
}
main section .wrap .holder {
float: left;
text-align: center;
}
main section .wrap .holder:last-child {
margin-right: 0;
}
main section .wrap .holder.col-4 {
width: 24.25%;
}
main section .wrap .holder.col-4:nth-child(n) {
margin-right: 1%;
margin-bottom: 1%;
}
main section .wrap .holder.col-4:nth-child(4n) {
margin-right: 0;
margin-bottom: 0;
}
main section .wrap .holder .demo {
min-height: 100px;
padding: 2em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
main section .wrap .holder .captions {
padding: 8px;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
font-weight: bold;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 768px) {
main section .wrap .holder.col-4 {
width: 32.66667%;
}
main section .wrap .holder.col-4:nth-child(n) {
margin-right: 1%;
margin-bottom: 1%;
}
main section .wrap .holder.col-4:nth-child(3n) {
margin-right: 0;
margin-bottom: 0;
}
}
@media only screen and (max-width: 640px) {
main section .wrap .holder {
float: none;
}
main section .wrap .holder.col-4 {
display: block;
width: 100%;
}
main section .wrap .holder.col-4:nth-child(n) {
margin: 0;
margin-bottom: 14px;
}
}
main section.bg-dark {
background-color: #333;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.257);
}
main section.bg-dark .heading {
color: #7a7a7a;
}
main section.bg-dark .holder .captions {
color: #7a7a7a;
border-top: 1px solid rgba(255, 255, 255, 0.275);
border-bottom: 1px solid rgba(255, 255, 255, 0.275);
}
main section.bg-light {
background-color: #FFF;
}
@media only screen and (max-width: 960px) {
main {
padding: 0 1.5%;
}
}
/* -----------------------------------------------------
Header
-------------------------------------------------------- */
header {
display: block;
width: 100%;
padding: 12px 0;
text-align: center;
background-color: #009688;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.275);
}
header h2 {
margin: 0;
padding: 25px 0;
color: #FFF;
font-size: 2em;
font-weight: 300;
letter-spacing: 1px;
}
/* -----------------------------------------------------
Footer
-------------------------------------------------------- */
footer {
display: block;
overflow: hidden;
width: 100%;
min-height: 80px;
background-color: #dbdbdb;
border-top: 1px solid #EEE;
}
footer .row {
width: 100%;
max-width: 860px;
margin: 0 auto;
}
footer .footer-content {
margin: 0 8px;
padding: 25px 0 18px;
text-align: center;
}
footer .footer-content span {
color: rgba(0, 0, 0, 0.525);
font-size: 0.857em;
margin-right: 5px;
}
@media only screen and (max-width: 768px) {
footer span {
display: block;
width: 100%;
margin-bottom: 8px;
}
}
/* ----------------------------------------------------------------------
Material Design Checkbox - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-checkbox {
color: #818181;
font-size: 15px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
letter-spacing: .5px;
}
.rkmd-checkbox .input-checkbox {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
text-align: center;
vertical-align: -9px;
}
.rkmd-checkbox .input-checkbox input[type="checkbox"] {
visibility: hidden;
position: absolute;
left: 7px;
bottom: 7px;
margin: 0;
padding: 0;
outline: none;
cursor: pointer;
opacity: 0;
}
.rkmd-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before {
position: absolute;
left: 4px;
bottom: 8px;
width: 18px;
height: 18px;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: -6px;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-transition: all .2s ease;
transition: all .2s ease;
z-index: 1;
}
.rkmd-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before {
content: "\e835";
color: #717171;
}
.rkmd-checkbox .input-checkbox input[type="checkbox"]:checked + .checkbox:before {
content: "\e834";
}
.rkmd-checkbox .input-checkbox input[type="checkbox"]:active:not(:disabled) + .checkbox:before {
-webkit-transform: scale3d(0.88, 0.88, 1);
transform: scale3d(0.88, 0.88, 1);
}
.rkmd-checkbox .input-checkbox input[type="checkbox"]:disabled + .checkbox:before {
color: rgba(0, 0, 0, 0.157) !important;
}
.rkmd-checkbox.checkbox-light label, .rkmd-checkbox.checkbox-light .label {
color: #FFF;
}
.rkmd-checkbox.checkbox-light input[type="checkbox"] + .checkbox:before {
color: #FFF;
}
.rkmd-checkbox.checkbox-light input[type="checkbox"]:disabled + .checkbox:before {
color: #5d5d5d !important;
}
.rkmd-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"] + .checkbox:before {
border-color: #FFF;
}
.rkmd-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"]:disabled + .checkbox:before {
border-color: #5d5d5d !important;
}
.rkmd-checkbox label, .rkmd-checkbox .label {
cursor: pointer;
}
/* ----------------------------------------------------------------------
Rotate Checkbox - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox {
cursor: pointer;
}
.rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox:before {
content: "";
position: absolute;
left: 7px;
bottom: 7px;
width: 18px;
height: 18px;
border: 2px solid #717171;
border-radius: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
z-index: 1;
}
.rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:checked + .checkbox:before {
left: 11px;
width: 12px;
height: 20px;
border-width: 2px;
border-style: solid;
border-top: transparent;
border-left: transparent;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
border-radius: 1px;
}
.rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:disabled + .checkbox:before {
border-color: rgba(0, 0, 0, 0.157) !important;
}
/* ----------------------------------------------------------------------
Normal Checkbox Color - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-teal input[type="checkbox"]:checked + .checkbox:before {
color: #009688;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before {
color: #03a9f4;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-green input[type="checkbox"]:checked + .checkbox:before {
color: #4caf50;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-amber input[type="checkbox"]:checked + .checkbox:before {
color: #ffc107;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-orange input[type="checkbox"]:checked + .checkbox:before {
color: #ff9800;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-cyan input[type="checkbox"]:checked + .checkbox:before {
color: #00bcd4;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-pink input[type="checkbox"]:checked + .checkbox:before {
color: #e91e63;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-deepPurple input[type="checkbox"]:checked + .checkbox:before {
color: #673ab7;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-indigo input[type="checkbox"]:checked + .checkbox:before {
color: #3f51b5;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-red input[type="checkbox"]:checked + .checkbox:before {
color: #f44336;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-yellow input[type="checkbox"]:checked + .checkbox:before {
color: #ffeb3b;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-lime input[type="checkbox"]:checked + .checkbox:before {
color: #cddc39;
}
.rkmd-checkbox:not(.checkbox-rotate) .checkbox-brown input[type="checkbox"]:checked + .checkbox:before {
color: #795548;
}
/* ----------------------------------------------------------------------
Rotate Checkbox Color - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-checkbox.checkbox-rotate .checkbox-teal input[type="checkbox"]:checked + .checkbox:before {
border-color: #009688;
}
.rkmd-checkbox.checkbox-rotate .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before {
border-color: #03a9f4;
}
.rkmd-checkbox.checkbox-rotate .checkbox-green input[type="checkbox"]:checked + .checkbox:before {
border-color: #4caf50;
}
.rkmd-checkbox.checkbox-rotate .checkbox-amber input[type="checkbox"]:checked + .checkbox:before {
border-color: #ffc107;
}
.rkmd-checkbox.checkbox-rotate .checkbox-orange input[type="checkbox"]:checked + .checkbox:before {
border-color: #ff9800;
}
.rkmd-checkbox.checkbox-rotate .checkbox-cyan input[type="checkbox"]:checked + .checkbox:before {
border-color: #00bcd4;
}
.rkmd-checkbox.checkbox-rotate .checkbox-pink input[type="checkbox"]:checked + .checkbox:before {
border-color: #e91e63;
}
.rkmd-checkbox.checkbox-rotate .checkbox-deepPurple input[type="checkbox"]:checked + .checkbox:before {
border-color: #673ab7;
}
.rkmd-checkbox.checkbox-rotate .checkbox-indigo input[type="checkbox"]:checked + .checkbox:before {
border-color: #3f51b5;
}
.rkmd-checkbox.checkbox-rotate .checkbox-red input[type="checkbox"]:checked + .checkbox:before {
border-color: #f44336;
}
.rkmd-checkbox.checkbox-rotate .checkbox-yellow input[type="checkbox"]:checked + .checkbox:before {
border-color: #ffeb3b;
}
.rkmd-checkbox.checkbox-rotate .checkbox-lime input[type="checkbox"]:checked + .checkbox:before {
border-color: #cddc39;
}
.rkmd-checkbox.checkbox-rotate .checkbox-brown input[type="checkbox"]:checked + .checkbox:before {
border-color: #795548;
}
/* ----------------------------------------------------------------------
Checkbox Ripple Effect - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-checkbox.checkbox-ripple .ripple {
position: absolute;
top: 0px;
left: 0px;
width: 32px;
height: 32px;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
}
.rkmd-checkbox.checkbox-ripple .ripple.animated {
display: block;
-webkit-animation-name: checkbox-ripple;
animation-name: checkbox-ripple;
-webkit-animation-duration: 400ms;
animation-duration: 400ms;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes checkbox-ripple {
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes checkbox-ripple {
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
/* ----------------------------------------------------------------------
Checkbox Ripple Effect Color - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-checkbox .checkbox-teal .ripple {
background-color: #009688 !important;
}
.rkmd-checkbox .checkbox-lightBlue .ripple {
background-color: #03a9f4 !important;
}
.rkmd-checkbox .checkbox-green .ripple {
background-color: #4caf50 !important;
}
.rkmd-checkbox .checkbox-amber .ripple {
background-color: #ffc107 !important;
}
.rkmd-checkbox .checkbox-orange .ripple {
background-color: #ff9800 !important;
}
.rkmd-checkbox .checkbox-cyan .ripple {
background-color: #00bcd4 !important;
}
.rkmd-checkbox .checkbox-pink .ripple {
background-color: #e91e63 !important;
}
.rkmd-checkbox .checkbox-deepPurple .ripple {
background-color: #673ab7 !important;
}
.rkmd-checkbox .checkbox-indigo .ripple {
background-color: #3f51b5 !important;
}
.rkmd-checkbox .checkbox-red .ripple {
background-color: #f44336 !important;
}
.rkmd-checkbox .checkbox-yellow .ripple {
background-color: #ffeb3b !important;
}
.rkmd-checkbox .checkbox-lime .ripple {
background-color: #cddc39 !important;
}
.rkmd-checkbox .checkbox-brown .ripple {
background-color: #795548 !important;
}
</style></head><body>
<!-- header -->
<header>
<h2>Material Design Checkbox</h2>
</header><!-- @end header -->
<!-- Main content -->
<main role="main" data-checkbox-color="checkbox-lightBlue">
<section>
<h3 class="heading">Light</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-1 -->
<div class="rkmd-checkbox checkbox-ripple">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-1" checked>
<span class="checkbox"></span>
</label>
<label for="checkbox-1" class="label">Checkbox</label>
</div><!-- @end Checkbox-1 -->
</div>
<div class="captions">Normal</div>
</div>
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-2 -->
<div class="rkmd-checkbox checkbox-rotate checkbox-ripple">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-2" checked>
<span class="checkbox"></span>
</label>
<label for="checkbox-2" class="label">Checkbox</label>
</div><!-- @end Checkbox-2 -->
</div>
<div class="captions">Rotate</div>
</div>
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-3 -->
<div class="rkmd-checkbox checkbox-ripple">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-3" disabled>
<span class="checkbox"></span>
</label>
<label for="checkbox-3" class="label">Checkbox</label>
</div><!-- @end Checkbox-3 -->
</div>
<div class="captions">Disabled</div>
</div>
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-4 -->
<div class="rkmd-checkbox">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-4" checked disabled>
<span class="checkbox"></span>
</label>
<label for="checkbox-4" class="label">Checkbox</label>
</div><!-- @end Checkbox-4 -->
</div>
<div class="captions">On & Disabled</div>
</div>
</div>
</section>
<section class="bg-dark">
<h3 class="heading">Dark</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-5 -->
<div class="rkmd-checkbox checkbox-ripple checkbox-light">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-5" checked>
<span class="checkbox"></span>
</label>
<label for="checkbox-5" class="label">Checkbox</label>
</div><!-- @end Checkbox-5 -->
</div>
<div class="captions">Normal</div>
</div>
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-6 -->
<div class="rkmd-checkbox checkbox-ripple checkbox-rotate checkbox-light">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-6" checked>
<span class="checkbox"></span>
</label>
<label for="checkbox-6" class="label">Checkbox</label>
</div><!-- @end Checkbox-6 -->
</div>
<div class="captions">Rotate</div>
</div>
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-7 -->
<div class="rkmd-checkbox checkbox-ripple checkbox-light">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-7" disabled>
<span class="checkbox"></span>
</label>
<label for="checkbox-7" class="label">Checkbox</label>
</div><!-- @end Checkbox-7 -->
</div>
<div class="captions">Disabled</div>
</div>
<div class="holder col-4">
<div class="demo">
<!-- Checkbox-8 -->
<div class="rkmd-checkbox checkbox-light">
<label class="input-checkbox checkbox-lightBlue">
<input type="checkbox" id="checkbox-8" checked disabled>
<span class="checkbox"></span>
</label>
<label for="checkbox-8" class="label">Checkbox</label>
</div><!-- @end Checkbox-8 -->
</div>
<div class="captions">On & Disabled</div>
</div>
</div>
</section>
</main><!-- @end main -->
<!-- Footer -->
<footer>
<div class="row">
<div class="footer-content">
<span><strong>Made in India</strong>,</span>
<span>by <a href="https://twitter.com/rkchauhan01" target="_blank">Ravikumar Chauhan</a>.</span>
<span><a href="https://github.com/rkchauhan" target="_blank">GitHub</a></span>
<span><a href="https://codepen.io/rkchauhan" target="_blank">CodePen</a></span>
</div>
</div>
</footer><!-- @end footer -->
<!-- Color box -->
<div class="color-box">
<a class="show-box"><i title="Select color" class="material-icons">invert_colors</i></a>
<p>Colors:</p>
<ul class="colors-list">
<li><a title="Teal" class="teal" data-checkbox-color="teal" onclick="return false;"></a></li>
<li><a title="Light Blue" class="lightBlue" data-checkbox-color="lightBlue" onclick="return false;"></a></li>
<li><a title="Green" class="green" data-checkbox-color="green" onclick="return false;"></a></li>
<li><a title="Amber" class="amber" data-checkbox-color="amber" onclick="return false;"></a></li>
<li><a title="Orange" class="orange" data-checkbox-color="orange" onclick="return false;"></a></li>
<li><a title="Cyan" class="cyan" data-checkbox-color="cyan" onclick="return false;"></a></li>
<li><a title="Pink" class="pink" data-checkbox-color="pink" onclick="return false;"></a></li>
<li><a title="Deep Purple" class="deepPurple" data-checkbox-color="deepPurple" onclick="return false;"></a></li>
<li><a title="Indigo" class="indigo" data-checkbox-color="indigo" onclick="return false;"></a></li>
<li><a title="Red" class="red" data-checkbox-color="red" onclick="return false;"></a></li>
<li><a title="Yellow" class="yellow" data-checkbox-color="yellow" onclick="return false;"></a></li>
<li><a title="Lime" class="lime" data-checkbox-color="lime" onclick="return false;"></a></li>
<li><a title="Brown" class="brown" data-checkbox-color="brown" onclick="return false;"></a></li>
</ul>
</div><!-- @end Color box -->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >/* -----------------------------------------------------
Material Design Checkbox
CodePen URL: https://codepen.io/rkchauhan/pen/ONJEYL
By: Ravikumar Chauhan
Find me on:-
* Twitter: https://twitter.com/rkchauhan01
* Facebook: https://www.facebook.com/ravi032chauhan
* GitHub: https://github.com/rkchauhan
* CodePen: https://codepen.io/rkchauhan
Thanks to:-
* Google Material design - https://www.google.com/design/spec/material-design/introduction.html
* Google Material Color - https://www.google.com/design/spec/style/color.html
* Google Material Icons - https://design.google.com/icons/
* Roboto Font - https://google.com/fonts/specimen/Roboto
* jQuery - https://jquery.com
-------------------------------------------------------- */
$(document).ready(function() {
$('.checkbox-ripple').rkmd_checkboxRipple();
change_checkbox_color();
});
(function($) {
$.fn.rkmd_checkboxRipple = function() {
var self, checkbox, ripple, size, rippleX, rippleY, eWidth, eHeight;
self = this;
checkbox = self.find('.input-checkbox');
checkbox.on('mousedown', function(e) {
if(e.button === 2) {
return false;
}
if($(this).find('.ripple').length === 0) {
$(this).append('<span class="ripple"></span>');
}
ripple = $(this).find('.ripple');
eWidth = $(this).outerWidth();
eHeight = $(this).outerHeight();
size = Math.max(eWidth, eHeight);
ripple.css({'width': size, 'height': size});
ripple.addClass('animated');
$(this).on('mouseup', function() {
setTimeout(function () {
ripple.removeClass('animated');
}, 200);
});
});
}
}(jQuery));
function change_checkbox_color() {
$('.color-box .show-box').on('click', function() {
$(".color-box").toggleClass("open");
});
$('.colors-list a').on('click', function() {
var curr_color = $('main').data('checkbox-color');
var color = $(this).data('checkbox-color');
var new_colot = 'checkbox-' + color;
$('.rkmd-checkbox .input-checkbox').each(function(i, v) {
var findColor = $(this).hasClass(curr_color);
if(findColor) {
$(this).removeClass(curr_color);
$(this).addClass(new_colot);
}
$('main').data('checkbox-color', new_colot);
});
});
}
//# sourceURL=pen.js
</script>
</body></html>
