Sha256: e28944ece981df8dfdda5e936f9c347610ec15ee699170c63154c41c082fe983
Contents?: true
Size: 1.75 KB
Versions: 8
Compression:
Stored size: 1.75 KB
Contents
.label-switch {
$switch-width: 52px;
$switch-padding: 2px;
$switch-height: 32px;
$switch-radius: $switch-height;
$knob-height: $switch-height - ($switch-padding * 2);
$knob-width: $knob-height;
$knob-radius: $switch-height - ($switch-padding * 2);
align-self: center;
border-radius: $switch-radius;
cursor: pointer;
display: inline-block;
height: $switch-height;
position: relative;
vertical-align: middle;
width: $switch-width;
@include box-sizing(border-box);
input[type="checkbox"] {
display: none;
+ .checkbox {
background: #e5e5e5;
border: none;
border-radius: $switch-radius;
cursor: pointer;
height: $switch-height;
margin: 0;
padding: 0;
position: relative;
width: $switch-width;
z-index: 0;
@include box-sizing(border-box);
@include transition(all 0.3s ease);
&:before {
background: white;
border-radius: $switch-radius;
content: ' ';
height: $knob-radius;
width: $switch-width - ($switch-padding * 2);
z-index: 1;
@include box-sizing(border-box);
@include position(absolute, 2px 0 0 2px);
@include transition(all 0.3s ease);
@include transform(scale(1));
}
&:after {
background: white;
border-radius: $knob-radius;
content: ' ';
height: $knob-height;
width: $knob-width;
z-index: 2;
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
@include position(absolute, 2px 0 0 2px);
@include transition(all 0.3s ease);
}
}
&:checked {
+ .checkbox {
background: $blue;
&:before {
@include transform(scale(0));
}
&:after {
left: $switch-width - $knob-width - ($switch-padding);
}
}
}
}
}
Version data entries
8 entries across 8 versions & 1 rubygems