mixin model
section&attributes(attributes)= name
.checkbox
input(type='checkbox')
label
- var x =1
- for (var x = 1; x < 16; x++)
+model(class="model-"+x)@import "compass/css3";
*, *:after, *:before{
@include box-sizing(border-box);
}
$blue : #4285F4;
$green : #4BD865;
$warning :#FF980F;
body{
text-align: center;
background: #eee;
}
section{
float: left;
min-width: 150px;
width: 33.33%;
padding:25px 0;
min-height: 100px;
}
/*=====================*/
.checkbox{
position: relative;
display: inline-block;
&:after, &:before{
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
}
label{
width: 90px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
@include border-radius(46px);
@include transition(.4s);
&:after{
content: '';
position: absolute;
width: 50px;
height: 50px;
@include border-radius(100%);
left: 0;
top: -5px;
z-index: 2;
background: #fff;
@include box-shadow(0 0 5px rgba(0,0,0,.2));
@include transition(.4s);
}
}
input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
cursor:pointer;
&:hover +label:after{
@include box-shadow(0 2px 15px 0 rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15))
}
&:checked + label{
&:after{
left: 40px;
}
}
}
}
.model-1{
.checkbox{
input:checked + label{
background: $blue/1.2;
&:after{
background: $blue;
}
}
}
}
.model-2{
.checkbox{
label{
width: 75px;
&:after{
top: 0;
width:42px;
height: 42px;
}
}
input:checked + label{
background: $green;
&:after{
left: 35px;
}
}
}
}
.model-3{
.checkbox{
label{
background: #fff;
border:1px solid #eee;
height: 38px;
&:after{
background: #bbb;
top: 3px;
left: 5px;
width:30px;
height: 30px;
}
}
input:checked + label{
&:after{
background: $green/1.2;
left: 55px;
}
}
}
}
.model-4{
.checkbox{
label{
background: #bbb;
height: 25px;
width: 75px;
&:after{
background: #fff;
top: -8px;
width:38px;
height: 38px;
}
}
input:checked + label{
background: #77C2BB;
&:after{
background: #009688;
left: 40px;
}
}
}
}
.model-5{
.checkbox{
label{
background: #bbb;
height: 15px;
width: 85px;
&:after{
background: #fff;
top: -12px;
width:36px;
height: 36px;
}
}
input:hover + label:after{
@include scale(1.4);
}
input:checked + label{
background: $warning/1.4;
&:after{
background: $warning;
left: 50px;
}
}
}
}
.model-6{
.checkbox{
label{
background: #bbb;
height: 2px;
width: 60px;
&:after{
background: #bbb;
top: -16px;
width:32px;
height: 32px;
}
}
input:checked + label{
background: $blue/1.2;
&:after{
background:$blue;
left: 40px;
}
}
}
}
.model-7{
.checkbox{
label{
background: none;
border:5px solid #555;
height: 42px;
&:after{
background: #555;
@include box-shadow(none);
top: 2px;
left: 2px;
width:28px;
height: 28px;
}
}
input:checked + label{
border-color:$green/1.5;
&:after{
background: $green/1.2;
left: 50px;
}
}
}
}
.model-8{
.checkbox{
label{
background: #ddd;
width: 95px;
@include border-radius(10px);
&:after{
background: #fff;
@include border-radius(10px);
top: 0;
width:60px;
height: 42px;
}
}
input:checked + label{
background:$warning;
&:after{
left: 35px;
}
}
}
}
.model-9{
.checkbox{
label{
background: #aaa;
width: 90px;
height: 32px;
@include border-radius(20px);
&:after{
@include border-radius(20px);
top: 0;
width:50px;
height: 32px;
}
}
input:checked + label{
background:$green/2;
&:after{
background: $green/1.4;
left: 40px;
}
}
}
}
.model-10{
.checkbox{
&:after{
content: '\f00d';
color: #aaa;
position: relative;
right: 30px;
bottom: 15px;
}
&:before{
content: '\f00c';
position: relative;
left: 35px;
bottom: 15px;
color: #fff;
z-index: 1;
}
label{
width: 80px;
background: #EAEAEA;
@include box-shadow(0 0 1px 2px rgba(0,0,0,.15));
&:after{
top: 0;
width:42px;
height: 42px;
}
}
input:checked + label{
background: $green;
&:after{
left: 40px;
}
}
}
}
.model-11{
.checkbox{
&:after, &:before{
content: 'OFF';
position: absolute;
right: 10px;
top: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #90201F;
}
&:before{
content: 'ON';
left: -40px;
z-index: 1;
color: $green/2;
}
label{
background: #E3666C;
height: 32px;
@include border-radius(0);
@include box-shadow(0 0 1px 2px rgba(0,0,0,.2));
&:after{
background-color: #ffffff;
@include filter-gradient(#ffffff, #ffffff, horizontal);
@include background-image(linear-gradient(left, #fff 30%,#ddd 45%,#fff 50%,#ddd 55%,#fff 70%));
@include border-radius(0);
@include box-shadow(none !important);
@include transition(.1s);
top: 0;
width:50px;
height: 32px;
}
}
input:checked + label{
background:$green;
&:after{
left: 40px;
}
}
}
}
.model-12{
.checkbox{
background: #2B2B2D;
height: 40px;
width: 160px;
@include border-radius(50px);
&:after, &:before{
content: 'ON';
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: 40px;
font-size: 12px;
}
&:before{
content: 'OFF';
z-index: 1;
}
label{
background: #1E1E1E;
height:10px;
width: 70px;
margin: 0 5px;
@include box-shadow(0 0 2px 2px rgba(0,0,0,.3) inset) ;
&:after{
background-color: #3F4545;
@include background-image(linear-gradient(top, #666 0%,#3F4545 100%));
top: -9px;
width:27px;
height: 27px;
}
&:before{
content: '';
position: absolute;
width: 14px;
height: 14px;
@include border-radius(100%);
@include transition(.4s);
background:#151515;
z-index: 3;
left: 7px;
top: -2px;
}
}
input:checked + label{
&:after{
left: 45px;
}
&:before{
background: #94DA00;
@include box-shadow(0 0 5px #94DA00) ;
left: 52px;
}
}
}
}
.model-13{
.checkbox{
&:after{
content: 'OFF';
font-family: Arial;
position: absolute;
color: #666;
top: 12px;
right: 15px;
}
label{
background: none;
border:3px solid #777;
height: 40px;
@include border-radius(20px);
&:after{
content: 'ON';
font-family: Arial;
color: #fff;
line-height: 28px;
text-indent: 100px;
background: #777;
overflow: hidden;
@include box-shadow(none);
@include border-radius(14px);
@include translateX(-50px);
@include transition(all .4s .2s, width .2s linear, text-indent .4s linear);
top: 3px;
left: auto;
right: 2px;
width:28px;
height: 28px;
}
}
input:checked + label{
border-color:$green/1.5;
&:after{
background: $green/1.2;
left: auto;
@include translateX(0px);
@include transition(all .4s, width .2s .4s linear, text-indent .3s .4s linear);
width: 80px;
text-indent: 0;
}
}
}
}
.model-14{
.checkbox{
&:after, &:before{
content: 'OFF';
position: absolute;
right: 10px;
top: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #90201F;
}
&:before{
content: 'ON';
left: -40px;
z-index: 1;
color: $green/2;
}
label{
background:#fff;
height: 32px;
@include border-radius(0);
@include box-shadow(0 0 2px rgba(0,0,0,.2));
&:after{
background: #90201F;
@include border-radius(0);
@include box-shadow(none !important);
@include transition(.3s);
top: 0;
width:40px;
height: 32px;
}
}
input:checked + label{
&:after{
background:$green;
left: 50px;
}
}
}
}
.model-15{
.checkbox{
width: 94px;
height: 34px;
border: 2px solid #ddd;
background:$green/2;
@include border-radius(6px);
overflow: hidden;
&:after, label:before{
content: 'ON';
position: absolute;
left: 10px;
top: 8px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
color: #fff;
}
label:before{
content: 'OFF';
left:auto;
top: 8px;
right: 10px;
z-index: 1;
}
label{
background: #f00;
width: 90px;
height: 32px;
@include border-radius(4px);
&:after{
@include border-radius(4px);
@include box-shadow(none !important);
top: 0;
width:50px;
height: 32px;
}
}
input:checked + label{
@include translateX(40px);
&:after{
left:0;
}
}
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.