diff --git a/2020/02/switch.css b/2020/02/switch.css new file mode 100644 index 0000000..b5396c6 --- /dev/null +++ b/2020/02/switch.css @@ -0,0 +1,60 @@ +.switch { + display: inline-block; + height: 30px; + position: relative; + width: 56px; +} + +.switch > input { + height: 0px; + opacity: 0; + width: 0px; +} + +.switch > .switch-slider { + -webkit-transition: .4s; + background-color: #ccc; + border-radius: 30px; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.switch > .switch-slider:before { + -webkit-transition: .4s; + background-color: white; + border-radius: 50%; + bottom: 4px; + content: ""; + height: 22px; + left: 4px; + position: absolute; + transition: .4s; + width: 22px; +} + +.switch > input:checked + .switch-slider:before { -ms-transform: translateX(26px); -webkit-transform: translateX(26px); transform: translateX(26px); } + +.switch.switch-off-primary > input + .switch-slider { background-color: #2196F3; } +.switch.switch-off-success > input + .switch-slider { background-color: #5cb85c; } +.switch.switch-off-info > input + .switch-slider { background-color: #5bc0de; } +.switch.switch-off-warning > input + .switch-slider { background-color: #f0ad4e; } +.switch.switch-off-danger > input + .switch-slider { background-color: #d9534f; } +.switch.switch-off-muted > input + .switch-slider { background-color: #555555; } + +.switch.switch-primary > input:checked + .switch-slider { background-color: #2196F3; box-shadow: 0 0 5px #2196F3; } +.switch.switch-success > input:checked + .switch-slider { background-color: #5cb85c; box-shadow: 0 0 5px #5cb85c; } +.switch.switch-info > input:checked + .switch-slider { background-color: #5bc0de; box-shadow: 0 0 5px #5bc0de; } +.switch.switch-warning > input:checked + .switch-slider { background-color: #f0ad4e; box-shadow: 0 0 5px #f0ad4e; } +.switch.switch-danger > input:checked + .switch-slider { background-color: #d9534f; box-shadow: 0 0 5px #d9534f; } +.switch.switch-muted > input:checked + .switch-slider { background-color: #555555; box-shadow: 0 0 5px #555555; } + +.switch-label, .label-switch { + float: left; + font-weight: bold; + padding-top: 5px; +} \ No newline at end of file