├── .bowerrc ├── .gitignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── angular-toggle-switch.js ├── angular-toggle-switch.min.js ├── bower.json ├── example ├── bootstrap-2.html ├── bootstrap-3.html └── default.html ├── karma.conf.js ├── package.json ├── preview.png ├── style ├── bootstrap2 │ ├── angular-toggle-switch-bootstrap-2.css │ ├── angular-toggle-switch-bootstrap-2.less │ ├── mixins.less │ ├── toggle-switch.less │ └── variables.less ├── bootstrap3 │ ├── angular-toggle-switch-bootstrap-3.css │ ├── angular-toggle-switch-bootstrap-3.less │ ├── angular-toggle-switch-bootstrap-3.scss │ ├── mixins.less │ ├── toggle-switch.less │ └── variables.less └── default │ ├── angular-toggle-switch.css │ └── angular-toggle-switch.less └── test └── angular-toggle-switch.spec.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | _site 4 | core 5 | .idea 6 | .c9/ 7 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": false, 5 | "curly": false, 6 | "eqeqeq": true, 7 | "eqnull": true, 8 | "immed": true, 9 | "latedef": true, 10 | "newcap": true, 11 | "noarg": true, 12 | "undef": true, 13 | "strict": false, 14 | "trailing": true, 15 | "smarttabs": true 16 | } 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.10 4 | env: 5 | global: 6 | - KARMA_BROWSERS=Firefox 7 | before_script: 8 | - export DISPLAY=:99.0 9 | - sh -e /etc/init.d/xvfb start 10 | - npm install -g grunt-cli bower 11 | - bower install 12 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | // load all grunt tasks 3 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 4 | 5 | grunt.initConfig({ 6 | watch: { 7 | karma: { 8 | files: ['angular-toggle-switch.js', 'test/{,**/}*.js', 'bootstrap3/*.less'], 9 | tasks: ['karma:unit'] 10 | } 11 | }, 12 | 13 | bump: { 14 | options: { 15 | commitMessage: 'chore: release v%VERSION%', 16 | commitFiles: ['package.json', 'bower.json', 'angular-toggle-switch.min.js'], 17 | files: ['package.json', 'bower.json'], 18 | pushTo: 'origin' 19 | } 20 | }, 21 | 22 | less: { 23 | 'style/default/angular-toggle-switch.css': ['style/default/angular-toggle-switch.less'], 24 | 'style/bootstrap2/angular-toggle-switch-bootstrap-2.css': ['style/bootstrap2/angular-toggle-switch-bootstrap-2.less'], 25 | 'style/bootstrap3/angular-toggle-switch-bootstrap-3.css': ['style/bootstrap3/angular-toggle-switch-bootstrap-3.less'] 26 | }, 27 | 28 | karma: { 29 | unit: { 30 | configFile: 'karma.conf.js', 31 | singleRun: true 32 | }, 33 | }, 34 | 35 | jshint: { 36 | all: ['Gruntfile.js', 'angular-toggle-switch.js', 'test/angular-toggle-switch.spec.js'] 37 | }, 38 | 39 | ngAnnotate: { 40 | dist: { 41 | files: { 42 | 'angular-toggle-switch.min.js': ['angular-toggle-switch.js'] 43 | } 44 | } 45 | }, 46 | 47 | 'npm-contributors': { 48 | options: { 49 | commitMessage: 'chore: update contributors' 50 | } 51 | }, 52 | 53 | uglify: { 54 | options: { 55 | mangle: false 56 | }, 57 | dist: { 58 | files: { 59 | 'angular-toggle-switch.min.js': ['angular-toggle-switch.min.js'] 60 | } 61 | } 62 | } 63 | }); 64 | 65 | grunt.registerTask('build', [ 66 | 'jshint:all', 67 | 'ngAnnotate', 68 | 'uglify', 69 | 'less' 70 | ]); 71 | 72 | grunt.registerTask('test', [ 73 | 'jshint:all', 74 | 'karma:unit' 75 | ]); 76 | 77 | grunt.registerTask('release', 'Bump the version', function(type) { 78 | grunt.task.run([ 79 | 'build', 80 | 'npm-contributors', 81 | 'bump:' + (type ? type : 'patch') 82 | ]); 83 | }); 84 | 85 | // Default task. 86 | grunt.registerTask('default', ['watch']); 87 | }; 88 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2013 - 2015 Christopher Garvis. 4 | Copyright (c) 2015 Pascal Garber. 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularJS Bootstrap 2/3 Toggle Switch [![Build Status](https://travis-ci.org/JumpLink/angular-toggle-switch.png?branch=master)](https://travis-ci.org/JumpLink/angular-toggle-switch) 2 | 3 | Toggle Switches for AngularJS (and optionally Bootstrap). Based off [Bootstrap switch](http://www.larentis.eu/switch/) by Matt Lartentis and forked from [cgarvis](https://github.com/cgarvis/angular-toggle-switch). 4 | 5 | ![Preview](/preview.png) 6 | 7 | ## Demo 8 | [jumplink.github.io/angular-toggle-switch](http://jumplink.github.io/angular-toggle-switch/) 9 | 10 | ## Installation 11 | 12 | Download [angular-toggle-switch.min.js](https://raw.github.com/JumpLink/angular-toggle-switch/master/angular-toggle-switch.min.js) or install with bower. 13 | 14 | ```bash 15 | $ bower install angular-bootstrap-toggle-switch --save 16 | ``` 17 | 18 | Load `angular-toggle-switch.min.js` then add the `toggle-switch` module to your Angular App. 19 | 20 | ```javascript 21 | angular.module('app', ['toggle-switch']); 22 | ``` 23 | 24 | See [demo](http://jumplink.github.io/angular-toggle-switch) for usage. 25 | 26 | ## Less 27 | 28 | If you want to use your bootstrap variables, include toggle-switch.less in your compilation stack. You can even choose among Bootstrap version 2 or 3 compatible source. 29 | 30 | ## Development 31 | 32 | Testing is done using Karma Test Runner. 33 | 34 | ```bash 35 | $ grunt test 36 | ``` 37 | 38 | ## Release 39 | 40 | ```bash 41 | $ grunt release 42 | ``` 43 | -------------------------------------------------------------------------------- /angular-toggle-switch.js: -------------------------------------------------------------------------------- 1 | angular.module('toggle-switch', ['ng']).directive('toggleSwitch', ['$compile', function($compile) { 2 | return { 3 | restrict: 'EA', 4 | replace: true, 5 | require:'ngModel', 6 | scope: { 7 | isDisabled: '=', 8 | onLabel: '@', 9 | offLabel: '@', 10 | knobLabel: '@', 11 | html: '=', 12 | onChange: '&' 13 | }, 14 | template: 15 | '
' + 16 | '
' + 17 | '' + 18 | '' + 19 | '' + 20 | '
' + 21 | '
', 22 | compile: function(element, attrs) { 23 | if (angular.isUndefined(attrs.onLabel)) { 24 | attrs.onLabel = 'On'; 25 | } 26 | if (angular.isUndefined(attrs.offLabel)) { 27 | attrs.offLabel = 'Off'; 28 | } 29 | if (angular.isUndefined(attrs.knobLabel)) { 30 | attrs.knobLabel = '\u00a0'; 31 | } 32 | if (angular.isUndefined(attrs.isDisabled)) { 33 | attrs.isDisabled = false; 34 | } 35 | if (angular.isUndefined(attrs.html)) { 36 | attrs.html = false; 37 | } 38 | if (angular.isUndefined(attrs.tabindex)) { 39 | attrs.tabindex = 0; 40 | } 41 | 42 | return function postLink(scope, iElement, iAttrs, ngModel) { 43 | iElement.attr('tabindex', attrs.tabindex); 44 | 45 | scope.toggle = function toggle() { 46 | if (!scope.isDisabled) { 47 | scope.model = !scope.model; 48 | ngModel.$setViewValue(scope.model); 49 | scope.onChange(); 50 | } 51 | }; 52 | 53 | var spaceCharCode = 32; 54 | scope.onKeyPress = function onKeyPress($event) { 55 | if ($event.charCode == spaceCharCode && !$event.altKey && !$event.ctrlKey && !$event.metaKey) { 56 | scope.toggle(); 57 | $event.preventDefault(); 58 | } 59 | }; 60 | 61 | ngModel.$formatters.push(function(modelValue) { 62 | return modelValue; 63 | }); 64 | 65 | ngModel.$parsers.push(function(viewValue) { 66 | return viewValue; 67 | }); 68 | 69 | ngModel.$viewChangeListeners.push(function() { 70 | scope.$eval(attrs.ngChange); 71 | }); 72 | 73 | ngModel.$render = function() { 74 | scope.model = ngModel.$viewValue; 75 | }; 76 | 77 | var bindSpan = function(span, html) { 78 | span = angular.element(span); 79 | var bindAttributeName = (html === true) ? 'ng-bind-html' : 'ng-bind'; 80 | 81 | // remove old ng-bind attributes 82 | span.removeAttr('ng-bind-html'); 83 | span.removeAttr('ng-bind'); 84 | 85 | if (angular.element(span).hasClass("switch-left")) 86 | span.attr(bindAttributeName, 'onLabel'); 87 | if (span.hasClass("knob")) 88 | span.attr(bindAttributeName, 'knobLabel'); 89 | if (span.hasClass("switch-right")) 90 | span.attr(bindAttributeName, 'offLabel'); 91 | 92 | $compile(span)(scope, function(cloned, scope) { 93 | span.replaceWith(cloned); 94 | }); 95 | }; 96 | 97 | // add ng-bind attribute to each span element. 98 | // NOTE: you need angular-sanitize to use ng-bind-html 99 | var bindSwitch = function(iElement, html) { 100 | angular.forEach(iElement[0].children[0].children, function(span, index) { 101 | bindSpan(span, html); 102 | }); 103 | }; 104 | 105 | scope.$watch('html', function(newValue) { 106 | bindSwitch(iElement, newValue); 107 | }); 108 | }; 109 | } 110 | }; 111 | }]); 112 | -------------------------------------------------------------------------------- /angular-toggle-switch.min.js: -------------------------------------------------------------------------------- 1 | angular.module("toggle-switch",["ng"]).directive("toggleSwitch",["$compile",function($compile){return{restrict:"EA",replace:!0,require:"ngModel",scope:{isDisabled:"=",onLabel:"@",offLabel:"@",knobLabel:"@",html:"=",onChange:"&"},template:'
',compile:function(element,attrs){return angular.isUndefined(attrs.onLabel)&&(attrs.onLabel="On"),angular.isUndefined(attrs.offLabel)&&(attrs.offLabel="Off"),angular.isUndefined(attrs.knobLabel)&&(attrs.knobLabel=" "),angular.isUndefined(attrs.isDisabled)&&(attrs.isDisabled=!1),angular.isUndefined(attrs.html)&&(attrs.html=!1),angular.isUndefined(attrs.tabindex)&&(attrs.tabindex=0),function(scope,iElement,iAttrs,ngModel){iElement.attr("tabindex",attrs.tabindex),scope.toggle=function(){scope.isDisabled||(scope.model=!scope.model,ngModel.$setViewValue(scope.model)),scope.onChange()};var spaceCharCode=32;scope.onKeyPress=function($event){$event.charCode!=spaceCharCode||$event.altKey||$event.ctrlKey||$event.metaKey||scope.toggle();$event.preventDefault()},ngModel.$formatters.push(function(modelValue){return modelValue}),ngModel.$parsers.push(function(viewValue){return viewValue}),ngModel.$viewChangeListeners.push(function(){scope.$eval(attrs.ngChange)}),ngModel.$render=function(){scope.model=ngModel.$viewValue};var bindSpan=function(span,html){span=angular.element(span);var bindAttributeName=html===!0?"ng-bind-html":"ng-bind";span.removeAttr("ng-bind-html"),span.removeAttr("ng-bind"),angular.element(span).hasClass("switch-left")&&span.attr(bindAttributeName,"onLabel"),span.hasClass("knob")&&span.attr(bindAttributeName,"knobLabel"),span.hasClass("switch-right")&&span.attr(bindAttributeName,"offLabel"),$compile(span)(scope,function(cloned,scope){span.replaceWith(cloned)})},bindSwitch=function(iElement,html){angular.forEach(iElement[0].children[0].children,function(span,index){bindSpan(span,html)})};scope.$watch("html",function(newValue){bindSwitch(iElement,newValue)})}}}}]); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-bootstrap-toggle-switch", 3 | "version": "0.5.6", 4 | "main": [ 5 | "angular-toggle-switch.js", 6 | "style/bootstrap3/angular-toggle-switch-bootstrap-3.css" 7 | ], 8 | "homepage": "http://jumplink.github.io/angular-toggle-switch/", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/JumpLink/angular-toggle-switch.git" 12 | }, 13 | "devDependencies": { 14 | "angular": ">=1.0", 15 | "angular-mocks": ">=1.0" 16 | }, 17 | "ignore": [ 18 | "**/.*", 19 | "Gruntfile.js", 20 | "karma.conf.js", 21 | "package.json", 22 | ".travis.yml" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /example/bootstrap-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap 2 Style Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 |

