This repository has been archived on 2022-07-28. You can view files and clone it, but cannot push or open issues or pull requests.
md-cms/edit/themes/slider.css
Joshua Ramon Enslin a49746ab10 Added editing function for pages (using tinymce).
Added editing pages for footer, banner, aside.
Added page overview.
Added public page.
Added settings page.
Added generator for embed pseudocodes.
2018-06-13 20:07:24 +02:00

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; }