Documentation
v2.0.1
Options
All the options are accepted only using data-* attributes on the element.
2 | checked, disabled and readonly are exceptions to the rule, being
3 | default HTML input attributes.
4 | Therefore, there is not any way to specify the options in JavaScript during initialization.
| Name | Type | Description | Values | Default |
|---|---|---|---|---|
| state | Boolean | The checkbox state | true, false | 'checked' attribute or true |
| size | String | The checkbox state | '', 'mini', 'small', 'normal', 'large' | '' |
| animate | Boolean | Animate the switch | true, false | true |
| disabled | Boolean | Disable state | true, false | 'disabled' attribute or false |
| readonly | Boolean | Readonly state | true, false | 'readonly' attribute or false |
| on | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
| off | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
| on-label | String | Text of the left side of the switch | String | 'ON' |
| off-label | String | Text of the right side of the switch | String | 'OFF' |
| label-text | String | Text of the center handle of the switch | String | ' ' |
| label-icon | String | Text of the center handle of the switch. Use to include external services icons | String | null |
Methods
| Name | Description | Accepted Values | Returned Values |
|---|---|---|---|
| state | Get checkbox state | true, false | |
| setState | Set checkbox state | (value: true, false)[, skip: true, false] | jQuery Object (input element) |
| toggleState | Toggle checkbox state | [skip: true, false] | jQuery Object (input element) |
| toggleRadioState | Toggle radio state | [skip: true, false] | jQuery Object (input element) |
| toggleRadioStateAllowUncheck | Toggle radio state allowing uncheck of the radio input | [uncheck: true, false | skip: true, false] | jQuery Object (input element) |
| setSizeClass | Set the size of the switch | '', 'mini', 'small', 'normal', 'large' | jQuery Object (input element) |
| setAnimated | Animate the switch | true, false | jQuery Object (input element) |
| isDisabled | Get disabled state | true, false | |
| setDisabled | Set disable state | true, false | jQuery Object (input element) |
| toggleDisabled | Toggle disabled state | jQuery Object (input element) | |
| isReadOnly | Get Readonly state | true, false | |
| setReadOnly | Set Readonly state | true, false | jQuery Object (input element) |
| toggleReadOnly | Toggle readonly state | jQuery Object (input element) | |
| setOnClass | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
| setOffClass | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
| setOnLabel | Text of the left side of the switch | String | jQuery Object (input element) |
| setOffLabel | Text of the right side of the switch | String | jQuery Object (input element) |
| setTextLabel | Text of the center handle of the switch | String | null |
| setTextIcon | Text of the center handle of the switch. Use to include external services icons | String | null |
| destroy | Destroy the instance of Bootstrap Switch | jQuery Object (input element) |
Events
The only event triggered is switch-change. It returns two parameters: event and
5 | data.
6 | The latter is an object that includes el (the input DOM element) and value (the
7 | new input state)
Events
All the events are namespaced, therefore always append .bootstrapSwitch when you
2 | attach your handlers.
3 | You can register to the emitted events as follows:
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
4 | console.log(this); // DOM element
5 | console.log(event); // jQuery event
6 | console.log(state); // true | false
7 | });| Name | Description | Parameters |
|---|---|---|
| init | Triggered on initialization. 'this' refers to the DOM element. | event (jQuery Event object) 8 | state (true | false) |
| switchChange | Triggered on switch state change. 'this' refers to the DOM element. | event (jQuery Event object), 9 | state (true | false) |
Examples
State
Size
Animate
Disabled
Readonly
Indeterminate
Inverse
On Color
Off Color
On Text
Off Text
Label Text
Handle Width
Label Width
Create | Destroy
Radio All Off
Disabled
Enabled
Inside Modals
Bootstrap Switch
Turn checkboxes and radio buttons into toggle switches
Currently v3.3.4 · Compatible with Bootstrap 2 and 3
Getting Started
Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
[...]
2 | <link href="bootstrap.css" rel="stylesheet">
3 | <link href="bootstrap-switch.css" rel="stylesheet">
4 | <script src="jquery.js"></script>
5 | <script src="bootstrap-switch.js"></script>
6 | [...]Add your checkbox.
<input type="checkbox" name="my-checkbox" checked>Initialize Bootstrap Switch.
$("[name='my-checkbox']").bootstrapSwitch();Enjoy.
")}return v}function p(z){var y=d(z);var A=r(z);if(A=="no-highlight"){return}var v=A?c(A,y,true):g(y);var w=u(z);if(w.length){var x=document.createElementNS("http://www.w3.org/1999/xhtml","pre");x.innerHTML=v.value;v.value=q(w,u(x),y)}v.value=h(v.value);z.innerHTML=v.value;z.className+=" hljs "+(!A&&v.language||"");z.result={language:v.language,re:v.r};if(v.second_best){z.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function e(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function j(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=g;this.fixMarkup=h;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=e;this.getLanguage=j;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("bash",function(b){var a={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)\}/}]};var d={cN:"string",b:/"/,e:/"/,c:[b.BE,a,{cN:"variable",b:/\$\(/,e:/\)/,c:[b.BE]}]};var c={cN:"string",b:/'/,e:/'/};return{l:/-?[a-z\.]+/,k:{keyword:"if then else elif fi for break continue while in do done exit return set declare case esac export exec",literal:"true false",built_in:"printf echo read cd pwd pushd popd dirs let eval unset typeset readonly getopts source shopt caller type hash bind help sudo",operator:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"shebang",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:true,c:[b.inherit(b.TM,{b:/\w[\w\d_]*/})],r:0},b.HCM,b.NM,d,c,a]}});hljs.registerLanguage("javascript",function(a){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require"},c:[{cN:"pi",b:/^\s*('|")use strict('|")/,r:10},a.ASM,a.QSM,a.CLCM,a.CBLCLM,a.CNM,{b:"("+a.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[a.CLCM,a.CBLCLM,a.REGEXP_MODE,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,c:[a.inherit(a.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[a.CLCM,a.CBLCLM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+a.IR,r:0}]}});hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/]+/}]}]}]};return{aliases:["html"],cI:true,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"
Methods
In Bootstrap Switch, every option is also a method.
If the second parameter is omitted, the method returns the current value.
You can invoke methods as follows:
$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);Additional Methods
| Name | Description |
|---|---|
| toggleState | Toggle the switch state |
| toggleAnimate | Toggle the animate option |
| toggleDisabled | Toggle the disabled state |
| toggleReadonly | Toggle the readonly state |
| toggleIndeterminate | Toggle the indeterminate state |
| toggleInverse | Toggle the inverse option |
| destroy | Destroy the instance of Bootstrap Switch |
Special Behaviours
- The method
statecan receive an optional third parameterskip. if true,switchChangeevent is not executed. The default is false. - The method
toggleStatecan receive an optional second parameterskip. if true,switchChangeevent is not executed. The default is false. - The method
wrapperClasscan accept a falsy value as second parameter. If so, it resets the class to its default.
Options
| Name | Attribute | Type | Description | Values | Default |
|---|---|---|---|---|---|
| state | checked | Boolean | The checkbox state | true, false | true |
| size | data-size | String | The checkbox size | null, 'mini', 'small', 'normal', 'large' | null |
| animate | data-animate | Boolean | Animate the switch | true, false | true |
| disabled | disabled | Boolean | Disable state | true, false | false |
| readonly | readonly | Boolean | Readonly state | true, false | false |
| indeterminate | data-indeterminate | Boolean | Indeterminate state | true, false | false |
| inverse | data-inverse | Boolean | Inverse switch direction | true, false | false |
| radioAllOff | data-radio-all-off | Boolean | Allow this radio button to be unchecked by the user | true, false | false |
| onColor | data-on-color | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'primary' |
| offColor | data-off-color | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | 'default' |
| onText | data-on-text | String | Text of the left side of the switch | String | 'ON' |
| offText | data-off-text | String | Text of the right side of the switch | String | 'OFF' |
| labelText | data-label-text | String | Text of the center handle of the switch | String | ' ' |
| handleWidth | data-handle-width | String | Number | Width of the left and right sides in pixels | 'auto' or Number | 'auto' |
| labelWidth | data-label-width | String | Number | Width of the center handle in pixels | 'auto' or Number | 'auto' |
| baseClass | data-base-class | String | Global class prefix | String | 'bootstrap-switch' |
| wrapperClass | data-wrapper-class | String | Array | Container element class(es) | String | Array | 'wrapper' |
| onInit | Function | Callback function to execute on initialization | Function | | |
| onSwitchChange | Function | Callback function to execute on switch state change. If false is returned, the status will be reverted, otherwise nothing changes | Function | |
Global Defaults Overriding
Follow the jQuery convention to override the default options of the library. For instance:
$.fn.bootstrapSwitch.defaults.size = 'large';
2 | $.fn.bootstrapSwitch.defaults.onColor = 'success';data-* attributes on the element.13 | |
checked, disabled and readonly are exceptions to the rule, being
14 | | default HTML input attributes.15 | | Therefore, there is not any way to specify the options in JavaScript during initialization. 16 | 17 | table.table.table-bordered.table-striped.table-responsive 18 | thead 19 | tr 20 | th Name 21 | th Type 22 | th Description 23 | th Values 24 | th Default 25 | tbody 26 | tr 27 | td state 28 | td Boolean 29 | td The checkbox state 30 | td true, false 31 | td 'checked' attribute or true 32 | tr 33 | td size 34 | td String 35 | td The checkbox state 36 | td '', 'mini', 'small', 'normal', 'large' 37 | td '' 38 | tr 39 | td animate 40 | td Boolean 41 | td Animate the switch 42 | td true, false 43 | td true 44 | tr 45 | td disabled 46 | td Boolean 47 | td Disable state 48 | td true, false 49 | td 'disabled' attribute or false 50 | tr 51 | td readonly 52 | td Boolean 53 | td Readonly state 54 | td true, false 55 | td 'readonly' attribute or false 56 | tr 57 | td on 58 | td String 59 | td Color of the left side of the switch 60 | td 'primary', 'info', 'success', 'warning', 'danger', 'default' 61 | td null 62 | tr 63 | td off 64 | td String 65 | td Color of the right side of the switch 66 | td 'primary', 'info', 'success', 'warning', 'danger', 'default' 67 | td null 68 | tr 69 | td on-label 70 | td String 71 | td Text of the left side of the switch 72 | td String 73 | td 'ON' 74 | tr 75 | td off-label 76 | td String 77 | td Text of the right side of the switch 78 | td String 79 | td 'OFF' 80 | tr 81 | td label-text 82 | td String 83 | td Text of the center handle of the switch 84 | td String 85 | td ' ' 86 | tr 87 | td label-icon 88 | td String 89 | td Text of the center handle of the switch. Use to include external services icons 90 | td String 91 | td null 92 | 93 | #methods 94 | h2.page-header Methods 95 | 96 | table.table.table-bordered.table-striped.table-responsive 97 | thead 98 | tr 99 | th Name 100 | th Description 101 | th Accepted Values 102 | th Returned Values 103 | tbody 104 | tr 105 | td state 106 | td Get checkbox state 107 | td 108 | td true, false 109 | tr 110 | td setState 111 | td Set checkbox state 112 | td (value: true, false)[, skip: true, false] 113 | td jQuery Object (input element) 114 | tr 115 | td toggleState 116 | td Toggle checkbox state 117 | td [skip: true, false] 118 | td jQuery Object (input element) 119 | tr 120 | td toggleRadioState 121 | td Toggle radio state 122 | td [skip: true, false] 123 | td jQuery Object (input element) 124 | tr 125 | td toggleRadioStateAllowUncheck 126 | td Toggle radio state allowing uncheck of the radio input 127 | td [uncheck: true, false | skip: true, false] 128 | td jQuery Object (input element) 129 | tr 130 | td setSizeClass 131 | td Set the size of the switch 132 | td '', 'mini', 'small', 'normal', 'large' 133 | td jQuery Object (input element) 134 | tr 135 | td setAnimated 136 | td Animate the switch 137 | td true, false 138 | td jQuery Object (input element) 139 | tr 140 | td isDisabled 141 | td Get disabled state 142 | td 143 | td true, false 144 | tr 145 | td setDisabled 146 | td Set disable state 147 | td true, false 148 | td jQuery Object (input element) 149 | tr 150 | td toggleDisabled 151 | td Toggle disabled state 152 | td 153 | td jQuery Object (input element) 154 | tr 155 | td isReadOnly 156 | td Get Readonly state 157 | td 158 | td true, false 159 | tr 160 | td setReadOnly 161 | td Set Readonly state 162 | td true, false 163 | td jQuery Object (input element) 164 | tr 165 | td toggleReadOnly 166 | td Toggle readonly state 167 | td 168 | td jQuery Object (input element) 169 | tr 170 | td setOnClass 171 | td Color of the left side of the switch 172 | td 'primary', 'info', 'success', 'warning', 'danger', 'default' 173 | td jQuery Object (input element) 174 | tr 175 | td setOffClass 176 | td Color of the right side of the switch 177 | td 'primary', 'info', 'success', 'warning', 'danger', 'default' 178 | td jQuery Object (input element) 179 | tr 180 | td setOnLabel 181 | td Text of the left side of the switch 182 | td String 183 | td jQuery Object (input element) 184 | tr 185 | td setOffLabel 186 | td Text of the right side of the switch 187 | td String 188 | td jQuery Object (input element) 189 | tr 190 | td setTextLabel 191 | td Text of the center handle of the switch 192 | td String 193 | td null 194 | tr 195 | td setTextIcon 196 | td Text of the center handle of the switch. Use to include external services icons 197 | td String 198 | td null 199 | tr 200 | td destroy 201 | td Destroy the instance of #{title} 202 | td 203 | td jQuery Object (input element) 204 | 205 | #events 206 | h2.page-header Events 207 | 208 | p 209 | | The only event triggered is
switch-change. It returns two parameters: event and
210 | | data.211 | | The latter is an object that includes
el (the input DOM element) and value (the
212 | | new input state)
213 |
--------------------------------------------------------------------------------
/src/docs/public/events.jade:
--------------------------------------------------------------------------------
1 | .bs-docs-header
2 | .container
3 | h1 Events
4 |
5 | .container
6 | p
7 | | All the events are namespaced, therefore always append .bootstrapSwitch when you
8 | | attach your handlers.9 | | You can register to the emitted events as follows: 10 | 11 | pre: code 12 | | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) { 13 | | console.log(this); // DOM element 14 | | console.log(event); // jQuery event 15 | | console.log(state); // true | false 16 | | }); 17 | 18 | table.table.table-bordered.table-striped.table-responsive 19 | thead 20 | tr 21 | th Name 22 | th Description 23 | th Parameters 24 | tbody 25 | tr 26 | td init 27 | td Triggered on initialization. 'this' refers to the DOM element. 28 | td 29 | | event (jQuery Event object) 30 | | state (true | false) 31 | tr 32 | td switchChange 33 | td Triggered on switch state change. 'this' refers to the DOM element. 34 | td 35 | | event (jQuery Event object), 36 | | state (true | false) 37 | -------------------------------------------------------------------------------- /src/docs/public/examples.jade: -------------------------------------------------------------------------------- 1 | .bs-docs-header 2 | .container 3 | h1 Examples 4 | 5 | .container 6 | .row 7 | .col-sm-6.col-lg-4 8 | h2.h4 State 9 | p 10 | input#switch-state(type='checkbox', checked) 11 | .btn-group 12 | button.btn.btn-default(type='button' data-switch-toggle='state') Toggle 13 | button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='true') Set true 14 | button.btn.btn-default(type='button', data-switch-set='state', data-switch-value='false') Set false 15 | button.btn.btn-default(type='button', data-switch-get='state') Get 16 | 17 | .col-sm-6.col-lg-4 18 | h2.h4 Size 19 | p 20 | input#switch-size(type='checkbox', checked, data-size='mini') 21 | .btn-group 22 | button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='mini') Mini 23 | button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='small') Small 24 | button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='normal') Normal 25 | button.btn.btn-default(type='button', data-switch-set='size', data-switch-value='large') Large 26 | button.btn.btn-default(type='button', data-switch-get='size') Get 27 | 28 | .col-sm-6.col-lg-4 29 | h2.h4 Animate 30 | p 31 | input#switch-animate(type='checkbox', checked) 32 | p 33 | button.btn.btn-default(type='button', data-switch-toggle='animate') Toggle 34 | button.btn.btn-default(type='button', data-switch-get='animate') Get 35 | 36 | .col-sm-6.col-lg-4 37 | h2.h4 Disabled 38 | p 39 | input#switch-disabled(type='checkbox', checked, disabled) 40 | p 41 | button.btn.btn-default(type='button', data-switch-toggle='disabled') Toggle 42 | button.btn.btn-default(type='button', data-switch-get='disabled') Get 43 | 44 | .col-sm-6.col-lg-4 45 | h2.h4 Readonly 46 | p 47 | input#switch-readonly(type='checkbox', checked, readonly) 48 | p 49 | button.btn.btn-default(type='button', data-switch-toggle='readonly') Toggle 50 | button.btn.btn-default(type='button', data-switch-get='readonly') Get 51 | 52 | .col-sm-6.col-lg-4 53 | h2.h4 Indeterminate 54 | p 55 | input#switch-indeterminate(type='checkbox', checked, data-indeterminate='true') 56 | p 57 | button.btn.btn-default(type='button', data-switch-toggle='indeterminate') Toggle 58 | button.btn.btn-default(type='button', data-switch-get='indeterminate') Get 59 | 60 | .col-sm-6.col-lg-4 61 | h2.h4 Inverse 62 | p 63 | input#switch-inverse(type='checkbox', checked, data-inverse='true') 64 | p 65 | button.btn.btn-default(type='button', data-switch-toggle='inverse') Toggle 66 | button.btn.btn-default(type='button', data-switch-get='inverse') Get 67 | 68 | .col-sm-6.col-lg-4 69 | h2.h4 On Color 70 | p 71 | input#switch-onColor(type='checkbox', checked, data-on-color='info') 72 | p.btn-group 73 | .btn-group 74 | button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown') 75 | | Set 76 | span.caret 77 | .dropdown-menu(role='menu') 78 | li: a(data-switch-set='onColor', data-switch-value='primary') Primary 79 | li: a(data-switch-set='onColor', data-switch-value='info') Info 80 | li: a(data-switch-set='onColor', data-switch-value='success') Success 81 | li: a(data-switch-set='onColor', data-switch-value='warning') Warning 82 | li: a(data-switch-set='onColor', data-switch-value='default') Default 83 | button.btn.btn-default(type='button', data-switch-get='onColor') Get 84 | 85 | .col-sm-6.col-lg-4 86 | h2.h4 Off Color 87 | p 88 | input#switch-offColor(type='checkbox', data-off-color='warning') 89 | p.btn-group 90 | .btn-group 91 | button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown') 92 | | Set 93 | span.caret 94 | .dropdown-menu(role='menu') 95 | li: a(data-switch-set='offColor', data-switch-value='primary') Primary 96 | li: a(data-switch-set='offColor', data-switch-value='info') Info 97 | li: a(data-switch-set='offColor', data-switch-value='success') Success 98 | li: a(data-switch-set='offColor', data-switch-value='warning') Warning 99 | li: a(data-switch-set='offColor', data-switch-value='default') Default 100 | button.btn.btn-default(type='button', data-switch-get='offColor') Get 101 | 102 | .col-sm-6.col-lg-4 103 | h2.h4 On Text 104 | p 105 | input#switch-onText(type='checkbox', checked, data-on-text='Yes') 106 | .row 107 | .col-sm-6 108 | input.form-control(type='text', data-switch-set-value='onText', value='Yes') 109 | 110 | .col-sm-6.col-lg-4 111 | h2.h4 Off Text 112 | p 113 | input#switch-offText(type='checkbox', data-off-text='No') 114 | .row 115 | .col-sm-6 116 | input.form-control(type='text', data-switch-set-value='offText', value='No') 117 | 118 | .col-sm-6.col-lg-4 119 | h2.h4 Label Text 120 | p 121 | input#switch-labelText(type='checkbox', data-label-text='Label') 122 | .row 123 | .col-sm-6 124 | input.form-control(type='text', data-switch-set-value='labelText') 125 | 126 | .col-sm-6.col-lg-4 127 | h2.h4 Handle Width 128 | p 129 | input#switch-handleWidth(type='checkbox', data-handle-width='100') 130 | .row 131 | .col-sm-6 132 | input.form-control(type='number', data-switch-set-value='handleWidth', value='100') 133 | 134 | .col-sm-6.col-lg-4 135 | h2.h4 Label Width 136 | p 137 | input#switch-labelWidth(type='checkbox', data-label-width='100') 138 | .row 139 | .col-sm-6 140 | input.form-control(type='number', data-switch-set-value='labelWidth', value='100') 141 | 142 | .col-sm-6.col-lg-4 143 | h2.h4 Create | Destroy 144 | p 145 | input#switch-create-destroy(type='checkbox', checked, data-switch-no-init) 146 | .row 147 | .col-sm-6 148 | button.btn.btn-default(type='button', data-switch-create-destroy, data-destroy-text="Destroy") Create 149 | 150 | br 151 | br 152 | 153 | .text-center 154 | h2.h4 Radio All Off 155 | .row 156 | .col-sm-6 157 | h3.h5 Disabled 158 | input.switch-radio1(type='radio', name='radio1', checked) 159 | input.switch-radio1(type='radio', name='radio1') 160 | input.switch-radio1(type='radio', name='radio1') 161 | .col-sm-6 162 | h3.h5 Enabled 163 | input.switch-radio2(type='radio', name='radio2', checked, data-radio-all-off='true') 164 | input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true') 165 | input.switch-radio2(type='radio', name='radio2', data-radio-all-off='true') 166 | 167 | br 168 | hr 169 | 170 | 171 | h2.h4 Inside Modals 172 | button.btn.btn-default(data-toggle='modal', data-target='#modal-switch') Open Modal 173 | .modal.fade#modal-switch(tabindex='-1', role='dialog', aria-labelledby='modal-switch-label') 174 | .modal-dialog 175 | .modal-content 176 | .modal-header 177 | button.close(type='button', data-dismiss='modal') 178 | span(aria-hidden='true') × 179 | span.sr-only Close 180 | .modal-title#modal-switch-label Title 181 | .modal-body 182 | input#switch-modal(type='checkbox', checked) 183 | -------------------------------------------------------------------------------- /src/docs/public/index.jade: -------------------------------------------------------------------------------- 1 | .bs-docs-masthead 2 | .container 3 | h1.title= title 4 | 5 | p.lead 6 | | Turn checkboxes 7 | input(type='checkbox', checked, data-switch-no-init) 8 | | and radio buttons 9 | input(type='radio', checked, data-switch-no-init) 10 | | into toggle switches 11 | input(type='checkbox', checked) 12 | 13 | p.lead 14 | a.btn.btn-outline-inverse.btn-lg(href='https://github.com/Bttstrp/bootstrap-switch/archive/master.zip') Download #{title} 15 | p.bs-docs-social 16 | iframe(src='https://ghbtns.com/github-btn.html?user=Bttstrp&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30') 17 | iframe(src='https://ghbtns.com/github-btn.html?user=Bttstrp&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30') 18 | br 19 | p.version 20 | | Currently v#{version} · Compatible with Bootstrap 2 and 3 21 | 22 | .container 23 | h2.page-header Getting Started 24 | 25 | p Include the dependencies: jQuery, Bootstrap and #{title} CSS + Javascript. 26 | pre: code 27 | | [...] 28 | | <link href="bootstrap.css" rel="stylesheet"> 29 | | <link href="bootstrap-switch.css" rel="stylesheet"> 30 | | <script src="jquery.js"></script> 31 | | <script src="bootstrap-switch.js"></script> 32 | | [...] 33 | 34 | p Add your checkbox. 35 | pre: code <input type="checkbox" name="my-checkbox" checked> 36 | 37 | p Initialize #{title}. 38 | pre: code $("[name='my-checkbox']").bootstrapSwitch(); 39 | 40 | p Enjoy. 41 | 42 | .text-center 43 | a.btn.btn-lg.btn-primary(href='examples.html') See Examples 44 | | 45 | a.btn.btn-lg.btn-outline(href='options.html') Browse Documentation 46 | 47 | -------------------------------------------------------------------------------- /src/docs/public/js/highlight.js: -------------------------------------------------------------------------------- 1 | var hljs=new function(){function k(v){return v.replace(/&/gm,"&").replace(//gm,">")}function t(v){return v.nodeName.toLowerCase()}function i(w,x){var v=w&&w.exec(x);return v&&v.index==0}function d(v){return Array.prototype.map.call(v.childNodes,function(w){if(w.nodeType==3){return b.useBR?w.nodeValue.replace(/\n/g,""):w.nodeValue}if(t(w)=="br"){return"\n"}return d(w)}).join("")}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^language-/,"")});return v.filter(function(x){return j(x)||x=="no-highlight"})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(t(A)=="br"){z+=1}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset
")}return v}function p(z){var y=d(z);var A=r(z);if(A=="no-highlight"){return}var v=A?c(A,y,true):g(y);var w=u(z);if(w.length){var x=document.createElementNS("http://www.w3.org/1999/xhtml","pre");x.innerHTML=v.value;v.value=q(w,u(x),y)}v.value=h(v.value);z.innerHTML=v.value;z.className+=" hljs "+(!A&&v.language||"");z.result={language:v.language,re:v.r};if(v.second_best){z.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function e(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function j(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=g;this.fixMarkup=h;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=e;this.getLanguage=j;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("bash",function(b){var a={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)\}/}]};var d={cN:"string",b:/"/,e:/"/,c:[b.BE,a,{cN:"variable",b:/\$\(/,e:/\)/,c:[b.BE]}]};var c={cN:"string",b:/'/,e:/'/};return{l:/-?[a-z\.]+/,k:{keyword:"if then else elif fi for break continue while in do done exit return set declare case esac export exec",literal:"true false",built_in:"printf echo read cd pwd pushd popd dirs let eval unset typeset readonly getopts source shopt caller type hash bind help sudo",operator:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"shebang",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:true,c:[b.inherit(b.TM,{b:/\w[\w\d_]*/})],r:0},b.HCM,b.NM,d,c,a]}});hljs.registerLanguage("javascript",function(a){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require"},c:[{cN:"pi",b:/^\s*('|")use strict('|")/,r:10},a.ASM,a.QSM,a.CLCM,a.CBLCLM,a.CNM,{b:"("+a.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[a.CLCM,a.CBLCLM,a.REGEXP_MODE,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,c:[a.inherit(a.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[a.CLCM,a.CBLCLM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+a.IR,r:0}]}});hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/]+/}]}]}]};return{aliases:["html"],cI:true,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"
state can receive an optional third parameter skip. if true, switchChange event is not executed. The default is false.
45 | li The method toggleState can receive an optional second parameter skip. if true, switchChange event is not executed. The default is false.
46 | li The method wrapperClass can accept a falsy value as second parameter. If so, it resets the class to its default.
47 |
--------------------------------------------------------------------------------
/src/docs/public/options.jade:
--------------------------------------------------------------------------------
1 | .bs-docs-header
2 | .container
3 | h1 Options
4 |
5 | .container
6 | table.table.table-bordered.table-striped.table-responsive
7 | thead
8 | tr
9 | th Name
10 | th Attribute
11 | th Type
12 | th Description
13 | th Values
14 | th Default
15 | tbody
16 | tr
17 | td state
18 | td checked
19 | td Boolean
20 | td The checkbox state
21 | td true, false
22 | td true
23 | tr
24 | td size
25 | td data-size
26 | td String
27 | td The checkbox size
28 | td null, 'mini', 'small', 'normal', 'large'
29 | td null
30 | tr
31 | td animate
32 | td data-animate
33 | td Boolean
34 | td Animate the switch
35 | td true, false
36 | td true
37 | tr
38 | td disabled
39 | td disabled
40 | td Boolean
41 | td Disable state
42 | td true, false
43 | td false
44 | tr
45 | td readonly
46 | td readonly
47 | td Boolean
48 | td Readonly state
49 | td true, false
50 | td false
51 | tr
52 | td indeterminate
53 | td data-indeterminate
54 | td Boolean
55 | td Indeterminate state
56 | td true, false
57 | td false
58 | tr
59 | td inverse
60 | td data-inverse
61 | td Boolean
62 | td Inverse switch direction
63 | td true, false
64 | td false
65 | tr
66 | td radioAllOff
67 | td data-radio-all-off
68 | td Boolean
69 | td Allow this radio button to be unchecked by the user
70 | td true, false
71 | td false
72 | tr
73 | td onColor
74 | td data-on-color
75 | td String
76 | td Color of the left side of the switch
77 | td 'primary', 'info', 'success', 'warning', 'danger', 'default'
78 | td 'primary'
79 | tr
80 | td offColor
81 | td data-off-color
82 | td String
83 | td Color of the right side of the switch
84 | td 'primary', 'info', 'success', 'warning', 'danger', 'default'
85 | td 'default'
86 | tr
87 | td onText
88 | td data-on-text
89 | td String
90 | td Text of the left side of the switch
91 | td String
92 | td 'ON'
93 | tr
94 | td offText
95 | td data-off-text
96 | td String
97 | td Text of the right side of the switch
98 | td String
99 | td 'OFF'
100 | tr
101 | td labelText
102 | td data-label-text
103 | td String
104 | td Text of the center handle of the switch
105 | td String
106 | td ' '
107 | tr
108 | td handleWidth
109 | td data-handle-width
110 | td String | Number
111 | td Width of the left and right sides in pixels
112 | td 'auto' or Number
113 | td 'auto'
114 | tr
115 | td labelWidth
116 | td data-label-width
117 | td String | Number
118 | td Width of the center handle in pixels
119 | td 'auto' or Number
120 | td 'auto'
121 | tr
122 | td baseClass
123 | td data-base-class
124 | td String
125 | td Global class prefix
126 | td String
127 | td 'bootstrap-switch'
128 | tr
129 | td wrapperClass
130 | td data-wrapper-class
131 | td String | Array
132 | td Container element class(es)
133 | td String | Array
134 | td 'wrapper'
135 | tr
136 | td onInit
137 | td
138 | td Function
139 | td Callback function to execute on initialization
140 | td Function
141 | td: pre: code.javascript function(event, state) {}
142 | tr
143 | td onSwitchChange
144 | td
145 | td Function
146 | td Callback function to execute on switch state change. If false is returned, the status will be reverted, otherwise nothing changes
147 | td Function
148 | td: pre: code.javascript function(event, state) {}
149 |
150 | h2 Global Defaults Overriding
151 |
152 | p Follow the jQuery convention to override the default options of the library. For instance:
153 | pre
154 | code
155 | | $.fn.bootstrapSwitch.defaults.size = 'large';
156 | | $.fn.bootstrapSwitch.defaults.onColor = 'success';
157 |
--------------------------------------------------------------------------------
/src/js/bootstrap-switch.test.js:
--------------------------------------------------------------------------------
1 | import './bootstrap-switch';
2 |
3 | const { $ } = global;
4 |
5 | describe('Bootstrap Switch:', () => {
6 | beforeEach(() => {
7 | $.support.transition = false;
8 | $.fx.off = true;
9 | });
10 |
11 | afterEach(() => {
12 | $(`.${$.fn.bootstrapSwitch.defaults.baseClass}`).bootstrapSwitch('destroy');
13 | });
14 |
15 | const createCheckbox = () =>
16 | $('', {
17 | type: 'checkbox',
18 | class: 'switch',
19 | }).appendTo('body');
20 |
21 | const createRadio = () =>
22 | $('', {
23 | type: 'radio',
24 | name: 'name',
25 | class: 'switch',
26 | }).appendTo('body');
27 |
28 | const getOptions = $element => $element.data('bootstrap-switch').options;
29 |
30 | it('should set the default options as element options, except state', () => {
31 | const $switch = createCheckbox().prop('checked', true).bootstrapSwitch();
32 | expect(getOptions($switch)).toEqual($.fn.bootstrapSwitch.defaults);
33 | });
34 |
35 | it('should override default options with initialization ones', () => {
36 | const $switch = createCheckbox().prop('checked', false).bootstrapSwitch();
37 | const $switch2 = createCheckbox().bootstrapSwitch({ state: false });
38 | expect(getOptions($switch).state).toBe(false);
39 | expect(getOptions($switch2).state).toBe(false);
40 | });
41 |
42 | it('should trigger the same events on element and document', () => {
43 | const $switch = createCheckbox().bootstrapSwitch();
44 | let doc = 0;
45 | let element = 0;
46 | $(document).on('switchChange.bootstrapSwitch', ':checkbox', () => { doc += 1; });
47 | $switch.on('switchChange.bootstrapSwitch', () => { element += 1; });
48 | $switch.bootstrapSwitch('state', true);
49 | expect(element).toBe(doc);
50 | expect(element).toBe(1);
51 | });
52 |
53 | describe('Checkbox', () => {
54 | it('should retain state if `onSwitchChange` returns false', () => {
55 | let shadowState = null;
56 | const $switch = createCheckbox().bootstrapSwitch({
57 | state: false,
58 | onSwitchChange(event, state) {
59 | shadowState = state;
60 | return false;
61 | },
62 | });
63 | $switch.bootstrapSwitch('state', true);
64 | expect(shadowState).toBe(true);
65 | expect($switch.bootstrapSwitch('state')).toBe(false);
66 | });
67 |
68 | it('should retain state if `onSwitchChange` returns false when intederminate is true', () => {
69 | let shadowState;
70 | const $indeterminate = createCheckbox().bootstrapSwitch({
71 | state: false,
72 | onSwitchChange(event, state) {
73 | shadowState = state;
74 | return false;
75 | },
76 | });
77 | $indeterminate.data('indeterminate', true);
78 | $indeterminate.bootstrapSwitch('state', true);
79 | expect(shadowState).toBe(true);
80 | expect($indeterminate.bootstrapSwitch('state')).toBe(false);
81 | });
82 |
83 | it('should change state if `onSwitchChange` does not return false', () => {
84 | let shadowState = null;
85 | const $switch = createCheckbox().bootstrapSwitch({
86 | onSwitchChange: (event, state) => {
87 | shadowState = state;
88 | },
89 | });
90 | $switch.bootstrapSwitch('state', true);
91 | expect(shadowState).toBe(true);
92 | expect($switch.bootstrapSwitch('state')).toBe(true);
93 | });
94 | });
95 |
96 | describe('Radio', () => {
97 | it('should retain state if `onSwitchChange` returns false', () => {
98 | const $radio1 = createRadio().prop('checked', true);
99 | const $radio2 = createRadio().prop('checked', false);
100 | const $radio3 = createRadio().prop('checked', false);
101 | let shadowState = null;
102 | $radio1.add($radio2).add($radio3).bootstrapSwitch({
103 | onSwitchChange(event, state) {
104 | shadowState = state;
105 | return false;
106 | },
107 | });
108 | $radio2.bootstrapSwitch('state', true);
109 | expect(shadowState).toBe(true);
110 | expect($radio1.bootstrapSwitch('state')).toBe(true);
111 | expect($radio2.bootstrapSwitch('state')).toBe(false);
112 | expect($radio3.bootstrapSwitch('state')).toBe(false);
113 | });
114 |
115 | it('should change its state if `onSwitchChange` does not return false', () => {
116 | const $radio1 = createRadio().prop('checked', true);
117 | const $radio2 = createRadio().prop('checked', false);
118 | const $radio3 = createRadio().prop('checked', false);
119 | let shadowState = null;
120 | $radio2.bootstrapSwitch({
121 | onSwitchChange(event, state) {
122 | shadowState = state;
123 | return false;
124 | },
125 | });
126 | $radio2.click();
127 | expect(shadowState).toBe(true);
128 | expect($radio1.bootstrapSwitch('state')).toBe(false);
129 | expect($radio2.bootstrapSwitch('state')).toBe(true);
130 | expect($radio3.bootstrapSwitch('state')).toBe(false);
131 | });
132 | });
133 | });
134 |
--------------------------------------------------------------------------------
/src/less/bootstrap2/bootstrap-switch.less:
--------------------------------------------------------------------------------
1 | @bootstrap-switch-base: bootstrap-switch;
2 |
3 | .@{bootstrap-switch-base} {
4 | display: inline-block;
5 | direction: ltr;
6 | cursor: pointer;
7 | .border-radius(5px);
8 | border: 1px solid;
9 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
10 | position: relative;
11 | text-align: left;
12 | overflow: hidden;
13 | line-height: 8px;
14 | z-index: 0;
15 | .user-select(none);
16 | vertical-align: middle;
17 | .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
18 |
19 | .@{bootstrap-switch-base}-container {
20 | display: inline-block;
21 | top: 0;
22 | .border-radius(4px);
23 | .translate3d(0, 0, 0);
24 | }
25 |
26 | .@{bootstrap-switch-base}-handle-on,
27 | .@{bootstrap-switch-base}-handle-off,
28 | .@{bootstrap-switch-base}-label {
29 | .box-sizing(border-box);
30 | cursor: pointer;
31 | display: inline-block !important;
32 | padding-top: 4px;
33 | padding-bottom: 4px;
34 | padding-left: 8px;
35 | padding-right: 8px;
36 | font-size: 14px;
37 | line-height: 20px;
38 | }
39 |
40 | .@{bootstrap-switch-base}-handle-on,
41 | .@{bootstrap-switch-base}-handle-off {
42 | text-align: center;
43 | z-index: 1;
44 |
45 | &.@{bootstrap-switch-base}-primary {
46 | .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
47 | }
48 |
49 | &.@{bootstrap-switch-base}-info {
50 | .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
51 | }
52 |
53 | &.@{bootstrap-switch-base}-success {
54 | .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
55 | }
56 |
57 | &.@{bootstrap-switch-base}-warning {
58 | .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
59 | }
60 |
61 | &.@{bootstrap-switch-base}-danger {
62 | .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
63 | }
64 |
65 | &.@{bootstrap-switch-base}-default {
66 | .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
67 | }
68 | }
69 |
70 | .@{bootstrap-switch-base}-label {
71 | text-align: center;
72 | margin-top: -1px;
73 | margin-bottom: -1px;
74 | z-index: 100;
75 | border-left: 1px solid @btnBorder;
76 | border-right: 1px solid @btnBorder;
77 | .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
78 | }
79 |
80 | span::before {
81 | content: "\200b";
82 | }
83 |
84 | .@{bootstrap-switch-base}-handle-on {
85 | .border-left-radius(4px);
86 | }
87 |
88 | .@{bootstrap-switch-base}-handle-off {
89 | .border-right-radius(4px);
90 | }
91 |
92 | input[type='radio'],
93 | input[type='checkbox'] {
94 | position: absolute !important;
95 | top: 0;
96 | left: 0;
97 | .opacity(0);
98 | z-index: -1;
99 | visibility: hidden;
100 |
101 | &.form-control {
102 | height: auto;
103 | }
104 | }
105 |
106 | &.@{bootstrap-switch-base}-mini {
107 | min-width: 71px;
108 |
109 | .@{bootstrap-switch-base}-handle-on,
110 | .@{bootstrap-switch-base}-handle-off,
111 | .@{bootstrap-switch-base}-label {
112 | padding: 3px 6px;
113 | font-size: 10px;
114 | line-height: 9px;
115 | }
116 | }
117 |
118 | &.@{bootstrap-switch-base}-small {
119 | min-width: 79px;
120 |
121 | .@{bootstrap-switch-base}-handle-on,
122 | .@{bootstrap-switch-base}-handle-off,
123 | .@{bootstrap-switch-base}-label {
124 | padding: 3px 6px;
125 | font-size: 12px;
126 | line-height: 18px;
127 | }
128 | }
129 |
130 | &.@{bootstrap-switch-base}-large {
131 | min-width: 120px;
132 |
133 | .@{bootstrap-switch-base}-handle-on,
134 | .@{bootstrap-switch-base}-handle-off,
135 | .@{bootstrap-switch-base}-label {
136 | padding: 9px 12px;
137 | font-size: 16px;
138 | line-height: normal;
139 | }
140 | }
141 |
142 | &.@{bootstrap-switch-base}-disabled,
143 | &.@{bootstrap-switch-base}-readonly,
144 | &.@{bootstrap-switch-base}-indeterminate {
145 | cursor: default !important;
146 |
147 | .@{bootstrap-switch-base}-handle-on,
148 | .@{bootstrap-switch-base}-handle-off,
149 | .@{bootstrap-switch-base}-label {
150 | .opacity(50);
151 | cursor: default !important;
152 | }
153 | }
154 |
155 | &.@{bootstrap-switch-base}-animate {
156 |
157 | .@{bootstrap-switch-base}-container {
158 | .transition(margin-left .5s);
159 | }
160 | }
161 |
162 | &.@{bootstrap-switch-base}-inverse {
163 |
164 | .@{bootstrap-switch-base}-handle-on {
165 | .border-left-radius(0);
166 | .border-right-radius(4px);
167 | }
168 |
169 | .@{bootstrap-switch-base}-handle-off {
170 | .border-right-radius(0);
171 | .border-left-radius(4px);
172 | }
173 | }
174 |
175 | &.@{bootstrap-switch-base}-focused {
176 | border-color: rgba(82, 168, 236, .8);
177 | outline: 0;
178 | outline: thin dotted \9;
179 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6)");
180 | }
181 |
182 | &.@{bootstrap-switch-base}-on,
183 | &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
184 |
185 | .@{bootstrap-switch-base}-label {
186 | .border-right-radius(4px);
187 | }
188 | }
189 |
190 | &.@{bootstrap-switch-base}-off,
191 | &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
192 |
193 | .@{bootstrap-switch-base}-label {
194 | .border-left-radius(4px);
195 | }
196 | }
197 | }
198 |
--------------------------------------------------------------------------------
/src/less/bootstrap2/build.less:
--------------------------------------------------------------------------------
1 | @import "variables";
2 | @import "mixins";
3 | @import "bootstrap-switch";
--------------------------------------------------------------------------------
/src/less/bootstrap2/variables.less:
--------------------------------------------------------------------------------
1 | //
2 | // Variables
3 | // --------------------------------------------------
4 |
5 |
6 | // Global values
7 | // --------------------------------------------------
8 |
9 |
10 | // Grays
11 | // -------------------------
12 | @black: #000;
13 | @grayDarker: #222;
14 | @grayDark: #333;
15 | @gray: #555;
16 | @grayLight: #999;
17 | @grayLighter: #eee;
18 | @white: #fff;
19 |
20 |
21 | // Accent colors
22 | // -------------------------
23 | @blue: #049cdb;
24 | @blueDark: #0064cd;
25 | @green: #46a546;
26 | @red: #9d261d;
27 | @yellow: #ffc40d;
28 | @orange: #f89406;
29 | @pink: #c3325f;
30 | @purple: #7a43b6;
31 |
32 |
33 | // Scaffolding
34 | // -------------------------
35 | @bodyBackground: @white;
36 | @textColor: @grayDark;
37 |
38 |
39 | // Links
40 | // -------------------------
41 | @linkColor: #08c;
42 | @linkColorHover: darken(@linkColor, 15%);
43 |
44 |
45 | // Typography
46 | // -------------------------
47 | @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
48 | @serifFontFamily: Georgia, "Times New Roman", Times, serif;
49 | @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
50 |
51 | @baseFontSize: 14px;
52 | @baseFontFamily: @sansFontFamily;
53 | @baseLineHeight: 20px;
54 | @altFontFamily: @serifFontFamily;
55 |
56 | @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
57 | @headingsFontWeight: bold; // instead of browser default, bold
58 | @headingsColor: inherit; // empty to use BS default, @textColor
59 |
60 |
61 | // Component sizing
62 | // -------------------------
63 | // Based on 14px font-size and 20px line-height
64 |
65 | @fontSizeLarge: @baseFontSize * 1.25; // ~18px
66 | @fontSizeSmall: @baseFontSize * 0.85; // ~12px
67 | @fontSizeMini: @baseFontSize * 0.75; // ~11px
68 |
69 | @paddingLarge: 11px 19px; // 44px
70 | @paddingSmall: 2px 10px; // 26px
71 | @paddingMini: 0 6px; // 22px
72 |
73 | @baseBorderRadius: 4px;
74 | @borderRadiusLarge: 6px;
75 | @borderRadiusSmall: 3px;
76 |
77 |
78 | // Tables
79 | // -------------------------
80 | @tableBackground: transparent; // overall background-color
81 | @tableBackgroundAccent: #f9f9f9; // for striping
82 | @tableBackgroundHover: #f5f5f5; // for hover
83 | @tableBorder: #ddd; // table and cell border
84 |
85 | // Buttons
86 | // -------------------------
87 | @btnBackground: @white;
88 | @btnBackgroundHighlight: darken(@white, 10%);
89 | @btnBorder: #ccc;
90 |
91 | @btnPrimaryBackground: @linkColor;
92 | @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
93 |
94 | @btnInfoBackground: #5bc0de;
95 | @btnInfoBackgroundHighlight: #2f96b4;
96 |
97 | @btnSuccessBackground: #62c462;
98 | @btnSuccessBackgroundHighlight: #51a351;
99 |
100 | @btnWarningBackground: lighten(@orange, 15%);
101 | @btnWarningBackgroundHighlight: @orange;
102 |
103 | @btnDangerBackground: #ee5f5b;
104 | @btnDangerBackgroundHighlight: #bd362f;
105 |
106 | @btnInverseBackground: #444;
107 | @btnInverseBackgroundHighlight: @grayDarker;
108 |
109 |
110 | // Forms
111 | // -------------------------
112 | @inputBackground: @white;
113 | @inputBorder: #ccc;
114 | @inputBorderRadius: @baseBorderRadius;
115 | @inputDisabledBackground: @grayLighter;
116 | @formActionsBackground: #f5f5f5;
117 | @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
118 |
119 |
120 | // Dropdowns
121 | // -------------------------
122 | @dropdownBackground: @white;
123 | @dropdownBorder: rgba(0,0,0,.2);
124 | @dropdownDividerTop: #e5e5e5;
125 | @dropdownDividerBottom: @white;
126 |
127 | @dropdownLinkColor: @grayDark;
128 | @dropdownLinkColorHover: @white;
129 | @dropdownLinkColorActive: @white;
130 |
131 | @dropdownLinkBackgroundActive: @linkColor;
132 | @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
133 |
134 |
135 |
136 | // COMPONENT VARIABLES
137 | // --------------------------------------------------
138 |
139 |
140 | // Z-index master list
141 | // -------------------------
142 | // Used for a bird's eye view of components dependent on the z-axis
143 | // Try to avoid customizing these :)
144 | @zindexDropdown: 1000;
145 | @zindexPopover: 1010;
146 | @zindexTooltip: 1030;
147 | @zindexFixedNavbar: 1030;
148 | @zindexModalBackdrop: 1040;
149 | @zindexModal: 1050;
150 |
151 |
152 | // Sprite icons path
153 | // -------------------------
154 | @iconSpritePath: "../img/glyphicons-halflings.png";
155 | @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
156 |
157 |
158 | // Input placeholder text color
159 | // -------------------------
160 | @placeholderText: @grayLight;
161 |
162 |
163 | // Hr border color
164 | // -------------------------
165 | @hrBorder: @grayLighter;
166 |
167 |
168 | // Horizontal forms & lists
169 | // -------------------------
170 | @horizontalComponentOffset: 180px;
171 |
172 |
173 | // Wells
174 | // -------------------------
175 | @wellBackground: #f5f5f5;
176 |
177 |
178 | // Navbar
179 | // -------------------------
180 | @navbarCollapseWidth: 979px;
181 | @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
182 |
183 | @navbarHeight: 40px;
184 | @navbarBackgroundHighlight: #ffffff;
185 | @navbarBackground: darken(@navbarBackgroundHighlight, 5%);
186 | @navbarBorder: darken(@navbarBackground, 12%);
187 |
188 | @navbarText: #777;
189 | @navbarLinkColor: #777;
190 | @navbarLinkColorHover: @grayDark;
191 | @navbarLinkColorActive: @gray;
192 | @navbarLinkBackgroundHover: transparent;
193 | @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
194 |
195 | @navbarBrandColor: @navbarLinkColor;
196 |
197 | // Inverted navbar
198 | @navbarInverseBackground: #111111;
199 | @navbarInverseBackgroundHighlight: #222222;
200 | @navbarInverseBorder: #252525;
201 |
202 | @navbarInverseText: @grayLight;
203 | @navbarInverseLinkColor: @grayLight;
204 | @navbarInverseLinkColorHover: @white;
205 | @navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
206 | @navbarInverseLinkBackgroundHover: transparent;
207 | @navbarInverseLinkBackgroundActive: @navbarInverseBackground;
208 |
209 | @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
210 | @navbarInverseSearchBackgroundFocus: @white;
211 | @navbarInverseSearchBorder: @navbarInverseBackground;
212 | @navbarInverseSearchPlaceholderColor: #ccc;
213 |
214 | @navbarInverseBrandColor: @navbarInverseLinkColor;
215 |
216 |
217 | // Pagination
218 | // -------------------------
219 | @paginationBackground: #fff;
220 | @paginationBorder: #ddd;
221 | @paginationActiveBackground: #f5f5f5;
222 |
223 |
224 | // Hero unit
225 | // -------------------------
226 | @heroUnitBackground: @grayLighter;
227 | @heroUnitHeadingColor: inherit;
228 | @heroUnitLeadColor: inherit;
229 |
230 |
231 | // Form states and alerts
232 | // -------------------------
233 | @warningText: #c09853;
234 | @warningBackground: #fcf8e3;
235 | @warningBorder: darken(spin(@warningBackground, -10), 3%);
236 |
237 | @errorText: #b94a48;
238 | @errorBackground: #f2dede;
239 | @errorBorder: darken(spin(@errorBackground, -10), 3%);
240 |
241 | @successText: #468847;
242 | @successBackground: #dff0d8;
243 | @successBorder: darken(spin(@successBackground, -10), 5%);
244 |
245 | @infoText: #3a87ad;
246 | @infoBackground: #d9edf7;
247 | @infoBorder: darken(spin(@infoBackground, -10), 7%);
248 |
249 |
250 | // Tooltips and popovers
251 | // -------------------------
252 | @tooltipColor: #fff;
253 | @tooltipBackground: #000;
254 | @tooltipArrowWidth: 5px;
255 | @tooltipArrowColor: @tooltipBackground;
256 |
257 | @popoverBackground: #fff;
258 | @popoverArrowWidth: 10px;
259 | @popoverArrowColor: #fff;
260 | @popoverTitleBackground: darken(@popoverBackground, 3%);
261 |
262 | // Special enhancement for popovers
263 | @popoverArrowOuterWidth: @popoverArrowWidth + 1;
264 | @popoverArrowOuterColor: rgba(0,0,0,.25);
265 |
266 |
267 |
268 | // GRID
269 | // --------------------------------------------------
270 |
271 |
272 | // Default 940px grid
273 | // -------------------------
274 | @gridColumns: 12;
275 | @gridColumnWidth: 60px;
276 | @gridGutterWidth: 20px;
277 | @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
278 |
279 | // 1200px min
280 | @gridColumnWidth1200: 70px;
281 | @gridGutterWidth1200: 30px;
282 | @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
283 |
284 | // 768px-979px
285 | @gridColumnWidth768: 42px;
286 | @gridGutterWidth768: 20px;
287 | @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
288 |
289 |
290 | // Fluid grid
291 | // -------------------------
292 | @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
293 | @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
294 |
295 | // 1200px min
296 | @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
297 | @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
298 |
299 | // 768px-979px
300 | @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
301 | @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
302 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/bootstrap-switch.less:
--------------------------------------------------------------------------------
1 | @bootstrap-switch-base: bootstrap-switch;
2 |
3 | .@{bootstrap-switch-base} {
4 | display: inline-block;
5 | direction: ltr;
6 | cursor: pointer;
7 | border-radius: @border-radius-base;
8 | border: 1px solid;
9 | border-color: @btn-default-border;
10 | position: relative;
11 | text-align: left;
12 | overflow: hidden;
13 | line-height: 8px;
14 | z-index: 0;
15 | .user-select(none);
16 | vertical-align: middle;
17 | .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
18 |
19 | .@{bootstrap-switch-base}-container {
20 | display: inline-block;
21 | top: 0;
22 | border-radius: @border-radius-base;
23 | .translate3d(0, 0, 0);
24 | }
25 |
26 | .@{bootstrap-switch-base}-handle-on,
27 | .@{bootstrap-switch-base}-handle-off,
28 | .@{bootstrap-switch-base}-label {
29 | .box-sizing(border-box);
30 | cursor: pointer;
31 | display: table-cell;
32 | vertical-align: middle;
33 | padding: @padding-base-vertical @padding-base-horizontal;
34 | font-size: @font-size-base;
35 | line-height: @line-height-computed;
36 | }
37 |
38 | .@{bootstrap-switch-base}-handle-on,
39 | .@{bootstrap-switch-base}-handle-off {
40 | text-align: center;
41 | z-index: 1;
42 |
43 | &.@{bootstrap-switch-base}-primary {
44 | color: #fff;
45 | background: @btn-primary-bg;
46 | }
47 |
48 | &.@{bootstrap-switch-base}-info {
49 | color: #fff;
50 | background: @btn-info-bg;
51 | }
52 |
53 | &.@{bootstrap-switch-base}-success {
54 | color: #fff;
55 | background: @btn-success-bg;
56 | }
57 |
58 | &.@{bootstrap-switch-base}-warning {
59 | background: @btn-warning-bg;
60 | color: #fff;
61 | }
62 |
63 | &.@{bootstrap-switch-base}-danger {
64 | color: #fff;
65 | background: @btn-danger-bg;
66 | }
67 |
68 | &.@{bootstrap-switch-base}-default {
69 | color: #000;
70 | background: @gray-lighter;
71 | }
72 | }
73 |
74 | .@{bootstrap-switch-base}-label {
75 | text-align: center;
76 | margin-top: -1px;
77 | margin-bottom: -1px;
78 | z-index: 100;
79 | color: @btn-default-color;
80 | background: @btn-default-bg;
81 | }
82 |
83 | span::before {
84 | content: "\200b";
85 | }
86 |
87 | .@{bootstrap-switch-base}-handle-on {
88 | .border-left-radius(@border-radius-base - 1);
89 | }
90 |
91 | .@{bootstrap-switch-base}-handle-off {
92 | .border-right-radius(@border-radius-base - 1);
93 | }
94 |
95 | input[type='radio'],
96 | input[type='checkbox'] {
97 | position: absolute !important;
98 | top: 0;
99 | left: 0;
100 | margin: 0;
101 | z-index: -1;
102 | .opacity(0);
103 | visibility: hidden;
104 | }
105 |
106 | &.@{bootstrap-switch-base}-mini {
107 |
108 | .@{bootstrap-switch-base}-handle-on,
109 | .@{bootstrap-switch-base}-handle-off,
110 | .@{bootstrap-switch-base}-label {
111 | padding: @padding-xs-vertical @padding-xs-horizontal;
112 | font-size: @font-size-small;
113 | line-height: @line-height-small;
114 | }
115 | }
116 |
117 | &.@{bootstrap-switch-base}-small {
118 |
119 | .@{bootstrap-switch-base}-handle-on,
120 | .@{bootstrap-switch-base}-handle-off,
121 | .@{bootstrap-switch-base}-label {
122 | padding: @padding-small-vertical @padding-small-horizontal;
123 | font-size: @font-size-small;
124 | line-height: @line-height-small;
125 | }
126 | }
127 |
128 | &.@{bootstrap-switch-base}-large {
129 |
130 | .@{bootstrap-switch-base}-handle-on,
131 | .@{bootstrap-switch-base}-handle-off,
132 | .@{bootstrap-switch-base}-label {
133 | padding: @padding-base-vertical @padding-large-horizontal;
134 | font-size: @font-size-large;
135 | line-height: @line-height-large;
136 | }
137 | }
138 |
139 | &.@{bootstrap-switch-base}-disabled,
140 | &.@{bootstrap-switch-base}-readonly,
141 | &.@{bootstrap-switch-base}-indeterminate {
142 | cursor: default !important;
143 |
144 | .@{bootstrap-switch-base}-handle-on,
145 | .@{bootstrap-switch-base}-handle-off,
146 | .@{bootstrap-switch-base}-label {
147 | .opacity(.5);
148 | cursor: default !important;
149 | }
150 | }
151 |
152 | &.@{bootstrap-switch-base}-animate {
153 |
154 | .@{bootstrap-switch-base}-container {
155 | .transition(margin-left .5s);
156 | }
157 | }
158 |
159 | &.@{bootstrap-switch-base}-inverse {
160 |
161 | .@{bootstrap-switch-base}-handle-on {
162 | .border-left-radius(0);
163 | .border-right-radius(@border-radius-base - 1);
164 | }
165 |
166 | .@{bootstrap-switch-base}-handle-off {
167 | .border-right-radius(0);
168 | .border-left-radius(@border-radius-base - 1);
169 | }
170 | }
171 |
172 | &.@{bootstrap-switch-base}-focused {
173 | @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
174 | border-color: @input-border-focus;
175 | outline: 0;
176 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
177 | }
178 |
179 | &.@{bootstrap-switch-base}-on,
180 | &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
181 |
182 | .@{bootstrap-switch-base}-label {
183 | .border-right-radius(@border-radius-base - 1);
184 | }
185 | }
186 |
187 | &.@{bootstrap-switch-base}-off,
188 | &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
189 |
190 |
191 | .@{bootstrap-switch-base}-label {
192 | .border-left-radius(@border-radius-base - 1);
193 | }
194 | }
195 | }
196 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/build.less:
--------------------------------------------------------------------------------
1 | @import "variables";
2 | @import "mixins";
3 | @import "bootstrap-switch";
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins.less:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------------------------------
3 |
4 | // Utilities
5 | @import "mixins/hide-text.less";
6 | @import "mixins/opacity.less";
7 | @import "mixins/image.less";
8 | @import "mixins/labels.less";
9 | @import "mixins/reset-filter.less";
10 | @import "mixins/resize.less";
11 | @import "mixins/responsive-visibility.less";
12 | @import "mixins/size.less";
13 | @import "mixins/tab-focus.less";
14 | @import "mixins/reset-text.less";
15 | @import "mixins/text-emphasis.less";
16 | @import "mixins/text-overflow.less";
17 | @import "mixins/vendor-prefixes.less";
18 |
19 | // Components
20 | @import "mixins/alerts.less";
21 | @import "mixins/buttons.less";
22 | @import "mixins/panels.less";
23 | @import "mixins/pagination.less";
24 | @import "mixins/list-group.less";
25 | @import "mixins/nav-divider.less";
26 | @import "mixins/forms.less";
27 | @import "mixins/progress-bar.less";
28 | @import "mixins/table-row.less";
29 |
30 | // Skins
31 | @import "mixins/background-variant.less";
32 | @import "mixins/border-radius.less";
33 | @import "mixins/gradients.less";
34 |
35 | // Layout
36 | @import "mixins/clearfix.less";
37 | @import "mixins/center-block.less";
38 | @import "mixins/nav-vertical-align.less";
39 | @import "mixins/grid-framework.less";
40 | @import "mixins/grid.less";
41 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/alerts.less:
--------------------------------------------------------------------------------
1 | // Alerts
2 |
3 | .alert-variant(@background; @border; @text-color) {
4 | background-color: @background;
5 | border-color: @border;
6 | color: @text-color;
7 |
8 | hr {
9 | border-top-color: darken(@border, 5%);
10 | }
11 | .alert-link {
12 | color: darken(@text-color, 10%);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/background-variant.less:
--------------------------------------------------------------------------------
1 | // Contextual backgrounds
2 |
3 | .bg-variant(@color) {
4 | background-color: @color;
5 | a&:hover,
6 | a&:focus {
7 | background-color: darken(@color, 10%);
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/border-radius.less:
--------------------------------------------------------------------------------
1 | // Single side border-radius
2 |
3 | .border-top-radius(@radius) {
4 | border-top-right-radius: @radius;
5 | border-top-left-radius: @radius;
6 | }
7 | .border-right-radius(@radius) {
8 | border-bottom-right-radius: @radius;
9 | border-top-right-radius: @radius;
10 | }
11 | .border-bottom-radius(@radius) {
12 | border-bottom-right-radius: @radius;
13 | border-bottom-left-radius: @radius;
14 | }
15 | .border-left-radius(@radius) {
16 | border-bottom-left-radius: @radius;
17 | border-top-left-radius: @radius;
18 | }
19 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/buttons.less:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | .button-variant(@color; @background; @border) {
7 | color: @color;
8 | background-color: @background;
9 | border-color: @border;
10 |
11 | &:focus,
12 | &.focus {
13 | color: @color;
14 | background-color: darken(@background, 10%);
15 | border-color: darken(@border, 25%);
16 | }
17 | &:hover {
18 | color: @color;
19 | background-color: darken(@background, 10%);
20 | border-color: darken(@border, 12%);
21 | }
22 | &:active,
23 | &.active,
24 | .open > .dropdown-toggle& {
25 | color: @color;
26 | background-color: darken(@background, 10%);
27 | border-color: darken(@border, 12%);
28 |
29 | &:hover,
30 | &:focus,
31 | &.focus {
32 | color: @color;
33 | background-color: darken(@background, 17%);
34 | border-color: darken(@border, 25%);
35 | }
36 | }
37 | &:active,
38 | &.active,
39 | .open > .dropdown-toggle& {
40 | background-image: none;
41 | }
42 | &.disabled,
43 | &[disabled],
44 | fieldset[disabled] & {
45 | &,
46 | &:hover,
47 | &:focus,
48 | &.focus,
49 | &:active,
50 | &.active {
51 | background-color: @background;
52 | border-color: @border;
53 | }
54 | }
55 |
56 | .badge {
57 | color: @background;
58 | background-color: @color;
59 | }
60 | }
61 |
62 | // Button sizes
63 | .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
64 | padding: @padding-vertical @padding-horizontal;
65 | font-size: @font-size;
66 | line-height: @line-height;
67 | border-radius: @border-radius;
68 | }
69 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/center-block.less:
--------------------------------------------------------------------------------
1 | // Center-align a block level element
2 |
3 | .center-block() {
4 | display: block;
5 | margin-left: auto;
6 | margin-right: auto;
7 | }
8 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/clearfix.less:
--------------------------------------------------------------------------------
1 | // Clearfix
2 | //
3 | // For modern browsers
4 | // 1. The space content is one way to avoid an Opera bug when the
5 | // contenteditable attribute is included anywhere else in the document.
6 | // Otherwise it causes space to appear at the top and bottom of elements
7 | // that are clearfixed.
8 | // 2. The use of `table` rather than `block` is only necessary if using
9 | // `:before` to contain the top-margins of child elements.
10 | //
11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/
12 |
13 | .clearfix() {
14 | &:before,
15 | &:after {
16 | content: " "; // 1
17 | display: table; // 2
18 | }
19 | &:after {
20 | clear: both;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/less/bootstrap3/mixins/forms.less:
--------------------------------------------------------------------------------
1 | // Form validation states
2 | //
3 | // Used in forms.less to generate the form validation CSS for warnings, errors,
4 | // and successes.
5 |
6 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
7 | // Color the label and help text
8 | .help-block,
9 | .control-label,
10 | .radio,
11 | .checkbox,
12 | .radio-inline,
13 | .checkbox-inline,
14 | &.radio label,
15 | &.checkbox label,
16 | &.radio-inline label,
17 | &.checkbox-inline label {
18 | color: @text-color;
19 | }
20 | // Set the border and box shadow on specific inputs to match
21 | .form-control {
22 | border-color: @border-color;
23 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
24 | &:focus {
25 | border-color: darken(@border-color, 10%);
26 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
27 | .box-shadow(@shadow);
28 | }
29 | }
30 | // Set validation states also for addons
31 | .input-group-addon {
32 | color: @text-color;
33 | border-color: @border-color;
34 | background-color: @background-color;
35 | }
36 | // Optional feedback icon
37 | .form-control-feedback {
38 | color: @text-color;
39 | }
40 | }
41 |
42 |
43 | // Form control focus state
44 | //
45 | // Generate a customized focus state and for any input with the specified color,
46 | // which defaults to the `@input-border-focus` variable.
47 | //
48 | // We highly encourage you to not customize the default value, but instead use
49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
50 | // WebKit's default styles, but applicable to a wider range of browsers. Its
51 | // usability and accessibility should be taken into account with any change.
52 | //
53 | // Example usage: change the default blue border and shadow to white for better
54 | // contrast against a dark gray background.
55 | .form-control-focus(@color: @input-border-focus) {
56 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
57 | &:focus {
58 | border-color: @color;
59 | outline: 0;
60 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
61 | }
62 | }
63 |
64 | // Form control sizing
65 | //
66 | // Relative text size, padding, and border-radii changes for form controls. For
67 | // horizontal sizing, wrap controls in the predefined grid classes. `