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
Expand all Show 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: {
core: {
options: { options: {
strictMath: true, includePaths: ['scss'],
sourceMap: true, precision: 6,
outputSourceFiles: true, sourceMap: true
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
}, },
src: 'less/bootstrap.less', core: {
dest: 'dist/css/<%= pkg.name %>.css' files: {
'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss'
}
}, },
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 diff is collapsed.
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
This diff is collapsed.
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 diff is collapsed.
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
This diff is collapsed.
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
This diff is collapsed.
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);
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;
......
scss/mixins/_list-group.scss 0 → 100644
View file @ bad40d5c
This diff is collapsed.
scss/mixins/_media-queries.scss 0 → 100644
View file @ bad40d5c
This diff is collapsed.
scss/mixins/_responsive-visibility.scss 0 → 100644
View file @ bad40d5c
This diff is collapsed.
scss/mixins/_size.scss 0 → 100644
View file @ bad40d5c
This diff is collapsed.
scss/mixins/_text-emphasis.scss 0 → 100644
View file @ bad40d5c
This diff is collapsed.
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