48 lines
1.4 KiB
CSS
48 lines
1.4 KiB
CSS
|
/* Switches */
|
||
|
|
/* The switch - the box around the slider */
|
||
|
|
.switch {
|
||
|
|
position: relative; display: inline-block; width: 70px; height: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide default HTML checkbox */
|
||
|
|
.switch input {display:none;}
|
||
|
|
|
||
|
|
/* The slider */
|
||
|
|
.slider {
|
||
|
|
position: absolute;
|
||
|
|
cursor: pointer;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: #CCC;
|
||
|
|
transition: .4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 3px; background-color: white; transition: .4s; }
|
||
|
|
|
||
|
|
input:checked + .slider { background-color: #2196F3; }
|
||
|
|
|
||
|
|
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
|
||
|
|
|
||
|
|
input:checked + .slider:before { left: calc(100% - 30px); }
|
||
|
|
|
||
|
|
/* Rounded sliders */
|
||
|
|
.slider.round { border-radius: 17px; }
|
||
|
|
|
||
|
|
.slider.round:before { border-radius: 50%; }
|
||
|
|
|
||
|
|
.radioSliderYN { position: relative; display: inline-block; width: 30px; height: 17px; }
|
||
|
|
.radioSliderYN input { display: none; }
|
||
|
|
.radioSliderYN input:checked + label { display: block; }
|
||
|
|
|
||
|
|
.sliderOn,
|
||
|
|
.sliderOff { position: relative; display: inline-block; width: 30px; height: 17px; background-color: #CCC; }
|
||
|
|
|
||
|
|
.sliderOff { background: #D50000; }
|
||
|
|
.sliderOn { background: #00C853; }
|
||
|
|
.sliderOn:before { transform: translateX(13px); }
|
||
|
|
|
||
|
|
.sliderOn:before,
|
||
|
|
.sliderOff:before { position: absolute; content: ""; height: 10px; width: 10px; left: 4px; bottom: 20%; background-color: white; transition: .4s; }
|