/* ------------------------------------------------------------------------------
*
* # Switchery toggles
*
* Styles for switchery.min.js - toggle switches
*
* Version: 1.0
* Latest update: Mar 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
.switchery {
background-color: #fff;
border: 1px solid @input-border;
border-radius: 100px;
cursor: pointer;
display: inline-block;
width: (@switchery-base-size * 2);
height: @switchery-base-size;
vertical-align: middle;
position: relative;
.box-sizing(content-box);
// Container
.checkbox-switchery & {
position: absolute;
left: 0;
margin-top: ((@line-height-computed / 2) - (@switchery-base-size / 2) - 1); // Half text height - half switchery height - 1px border
}
// Handle
> small {
background-color: #fff;
border-radius: 100px;
width: @switchery-base-size;
height: @switchery-base-size;
position: absolute;
top: 0;
.box-shadow(0 1px 3px fade(#000, 40%));
}
}
// Override BS checkbox styles
.checkbox.checkbox-switchery {
margin-bottom: (@switchery-base-size - (@line-height-computed / 2) + 2);
padding-left: 0;
&.disabled .switchery {
cursor: @cursor-disabled;
}
}
// Remove padding if no text label
.checkbox[class*=switchery-],
.checkbox-inline[class*=switchery-] {
padding-left: 0;
padding-right: 0;
}
// Sizing
// ------------------------------
// Large
.switchery-lg {
&.checkbox-switchery {
margin-bottom: (@switchery-large-size - (@line-height-computed / 2) + 2);
.switchery {
margin-top: (@line-height-computed / 2) - (@switchery-large-size / 2) - 1;
}
}
label& {
margin-bottom: 0;
}
.switchery {
height: @switchery-large-size;
width: (@switchery-large-size * 2);
> small {
height: @switchery-large-size;
width: @switchery-large-size;
}
}
}
// Small
.switchery-sm {
&.checkbox-switchery {
margin-bottom: (@switchery-small-size - (@line-height-computed / 2) + 2);
.switchery {
margin-top: (@line-height-computed / 2) - (@switchery-small-size / 2) - 1;
}
}
label& {
margin-bottom: 0;
}
.switchery {
height: @switchery-small-size;
width: (@switchery-small-size * 2);
> small {
height: @switchery-small-size;
width: @switchery-small-size;
}
}
}
// Mini
.switchery-xs {
&.checkbox-switchery {
margin-bottom: (@switchery-mini-size - (@line-height-computed / 2) + 2);
.switchery {
margin-top: (@line-height-computed / 2) - (@switchery-mini-size / 2) - 1;
}
}
label& {
margin-bottom: 0;
}
.switchery {
height: @switchery-mini-size;
width: (@switchery-mini-size * 2);
> small {
height: @switchery-mini-size;
width: @switchery-mini-size;
}
}
}
// Options
// ------------------------------
// Left position
.checkbox-switchery {
label,
label& {
position: relative;
padding-left: ((@switchery-base-size * 2) + 12);
margin: 0;
cursor: pointer;
}
&.switchery-lg {
label,
label& {
padding-left: ((@switchery-large-size * 2) + 12);
}
}
&.switchery-sm {
label,
label& {
padding-left: ((@switchery-small-size * 2) + 12);
}
}
&.switchery-xs {
label,
label& {
padding-left: ((@switchery-mini-size * 2) + 12);
}
}
&.checkbox-inline {
margin-bottom: 0;
}
}
// Right position
.checkbox-switchery {
&.checkbox-right {
.switchery {
left: auto;
right: 0;
}
label,
label& {
padding-left: 0;
padding-right: ((@switchery-base-size * 2) + 12);
}
&.switchery-lg {
label,
label& {
padding-left: 0;
padding-right: ((@switchery-large-size * 2) + 12);
}
}
&.switchery-sm {
label,
label& {
padding-left: 0;
padding-right: ((@switchery-small-size * 2) + 12);
}
}
&.switchery-xs {
label,
label& {
padding-left: 0;
padding-right: ((@switchery-mini-size * 2) + 12);
}
}
}
}
//
// Double side switch
//
.switchery-double {
.switchery {
position: relative;
margin-left: @element-horizontal-spacing;
margin-right: @element-horizontal-spacing;
margin-top: -7px;
margin-bottom: -5px;
}
// Remove padding
&.checkbox-switchery {
label,
label& {
padding: 0;
}
}
// Large
&.switchery-lg .switchery {
margin-top: -8px;
margin-bottom: -6px;
}
// Small
&.switchery-sm .switchery {
margin-top: -6px;
margin-bottom: -4px;
}
// Mini
&.switchery-xs .switchery {
margin-top: -5px;
margin-bottom: -3px;
}
}