diff --git a/public/css/switchButton.css b/public/css/switchButton.css new file mode 100644 index 0000000000000000000000000000000000000000..d38b3e5bb3ac718fef8e2ef8c021d10356b06f20 --- /dev/null +++ b/public/css/switchButton.css @@ -0,0 +1,59 @@ +.switch { + position: relative; + display: inline-block; + width: 45px; + height: 19px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 11px; + width: 11px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file