/** * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. * * @version v4.0.0-alpha.1 * @homepage http://www.bootstrap-switch.org * @author Mattia Larentis (http://larentis.eu) * @license Apache-2.0 */ .bootstrap-switch { display: inline-block; direction: ltr; cursor: pointer; border-radius: 0.25rem; border: 1px solid; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); position: relative; text-align: left; overflow: hidden; line-height: 8px; z-index: 0; user-select: none; vertical-align: middle; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .bootstrap-switch .bootstrap-switch-container { display: inline-block; top: 0; border-radius: 0.25rem; transform: translate3d(0, 0, 0); } .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label { box-sizing: border-box; cursor: pointer; display: inline-block !important; height: 100%; line-height: 1.25; padding: 0.5rem 1rem; font-size: 1rem; border-radius: 0; } .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off { text-align: center; z-index: 1; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { color: #fff; background-color: #0275d8; border-color: #0275d8; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover { color: #fff; background-color: #025aa5; border-color: #01549b; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.focus { box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:disabled { background-color: #0275d8; border-color: #0275d8; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active, .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.dropdown-toggle, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active, .show > .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.dropdown-toggle { color: #fff; background-color: #025aa5; background-image: none; border-color: #01549b; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary { color: #292b2c; background-color: #fff; border-color: #ccc; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:hover, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover { color: #292b2c; background-color: #e6e6e6; border-color: #adadad; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.focus { box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:disabled { background-color: #fff; border-color: #ccc; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.active, .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.dropdown-toggle, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:active, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.active, .show > .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.dropdown-toggle { color: #292b2c; background-color: #e6e6e6; background-image: none; border-color: #adadad; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info { color: #fff; background-color: #5bc0de; border-color: #5bc0de; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover { color: #fff; background-color: #31b0d5; border-color: #2aabd2; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.focus { box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.5); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:disabled { background-color: #5bc0de; border-color: #5bc0de; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active, .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.dropdown-toggle, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active, .show > .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.dropdown-toggle { color: #fff; background-color: #31b0d5; background-image: none; border-color: #2aabd2; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { color: #fff; background-color: #5cb85c; border-color: #5cb85c; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover { color: #fff; background-color: #449d44; border-color: #419641; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.focus { box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:disabled { background-color: #5cb85c; border-color: #5cb85c; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active, .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.dropdown-toggle, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active, .show > .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.dropdown-toggle { color: #fff; background-color: #449d44; background-image: none; border-color: #419641; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning { color: #fff; background-color: #f0ad4e; border-color: #f0ad4e; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover { color: #fff; background-color: #ec971f; border-color: #eb9316; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.focus { box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:disabled { background-color: #f0ad4e; border-color: #f0ad4e; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active, .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.dropdown-toggle, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active, .show > .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.dropdown-toggle { color: #fff; background-color: #ec971f; background-image: none; border-color: #eb9316; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { color: #fff; background-color: #d9534f; border-color: #d9534f; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover { color: #fff; background-color: #c9302c; border-color: #c12e2a; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.focus { box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:disabled { background-color: #d9534f; border-color: #d9534f; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active, .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.dropdown-toggle, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active, .show > .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.dropdown-toggle { color: #fff; background-color: #c9302c; background-image: none; border-color: #c12e2a; } .bootstrap-switch .bootstrap-switch-label { text-align: center; margin-top: -1px; margin-bottom: -1px; z-index: 100; border-left: 1px solid transparent; border-right: 1px solid transparent; } .bootstrap-switch .bootstrap-switch-handle-on { border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem; } .bootstrap-switch .bootstrap-switch-handle-off { border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; } .bootstrap-switch input[type='radio'], .bootstrap-switch input[type='checkbox'] { position: absolute !important; top: 0; left: 0; opacity: 0; z-index: -1; } .bootstrap-switch.bootstrap-switch-mini { min-width: 71px; } .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .bootstrap-switch.bootstrap-switch-small { min-width: 79px; } .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; } .bootstrap-switch.bootstrap-switch-large { min-width: 120px; } .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label { padding: 0.75rem 1.5rem; font-size: 1.25rem; border-radius: 0.3rem; } .bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly, .bootstrap-switch.bootstrap-switch-indeterminate { cursor: default !important; } .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label { opacity: .5; cursor: default !important; } .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { transition: margin-left 0.5s; } .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; } .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off { border-bottom-right-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem; } .bootstrap-switch.bootstrap-switch-focused { box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5); } .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label { border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; } .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label { border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem; }