/* ------------------------------------------------------------------------------
*
* # Bootstrap switches
*
* Styles for switch.min.js - checkbox/radio toggle switches
*
* Version: 1.0
* Latest update: MaY 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
.bootstrap-switch {
display: inline-block;
cursor: pointer;
margin-top: -2px;
margin-right: 7px;
border-radius: @border-radius-base;
border: 1px solid transparent;
position: relative;
text-align: left;
overflow: hidden;
vertical-align: middle;
.user-select(none);
.transition(all ease-in-out .05s);
// Container
.bootstrap-switch-container {
display: inline-block;
top: 0;
border-radius: @border-radius-base;
.translate3d(0, 0, 0);
}
// Remove outline
&.bootstrap-switch-focused {
outline: 0;
}
// Set base styles
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
cursor: pointer;
display: inline-block !important;
height: 100%;
padding: @padding-base-vertical @padding-base-horizontal;
}
// Hide inputs
input[type='radio'],
input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
z-index: -1;
.opacity(0);
&.form-control {
height: auto;
}
}
// States
&.bootstrap-switch-disabled,
&.bootstrap-switch-readonly,
&.bootstrap-switch-indeterminate {
cursor: default !important;
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
cursor: default !important;
.opacity(0.5);
}
}
// Set animation
&.bootstrap-switch-animate .bootstrap-switch-container {
.transition(margin-left 0.2s);
}
// Set border radiuses
&.bootstrap-switch-inverse {
.bootstrap-switch-handle-on {
.border-left-radius(0);
.border-right-radius(@border-radius-base - 1);
}
.bootstrap-switch-handle-off {
.border-right-radius(0);
.border-left-radius(@border-radius-base - 1);
}
}
&.bootstrap-switch-on,
&.bootstrap-switch-inverse.bootstrap-switch-off {
.bootstrap-switch-label {
.border-right-radius(@border-radius-base - 1);
}
}
&.bootstrap-switch-off,
&.bootstrap-switch-inverse.bootstrap-switch-on {
.bootstrap-switch-label {
.border-left-radius(@border-radius-base - 1);
}
}
}
// Handles
// ------------------------------
// Base
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
// Contextual alternatives
&.bootstrap-switch-default {
color: @text-color;
background-color: @gray-lighter;
}
&.bootstrap-switch-primary {
color: #fff;
background-color: @brand-primary;
}
&.bootstrap-switch-danger {
color: #fff;
background-color: @brand-danger;
}
&.bootstrap-switch-success {
color: #fff;
background-color: @brand-success;
}
&.bootstrap-switch-warning {
color: #fff;
background-color: @brand-warning;
}
&.bootstrap-switch-info {
color: #fff;
background-color: @brand-info;
}
}
// Set border radius
.bootstrap-switch-handle-on {
.border-left-radius(@border-radius-base - 1);
}
.bootstrap-switch-handle-off {
.border-right-radius(@border-radius-base - 1);
}
// Label
// ------------------------------
.bootstrap-switch-label {
text-align: center;
box-shadow: 0 0 0 1px fade(#000, 10%) inset;
z-index: 100;
color: @text-color;
background-color: #fff;
position: relative;
&:hover {
background-color: #fcfcfc;
}
&:active {
background-color: #fafafa;
}
// Add vertical lines
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 10px;
margin-top: -5px;
margin-left: -1px;
display: inline-block;
border-left: 1px solid @input-border;
border-right: 1px solid @input-border;
}
}
// Sizing
// ------------------------------
// Large
.bootstrap-switch-large {
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
padding: @padding-large-vertical @padding-large-horizontal;
}
}
// Mini
.bootstrap-switch-mini {
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
padding: @padding-xs-vertical @padding-xs-horizontal;
}
}
// Small
.bootstrap-switch-small {
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
padding: @padding-small-vertical @padding-small-horizontal;
}
}
// Checkbox specials
// ------------------------------
.checkbox-switch > label,
label.checkbox-switch.checkbox-inline {
padding: 0;
}
.checkbox-switch.checkbox-right .bootstrap-switch {
margin-right: 0;
margin-left: 7px;
}