19 | Bootstrap 2 Style Example 20 |

21 | 22 |

23 |

24 |
25 |
26 |
27 |
28 |
29 |

30 | 31 |

32 |

33 |
34 |
35 |
36 |

37 | 38 |

39 |

40 |

41 | 42 |

43 |

44 |
45 |

46 | 47 | 48 | -------------------------------------------------------------------------------- /example/bootstrap-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap 3 Style Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 |

19 | Bootstrap 3 Style Example 20 |

21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 |

32 |

33 |
34 |
35 |
36 |

37 | 38 |

39 |

40 |
41 |
42 |
43 |

44 | 45 | 46 |

47 |

48 |

49 | 50 |

51 |

52 |
53 |

54 | 55 | -------------------------------------------------------------------------------- /example/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Default Style Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 |

18 | Default Style Example 19 |

20 | 21 |

22 |

23 |

24 | 25 |

26 |

27 |

28 | 29 |

30 |

31 |
32 |

33 | 34 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | module.exports = function(config){ 3 | config.set({ 4 | // base path, that will be used to resolve files and exclude 5 | basePath: '', 6 | 7 | // list of files / patterns to load in the browser 8 | files: [ 9 | 'bower_components/angular/angular.js', 10 | 'bower_components/angular-mocks/angular-mocks.js', 11 | 'angular-toggle-switch.js', 12 | 'test/*.js' 13 | ], 14 | 15 | // list of files to exclude 16 | exclude: [], 17 | 18 | // test results reporter to use 19 | // possible values: dots || progress || growl 20 | reporters: ['progress'], 21 | 22 | // web server port 23 | port: 8080, 24 | 25 | // cli runner port 26 | runnerPort: 9100, 27 | 28 | // enable / disable colors in the output (reporters and logs) 29 | colors: true, 30 | 31 | // level of logging 32 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 33 | logLevel: config.LOG_INFO, 34 | 35 | // enable / disable watching file and executing tests whenever any file changes 36 | autoWatch: false, 37 | 38 | frameworks: ['jasmine'], 39 | 40 | // Start these browsers, currently available: 41 | // - Chrome 42 | // - ChromeCanary 43 | // - Firefox 44 | // - Opera 45 | // - Safari (only Mac) 46 | // - PhantomJS 47 | // - IE (only Windows) 48 | 49 | browsers: process.env.KARMA_BROWSERS ? process.env.KARMA_BROWSERS.replace(' ', '').split(',') : ['Chrome', 'Firefox'], 50 | 51 | plugins: [ 52 | 'karma-chrome-launcher', 53 | 'karma-firefox-launcher', 54 | 'karma-script-launcher', 55 | 'karma-jasmine', 56 | ], 57 | 58 | // If browser does not capture in given timeout [ms], kill it 59 | captureTimeout: 5000, 60 | 61 | // Continuous Integration mode 62 | // if true, it capture browsers, run tests and exit 63 | singleRun: false, 64 | }); 65 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-bootstrap-toggle-switch", 3 | "version": "0.5.6", 4 | "title": "Angular.JS Toggle Switch", 5 | "author": { 6 | "name": "Chris Garvis", 7 | "url": "http://chrisgarvis.com" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git@github.com:JumpLink/angular-toggle-switch.git" 12 | }, 13 | "license": "MIT", 14 | "keywords": [ 15 | "angular", 16 | "angularjs", 17 | "angular.js", 18 | "toggle", 19 | "switch", 20 | "toggle switch", 21 | "angular toggle", 22 | "angular switch", 23 | "bootstrap", 24 | "bootstrap switch", 25 | "bootstrap toggle switch" 26 | ], 27 | "main": "angular-toggle-switch.js", 28 | "homepage": "http://cgarvis.github.io/angular-toggle-switch", 29 | "devDependencies": { 30 | "bower": "~1.6.8", 31 | "grunt": "^0.4.4", 32 | "grunt-auto-release": "0.0.6", 33 | "grunt-bump": "0.6.0", 34 | "grunt-cli": "0.1.13", 35 | "grunt-contrib-jshint": "~0.11.3", 36 | "grunt-contrib-less": "^1.1.0", 37 | "grunt-contrib-uglify": "~0.11.0", 38 | "grunt-contrib-watch": "~0.6.1", 39 | "grunt-karma": "~0.12.1", 40 | "grunt-ng-annotate": "^1.0.1", 41 | "grunt-npm": "0.0.2", 42 | "jasmine-core": "^2.3.4", 43 | "karma-chrome-launcher": "^0.2.1", 44 | "karma-firefox-launcher": "^0.1.7", 45 | "karma-jasmine": "^0.3.6", 46 | "karma-script-launcher": "^0.1.0", 47 | "matchdep": "~1.0.0" 48 | }, 49 | "scripts": { 50 | "test": "grunt test -v" 51 | }, 52 | "contributors": [ 53 | "JumpLink ", 54 | "Martin Maestri ", 55 | "Pascal Garber ", 56 | "JumpLink ", 57 | "Pascal Garber ", 58 | "Pascal Garber ", 59 | "alexander rusanov ", 60 | "Philipp Wolfer ", 61 | "menny ", 62 | "Benjamin Squire ", 63 | "Fabio Rueda ", 64 | "Hypercubed ", 65 | "Marko ", 66 | "Salvatore Garbesi ", 67 | "Shinework ", 68 | "Taylor Brushwyler ", 69 | "Tom Vincent ", 70 | "alexndlm ", 71 | "Alemar Osorio " 72 | ] 73 | } 74 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JumpLink/angular-toggle-switch/77b1f1d8dfafef499fae4532017fa991a083b4cb/preview.png -------------------------------------------------------------------------------- /style/bootstrap2/angular-toggle-switch-bootstrap-2.css: -------------------------------------------------------------------------------- 1 | .ats-switch { 2 | border: 1px solid; 3 | cursor: pointer; 4 | display: inline-block; 5 | text-align: left; 6 | overflow: hidden; 7 | line-height: 8px; 8 | min-width: 100px; 9 | } 10 | .ats-switch.disabled { 11 | opacity: 0.5; 12 | filter: alpha(opacity=50); 13 | cursor: default !important; 14 | } 15 | .ats-switch.disabled .switch-left, 16 | .ats-switch.disabled .switch-right, 17 | .ats-switch.disabled .knob { 18 | cursor: default !important; 19 | } 20 | .ats-switch span { 21 | cursor: pointer; 22 | display: inline-block; 23 | float: left; 24 | height: 100%; 25 | line-height: 20px; 26 | padding: 4px; 27 | text-align: center; 28 | width: 33%; 29 | white-space: nowrap; 30 | box-sizing: border-box; 31 | -o-box-sizing: border-box; 32 | -moz-box-sizing: border-box; 33 | -webkit-box-sizing: border-box; 34 | } 35 | .ats-switch > div { 36 | position: relative; 37 | width: 150%; 38 | } 39 | .ats-switch .knob { 40 | background: red; 41 | border-left: 1px solid #ccc; 42 | border-right: 1px solid #ccc; 43 | background-color: #f5f5f5; 44 | width: 34%; 45 | z-index: 100; 46 | } 47 | .ats-switch .switch-on { 48 | left: 0%; 49 | } 50 | .ats-switch .switch-off { 51 | left: -50%; 52 | } 53 | .ats-switch .swtich-left, 54 | .ats-switch .switch-right { 55 | z-index: 1; 56 | } 57 | .ats-switch .switch-left { 58 | color: #fff; 59 | background: #005fcc; 60 | } 61 | .ats-switch .switch-right { 62 | color: #333; 63 | background: #f0f0f0; 64 | } 65 | .ats-switch .switch-animate { 66 | transition: left 0.5s; 67 | -o-transition: left 0.5s; 68 | -moz-transition: left 0.5s; 69 | -webkit-transition: left 0.5s; 70 | } 71 | .clearfix { 72 | *zoom: 1; 73 | } 74 | .clearfix:before, 75 | .clearfix:after { 76 | display: table; 77 | content: ""; 78 | line-height: 0; 79 | } 80 | .clearfix:after { 81 | clear: both; 82 | } 83 | .hide-text { 84 | font: 0/0 a; 85 | color: transparent; 86 | text-shadow: none; 87 | background-color: transparent; 88 | border: 0; 89 | } 90 | .input-block-level { 91 | display: block; 92 | width: 100%; 93 | min-height: 30px; 94 | -webkit-box-sizing: border-box; 95 | -moz-box-sizing: border-box; 96 | box-sizing: border-box; 97 | } 98 | .ats-switch { 99 | display: inline-block; 100 | cursor: pointer; 101 | -webkit-border-radius: 5px; 102 | -moz-border-radius: 5px; 103 | border-radius: 5px; 104 | border: 1px solid; 105 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 106 | position: relative; 107 | text-align: left; 108 | overflow: hidden; 109 | line-height: 8px; 110 | -webkit-user-select: none; 111 | -moz-user-select: none; 112 | -ms-user-select: none; 113 | -o-user-select: none; 114 | user-select: none; 115 | vertical-align: middle; 116 | min-width: 100px; 117 | -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 118 | -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 119 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 120 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 121 | } 122 | .ats-switch .knob { 123 | text-align: center; 124 | z-index: 100; 125 | width: 34%; 126 | border-left: 1px solid #ccc; 127 | border-right: 1px solid #ccc; 128 | color: #333; 129 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 130 | background-color: #f5f5f5; 131 | background-image: -moz-linear-gradient(top, #fff, #e6e6e6); 132 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6)); 133 | background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); 134 | background-image: -o-linear-gradient(top, #fff, #e6e6e6); 135 | background-image: linear-gradient(to bottom, #fff, #e6e6e6); 136 | background-repeat: repeat-x; 137 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); 138 | border-color: #e6e6e6 #e6e6e6 #bfbfbf; 139 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 140 | *background-color: #e6e6e6; 141 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 142 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 143 | } 144 | .ats-switch .knob:hover, 145 | .ats-switch .knob:focus, 146 | .ats-switch .knob:active, 147 | .ats-switch .knob.active, 148 | .ats-switch .knob.disabled, 149 | .ats-switch .knob[disabled] { 150 | color: #333; 151 | background-color: #e6e6e6; 152 | *background-color: #d9d9d9; 153 | } 154 | .ats-switch .knob:active, 155 | .ats-switch .knob.active { 156 | background-color: #cccccc \9; 157 | } 158 | .ats-switch span.switch-left { 159 | -webkit-border-top-left-radius: 4px; 160 | -moz-border-radius-topleft: 4px; 161 | border-top-left-radius: 4px; 162 | -webkit-border-bottom-left-radius: 4px; 163 | -moz-border-radius-bottomleft: 4px; 164 | border-bottom-left-radius: 4px; 165 | } 166 | .ats-switch span.switch-right { 167 | color: #333; 168 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 169 | background-color: #f0f0f0; 170 | background-image: -moz-linear-gradient(top, #e6e6e6, #fff); 171 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff)); 172 | background-image: -webkit-linear-gradient(top, #e6e6e6, #fff); 173 | background-image: -o-linear-gradient(top, #e6e6e6, #fff); 174 | background-image: linear-gradient(to bottom, #e6e6e6, #fff); 175 | background-repeat: repeat-x; 176 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); 177 | border-color: #fff #fff #d9d9d9; 178 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 179 | *background-color: #fff; 180 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 181 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 182 | } 183 | .ats-switch span.switch-right:hover, 184 | .ats-switch span.switch-right:focus, 185 | .ats-switch span.switch-right:active, 186 | .ats-switch span.switch-right.active, 187 | .ats-switch span.switch-right.disabled, 188 | .ats-switch span.switch-right[disabled] { 189 | color: #333; 190 | background-color: #fff; 191 | *background-color: #f2f2f2; 192 | } 193 | .ats-switch span.switch-right:active, 194 | .ats-switch span.switch-right.active { 195 | background-color: #e6e6e6 \9; 196 | } 197 | .ats-switch.switch-primary span.switch-left { 198 | color: #fff; 199 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 200 | background-color: #005fcc; 201 | background-image: -moz-linear-gradient(top, #0044cc, #08c); 202 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#08c)); 203 | background-image: -webkit-linear-gradient(top, #0044cc, #08c); 204 | background-image: -o-linear-gradient(top, #0044cc, #08c); 205 | background-image: linear-gradient(to bottom, #0044cc, #08c); 206 | background-repeat: repeat-x; 207 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0); 208 | border-color: #08c #08c #005580; 209 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 210 | *background-color: #08c; 211 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 212 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 213 | } 214 | .ats-switch.switch-primary span.switch-left:hover, 215 | .ats-switch.switch-primary span.switch-left:focus, 216 | .ats-switch.switch-primary span.switch-left:active, 217 | .ats-switch.switch-primary span.switch-left.active, 218 | .ats-switch.switch-primary span.switch-left.disabled, 219 | .ats-switch.switch-primary span.switch-left[disabled] { 220 | color: #fff; 221 | background-color: #08c; 222 | *background-color: #0077b3; 223 | } 224 | .ats-switch.switch-primary span.switch-left:active, 225 | .ats-switch.switch-primary span.switch-left.active { 226 | background-color: #006699 \9; 227 | } 228 | .ats-switch.switch-info span.switch-left { 229 | color: #fff; 230 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 231 | background-color: #41a7c5; 232 | background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de); 233 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de)); 234 | background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de); 235 | background-image: -o-linear-gradient(top, #2f96b4, #5bc0de); 236 | background-image: linear-gradient(to bottom, #2f96b4, #5bc0de); 237 | background-repeat: repeat-x; 238 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0); 239 | border-color: #5bc0de #5bc0de #28a1c5; 240 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 241 | *background-color: #5bc0de; 242 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 243 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 244 | } 245 | .ats-switch.switch-info span.switch-left:hover, 246 | .ats-switch.switch-info span.switch-left:focus, 247 | .ats-switch.switch-info span.switch-left:active, 248 | .ats-switch.switch-info span.switch-left.active, 249 | .ats-switch.switch-info span.switch-left.disabled, 250 | .ats-switch.switch-info span.switch-left[disabled] { 251 | color: #fff; 252 | background-color: #5bc0de; 253 | *background-color: #46b8da; 254 | } 255 | .ats-switch.switch-info span.switch-left:active, 256 | .ats-switch.switch-info span.switch-left.active { 257 | background-color: #31b0d5 \9; 258 | } 259 | .ats-switch.switch-success span.switch-left { 260 | color: #fff; 261 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 262 | background-color: #58b058; 263 | background-image: -moz-linear-gradient(top, #51a351, #62c462); 264 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462)); 265 | background-image: -webkit-linear-gradient(top, #51a351, #62c462); 266 | background-image: -o-linear-gradient(top, #51a351, #62c462); 267 | background-image: linear-gradient(to bottom, #51a351, #62c462); 268 | background-repeat: repeat-x; 269 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0); 270 | border-color: #62c462 #62c462 #3b9e3b; 271 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 272 | *background-color: #62c462; 273 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 274 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 275 | } 276 | .ats-switch.switch-success span.switch-left:hover, 277 | .ats-switch.switch-success span.switch-left:focus, 278 | .ats-switch.switch-success span.switch-left:active, 279 | .ats-switch.switch-success span.switch-left.active, 280 | .ats-switch.switch-success span.switch-left.disabled, 281 | .ats-switch.switch-success span.switch-left[disabled] { 282 | color: #fff; 283 | background-color: #62c462; 284 | *background-color: #4fbd4f; 285 | } 286 | .ats-switch.switch-success span.switch-left:active, 287 | .ats-switch.switch-success span.switch-left.active { 288 | background-color: #42b142 \9; 289 | } 290 | .ats-switch.switch-warning span.switch-left { 291 | color: #fff; 292 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 293 | background-color: #f9a123; 294 | background-image: -moz-linear-gradient(top, #f89406, #fbb450); 295 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450)); 296 | background-image: -webkit-linear-gradient(top, #f89406, #fbb450); 297 | background-image: -o-linear-gradient(top, #f89406, #fbb450); 298 | background-image: linear-gradient(to bottom, #f89406, #fbb450); 299 | background-repeat: repeat-x; 300 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0); 301 | border-color: #fbb450 #fbb450 #f89406; 302 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 303 | *background-color: #fbb450; 304 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 305 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 306 | } 307 | .ats-switch.switch-warning span.switch-left:hover, 308 | .ats-switch.switch-warning span.switch-left:focus, 309 | .ats-switch.switch-warning span.switch-left:active, 310 | .ats-switch.switch-warning span.switch-left.active, 311 | .ats-switch.switch-warning span.switch-left.disabled, 312 | .ats-switch.switch-warning span.switch-left[disabled] { 313 | color: #fff; 314 | background-color: #fbb450; 315 | *background-color: #faa937; 316 | } 317 | .ats-switch.switch-warning span.switch-left:active, 318 | .ats-switch.switch-warning span.switch-left.active { 319 | background-color: #fa9f1e \9; 320 | } 321 | .ats-switch.switch-danger span.switch-left { 322 | color: #fff; 323 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 324 | background-color: #d14641; 325 | background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b); 326 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b)); 327 | background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b); 328 | background-image: -o-linear-gradient(top, #bd362f, #ee5f5b); 329 | background-image: linear-gradient(to bottom, #bd362f, #ee5f5b); 330 | background-repeat: repeat-x; 331 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0); 332 | border-color: #ee5f5b #ee5f5b #e51d18; 333 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 334 | *background-color: #ee5f5b; 335 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 336 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 337 | } 338 | .ats-switch.switch-danger span.switch-left:hover, 339 | .ats-switch.switch-danger span.switch-left:focus, 340 | .ats-switch.switch-danger span.switch-left:active, 341 | .ats-switch.switch-danger span.switch-left.active, 342 | .ats-switch.switch-danger span.switch-left.disabled, 343 | .ats-switch.switch-danger span.switch-left[disabled] { 344 | color: #fff; 345 | background-color: #ee5f5b; 346 | *background-color: #ec4844; 347 | } 348 | .ats-switch.switch-danger span.switch-left:active, 349 | .ats-switch.switch-danger span.switch-left.active { 350 | background-color: #e9322d \9; 351 | } 352 | .ats-switch.switch-default span.switch-left { 353 | color: #333; 354 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 355 | background-color: #f0f0f0; 356 | background-image: -moz-linear-gradient(top, #e6e6e6, #fff); 357 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff)); 358 | background-image: -webkit-linear-gradient(top, #e6e6e6, #fff); 359 | background-image: -o-linear-gradient(top, #e6e6e6, #fff); 360 | background-image: linear-gradient(to bottom, #e6e6e6, #fff); 361 | background-repeat: repeat-x; 362 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); 363 | border-color: #fff #fff #d9d9d9; 364 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 365 | *background-color: #fff; 366 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 367 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 368 | } 369 | .ats-switch.switch-default span.switch-left:hover, 370 | .ats-switch.switch-default span.switch-left:focus, 371 | .ats-switch.switch-default span.switch-left:active, 372 | .ats-switch.switch-default span.switch-left.active, 373 | .ats-switch.switch-default span.switch-left.disabled, 374 | .ats-switch.switch-default span.switch-left[disabled] { 375 | color: #333; 376 | background-color: #fff; 377 | *background-color: #f2f2f2; 378 | } 379 | .ats-switch.switch-default span.switch-left:active, 380 | .ats-switch.switch-default span.switch-left.active { 381 | background-color: #e6e6e6 \9; 382 | } 383 | -------------------------------------------------------------------------------- /style/bootstrap2/angular-toggle-switch-bootstrap-2.less: -------------------------------------------------------------------------------- 1 | @import "../default/angular-toggle-switch.less"; 2 | @import "./variables.less"; 3 | @import "./mixins.less"; 4 | @import "./toggle-switch.less"; -------------------------------------------------------------------------------- /style/bootstrap2/mixins.less: -------------------------------------------------------------------------------- 1 | // 2 | // Mixins 3 | // -------------------------------------------------- 4 | 5 | 6 | // UTILITY MIXINS 7 | // -------------------------------------------------- 8 | 9 | // Clearfix 10 | // -------- 11 | // For clearing floats like a boss h5bp.com/q 12 | .clearfix { 13 | *zoom: 1; 14 | &:before, 15 | &:after { 16 | display: table; 17 | content: ""; 18 | // Fixes Opera/contenteditable bug: 19 | // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 20 | line-height: 0; 21 | } 22 | &:after { 23 | clear: both; 24 | } 25 | } 26 | 27 | // Webkit-style focus 28 | // ------------------ 29 | .tab-focus() { 30 | // Default 31 | outline: thin dotted #333; 32 | // Webkit 33 | outline: 5px auto -webkit-focus-ring-color; 34 | outline-offset: -2px; 35 | } 36 | 37 | // Center-align a block level element 38 | // ---------------------------------- 39 | .center-block() { 40 | display: block; 41 | margin-left: auto; 42 | margin-right: auto; 43 | } 44 | 45 | // IE7 inline-block 46 | // ---------------- 47 | .ie7-inline-block() { 48 | *display: inline; /* IE7 inline-block hack */ 49 | *zoom: 1; 50 | } 51 | 52 | // IE7 likes to collapse whitespace on either side of the inline-block elements. 53 | // Ems because we're attempting to match the width of a space character. Left 54 | // version is for form buttons, which typically come after other elements, and 55 | // right version is for icons, which come before. Applying both is ok, but it will 56 | // mean that space between those elements will be .6em (~2 space characters) in IE7, 57 | // instead of the 1 space in other browsers. 58 | .ie7-restore-left-whitespace() { 59 | *margin-left: .3em; 60 | 61 | &:first-child { 62 | *margin-left: 0; 63 | } 64 | } 65 | 66 | .ie7-restore-right-whitespace() { 67 | *margin-right: .3em; 68 | } 69 | 70 | // Sizing shortcuts 71 | // ------------------------- 72 | .size(@height, @width) { 73 | width: @width; 74 | height: @height; 75 | } 76 | .square(@size) { 77 | .size(@size, @size); 78 | } 79 | 80 | // Placeholder text 81 | // ------------------------- 82 | .placeholder(@color: @placeholderText) { 83 | &:-moz-placeholder { 84 | color: @color; 85 | } 86 | &:-ms-input-placeholder { 87 | color: @color; 88 | } 89 | &::-webkit-input-placeholder { 90 | color: @color; 91 | } 92 | } 93 | 94 | // Text overflow 95 | // ------------------------- 96 | // Requires inline-block or block for proper styling 97 | .text-overflow() { 98 | overflow: hidden; 99 | text-overflow: ellipsis; 100 | white-space: nowrap; 101 | } 102 | 103 | // CSS image replacement 104 | // ------------------------- 105 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 106 | .hide-text { 107 | font: 0/0 a; 108 | color: transparent; 109 | text-shadow: none; 110 | background-color: transparent; 111 | border: 0; 112 | } 113 | 114 | 115 | // FONTS 116 | // -------------------------------------------------- 117 | 118 | #font { 119 | #family { 120 | .serif() { 121 | font-family: @serifFontFamily; 122 | } 123 | .sans-serif() { 124 | font-family: @sansFontFamily; 125 | } 126 | .monospace() { 127 | font-family: @monoFontFamily; 128 | } 129 | } 130 | .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 131 | font-size: @size; 132 | font-weight: @weight; 133 | line-height: @lineHeight; 134 | } 135 | .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 136 | #font > #family > .serif; 137 | #font > .shorthand(@size, @weight, @lineHeight); 138 | } 139 | .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 140 | #font > #family > .sans-serif; 141 | #font > .shorthand(@size, @weight, @lineHeight); 142 | } 143 | .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 144 | #font > #family > .monospace; 145 | #font > .shorthand(@size, @weight, @lineHeight); 146 | } 147 | } 148 | 149 | 150 | // FORMS 151 | // -------------------------------------------------- 152 | 153 | // Block level inputs 154 | .input-block-level { 155 | display: block; 156 | width: 100%; 157 | min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) 158 | .box-sizing(border-box); // Makes inputs behave like true block-level elements 159 | } 160 | 161 | 162 | 163 | // Mixin for form field states 164 | .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { 165 | // Set the text color 166 | .control-label, 167 | .help-block, 168 | .help-inline { 169 | color: @textColor; 170 | } 171 | // Style inputs accordingly 172 | .checkbox, 173 | .radio, 174 | input, 175 | select, 176 | textarea { 177 | color: @textColor; 178 | } 179 | input, 180 | select, 181 | textarea { 182 | border-color: @borderColor; 183 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 184 | &:focus { 185 | border-color: darken(@borderColor, 10%); 186 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); 187 | .box-shadow(@shadow); 188 | } 189 | } 190 | // Give a small background color for input-prepend/-append 191 | .input-prepend .add-on, 192 | .input-append .add-on { 193 | color: @textColor; 194 | background-color: @backgroundColor; 195 | border-color: @textColor; 196 | } 197 | } 198 | 199 | 200 | 201 | // CSS3 PROPERTIES 202 | // -------------------------------------------------- 203 | 204 | // Border Radius 205 | .border-radius(@radius) { 206 | -webkit-border-radius: @radius; 207 | -moz-border-radius: @radius; 208 | border-radius: @radius; 209 | } 210 | 211 | // Single Corner Border Radius 212 | .border-top-left-radius(@radius) { 213 | -webkit-border-top-left-radius: @radius; 214 | -moz-border-radius-topleft: @radius; 215 | border-top-left-radius: @radius; 216 | } 217 | .border-top-right-radius(@radius) { 218 | -webkit-border-top-right-radius: @radius; 219 | -moz-border-radius-topright: @radius; 220 | border-top-right-radius: @radius; 221 | } 222 | .border-bottom-right-radius(@radius) { 223 | -webkit-border-bottom-right-radius: @radius; 224 | -moz-border-radius-bottomright: @radius; 225 | border-bottom-right-radius: @radius; 226 | } 227 | .border-bottom-left-radius(@radius) { 228 | -webkit-border-bottom-left-radius: @radius; 229 | -moz-border-radius-bottomleft: @radius; 230 | border-bottom-left-radius: @radius; 231 | } 232 | 233 | // Single Side Border Radius 234 | .border-top-radius(@radius) { 235 | .border-top-right-radius(@radius); 236 | .border-top-left-radius(@radius); 237 | } 238 | .border-right-radius(@radius) { 239 | .border-top-right-radius(@radius); 240 | .border-bottom-right-radius(@radius); 241 | } 242 | .border-bottom-radius(@radius) { 243 | .border-bottom-right-radius(@radius); 244 | .border-bottom-left-radius(@radius); 245 | } 246 | .border-left-radius(@radius) { 247 | .border-top-left-radius(@radius); 248 | .border-bottom-left-radius(@radius); 249 | } 250 | 251 | // Drop shadows 252 | .box-shadow(@shadow) { 253 | -webkit-box-shadow: @shadow; 254 | -moz-box-shadow: @shadow; 255 | box-shadow: @shadow; 256 | } 257 | 258 | // Transitions 259 | .transition(@transition) { 260 | -webkit-transition: @transition; 261 | -moz-transition: @transition; 262 | -o-transition: @transition; 263 | transition: @transition; 264 | } 265 | .transition-delay(@transition-delay) { 266 | -webkit-transition-delay: @transition-delay; 267 | -moz-transition-delay: @transition-delay; 268 | -o-transition-delay: @transition-delay; 269 | transition-delay: @transition-delay; 270 | } 271 | .transition-duration(@transition-duration) { 272 | -webkit-transition-duration: @transition-duration; 273 | -moz-transition-duration: @transition-duration; 274 | -o-transition-duration: @transition-duration; 275 | transition-duration: @transition-duration; 276 | } 277 | 278 | // Transformations 279 | .rotate(@degrees) { 280 | -webkit-transform: rotate(@degrees); 281 | -moz-transform: rotate(@degrees); 282 | -ms-transform: rotate(@degrees); 283 | -o-transform: rotate(@degrees); 284 | transform: rotate(@degrees); 285 | } 286 | .scale(@ratio) { 287 | -webkit-transform: scale(@ratio); 288 | -moz-transform: scale(@ratio); 289 | -ms-transform: scale(@ratio); 290 | -o-transform: scale(@ratio); 291 | transform: scale(@ratio); 292 | } 293 | .translate(@x, @y) { 294 | -webkit-transform: translate(@x, @y); 295 | -moz-transform: translate(@x, @y); 296 | -ms-transform: translate(@x, @y); 297 | -o-transform: translate(@x, @y); 298 | transform: translate(@x, @y); 299 | } 300 | .skew(@x, @y) { 301 | -webkit-transform: skew(@x, @y); 302 | -moz-transform: skew(@x, @y); 303 | -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885 304 | -o-transform: skew(@x, @y); 305 | transform: skew(@x, @y); 306 | -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 307 | } 308 | .translate3d(@x, @y, @z) { 309 | -webkit-transform: translate3d(@x, @y, @z); 310 | -moz-transform: translate3d(@x, @y, @z); 311 | -o-transform: translate3d(@x, @y, @z); 312 | transform: translate3d(@x, @y, @z); 313 | } 314 | 315 | // Backface visibility 316 | // Prevent browsers from flickering when using CSS 3D transforms. 317 | // Default value is `visible`, but can be changed to `hidden 318 | // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples 319 | .backface-visibility(@visibility){ 320 | -webkit-backface-visibility: @visibility; 321 | -moz-backface-visibility: @visibility; 322 | backface-visibility: @visibility; 323 | } 324 | 325 | // Background clipping 326 | // Heads up: FF 3.6 and under need "padding" instead of "padding-box" 327 | .background-clip(@clip) { 328 | -webkit-background-clip: @clip; 329 | -moz-background-clip: @clip; 330 | background-clip: @clip; 331 | } 332 | 333 | // Background sizing 334 | .background-size(@size) { 335 | -webkit-background-size: @size; 336 | -moz-background-size: @size; 337 | -o-background-size: @size; 338 | background-size: @size; 339 | } 340 | 341 | 342 | // Box sizing 343 | .box-sizing(@boxmodel) { 344 | -webkit-box-sizing: @boxmodel; 345 | -moz-box-sizing: @boxmodel; 346 | box-sizing: @boxmodel; 347 | } 348 | 349 | // User select 350 | // For selecting text on the page 351 | .user-select(@select) { 352 | -webkit-user-select: @select; 353 | -moz-user-select: @select; 354 | -ms-user-select: @select; 355 | -o-user-select: @select; 356 | user-select: @select; 357 | } 358 | 359 | // Resize anything 360 | .resizable(@direction) { 361 | resize: @direction; // Options: horizontal, vertical, both 362 | overflow: auto; // Safari fix 363 | } 364 | 365 | // CSS3 Content Columns 366 | .content-columns(@columnCount, @columnGap: @gridGutterWidth) { 367 | -webkit-column-count: @columnCount; 368 | -moz-column-count: @columnCount; 369 | column-count: @columnCount; 370 | -webkit-column-gap: @columnGap; 371 | -moz-column-gap: @columnGap; 372 | column-gap: @columnGap; 373 | } 374 | 375 | // Optional hyphenation 376 | .hyphens(@mode: auto) { 377 | word-wrap: break-word; 378 | -webkit-hyphens: @mode; 379 | -moz-hyphens: @mode; 380 | -ms-hyphens: @mode; 381 | -o-hyphens: @mode; 382 | hyphens: @mode; 383 | } 384 | 385 | // Opacity 386 | .opacity(@opacity) { 387 | opacity: @opacity / 100; 388 | filter: ~"alpha(opacity=@{opacity})"; 389 | } 390 | 391 | 392 | 393 | // BACKGROUNDS 394 | // -------------------------------------------------- 395 | 396 | // Add an alphatransparency value to any background or border color (via Elyse Holladay) 397 | #translucent { 398 | .background(@color: @white, @alpha: 1) { 399 | background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 400 | } 401 | .border(@color: @white, @alpha: 1) { 402 | border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 403 | .background-clip(padding-box); 404 | } 405 | } 406 | 407 | // Gradient Bar Colors for buttons and alerts 408 | .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { 409 | color: @textColor; 410 | text-shadow: @textShadow; 411 | #gradient > .vertical(@primaryColor, @secondaryColor); 412 | border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); 413 | border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); 414 | } 415 | 416 | // Gradients 417 | #gradient { 418 | .horizontal(@startColor: #555, @endColor: #333) { 419 | background-color: @endColor; 420 | background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ 421 | background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 422 | background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 423 | background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 424 | background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 425 | background-repeat: repeat-x; 426 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down 427 | } 428 | .vertical(@startColor: #555, @endColor: #333) { 429 | background-color: mix(@startColor, @endColor, 60%); 430 | background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ 431 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 432 | background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 433 | background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 434 | background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 435 | background-repeat: repeat-x; 436 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down 437 | } 438 | .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { 439 | background-color: @endColor; 440 | background-repeat: repeat-x; 441 | background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ 442 | background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 443 | background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 444 | background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 445 | } 446 | .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 447 | background-color: mix(@midColor, @endColor, 80%); 448 | background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 449 | background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); 450 | background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); 451 | background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); 452 | background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); 453 | background-repeat: no-repeat; 454 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback 455 | } 456 | 457 | .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 458 | background-color: mix(@midColor, @endColor, 80%); 459 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 460 | background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); 461 | background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); 462 | background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); 463 | background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); 464 | background-repeat: no-repeat; 465 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback 466 | } 467 | .radial(@innerColor: #555, @outerColor: #333) { 468 | background-color: @outerColor; 469 | background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); 470 | background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); 471 | background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); 472 | background-image: -o-radial-gradient(circle, @innerColor, @outerColor); 473 | background-repeat: no-repeat; 474 | } 475 | .striped(@color: #555, @angle: 45deg) { 476 | background-color: @color; 477 | background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); 478 | background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 479 | background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 480 | background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 481 | background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 482 | } 483 | } 484 | // Reset filters for IE 485 | .reset-filter() { 486 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); 487 | } 488 | 489 | 490 | 491 | // COMPONENT MIXINS 492 | // -------------------------------------------------- 493 | 494 | // Horizontal dividers 495 | // ------------------------- 496 | // Dividers (basically an hr) within dropdowns and nav lists 497 | .nav-divider(@top: #e5e5e5, @bottom: @white) { 498 | // IE7 needs a set width since we gave a height. Restricting just 499 | // to IE7 to keep the 1px left/right space in other browsers. 500 | // It is unclear where IE is getting the extra space that we need 501 | // to negative-margin away, but so it goes. 502 | *width: 100%; 503 | height: 1px; 504 | margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px 505 | *margin: -5px 0 5px; 506 | overflow: hidden; 507 | background-color: @top; 508 | border-bottom: 1px solid @bottom; 509 | } 510 | 511 | // Button backgrounds 512 | // ------------------ 513 | .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { 514 | // gradientBar will set the background to a pleasing blend of these, to support IE<=9 515 | .gradientBar(@startColor, @endColor, @textColor, @textShadow); 516 | *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 517 | .reset-filter(); 518 | 519 | // in these cases the gradient won't cover the background, so we override 520 | &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { 521 | color: @textColor; 522 | background-color: @endColor; 523 | *background-color: darken(@endColor, 5%); 524 | } 525 | 526 | // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves 527 | &:active, 528 | &.active { 529 | background-color: darken(@endColor, 10%) e("\9"); 530 | } 531 | } 532 | 533 | // Navbar vertical align 534 | // ------------------------- 535 | // Vertically center elements in the navbar. 536 | // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. 537 | .navbarVerticalAlign(@elementHeight) { 538 | margin-top: (@navbarHeight - @elementHeight) / 2; 539 | } 540 | 541 | 542 | 543 | // Grid System 544 | // ----------- 545 | 546 | // Centered container element 547 | .container-fixed() { 548 | margin-right: auto; 549 | margin-left: auto; 550 | .clearfix(); 551 | } 552 | 553 | // Table columns 554 | .tableColumns(@columnSpan: 1) { 555 | float: none; // undo default grid column styles 556 | width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells 557 | margin-left: 0; // undo default grid column styles 558 | } 559 | 560 | // Make a Grid 561 | // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior 562 | .makeRow() { 563 | margin-left: @gridGutterWidth * -1; 564 | .clearfix(); 565 | } 566 | .makeColumn(@columns: 1, @offset: 0) { 567 | float: left; 568 | margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); 569 | width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 570 | } 571 | 572 | // The Grid 573 | #grid { 574 | 575 | .core (@gridColumnWidth, @gridGutterWidth) { 576 | 577 | .spanX (@index) when (@index > 0) { 578 | .span@{index} { .span(@index); } 579 | .spanX(@index - 1); 580 | } 581 | .spanX (0) {} 582 | 583 | .offsetX (@index) when (@index > 0) { 584 | .offset@{index} { .offset(@index); } 585 | .offsetX(@index - 1); 586 | } 587 | .offsetX (0) {} 588 | 589 | .offset (@columns) { 590 | margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); 591 | } 592 | 593 | .span (@columns) { 594 | width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 595 | } 596 | 597 | .row { 598 | margin-left: @gridGutterWidth * -1; 599 | .clearfix(); 600 | } 601 | 602 | [class*="span"] { 603 | float: left; 604 | min-height: 1px; // prevent collapsing columns 605 | margin-left: @gridGutterWidth; 606 | } 607 | 608 | // Set the container width, and override it for fixed navbars in media queries 609 | .container, 610 | .navbar-static-top .container, 611 | .navbar-fixed-top .container, 612 | .navbar-fixed-bottom .container { .span(@gridColumns); } 613 | 614 | // generate .spanX and .offsetX 615 | .spanX (@gridColumns); 616 | .offsetX (@gridColumns); 617 | 618 | } 619 | 620 | .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { 621 | 622 | .spanX (@index) when (@index > 0) { 623 | .span@{index} { .span(@index); } 624 | .spanX(@index - 1); 625 | } 626 | .spanX (0) {} 627 | 628 | .offsetX (@index) when (@index > 0) { 629 | .offset@{index} { .offset(@index); } 630 | .offset@{index}:first-child { .offsetFirstChild(@index); } 631 | .offsetX(@index - 1); 632 | } 633 | .offsetX (0) {} 634 | 635 | .offset (@columns) { 636 | margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); 637 | *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); 638 | } 639 | 640 | .offsetFirstChild (@columns) { 641 | margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); 642 | *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); 643 | } 644 | 645 | .span (@columns) { 646 | width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); 647 | *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); 648 | } 649 | 650 | .row-fluid { 651 | width: 100%; 652 | .clearfix(); 653 | [class*="span"] { 654 | .input-block-level(); 655 | float: left; 656 | margin-left: @fluidGridGutterWidth; 657 | *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); 658 | } 659 | [class*="span"]:first-child { 660 | margin-left: 0; 661 | } 662 | 663 | // Space grid-sized controls properly if multiple per line 664 | .controls-row [class*="span"] + [class*="span"] { 665 | margin-left: @fluidGridGutterWidth; 666 | } 667 | 668 | // generate .spanX and .offsetX 669 | .spanX (@gridColumns); 670 | .offsetX (@gridColumns); 671 | } 672 | 673 | } 674 | 675 | .input(@gridColumnWidth, @gridGutterWidth) { 676 | 677 | .spanX (@index) when (@index > 0) { 678 | input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); } 679 | .spanX(@index - 1); 680 | } 681 | .spanX (0) {} 682 | 683 | .span(@columns) { 684 | width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; 685 | } 686 | 687 | input, 688 | textarea, 689 | .uneditable-input { 690 | margin-left: 0; // override margin-left from core grid system 691 | } 692 | 693 | // Space grid-sized controls properly if multiple per line 694 | .controls-row [class*="span"] + [class*="span"] { 695 | margin-left: @gridGutterWidth; 696 | } 697 | 698 | // generate .spanX 699 | .spanX (@gridColumns); 700 | 701 | } 702 | } -------------------------------------------------------------------------------- /style/bootstrap2/toggle-switch.less: -------------------------------------------------------------------------------- 1 | .ats-switch { 2 | display: inline-block; 3 | cursor: pointer; 4 | .border-radius(5px); 5 | border: 1px solid; 6 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 7 | position: relative; 8 | text-align: left; 9 | overflow: hidden; 10 | line-height: 8px; 11 | .user-select(none); 12 | vertical-align: middle; 13 | min-width: 100px; 14 | .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); 15 | 16 | .knob { 17 | text-align: center; 18 | z-index: 100; 19 | width: 34%; 20 | border-left: 1px solid @btnBorder; 21 | border-right: 1px solid @btnBorder; 22 | .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark); 23 | } 24 | 25 | span { 26 | &.switch-left { 27 | .border-left-radius(4px); 28 | } 29 | 30 | &.switch-right { 31 | .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75)); 32 | } 33 | } 34 | 35 | &.switch-primary { 36 | span { 37 | &.switch-left { 38 | .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground); 39 | } 40 | } 41 | 42 | } 43 | 44 | &.switch-info { 45 | span { 46 | &.switch-left { 47 | .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground); 48 | } 49 | } 50 | } 51 | 52 | &.switch-success { 53 | span { 54 | &.switch-left { 55 | .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground); 56 | } 57 | } 58 | } 59 | 60 | &.switch-warning { 61 | span { 62 | &.switch-left { 63 | .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground); 64 | } 65 | } 66 | } 67 | 68 | &.switch-danger { 69 | span { 70 | &.switch-left { 71 | .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground); 72 | } 73 | } 74 | } 75 | 76 | &.switch-default { 77 | span { 78 | &.switch-left { 79 | .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75)); 80 | } 81 | } 82 | } 83 | 84 | } -------------------------------------------------------------------------------- /style/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); -------------------------------------------------------------------------------- /style/bootstrap3/angular-toggle-switch-bootstrap-3.css: -------------------------------------------------------------------------------- 1 | .ats-switch { 2 | border: 1px solid; 3 | cursor: pointer; 4 | display: inline-block; 5 | text-align: left; 6 | overflow: hidden; 7 | line-height: 8px; 8 | min-width: 100px; 9 | } 10 | .ats-switch.disabled { 11 | opacity: 0.5; 12 | filter: alpha(opacity=50); 13 | cursor: default !important; 14 | } 15 | .ats-switch.disabled .switch-left, 16 | .ats-switch.disabled .switch-right, 17 | .ats-switch.disabled .knob { 18 | cursor: default !important; 19 | } 20 | .ats-switch span { 21 | cursor: pointer; 22 | display: inline-block; 23 | float: left; 24 | height: 100%; 25 | line-height: 20px; 26 | padding: 4px; 27 | text-align: center; 28 | width: 33%; 29 | white-space: nowrap; 30 | box-sizing: border-box; 31 | -o-box-sizing: border-box; 32 | -moz-box-sizing: border-box; 33 | -webkit-box-sizing: border-box; 34 | } 35 | .ats-switch > div { 36 | position: relative; 37 | width: 150%; 38 | } 39 | .ats-switch .knob { 40 | background: red; 41 | border-left: 1px solid #ccc; 42 | border-right: 1px solid #ccc; 43 | background-color: #f5f5f5; 44 | width: 34%; 45 | z-index: 100; 46 | } 47 | .ats-switch .switch-on { 48 | left: 0%; 49 | } 50 | .ats-switch .switch-off { 51 | left: -50%; 52 | } 53 | .ats-switch .swtich-left, 54 | .ats-switch .switch-right { 55 | z-index: 1; 56 | } 57 | .ats-switch .switch-left { 58 | color: #fff; 59 | background: #005fcc; 60 | } 61 | .ats-switch .switch-right { 62 | color: #333; 63 | background: #f0f0f0; 64 | } 65 | .ats-switch .switch-animate { 66 | transition: left 0.5s; 67 | -o-transition: left 0.5s; 68 | -moz-transition: left 0.5s; 69 | -webkit-transition: left 0.5s; 70 | } 71 | .ats-switch { 72 | display: inline-block; 73 | cursor: pointer; 74 | border-radius: 4px; 75 | border: 1px solid; 76 | border-color: #ccc; 77 | position: relative; 78 | text-align: left; 79 | overflow: hidden; 80 | line-height: 8px; 81 | -webkit-user-select: none; 82 | -moz-user-select: none; 83 | -ms-user-select: none; 84 | -o-user-select: none; 85 | user-select: none; 86 | vertical-align: middle; 87 | min-width: 100px; 88 | -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 89 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 90 | } 91 | .ats-switch:hover { 92 | border-color: #66afe9; 93 | outline: 0; 94 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 95 | box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 96 | } 97 | .ats-switch.disabled:hover { 98 | border-color: #ccc; 99 | -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); 100 | box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); 101 | } 102 | .ats-switch .knob { 103 | border-right: none; 104 | border-left: none; 105 | text-align: center; 106 | margin-top: -1px; 107 | margin-bottom: -1px; 108 | z-index: 100; 109 | background: #fff; 110 | } 111 | .ats-switch .knob i { 112 | color: #000; 113 | text-shadow: 0 1px 0 #fff; 114 | line-height: 18px; 115 | pointer-events: none; 116 | } 117 | .ats-switch .switch-left, 118 | .ats-switch .switch-right, 119 | .ats-switch .knob { 120 | min-height: 28px; 121 | } 122 | .ats-switch.switch-mini { 123 | min-width: 72px; 124 | } 125 | .ats-switch.switch-mini .switch-left, 126 | .ats-switch.switch-mini .switch-right, 127 | .ats-switch.switch-mini .knob { 128 | padding-bottom: 4px; 129 | padding-top: 4px; 130 | font-size: 10px; 131 | line-height: 9px; 132 | min-height: 18px; 133 | } 134 | .ats-switch.switch-mini i.switch-mini-icons { 135 | height: 1.20em; 136 | line-height: 9px; 137 | vertical-align: text-top; 138 | text-align: center; 139 | transform: scale(0.6); 140 | margin-top: -1px; 141 | margin-bottom: -1px; 142 | } 143 | .ats-switch.switch-small { 144 | min-width: 80px; 145 | } 146 | .ats-switch.switch-small .switch-left, 147 | .ats-switch.switch-small .switch-right, 148 | .ats-switch.switch-small .knob { 149 | padding-bottom: 3px; 150 | padding-top: 3px; 151 | font-size: 12px; 152 | line-height: 18px; 153 | min-height: 24px; 154 | } 155 | .ats-switch.switch-large { 156 | min-width: 120px; 157 | } 158 | .ats-switch.switch-large .switch-left, 159 | .ats-switch.switch-large .switch-right, 160 | .ats-switch.switch-large .knob { 161 | padding-bottom: 9px; 162 | padding-top: 9px; 163 | font-size: 16px; 164 | line-height: normal; 165 | min-height: 34px; 166 | } 167 | .ats-switch span.switch-left { 168 | color: #fff; 169 | background: #428bca; 170 | } 171 | .ats-switch span.switch-right { 172 | color: #000; 173 | background: #eeeeee; 174 | } 175 | .ats-switch.switch-primary span.switch-left { 176 | color: #fff; 177 | background: #428bca; 178 | } 179 | .ats-switch.switch-info span.switch-left { 180 | color: #fff; 181 | background: #5bc0de; 182 | } 183 | .ats-switch.switch-success span.switch-left { 184 | color: #fff; 185 | background: #5cb85c; 186 | } 187 | .ats-switch.switch-warning span.switch-left { 188 | background: #f0ad4e; 189 | color: #fff; 190 | } 191 | .ats-switch.switch-danger span.switch-left { 192 | color: #fff; 193 | background: #d9534f; 194 | } 195 | .ats-switch.switch-default span.switch-left { 196 | color: #000; 197 | background: #eeeeee; 198 | } 199 | -------------------------------------------------------------------------------- /style/bootstrap3/angular-toggle-switch-bootstrap-3.less: -------------------------------------------------------------------------------- 1 | // out: angular-toggle-switch-bootstrap-3.css 2 | 3 | @import "../default/angular-toggle-switch.less"; 4 | @import "./variables.less"; 5 | @import "./mixins.less"; 6 | @import "./toggle-switch.less"; 7 | -------------------------------------------------------------------------------- /style/bootstrap3/angular-toggle-switch-bootstrap-3.scss: -------------------------------------------------------------------------------- 1 | .ats-switch { 2 | border: 1px solid; 3 | cursor:pointer; 4 | display:inline-block; 5 | text-align:left; 6 | overflow:hidden; 7 | line-height: 8px; 8 | min-width: 100px; 9 | 10 | } 11 | .ats-switch.disabled { 12 | opacity: 0.5; 13 | filter: alpha(opacity=50); 14 | cursor: default !important; 15 | 16 | } 17 | .ats-switch.disabled .switch-left, 18 | .ats-switch.disabled .switch-right, 19 | .ats-switch.disabled .knob { 20 | cursor: default !important; 21 | 22 | } 23 | .ats-switch span { 24 | cursor:pointer; 25 | display:inline-block; 26 | float:left; 27 | height: 100%; 28 | line-height: 20px; 29 | padding: 4px; 30 | text-align:center; 31 | width: 33%; 32 | white-space:nowrap; 33 | box-sizing:border-box; 34 | -o-box-sizing:border-box; 35 | -moz-box-sizing:border-box; 36 | -webkit-box-sizing:border-box; 37 | 38 | } 39 | .ats-switch > div { 40 | position:relative; 41 | width: 150%; 42 | 43 | } 44 | .ats-switch .knob { 45 | background:red; 46 | border-left: 1px solid #ccc; 47 | border-right: 1px solid #ccc; 48 | background-color: #f5f5f5; 49 | width: 34%; 50 | z-index: 100; 51 | 52 | } 53 | .ats-switch .switch-on { 54 | left: 0%; 55 | 56 | } 57 | .ats-switch .switch-off { 58 | left: -50%; 59 | 60 | } 61 | .ats-switch .swtich-left, 62 | .ats-switch .switch-right { 63 | z-index: 1; 64 | 65 | } 66 | .ats-switch .switch-left { 67 | color: #fff; 68 | background: #005fcc; 69 | 70 | } 71 | .ats-switch .switch-right { 72 | color: #333; 73 | background: #f0f0f0; 74 | 75 | } 76 | .ats-switch .switch-animate { 77 | transition:left 0.5s; 78 | -o-transition:left 0.5s; 79 | -moz-transition:left 0.5s; 80 | -webkit-transition:left 0.5s; 81 | 82 | } 83 | .ats-switch { 84 | display:inline-block; 85 | cursor:pointer; 86 | border-radius: 4px; 87 | border: 1px solid; 88 | border-color: #cccccc; 89 | position:relative; 90 | text-align:left; 91 | overflow:hidden; 92 | line-height: 8px; 93 | -webkit-user-select:none; 94 | -moz-user-select:none; 95 | -ms-user-select:none; 96 | -o-user-select:none; 97 | user-select:none; 98 | vertical-align:middle; 99 | min-width: 100px; 100 | -webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; 101 | transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; 102 | 103 | } 104 | .ats-switch:hover { 105 | border-color: #66afe9; 106 | outline: 0; 107 | -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6); 108 | box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6); 109 | 110 | } 111 | .ats-switch.disabled:hover { 112 | border-color: #cccccc; 113 | -webkit-box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); 114 | box-shadow:inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); 115 | 116 | } 117 | .ats-switch .knob { 118 | border-right:none; 119 | border-left:none; 120 | text-align:center; 121 | margin-top: -1px; 122 | margin-bottom: -1px; 123 | z-index: 100; 124 | background: #ffffff; 125 | 126 | } 127 | .ats-switch .knob i { 128 | color: #000; 129 | text-shadow: 0 1px 0 #fff; 130 | line-height: 18px; 131 | pointer-events:none; 132 | 133 | } 134 | .ats-switch .switch-left, 135 | .ats-switch .switch-right, 136 | .ats-switch .knob { 137 | min-height: 28px; 138 | 139 | } 140 | .ats-switch.switch-mini { 141 | min-width: 72px; 142 | 143 | } 144 | .ats-switch.switch-mini .switch-left, 145 | .ats-switch.switch-mini .switch-right, 146 | .ats-switch.switch-mini .knob { 147 | padding-bottom: 4px; 148 | padding-top: 4px; 149 | font-size: 10px; 150 | line-height: 9px; 151 | min-height: 18px; 152 | 153 | } 154 | .ats-switch.switch-mini i.switch-mini-icons { 155 | height: 1.20em; 156 | line-height: 9px; 157 | vertical-align:text-top; 158 | text-align:center; 159 | transform: scale(0.6); 160 | margin-top: -1px; 161 | margin-bottom: -1px; 162 | 163 | } 164 | .ats-switch.switch-small { 165 | min-width: 80px; 166 | 167 | } 168 | .ats-switch.switch-small .switch-left, 169 | .ats-switch.switch-small .switch-right, 170 | .ats-switch.switch-small .knob { 171 | padding-bottom: 3px; 172 | padding-top: 3px; 173 | font-size: 12px; 174 | line-height: 18px; 175 | min-height: 24px; 176 | 177 | } 178 | .ats-switch.switch-large { 179 | min-width: 120px; 180 | 181 | } 182 | .ats-switch.switch-large .switch-left, 183 | .ats-switch.switch-large .switch-right, 184 | .ats-switch.switch-large .knob { 185 | padding-bottom: 9px; 186 | padding-top: 9px; 187 | font-size: 16px; 188 | line-height:normal; 189 | min-height: 34px; 190 | 191 | } 192 | .ats-switch span.switch-left { 193 | color: #fff; 194 | background: #428bca; 195 | 196 | } 197 | .ats-switch span.switch-right { 198 | color: #000; 199 | background: #eeeeee; 200 | 201 | } 202 | .ats-switch.switch-primary span.switch-left { 203 | color: #fff; 204 | background: #428bca; 205 | 206 | } 207 | .ats-switch.switch-info span.switch-left { 208 | color: #fff; 209 | background: #5bc0de; 210 | 211 | } 212 | .ats-switch.switch-success span.switch-left { 213 | color: #fff; 214 | background: #5cb85c; 215 | 216 | } 217 | .ats-switch.switch-warning span.switch-left { 218 | background: #f0ad4e; 219 | color: #fff; 220 | 221 | } 222 | .ats-switch.switch-danger span.switch-left { 223 | color: #fff; 224 | background: #d9534f; 225 | 226 | } 227 | .ats-switch.switch-default span.switch-left { 228 | color: #000; 229 | background: #eeeeee; 230 | 231 | } 232 | -------------------------------------------------------------------------------- /style/bootstrap3/mixins.less: -------------------------------------------------------------------------------- 1 | // main: angular-toggle-switch-bootstrap-3.less 2 | 3 | // 4 | // Mixins 5 | // -------------------------------------------------- 6 | 7 | 8 | // Utilities 9 | // ------------------------- 10 | 11 | // Clearfix 12 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 13 | // 14 | // For modern browsers 15 | // 1. The space content is one way to avoid an Opera bug when the 16 | // contenteditable attribute is included anywhere else in the document. 17 | // Otherwise it causes space to appear at the top and bottom of elements 18 | // that are clearfixed. 19 | // 2. The use of `table` rather than `block` is only necessary if using 20 | // `:before` to contain the top-margins of child elements. 21 | .clearfix() { 22 | &:before, 23 | &:after { 24 | content: " "; // 1 25 | display: table; // 2 26 | } 27 | &:after { 28 | clear: both; 29 | } 30 | } 31 | 32 | // WebKit-style focus 33 | .tab-focus() { 34 | // Default 35 | outline: thin dotted; 36 | // WebKit 37 | outline: 5px auto -webkit-focus-ring-color; 38 | outline-offset: -2px; 39 | } 40 | 41 | // Center-align a block level element 42 | .center-block() { 43 | display: block; 44 | margin-left: auto; 45 | margin-right: auto; 46 | } 47 | 48 | // Sizing shortcuts 49 | .size(@width; @height) { 50 | width: @width; 51 | height: @height; 52 | } 53 | .square(@size) { 54 | .size(@size; @size); 55 | } 56 | 57 | // Placeholder text 58 | .placeholder(@color: @input-color-placeholder) { 59 | &:-moz-placeholder { color: @color; } // Firefox 4-18 60 | &::-moz-placeholder { color: @color; // Firefox 19+ 61 | opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 62 | &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ 63 | &::-webkit-input-placeholder { color: @color; } // Safari and Chrome 64 | } 65 | 66 | // Text overflow 67 | // Requires inline-block or block for proper styling 68 | .text-overflow() { 69 | overflow: hidden; 70 | text-overflow: ellipsis; 71 | white-space: nowrap; 72 | } 73 | 74 | // CSS image replacement 75 | // 76 | // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for 77 | // mixins being reused as classes with the same name, this doesn't hold up. As 78 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note 79 | // that we cannot chain the mixins together in Less, so they are repeated. 80 | // 81 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 82 | 83 | // Deprecated as of v3.0.1 (will be removed in v4) 84 | .hide-text() { 85 | font: ~"0/0" a; 86 | color: transparent; 87 | text-shadow: none; 88 | background-color: transparent; 89 | border: 0; 90 | } 91 | // New mixin to use as of v3.0.1 92 | .text-hide() { 93 | .hide-text(); 94 | } 95 | 96 | 97 | 98 | // CSS3 PROPERTIES 99 | // -------------------------------------------------- 100 | 101 | // Single side border-radius 102 | .border-top-radius(@radius) { 103 | border-top-right-radius: @radius; 104 | border-top-left-radius: @radius; 105 | } 106 | .border-right-radius(@radius) { 107 | border-bottom-right-radius: @radius; 108 | border-top-right-radius: @radius; 109 | } 110 | .border-bottom-radius(@radius) { 111 | border-bottom-right-radius: @radius; 112 | border-bottom-left-radius: @radius; 113 | } 114 | .border-left-radius(@radius) { 115 | border-bottom-left-radius: @radius; 116 | border-top-left-radius: @radius; 117 | } 118 | 119 | // Drop shadows 120 | .box-shadow(@shadow) { 121 | -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 122 | box-shadow: @shadow; 123 | } 124 | 125 | // Transitions 126 | .transition(@transition) { 127 | -webkit-transition: @transition; 128 | transition: @transition; 129 | } 130 | .transition-property(@transition-property) { 131 | -webkit-transition-property: @transition-property; 132 | transition-property: @transition-property; 133 | } 134 | .transition-delay(@transition-delay) { 135 | -webkit-transition-delay: @transition-delay; 136 | transition-delay: @transition-delay; 137 | } 138 | .transition-duration(@transition-duration) { 139 | -webkit-transition-duration: @transition-duration; 140 | transition-duration: @transition-duration; 141 | } 142 | .transition-transform(@transition) { 143 | -webkit-transition: -webkit-transform @transition; 144 | -moz-transition: -moz-transform @transition; 145 | -o-transition: -o-transform @transition; 146 | transition: transform @transition; 147 | } 148 | 149 | // Transformations 150 | .rotate(@degrees) { 151 | -webkit-transform: rotate(@degrees); 152 | -ms-transform: rotate(@degrees); // IE9+ 153 | transform: rotate(@degrees); 154 | } 155 | .scale(@ratio; @ratio-y...) { 156 | -webkit-transform: scale(@ratio, @ratio-y); 157 | -ms-transform: scale(@ratio, @ratio-y); // IE9+ 158 | transform: scale(@ratio, @ratio-y); 159 | } 160 | .translate(@x; @y) { 161 | -webkit-transform: translate(@x, @y); 162 | -ms-transform: translate(@x, @y); // IE9+ 163 | transform: translate(@x, @y); 164 | } 165 | .skew(@x; @y) { 166 | -webkit-transform: skew(@x, @y); 167 | -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ 168 | transform: skew(@x, @y); 169 | } 170 | .translate3d(@x; @y; @z) { 171 | -webkit-transform: translate3d(@x, @y, @z); 172 | transform: translate3d(@x, @y, @z); 173 | } 174 | 175 | .rotateX(@degrees) { 176 | -webkit-transform: rotateX(@degrees); 177 | -ms-transform: rotateX(@degrees); // IE9+ 178 | transform: rotateX(@degrees); 179 | } 180 | .rotateY(@degrees) { 181 | -webkit-transform: rotateY(@degrees); 182 | -ms-transform: rotateY(@degrees); // IE9+ 183 | transform: rotateY(@degrees); 184 | } 185 | .perspective(@perspective) { 186 | -webkit-perspective: @perspective; 187 | -moz-perspective: @perspective; 188 | perspective: @perspective; 189 | } 190 | .perspective-origin(@perspective) { 191 | -webkit-perspective-origin: @perspective; 192 | -moz-perspective-origin: @perspective; 193 | perspective-origin: @perspective; 194 | } 195 | .transform-origin(@origin) { 196 | -webkit-transform-origin: @origin; 197 | -moz-transform-origin: @origin; 198 | transform-origin: @origin; 199 | } 200 | 201 | // Animations 202 | .animation(@animation) { 203 | -webkit-animation: @animation; 204 | animation: @animation; 205 | } 206 | 207 | // Backface visibility 208 | // Prevent browsers from flickering when using CSS 3D transforms. 209 | // Default value is `visible`, but can be changed to `hidden` 210 | .backface-visibility(@visibility){ 211 | -webkit-backface-visibility: @visibility; 212 | -moz-backface-visibility: @visibility; 213 | backface-visibility: @visibility; 214 | } 215 | 216 | // Box sizing 217 | .box-sizing(@boxmodel) { 218 | -webkit-box-sizing: @boxmodel; 219 | -moz-box-sizing: @boxmodel; 220 | box-sizing: @boxmodel; 221 | } 222 | 223 | // User select 224 | // For selecting text on the page 225 | .user-select(@select) { 226 | -webkit-user-select: @select; 227 | -moz-user-select: @select; 228 | -ms-user-select: @select; // IE10+ 229 | -o-user-select: @select; 230 | user-select: @select; 231 | } 232 | 233 | // Resize anything 234 | .resizable(@direction) { 235 | resize: @direction; // Options: horizontal, vertical, both 236 | overflow: auto; // Safari fix 237 | } 238 | 239 | // CSS3 Content Columns 240 | .content-columns(@column-count; @column-gap: @grid-gutter-width) { 241 | -webkit-column-count: @column-count; 242 | -moz-column-count: @column-count; 243 | column-count: @column-count; 244 | -webkit-column-gap: @column-gap; 245 | -moz-column-gap: @column-gap; 246 | column-gap: @column-gap; 247 | } 248 | 249 | // Optional hyphenation 250 | .hyphens(@mode: auto) { 251 | word-wrap: break-word; 252 | -webkit-hyphens: @mode; 253 | -moz-hyphens: @mode; 254 | -ms-hyphens: @mode; // IE10+ 255 | -o-hyphens: @mode; 256 | hyphens: @mode; 257 | } 258 | 259 | // Opacity 260 | .opacity(@opacity) { 261 | opacity: @opacity; 262 | // IE8 filter 263 | @opacity-ie: (@opacity * 100); 264 | filter: ~"alpha(opacity=@{opacity-ie})"; 265 | } 266 | 267 | 268 | 269 | // GRADIENTS 270 | // -------------------------------------------------- 271 | 272 | #gradient { 273 | 274 | // Horizontal gradient, from left to right 275 | // 276 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 277 | // Color stops are not available in IE9 and below. 278 | .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { 279 | background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+ 280 | background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 281 | background-repeat: repeat-x; 282 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down 283 | } 284 | 285 | // Vertical gradient, from top to bottom 286 | // 287 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 288 | // Color stops are not available in IE9 and below. 289 | .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { 290 | background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ 291 | background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 292 | background-repeat: repeat-x; 293 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down 294 | } 295 | 296 | .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { 297 | background-repeat: repeat-x; 298 | background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ 299 | background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 300 | } 301 | .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { 302 | background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); 303 | background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); 304 | background-repeat: no-repeat; 305 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback 306 | } 307 | .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { 308 | background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); 309 | background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); 310 | background-repeat: no-repeat; 311 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback 312 | } 313 | .radial(@inner-color: #555; @outer-color: #333) { 314 | background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); 315 | background-image: radial-gradient(circle, @inner-color, @outer-color); 316 | background-repeat: no-repeat; 317 | } 318 | .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { 319 | background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); 320 | background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); 321 | } 322 | } 323 | 324 | // Reset filters for IE 325 | // 326 | // When you need to remove a gradient background, do not forget to use this to reset 327 | // the IE filter for IE9 and below. 328 | .reset-filter() { 329 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); 330 | } 331 | 332 | 333 | 334 | // Retina images 335 | // 336 | // Short retina mixin for setting background-image and -size 337 | 338 | .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { 339 | background-image: url("@{file-1x}"); 340 | 341 | @media 342 | only screen and (-webkit-min-device-pixel-ratio: 2), 343 | only screen and ( min--moz-device-pixel-ratio: 2), 344 | only screen and ( -o-min-device-pixel-ratio: 2/1), 345 | only screen and ( min-device-pixel-ratio: 2), 346 | only screen and ( min-resolution: 192dpi), 347 | only screen and ( min-resolution: 2dppx) { 348 | background-image: url("@{file-2x}"); 349 | background-size: @width-1x @height-1x; 350 | } 351 | } 352 | 353 | 354 | // Responsive image 355 | // 356 | // Keep images from scaling beyond the width of their parents. 357 | 358 | .img-responsive(@display: block;) { 359 | display: @display; 360 | max-width: 100%; // Part 1: Set a maximum relative to the parent 361 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 362 | } 363 | 364 | 365 | // COMPONENT MIXINS 366 | // -------------------------------------------------- 367 | 368 | // Horizontal dividers 369 | // ------------------------- 370 | // Dividers (basically an hr) within dropdowns and nav lists 371 | .nav-divider(@color: #e5e5e5) { 372 | height: 1px; 373 | margin: ((@line-height-computed / 2) - 1) 0; 374 | overflow: hidden; 375 | background-color: @color; 376 | } 377 | 378 | // Panels 379 | // ------------------------- 380 | .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { 381 | border-color: @border; 382 | 383 | & > .panel-heading { 384 | color: @heading-text-color; 385 | background-color: @heading-bg-color; 386 | border-color: @heading-border; 387 | 388 | + .panel-collapse .panel-body { 389 | border-top-color: @border; 390 | } 391 | } 392 | & > .panel-footer { 393 | + .panel-collapse .panel-body { 394 | border-bottom-color: @border; 395 | } 396 | } 397 | } 398 | 399 | // Alerts 400 | // ------------------------- 401 | .alert-variant(@background; @border; @text-color) { 402 | background-color: @background; 403 | border-color: @border; 404 | color: @text-color; 405 | 406 | hr { 407 | border-top-color: darken(@border, 5%); 408 | } 409 | .alert-link { 410 | color: darken(@text-color, 10%); 411 | } 412 | } 413 | 414 | // Tables 415 | // ------------------------- 416 | .table-row-variant(@state; @background) { 417 | // Exact selectors below required to override `.table-striped` and prevent 418 | // inheritance to nested tables. 419 | .table > thead > tr, 420 | .table > tbody > tr, 421 | .table > tfoot > tr { 422 | > td.@{state}, 423 | > th.@{state}, 424 | &.@{state} > td, 425 | &.@{state} > th { 426 | background-color: @background; 427 | } 428 | } 429 | 430 | // Hover states for `.table-hover` 431 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 432 | .table-hover > tbody > tr { 433 | > td.@{state}:hover, 434 | > th.@{state}:hover, 435 | &.@{state}:hover > td, 436 | &.@{state}:hover > th { 437 | background-color: darken(@background, 5%); 438 | } 439 | } 440 | } 441 | 442 | // List Groups 443 | // ------------------------- 444 | .list-group-item-variant(@state; @background; @color) { 445 | .list-group-item-@{state} { 446 | color: @color; 447 | background-color: @background; 448 | 449 | a& { 450 | color: @color; 451 | 452 | .list-group-item-heading { color: inherit; } 453 | 454 | &:hover, 455 | &:focus { 456 | color: @color; 457 | background-color: darken(@background, 5%); 458 | } 459 | &.active, 460 | &.active:hover, 461 | &.active:focus { 462 | color: #fff; 463 | background-color: @color; 464 | border-color: @color; 465 | } 466 | } 467 | } 468 | } 469 | 470 | // Button variants 471 | // ------------------------- 472 | // Easily pump out default styles, as well as :hover, :focus, :active, 473 | // and disabled options for all buttons 474 | .button-variant(@color; @background; @border) { 475 | color: @color; 476 | background-color: @background; 477 | border-color: @border; 478 | 479 | &:hover, 480 | &:focus, 481 | &:active, 482 | &.active, 483 | .open .dropdown-toggle& { 484 | color: @color; 485 | background-color: darken(@background, 8%); 486 | border-color: darken(@border, 12%); 487 | } 488 | &:active, 489 | &.active, 490 | .open .dropdown-toggle& { 491 | background-image: none; 492 | } 493 | &.disabled, 494 | &[disabled], 495 | fieldset[disabled] & { 496 | &, 497 | &:hover, 498 | &:focus, 499 | &:active, 500 | &.active { 501 | background-color: @background; 502 | border-color: @border; 503 | } 504 | } 505 | 506 | .badge { 507 | color: @background; 508 | background-color: @color; 509 | } 510 | } 511 | 512 | // Button sizes 513 | // ------------------------- 514 | .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { 515 | padding: @padding-vertical @padding-horizontal; 516 | font-size: @font-size; 517 | line-height: @line-height; 518 | border-radius: @border-radius; 519 | } 520 | 521 | // Pagination 522 | // ------------------------- 523 | .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { 524 | > li { 525 | > a, 526 | > span { 527 | padding: @padding-vertical @padding-horizontal; 528 | font-size: @font-size; 529 | } 530 | &:first-child { 531 | > a, 532 | > span { 533 | .border-left-radius(@border-radius); 534 | } 535 | } 536 | &:last-child { 537 | > a, 538 | > span { 539 | .border-right-radius(@border-radius); 540 | } 541 | } 542 | } 543 | } 544 | 545 | // Labels 546 | // ------------------------- 547 | .label-variant(@color) { 548 | background-color: @color; 549 | &[href] { 550 | &:hover, 551 | &:focus { 552 | background-color: darken(@color, 10%); 553 | } 554 | } 555 | } 556 | 557 | // Navbar vertical align 558 | // ------------------------- 559 | // Vertically center elements in the navbar. 560 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 561 | .navbar-vertical-align(@element-height) { 562 | margin-top: ((@navbar-height - @element-height) / 2); 563 | margin-bottom: ((@navbar-height - @element-height) / 2); 564 | } 565 | 566 | // Progress bars 567 | // ------------------------- 568 | .progress-bar-variant(@color) { 569 | background-color: @color; 570 | .progress-striped & { 571 | #gradient > .striped(); 572 | } 573 | } 574 | 575 | // Responsive utilities 576 | // ------------------------- 577 | // More easily include all the states for responsive-utilities.less. 578 | .responsive-visibility() { 579 | display: block !important; 580 | table& { display: table; } 581 | tr& { display: table-row !important; } 582 | th&, 583 | td& { display: table-cell !important; } 584 | } 585 | 586 | .responsive-invisibility() { 587 | &, 588 | tr&, 589 | th&, 590 | td& { display: none !important; } 591 | } 592 | 593 | 594 | // Grid System 595 | // ----------- 596 | 597 | // Centered container element 598 | .container-fixed() { 599 | margin-right: auto; 600 | margin-left: auto; 601 | padding-left: (@grid-gutter-width / 2); 602 | padding-right: (@grid-gutter-width / 2); 603 | .clearfix(); 604 | } 605 | 606 | // Creates a wrapper for a series of columns 607 | .make-row(@gutter: @grid-gutter-width) { 608 | margin-left: (@gutter / -2); 609 | margin-right: (@gutter / -2); 610 | .clearfix(); 611 | } 612 | 613 | // Generate the extra small columns 614 | .make-xs-column(@columns; @gutter: @grid-gutter-width) { 615 | position: relative; 616 | float: left; 617 | width: percentage((@columns / @grid-columns)); 618 | // Prevent columns from collapsing when empty 619 | min-height: 1px; 620 | // Inner gutter via padding 621 | padding-left: (@gutter / 2); 622 | padding-right: (@gutter / 2); 623 | } 624 | 625 | // Generate the small columns 626 | .make-sm-column(@columns; @gutter: @grid-gutter-width) { 627 | position: relative; 628 | // Prevent columns from collapsing when empty 629 | min-height: 1px; 630 | // Inner gutter via padding 631 | padding-left: (@gutter / 2); 632 | padding-right: (@gutter / 2); 633 | 634 | // Calculate width based on number of columns available 635 | @media (min-width: @screen-sm-min) { 636 | float: left; 637 | width: percentage((@columns / @grid-columns)); 638 | } 639 | } 640 | 641 | // Generate the small column offsets 642 | .make-sm-column-offset(@columns) { 643 | @media (min-width: @screen-sm-min) { 644 | margin-left: percentage((@columns / @grid-columns)); 645 | } 646 | } 647 | .make-sm-column-push(@columns) { 648 | @media (min-width: @screen-sm-min) { 649 | left: percentage((@columns / @grid-columns)); 650 | } 651 | } 652 | .make-sm-column-pull(@columns) { 653 | @media (min-width: @screen-sm-min) { 654 | right: percentage((@columns / @grid-columns)); 655 | } 656 | } 657 | 658 | // Generate the medium columns 659 | .make-md-column(@columns; @gutter: @grid-gutter-width) { 660 | position: relative; 661 | // Prevent columns from collapsing when empty 662 | min-height: 1px; 663 | // Inner gutter via padding 664 | padding-left: (@gutter / 2); 665 | padding-right: (@gutter / 2); 666 | 667 | // Calculate width based on number of columns available 668 | @media (min-width: @screen-md-min) { 669 | float: left; 670 | width: percentage((@columns / @grid-columns)); 671 | } 672 | } 673 | 674 | // Generate the medium column offsets 675 | .make-md-column-offset(@columns) { 676 | @media (min-width: @screen-md-min) { 677 | margin-left: percentage((@columns / @grid-columns)); 678 | } 679 | } 680 | .make-md-column-push(@columns) { 681 | @media (min-width: @screen-md) { 682 | left: percentage((@columns / @grid-columns)); 683 | } 684 | } 685 | .make-md-column-pull(@columns) { 686 | @media (min-width: @screen-md-min) { 687 | right: percentage((@columns / @grid-columns)); 688 | } 689 | } 690 | 691 | // Generate the large columns 692 | .make-lg-column(@columns; @gutter: @grid-gutter-width) { 693 | position: relative; 694 | // Prevent columns from collapsing when empty 695 | min-height: 1px; 696 | // Inner gutter via padding 697 | padding-left: (@gutter / 2); 698 | padding-right: (@gutter / 2); 699 | 700 | // Calculate width based on number of columns available 701 | @media (min-width: @screen-lg-min) { 702 | float: left; 703 | width: percentage((@columns / @grid-columns)); 704 | } 705 | } 706 | 707 | // Generate the large column offsets 708 | .make-lg-column-offset(@columns) { 709 | @media (min-width: @screen-lg-min) { 710 | margin-left: percentage((@columns / @grid-columns)); 711 | } 712 | } 713 | .make-lg-column-push(@columns) { 714 | @media (min-width: @screen-lg-min) { 715 | left: percentage((@columns / @grid-columns)); 716 | } 717 | } 718 | .make-lg-column-pull(@columns) { 719 | @media (min-width: @screen-lg-min) { 720 | right: percentage((@columns / @grid-columns)); 721 | } 722 | } 723 | 724 | 725 | // Framework grid generation 726 | // 727 | // Used only by Bootstrap to generate the correct number of grid classes given 728 | // any value of `@grid-columns`. 729 | 730 | .make-grid-columns() { 731 | // Common styles for all sizes of grid columns, widths 1-12 732 | .col(@index) when (@index = 1) { // initial 733 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; 734 | .col(@index + 1, @item); 735 | } 736 | .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo 737 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; 738 | .col(@index + 1, ~"@{list}, @{item}"); 739 | } 740 | .col(@index, @list) when (@index > @grid-columns) { // terminal 741 | @{list} { 742 | position: relative; 743 | // Prevent columns from collapsing when empty 744 | min-height: 1px; 745 | // Inner gutter via padding 746 | padding-left: (@grid-gutter-width / 2); 747 | padding-right: (@grid-gutter-width / 2); 748 | } 749 | } 750 | .col(1); // kickstart it 751 | } 752 | 753 | .make-grid-columns-float(@class) { 754 | .col(@index) when (@index = 1) { // initial 755 | @item: ~".col-@{class}-@{index}"; 756 | .col(@index + 1, @item); 757 | } 758 | .col(@index, @list) when (@index =< @grid-columns) { // general 759 | @item: ~".col-@{class}-@{index}"; 760 | .col(@index + 1, ~"@{list}, @{item}"); 761 | } 762 | .col(@index, @list) when (@index > @grid-columns) { // terminal 763 | @{list} { 764 | float: left; 765 | } 766 | } 767 | .col(1); // kickstart it 768 | } 769 | 770 | .calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) { 771 | .col-@{class}-@{index} { 772 | width: percentage((@index / @grid-columns)); 773 | } 774 | } 775 | .calc-grid(@index, @class, @type) when (@type = push) { 776 | .col-@{class}-push-@{index} { 777 | left: percentage((@index / @grid-columns)); 778 | } 779 | } 780 | .calc-grid(@index, @class, @type) when (@type = pull) { 781 | .col-@{class}-pull-@{index} { 782 | right: percentage((@index / @grid-columns)); 783 | } 784 | } 785 | .calc-grid(@index, @class, @type) when (@type = offset) { 786 | .col-@{class}-offset-@{index} { 787 | margin-left: percentage((@index / @grid-columns)); 788 | } 789 | } 790 | 791 | // Basic looping in LESS 792 | .make-grid(@index, @class, @type) when (@index >= 0) { 793 | .calc-grid(@index, @class, @type); 794 | // next iteration 795 | .make-grid(@index - 1, @class, @type); 796 | } 797 | 798 | 799 | // Form validation states 800 | // 801 | // Used in forms.less to generate the form validation CSS for warnings, errors, 802 | // and successes. 803 | 804 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { 805 | // Color the label and help text 806 | .help-block, 807 | .control-label, 808 | .radio, 809 | .checkbox, 810 | .radio-inline, 811 | .checkbox-inline { 812 | color: @text-color; 813 | } 814 | // Set the border and box shadow on specific inputs to match 815 | .form-control { 816 | border-color: @border-color; 817 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 818 | &:focus { 819 | border-color: darken(@border-color, 10%); 820 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); 821 | .box-shadow(@shadow); 822 | } 823 | } 824 | // Set validation states also for addons 825 | .input-group-addon { 826 | color: @text-color; 827 | border-color: @border-color; 828 | background-color: @background-color; 829 | } 830 | } 831 | 832 | // Form control focus state 833 | // 834 | // Generate a customized focus state and for any input with the specified color, 835 | // which defaults to the `@input-focus-border` variable. 836 | // 837 | // We highly encourage you to not customize the default value, but instead use 838 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 839 | // WebKit's default styles, but applicable to a wider range of browsers. Its 840 | // usability and accessibility should be taken into account with any change. 841 | // 842 | // Example usage: change the default blue border and shadow to white for better 843 | // contrast against a dark gray background. 844 | 845 | .form-control-focus(@color: @input-border-focus) { 846 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); 847 | &:focus { 848 | border-color: @color; 849 | outline: 0; 850 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); 851 | } 852 | } 853 | 854 | // Form control sizing 855 | // 856 | // Relative text size, padding, and border-radii changes for form controls. For 857 | // horizontal sizing, wrap controls in the predefined grid classes. `