Skip to content

B
bootstrap
Commit bad40d5c authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #1 from twbs/scss 

Move to Sass
parents 6bd84210 bafd0b05
Hide whitespace changes
Inline Side-by-side
Showing with 8313 additions and 4894 deletions
Gruntfile.js
View file @ bad40d5c
...@@ -20,12 +20,12 @@ module.exports = function (grunt) { ...@@ -20,12 +20,12 @@ module.exports = function (grunt) {
var npmShrinkwrap = require('npm-shrinkwrap'); var npmShrinkwrap = require('npm-shrinkwrap');
var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js'); var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
var getLessVarsData = function () { var getLessVarsData = function () {
var filePath = path.join(__dirname, 'less/_variables.less'); var filePath = path.join(__dirname, 'scss/_variables.scss');
var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' }); var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
var parser = new BsLessdocParser(fileContent); var parser = new BsLessdocParser(fileContent);
return { sections: parser.parseFile() }; return { sections: parser.parseFile() };
}; };
var generateRawFiles = require('./grunt/bs-raw-files-generator.js'); // var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js'); var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' }); var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
...@@ -148,24 +148,20 @@ module.exports = function (grunt) { ...@@ -148,24 +148,20 @@ module.exports = function (grunt) {
files: 'js/tests/index.html' files: 'js/tests/index.html'
}, },
less: { sass: {
options: {
includePaths: ['scss'],
precision: 6,
sourceMap: true
},
core: { core: {
options: { files: {
strictMath: true, 'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss'
sourceMap: true, }
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
}, },
docs: { docs: {
options: {
strictMath: true
},
files: { files: {
'docs/assets/css/docs.min.css': 'docs/assets/less/docs.less' 'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
} }
} }
}, },
...@@ -220,7 +216,7 @@ module.exports = function (grunt) { ...@@ -220,7 +216,7 @@ module.exports = function (grunt) {
csscomb: { csscomb: {
options: { options: {
config: 'less/.csscomb.json' config: 'scss/.csscomb.json'
}, },
dist: { dist: {
expand: true, expand: true,
...@@ -396,8 +392,8 @@ module.exports = function (grunt) { ...@@ -396,8 +392,8 @@ module.exports = function (grunt) {
grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']); grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
// CSS distribution task. // CSS distribution task.
grunt.registerTask('less-compile', ['less:core', 'less:docs']); grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']); grunt.registerTask('dist-css', ['sass-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
// Full distribution task. // Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']); grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
...@@ -411,12 +407,12 @@ module.exports = function (grunt) { ...@@ -411,12 +407,12 @@ module.exports = function (grunt) {
grunt.registerTask('change-version-number', 'sed'); grunt.registerTask('change-version-number', 'sed');
// task for building customizer // task for building customizer
grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']); // grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
grunt.registerTask('build-customizer-html', 'jade'); // grunt.registerTask('build-customizer-html', 'jade');
grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () { // grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
var banner = grunt.template.process('<%= banner %>'); // var banner = grunt.template.process('<%= banner %>');
generateRawFiles(grunt, banner); // generateRawFiles(grunt, banner);
}); // });
grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () { grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () {
var srcFiles = grunt.config.get('concat.bootstrap.src'); var srcFiles = grunt.config.get('concat.bootstrap.src');
...@@ -428,7 +424,7 @@ module.exports = function (grunt) { ...@@ -428,7 +424,7 @@ module.exports = function (grunt) {
grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']); grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']); grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']);
grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']); grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']);
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-customizer']); grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('docs-github', ['jekyll:github']); grunt.registerTask('docs-github', ['jekyll:github']);
......
dist/css/bootstrap.css
View file @ bad40d5c
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.css.map
View file @ bad40d5c
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ bad40d5c
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/assets/css/docs.min.css
View file @ bad40d5c
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#faa}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #c00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0c0}.go{color:#aaa}.gp{color:#009}.gu{color:#030}.gt{color:#9c6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#f60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99f}.ni{color:#999}.ne{color:#C00}.nf{color:#c0f}.nl{color:#99f}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#f60}.mh{color:#f60}.mi{color:#f60}.mo{color:#f60}.sb{color:#c30}.sc{color:#c30}.sd{color:#C30;font-style:italic}.s2{color:#c30}.se{color:#C30}.sh{color:#c30}.si{color:#a00}.sx{color:#c30}.sr{color:#3aa}.s1{color:#c30}.ss{color:#fc3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}body{position:relative}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;font-weight:500;line-height:8.8rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon.inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#cdbfe3}.bs-docs-nav .navbar-brand{color:#fff}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#fff;background-color:#563d7c}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#322f38}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#29262f;border-color:#29262f}.bs-docs-footer{margin-top:6rem;font-size:85%;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}.bs-docs .bs-docs-footer{text-align:left}}.bs-docs-social{margin-bottom:1.5rem;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}@media (min-width:768px){.bs-docs .bs-docs-social{margin-left:-.5rem;text-align:left}}.bs-docs-masthead{position:relative;padding:2rem 1rem;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff563d7c', endColorstr='#ff6f5499', GradientType=0)}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 2rem}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 2rem;font-size:1.25rem;color:#fff}.bs-docs-masthead .version{margin-top:-1rem;margin-bottom:2rem;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:5rem 0}.bs-docs-masthead h1{font-size:4rem}.bs-docs-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:2rem}}.bs-docs-header{padding-top:2rem;padding-bottom:2rem;margin-bottom:2rem;font-size:1.25rem;background-color:#563d7c}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4;color:rgba(255,255,255,.65)}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{font-size:1.5rem;text-align:left}.bs-docs-header h1{font-size:4rem;line-height:1}}@media (min-width:992px){.bs-docs-header{padding-top:4rem;padding-bottom:4rem}.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:1.25rem!important;margin:2rem -2rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bs-docs-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:2rem;right:4rem;width:330px!important;padding:1rem!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.bs-docs-featurette h3{margin-bottom:.5rem;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bs-docs-featurette-img:hover{color:#0275d8;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bs-docs-featurette{padding-top:6rem;padding-bottom:6rem}.bs-docs-featurette-title{font-size:2.5rem}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.bs-examples .img-thumbnail{margin-bottom:.75rem}.bs-examples h4{margin-bottom:.25rem}.bs-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bs-examples{margin-right:-.75rem;margin-left:-.75rem}.bs-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bs-docs-container{position:relative;max-width:62rem;padding:1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-docs-container{padding:2rem}}@media (min-width:992px){.bs-docs-container{padding:2rem 4rem}}.bs-docs-sidebar{padding:0;margin-bottom:0;background-color:#322f38}.bs-docs-sidebar .navbar-toggle{position:absolute;top:5px;right:0;z-index:5}.bs-docs-sidebar .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-sidebar .navbar-header{float:none;margin-right:-15px}.bs-docs-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bs-docs{padding-left:240px}.bs-docs-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:240px;overflow-x:hidden;overflow-y:auto;background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:linear-gradient(to bottom,#29262f 0,#322f38 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff29262f', endColorstr='#ff322f38', GradientType=0)}.bs-docs-sidebar .navbar-brand{margin-bottom:15px}}.bs-docs-sidebar .navbar-brand{display:block;float:none;height:auto;padding:2rem 1.25rem;font-size:20px;font-weight:500;line-height:1;color:#fff}.bs-docs-sidebar-brand:hover,.bs-docs-sidebar-brand:focus{color:#fff;text-decoration:none}.bs-docs-sidenav{display:none}.bs-docs-toc-link{display:block;padding:4px 20px;font-size:16px;color:#fff}.bs-docs-toc-link:hover,.bs-docs-toc-link:focus{color:#ffe484;text-decoration:none}.active>.bs-docs-toc-link{font-weight:500;color:#ffe484}.active>.bs-docs-sidenav{display:block}.bs-docs-toc-item.active{margin-top:15px;margin-bottom:15px}.bs-docs-toc-item:first-child{margin-top:0}.bs-docs-toc-item:last-child{margin-bottom:30px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:14px;color:#99979c}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{color:#ffe484;text-decoration:none;background-color:transparent}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{font-weight:500;color:#ffe484;background-color:transparent}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{font-weight:500}.bs-docs-sidebar .nav>.active>.nav{display:block}.bs-docs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:13px}.bs-docs-content>h1{padding-top:2rem;margin-top:3rem}.bs-docs-content>h1:first-child{margin-top:0}.bs-docs-content>h1+p{font-size:1.25rem;font-weight:300}.bs-docs-content>h2{margin-top:2.5rem}.bs-docs-content>h3{margin-top:1.5rem}.bs-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:.25rem}.bs-callout+.bs-callout{margin-top:-.25rem}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem;border-radius:.25rem}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#cdbfe3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:2rem;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bs-team img{float:left;width:2rem;margin-right:.5rem;border-radius:.25rem}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.bs-example>.row{margin-bottom:1rem}.bs-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:1.5rem;margin-top:1rem;margin-bottom:-1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bs-example:before,.bs-example:after{content:" ";display:table}.bs-example:after{clear:both}@media (min-width:480px){.bs-example{border-width:.2rem}}.bs-example .container{width:auto}.bs-example>.card{float:left;max-width:15rem;margin:.25rem}.bs-example>.nav+.nav{margin-top:1rem}.bs-example>:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0!important}.bs-example>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:1rem 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:1rem}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:.25rem}.bs-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:.5rem}.bs-example-form .input-group{margin-bottom:.5rem}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:1rem}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bs-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.highlight{padding:1.5rem;margin-top:1rem;margin-bottom:1rem;background-color:#f7f7f9}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.visible-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-customizer .toggle{float:right;margin-top:1.5rem}.bs-customizer label{margin-top:.5rem;font-weight:500;color:#555}.bs-customizer h2{padding-top:2rem;margin-top:0;margin-bottom:.25rem}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:1rem;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:.25rem;font-size:75%}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:1rem 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-.25rem;font-size:1.5rem}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:.25rem}.bs-customizer-alert pre{margin:.5rem 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone h2{margin-top:0;margin-bottom:5px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}.bs-dropzone hr{width:100px}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bs-brand-item{padding:4rem 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:9rem;height:9rem}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:4rem}}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem 0 .2rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.zero-clipboard{display:block}}#focusedInput{border-color:#66afe9;outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)} */.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}body{position:relative}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;font-weight:500;line-height:8.8rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon.inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#cdbfe3}.bs-docs-nav .navbar-brand{color:#fff}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#fff;background-color:#563d7c}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#322f38}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#29262f;border-color:#29262f}.bs-docs-footer{margin-top:6rem;font-size:85%;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}.bs-docs .bs-docs-footer{text-align:left}}.bs-docs-social{margin-bottom:1.5rem;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}@media (min-width:768px){.bs-docs .bs-docs-social{margin-left:-.5rem;text-align:left}}.bs-docs-masthead{position:relative;padding:2rem 1rem;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF563D7C', endColorstr='#FF6F5499', GradientType=0)}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 2rem}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 2rem;font-size:1.25rem;color:#fff}.bs-docs-masthead .version{margin-top:-1rem;margin-bottom:2rem;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:5rem 0}.bs-docs-masthead h1{font-size:4rem}.bs-docs-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:2rem}}.bs-docs-header{padding-top:2rem;padding-bottom:2rem;margin-bottom:2rem;font-size:1.25rem;background-color:#563d7c}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;line-height:1.4;color:rgba(255,255,255,.65)}.bs-docs-header .container{position:relative}@media (min-width:768px){.bs-docs-header{font-size:1.5rem;text-align:left}.bs-docs-header h1{font-size:4rem;line-height:1}}@media (min-width:992px){.bs-docs-header{padding-top:4rem;padding-bottom:4rem}.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:1.25rem!important;margin:2rem -2rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bs-docs-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:2rem;right:4rem;width:330px!important;padding:1rem!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.bs-docs-featurette h3{margin-bottom:.5rem;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bs-docs-featurette-img:hover{color:#0275d8;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bs-docs-featurette{padding-top:6rem;padding-bottom:6rem}.bs-docs-featurette-title{font-size:2.5rem}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.bs-examples .img-thumbnail{margin-bottom:.75rem}.bs-examples h4{margin-bottom:.25rem}.bs-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bs-examples{margin-right:-.75rem;margin-left:-.75rem}.bs-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bs-docs-container{position:relative;max-width:62rem;padding:1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-docs-container{padding:2rem}}@media (min-width:992px){.bs-docs-container{padding:2rem 4rem}}.bs-docs-sidebar{padding:0;margin-bottom:0;background-color:#322f38}.bs-docs-sidebar .navbar-toggle{position:absolute;top:5px;right:0;z-index:5}.bs-docs-sidebar .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-sidebar .navbar-header{float:none;margin-right:-15px}.bs-docs-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bs-docs{padding-left:240px}.bs-docs-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:240px;overflow-x:hidden;overflow-y:auto;background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:linear-gradient(to bottom,#29262f 0,#322f38 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29262F', endColorstr='#FF322F38', GradientType=0)}.bs-docs-sidebar .navbar-brand{margin-bottom:15px}}.bs-docs-sidebar .navbar-brand{display:block;float:none;height:auto;padding:2rem 1.25rem;font-size:20px;font-weight:500;line-height:1;color:#fff}.bs-docs-sidebar-brand:hover,.bs-docs-sidebar-brand:focus{color:#fff;text-decoration:none}.bs-docs-sidenav{display:none}.bs-docs-toc-link{display:block;padding:4px 20px;font-size:16px;color:#fff}.bs-docs-toc-link:hover,.bs-docs-toc-link:focus{color:#ffe484;text-decoration:none}.active>.bs-docs-toc-link{font-weight:500;color:#ffe484}.active>.bs-docs-sidenav{display:block}.bs-docs-toc-item.active{margin-top:15px;margin-bottom:15px}.bs-docs-toc-item:first-child{margin-top:0}.bs-docs-toc-item:last-child{margin-bottom:30px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:14px;color:#99979c}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{color:#ffe484;text-decoration:none;background-color:transparent}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{font-weight:500;color:#ffe484;background-color:transparent}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{font-weight:500}.bs-docs-sidebar .nav>.active>.nav{display:block}.bs-docs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:13px}.bs-docs-content>h1{padding-top:2rem;margin-top:3rem}.bs-docs-content>h1:first-child{margin-top:0}.bs-docs-content>h1+p{font-size:1.25rem;font-weight:300}.bs-docs-content>h2{margin-top:2.5rem}.bs-docs-content>h3{margin-top:1.5rem}.bs-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:.25rem}.bs-callout+.bs-callout{margin-top:-.25rem}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem;border-radius:.25rem}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#cdbfe3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:2rem;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bs-team img{float:left;width:2rem;margin-right:.5rem;border-radius:.25rem}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.bs-example>.row{margin-bottom:1rem}.bs-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:1.5rem;margin-top:1rem;margin-bottom:-1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bs-example:before,.bs-example:after{content:" ";display:table}.bs-example:after{clear:both}@media (min-width:480px){.bs-example{border-width:.2rem}}.bs-example .container{width:auto}.bs-example>.card{float:left;max-width:15rem;margin:.25rem}.bs-example>.nav+.nav{margin-top:1rem}.bs-example>:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0!important}.bs-example>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:1rem 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:1rem}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:.25rem}.bs-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:.5rem}.bs-example-form .input-group{margin-bottom:.5rem}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:1rem}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bs-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.highlight{padding:1.5rem;margin-top:1rem;margin-bottom:1rem;background-color:#f7f7f9}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-customizer .toggle{float:right;margin-top:1.5rem}.bs-customizer label{margin-top:.5rem;font-weight:500;color:#555}.bs-customizer h2{padding-top:2rem;margin-top:0;margin-bottom:.25rem}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:1rem;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{margin-bottom:.25rem;font-size:75%}#less-section label{font-weight:400}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:0;right:0;left:0;z-index:1030;padding:1rem 0;color:#fff;background-color:#d9534f;border-bottom:1px solid #b94441;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.bs-customizer-alert .close{margin-top:-.25rem;font-size:1.5rem}.bs-customizer-alert p{margin-bottom:0}.bs-customizer-alert .glyphicon{margin-right:.25rem}.bs-customizer-alert pre{margin:.5rem 0 0;color:#fff;background-color:#a83c3a;border-color:#973634;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-dropzone{position:relative;padding:20px;margin-bottom:20px;color:#777;text-align:center;border:2px dashed #eee;border-radius:4px}.bs-dropzone h2{margin-top:0;margin-bottom:5px}.bs-dropzone .lead{margin-bottom:10px;font-weight:400;color:#333}.bs-dropzone hr{width:100px}#import-manual-trigger{cursor:pointer}.bs-dropzone p:last-child{margin-bottom:0}.bs-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bs-brand-item{padding:4rem 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:9rem;height:9rem}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:4rem}}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem 0 .2rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.zero-clipboard{display:block}}#focusedInput{border-color:#66afe9;outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)}
\ No newline at end of file \ No newline at end of file
docs/assets/css/docs.min.css.map 0 → 100644
View file @ bad40d5c
This diff was suppressed by a .gitattributes entry.
docs/assets/less/docs.less → docs/assets/scss/docs.scss
View file @ bad40d5c
...@@ -6,19 +6,19 @@ ...@@ -6,19 +6,19 @@
*/ */
// Import Bootstrap variables and mixins // Import Bootstrap variables and mixins
@import "../../../less/_variables.less"; @import "../../../scss/variables";
@import "../../../less/_mixins.less"; @import "../../../scss/mixins";
// Import the syntax highlighting // Import the syntax highlighting
@import "syntax.less"; @import "syntax";
// Local docs variables // Local docs variables
@bs-purple: #563d7c; $bs-purple: #563d7c;
@bs-purple-light: #cdbfe3; $bs-purple-light: #cdbfe3;
@bs-yellow: #ffe484; $bs-yellow: #ffe484;
@bs-danger: #d9534f; $bs-danger: #d9534f;
@bs-warning: #f0ad4e; $bs-warning: #f0ad4e;
@bs-info: #5bc0de; $bs-info: #5bc0de;
// Scaffolding // Scaffolding
...@@ -35,28 +35,28 @@ body { ...@@ -35,28 +35,28 @@ body {
// //
.btn-outline { .btn-outline {
color: @bs-purple; color: $bs-purple;
background-color: transparent; background-color: transparent;
border-color: @bs-purple; border-color: $bs-purple;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: #fff; color: #fff;
background-color:@bs-purple; background-color:$bs-purple;
border-color: @bs-purple; border-color: $bs-purple;
} }
} }
.btn-outline-inverse { .btn-outline-inverse {
color: #fff; color: #fff;
background-color: transparent; background-color: transparent;
border-color: @bs-purple-light; border-color: $bs-purple-light;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: @bs-purple; color: $bs-purple;
text-shadow: none; text-shadow: none;
background-color: #fff; background-color: #fff;
border-color: #fff; border-color: #fff;
...@@ -78,16 +78,16 @@ body { ...@@ -78,16 +78,16 @@ body {
color: #fff; color: #fff;
text-align: center; text-align: center;
cursor: default; cursor: default;
background-color: @bs-purple; background-color: $bs-purple;
border-radius: 15%; border-radius: 15%;
&.inverse { &.inverse {
color: @bs-purple; color: $bs-purple;
background-color: #fff; background-color: #fff;
} }
&.outline { &.outline {
background-color: transparent; background-color: transparent;
border: 1px solid @bs-purple-light; border: 1px solid $bs-purple-light;
} }
} }
...@@ -217,7 +217,7 @@ body { ...@@ -217,7 +217,7 @@ body {
text-align: center; text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1); text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499; background-color: #6f5499;
#gradient > .vertical(@bs-purple, #6f5499); @include gradient-vertical($bs-purple, #6f5499);
} }
.bs-docs-masthead .bs-docs-booticon { .bs-docs-masthead .bs-docs-booticon {
...@@ -279,7 +279,7 @@ body { ...@@ -279,7 +279,7 @@ body {
padding-bottom: 2rem; padding-bottom: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 1.25rem; font-size: 1.25rem;
background-color: @bs-purple; background-color: $bs-purple;
} }
.bs-docs-header h1 { .bs-docs-header h1 {
margin-top: 0; margin-top: 0;
...@@ -330,7 +330,7 @@ body { ...@@ -330,7 +330,7 @@ body {
overflow: hidden; /* clearfix */ overflow: hidden; /* clearfix */
font-size: .8rem !important; font-size: .8rem !important;
line-height: 1rem !important; line-height: 1rem !important;
color: @bs-purple-light !important; color: $bs-purple-light !important;
text-align: left; text-align: left;
background: transparent !important; background: transparent !important;
border: solid #866ab3 !important; border: solid #866ab3 !important;
...@@ -371,7 +371,7 @@ body { ...@@ -371,7 +371,7 @@ body {
// } // }
// .bs-docs-header .carbonad-text a, // .bs-docs-header .carbonad-text a,
// .bs-docs-header .carbonad-tag a { // .bs-docs-header .carbonad-tag a {
// color: @bs-purple !important; // color: $bs-purple !important;
// } // }
@media (min-width: 480px) { @media (min-width: 480px) {
...@@ -448,7 +448,7 @@ body { ...@@ -448,7 +448,7 @@ body {
color: #333; color: #333;
} }
.bs-docs-featurette-img:hover { .bs-docs-featurette-img:hover {
color: @brand-primary; color: $brand-primary;
text-decoration: none; text-decoration: none;
} }
.bs-docs-featurette-img img { .bs-docs-featurette-img img {
...@@ -597,7 +597,7 @@ body { ...@@ -597,7 +597,7 @@ body {
width: 240px; width: 240px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
#gradient > .vertical(#29262f, #322f38); @include gradient-vertical(#29262f, #322f38);
} }
.bs-docs-sidebar .navbar-brand { .bs-docs-sidebar .navbar-brand {
margin-bottom: 15px; margin-bottom: 15px;
...@@ -634,12 +634,12 @@ body { ...@@ -634,12 +634,12 @@ body {
} }
.bs-docs-toc-link:hover, .bs-docs-toc-link:hover,
.bs-docs-toc-link:focus { .bs-docs-toc-link:focus {
color: @bs-yellow; color: $bs-yellow;
text-decoration: none; text-decoration: none;
} }
.active > .bs-docs-toc-link { .active > .bs-docs-toc-link {
font-weight: 500; font-weight: 500;
color: @bs-yellow; color: $bs-yellow;
} }
.active > .bs-docs-sidenav { .active > .bs-docs-sidenav {
display: block; display: block;
...@@ -665,7 +665,7 @@ body { ...@@ -665,7 +665,7 @@ body {
} }
.bs-docs-sidebar .nav > li > a:hover, .bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus { .bs-docs-sidebar .nav > li > a:focus {
color: @bs-yellow; color: $bs-yellow;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
} }
...@@ -673,7 +673,7 @@ body { ...@@ -673,7 +673,7 @@ body {
.bs-docs-sidebar .nav > .active:hover > a, .bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a { .bs-docs-sidebar .nav > .active:focus > a {
font-weight: 500; font-weight: 500;
color: @bs-yellow; color: $bs-yellow;
background-color: transparent; background-color: transparent;
} }
...@@ -763,14 +763,14 @@ body { ...@@ -763,14 +763,14 @@ body {
} }
// Variations // Variations
.bs-callout-variant(@color) { @mixin bs-callout-variant($color) {
border-left-color: @color; border-left-color: $color;
h4 { color: @color; } h4 { color: $color; }
} }
.bs-callout-danger { .bs-callout-variant(@bs-danger); } .bs-callout-danger { @include bs-callout-variant($bs-danger); }
.bs-callout-warning { .bs-callout-variant(@bs-warning); } .bs-callout-warning { @include bs-callout-variant($bs-warning); }
.bs-callout-info { .bs-callout-variant(@bs-info); } .bs-callout-info { @include bs-callout-variant($bs-info); }
// //
...@@ -799,10 +799,10 @@ body { ...@@ -799,10 +799,10 @@ body {
// Docs colors // Docs colors
.color-swatches { .color-swatches {
.bs-purple { .bs-purple {
background-color: @bs-purple; background-color: $bs-purple;
} }
.bs-purple-light { .bs-purple-light {
background-color: @bs-purple-light; background-color: $bs-purple-light;
} }
.bs-purple-lighter { .bs-purple-lighter {
background-color: #e5e1ea; background-color: #e5e1ea;
...@@ -880,7 +880,7 @@ body { ...@@ -880,7 +880,7 @@ body {
margin-bottom: -1rem; margin-bottom: -1rem;
border: solid #f7f7f9; border: solid #f7f7f9;
border-width: .2rem 0 0; border-width: .2rem 0 0;
.clearfix(); @include clearfix();
@media (min-width: 480px) { @media (min-width: 480px) {
border-width: .2rem; border-width: .2rem;
...@@ -1123,7 +1123,7 @@ body { ...@@ -1123,7 +1123,7 @@ body {
} }
.highlight pre code { .highlight pre code {
font-size: inherit; font-size: inherit;
color: @gray-dark; // Effectively the base text color color: $gray-dark; // Effectively the base text color
} }
...@@ -1428,8 +1428,8 @@ body { ...@@ -1428,8 +1428,8 @@ body {
// Pseudo :focus state for showing how it looks in the docs // Pseudo :focus state for showing how it looks in the docs
#focusedInput { #focusedInput {
border-color: @input-border-focus; border-color: $input-border-focus;
outline: 0; outline: 0;
outline: thin dotted \9; // IE9 outline: thin dotted \9; // IE9
box-shadow: 0 0 .5rem @input-box-shadow-focus; box-shadow: 0 0 .5rem $input-box-shadow-focus;
} }
docs/dist/css/bootstrap.css
View file @ bad40d5c
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.css.map
View file @ bad40d5c
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ bad40d5c
This source diff could not be displayed because it is too large. You can view the blob instead.
less/_mixins.less deleted 100644 → 0
View file @ 6bd84210
// Mixins
// --------------------------------------------------
.border-radius(@radius: .25em) when (@enable-rounded = true) {
border-radius: @radius;
}
.box-shadow(@shadow) when (@enable-shadows = true) {
box-shadow: @arguments;
}
.transition(@transition) when (@enable-transitions = true) {
transition: @arguments;
}
.render-gradient(@start; @end) when (@enable-gradients = true) {
#gradient > .vertical(@start-color: @start; @end-color: @end);
background-color: @end;
}
// Utilities
@import "mixins/media-queries.less";
@import "mixins/hide-text.less";
@import "mixins/image.less";
@import "mixins/labels.less";
@import "mixins/reset-filter.less";
@import "mixins/resize.less";
@import "mixins/responsive-visibility.less";
@import "mixins/size.less";
@import "mixins/tab-focus.less";
@import "mixins/text-emphasis.less";
@import "mixins/text-overflow.less";
// Components
@import "mixins/alerts.less";
@import "mixins/buttons.less";
@import "mixins/pagination.less";
@import "mixins/list-group.less";
@import "mixins/nav-divider.less";
@import "mixins/forms.less";
@import "mixins/progress-bar.less";
@import "mixins/table-row.less";
// Skins
@import "mixins/background-variant.less";
@import "mixins/border-radius.less";
@import "mixins/gradients.less";
// Layout
@import "mixins/clearfix.less";
@import "mixins/center-block.less";
@import "mixins/nav-vertical-align.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";
less/bootstrap.less deleted 100644 → 0
View file @ 6bd84210
// Core variables and mixins
@import "_variables.less";
@import "_mixins.less";
// Reset and dependencies
@import "_normalize.less";
@import "_print.less";
// Core CSS
@import "_scaffolding.less";
@import "_type.less";
@import "_code.less";
@import "_grid.less";
@import "_tables.less";
@import "_forms.less";
@import "_buttons.less";
// Components
@import "_animation.less";
@import "_dropdown.less";
@import "_button-group.less";
@import "_input-group.less";
@import "_nav.less";
@import "_navbar.less";
@import "_card.less";
@import "_breadcrumb.less";
@import "_pagination.less";
@import "_pager.less";
@import "_labels.less";
@import "_badge.less";
@import "_jumbotron.less";
@import "_alert.less";
@import "_progress.less";
@import "_media.less";
@import "_list-group.less";
@import "_responsive-embed.less";
@import "_close.less";
// Components w/ JavaScript
@import "_modal.less";
@import "_tooltip.less";
@import "_popover.less";
@import "_carousel.less";
// Utility classes
@import "_utilities.less";
@import "_utilities-responsive.less";
less/mixins/alerts.less deleted 100644 → 0
View file @ 6bd84210
// Alerts
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}
less/mixins/background-variant.less deleted 100644 → 0
View file @ 6bd84210
// Contextual backgrounds
.bg-variant(@color) {
background-color: @color;
a&:hover {
background-color: darken(@color, 10%);
}
}
less/mixins/border-radius.less deleted 100644 → 0
View file @ 6bd84210
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
less/mixins/gradients.less deleted 100644 → 0
View file @ 6bd84210
// Gradients
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
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+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
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+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
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
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
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
}
.radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}
}
less/mixins/grid-framework.less deleted 100644 → 0
View file @ 6bd84210
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
less/mixins/grid.less deleted 100644 → 0
View file @ 6bd84210
/// Grid system
//
// Generate semantic grid columns with these mixins.
.make-container(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
&:extend(.clearfix all);
}
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
.make-col(@gutter: @grid-gutter-width) {
position: relative;
float: left;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-col-span(@columns) {
width: percentage((@columns / @grid-columns));
}
.make-col-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.make-col-push(@columns) {
left: percentage((@columns / @grid-columns));
}
.make-col-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
less/mixins/list-group.less deleted 100644 → 0
View file @ 6bd84210
// List Groups
.list-group-item-variant(@state; @background; @color) {
.list-group-item-@{state} {
color: @color;
background-color: @background;
a& {
color: @color;
.list-group-item-heading {
color: inherit;
}
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: @color;
border-color: @color;
}
}
}
}
less/mixins/media-queries.less deleted 100644 → 0
View file @ 6bd84210
// Media query mixins
.media-xs(@rules) {
@media (max-width: @screen-xs-max) { @rules(); }
}
.media-sm(@rules) {
@media (min-width: @screen-sm-min) { @rules(); }
}
.media-sm-max(@rules) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @rules(); }
}
.media-md(@rules) {
@media (min-width: @screen-md-min) { @rules(); }
}
.media-md-max(@rules) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @rules(); }
}
.media-lg(@rules) {
@media (min-width: @screen-lg-min) { @rules(); }
}
less/mixins/responsive-visibility.less deleted 100644 → 0
View file @ 6bd84210
// Responsive utilities
//
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& { display: table; }
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
}
less/mixins/size.less deleted 100644 → 0
View file @ 6bd84210
// Sizing shortcuts
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
less/mixins/text-emphasis.less deleted 100644 → 0
View file @ 6bd84210
// Typography
.text-emphasis-variant(@color) {
color: @color;
a&:hover {
color: darken(@color, 10%);
}
}
less/_alert.less → scss/_alert.scss
View file @ bad40d5c
...@@ -7,20 +7,20 @@ ...@@ -7,20 +7,20 @@
// ------------------------- // -------------------------
.alert { .alert {
padding: @alert-padding; padding: $alert-padding;
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
border: 1px solid transparent; border: 1px solid transparent;
.border-radius(@alert-border-radius); @include border-radius($alert-border-radius);
// Headings for larger alerts // Headings for larger alerts
h4 { h4 {
margin-top: 0; margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color // Specified for the h4 to prevent conflicts of changing $headings-color
color: inherit; color: inherit;
} }
// Provide class for links that match alerts // Provide class for links that match alerts
.alert-link { .alert-link {
font-weight: @alert-link-font-weight; font-weight: $alert-link-font-weight;
} }
// Improve alignment and spacing of inner content // Improve alignment and spacing of inner content
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
.alert-dismissible { .alert-dismissible {
padding-right: (@alert-padding + 20); padding-right: ($alert-padding + 20);
// Adjust close link position // Adjust close link position
.close { .close {
...@@ -54,14 +54,14 @@ ...@@ -54,14 +54,14 @@
// Generate contextual modifier classes for colorizing the alert. // Generate contextual modifier classes for colorizing the alert.
.alert-success { .alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
} }
.alert-info { .alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
} }
.alert-warning { .alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
} }
.alert-danger { .alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); @include alert-variant($alert-danger-bg, $alert-danger-border,$alert-danger-text);
} }
less/_animation.less → scss/_animation.scss
View file @ bad40d5c
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
.fade { .fade {
opacity: 0; opacity: 0;
transition: opacity .15s linear; transition: opacity .15s linear;
&.in { &.in {
opacity: 1; opacity: 1;
} }
...@@ -14,9 +15,12 @@ ...@@ -14,9 +15,12 @@
display: none; display: none;
visibility: hidden; visibility: hidden;
&.in { display: block; visibility: visible; } &.in {
tr&.in { display: table-row; } display: block;
tbody&.in { display: table-row-group; } visibility: visible;
}
// tr&.in { display: table-row; }
// tbody&.in { display: table-row-group; }
} }
.collapsing { .collapsing {
......
less/_badge.less → scss/_badge.scss
View file @ bad40d5c
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
padding-left: .6em; padding-left: .6em;
padding-right: .6em; padding-right: .6em;
font-size: .75em; font-size: .75em;
font-weight: @badge-font-weight; font-weight: $badge-font-weight;
color: @badge-color; color: $badge-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: @badge-bg; background-color: $badge-bg;
.border-radius(@badge-border-radius); @include border-radius($badge-border-radius);
// Empty badges collapse automatically // Empty badges collapse automatically
&:empty { &:empty {
...@@ -28,21 +28,11 @@ ...@@ -28,21 +28,11 @@
top: .2em; top: .2em;
} }
// Hover state, but only for links
a& {
&:hover,
&:focus {
color: @badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Account for badges in navs // Account for badges in navs
.list-group-item.active > &, .list-group-item.active > &,
.nav-pills > .active > a > & { .nav-pills > .active > a > & {
color: @badge-active-color; color: $badge-active-color;
background-color: @badge-active-bg; background-color: $badge-active-bg;
} }
.list-group-item > & { .list-group-item > & {
float: right; float: right;
...@@ -54,3 +44,13 @@ ...@@ -54,3 +44,13 @@
margin-left: 3px; margin-left: 3px;
} }
} }
// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: $badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
less/_breadcrumb.less → scss/_breadcrumb.scss
View file @ bad40d5c
...@@ -4,24 +4,24 @@ ...@@ -4,24 +4,24 @@
.breadcrumb { .breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
list-style: none; list-style: none;
background-color: @breadcrumb-bg; background-color: $breadcrumb-bg;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
> li { > li {
display: inline-block; display: inline-block;
+ li:before { + li:before {
content: "@{breadcrumb-divider}\00a0"; // Unicode space added since inline-block means non-collapsing white-space content: "#{breadcrumb-divider}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding-left: .5rem; padding-left: .5rem;
padding-right: .5rem; padding-right: .5rem;
color: @breadcrumb-divider-color; color: $breadcrumb-divider-color;
} }
} }
> .active { > .active {
color: @breadcrumb-active-color; color: $breadcrumb-active-color;
} }
} }
less/_button-group.less → scss/_button-group.scss
View file @ bad40d5c
...@@ -8,9 +8,11 @@ ...@@ -8,9 +8,11 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above vertical-align: middle; // match .btn alignment given font-size hack above
> .btn { > .btn {
position: relative; position: relative;
float: left; float: left;
// Bring the "active" button to the front // Bring the "active" button to the front
&:hover, &:hover,
&:focus, &:focus,
...@@ -34,12 +36,13 @@ ...@@ -34,12 +36,13 @@
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .btn-toolbar {
margin-left: -5px; // Offset the first child's margin margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all); @include clearfix();
.btn-group, .btn-group,
.input-group { .input-group {
float: left; float: left;
} }
> .btn, > .btn,
> .btn-group, > .btn-group,
> .input-group { > .input-group {
...@@ -54,14 +57,15 @@ ...@@ -54,14 +57,15 @@
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) { &:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0); @include border-right-radius(0);
} }
} }
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child), .btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) { .btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0); @include border-left-radius(0);
} }
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
...@@ -74,11 +78,11 @@ ...@@ -74,11 +78,11 @@
.btn-group > .btn-group:first-child { .btn-group > .btn-group:first-child {
> .btn:last-child, > .btn:last-child,
> .dropdown-toggle { > .dropdown-toggle {
.border-right-radius(0); @include border-right-radius(0);
} }
} }
.btn-group > .btn-group:last-child > .btn:first-child { .btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0); @include border-left-radius(0);
} }
// On active and open, don't show outline // On active and open, don't show outline
...@@ -92,9 +96,9 @@ ...@@ -92,9 +96,9 @@
// //
// Remix the default button sizing classes into new ones for easier manipulation. // Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs); } .btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { &:extend(.btn-sm); } .btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { &:extend(.btn-lg); } .btn-group-lg > .btn { @extend .btn-lg; }
// Split button dropdowns // Split button dropdowns
...@@ -113,11 +117,11 @@ ...@@ -113,11 +117,11 @@
// The clickable button for toggling the menu // The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state // Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles. // Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link { &.btn-link {
.box-shadow(none); @include box-shadow(none);
} }
} }
...@@ -128,12 +132,12 @@ ...@@ -128,12 +132,12 @@
} }
// Carets in other button sizes // Carets in other button sizes
.btn-lg .caret { .btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0; border-width: $caret-width-large $caret-width-large 0;
border-bottom-width: 0; border-bottom-width: 0;
} }
// Upside down carets for .dropup // Upside down carets for .dropup
.dropup .btn-lg .caret { .dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large; border-width: 0 $caret-width-large $caret-width-large;
} }
...@@ -152,7 +156,8 @@ ...@@ -152,7 +156,8 @@
// Clear floats so dropdown menus can be properly placed // Clear floats so dropdown menus can be properly placed
> .btn-group { > .btn-group {
&:extend(.clearfix all); @include clearfix();
> .btn { > .btn {
float: none; float: none;
} }
...@@ -172,12 +177,12 @@ ...@@ -172,12 +177,12 @@
border-radius: 0; border-radius: 0;
} }
&:first-child:not(:last-child) { &:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base; border-top-right-radius: $border-radius-base;
.border-bottom-radius(0); @include border-bottom-radius(0);
} }
&:last-child:not(:first-child) { &:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base; border-bottom-left-radius: $border-radius-base;
.border-top-radius(0); @include border-top-radius(0);
} }
} }
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
...@@ -186,11 +191,11 @@ ...@@ -186,11 +191,11 @@
.btn-group-vertical > .btn-group:first-child:not(:last-child) { .btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child, > .btn:last-child,
> .dropdown-toggle { > .dropdown-toggle {
.border-bottom-radius(0); @include border-bottom-radius(0);
} }
} }
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-top-radius(0); @include border-top-radius(0);
} }
...@@ -202,12 +207,14 @@ ...@@ -202,12 +207,14 @@
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: separate; border-collapse: separate;
> .btn, > .btn,
> .btn-group { > .btn-group {
float: none; float: none;
display: table-cell; display: table-cell;
width: 1%; width: 1%;
} }
> .btn-group .btn { > .btn-group .btn {
width: 100%; width: 100%;
} }
......
less/_buttons.less → scss/_buttons.scss
View file @ bad40d5c
...@@ -9,24 +9,24 @@ ...@@ -9,24 +9,24 @@
.btn { .btn {
display: inline-block; display: inline-block;
margin-bottom: 0; // For input.btn margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight; font-weight: $btn-font-weight;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
touch-action: manipulation; touch-action: manipulation;
cursor: pointer; cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: @border-width solid transparent; border: $border-width solid transparent;
white-space: nowrap; white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
user-select: none; user-select: none;
.transition(all .2s ease-in-out); transition: all .2s ease-in-out;
&, &,
&:active, &:active,
&.active { &.active {
&:focus, &:focus,
&.focus { &.focus {
.tab-focus(); @include tab-focus();
} }
} }
...@@ -40,16 +40,16 @@ ...@@ -40,16 +40,16 @@
&.active { &.active {
outline: 0; outline: 0;
background-image: none; background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
} }
&.disabled, &.disabled,
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
cursor: @cursor-disabled; cursor: $cursor-disabled;
pointer-events: none; // Future-proof disabling of clicks pointer-events: none; // Future-proof disabling of clicks
opacity: .65; opacity: .65;
.box-shadow(none); @include box-shadow(none);
} }
} }
...@@ -58,22 +58,22 @@ ...@@ -58,22 +58,22 @@
// -------------------------------------------------- // --------------------------------------------------
.btn-primary { .btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
} }
.btn-secondary { .btn-secondary {
.button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border); @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
} }
.btn-info { .btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
} }
.btn-success { .btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
} }
.btn-warning { .btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
} }
.btn-danger { .btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
} }
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
// Make a button look and behave like a link // Make a button look and behave like a link
.btn-link { .btn-link {
color: @link-color; color: $link-color;
font-weight: normal; font-weight: normal;
border-radius: 0; border-radius: 0;
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: transparent; background-color: transparent;
.box-shadow(none); @include box-shadow(none);
} }
&, &,
&:hover, &:hover,
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
} }
&:hover, &:hover,
&:focus { &:focus {
color: @link-hover-color; color: $link-hover-color;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus { &:focus {
color: @btn-link-disabled-color; color: $btn-link-disabled-color;
text-decoration: none; text-decoration: none;
} }
} }
...@@ -122,14 +122,14 @@ ...@@ -122,14 +122,14 @@
.btn-lg { .btn-lg {
// line-height: ensure even-numbered height of button next to large input // line-height: ensure even-numbered height of button next to large input
.button-size(@padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @border-radius-lg); @include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg);
} }
.btn-sm { .btn-sm {
// line-height: ensure proper height of button next to small input // line-height: ensure proper height of button next to small input
.button-size(@padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @border-radius-sm); @include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm);
} }
.btn-xs { .btn-xs {
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-xs; @line-height-sm; @border-radius-sm); @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $border-radius-sm);
} }
......
less/_card.less → scss/_card.scss
View file @ bad40d5c
...@@ -33,13 +33,13 @@ ...@@ -33,13 +33,13 @@
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
margin: -1.25rem -1.25rem 1.25rem; margin: -1.25rem -1.25rem 1.25rem;
border-bottom: .075rem solid #eee; border-bottom: .075rem solid #eee;
.border-radius(.25rem .25rem 0 0); @include border-radius(.25rem .25rem 0 0);
} }
.card-footer { .card-footer {
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
margin: 1.25rem -1.25rem -1.25rem; margin: 1.25rem -1.25rem -1.25rem;
border-top: .075rem solid #eee; border-top: .075rem solid #eee;
.border-radius(0 0 .25rem .25rem); @include border-radius(0 0 .25rem .25rem);
} }
...@@ -48,24 +48,24 @@ ...@@ -48,24 +48,24 @@
// //
.card-primary { .card-primary {
background-color: @brand-primary; background-color: $brand-primary;
border-color: @brand-primary; border-color: $brand-primary;
} }
.card-success { .card-success {
background-color: @brand-success; background-color: $brand-success;
border-color: @brand-success; border-color: $brand-success;
} }
.card-info { .card-info {
background-color: @brand-info; background-color: $brand-info;
border-color: @brand-info; border-color: $brand-info;
} }
.card-warning { .card-warning {
background-color: @brand-warning; background-color: $brand-warning;
border-color: @brand-warning; border-color: $brand-warning;
} }
.card-danger { .card-danger {
background-color: @brand-danger; background-color: $brand-danger;
border-color: @brand-danger; border-color: $brand-danger;
} }
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
// Card image // Card image
.card-img { .card-img {
margin: -1.325rem; margin: -1.325rem;
.border-radius(.25rem); @include border-radius(.25rem);
} }
.card-img-overlay { .card-img-overlay {
position: absolute; position: absolute;
...@@ -125,11 +125,11 @@ ...@@ -125,11 +125,11 @@
// Card image caps // Card image caps
.card-img-top { .card-img-top {
margin: -1.325rem -1.325rem 1.25rem; margin: -1.325rem -1.325rem 1.25rem;
.border-radius(.25rem .25rem 0 0); @include border-radius(.25rem .25rem 0 0);
} }
.card-img-bottom { .card-img-bottom {
margin: 1.25rem -1.325rem -1.325rem; margin: 1.25rem -1.325rem -1.325rem;
.border-radius(0 0 .25rem .25rem); @include border-radius(0 0 .25rem .25rem);
} }
......
less/_carousel.less → scss/_carousel.scss
View file @ bad40d5c
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
// Account for jankitude on images // Account for jankitude on images
> img, > img,
> a > img { > a > img {
&:extend(.img-responsive); @extend .img-responsive;
line-height: 1; line-height: 1;
} }
...@@ -95,30 +95,30 @@ ...@@ -95,30 +95,30 @@
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: @carousel-control-width; width: $carousel-control-width;
opacity: @carousel-control-opacity; opacity: $carousel-control-opacity;
font-size: @carousel-control-font-size; font-size: $carousel-control-font-size;
color: @carousel-control-color; color: $carousel-control-color;
text-align: center; text-align: center;
text-shadow: @carousel-text-shadow; text-shadow: $carousel-text-shadow;
// We can't have this transition here because WebKit cancels the carousel // We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation. // animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds // Set gradients for backgrounds
&.left { &.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
} }
&.right { &.right {
left: auto; left: auto;
right: 0; right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
} }
// Hover/focus state // Hover/focus state
&:hover, &:hover,
&:focus { &:focus {
outline: 0; outline: 0;
color: @carousel-control-color; color: $carousel-control-color;
text-decoration: none; text-decoration: none;
opacity: .9; opacity: .9;
} }
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
height: 10px; height: 10px;
margin: 1px; margin: 1px;
text-indent: -999px; text-indent: -999px;
border: 1px solid @carousel-indicator-border-color; border: 1px solid $carousel-indicator-border-color;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
margin: 0; margin: 0;
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: @carousel-indicator-active-bg; background-color: $carousel-indicator-active-bg;
} }
} }
...@@ -208,9 +208,10 @@ ...@@ -208,9 +208,10 @@
z-index: 10; z-index: 10;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
color: @carousel-caption-color; color: $carousel-caption-color;
text-align: center; text-align: center;
text-shadow: @carousel-text-shadow; text-shadow: $carousel-text-shadow;
& .btn { & .btn {
text-shadow: none; // No shadow for button elements in carousel-caption text-shadow: none; // No shadow for button elements in carousel-caption
} }
...@@ -218,7 +219,7 @@ ...@@ -218,7 +219,7 @@
// Scale up controls for tablets and up // Scale up controls for tablets and up
.media-sm({ @include media-sm {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control { .carousel-control {
.icon-prev, .icon-prev,
...@@ -247,4 +248,4 @@ ...@@ -247,4 +248,4 @@
.carousel-indicators { .carousel-indicators {
bottom: 20px; bottom: 20px;
} }
}); }
less/_close.less → scss/_close.scss
View file @ bad40d5c
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
.close { .close {
float: right; float: right;
font-size: (@font-size-base * 1.5); font-size: ($font-size-base * 1.5);
font-weight: @close-font-weight; font-weight: $close-font-weight;
line-height: 1; line-height: 1;
color: @close-color; color: $close-color;
text-shadow: @close-text-shadow; text-shadow: $close-text-shadow;
opacity: .2; opacity: .2;
&:hover, &:hover,
&:focus { &:focus {
color: @close-color; color: $close-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
opacity: .5; opacity: .5;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
// Additional properties for button version // Additional properties for button version
// iOS requires the button element instead of an anchor tag. // iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`. // If you want the anchor version, it requires `href="#"`.
button& { &button {
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
......
less/_code.less → scss/_code.scss
View file @ bad40d5c
...@@ -8,32 +8,32 @@ code, ...@@ -8,32 +8,32 @@ code,
kbd, kbd,
pre, pre,
samp { samp {
font-family: @font-family-monospace; font-family: $font-family-monospace;
} }
// Inline code // Inline code
code { code {
padding: .2rem .4rem; padding: .2rem .4rem;
font-size: 90%; font-size: 90%;
color: @code-color; color: $code-color;
background-color: @code-bg; background-color: $code-bg;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
} }
// User input typically entered via keyboard // User input typically entered via keyboard
kbd { kbd {
padding: .2rem .4rem; padding: .2rem .4rem;
font-size: 90%; font-size: 90%;
color: @kbd-color; color: $kbd-color;
background-color: @kbd-bg; background-color: $kbd-bg;
.border-radius(@border-radius-sm); @include border-radius($border-radius-sm);
.box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25)); @include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
kbd { kbd {
padding: 0; padding: 0;
font-size: 100%; font-size: 100%;
font-weight: bold; font-weight: bold;
.box-shadow(none); @include box-shadow(none);
} }
} }
...@@ -44,10 +44,10 @@ pre { ...@@ -44,10 +44,10 @@ pre {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 90%; font-size: 90%;
line-height: @line-height-base; line-height: $line-height-base;
color: @pre-color; color: $pre-color;
background-color: @pre-bg; background-color: $pre-bg;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
...@@ -61,6 +61,6 @@ pre { ...@@ -61,6 +61,6 @@ pre {
// Enable scrollable blocks of code // Enable scrollable blocks of code
.pre-scrollable { .pre-scrollable {
max-height: @pre-scrollable-max-height; max-height: $pre-scrollable-max-height;
overflow-y: scroll; overflow-y: scroll;
} }
less/_dropdown.less → scss/_dropdown.scss
View file @ bad40d5c
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
content: ""; content: "";
margin-left: .25rem; margin-left: .25rem;
vertical-align: middle; vertical-align: middle;
border-top: @caret-width-base solid; border-top: $caret-width-base solid;
border-right: @caret-width-base solid transparent; border-right: $caret-width-base solid transparent;
border-left: @caret-width-base solid transparent; border-left: $caret-width-base solid transparent;
} }
// Prevent the focus on the dropdown toggle when closing dropdowns // Prevent the focus on the dropdown toggle when closing dropdowns
...@@ -32,24 +32,24 @@ ...@@ -32,24 +32,24 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
z-index: @zindex-dropdown; z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
float: left; float: left;
min-width: 160px; min-width: 160px;
padding: 5px 0; padding: 5px 0;
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
font-size: @font-size-base; font-size: $font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg; background-color: $dropdown-bg;
border: 1px solid @dropdown-border; border: 1px solid $dropdown-border;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
.box-shadow(0 6px 12px rgba(0,0,0,.175)); @include box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box; background-clip: padding-box;
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
.divider { .divider {
.nav-divider(@dropdown-divider-bg); @include nav-divider($dropdown-divider-bg);
} }
// Links within the dropdown menu // Links within the dropdown menu
...@@ -58,8 +58,8 @@ ...@@ -58,8 +58,8 @@
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: @line-height-base; line-height: $line-height-base;
color: @dropdown-link-color; color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines white-space: nowrap; // prevent links from randomly breaking onto new lines
} }
} }
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
color: @dropdown-link-hover-color; color: $dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg; background-color: $dropdown-link-hover-bg;
} }
} }
...@@ -79,10 +79,10 @@ ...@@ -79,10 +79,10 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @dropdown-link-active-color; color: $dropdown-link-active-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
background-color: @dropdown-link-active-bg; background-color: $dropdown-link-active-bg;
} }
} }
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @dropdown-link-disabled-color; color: $dropdown-link-disabled-color;
} }
// Nuke hover/focus effects // Nuke hover/focus effects
...@@ -103,8 +103,8 @@ ...@@ -103,8 +103,8 @@
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
background-image: none; // Remove CSS gradient background-image: none; // Remove CSS gradient
.reset-filter(); @include reset-filter();
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
...@@ -144,9 +144,9 @@ ...@@ -144,9 +144,9 @@
.dropdown-header { .dropdown-header {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
font-size: @font-size-sm; font-size: $font-size-sm;
line-height: @line-height-base; line-height: $line-height-base;
color: @dropdown-header-color; color: $dropdown-header-color;
white-space: nowrap; // as with > li > a white-space: nowrap; // as with > li > a
} }
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
z-index: (@zindex-dropdown - 10); z-index: ($zindex-dropdown - 10);
} }
// Right aligned dropdowns // Right aligned dropdowns
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
// Reverse the caret // Reverse the caret
.caret { .caret {
border-top: 0; border-top: 0;
border-bottom: @caret-width-base solid; border-bottom: $caret-width-base solid;
content: ""; content: "";
} }
// Different positioning for bottom up menu // Different positioning for bottom up menu
...@@ -191,16 +191,18 @@ ...@@ -191,16 +191,18 @@
// Component alignment // Component alignment
// //
// Reiterate per navbar.less and the modified component alignment there. // Reiterate per navbar.less and the modified component alignment there.
//
.media-sm({ // TODO: remove?
.navbar-right {
.dropdown-menu { // @include media-sm {
.dropdown-menu-right(); // .navbar-right {
} // .dropdown-menu {
// Necessary for overrides of the default right aligned menu. // .dropdown-menu-right();
// Will remove come v4 in all likelihood. // }
.dropdown-menu-left { // // Necessary for overrides of the default right aligned menu.
.dropdown-menu-left(); // // Will remove come v4 in all likelihood.
} // .dropdown-menu-left {
} // .dropdown-menu-left();
}); // }
// }
// }
less/_forms.less → scss/_forms.scss
View file @ bad40d5c
...@@ -21,12 +21,12 @@ legend { ...@@ -21,12 +21,12 @@ legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
font-size: (@font-size-base * 1.5); font-size: ($font-size-base * 1.5);
line-height: inherit; line-height: inherit;
color: @legend-color; color: $legend-color;
border: 0; border: 0;
border-bottom: 1px solid @legend-border-color; border-bottom: 1px solid $legend-border-color;
} }
label { label {
...@@ -76,21 +76,23 @@ select[size] { ...@@ -76,21 +76,23 @@ select[size] {
input[type="file"]:focus, input[type="file"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
input[type="checkbox"]:focus { input[type="checkbox"]:focus {
.tab-focus(); @include tab-focus();
} }
// Adjust output element // Adjust output element
output { output {
display: block; display: block;
padding-top: (@padding-base-vertical + 1); padding-top: ($padding-base-vertical + 1);
font-size: @font-size-base; font-size: $font-size-base;
line-height: @line-height-base; line-height: $line-height-base;
color: @input-color; color: $input-color;
} }
//
// Common form controls // Common form controls
// //
// Shared size and type resets for form controls. Apply `.form-control` to any // Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls: // of the following form controls:
// //
...@@ -114,24 +116,24 @@ output { ...@@ -114,24 +116,24 @@ output {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal; padding: $padding-base-vertical $padding-base-horizontal;
font-size: @font-size-base; font-size: $font-size-base;
line-height: @line-height-base; line-height: $line-height-base;
color: @input-color; color: $input-color;
background-color: @input-bg; background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border; border: 1px solid $input-border;
.border-radius(@input-border-radius); @include border-radius($input-border-radius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus(); @include form-control-focus();
// Placeholder // Placeholder
&::placeholder { &::placeholder {
color: @input-color-placeholder; color: $input-color-placeholder;
} }
// Disabled and read-only inputs // Disabled and read-only inputs
...@@ -142,17 +144,17 @@ output { ...@@ -142,17 +144,17 @@ output {
&[disabled], &[disabled],
&[readonly], &[readonly],
fieldset[disabled] & { fieldset[disabled] & {
cursor: @cursor-disabled; cursor: $cursor-disabled;
background-color: @input-bg-disabled; background-color: $input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content opacity: 1; // iOS fix for unreadable disabled content
} }
}
// Reset height for `textarea`s // Reset height for `textarea`s
textarea& { textarea.form-control {
height: auto; height: auto;
padding-top: @padding-base-horizontal; padding-top: $padding-base-horizontal;
padding-bottom: @padding-base-horizontal; padding-bottom: $padding-base-horizontal;
}
} }
...@@ -180,19 +182,19 @@ input[type="search"] { ...@@ -180,19 +182,19 @@ input[type="search"] {
input[type="time"], input[type="time"],
input[type="datetime-local"], input[type="datetime-local"],
input[type="month"] { input[type="month"] {
line-height: @input-height-base; line-height: $input-height-base;
} }
input[type="date"].input-sm, input[type="date"].input-sm,
input[type="time"].input-sm, input[type="time"].input-sm,
input[type="datetime-local"].input-sm, input[type="datetime-local"].input-sm,
input[type="month"].input-sm { input[type="month"].input-sm {
line-height: @input-height-sm; line-height: $input-height-sm;
} }
input[type="date"].input-lg, input[type="date"].input-lg,
input[type="time"].input-lg, input[type="time"].input-lg,
input[type="datetime-local"].input-lg, input[type="datetime-local"].input-lg,
input[type="month"].input-lg { input[type="month"].input-lg {
line-height: @input-height-lg; line-height: $input-height-lg;
} }
} }
...@@ -219,7 +221,7 @@ input[type="search"] { ...@@ -219,7 +221,7 @@ input[type="search"] {
margin-bottom: 10px; margin-bottom: 10px;
label { label {
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
...@@ -265,7 +267,7 @@ input[type="checkbox"] { ...@@ -265,7 +267,7 @@ input[type="checkbox"] {
&[disabled], &[disabled],
&.disabled, &.disabled,
fieldset[disabled] & { fieldset[disabled] & {
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
// These classes are used directly on <label>s // These classes are used directly on <label>s
...@@ -273,7 +275,7 @@ input[type="checkbox"] { ...@@ -273,7 +275,7 @@ input[type="checkbox"] {
.checkbox-inline { .checkbox-inline {
&.disabled, &.disabled,
fieldset[disabled] & { fieldset[disabled] & {
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
// These classes are used on elements with <label> descendants // These classes are used on elements with <label> descendants
...@@ -282,7 +284,7 @@ input[type="checkbox"] { ...@@ -282,7 +284,7 @@ input[type="checkbox"] {
&.disabled, &.disabled,
fieldset[disabled] & { fieldset[disabled] & {
label { label {
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
} }
...@@ -295,8 +297,8 @@ input[type="checkbox"] { ...@@ -295,8 +297,8 @@ input[type="checkbox"] {
.form-control-static { .form-control-static {
// Size it appropriately next to real form controls // Size it appropriately next to real form controls
padding-top: (@padding-base-vertical + 1); padding-top: ($padding-base-vertical + 1);
padding-bottom: (@padding-base-vertical + 1); padding-bottom: ($padding-base-vertical + 1);
// Remove default margin from `p` // Remove default margin from `p`
margin-bottom: 0; margin-bottom: 0;
...@@ -316,22 +318,16 @@ input[type="checkbox"] { ...@@ -316,22 +318,16 @@ input[type="checkbox"] {
// The `.form-group-* form-control` variations are sadly duplicated to avoid the // The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm { @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
.input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
}
.form-group-sm { .form-group-sm {
.form-control { @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
.input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
}
} }
.input-lg { @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
.input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
}
.form-group-lg { .form-group-lg {
.form-control { @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
.input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
}
} }
...@@ -345,7 +341,7 @@ input[type="checkbox"] { ...@@ -345,7 +341,7 @@ input[type="checkbox"] {
// Ensure icons don't overlap text // Ensure icons don't overlap text
.form-control { .form-control {
padding-right: (@input-height-base * 1.25); padding-right: ($input-height-base * 1.25);
} }
} }
// Feedback icon // Feedback icon
...@@ -355,39 +351,39 @@ input[type="checkbox"] { ...@@ -355,39 +351,39 @@ input[type="checkbox"] {
right: 0; right: 0;
z-index: 2; // Ensure icon is above input groups z-index: 2; // Ensure icon is above input groups
display: block; display: block;
width: @input-height-base; width: $input-height-base;
height: @input-height-base; height: $input-height-base;
line-height: @input-height-base; line-height: $input-height-base;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
} }
.input-lg + .form-control-feedback { .input-lg + .form-control-feedback {
width: @input-height-lg; width: $input-height-lg;
height: @input-height-lg; height: $input-height-lg;
line-height: @input-height-lg; line-height: $input-height-lg;
} }
.input-sm + .form-control-feedback { .input-sm + .form-control-feedback {
width: @input-height-sm; width: $input-height-sm;
height: @input-height-sm; height: $input-height-sm;
line-height: @input-height-sm; line-height: $input-height-sm;
} }
// Feedback states // Form validation states
.has-success { .has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg); @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
} }
.has-warning { .has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
} }
.has-error { .has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
} }
// Reposition feedback icon if input has visible label above // Reposition feedback icon if input has visible label above
.has-feedback label { .has-feedback label {
& ~ .form-control-feedback { & ~ .form-control-feedback {
top: (@line-height-computed + 5); // Height of the `label` and its margin top: ($line-height-computed + 5); // Height of the `label` and its margin
} }
&.sr-only ~ .form-control-feedback { &.sr-only ~ .form-control-feedback {
top: 0; top: 0;
...@@ -404,7 +400,7 @@ input[type="checkbox"] { ...@@ -404,7 +400,7 @@ input[type="checkbox"] {
display: block; // account for any element using help-block display: block; // account for any element using help-block
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast color: lighten($text-color, 25%); // lighten the text some for contrast
} }
...@@ -422,7 +418,7 @@ input[type="checkbox"] { ...@@ -422,7 +418,7 @@ input[type="checkbox"] {
.form-inline { .form-inline {
// Kick in the inline // Kick in the inline
.media-sm({ @include media-sm {
// Inline-block all the things for "inline" // Inline-block all the things for "inline"
.form-group { .form-group {
display: inline-block; display: inline-block;
...@@ -487,7 +483,7 @@ input[type="checkbox"] { ...@@ -487,7 +483,7 @@ input[type="checkbox"] {
.has-feedback .form-control-feedback { .has-feedback .form-control-feedback {
top: 0; top: 0;
} }
}); }
} }
...@@ -507,36 +503,36 @@ input[type="checkbox"] { ...@@ -507,36 +503,36 @@ input[type="checkbox"] {
.checkbox-inline { .checkbox-inline {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: (@padding-base-vertical + .1); // Default padding plus a border padding-top: ($padding-base-vertical + .1); // Default padding plus a border
} }
// Account for padding we're adding to ensure the alignment and of help text // Account for padding we're adding to ensure the alignment and of help text
// and other content below items // and other content below items
.radio, .radio,
.checkbox { .checkbox {
min-height: (@line-height-computed + (@padding-base-vertical + .1)); min-height: ($line-height-computed + ($padding-base-vertical + .1));
} }
// Make form groups behave like rows // Make form groups behave like rows
.form-group { .form-group {
.make-row(); @include make-row();
} }
// Reset spacing and right align labels, but scope to media queries so that // Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example. // labels on narrow viewports stack the same as a default form example.
.media-sm({ @include media-sm {
.control-label { .control-label {
text-align: right; text-align: right;
margin-bottom: 0; margin-bottom: 0;
padding-top: (@padding-base-vertical + .1); // Default padding plus a border padding-top: ($padding-base-vertical + .1); // Default padding plus a border
} }
}); }
// Validation states // Validation states
// //
// Reposition the icon because it's now within a grid column and columns have // Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding. // `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback { .has-feedback .form-control-feedback {
right: (@grid-gutter-width / 2); right: ($grid-gutter-width / 2);
} }
// Form group sizes // Form group sizes
...@@ -544,16 +540,16 @@ input[type="checkbox"] { ...@@ -544,16 +540,16 @@ input[type="checkbox"] {
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`. // inputs and labels within a `.form-group`.
.form-group-lg { .form-group-lg {
@media (min-width: @screen-sm-min) { @media (min-width: $screen-sm-min) {
.control-label { .control-label {
padding-top: @padding-lg-vertical; padding-top: $padding-lg-vertical;
} }
} }
} }
.form-group-sm { .form-group-sm {
@media (min-width: @screen-sm-min) { @media (min-width: $screen-sm-min) {
.control-label { .control-label {
padding-top: (@padding-sm-vertical + .1); padding-top: ($padding-sm-vertical + .1);
} }
} }
} }
......
less/_grid.less → scss/_grid.scss
View file @ bad40d5c
...@@ -8,16 +8,16 @@ ...@@ -8,16 +8,16 @@
// Set the container width, and override it for fixed navbars in media queries. // Set the container width, and override it for fixed navbars in media queries.
.container { .container {
.make-container(); @include make-container();
@media (min-width: @screen-sm-min) { @media (min-width: $screen-sm-min) {
max-width: @container-sm; max-width: $container-sm;
} }
@media (min-width: @screen-md-min) { @media (min-width: $screen-md-min) {
max-width: @container-md; max-width: $container-md;
} }
@media (min-width: @screen-lg-min) { @media (min-width: $screen-lg-min) {
max-width: @container-lg; max-width: $container-lg;
} }
} }
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
// width for fluid, full width layouts. // width for fluid, full width layouts.
.container-fluid { .container-fluid {
.make-container(); @include make-container();
} }
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
// Rows contain and clear the floats of your columns. // Rows contain and clear the floats of your columns.
.row { .row {
.make-row(); @include make-row();
} }
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
// //
// Common styles for small and large grid columns // Common styles for small and large grid columns
.make-grid-columns(); @include make-grid-columns();
// Extra small grid // Extra small grid
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
// Columns, offsets, pushes, and pulls for extra small devices like // Columns, offsets, pushes, and pulls for extra small devices like
// smartphones. // smartphones.
.make-grid(xs); @include make-grid(xs);
// Small grid // Small grid
...@@ -61,24 +61,24 @@ ...@@ -61,24 +61,24 @@
// Columns, offsets, pushes, and pulls for the small device range, from phones // Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets. // to tablets.
.media-sm({ @include media-sm {
.make-grid(sm); @include make-grid(sm);
}); }
// Medium grid // Medium grid
// //
// Columns, offsets, pushes, and pulls for the desktop device range. // Columns, offsets, pushes, and pulls for the desktop device range.
.media-md({ @include media-md {
.make-grid(md); @include make-grid(md);
}); }
// Large grid // Large grid
// //
// Columns, offsets, pushes, and pulls for the large desktop device range. // Columns, offsets, pushes, and pulls for the large desktop device range.
.media-lg({ @include media-lg {
.make-grid(lg); @include make-grid(lg);
}); }
less/_input-group.less → scss/_input-group.scss
View file @ bad40d5c
...@@ -40,12 +40,12 @@ ...@@ -40,12 +40,12 @@
.input-group-lg > .form-control, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-group-lg > .input-group-btn > .btn {
.input-lg(); @extend .input-lg;
} }
.input-group-sm > .form-control, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon, .input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-group-sm > .input-group-btn > .btn {
.input-sm(); @extend .input-sm;
} }
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
display: table-cell; display: table-cell;
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
border-radius: 0; @include border-radius(0);
} }
} }
// Addon and addon wrapper for buttons // Addon and addon wrapper for buttons
...@@ -71,26 +71,26 @@ ...@@ -71,26 +71,26 @@
// Text input groups // Text input groups
// ------------------------- // -------------------------
.input-group-addon { .input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal; padding: $padding-base-vertical $padding-base-horizontal;
font-size: @font-size-base; font-size: $font-size-base;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @input-color; color: $input-color;
text-align: center; text-align: center;
background-color: @input-group-addon-bg; background-color: $input-group-addon-bg;
border: 1px solid @input-group-addon-border-color; border: 1px solid $input-group-addon-border-color;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
// Sizing // Sizing
&.input-sm { &.input-sm {
padding: @padding-sm-vertical @padding-smhorizontal; padding: $padding-sm-vertical $padding-sm-horizontal;
font-size: @font-size-sm; font-size: $font-size-sm;
.border-radius(@border-radius-sm); @include border-radius($border-radius-sm);
} }
&.input-lg { &.input-lg {
padding: @padding-lg-vertical @padding-lg-horizontal; padding: $padding-lg-vertical $padding-lg-horizontal;
font-size: @font-size-lg; font-size: $font-size-lg;
.border-radius(@border-radius-lg); @include border-radius($border-radius-lg);
} }
// Nuke default margins from checkboxes and radios to vertically center within. // Nuke default margins from checkboxes and radios to vertically center within.
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
.input-group-btn:first-child > .dropdown-toggle, .input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0); @include border-right-radius(0);
} }
.input-group-addon:first-child { .input-group-addon:first-child {
border-right: 0; border-right: 0;
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
.input-group-btn:last-child > .dropdown-toggle, .input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0); @include border-left-radius(0);
} }
.input-group-addon:last-child { .input-group-addon:last-child {
border-left: 0; border-left: 0;
......
less/_jumbotron.less → scss/_jumbotron.scss
View file @ bad40d5c
...@@ -4,14 +4,14 @@ ...@@ -4,14 +4,14 @@
.jumbotron { .jumbotron {
padding: @jumbotron-padding (@jumbotron-padding / 2); padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: @jumbotron-padding; margin-bottom: $jumbotron-padding;
color: @jumbotron-color; color: $jumbotron-color;
background-color: @jumbotron-bg; background-color: $jumbotron-bg;
.container &, .container &,
.container-fluid & { .container-fluid & {
.border-radius(@border-radius-lg); // Only round corners at higher resolutions if contained in a container @include border-radius($border-radius-lg); // Only round corners at higher resolutions if contained in a container
} }
.container { .container {
...@@ -20,25 +20,25 @@ ...@@ -20,25 +20,25 @@
} }
.jumbotron-heading { .jumbotron-heading {
color: @jumbotron-heading-color; color: $jumbotron-heading-color;
} }
.jumbotron-hr { .jumbotron-hr {
border-top-color: darken(@jumbotron-bg, 10%); border-top-color: darken($jumbotron-bg, 10%);
} }
.media-sm({ @include media-sm {
.jumbotron { .jumbotron {
padding: (@jumbotron-padding * 1.6) 0; padding: ($jumbotron-padding * 1.6) 0;
.container &, .container &,
.container-fluid & { .container-fluid & {
padding-left: (@jumbotron-padding * 2); padding-left: ($jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2); padding-right: ($jumbotron-padding * 2);
} }
} }
.jumbotron-heading { .jumbotron-heading {
font-size: (@font-size-base * 4.5); font-size: ($font-size-base * 4.5);
} }
}); }
less/_labels.less → scss/_labels.scss
View file @ bad40d5c
...@@ -8,21 +8,11 @@ ...@@ -8,21 +8,11 @@
font-size: 75%; font-size: 75%;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
color: @label-color; color: $label-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
.border-radius(); @include border-radius();
// Add hover effects, but only for links
a& {
&:hover,
&:focus {
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Empty labels collapse automatically // Empty labels collapse automatically
&:empty { &:empty {
...@@ -36,29 +26,39 @@ ...@@ -36,29 +26,39 @@
} }
} }
// Add hover effects, but only for links
a.label {
&:hover,
&:focus {
color: $label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Colors // Colors
// Contextual variations (linked labels get darker on :hover) // Contextual variations (linked labels get darker on :hover)
.label-default { .label-default {
.label-variant(@label-default-bg); @include label-variant($label-default-bg);
} }
.label-primary { .label-primary {
.label-variant(@label-primary-bg); @include label-variant($label-primary-bg);
} }
.label-success { .label-success {
.label-variant(@label-success-bg); @include label-variant($label-success-bg);
} }
.label-info { .label-info {
.label-variant(@label-info-bg); @include label-variant($label-info-bg);
} }
.label-warning { .label-warning {
.label-variant(@label-warning-bg); @include label-variant($label-warning-bg);
} }
.label-danger { .label-danger {
.label-variant(@label-danger-bg); @include label-variant($label-danger-bg);
} }
less/_list-group.less → scss/_list-group.scss
View file @ bad40d5c
...@@ -24,16 +24,16 @@ ...@@ -24,16 +24,16 @@
padding: 10px 15px; padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling // Place the border on the list items and negative margin up for better styling
margin-bottom: -1px; margin-bottom: -1px;
background-color: @list-group-bg; background-color: $list-group-bg;
border: 1px solid @list-group-border; border: 1px solid $list-group-border;
// Round the first and last items // Round the first and last items
&:first-child { &:first-child {
.border-top-radius(@list-group-border-radius); @include border-top-radius($list-group-border-radius);
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius); @include border-bottom-radius($list-group-border-radius);
} }
} }
...@@ -44,18 +44,18 @@ ...@@ -44,18 +44,18 @@
// Includes an extra `.active` modifier class for showing selected items. // Includes an extra `.active` modifier class for showing selected items.
a.list-group-item { a.list-group-item {
color: @list-group-link-color; color: $list-group-link-color;
.list-group-item-heading { .list-group-item-heading {
color: @list-group-link-heading-color; color: $list-group-link-heading-color;
} }
// Hover state // Hover state
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
color: @list-group-link-hover-color; color: $list-group-link-hover-color;
background-color: @list-group-hover-bg; background-color: $list-group-hover-bg;
} }
} }
...@@ -64,16 +64,16 @@ a.list-group-item { ...@@ -64,16 +64,16 @@ a.list-group-item {
&.disabled, &.disabled,
&.disabled:hover, &.disabled:hover,
&.disabled:focus { &.disabled:focus {
background-color: @list-group-disabled-bg; background-color: $list-group-disabled-bg;
color: @list-group-disabled-color; color: $list-group-disabled-color;
cursor: @cursor-disabled; cursor: $cursor-disabled;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading { .list-group-item-heading {
color: inherit; color: inherit;
} }
.list-group-item-text { .list-group-item-text {
color: @list-group-disabled-text-color; color: $list-group-disabled-text-color;
} }
} }
...@@ -82,9 +82,9 @@ a.list-group-item { ...@@ -82,9 +82,9 @@ a.list-group-item {
&.active:hover, &.active:hover,
&.active:focus { &.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color; color: $list-group-active-color;
background-color: @list-group-active-bg; background-color: $list-group-active-bg;
border-color: @list-group-active-border; border-color: $list-group-active-border;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading, .list-group-item-heading,
...@@ -93,7 +93,7 @@ a.list-group-item { ...@@ -93,7 +93,7 @@ a.list-group-item {
color: inherit; color: inherit;
} }
.list-group-item-text { .list-group-item-text {
color: @list-group-active-text-color; color: $list-group-active-text-color;
} }
} }
} }
...@@ -104,10 +104,10 @@ a.list-group-item { ...@@ -104,10 +104,10 @@ a.list-group-item {
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text); @include list-group-item-variant(success, $state-success-bg, $state-success-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text); @include list-group-item-variant(info, $state-info-bg, $state-info-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text); @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text); @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
// Custom content options // Custom content options
......
scss/_mixins.scss 0 → 100644
View file @ bad40d5c
// Mixins
// --------------------------------------------------
// Toggles
//
// Used in conjuntion with global variables to enable certain theme features.
@mixin border-radius($radius: $border-radius-base) {
@if $enable-rounded {
border-radius: $radius;
}
}
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
@mixin transition($transition...) {
@if $enable-transitions {
transition: $transition;
}
}
// Utilities
@import "mixins/media-queries";
@import "mixins/hide-text";
@import "mixins/image";
@import "mixins/label";
@import "mixins/reset-filter";
@import "mixins/resize";
@import "mixins/responsive-visibility";
@import "mixins/size";
@import "mixins/tab-focus";
@import "mixins/text-emphasis";
@import "mixins/text-overflow";
// // Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/pagination";
@import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms";
@import "mixins/progress";
@import "mixins/table-row";
// // Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/gradients";
// // Layout
@import "mixins/clearfix";
@import "mixins/center-block";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";
less/_modal.less → scss/_modal.scss
View file @ bad40d5c
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @zindex-modal; z-index: $zindex-modal;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see // Prevent Chrome on Windows from adding a focus outline. For details, see
...@@ -50,10 +50,10 @@ ...@@ -50,10 +50,10 @@
// Actual modal // Actual modal
.modal-content { .modal-content {
position: relative; position: relative;
background-color: @modal-content-bg; background-color: $modal-content-bg;
border: 1px solid @modal-content-border-color; border: 1px solid $modal-content-border-color;
border-radius: @border-radius-lg; border-radius: $border-radius-lg;
.box-shadow(0 3px 9px rgba(0,0,0,.5)); @include box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box; background-clip: padding-box;
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: 0; outline: 0;
...@@ -65,18 +65,18 @@ ...@@ -65,18 +65,18 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
background-color: @modal-backdrop-bg; background-color: $modal-backdrop-bg;
// Fade for backdrop // Fade for backdrop
&.fade { opacity: 0; } &.fade { opacity: 0; }
&.in { opacity: @modal-backdrop-opacity; } &.in { opacity: $modal-backdrop-opacity; }
} }
// Modal header // Modal header
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss
.modal-header { .modal-header {
padding: @modal-title-padding; padding: $modal-title-padding;
border-bottom: 1px solid @modal-header-border-color; border-bottom: 1px solid $modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height); min-height: ($modal-title-padding + $modal-title-line-height);
} }
// Close icon // Close icon
.modal-header .close { .modal-header .close {
...@@ -86,22 +86,22 @@ ...@@ -86,22 +86,22 @@
// Title text within header // Title text within header
.modal-title { .modal-title {
margin: 0; margin: 0;
line-height: @modal-title-line-height; line-height: $modal-title-line-height;
} }
// Modal body // Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer) // Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body { .modal-body {
position: relative; position: relative;
padding: @modal-inner-padding; padding: $modal-inner-padding;
} }
// Footer (for actions) // Footer (for actions)
.modal-footer { .modal-footer {
padding: @modal-inner-padding; padding: $modal-inner-padding;
text-align: right; // right align buttons text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color; border-top: 1px solid $modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons @include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons // Properly space out buttons
.btn + .btn { .btn + .btn {
...@@ -128,20 +128,20 @@ ...@@ -128,20 +128,20 @@
} }
// Scale up the modal // Scale up the modal
@media (min-width: @screen-sm-min) { @media (min-width: $screen-sm-min) {
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
.modal-dialog { .modal-dialog {
width: @modal-md; width: $modal-md;
margin: 30px auto; margin: 30px auto;
} }
.modal-content { .modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5)); @include box-shadow(0 5px 15px rgba(0,0,0,.5));
} }
// Modal sizes // Modal sizes
.modal-sm { width: @modal-sm; } .modal-sm { width: $modal-sm; }
} }
@media (min-width: @screen-md-min) { @media (min-width: $screen-md-min) {
.modal-lg { width: @modal-lg; } .modal-lg { width: $modal-lg; }
} }
less/_nav.less → scss/_nav.scss
View file @ bad40d5c
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
.nav { .nav {
margin-bottom: 0; margin-bottom: 0;
.list-unstyled(); @extend .list-unstyled;
&:extend(.clearfix all); @include clearfix();
} }
.nav-item { .nav-item {
...@@ -15,26 +15,26 @@ ...@@ -15,26 +15,26 @@
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: @nav-link-padding; padding: $nav-link-padding;
line-height: @line-height-base; line-height: $line-height-base;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: @nav-link-hover-bg; background-color: $nav-link-hover-bg;
} }
// Disabled state sets text to gray and nukes hover/tab effects // Disabled state sets text to gray and nukes hover/tab effects
.disabled > &, .disabled > &,
&.disabled { &.disabled {
color: @nav-disabled-link-color; color: $nav-disabled-link-color;
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @nav-disabled-link-hover-color; color: $nav-disabled-link-hover-color;
background-color: transparent; background-color: transparent;
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
} }
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
// //
.nav-tabs { .nav-tabs {
border-bottom: 1px solid @nav-tabs-border-color; border-bottom: 1px solid $nav-tabs-border-color;
.nav-item { .nav-item {
float: left; float: left;
...@@ -60,11 +60,11 @@ ...@@ -60,11 +60,11 @@
.nav-link { .nav-link {
display: block; display: block;
border: 1px solid transparent; border: 1px solid transparent;
.border-radius(@border-radius-base @border-radius-base 0 0); @include border-radius($border-radius-base $border-radius-base 0 0);
&:hover, &:hover,
&:focus { &:focus {
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
} }
} }
...@@ -75,9 +75,9 @@ ...@@ -75,9 +75,9 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @nav-tabs-active-link-hover-color; color: $nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg; background-color: $nav-tabs-active-link-hover-bg;
border-color: @nav-tabs-active-link-hover-border-color @nav-tabs-active-link-hover-border-color transparent; border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
} }
} }
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @nav-disabled-link-color; color: $nav-disabled-link-color;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
.nav-link { .nav-link {
display: block; display: block;
.border-radius(@nav-pills-border-radius); @include border-radius($nav-pills-border-radius);
} }
.open > .nav-link, .open > .nav-link,
...@@ -119,8 +119,8 @@ ...@@ -119,8 +119,8 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @component-active-color; color: $component-active-color;
background-color: @component-active-bg; background-color: $component-active-bg;
cursor: default; cursor: default;
} }
} }
...@@ -164,5 +164,5 @@ ...@@ -164,5 +164,5 @@
// Make dropdown border overlap tab border // Make dropdown border overlap tab border
margin-top: -1px; margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu // Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0); @include border-top-radius(0);
} }
less/_navbar.less → scss/_navbar.scss
View file @ bad40d5c
...@@ -10,16 +10,16 @@ ...@@ -10,16 +10,16 @@
.navbar { .navbar {
position: relative; position: relative;
padding: @spacer; padding: $spacer;
/*min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)*/ /*min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)*/
margin-bottom: @navbar-margin-bottom; margin-bottom: $navbar-margin-bottom;
/*border: 1px solid transparent;*/ /*border: 1px solid transparent;*/
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
&:extend(.clearfix all); @include clearfix();
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
.border-radius(@navbar-border-radius); @include border-radius($navbar-border-radius);
} }
} }
...@@ -32,11 +32,11 @@ ...@@ -32,11 +32,11 @@
// Static top (unfixed, but 100% wide) navbar // Static top (unfixed, but 100% wide) navbar
.navbar-static-top { .navbar-static-top {
z-index: @zindex-navbar; z-index: $zindex-navbar;
border-width: 0 0 1px; border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
border-radius: 0; @include border-radius(0);
} }
} }
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindex-navbar-fixed; z-index: $zindex-navbar-fixed;
// Undo the rounded corners // Undo the rounded corners
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
border-radius: 0; @include border-radius(0);
} }
} }
.navbar-fixed-top { .navbar-fixed-top {
...@@ -69,11 +69,11 @@ ...@@ -69,11 +69,11 @@
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .55rem .75rem; padding: .55rem .75rem;
margin-right: @spacer; margin-right: $spacer;
margin-bottom: 0; // For headings margin-bottom: 0; // For headings
font-size: @font-size-lg; font-size: $font-size-lg;
line-height: @line-height-computed; line-height: $line-height-computed;
/*height: @navbar-height;*/ /*height: $navbar-height;*/
> a:hover, > a:hover,
> a:focus { > a:focus {
...@@ -83,15 +83,6 @@ ...@@ -83,15 +83,6 @@
> img { > img {
display: block; display: block;
} }
/*
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
*/
} }
...@@ -103,10 +94,10 @@ ...@@ -103,10 +94,10 @@
.navbar-toggler { .navbar-toggler {
float: left; float: left;
padding: .55rem .75rem; padding: .55rem .75rem;
margin-right: @spacer; margin-right: $spacer;
margin-bottom: 0; // For headings margin-bottom: 0; // For headings
font-size: @font-size-lg; font-size: $font-size-lg;
line-height: @line-height-computed; line-height: $line-height-computed;
background: none; background: none;
border: 0; border: 0;
...@@ -122,53 +113,57 @@ ...@@ -122,53 +113,57 @@
// Builds on top of the `.nav` components with its own modifier class to make // Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px). // the nav the full height of the horizontal nav (above 768px).
.navbar-nav { // .navbar-nav {
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; // margin: ($navbar-padding-vertical / 2) -$navbar-padding-horizontal;
> li > a { // > li > a {
padding-top: 10px; // padding-top: 10px;
padding-bottom: 10px; // padding-bottom: 10px;
line-height: @line-height-computed; // line-height: $line-height-computed;
} // }
@media (max-width: @grid-float-breakpoint-max) { // @media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed // // Dropdowns get custom display when collapsed
.open .dropdown-menu { // .open .dropdown-menu {
position: static; // position: static;
float: none; // float: none;
width: auto; // width: auto;
margin-top: 0; // margin-top: 0;
background-color: transparent; // background-color: transparent;
border: 0; // border: 0;
.box-shadow(none); // @include box-shadow(none);
> li > a,
.dropdown-header { // > li > a,
padding: 5px 15px 5px 25px; // .dropdown-header {
} // padding: 5px 15px 5px 25px;
> li > a { // }
line-height: @line-height-computed;
&:hover, // > li > a {
&:focus { // line-height: $line-height-computed;
background-image: none;
} // &:hover,
} // &:focus {
} // background-image: none;
} // }
// }
// Uncollapse the nav // }
@media (min-width: @grid-float-breakpoint) { // }
float: left;
margin: 0; // // Uncollapse the nav
// @media (min-width: $grid-float-breakpoint) {
> li { // float: left;
float: left; // margin: 0;
> a {
padding-top: @navbar-padding-vertical; // > li {
padding-bottom: @navbar-padding-vertical; // float: left;
}
} // > a {
} // padding-top: $navbar-padding-vertical;
} // padding-bottom: $navbar-padding-vertical;
// }
// }
// }
// }
// Navbar form // Navbar form
...@@ -177,18 +172,18 @@ ...@@ -177,18 +172,18 @@
// our navbars. // our navbars.
.navbar-form { .navbar-form {
margin-left: -@navbar-padding-horizontal; margin-left: -$navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal; margin-right: -$navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal; padding: 10px $navbar-padding-horizontal;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
// Mixin behavior for optimum display // Mixin behavior for optimum display
.form-inline(); @extend .form-inline;
.form-group { .form-group {
@media (max-width: @grid-float-breakpoint-max) { @media (max-width: $grid-float-breakpoint-max) {
margin-bottom: 5px; margin-bottom: 5px;
&:last-child { &:last-child {
...@@ -198,17 +193,17 @@ ...@@ -198,17 +193,17 @@
} }
// Vertically center in expanded, horizontal navbar // Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base); // @include navbar-vertical-align($input-height-base);
// Undo 100% width for pull classes // Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
width: auto; width: auto;
border: 0; border: 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
.box-shadow(none); @include box-shadow(none);
} }
} }
...@@ -218,12 +213,12 @@ ...@@ -218,12 +213,12 @@
// Menu position and menu carets // Menu position and menu carets
.navbar-nav > li > .dropdown-menu { .navbar-nav > li > .dropdown-menu {
margin-top: 0; margin-top: 0;
.border-top-radius(0); @include border-top-radius(0);
} }
// Menu position and menu caret support for dropups via extra dropup class // Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-top-radius(@navbar-border-radius); @include border-top-radius($navbar-border-radius);
.border-bottom-radius(0); @include border-bottom-radius(0);
} }
...@@ -231,16 +226,16 @@ ...@@ -231,16 +226,16 @@
// //
// Vertically center a button within a navbar (when *not* in a form). // Vertically center a button within a navbar (when *not* in a form).
.navbar-btn { // .navbar-btn {
.navbar-vertical-align(@input-height-base); // @include navbar-vertical-align($input-height-base);
&.btn-sm { // &.btn-sm {
.navbar-vertical-align(@input-height-sm); // @include navbar-vertical-align($input-height-sm);
} // }
&.btn-xs { // &.btn-xs {
.navbar-vertical-align(22); // @include navbar-vertical-align(22);
} // }
} // }
// Text in navbars // Text in navbars
...@@ -248,12 +243,12 @@ ...@@ -248,12 +243,12 @@
// Add a class to make any element properly align itself vertically within the navbars. // Add a class to make any element properly align itself vertically within the navbars.
.navbar-text { .navbar-text {
.navbar-vertical-align(@line-height-computed); // @include navbar-vertical-align($line-height-computed);
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
float: left; float: left;
margin-left: @navbar-padding-horizontal; margin-left: $navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal; margin-right: $navbar-padding-horizontal;
} }
} }
...@@ -266,11 +261,13 @@ ...@@ -266,11 +261,13 @@
// //
// Declared after the navbar components to ensure more specificity on the margins. // Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
.navbar-left { .pull-left(); } .navbar-left {
@extend .pull-left;
}
.navbar-right { .navbar-right {
.pull-right(); @extend .pull-right;
margin-right: -@navbar-padding-horizontal; margin-right: -$navbar-padding-horizontal;
~ .navbar-right { ~ .navbar-right {
margin-right: 0; margin-right: 0;
...@@ -284,64 +281,64 @@ ...@@ -284,64 +281,64 @@
// Default navbar // Default navbar
.navbar-default { .navbar-default {
background-color: @navbar-default-bg; background-color: $navbar-default-bg;
border-color: @navbar-default-border; border-color: $navbar-default-border;
.navbar-brand { .navbar-brand {
color: @navbar-default-brand-color; color: $navbar-default-brand-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-brand-hover-color; color: $navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg; background-color: $navbar-default-brand-hover-bg;
} }
} }
.navbar-text { .navbar-text {
color: @navbar-default-color; color: $navbar-default-color;
} }
.navbar-nav { .navbar-nav {
> li > a { > li > a {
color: @navbar-default-link-color; color: $navbar-default-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg; background-color: $navbar-default-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-active-color; color: $navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg; background-color: $navbar-default-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-disabled-color; color: $navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg; background-color: $navbar-default-link-disabled-bg;
} }
} }
} }
.navbar-toggle { .navbar-toggle {
border-color: @navbar-default-toggle-border-color; border-color: $navbar-default-toggle-border-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-default-toggle-hover-bg; background-color: $navbar-default-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg; background-color: $navbar-default-toggle-icon-bar-bg;
} }
} }
.navbar-collapse, .navbar-collapse,
.navbar-form { .navbar-form {
border-color: @navbar-default-border; border-color: $navbar-default-border;
} }
// Dropdown menu items // Dropdown menu items
...@@ -351,36 +348,36 @@ ...@@ -351,36 +348,36 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-default-link-active-bg; background-color: $navbar-default-link-active-bg;
color: @navbar-default-link-active-color; color: $navbar-default-link-active-color;
} }
} }
@media (max-width: @grid-float-breakpoint-max) { @media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed // Dropdowns get custom display when collapsed
.open .dropdown-menu { .open .dropdown-menu {
> li > a { > li > a {
color: @navbar-default-link-color; color: $navbar-default-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg; background-color: $navbar-default-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-active-color; color: $navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg; background-color: $navbar-default-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-disabled-color; color: $navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg; background-color: $navbar-default-link-disabled-bg;
} }
} }
} }
...@@ -393,23 +390,23 @@ ...@@ -393,23 +390,23 @@
// Add a class to ensure links outside the navbar nav are colored correctly. // Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link { .navbar-link {
color: @navbar-default-link-color; color: $navbar-default-link-color;
&:hover { &:hover {
color: @navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
} }
} }
.btn-link { .btn-link {
color: @navbar-default-link-color; color: $navbar-default-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-hover-color; color: $navbar-default-link-hover-color;
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-disabled-color; color: $navbar-default-link-disabled-color;
} }
} }
} }
...@@ -418,89 +415,89 @@ ...@@ -418,89 +415,89 @@
// Inverse navbar // Inverse navbar
.navbar-inverse { .navbar-inverse {
background-color: @navbar-inverse-bg; background-color: $navbar-inverse-bg;
border-color: @navbar-inverse-border; border-color: $navbar-inverse-border;
.navbar-toggler, .navbar-toggler,
.navbar-brand > a, .navbar-brand > a,
.nav-pills > .nav-item > .nav-link { .nav-pills > .nav-item > .nav-link {
color: @navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
} }
} }
.nav-pills > .nav-item > .nav-link { .nav-pills > .nav-item > .nav-link {
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
} }
.nav-pills > .active > .nav-link, .nav-pills > .active > .nav-link,
.nav-pills > .nav-link.active { .nav-pills > .nav-link.active {
color: @navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
.navbar-brand { .navbar-brand {
color: @navbar-inverse-brand-color; color: $navbar-inverse-brand-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-brand-hover-color; color: $navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg; background-color: $navbar-inverse-brand-hover-bg;
} }
} }
.navbar-text { .navbar-text {
color: @navbar-inverse-color; color: $navbar-inverse-color;
} }
.navbar-nav { .navbar-nav {
> li > a { > li > a {
color: @navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg; background-color: $navbar-inverse-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-disabled-color; color: $navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg; background-color: $navbar-inverse-link-disabled-bg;
} }
} }
} }
// Darken the responsive nav toggle // Darken the responsive nav toggle
.navbar-toggle { .navbar-toggle {
border-color: @navbar-inverse-toggle-border-color; border-color: $navbar-inverse-toggle-border-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-inverse-toggle-hover-bg; background-color: $navbar-inverse-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg; background-color: $navbar-inverse-toggle-icon-bar-bg;
} }
} }
.navbar-collapse, .navbar-collapse,
.navbar-form { .navbar-form {
border-color: darken(@navbar-inverse-bg, 7%); border-color: darken($navbar-inverse-bg, 7%);
} }
// Dropdowns // Dropdowns
...@@ -509,42 +506,42 @@ ...@@ -509,42 +506,42 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
} }
} }
@media (max-width: @grid-float-breakpoint-max) { @media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display // Dropdowns get custom display
.open .dropdown-menu { .open .dropdown-menu {
> .dropdown-header { > .dropdown-header {
border-color: @navbar-inverse-border; border-color: $navbar-inverse-border;
} }
.divider { .divider {
background-color: @navbar-inverse-border; background-color: $navbar-inverse-border;
} }
> li > a { > li > a {
color: @navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg; background-color: $navbar-inverse-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-disabled-color; color: $navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg; background-color: $navbar-inverse-link-disabled-bg;
} }
} }
} }
...@@ -552,23 +549,25 @@ ...@@ -552,23 +549,25 @@
} }
.navbar-link { .navbar-link {
color: @navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover { &:hover {
color: @navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
} }
} }
.btn-link { .btn-link {
color: @navbar-inverse-link-color; color: $navbar-inverse-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-disabled-color; color: $navbar-inverse-link-disabled-color;
} }
} }
} }
......
less/_pager.less → scss/_pager.scss
View file @ bad40d5c
...@@ -5,25 +5,27 @@ ...@@ -5,25 +5,27 @@
.pager { .pager {
padding-left: 0; padding-left: 0;
margin: @line-height-computed 0; margin: $line-height-computed 0;
list-style: none; list-style: none;
text-align: center; text-align: center;
&:extend(.clearfix all); @include clearfix();
li { li {
display: inline; display: inline;
> a, > a,
> span { > span {
display: inline-block; display: inline-block;
padding: 5px 14px; padding: 5px 14px;
background-color: @pager-bg; background-color: $pager-bg;
border: 1px solid @pager-border; border: 1px solid $pager-border;
border-radius: @pager-border-radius; border-radius: $pager-border-radius;
} }
> a:hover, > a:hover,
> a:focus { > a:focus {
text-decoration: none; text-decoration: none;
background-color: @pager-hover-bg; background-color: $pager-hover-bg;
} }
} }
...@@ -46,9 +48,9 @@ ...@@ -46,9 +48,9 @@
> a:hover, > a:hover,
> a:focus, > a:focus,
> span { > span {
color: @pager-disabled-color; color: $pager-disabled-color;
background-color: @pager-bg; background-color: $pager-bg;
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
} }
less/_pagination.less → scss/_pagination.scss
View file @ bad40d5c
...@@ -4,34 +4,35 @@ ...@@ -4,34 +4,35 @@
.pagination { .pagination {
display: inline-block; display: inline-block;
padding-left: 0; padding-left: 0;
margin: @line-height-computed 0; margin: $line-height-computed 0;
border-radius: @border-radius-base; @include border-radius();
> li { > li {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
> a, > a,
> span { > span {
position: relative; position: relative;
float: left; // Collapse white-space float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal; padding: $padding-base-vertical $padding-base-horizontal;
line-height: @line-height-base; line-height: $line-height-base;
text-decoration: none; text-decoration: none;
color: @pagination-color; color: $pagination-color;
background-color: @pagination-bg; background-color: $pagination-bg;
border: 1px solid @pagination-border; border: 1px solid $pagination-border;
margin-left: -1px; margin-left: -1px;
} }
&:first-child { &:first-child {
> a, > a,
> span { > span {
margin-left: 0; margin-left: 0;
.border-left-radius(@border-radius-base); @include border-left-radius($border-radius-base);
} }
} }
&:last-child { &:last-child {
> a, > a,
> span { > span {
.border-right-radius(@border-radius-base); @include border-right-radius($border-radius-base);
} }
} }
} }
...@@ -40,9 +41,9 @@ ...@@ -40,9 +41,9 @@
> li > span { > li > span {
&:hover, &:hover,
&:focus { &:focus {
color: @pagination-hover-color; color: $pagination-hover-color;
background-color: @pagination-hover-bg; background-color: $pagination-hover-bg;
border-color: @pagination-hover-border; border-color: $pagination-hover-border;
} }
} }
...@@ -52,9 +53,9 @@ ...@@ -52,9 +53,9 @@
&:hover, &:hover,
&:focus { &:focus {
z-index: 2; z-index: 2;
color: @pagination-active-color; color: $pagination-active-color;
background-color: @pagination-active-bg; background-color: $pagination-active-bg;
border-color: @pagination-active-border; border-color: $pagination-active-border;
cursor: default; cursor: default;
} }
} }
...@@ -66,10 +67,10 @@ ...@@ -66,10 +67,10 @@
> a, > a,
> a:hover, > a:hover,
> a:focus { > a:focus {
color: @pagination-disabled-color; color: $pagination-disabled-color;
background-color: @pagination-disabled-bg; background-color: $pagination-disabled-bg;
border-color: @pagination-disabled-border; border-color: $pagination-disabled-border;
cursor: @cursor-disabled; cursor: $cursor-disabled;
} }
} }
} }
...@@ -79,10 +80,10 @@ ...@@ -79,10 +80,10 @@
// Large // Large
.pagination-lg { .pagination-lg {
.pagination-size(@padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @border-radius-lg); @include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $border-radius-lg);
} }
// Small // Small
.pagination-sm { .pagination-sm {
.pagination-size(@padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @border-radius-sm); @include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $border-radius-sm);
} }
less/_popover.less → scss/_popover.scss
View file @ bad40d5c
...@@ -7,39 +7,39 @@ ...@@ -7,39 +7,39 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: @zindex-popover; z-index: $zindex-popover;
display: none; display: none;
max-width: @popover-max-width; max-width: $popover-max-width;
padding: 1px; padding: 1px;
// Reset font and text propertes given new insertion method // Reset font and text propertes given new insertion method
font-family: @font-family-base; font-family: $font-family-base;
font-size: @font-size-base; font-size: $font-size-base;
font-weight: normal; font-weight: normal;
line-height: @line-height-base; line-height: $line-height-base;
text-align: left; text-align: left;
background-color: @popover-bg; background-color: $popover-bg;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid @popover-border-color; border: 1px solid $popover-border-color;
.border-radius(@border-radius-lg); @include border-radius($border-radius-lg);
.box-shadow(0 5px 10px rgba(0,0,0,.2)); @include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion // Overrides for proper insertion
white-space: normal; white-space: normal;
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; } &.top { margin-top: -$popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; } &.right { margin-left: $popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; } &.bottom { margin-top: $popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; } &.left { margin-left: -$popover-arrow-width; }
} }
.popover-title { .popover-title {
margin: 0; // reset heading margin margin: 0; // reset heading margin
padding: 8px 14px; padding: 8px 14px;
font-size: @font-size-base; font-size: $font-size-base;
background-color: @popover-title-bg; background-color: $popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%); border-bottom: 1px solid darken($popover-title-bg, 5%);
border-radius: (@border-radius-lg - 1) (@border-radius-lg - 1) 0 0; @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
} }
.popover-content { .popover-content {
...@@ -62,69 +62,69 @@ ...@@ -62,69 +62,69 @@
} }
} }
.popover > .arrow { .popover > .arrow {
border-width: @popover-arrow-outer-width; border-width: $popover-arrow-outer-width;
} }
.popover > .arrow:after { .popover > .arrow:after {
border-width: @popover-arrow-width; border-width: $popover-arrow-width;
content: ""; content: "";
} }
.popover { .popover {
&.top > .arrow { &.top > .arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: @popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width; bottom: -$popover-arrow-outer-width;
&:after { &:after {
content: " "; content: " ";
bottom: 1px; bottom: 1px;
margin-left: -@popover-arrow-width; margin-left: -$popover-arrow-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: @popover-arrow-color; border-top-color: $popover-arrow-color;
} }
} }
&.right > .arrow { &.right > .arrow {
top: 50%; top: 50%;
left: -@popover-arrow-outer-width; left: -$popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
border-left-width: 0; border-left-width: 0;
border-right-color: @popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
&:after { &:after {
content: " "; content: " ";
left: 1px; left: 1px;
bottom: -@popover-arrow-width; bottom: -$popover-arrow-width;
border-left-width: 0; border-left-width: 0;
border-right-color: @popover-arrow-color; border-right-color: $popover-arrow-color;
} }
} }
&.bottom > .arrow { &.bottom > .arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: @popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
top: -@popover-arrow-outer-width; top: -$popover-arrow-outer-width;
&:after { &:after {
content: " "; content: " ";
top: 1px; top: 1px;
margin-left: -@popover-arrow-width; margin-left: -$popover-arrow-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: @popover-arrow-color; border-bottom-color: $popover-arrow-color;
} }
} }
&.left > .arrow { &.left > .arrow {
top: 50%; top: 50%;
right: -@popover-arrow-outer-width; right: -$popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
border-right-width: 0; border-right-width: 0;
border-left-color: @popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
&:after { &:after {
content: " "; content: " ";
right: 1px; right: 1px;
border-right-width: 0; border-right-width: 0;
border-left-color: @popover-arrow-color; border-left-color: $popover-arrow-color;
bottom: -@popover-arrow-width; bottom: -$popover-arrow-width;
} }
} }
} }
less/_progress.less → scss/_progress.scss
View file @ bad40d5c
...@@ -10,12 +10,12 @@ ...@@ -10,12 +10,12 @@
// //
@-webkit-keyframes progress-bar-stripes { @-webkit-keyframes progress-bar-stripes {
from { background-position: @line-height-computed 0; } from { background-position: $line-height-computed 0; }
to { background-position: 0 0; } to { background-position: 0 0; }
} }
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { background-position: @line-height-computed 0; } from { background-position: $line-height-computed 0; }
to { background-position: 0 0; } to { background-position: 0 0; }
} }
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
.progress { .progress {
display: block; display: block;
width: 100%; width: 100%;
height: @line-height-computed; height: $line-height-computed;
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
} }
.progress[value] { .progress[value] {
// Reset the default appearance // Reset the default appearance
...@@ -40,73 +40,73 @@ ...@@ -40,73 +40,73 @@
} }
.progress[value]::-webkit-progress-bar { .progress[value]::-webkit-progress-bar {
background-color: #eee; background-color: #eee;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
} }
.progress[value]::-webkit-progress-value::before { .progress[value]::-webkit-progress-value::before {
content: attr(value); content: attr(value);
} }
.progress[value]::-webkit-progress-value { .progress[value]::-webkit-progress-value {
background-color: #0074d9; background-color: #0074d9;
border-top-left-radius: @border-radius-base; border-top-left-radius: $border-radius-base;
border-bottom-left-radius: @border-radius-base; border-bottom-left-radius: $border-radius-base;
} }
.progress[value="100"]::-webkit-progress-value { .progress[value="100"]::-webkit-progress-value {
border-top-right-radius: @border-radius-base; border-top-right-radius: $border-radius-base;
border-bottom-right-radius: @border-radius-base; border-bottom-right-radius: $border-radius-base;
} }
// Firefox styles must be entirely separate or it busts Webkit styles. // Firefox styles must be entirely separate or it busts Webkit styles.
// //
// Commented out for now because linter. // Commented out for now because linter.
// //
// @-moz-document url-prefix() { // $-moz-document url-prefix() {
// .progress[value] { // .progress[value] {
// background-color: #eee; // background-color: #eee;
// .border-radius(@border-radius-base); // .border-radius($border-radius-base);
// .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); // .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
// } // }
// .progress[value]::-moz-progress-bar { // .progress[value]::-moz-progress-bar {
// background-color: #0074d9; // background-color: #0074d9;
// border-top-left-radius: @border-radius-base; // border-top-left-radius: $border-radius-base;
// border-bottom-left-radius: @border-radius-base; // border-bottom-left-radius: $border-radius-base;
// } // }
// .progress[value="0"]::-moz-progress-bar { // .progress[value="0"]::-moz-progress-bar {
// color: @gray-light; // color: $gray-light;
// min-width: 2rem; // min-width: 2rem;
// background-color: transparent; // background-color: transparent;
// background-image: none; // background-image: none;
// } // }
// .progress[value="100"]::-moz-progress-bar { // .progress[value="100"]::-moz-progress-bar {
// border-top-right-radius: @border-radius-base; // border-top-right-radius: $border-radius-base;
// border-bottom-right-radius: @border-radius-base; // border-bottom-right-radius: $border-radius-base;
// } // }
// } // }
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (~"min-width:0\0") { @media screen and ("min-width:0\0") {
.progress { .progress {
background-color: #eee; background-color: #eee;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
} }
.progress-bar { .progress-bar {
display: inline-block; display: inline-block;
height: @line-height-computed; height: $line-height-computed;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>` text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: #0074d9; background-color: #0074d9;
border-top-left-radius: @border-radius-base; border-top-left-radius: $border-radius-base;
border-bottom-left-radius: @border-radius-base; border-bottom-left-radius: $border-radius-base;
} }
.progress[width^="0"] { .progress[width^="0"] {
color: @gray-light; color: $gray-light;
min-width: 2rem; min-width: 2rem;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
} }
.progress[width="100%"] { .progress[width="100%"] {
border-top-right-radius: @border-radius-base; border-top-right-radius: $border-radius-base;
border-bottom-right-radius: @border-radius-base; border-bottom-right-radius: $border-radius-base;
} }
} }
...@@ -116,17 +116,17 @@ ...@@ -116,17 +116,17 @@
// //
.progress-striped[value]::-webkit-progress-value { .progress-striped[value]::-webkit-progress-value {
#gradient > .striped(); @include gradient-striped();
background-size: @line-height-computed @line-height-computed; background-size: $line-height-computed $line-height-computed;
} }
.progress-striped[value]::-moz-progress-bar { .progress-striped[value]::-moz-progress-bar {
#gradient > .striped(); @include gradient-striped();
background-size: @line-height-computed @line-height-computed; background-size: $line-height-computed $line-height-computed;
} }
@media screen and (~"min-width:0\0") { @media screen and ("min-width:0\0") {
.progress-bar-striped { .progress-bar-striped {
#gradient > .striped(); @include gradient-striped();
background-size: @line-height-computed @line-height-computed; background-size: $line-height-computed $line-height-computed;
} }
} }
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
.progress-animated[value]::-moz-progress-bar { .progress-animated[value]::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
@media screen and (~"min-width:0\0") { @media screen and ("min-width:0\0") {
.progress-animated .progress-bar-striped { .progress-animated .progress-bar-striped {
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
...@@ -153,14 +153,14 @@ ...@@ -153,14 +153,14 @@
// //
.progress-success { .progress-success {
.progress-variant(@progress-bar-success-bg); @include progress-variant($progress-bar-success-bg);
} }
.progress-info { .progress-info {
.progress-variant(@progress-bar-info-bg); @include progress-variant($progress-bar-info-bg);
} }
.progress-warning { .progress-warning {
.progress-variant(@progress-bar-warning-bg); @include progress-variant($progress-bar-warning-bg);
} }
.progress-danger { .progress-danger {
.progress-variant(@progress-bar-danger-bg); @include progress-variant($progress-bar-danger-bg);
} }
less/_scaffolding.less → scss/_scaffolding.scss
View file @ bad40d5c
...@@ -18,16 +18,16 @@ ...@@ -18,16 +18,16 @@
// Body reset // Body reset
html { html {
font-size: @font-size-root; font-size: ($font-size-root)px;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
} }
body { body {
font-family: @font-family-base; font-family: $font-family-base;
font-size: @font-size-base; font-size: $font-size-base;
line-height: @line-height-base; line-height: $line-height-base;
color: @text-color; color: $text-color;
background-color: @body-bg; background-color: $body-bg;
} }
// Reset fonts for relevant elements // Reset fonts for relevant elements
...@@ -44,17 +44,17 @@ textarea { ...@@ -44,17 +44,17 @@ textarea {
// Links // Links
a { a {
color: @link-color; color: $link-color;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus { &:focus {
color: @link-hover-color; color: $link-hover-color;
text-decoration: @link-hover-decoration; text-decoration: $link-hover-decoration;
} }
&:focus { &:focus {
.tab-focus(); @include tab-focus();
} }
} }
...@@ -77,26 +77,26 @@ img { ...@@ -77,26 +77,26 @@ img {
// Responsive images (ensure images don't scale beyond their parents) // Responsive images (ensure images don't scale beyond their parents)
.img-responsive { .img-responsive {
.img-responsive(); @include img-responsive();
} }
// Rounded corners // Rounded corners
.img-rounded { .img-rounded {
.border-radius(@border-radius-lg); @include border-radius($border-radius-lg);
} }
// Image thumbnails // Image thumbnails
.img-thumbnail { .img-thumbnail {
padding: @thumbnail-padding; padding: $thumbnail-padding;
line-height: @line-height-base; line-height: $line-height-base;
background-color: @thumbnail-bg; background-color: $thumbnail-bg;
border: 1px solid @thumbnail-border; border: 1px solid $thumbnail-border;
border-radius: @thumbnail-border-radius; border-radius: $thumbnail-border-radius;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
.box-shadow(0 1px 2px rgba(0,0,0,.075)); @include box-shadow(0 1px 2px rgba(0,0,0,.075));
// Keep them at most 100% wide // Keep them at most 100% wide
.img-responsive(inline-block); @include img-responsive(inline-block);
} }
// Perfect circle // Perfect circle
...@@ -108,10 +108,10 @@ img { ...@@ -108,10 +108,10 @@ img {
// Horizontal rules // Horizontal rules
hr { hr {
margin-top: @line-height-computed; margin-top: $line-height-computed;
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
border: 0; border: 0;
border-top: 1px solid @hr-border; border-top: 1px solid $hr-border;
} }
......
less/_tables.less → scss/_tables.scss
View file @ bad40d5c
...@@ -2,14 +2,13 @@ ...@@ -2,14 +2,13 @@
// Tables // Tables
// -------------------------------------------------- // --------------------------------------------------
table { table {
background-color: @table-bg; background-color: $table-bg;
} }
caption { caption {
padding-top: @table-cell-padding; padding-top: $table-cell-padding;
padding-bottom: @table-cell-padding; padding-bottom: $table-cell-padding;
color: @text-muted; color: $text-muted;
text-align: left; text-align: left;
} }
th { th {
...@@ -22,7 +21,7 @@ th { ...@@ -22,7 +21,7 @@ th {
.table { .table {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
// Cells // Cells
> thead, > thead,
> tbody, > tbody,
...@@ -30,17 +29,17 @@ th { ...@@ -30,17 +29,17 @@ th {
> tr { > tr {
> th, > th,
> td { > td {
padding: @table-cell-padding; padding: $table-cell-padding;
line-height: @line-height-base; line-height: $line-height-base;
vertical-align: top; vertical-align: top;
border-top: 1px solid @table-border-color; border-top: 1px solid $table-border-color;
} }
} }
} }
// Bottom align for column headings // Bottom align for column headings
> thead > tr > th { > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid @table-border-color; border-bottom: 2px solid $table-border-color;
} }
// Remove top border from thead by default // Remove top border from thead by default
// > caption + thead, // > caption + thead,
...@@ -55,12 +54,12 @@ th { ...@@ -55,12 +54,12 @@ th {
// } // }
// Account for multiple tbody instances // Account for multiple tbody instances
> tbody + tbody { > tbody + tbody {
border-top: 2px solid @table-border-color; border-top: 2px solid $table-border-color;
} }
// Nesting // Nesting
// .table { // .table {
// background-color: @body-bg; // background-color: $body-bg;
// } // }
} }
...@@ -74,7 +73,7 @@ th { ...@@ -74,7 +73,7 @@ th {
> tr { > tr {
> th, > th,
> td { > td {
padding: @table-sm-cell-padding; padding: $table-sm-cell-padding;
} }
} }
} }
...@@ -86,14 +85,14 @@ th { ...@@ -86,14 +85,14 @@ th {
// Add borders all around the table and between all the columns. // Add borders all around the table and between all the columns.
.table-bordered { .table-bordered {
border: 1px solid @table-border-color; border: 1px solid $table-border-color;
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
border: 1px solid @table-border-color; border: 1px solid $table-border-color;
} }
} }
} }
...@@ -112,7 +111,7 @@ th { ...@@ -112,7 +111,7 @@ th {
.table-striped { .table-striped {
> tbody > tr:nth-child(odd) { > tbody > tr:nth-child(odd) {
background-color: @table-bg-accent; background-color: $table-bg-accent;
} }
} }
...@@ -123,7 +122,7 @@ th { ...@@ -123,7 +122,7 @@ th {
.table-hover { .table-hover {
> tbody > tr:hover { > tbody > tr:hover {
background-color: @table-bg-hover; background-color: $table-bg-hover;
} }
} }
...@@ -155,11 +154,11 @@ table { ...@@ -155,11 +154,11 @@ table {
// inheritance to nested tables. // inheritance to nested tables.
// Generate the contextual variants // Generate the contextual variants
.table-row-variant(active; @table-bg-active); @include table-row-variant(active, $table-bg-active);
.table-row-variant(success; @state-success-bg); @include table-row-variant(success, $state-success-bg);
.table-row-variant(info; @state-info-bg); @include table-row-variant(info, $state-info-bg);
.table-row-variant(warning; @state-warning-bg); @include table-row-variant(warning, $state-warning-bg);
.table-row-variant(danger; @state-danger-bg); @include table-row-variant(danger, $state-danger-bg);
// Responsive tables // Responsive tables
...@@ -172,12 +171,12 @@ table { ...@@ -172,12 +171,12 @@ table {
overflow-x: auto; overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: @screen-xs-max) { @media screen and (max-width: $screen-xs-max) {
width: 100%; width: 100%;
margin-bottom: (@line-height-computed * 0.75); margin-bottom: ($line-height-computed * 0.75);
overflow-y: hidden; overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color; border: 1px solid $table-border-color;
// Tighten up spacing // Tighten up spacing
> .table { > .table {
...@@ -237,19 +236,19 @@ table { ...@@ -237,19 +236,19 @@ table {
.table > .thead-inverse { .table > .thead-inverse {
> tr > th { > tr > th {
color: #fff; color: #fff;
background-color: @gray-dark; background-color: $gray-dark;
} }
} }
.table > .thead-default { .table > .thead-default {
> tr > th { > tr > th {
color: @gray; color: $gray;
background-color: @gray-lighter; background-color: $gray-lighter;
} }
} }
.table-inverse { .table-inverse {
color: @gray-lighter; color: $gray-lighter;
background-color: @gray-dark; background-color: $gray-dark;
&.table-bordered { &.table-bordered {
border: 0; border: 0;
...@@ -260,7 +259,7 @@ table { ...@@ -260,7 +259,7 @@ table {
> tr { > tr {
> th, > th,
> td { > td {
border-color: @gray; border-color: $gray;
} }
} }
} }
...@@ -284,11 +283,11 @@ table { ...@@ -284,11 +283,11 @@ table {
> tr { > tr {
> th, > th,
> td { > td {
border-top: 1px solid @table-border-color; border-top: 1px solid $table-border-color;
border-left: 1px solid @table-border-color; border-left: 1px solid $table-border-color;
&:last-child { &:last-child {
border-right: 1px solid @table-border-color; border-right: 1px solid $table-border-color;
} }
} }
} }
...@@ -297,7 +296,7 @@ table { ...@@ -297,7 +296,7 @@ table {
> tr:last-child { > tr:last-child {
> th, > th,
> td { > td {
border-bottom: 1px solid @table-border-color; border-bottom: 1px solid $table-border-color;
} }
} }
} }
...@@ -309,7 +308,7 @@ table { ...@@ -309,7 +308,7 @@ table {
th, th,
td { td {
display: block !important; display: block !important;
border: 1px solid @table-border-color; border: 1px solid $table-border-color;
} }
} }
} }
less/_tooltip.less → scss/_tooltip.scss
View file @ bad40d5c
...@@ -6,32 +6,32 @@ ...@@ -6,32 +6,32 @@
// Base class // Base class
.tooltip { .tooltip {
position: absolute; position: absolute;
z-index: @zindex-tooltip; z-index: $zindex-tooltip;
display: block; display: block;
visibility: visible; visibility: visible;
// Reset font and text propertes given new insertion method // Reset font and text propertes given new insertion method
font-family: @font-family-base; font-family: $font-family-base;
font-size: @font-size-sm; font-size: $font-size-sm;
font-weight: normal; font-weight: normal;
line-height: 1.4; line-height: 1.4;
opacity: 0; opacity: 0;
&.in { opacity: @tooltip-opacity; } &.in { opacity: $tooltip-opacity; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: @tooltip-max-width; max-width: $tooltip-max-width;
padding: 3px 8px; padding: 3px 8px;
color: @tooltip-color; color: $tooltip-color;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: @tooltip-bg; background-color: $tooltip-bg;
.border-radius(@border-radius-base); @include border-radius($border-radius-base);
} }
// Arrows // Arrows
...@@ -47,57 +47,57 @@ ...@@ -47,57 +47,57 @@
&.top .tooltip-arrow { &.top .tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -@tooltip-arrow-width; margin-left: -$tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
&.top-left .tooltip-arrow { &.top-left .tooltip-arrow {
bottom: 0; bottom: 0;
right: @tooltip-arrow-width; right: $tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width; margin-bottom: -$tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
&.top-right .tooltip-arrow { &.top-right .tooltip-arrow {
bottom: 0; bottom: 0;
left: @tooltip-arrow-width; left: $tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width; margin-bottom: -$tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
&.right .tooltip-arrow { &.right .tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -@tooltip-arrow-width; margin-top: -$tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color; border-right-color: $tooltip-arrow-color;
} }
&.left .tooltip-arrow { &.left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -@tooltip-arrow-width; margin-top: -$tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: @tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
&.bottom .tooltip-arrow { &.bottom .tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -@tooltip-arrow-width; margin-left: -$tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
&.bottom-left .tooltip-arrow { &.bottom-left .tooltip-arrow {
top: 0; top: 0;
right: @tooltip-arrow-width; right: $tooltip-arrow-width;
margin-top: -@tooltip-arrow-width; margin-top: -$tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
&.bottom-right .tooltip-arrow { &.bottom-right .tooltip-arrow {
top: 0; top: 0;
left: @tooltip-arrow-width; left: $tooltip-arrow-width;
margin-top: -@tooltip-arrow-width; margin-top: -$tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
} }
less/_type.less → scss/_type.scss
View file @ bad40d5c
...@@ -9,23 +9,23 @@ ...@@ -9,23 +9,23 @@
h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { .h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0; margin-top: 0;
font-family: @headings-font-family; font-family: $headings-font-family;
font-weight: @headings-font-weight; font-weight: $headings-font-weight;
line-height: @headings-line-height; line-height: $headings-line-height;
color: @headings-color; color: $headings-color;
small, small,
.small { .small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @headings-small-color; color: $headings-small-color;
} }
} }
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
h3, .h3 { h3, .h3 {
margin-bottom: (@line-height-computed / 2); margin-bottom: ($line-height-computed / 2);
small, small,
.small { .small {
...@@ -35,7 +35,7 @@ h3, .h3 { ...@@ -35,7 +35,7 @@ h3, .h3 {
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
margin-bottom: (@line-height-computed / 2); margin-bottom: ($line-height-computed / 2);
small, small,
.small { .small {
...@@ -43,12 +43,12 @@ h6, .h6 { ...@@ -43,12 +43,12 @@ h6, .h6 {
} }
} }
h1, .h1 { font-size: @font-size-h1; } h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: @font-size-h2; } h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: @font-size-h3; } h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: @font-size-h4; } h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: @font-size-h5; } h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: @font-size-h6; } h6, .h6 { font-size: $font-size-h6; }
// Body text // Body text
...@@ -71,12 +71,12 @@ p { ...@@ -71,12 +71,12 @@ p {
// Ex: (12px small font / 14px base font) * 100% = about 85% // Ex: (12px small font / 14px base font) * 100% = about 85%
small, small,
.small { .small {
font-size: floor((100% * @font-size-sm / @font-size-base)); font-size: floor((100% * $font-size-sm / $font-size-base));
} }
mark, mark,
.mark { .mark {
background-color: @state-warning-bg; background-color: $state-warning-bg;
padding: .2em; padding: .2em;
} }
...@@ -85,8 +85,8 @@ mark, ...@@ -85,8 +85,8 @@ mark,
// ------------------------- // -------------------------
// .page-header { // .page-header {
// padding-bottom: ((@line-height-computed / 2) - 1); // padding-bottom: (($line-height-computed / 2) - 1);
// margin: (@line-height-computed * 2) 0 @line-height-computed; // margin: ($line-height-computed * 2) 0 @line-height-computed;
// border-bottom: 1px solid @page-header-border-color; // border-bottom: 1px solid @page-header-border-color;
// } // }
...@@ -98,7 +98,7 @@ mark, ...@@ -98,7 +98,7 @@ mark,
ul, ul,
ol { ol {
margin-top: 0; margin-top: 0;
margin-bottom: (@line-height-computed / 2); margin-bottom: ($line-height-computed / 2);
ul, ul,
ol { ol {
margin-bottom: 0; margin-bottom: 0;
...@@ -115,7 +115,7 @@ ol { ...@@ -115,7 +115,7 @@ ol {
// Inline turns list items into inline-block // Inline turns list items into inline-block
.list-inline { .list-inline {
.list-unstyled(); @extend list-unstyled();
margin-left: -5px; margin-left: -5px;
> li { > li {
...@@ -128,11 +128,11 @@ ol { ...@@ -128,11 +128,11 @@ ol {
// Description Lists // Description Lists
dl { dl {
margin-top: 0; // Remove browser default margin-top: 0; // Remove browser default
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
} }
dt, dt,
dd { dd {
line-height: @line-height-base; line-height: $line-height-base;
} }
dt { dt {
font-weight: bold; font-weight: bold;
...@@ -148,19 +148,19 @@ dd { ...@@ -148,19 +148,19 @@ dd {
.dl-horizontal { .dl-horizontal {
dd { dd {
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present @include clearfix(); // Clear the floated `dt` if an empty `dd` is present
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
dt { dt {
float: left; float: left;
width: (@dl-horizontal-offset - 20); width: ($dl-horizontal-offset - 20);
clear: left; clear: left;
text-align: right; text-align: right;
.text-overflow(); @include text-overflow();
} }
dd { dd {
margin-left: @dl-horizontal-offset; margin-left: $dl-horizontal-offset;
} }
} }
} }
...@@ -174,7 +174,7 @@ abbr[title], ...@@ -174,7 +174,7 @@ abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted @abbr-border-color; border-bottom: 1px dotted $abbr-border-color;
} }
.initialism { .initialism {
font-size: 90%; font-size: 90%;
...@@ -183,10 +183,10 @@ abbr[data-original-title] { ...@@ -183,10 +183,10 @@ abbr[data-original-title] {
// Blockquotes // Blockquotes
blockquote { blockquote {
padding: (@line-height-computed / 2) @line-height-computed; padding: ($line-height-computed / 2) $line-height-computed;
margin: 0 0 @line-height-computed; margin: 0 0 $line-height-computed;
font-size: @blockquote-font-size; font-size: $blockquote-font-size;
border-left: 5px solid @blockquote-border-color; border-left: 5px solid $blockquote-border-color;
p, p,
ul, ul,
...@@ -199,8 +199,8 @@ blockquote { ...@@ -199,8 +199,8 @@ blockquote {
footer { footer {
display: block; display: block;
font-size: 80%; // back to default font-size font-size: 80%; // back to default font-size
line-height: @line-height-base; line-height: $line-height-base;
color: @blockquote-small-color; color: $blockquote-small-color;
&:before { &:before {
content: '\2014 \00A0'; // em dash, nbsp content: '\2014 \00A0'; // em dash, nbsp
...@@ -212,7 +212,7 @@ blockquote { ...@@ -212,7 +212,7 @@ blockquote {
.blockquote-reverse { .blockquote-reverse {
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid @blockquote-border-color; border-right: 5px solid $blockquote-border-color;
border-left: 0; border-left: 0;
text-align: right; text-align: right;
...@@ -227,7 +227,7 @@ blockquote { ...@@ -227,7 +227,7 @@ blockquote {
// Addresses // Addresses
address { address {
margin-bottom: @line-height-computed; margin-bottom: $line-height-computed;
font-style: normal; font-style: normal;
line-height: @line-height-base; line-height: $line-height-base;
} }
less/_utilities-responsive.less → scss/_utilities-responsive.scss
View file @ bad40d5c
...@@ -39,83 +39,79 @@ ...@@ -39,83 +39,79 @@
} }
.visible-xs-block { .visible-xs-block {
.media-xs({ @include media-xs {
display: block !important; display: block !important;
}); }
} }
.visible-xs-inline { .visible-xs-inline {
.media-xs({ @include media-xs {
display: inline !important; display: inline !important;
}); }
} }
.visible-xs-inline-block { .visible-xs-inline-block {
.media-xs({ @include media-xs {
display: inline-block !important; display: inline-block !important;
}); }
} }
.visible-sm-block { .visible-sm-block {
.media-sm-max({ @include media-sm-max {
display: block !important; display: block !important;
}); }
} }
.visible-sm-inline { .visible-sm-inline {
.media-sm-max({ @include media-sm-max {
display: inline !important; display: inline !important;
}); }
} }
.visible-sm-inline-block { .visible-sm-inline-block {
.media-sm-max({ @include media-sm-max {
display: inline-block !important; display: inline-block !important;
}); }
} }
.visible-md-block { .visible-md-block {
.media-md-max({ @include media-md-max {
display: block !important; display: block !important;
}); }
} }
.visible-md-inline { .visible-md-inline {
.media-md-max({ @include media-md-max {
display: inline !important; display: inline !important;
}); }
} }
.visible-md-inline-block { .visible-md-inline-block {
.media-md-max({ @include media-md-max {
display: inline-block !important; display: inline-block !important;
}); }
} }
.visible-lg-block { .visible-lg-block {
.media-lg({ @include media-lg {
display: block !important; display: block !important;
}); }
} }
.visible-lg-inline { .visible-lg-inline {
.media-lg({ @include media-lg {
display: inline !important; display: inline !important;
}); }
} }
.visible-lg-inline-block { .visible-lg-inline-block {
.media-lg({ @include media-lg {
display: inline-block !important; display: inline-block !important;
}); }
} }
.hidden-sm { @include media-sm-max {
.media-sm-max({ @include responsive-invisibility('.hidden-sm');
.responsive-invisibility();
});
} }
.hidden-md {
.media-md-max({ @include media-md-max {
.responsive-invisibility(); @include responsive-invisibility('.hidden-md');
});
} }
.hidden-lg {
.media-lg({ @include media-lg {
.responsive-invisibility(); @include responsive-invisibility('.hidden-lg');
});
} }
...@@ -147,6 +143,6 @@ ...@@ -147,6 +143,6 @@
.hidden-print { .hidden-print {
@media print { @media print {
.responsive-invisibility(); @include responsive-invisibility('.hidden-print');
} }
} }
less/_utilities.less → scss/_utilities.scss
View file @ bad40d5c
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
// Floats // Floats
.clearfix { .clearfix {
.clearfix(); @include clearfix();
} }
.center-block { .center-block {
.center-block(); @include center-block();
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
...@@ -20,21 +20,21 @@ ...@@ -20,21 +20,21 @@
// Inverse // Inverse
.inverse { .inverse {
color: @gray-lighter; color: $gray-lighter;
background-color: @gray-dark; background-color: $gray-dark;
} }
// Spacing // Spacing
.p-a { .p-a {
padding: @spacer; padding: $spacer;
} }
.p-h { .p-h {
padding-left: @spacer; padding-left: $spacer;
padding-right: @spacer; padding-right: $spacer;
} }
.p-v { .p-v {
padding-top: @spacer; padding-top: $spacer;
padding-bottom: @spacer; padding-bottom: $spacer;
} }
// Positioning // Positioning
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: @zindex-navbar-fixed; z-index: $zindex-navbar-fixed;
} }
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
visibility: hidden; visibility: hidden;
} }
.text-hide { .text-hide {
.text-hide(); @include text-hide();
} }
...@@ -86,46 +86,37 @@ ...@@ -86,46 +86,37 @@
.text-capitalize { text-transform: capitalize; } .text-capitalize { text-transform: capitalize; }
// Contextual colors // Contextual colors
.text-muted { .text-muted {
color: @text-muted; color: $text-muted;
}
.text-primary {
.text-emphasis-variant(@brand-primary);
}
.text-success {
.text-emphasis-variant(@state-success-text);
}
.text-info {
.text-emphasis-variant(@state-info-text);
}
.text-warning {
.text-emphasis-variant(@state-warning-text);
}
.text-danger {
.text-emphasis-variant(@state-danger-text);
} }
@include text-emphasis-variant('.text-primary', $brand-primary);
@include text-emphasis-variant('.text-success', $state-success-text);
@include text-emphasis-variant('.text-info', $state-info-text);
@include text-emphasis-variant('.text-warning', $state-warning-text);
@include text-emphasis-variant('.text-danger', $state-danger-text);
// Contextual backgrounds // Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can // For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules). // safely shift things around (per SemVer rules).
.bg-primary { .bg-primary {
// Given the contrast here, this is the only class to have its color inverted // Given the contrast here, this is the only class to have its color inverted
// automatically. // automatically.
color: #fff; color: #fff;
.bg-variant(@brand-primary);
}
.bg-success {
.bg-variant(@state-success-bg);
}
.bg-info {
.bg-variant(@state-info-bg);
}
.bg-warning {
.bg-variant(@state-warning-bg);
}
.bg-danger {
.bg-variant(@state-danger-bg);
}
.bg-gray-dark {
.bg-variant(@gray-dark);
} }
@include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $state-success-bg);
@include bg-variant('.bg-info', $state-info-bg);
@include bg-variant('.bg-warning', $state-warning-bg);
@include bg-variant('.bg-danger', $state-danger-bg);
less/_variables.less → scss/_variables.scss
View file @ bad40d5c
...@@ -7,18 +7,18 @@ ...@@ -7,18 +7,18 @@
// //
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
@gray-dark: #373a3c; $gray-dark: #373a3c;
@gray-darker: @gray-dark; // TODO: remove $gray-darker: $gray-dark; // TODO: remove
@gray: #55595c; $gray: #55595c;
@gray-light: #818a91; $gray-light: #818a91;
@gray-lighter: #eceeef; $gray-lighter: #eceeef;
@gray-lightest: #f7f7f9; $gray-lightest: #f7f7f9;
@brand-primary: #0275d8; $brand-primary: #0275d8;
@brand-success: #5cb85c; $brand-success: #5cb85c;
@brand-info: #5bc0de; $brand-info: #5bc0de;
@brand-warning: #f0ad4e; $brand-warning: #f0ad4e;
@brand-danger: #d9534f; $brand-danger: #d9534f;
//== Scaffolding //== Scaffolding
...@@ -26,99 +26,99 @@ ...@@ -26,99 +26,99 @@
//## Settings for some of the most global styles. //## Settings for some of the most global styles.
//** Background color for `<body>`. //** Background color for `<body>`.
@body-bg: #fff; $body-bg: #fff;
//** Global text color on `<body>`. //** Global text color on `<body>`.
@text-color: @gray-dark; $text-color: $gray-dark;
//** Global textual link color. //** Global textual link color.
@link-color: @brand-primary; $link-color: $brand-primary;
//** Link hover color set via `darken()` function. //** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%); $link-hover-color: darken($link-color, 15%);
//** Link hover decoration. //** Link hover decoration.
@link-hover-decoration: underline; $link-hover-decoration: underline;
//== Global settings //== Global settings
// //
//## Quickly modify global styling by enabling or disabling features. //## Quickly modify global styling by enabling or disabling features.
@enable-rounded: true; $enable-rounded: true !default;
@enable-shadows: true; $enable-shadows: true !default;
@enable-gradients: true; $enable-gradients: true !default;
@enable-transitions: true; $enable-transitions: true !default;
@spacer: 1rem; $spacer: 1rem;
@border-width: .075rem; $border-width: .075rem;
//== Typography //== Typography
// //
//## Font, line-height, and color for body text, headings, and more. //## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif; $font-family-base: $font-family-sans-serif;
//** Pixel value used to responsively scale all typography. Applied to the `<html>` element. //** Pixel value used to responsively scale all typography. Applied to the `<html>` element.
@font-size-root: 16px; $font-size-root: 16;
//** Sets the `<body>` and more to the root pixel value. //** Sets the `<body>` and more to the root pixel value.
@font-size-base: 1rem; $font-size-base: 1rem;
@font-size-lg: 1.25rem; $font-size-lg: 1.25rem;
@font-size-sm: .85rem; $font-size-sm: .85rem;
@font-size-xs: .75rem; $font-size-xs: .75rem;
@font-size-h1: 3rem; $font-size-h1: 3rem;
@font-size-h2: 2.5rem; $font-size-h2: 2.5rem;
@font-size-h3: 2rem; $font-size-h3: 2rem;
@font-size-h4: 1.5rem; $font-size-h4: 1.5rem;
@font-size-h5: 1.25rem; $font-size-h5: 1.25rem;
@font-size-h6: 1rem; $font-size-h6: 1rem;
//** Unit-less `line-height` for use in components like buttons. //** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.5; $line-height-base: 1.5;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: (@font-size-root * @line-height-base); $line-height-computed: ($font-size-root * $line-height-base);
//** By default, this inherits from the `<body>`. //** By default, this inherits from the `<body>`.
@headings-font-family: inherit; $headings-font-family: inherit;
@headings-font-weight: 500; $headings-font-weight: 500;
@headings-line-height: 1.1; $headings-line-height: 1.1;
@headings-color: inherit; $headings-color: inherit;
//== Components //== Components
// //
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: .5rem; $padding-base-vertical: .5rem;
@padding-base-horizontal: .75rem; $padding-base-horizontal: .75rem;
@padding-lg-vertical: .75rem; $padding-lg-vertical: .75rem;
@padding-lg-horizontal: 1.5rem; $padding-lg-horizontal: 1.5rem;
@padding-sm-vertical: .3rem; $padding-sm-vertical: .3rem;
@padding-smhorizontal: .75rem; $padding-sm-horizontal: .75rem;
@padding-xs-vertical: .2rem; $padding-xs-vertical: .2rem;
@padding-xs-horizontal: .5rem; $padding-xs-horizontal: .5rem;
@line-height-lg: 1.33; $line-height-lg: 1.33;
@line-height-sm: 1.5; $line-height-sm: 1.5;
@border-radius-base: .25rem; $border-radius-base: .25rem;
@border-radius-lg: .3rem; $border-radius-lg: .3rem;
@border-radius-sm: .2rem; $border-radius-sm: .2rem;
//** Global color for active items (e.g., navs or dropdowns). //** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff; $component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns). //** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary; $component-active-bg: $brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns. //** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: .3em; $caret-width-base: .3em;
//** Carets increase slightly in size for larger components. //** Carets increase slightly in size for larger components.
@caret-width-large: @caret-width-base; $caret-width-large: $caret-width-base;
//== Tables //== Tables
...@@ -126,53 +126,53 @@ ...@@ -126,53 +126,53 @@
//## Customizes the `.table` component with basic values, each used across all table variations. //## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s. //** Padding for `<th>`s and `<td>`s.
@table-cell-padding: .75rem; $table-cell-padding: .75rem;
//** Padding for cells in `.table-sm`. //** Padding for cells in `.table-sm`.
@table-sm-cell-padding: .3rem; $table-sm-cell-padding: .3rem;
//** Default background color used for all tables. //** Default background color used for all tables.
@table-bg: transparent; $table-bg: transparent;
//** Background color used for `.table-striped`. //** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9; $table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`. //** Background color used for `.table-hover`.
@table-bg-hover: #f5f5f5; $table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover; $table-bg-active: $table-bg-hover;
//** Border color for table and cell borders. //** Border color for table and cell borders.
@table-border-color: @gray-lighter; $table-border-color: $gray-lighter;
//== Buttons //== Buttons
// //
//## For each of Bootstrap's buttons, define text, background and border color. //## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal; $btn-font-weight: normal;
@btn-primary-color: #fff; $btn-primary-color: #fff;
@btn-primary-bg: @brand-primary; $btn-primary-bg: $brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%); $btn-primary-border: darken($btn-primary-bg, 5%);
@btn-secondary-color: @gray-dark; $btn-secondary-color: $gray-dark;
@btn-secondary-bg: #fff; $btn-secondary-bg: #fff;
@btn-secondary-border: @gray-lighter; $btn-secondary-border: $gray-lighter;
@btn-info-color: #fff; $btn-info-color: #fff;
@btn-info-bg: @brand-info; $btn-info-bg: $brand-info;
@btn-info-border: darken(@btn-info-bg, 5%); $btn-info-border: darken($btn-info-bg, 5%);
@btn-success-color: #fff; $btn-success-color: #fff;
@btn-success-bg: @brand-success; $btn-success-bg: $brand-success;
@btn-success-border: darken(@btn-success-bg, 5%); $btn-success-border: darken($btn-success-bg, 5%);
@btn-warning-color: #fff; $btn-warning-color: #fff;
@btn-warning-bg: @brand-warning; $btn-warning-bg: $brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%); $btn-warning-border: darken($btn-warning-bg, 5%);
@btn-danger-color: #fff; $btn-danger-color: #fff;
@btn-danger-bg: @brand-danger; $btn-danger-bg: $brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%); $btn-danger-border: darken($btn-danger-bg, 5%);
@btn-link-disabled-color: @gray-light; $btn-link-disabled-color: $gray-light;
//== Forms //== Forms
...@@ -180,47 +180,47 @@ ...@@ -180,47 +180,47 @@
//## //##
//** `<input>` background color //** `<input>` background color
@input-bg: #fff; $input-bg: #fff;
//** `<input disabled>` background color //** `<input disabled>` background color
@input-bg-disabled: @gray-lighter; $input-bg-disabled: $gray-lighter;
//** Text color for `<input>`s //** Text color for `<input>`s
@input-color: @gray; $input-color: $gray;
//** `<input>` border color //** `<input>` border color
@input-border: #ccc; $input-border: #ccc;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius //** Default `.form-control` border radius
@input-border-radius: @border-radius-base; $input-border-radius: $border-radius-base;
//** Large `.form-control` border radius //** Large `.form-control` border radius
@input-border-radius-lg: @border-radius-lg; $input-border-radius-lg: $border-radius-lg;
//** Small `.form-control` border radius //** Small `.form-control` border radius
@input-border-radius-sm: @border-radius-sm; $input-border-radius-sm: $border-radius-sm;
//** Border color for inputs on focus //** Border color for inputs on focus
@input-border-focus: #66afe9; $input-border-focus: #66afe9;
@input-box-shadow-focus: rgba(102,175,233,.6); $input-box-shadow-focus: rgba(102,175,233,.6);
//** Placeholder text color //** Placeholder text color
@input-color-placeholder: #999; $input-color-placeholder: #999;
//** Default `.form-control` height //** Default `.form-control` height
@input-height-base: ((@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + (@border-width * 2)); $input-height-base: (($font-size-base * $line-height-base) + ($padding-base-vertical * 2) + ($border-width * 2));
//** Large `.form-control` height //** Large `.form-control` height
@input-height-lg: ((@font-size-lg * @line-height-lg) + (@padding-lg-vertical * 2) + (@border-width * 2)); $input-height-lg: (($font-size-lg * $line-height-lg) + ($padding-lg-vertical * 2) + ($border-width * 2));
//** Small `.form-control` height //** Small `.form-control` height
@input-height-sm: ((@font-size-sm * @line-height-sm) + (@padding-sm-vertical * 2) + (@border-width * 2)); $input-height-sm: (($font-size-sm * $line-height-sm) + ($padding-sm-vertical * 2) + ($border-width * 2));
@legend-color: @gray-dark; $legend-color: $gray-dark;
@legend-border-color: #e5e5e5; $legend-border-color: #e5e5e5;
//** Background color for textual input addons //** Background color for textual input addons
@input-group-addon-bg: @gray-lighter; $input-group-addon-bg: $gray-lighter;
//** Border color for textual input addons //** Border color for textual input addons
@input-group-addon-border-color: @input-border; $input-group-addon-border-color: $input-border;
//** Disabled cursor for form controls and buttons. //** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed; $cursor-disabled: not-allowed;
//== Dropdowns //== Dropdowns
...@@ -228,29 +228,29 @@ ...@@ -228,29 +228,29 @@
//## Dropdown menu container and contents. //## Dropdown menu container and contents.
//** Background for the dropdown menu. //** Background for the dropdown menu.
@dropdown-bg: #fff; $dropdown-bg: #fff;
//** Dropdown menu `border-color`. //** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15); $dropdown-border: rgba(0,0,0,.15);
//** Divider color for between dropdown items. //** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5; $dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color. //** Dropdown link text color.
@dropdown-link-color: @gray-dark; $dropdown-link-color: $gray-dark;
//** Hover color for dropdown links. //** Hover color for dropdown links.
@dropdown-link-hover-color: darken(@gray-dark, 5%); $dropdown-link-hover-color: darken($gray-dark, 5%);
//** Hover background for dropdown links. //** Hover background for dropdown links.
@dropdown-link-hover-bg: #f5f5f5; $dropdown-link-hover-bg: #f5f5f5;
//** Active dropdown menu item text color. //** Active dropdown menu item text color.
@dropdown-link-active-color: @component-active-color; $dropdown-link-active-color: $component-active-color;
//** Active dropdown menu item background color. //** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg; $dropdown-link-active-bg: $component-active-bg;
//** Disabled dropdown menu item background color. //** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @gray-light; $dropdown-link-disabled-color: $gray-light;
//** Text color for headers within dropdown menus. //** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light; $dropdown-header-color: $gray-light;
//-- Z-index master list //-- Z-index master list
...@@ -260,31 +260,31 @@ ...@@ -260,31 +260,31 @@
// //
// Note: These variables are not generated into the Customizer. // Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000; $zindex-navbar: 1000;
@zindex-dropdown: 1000; $zindex-dropdown: 1000;
@zindex-popover: 1060; $zindex-popover: 1060;
@zindex-tooltip: 1070; $zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030; $zindex-navbar-fixed: 1030;
@zindex-modal: 1040; $zindex-modal: 1040;
//== Media queries breakpoints //== Media queries breakpoints
// //
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes. //## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone // Large screen / wide desktop
@screen-xs-max: (@screen-sm-min - .1); $screen-lg-min: 75em;
// Small screen / tablet
@screen-sm-min: 48em;
@screen-sm-max: (@screen-md-min - .1);
// Medium screen / desktop // Medium screen / desktop
@screen-md-min: 62em; $screen-md-min: 62em;
@screen-md-max: (@screen-lg-min - .1); $screen-md-max: ($screen-lg-min - .1);
// Large screen / wide desktop // Small screen / tablet
@screen-lg-min: 75em; $screen-sm-min: 48em;
$screen-sm-max: ($screen-md-min - .1);
// Extra small screen / phone
$screen-xs-max: ($screen-sm-min - .1);
//== Grid system //== Grid system
...@@ -292,28 +292,28 @@ ...@@ -292,28 +292,28 @@
//## Define your custom responsive grid. //## Define your custom responsive grid.
//** Number of columns in the grid. //** Number of columns in the grid.
@grid-columns: 12; $grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right. //** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 1.5rem; $grid-gutter-width: 1.5rem;
// Navbar collapse // Navbar collapse
//** Point at which the navbar becomes uncollapsed. //** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min; $grid-float-breakpoint: $screen-sm-min;
//** Point at which the navbar begins collapsing. //** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); $grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
//== Container sizes //== Container sizes
// //
//## Define the maximum width of `.container` for different screen sizes. //## Define the maximum width of `.container` for different screen sizes.
//** For `@screen-sm-min` and up. //** For `$screen-sm-min` and up.
@container-sm: 45rem; // 720 $container-sm: 45rem; // 720
//** For `@screen-md-min` and up. //** For `$screen-md-min` and up.
@container-md: 60rem; // 960 $container-md: 60rem; // 960
//** For `@screen-lg-min` and up. //** For `$screen-lg-min` and up.
@container-lg: 72.25rem; // 1140 $container-lg: 72.25rem; // 1140
//== Navbar //== Navbar
...@@ -321,61 +321,61 @@ ...@@ -321,61 +321,61 @@
//## //##
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; // $navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed; $navbar-margin-bottom: $line-height-computed;
@navbar-border-radius: @border-radius-base; $navbar-border-radius: $border-radius-base;
@navbar-padding-horizontal: (@grid-gutter-width / 2); $navbar-padding-horizontal: $spacer;
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); $navbar-padding-vertical: ($spacer / 2);
@navbar-collapse-max-height: 340px; $navbar-collapse-max-height: 340px;
@navbar-default-color: #777; $navbar-default-color: #777;
@navbar-default-bg: #f8f8f8; $navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); $navbar-default-border: darken($navbar-default-bg, 6.5%);
// Navbar links // Navbar links
@navbar-default-link-color: #777; $navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333; $navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent; $navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555; $navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc; $navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent; $navbar-default-link-disabled-bg: transparent;
// Navbar brand label // Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color; $navbar-default-brand-color: $navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent; $navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle
@navbar-default-toggle-hover-bg: #ddd; $navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888; $navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd; $navbar-default-toggle-border-color: #ddd;
// Inverted navbar // Inverted navbar
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 12%); $navbar-inverse-color: lighten($gray-light, 12%);
@navbar-inverse-bg: #373a3c; $navbar-inverse-bg: #373a3c;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); $navbar-inverse-border: darken($navbar-inverse-bg, 10%);
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%); $navbar-inverse-link-color: lighten($gray-light, 15%);
@navbar-inverse-link-hover-color: #fff; $navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent; $navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444; $navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent; $navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label // Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color; $navbar-inverse-brand-color: $navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff; $navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent; $navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle // Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333; $navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff; $navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333; $navbar-inverse-toggle-border-color: #333;
//== Navs //== Navs
...@@ -383,97 +383,97 @@ ...@@ -383,97 +383,97 @@
//## //##
//=== Shared nav styles //=== Shared nav styles
@nav-link-padding: .6em 1em; $nav-link-padding: .6em 1em;
@nav-link-hover-bg: @gray-lighter; $nav-link-hover-bg: $gray-lighter;
@nav-disabled-link-color: @gray-light; $nav-disabled-link-color: $gray-light;
@nav-disabled-link-hover-color: @gray-light; $nav-disabled-link-hover-color: $gray-light;
//== Tabs //== Tabs
@nav-tabs-border-color: #ddd; $nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter; $nav-tabs-link-hover-border-color: $gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg; $nav-tabs-active-link-hover-bg: $body-bg;
@nav-tabs-active-link-hover-color: @gray; $nav-tabs-active-link-hover-color: $gray;
@nav-tabs-active-link-hover-border-color: #ddd; $nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd; $nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg; $nav-tabs-justified-active-link-border-color: $body-bg;
//== Pills //== Pills
@nav-pills-border-radius: @border-radius-base; $nav-pills-border-radius: $border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg; $nav-pills-active-link-hover-bg: $component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color; $nav-pills-active-link-hover-color: $component-active-color;
//== Pagination //== Pagination
// //
//## //##
@pagination-color: @link-color; $pagination-color: $link-color;
@pagination-bg: #fff; $pagination-bg: #fff;
@pagination-border: #ddd; $pagination-border: #ddd;
@pagination-hover-color: @link-hover-color; $pagination-hover-color: $link-hover-color;
@pagination-hover-bg: @gray-lighter; $pagination-hover-bg: $gray-lighter;
@pagination-hover-border: #ddd; $pagination-hover-border: #ddd;
@pagination-active-color: #fff; $pagination-active-color: #fff;
@pagination-active-bg: @brand-primary; $pagination-active-bg: $brand-primary;
@pagination-active-border: @brand-primary; $pagination-active-border: $brand-primary;
@pagination-disabled-color: @gray-light; $pagination-disabled-color: $gray-light;
@pagination-disabled-bg: #fff; $pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd; $pagination-disabled-border: #ddd;
//== Pager //== Pager
// //
//## //##
@pager-bg: @pagination-bg; $pager-bg: $pagination-bg;
@pager-border: @pagination-border; $pager-border: $pagination-border;
@pager-border-radius: 15px; $pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg; $pager-hover-bg: $pagination-hover-bg;
@pager-active-bg: @pagination-active-bg; $pager-active-bg: $pagination-active-bg;
@pager-active-color: @pagination-active-color; $pager-active-color: $pagination-active-color;
@pager-disabled-color: @pagination-disabled-color; $pager-disabled-color: $pagination-disabled-color;
//== Jumbotron //== Jumbotron
// //
//## //##
@jumbotron-padding: 2rem; $jumbotron-padding: 2rem;
@jumbotron-color: inherit; $jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter; $jumbotron-bg: $gray-lighter;
@jumbotron-heading-color: inherit; $jumbotron-heading-color: inherit;
// @jumbotron-font-size: ceil((@font-size-base * 1.5)); // $jumbotron-font-size: ceil(($font-size-base * 1.5));
//== Form states and alerts //== Form states and alerts
// //
//## Define colors for form feedback states and, by default, alerts. //## Define colors for form feedback states and, by default, alerts.
@state-success-text: #3c763d; $state-success-text: #3c763d;
@state-success-bg: #dff0d8; $state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%); $state-success-border: darken($state-success-bg, 5%);
@state-info-text: #31708f; $state-info-text: #31708f;
@state-info-bg: #d9edf7; $state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%); $state-info-border: darken($state-info-bg, 7%);
@state-warning-text: #8a6d3b; $state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3; $state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); $state-warning-border: darken($state-warning-bg, 5%);
@state-danger-text: #a94442; $state-danger-text: #a94442;
@state-danger-bg: #f2dede; $state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); $state-danger-border: darken($state-danger-bg, 5%);
//== Tooltips //== Tooltips
...@@ -481,17 +481,17 @@ ...@@ -481,17 +481,17 @@
//## //##
//** Tooltip max width //** Tooltip max width
@tooltip-max-width: 200px; $tooltip-max-width: 200px;
//** Tooltip text color //** Tooltip text color
@tooltip-color: #fff; $tooltip-color: #fff;
//** Tooltip background color //** Tooltip background color
@tooltip-bg: #000; $tooltip-bg: #000;
@tooltip-opacity: .9; $tooltip-opacity: .9;
//** Tooltip arrow width //** Tooltip arrow width
@tooltip-arrow-width: 5px; $tooltip-arrow-width: 5px;
//** Tooltip arrow color //** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg; $tooltip-arrow-color: $tooltip-bg;
//== Popovers //== Popovers
...@@ -499,28 +499,28 @@ ...@@ -499,28 +499,28 @@
//## //##
//** Popover body background color //** Popover body background color
@popover-bg: #fff; $popover-bg: #fff;
//** Popover maximum width //** Popover maximum width
@popover-max-width: 276px; $popover-max-width: 276px;
//** Popover border color //** Popover border color
@popover-border-color: rgba(0,0,0,.2); $popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color //** Popover fallback border color
@popover-fallback-border-color: #ccc; $popover-fallback-border-color: #ccc;
//** Popover title background color //** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%); $popover-title-bg: darken($popover-bg, 3%);
//** Popover arrow width //** Popover arrow width
@popover-arrow-width: 10px; $popover-arrow-width: 10px;
//** Popover arrow color //** Popover arrow color
@popover-arrow-color: @popover-bg; $popover-arrow-color: $popover-bg;
//** Popover outer arrow width //** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1); $popover-arrow-outer-width: ($popover-arrow-width + 1);
//** Popover outer arrow color //** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%); $popover-arrow-outer-color: fadein($popover-border-color, 5%);
//** Popover outer arrow fallback color //** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%);
//== Labels //== Labels
...@@ -528,22 +528,22 @@ ...@@ -528,22 +528,22 @@
//## //##
//** Default label background color //** Default label background color
@label-default-bg: @gray-light; $label-default-bg: $gray-light;
//** Primary label background color //** Primary label background color
@label-primary-bg: @brand-primary; $label-primary-bg: $brand-primary;
//** Success label background color //** Success label background color
@label-success-bg: @brand-success; $label-success-bg: $brand-success;
//** Info label background color //** Info label background color
@label-info-bg: @brand-info; $label-info-bg: $brand-info;
//** Warning label background color //** Warning label background color
@label-warning-bg: @brand-warning; $label-warning-bg: $brand-warning;
//** Danger label background color //** Danger label background color
@label-danger-bg: @brand-danger; $label-danger-bg: $brand-danger;
//** Default label text color //** Default label text color
@label-color: #fff; $label-color: #fff;
//** Default text color of a linked label //** Default text color of a linked label
@label-link-hover-color: #fff; $label-link-hover-color: #fff;
//== Modals //== Modals
...@@ -551,55 +551,55 @@ ...@@ -551,55 +551,55 @@
//## //##
//** Padding applied to the modal body //** Padding applied to the modal body
@modal-inner-padding: 15px; $modal-inner-padding: 15px;
//** Padding applied to the modal title //** Padding applied to the modal title
@modal-title-padding: 15px; $modal-title-padding: 15px;
//** Modal title line-height //** Modal title line-height
@modal-title-line-height: @line-height-base; $modal-title-line-height: $line-height-base;
//** Background color of modal content area //** Background color of modal content area
@modal-content-bg: #fff; $modal-content-bg: #fff;
//** Modal content border color //** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2); $modal-content-border-color: rgba(0,0,0,.2);
//** Modal backdrop background color //** Modal backdrop background color
@modal-backdrop-bg: #000; $modal-backdrop-bg: #000;
//** Modal backdrop opacity //** Modal backdrop opacity
@modal-backdrop-opacity: .5; $modal-backdrop-opacity: .5;
//** Modal header border color //** Modal header border color
@modal-header-border-color: #e5e5e5; $modal-header-border-color: #e5e5e5;
//** Modal footer border color //** Modal footer border color
@modal-footer-border-color: @modal-header-border-color; $modal-footer-border-color: $modal-header-border-color;
@modal-lg: 900px; $modal-lg: 900px;
@modal-md: 600px; $modal-md: 600px;
@modal-sm: 300px; $modal-sm: 300px;
//== Alerts //== Alerts
// //
//## Define alert colors, border radius, and padding. //## Define alert colors, border radius, and padding.
@alert-padding: 15px; $alert-padding: 15px;
@alert-border-radius: @border-radius-base; $alert-border-radius: $border-radius-base;
@alert-link-font-weight: bold; $alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg; $alert-success-bg: $state-success-bg;
@alert-success-text: @state-success-text; $alert-success-text: $state-success-text;
@alert-success-border: @state-success-border; $alert-success-border: $state-success-border;
@alert-info-bg: @state-info-bg; $alert-info-bg: $state-info-bg;
@alert-info-text: @state-info-text; $alert-info-text: $state-info-text;
@alert-info-border: @state-info-border; $alert-info-border: $state-info-border;
@alert-warning-bg: @state-warning-bg; $alert-warning-bg: $state-warning-bg;
@alert-warning-text: @state-warning-text; $alert-warning-text: $state-warning-text;
@alert-warning-border: @state-warning-border; $alert-warning-border: $state-warning-border;
@alert-danger-bg: @state-danger-bg; $alert-danger-bg: $state-danger-bg;
@alert-danger-text: @state-danger-text; $alert-danger-text: $state-danger-text;
@alert-danger-border: @state-danger-border; $alert-danger-border: $state-danger-border;
//== Progress bars //== Progress bars
...@@ -607,22 +607,22 @@ ...@@ -607,22 +607,22 @@
//## //##
//** Background color of the whole progress component //** Background color of the whole progress component
@progress-bg: #f5f5f5; $progress-bg: #f5f5f5;
//** Progress bar text color //** Progress bar text color
@progress-bar-color: #fff; $progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar. //** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base; $progress-border-radius: $border-radius-base;
//** Default progress bar color //** Default progress bar color
@progress-bar-bg: @brand-primary; $progress-bar-bg: $brand-primary;
//** Success progress bar color //** Success progress bar color
@progress-bar-success-bg: @brand-success; $progress-bar-success-bg: $brand-success;
//** Warning progress bar color //** Warning progress bar color
@progress-bar-warning-bg: @brand-warning; $progress-bar-warning-bg: $brand-warning;
//** Danger progress bar color //** Danger progress bar color
@progress-bar-danger-bg: @brand-danger; $progress-bar-danger-bg: $brand-danger;
//** Info progress bar color //** Info progress bar color
@progress-bar-info-bg: @brand-info; $progress-bar-info-bg: $brand-info;
//== List group //== List group
...@@ -630,33 +630,33 @@ ...@@ -630,33 +630,33 @@
//## //##
//** Background color on `.list-group-item` //** Background color on `.list-group-item`
@list-group-bg: #fff; $list-group-bg: #fff;
//** `.list-group-item` border color //** `.list-group-item` border color
@list-group-border: #ddd; $list-group-border: #ddd;
//** List group border radius //** List group border radius
@list-group-border-radius: @border-radius-base; $list-group-border-radius: $border-radius-base;
//** Background color of single list items on hover //** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5; $list-group-hover-bg: #f5f5f5;
//** Text color of active list items //** Text color of active list items
@list-group-active-color: @component-active-color; $list-group-active-color: $component-active-color;
//** Background color of active list items //** Background color of active list items
@list-group-active-bg: @component-active-bg; $list-group-active-bg: $component-active-bg;
//** Border color of active list elements //** Border color of active list elements
@list-group-active-border: @list-group-active-bg; $list-group-active-border: $list-group-active-bg;
//** Text color for content within active list items //** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); $list-group-active-text-color: lighten($list-group-active-bg, 40%);
//** Text color of disabled list items //** Text color of disabled list items
@list-group-disabled-color: @gray-light; $list-group-disabled-color: $gray-light;
//** Background color of disabled list items //** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter; $list-group-disabled-bg: $gray-lighter;
//** Text color for content within disabled list items //** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color; $list-group-disabled-text-color: $list-group-disabled-color;
@list-group-link-color: #555; $list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color; $list-group-link-hover-color: $list-group-link-color;
@list-group-link-heading-color: #333; $list-group-link-heading-color: #333;
//== Thumbnails //== Thumbnails
...@@ -664,91 +664,91 @@ ...@@ -664,91 +664,91 @@
//## //##
//** Padding around the thumbnail image //** Padding around the thumbnail image
@thumbnail-padding: .25rem; $thumbnail-padding: .25rem;
//** Thumbnail background color //** Thumbnail background color
@thumbnail-bg: @body-bg; $thumbnail-bg: $body-bg;
//** Thumbnail border color //** Thumbnail border color
@thumbnail-border: #ddd; $thumbnail-border: #ddd;
//** Thumbnail border radius //** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base; $thumbnail-border-radius: $border-radius-base;
//== Badges //== Badges
// //
//## //##
@badge-color: #fff; $badge-color: #fff;
//** Linked badge text color on hover //** Linked badge text color on hover
@badge-link-hover-color: #fff; $badge-link-hover-color: #fff;
@badge-bg: @gray-light; $badge-bg: $gray-light;
//** Badge text color in active nav link //** Badge text color in active nav link
@badge-active-color: @link-color; $badge-active-color: $link-color;
//** Badge background color in active nav link //** Badge background color in active nav link
@badge-active-bg: #fff; $badge-active-bg: #fff;
@badge-font-weight: bold; $badge-font-weight: bold;
@badge-line-height: 1; $badge-line-height: 1;
@badge-border-radius: 2em; $badge-border-radius: 2em;
//== Breadcrumbs //== Breadcrumbs
// //
//## //##
@breadcrumb-padding-vertical: .75rem; $breadcrumb-padding-vertical: .75rem;
@breadcrumb-padding-horizontal: 1rem; $breadcrumb-padding-horizontal: 1rem;
//** Breadcrumb background color //** Breadcrumb background color
@breadcrumb-bg: @gray-lighter; $breadcrumb-bg: $gray-lighter;
//** Text color for the generated divider between breadcrumb items //** Text color for the generated divider between breadcrumb items
@breadcrumb-divider-color: @gray-light; $breadcrumb-divider-color: $gray-light;
//** Text color of current page in the breadcrumb //** Text color of current page in the breadcrumb
@breadcrumb-active-color: @gray-light; $breadcrumb-active-color: $gray-light;
//** Textual divider for between breadcrumb elements //** Textual divider for between breadcrumb elements
@breadcrumb-divider: "/"; $breadcrumb-divider: "/";
//== Carousel //== Carousel
// //
//## //##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff; $carousel-control-color: #fff;
@carousel-control-width: 15%; $carousel-control-width: 15%;
@carousel-control-opacity: .5; $carousel-control-opacity: .5;
@carousel-control-font-size: 20px; $carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff; $carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff; $carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff; $carousel-caption-color: #fff;
//== Close //== Close
// //
//## //##
@close-font-weight: bold; $close-font-weight: bold;
@close-color: #000; $close-color: #000;
@close-text-shadow: 0 1px 0 #fff; $close-text-shadow: 0 1px 0 #fff;
//== Code //== Code
// //
//## //##
@code-color: #d44950; $code-color: #d44950;
@code-bg: #f7f7f9; $code-bg: #f7f7f9;
@kbd-color: #fff; $kbd-color: #fff;
@kbd-bg: #333; $kbd-bg: #333;
@pre-bg: #f7f7f9; $pre-bg: #f7f7f9;
@pre-color: @gray-dark; $pre-color: $gray-dark;
@pre-border-color: #ccc; $pre-border-color: #ccc;
@pre-scrollable-max-height: 340px; $pre-scrollable-max-height: 340px;
//== Type //== Type
...@@ -756,22 +756,22 @@ ...@@ -756,22 +756,22 @@
//## //##
//** Horizontal offset for forms and lists. //** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px; $component-offset-horizontal: 180px;
//** Text muted color //** Text muted color
@text-muted: @gray-light; $text-muted: $gray-light;
//** Abbreviations and acronyms border color //** Abbreviations and acronyms border color
@abbr-border-color: @gray-light; $abbr-border-color: $gray-light;
//** Headings small color //** Headings small color
@headings-small-color: @gray-light; $headings-small-color: $gray-light;
//** Blockquote small color //** Blockquote small color
@blockquote-small-color: @gray-light; $blockquote-small-color: $gray-light;
//** Blockquote font size //** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25); $blockquote-font-size: ($font-size-base * 1.25);
//** Blockquote border color //** Blockquote border color
@blockquote-border-color: @gray-lighter; $blockquote-border-color: $gray-lighter;
//** Page header border color //** Page header border color
@page-header-border-color: @gray-lighter; $page-header-border-color: $gray-lighter;
//** Width of horizontal description list titles //** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal; $dl-horizontal-offset: $component-offset-horizontal;
//** Horizontal line color. //** Horizontal line color.
@hr-border: @gray-lighter; $hr-border: $gray-lighter;
scss/bootstrap.scss 0 → 100644
View file @ bad40d5c
// Core variables and mixins
@import "variables";
@import "mixins";
// // Reset and dependencies
@import "normalize";
@import "print";
// Core CSS
@import "scaffolding";
@import "type";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// // Components
@import "animation";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "pager";
@import "labels";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";
// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
// Utility classes
@import "utilities";
@import "utilities-responsive";
scss/mixins/_alert.scss 0 → 100644
View file @ bad40d5c
// Alerts
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}
}
scss/mixins/_background-variant.scss 0 → 100644
View file @ bad40d5c
// Contextual backgrounds
// [converter] $parent hack
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color;
}
a#{$parent}:hover {
background-color: darken($color, 10%);
}
}
scss/mixins/_border-radius.scss 0 → 100644
View file @ bad40d5c
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
less/mixins/buttons.less → scss/mixins/_buttons.scss
View file @ bad40d5c
...@@ -3,29 +3,29 @@ ...@@ -3,29 +3,29 @@
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons // and disabled options for all buttons
.button-variant(@color; @background; @border) { @mixin button-variant($color, $background, $border) {
color: @color; color: $color;
background-color: @background; background-color: $background;
border-color: @border; border-color: $border;
// @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); // $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
// .box-shadow(@shadow); // .box-shadow($shadow);
&:hover, &:hover,
&:focus, &:focus,
&.focus, &.focus,
&:active, &:active,
&.active, &.active,
.open > .dropdown-toggle& { .open > &.dropdown-toggle {
color: @color; color: $color;
background-color: darken(@background, 10%); background-color: darken($background, 10%);
border-color: darken(@border, 12%); border-color: darken($border, 12%);
} }
&:active, &:active,
&.active, &.active,
.open > .dropdown-toggle& { .open > &.dropdown-toggle {
// Remove the gradient for the pressed/active state // Remove the gradient for the pressed/active state
background-image: none; background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
} }
&.disabled, &.disabled,
&[disabled], &[disabled],
...@@ -36,21 +36,21 @@ ...@@ -36,21 +36,21 @@
&.focus, &.focus,
&:active, &:active,
&.active { &.active {
background-color: @background; background-color: $background;
border-color: @border; border-color: $border;
} }
} }
.badge { .badge {
color: @background; color: $background;
background-color: @color; background-color: $color;
} }
} }
// Button sizes // Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
padding: @padding-vertical @padding-horizontal; padding: $padding-vertical $padding-horizontal;
font-size: @font-size; font-size: $font-size;
line-height: @line-height; line-height: $line-height;
.border-radius(@border-radius); @include border-radius($border-radius);
} }
less/mixins/center-block.less → scss/mixins/_center-block.scss
View file @ bad40d5c
// Center-align a block level element // Center-align a block level element
.center-block() { @mixin center-block() {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
......
less/mixins/clearfix.less → scss/mixins/_clearfix.scss
View file @ bad40d5c
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
// //
// Source: http://nicolasgallagher.com/micro-clearfix-hack/ // Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() { @mixin clearfix() {
&:before, &:before,
&:after { &:after {
content: " "; // 1 content: " "; // 1
......
less/mixins/forms.less → scss/mixins/_forms.scss
View file @ bad40d5c
// Form validation states // Form validation states
// //
// Used in forms.less to generate the form validation CSS for warnings, errors, // Used in _forms.scss to generate the form validation CSS for warnings, errors,
// and successes. // and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
// Color the label and help text // Color the label and help text
.help-block, .help-block,
.control-label, .control-label,
...@@ -15,31 +15,31 @@ ...@@ -15,31 +15,31 @@
&.checkbox label, &.checkbox label,
&.radio-inline label, &.radio-inline label,
&.checkbox-inline label { &.checkbox-inline label {
color: @text-color; color: $text-color;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match
.form-control { .form-control {
border-color: @border-color; border-color: $border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus { &:focus {
border-color: darken(@border-color, 10%); border-color: darken($border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
.box-shadow(@shadow); @include box-shadow($shadow);
} }
} }
// Set validation states also for addons // Set validation states also for addons
.input-group-addon { .input-group-addon {
color: @text-color; color: $text-color;
border-color: @border-color; border-color: $border-color;
background-color: @background-color; background-color: $background-color;
} }
// Optional feedback icon // Optional feedback icon
.form-control-feedback { .form-control-feedback {
color: @text-color; color: $text-color;
} }
} }
// Form control focus state // Form control focus state
// //
// Generate a customized focus state and for any input with the specified color, // Generate a customized focus state and for any input with the specified color,
...@@ -52,12 +52,12 @@ ...@@ -52,12 +52,12 @@
// //
// Example usage: change the default blue border and shadow to white for better // Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background. // contrast against a dark gray background.
.form-control-focus() { @mixin form-control-focus() {
&:focus { &:focus {
border-color: @input-border-focus; border-color: $input-border-focus;
outline: 0; outline: 0;
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @input-box-shadow-focus; $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
.box-shadow(@shadow); @include box-shadow($shadow);
} }
} }
...@@ -66,20 +66,23 @@ ...@@ -66,20 +66,23 @@
// Relative text size, padding, and border-radii changes for form controls. For // Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>` // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact! // element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
.border-radius(@border-radius);
select& { @mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
height: @input-height; #{$parent} {
line-height: @input-height; height: $input-height;
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}
select#{$parent} {
height: $input-height;
line-height: $input-height;
} }
textarea&, textarea#{$parent},
select[multiple]& { select[multiple]#{$parent} {
height: auto; height: auto;
} }
} }
scss/mixins/_gradients.scss 0 → 100644
View file @ bad40d5c
// Gradients
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
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+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
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+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
\ No newline at end of file
scss/mixins/_grid-framework.scss 0 → 100644
View file @ bad40d5c
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-#{$class}-#{$i}";
}
#{$list} {
float: left;
}
}
@mixin calc-grid-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index} {
width: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index} {
left: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index == 0) {
.col-#{$class}-push-0 {
left: auto;
}
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index} {
right: percentage(($index / $grid-columns));
}
}
@if ($type == pull) and ($index == 0) {
.col-#{$class}-pull-0 {
right: auto;
}
}
@if ($type == offset) {
.col-#{$class}-offset-#{$index} {
margin-left: percentage(($index / $grid-columns));
}
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
@for $i from 0 through $columns {
@include calc-grid-column($i, $class, $type);
}
}
// Create grid for specific class
@mixin make-grid($class) {
@include float-grid-columns($class);
@include loop-grid-columns($grid-columns, $class, width);
@include loop-grid-columns($grid-columns, $class, pull);
@include loop-grid-columns($grid-columns, $class, push);
@include loop-grid-columns($grid-columns, $class, offset);
}
\ No newline at end of file
scss/mixins/_grid.scss 0 → 100644
View file @ bad40d5c
/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@include clearfix();
}
@mixin make-row($gutter: $grid-gutter-width) {
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@include clearfix();
}
@mixin make-col($gutter: $grid-gutter-width) {
position: relative;
float: left;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@mixin make-col-span($columns) {
width: percentage(($columns / $grid-columns));
}
@mixin make-col-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
right: percentage(($columns / $grid-columns));
}
less/mixins/hide-text.less → scss/mixins/_hide-text.scss
View file @ bad40d5c
// CSS image replacement // CSS image replacement
.text-hide() { @mixin text-hide() {
font: ~"0/0" a; font: "0/0" a;
color: transparent; color: transparent;
text-shadow: none; text-shadow: none;
background-color: transparent; background-color: transparent;
......
less/mixins/image.less → scss/mixins/_image.scss
View file @ bad40d5c
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
// Responsive image // Responsive image
// //
// Keep images from scaling beyond the width of their parents. // Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
display: @display; @mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
} }
...@@ -17,8 +18,9 @@ ...@@ -17,8 +18,9 @@
// //
// Short retina mixin for setting background-image and -size. Note that the // Short retina mixin for setting background-image and -size. Note that the
// spelling of `min--moz-device-pixel-ratio` is intentional. // spelling of `min--moz-device-pixel-ratio` is intentional.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}"); @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url("#{file-1x}");
@media @media
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2),
...@@ -27,7 +29,7 @@ ...@@ -27,7 +29,7 @@
only screen and ( min-device-pixel-ratio: 2), only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) { only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}"); background-image: url("#{file-2x}");
background-size: @width-1x @height-1x; background-size: $width-1x $height-1x;
} }
} }
less/mixins/labels.less → scss/mixins/_label.scss
View file @ bad40d5c
// Labels // Labels
.label-variant(@color) { @mixin label-variant($color) {
background-color: @color; background-color: $color;
&[href] { &[href] {
&:hover, &:hover,
&:focus { &:focus {
background-color: darken(@color, 10%); background-color: darken($color, 10%);
} }
} }
} }
scss/mixins/_list-group.scss 0 → 100644
View file @ bad40d5c
// List Groups
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{state} {
color: $color;
background-color: $background;
}
a.list-group-item-#{state} {
color: $color;
.list-group-item-heading {
color: inherit;
}
&:hover,
&:focus {
color: $color;
background-color: darken($background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: $color;
border-color: $color;
}
}
}
scss/mixins/_media-queries.scss 0 → 100644
View file @ bad40d5c
// Media query mixins
@mixin media-xs() {
@media (max-width: $screen-xs-max) { @content }
}
@mixin media-sm() {
@media (min-width: $screen-sm-min) { @content }
}
@mixin media-sm-max() {
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @content }
}
@mixin media-md() {
@media (min-width: $screen-md-min) { @content }
}
@mixin media-md-max() {
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @content }
}
@mixin media-lg() {
@media (min-width: $screen-lg-min) { @content }
}
less/mixins/nav-divider.less → scss/mixins/_nav-divider.scss
View file @ bad40d5c
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
// //
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) { @mixin nav-divider($color: #e5e5e5) {
height: 1px; height: 1px;
margin: ((@line-height-computed / 2) - 1) 0; margin: (($line-height-computed / 2) - 1) 0;
overflow: hidden; overflow: hidden;
background-color: @color; background-color: $color;
} }
less/mixins/nav-vertical-align.less → scss/mixins/_navbar-align.scss
View file @ bad40d5c
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// Vertically center elements in the navbar. // Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) { // @mixin navbar-vertical-align($element-height) {
margin-top: ((@navbar-height - @element-height) / 2); // margin-top: (($navbar-height - $element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2); // margin-bottom: (($navbar-height - $element-height) / 2);
} // }
less/mixins/pagination.less → scss/mixins/_pagination.scss
View file @ bad40d5c
// Pagination // Pagination
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
> li { > li {
> a, > a,
> span { > span {
padding: @padding-vertical @padding-horizontal; padding: $padding-vertical $padding-horizontal;
font-size: @font-size; font-size: $font-size;
} }
&:first-child { &:first-child {
> a, > a,
> span { > span {
.border-left-radius(@border-radius); @include border-left-radius($border-radius);
} }
} }
&:last-child { &:last-child {
> a, > a,
> span { > span {
.border-right-radius(@border-radius); @include border-right-radius($border-radius);
} }
} }
} }
......
less/mixins/progress-bar.less → scss/mixins/_progress.scss
View file @ bad40d5c
// Progress bars // Progress bars
.progress-variant(@color) { @mixin progress-variant($color) {
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: @color; background-color: $color;
} }
&[value]::-moz-progress-bar { &[value]::-moz-progress-bar {
background-color: @color; background-color: $color;
} }
@media screen and (~"min-width:0\0") {
@media screen and ("min-width:0\0") {
.progress-bar { .progress-bar {
background-color: @color; background-color: $color;
} }
} }
} }
less/mixins/reset-filter.less → scss/mixins/_reset-filter.scss
View file @ bad40d5c
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
// When you need to remove a gradient background, do not forget to use this to reset // When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below. // the IE filter for IE9 and below.
.reset-filter() { @mixin reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
} }
less/mixins/resize.less → scss/mixins/_resize.scss
View file @ bad40d5c
// Resize anything // Resize anything
.resizable(@direction) { @mixin resizable($direction) {
resize: @direction; // Options: horizontal, vertical, both resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
} }
scss/mixins/_responsive-visibility.scss 0 → 100644
View file @ bad40d5c
// Responsive utilities
//
// More easily include all the states for responsive-utilities.less.
// [converter] $parent hack
@mixin responsive-visibility($parent) {
#{$parent} {
display: block !important;
}
table#{$parent} { display: table; }
tr#{$parent} { display: table-row !important; }
th#{$parent},
td#{$parent} { display: table-cell !important; }
}
// [converter] $parent hack
@mixin responsive-invisibility($parent) {
#{$parent} {
display: none !important;
}
}
scss/mixins/_size.scss 0 → 100644
View file @ bad40d5c
// Sizing shortcuts
@mixin size($width, $height) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}
less/mixins/tab-focus.less → scss/mixins/_tab-focus.scss
View file @ bad40d5c
// WebKit-style focus // WebKit-style focus
.tab-focus() { @mixin tab-focus() {
// Default // Default
outline: thin dotted; outline: thin dotted;
// WebKit // WebKit
......
less/mixins/table-row.less → scss/mixins/_table-row.scss
View file @ bad40d5c
// Tables // Tables
.table-row-variant(@state; @background) { @mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent // Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables. // inheritance to nested tables.
.table > thead > tr, .table > thead > tr,
.table > tbody > tr, .table > tbody > tr,
.table > tfoot > tr { .table > tfoot > tr {
> td.@{state}, > td.#{$state},
> th.@{state}, > th.#{$state},
&.@{state} > td, &.#{$state} > td,
&.@{state} > th { &.#{$state} > th {
background-color: @background; background-color: $background;
} }
} }
// Hover states for `.table-hover` // Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`. // Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr { .table-hover > tbody > tr {
> td.@{state}:hover, > td.#{$state}:hover,
> th.@{state}:hover, > th.#{$state}:hover,
&.@{state}:hover > td, &.#{$state}:hover > td,
&:hover > .@{state}, &:hover > .#{$state},
&.@{state}:hover > th { &.#{$state}:hover > th {
background-color: darken(@background, 5%); background-color: darken($background, 5%);
} }
} }
} }
scss/mixins/_text-emphasis.scss 0 → 100644
View file @ bad40d5c
// Typography
@mixin text-emphasis-variant($parent, $color) {
#{$parent} {
color: $color;
}
a#{$parent}:hover {
color: darken($color, 10%);
}
}
less/mixins/text-overflow.less → scss/mixins/_text-overflow.scss
View file @ bad40d5c
// Text overflow // Text overflow
// Requires inline-block or block for proper styling // Requires inline-block or block for proper styling
.text-overflow() { @mixin text-overflow() {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment