ail-framework/var/www/static/css/switch_checkbox.css

69 lines
1.9 KiB
CSS
Raw Permalink Normal View History

.switch {
position: relative;
display: inline-block;
vertical-align: top;
width: 56px;
height: 20px;
padding: 3px;
margin-left: 5px;
border-radius: 18px;
box-shadow: inset 0 -1px #fff,inset 0 1px 1px rgba(0,0,0,0.05);
cursor: pointer;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #67c2ef;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15),inset 0 0 3px rgba(0,0,0,0.2);
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #f9f9f9;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.12),inset 0 0 2px rgba(0,0,0,0.15);
-webkit-transition: .15s ease-out;
-moz-transition: .15s ease-out;
-o-transition: .15s ease-out;
transition: .15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-input:checked ~ .switch-handle {
left: 40px;
box-shadow: -1px 1px 5px rgba(0,0,0,0.2);
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
background-image: -webkit-linear-gradient(top,#fff 40%,#f0f0f0);
background-image: -moz-linear-gradient(top,#fff 40%,#f0f0f0);
background-image: -o-linear-gradient(top,#fff 40%,#f0f0f0);
background-image: linear-gradient(to bottom,#fff 40%,#f0f0f0);
-webkit-transition: left .15s ease-out;
-moz-transition: left .15s ease-out;
-o-transition: left .15s ease-out;
transition: left .15s ease-out;
}