7 lines
4.4 KiB
CSS
7 lines
4.4 KiB
CSS
/***
|
|
* BSFormControls4
|
|
* @version v1.0.0.066 (2023/08/21 23:39)
|
|
*/
|
|
.switch {display: inline-block;height: 30px;position: relative;width: 56px;margin-top: 4px;}.switch > input {height: 0;opacity: 0;width: 0;}.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 3px #2196F3;}.switch.switch-success > input:checked + .switch-slider {background-color: #5cb85c;box-shadow: 0 0 3px #5cb85c;}.switch.switch-info > input:checked + .switch-slider {background-color: #5bc0de;box-shadow: 0 0 3px #5bc0de;}.switch.switch-warning > input:checked + .switch-slider {background-color: #f0ad4e;box-shadow: 0 0 3px #f0ad4e;}.switch.switch-danger > input:checked + .switch-slider {background-color: #d9534f;box-shadow: 0 0 3px #d9534f;}.switch.switch-muted > input:checked + .switch-slider {background-color: #555555;box-shadow: 0 0 3px #555555;}.switch-label, .label-switch {float: left;font-weight: bold;padding-top: 5px;}.switch-sm {height: 26px;width: 48px;}.switch-sm > .switch-slider:before {height: 18px;width: 18px;}.switch-sm > input:checked + .switch-slider:before {-ms-transform: translateX(22px);-webkit-transform: translateX(22px);transform: translateX(22px);}.switch-lg {height: 36px;width: 58px;margin-top: 6px;}.switch-lg > .switch-slider:before {height: 28px;width: 28px;}.switch-lg > input:checked + .switch-slider:before {-ms-transform: translateX(20px);-webkit-transform: translateX(20px);transform: translateX(20px);}
|
|
|
|
.chxbox {display: inline-block;height: 30px;position: relative;width: 32px;margin-top: 4px;}.chxbox > input {height: 0;opacity: 0;width: 0;}.chxbox > input:checked + .chxbox-slider:before {background-color: #2196F3;}.chxbox > .chxbox-slider {-webkit-transition: .4s;background-color: #ccc;border-style: solid;border-width: 1px;border-color: #ccc;border-radius: 0.25rem;bottom: 0;cursor: pointer;left: 0;position: absolute;right: 0;top: 0;transition: .4s;}.chxbox > .chxbox-slider:before {-webkit-transition: .4s;background-color: #ffffff;border-radius: 50%;bottom: 3px;content: "";height: 22px;left: 4px;position: absolute;transition: .4s;width: 22px;}.chxbox.chxbox-off-primary > input + .chxbox-slider {background-color: #2196F3;}.chxbox.chxbox-off-success > input + .chxbox-slider {background-color: #5cb85c;}.chxbox.chxbox-off-info > input + .chxbox-slider {background-color: #5bc0de;}.chxbox.chxbox-off-warning > input + .chxbox-slider {background-color: #f0ad4e;}.chxbox.chxbox-off-danger > input + .chxbox-slider {background-color: #d9534f;}.chxbox.chxbox-off-muted > input + .chxbox-slider {background-color: #555555;}.chxbox.chxbox-primary > input:checked + .chxbox-slider:before {background-color: #2196F3;box-shadow: 0 0 3px #2196F3;}.chxbox.chxbox-success > input:checked + .chxbox-slider:before {background-color: #5cb85c;box-shadow: 0 0 3px #5cb85c;}.chxbox.chxbox-info > input:checked + .chxbox-slider:before {background-color: #5bc0de;box-shadow: 0 0 3px #5bc0de;}.chxbox.chxbox-warning > input:checked + .chxbox-slider:before {background-color: #f0ad4e;box-shadow: 0 0 3px #f0ad4e;}.chxbox.chxbox-danger > input:checked + .chxbox-slider:before {background-color: #d9534f;box-shadow: 0 0 3px #d9534f;}.chxbox.chxbox-muted > input:checked + .chxbox-slider:before {background-color: #555555;box-shadow: 0 0 3px #555555;}.chxbox-sm {height: 26px;width: 28px;margin-top: 3px;}.chxbox-sm > .chxbox-slider:before {height: 18px;width: 18px;}.chxbox-lg {height: 36px;width: 38px;margin-top: 6px;}.chxbox-lg > .chxbox-slider:before {height: 28px;width: 28px;} |