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 Hide whitespace changes
Inline Side-by-side
Showing with 8313 additions and 4894 deletions
Gruntfile.js
View file @ bad40d5c
......@@ -20,12 +20,12 @@ module.exports = function (grunt) {
var npmShrinkwrap = require('npm-shrinkwrap');
var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
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 parser = new BsLessdocParser(fileContent);
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 configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
......@@ -148,24 +148,20 @@ module.exports = function (grunt) {
files: 'js/tests/index.html'
},
less: {
sass: {
options: {
includePaths: ['scss'],
precision: 6,
sourceMap: true
},
core: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
files: {
'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss'
}
},
docs: {
options: {
strictMath: true
},
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) {
csscomb: {
options: {
config: 'less/.csscomb.json'
config: 'scss/.csscomb.json'
},
dist: {
expand: true,
......@@ -396,8 +392,8 @@ module.exports = function (grunt) {
grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
// CSS distribution task.
grunt.registerTask('less-compile', ['less:core', 'less:docs']);
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
// Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
......@@ -411,12 +407,12 @@ module.exports = function (grunt) {
grunt.registerTask('change-version-number', 'sed');
// task for building customizer
grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
grunt.registerTask('build-customizer-html', 'jade');
grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
var banner = grunt.template.process('<%= banner %>');
generateRawFiles(grunt, banner);
});
// grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
// grunt.registerTask('build-customizer-html', 'jade');
// grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
// var banner = grunt.template.process('<%= banner %>');
// generateRawFiles(grunt, banner);
// });
grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () {
var srcFiles = grunt.config.get('concat.bootstrap.src');
......@@ -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-js', ['uglify:docsJs', 'uglify:customize']);
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']);
......
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 @@
*/
// Import Bootstrap variables and mixins
@import "../../../less/_variables.less";
@import "../../../less/_mixins.less";
@import "../../../scss/variables";
@import "../../../scss/mixins";
// Import the syntax highlighting
@import "syntax.less";
@import "syntax";
// Local docs variables
@bs-purple: #563d7c;
@bs-purple-light: #cdbfe3;
@bs-yellow: #ffe484;
@bs-danger: #d9534f;
@bs-warning: #f0ad4e;
@bs-info: #5bc0de;
$bs-purple: #563d7c;
$bs-purple-light: #cdbfe3;
$bs-yellow: #ffe484;
$bs-danger: #d9534f;
$bs-warning: #f0ad4e;
$bs-info: #5bc0de;
// Scaffolding
......@@ -35,28 +35,28 @@ body {
//
.btn-outline {
color: @bs-purple;
color: $bs-purple;
background-color: transparent;
border-color: @bs-purple;
border-color: $bs-purple;
&:hover,
&:focus,
&:active {
color: #fff;
background-color:@bs-purple;
border-color: @bs-purple;
background-color:$bs-purple;
border-color: $bs-purple;
}
}
.btn-outline-inverse {
color: #fff;
background-color: transparent;
border-color: @bs-purple-light;
border-color: $bs-purple-light;
&:hover,
&:focus,
&:active {
color: @bs-purple;
color: $bs-purple;
text-shadow: none;
background-color: #fff;
border-color: #fff;
......@@ -78,16 +78,16 @@ body {
color: #fff;
text-align: center;
cursor: default;
background-color: @bs-purple;
background-color: $bs-purple;
border-radius: 15%;
&.inverse {
color: @bs-purple;
color: $bs-purple;
background-color: #fff;
}
&.outline {
background-color: transparent;
border: 1px solid @bs-purple-light;
border: 1px solid $bs-purple-light;
}
}
......@@ -217,7 +217,7 @@ body {
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499;
#gradient > .vertical(@bs-purple, #6f5499);
@include gradient-vertical($bs-purple, #6f5499);
}
.bs-docs-masthead .bs-docs-booticon {
......@@ -279,7 +279,7 @@ body {
padding-bottom: 2rem;
margin-bottom: 2rem;
font-size: 1.25rem;
background-color: @bs-purple;
background-color: $bs-purple;
}
.bs-docs-header h1 {
margin-top: 0;
......@@ -330,7 +330,7 @@ body {
overflow: hidden; /* clearfix */
font-size: .8rem !important;
line-height: 1rem !important;
color: @bs-purple-light !important;
color: $bs-purple-light !important;
text-align: left;
background: transparent !important;
border: solid #866ab3 !important;
......@@ -371,7 +371,7 @@ body {
// }
// .bs-docs-header .carbonad-text a,
// .bs-docs-header .carbonad-tag a {
// color: @bs-purple !important;
// color: $bs-purple !important;
// }
@media (min-width: 480px) {
......@@ -448,7 +448,7 @@ body {
color: #333;
}
.bs-docs-featurette-img:hover {
color: @brand-primary;
color: $brand-primary;
text-decoration: none;
}
.bs-docs-featurette-img img {
......@@ -597,7 +597,7 @@ body {
width: 240px;
overflow-x: hidden;
overflow-y: auto;
#gradient > .vertical(#29262f, #322f38);
@include gradient-vertical(#29262f, #322f38);
}
.bs-docs-sidebar .navbar-brand {
margin-bottom: 15px;
......@@ -634,12 +634,12 @@ body {
}
.bs-docs-toc-link:hover,
.bs-docs-toc-link:focus {
color: @bs-yellow;
color: $bs-yellow;
text-decoration: none;
}
.active > .bs-docs-toc-link {
font-weight: 500;
color: @bs-yellow;
color: $bs-yellow;
}
.active > .bs-docs-sidenav {
display: block;
......@@ -665,7 +665,7 @@ body {
}
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
color: @bs-yellow;
color: $bs-yellow;
text-decoration: none;
background-color: transparent;
}
......@@ -673,7 +673,7 @@ body {
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
font-weight: 500;
color: @bs-yellow;
color: $bs-yellow;
background-color: transparent;
}
......@@ -763,14 +763,14 @@ body {
}
// Variations
.bs-callout-variant(@color) {
border-left-color: @color;
@mixin bs-callout-variant($color) {
border-left-color: $color;
h4 { color: @color; }
h4 { color: $color; }
}
.bs-callout-danger { .bs-callout-variant(@bs-danger); }
.bs-callout-warning { .bs-callout-variant(@bs-warning); }
.bs-callout-info { .bs-callout-variant(@bs-info); }
.bs-callout-danger { @include bs-callout-variant($bs-danger); }
.bs-callout-warning { @include bs-callout-variant($bs-warning); }
.bs-callout-info { @include bs-callout-variant($bs-info); }
//
......@@ -799,10 +799,10 @@ body {
// Docs colors
.color-swatches {
.bs-purple {
background-color: @bs-purple;
background-color: $bs-purple;
}
.bs-purple-light {
background-color: @bs-purple-light;
background-color: $bs-purple-light;
}
.bs-purple-lighter {
background-color: #e5e1ea;
......@@ -880,7 +880,7 @@ body {
margin-bottom: -1rem;
border: solid #f7f7f9;
border-width: .2rem 0 0;
.clearfix();
@include clearfix();
@media (min-width: 480px) {
border-width: .2rem;
......@@ -1123,7 +1123,7 @@ body {
}
.highlight pre code {
font-size: inherit;
color: @gray-dark; // Effectively the base text color
color: $gray-dark; // Effectively the base text color
}
......@@ -1428,8 +1428,8 @@ body {
// Pseudo :focus state for showing how it looks in the docs
#focusedInput {
border-color: @input-border-focus;
border-color: $input-border-focus;
outline: 0;
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 @@
// -------------------------
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
padding: $alert-padding;
margin-bottom: $line-height-computed;
border: 1px solid transparent;
.border-radius(@alert-border-radius);
@include border-radius($alert-border-radius);
// Headings for larger alerts
h4 {
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;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
font-weight: $alert-link-font-weight;
}
// Improve alignment and spacing of inner content
......@@ -38,7 +38,7 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: (@alert-padding + 20);
padding-right: ($alert-padding + 20);
// Adjust close link position
.close {
......@@ -54,14 +54,14 @@
// Generate contextual modifier classes for colorizing the alert.
.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-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-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-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 @@
.fade {
opacity: 0;
transition: opacity .15s linear;
&.in {
opacity: 1;
}
......@@ -14,9 +15,12 @@
display: none;
visibility: hidden;
&.in { display: block; visibility: visible; }
tr&.in { display: table-row; }
tbody&.in { display: table-row-group; }
&.in {
display: block;
visibility: visible;
}
// tr&.in { display: table-row; }
// tbody&.in { display: table-row-group; }
}
.collapsing {
......
less/_badge.less → scss/_badge.scss
View file @ bad40d5c
......@@ -11,12 +11,12 @@
padding-left: .6em;
padding-right: .6em;
font-size: .75em;
font-weight: @badge-font-weight;
color: @badge-color;
font-weight: $badge-font-weight;
color: $badge-color;
text-align: center;
white-space: nowrap;
background-color: @badge-bg;
.border-radius(@badge-border-radius);
background-color: $badge-bg;
@include border-radius($badge-border-radius);
// Empty badges collapse automatically
&:empty {
......@@ -28,21 +28,11 @@
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
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: @badge-active-color;
background-color: @badge-active-bg;
color: $badge-active-color;
background-color: $badge-active-bg;
}
.list-group-item > & {
float: right;
......@@ -54,3 +44,13 @@
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 @@
.breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
margin-bottom: $line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
.border-radius(@border-radius-base);
background-color: $breadcrumb-bg;
@include border-radius($border-radius-base);
> li {
display: inline-block;
+ 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-right: .5rem;
color: @breadcrumb-divider-color;
color: $breadcrumb-divider-color;
}
}
> .active {
color: @breadcrumb-active-color;
color: $breadcrumb-active-color;
}
}
less/_button-group.less → scss/_button-group.scss
View file @ bad40d5c
......@@ -8,9 +8,11 @@
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
......@@ -34,12 +36,13 @@
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all);
@include clearfix();
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
......@@ -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
.btn-group > .btn:first-child {
margin-left: 0;
&: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
.btn-group > .btn:last-child: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)
......@@ -74,11 +78,11 @@
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
@include border-right-radius(0);
}
}
.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
......@@ -92,9 +96,9 @@
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs); }
.btn-group-sm > .btn { &:extend(.btn-sm); }
.btn-group-lg > .btn { &:extend(.btn-lg); }
.btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
// Split button dropdowns
......@@ -113,11 +117,11 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.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.
&.btn-link {
.box-shadow(none);
@include box-shadow(none);
}
}
......@@ -128,12 +132,12 @@
}
// Carets in other button sizes
.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;
}
// Upside down carets for .dropup
.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 @@
// Clear floats so dropdown menus can be properly placed
> .btn-group {
&:extend(.clearfix all);
@include clearfix();
> .btn {
float: none;
}
......@@ -172,12 +177,12 @@
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
border-top-right-radius: $border-radius-base;
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
border-bottom-left-radius: $border-radius-base;
@include border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
......@@ -186,11 +191,11 @@
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
@include border-bottom-radius(0);
}
}
.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 @@
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
......
less/_buttons.less → scss/_buttons.scss
View file @ bad40d5c
......@@ -9,24 +9,24 @@
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
font-weight: $btn-font-weight;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
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;
.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;
.transition(all .2s ease-in-out);
transition: all .2s ease-in-out;
&,
&:active,
&.active {
&:focus,
&.focus {
.tab-focus();
@include tab-focus();
}
}
......@@ -40,16 +40,16 @@
&.active {
outline: 0;
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],
fieldset[disabled] & {
cursor: @cursor-disabled;
cursor: $cursor-disabled;
pointer-events: none; // Future-proof disabling of clicks
opacity: .65;
.box-shadow(none);
@include box-shadow(none);
}
}
......@@ -58,22 +58,22 @@
// --------------------------------------------------
.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 {
.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 {
.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 {
.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 {
.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 {
.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 @@
// Make a button look and behave like a link
.btn-link {
color: @link-color;
color: $link-color;
font-weight: normal;
border-radius: 0;
......@@ -92,7 +92,7 @@
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
@include box-shadow(none);
}
&,
&:hover,
......@@ -102,7 +102,7 @@
}
&:hover,
&:focus {
color: @link-hover-color;
color: $link-hover-color;
text-decoration: underline;
background-color: transparent;
}
......@@ -110,7 +110,7 @@
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
color: $btn-link-disabled-color;
text-decoration: none;
}
}
......@@ -122,14 +122,14 @@
.btn-lg {
// 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 {
// 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 {
.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 @@
padding: .75rem 1.25rem;
margin: -1.25rem -1.25rem 1.25rem;
border-bottom: .075rem solid #eee;
.border-radius(.25rem .25rem 0 0);
@include border-radius(.25rem .25rem 0 0);
}
.card-footer {
padding: .75rem 1.25rem;
margin: 1.25rem -1.25rem -1.25rem;
border-top: .075rem solid #eee;
.border-radius(0 0 .25rem .25rem);
@include border-radius(0 0 .25rem .25rem);
}
......@@ -48,24 +48,24 @@
//
.card-primary {
background-color: @brand-primary;
border-color: @brand-primary;
background-color: $brand-primary;
border-color: $brand-primary;
}
.card-success {
background-color: @brand-success;
border-color: @brand-success;
background-color: $brand-success;
border-color: $brand-success;
}
.card-info {
background-color: @brand-info;
border-color: @brand-info;
background-color: $brand-info;
border-color: $brand-info;
}
.card-warning {
background-color: @brand-warning;
border-color: @brand-warning;
background-color: $brand-warning;
border-color: $brand-warning;
}
.card-danger {
background-color: @brand-danger;
border-color: @brand-danger;
background-color: $brand-danger;
border-color: $brand-danger;
}
......@@ -109,7 +109,7 @@
// Card image
.card-img {
margin: -1.325rem;
.border-radius(.25rem);
@include border-radius(.25rem);
}
.card-img-overlay {
position: absolute;
......@@ -125,11 +125,11 @@
// Card image caps
.card-img-top {
margin: -1.325rem -1.325rem 1.25rem;
.border-radius(.25rem .25rem 0 0);
@include border-radius(.25rem .25rem 0 0);
}
.card-img-bottom {
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 @@
// Account for jankitude on images
> img,
> a > img {
&:extend(.img-responsive);
@extend .img-responsive;
line-height: 1;
}
......@@ -95,30 +95,30 @@
top: 0;
left: 0;
bottom: 0;
width: @carousel-control-width;
opacity: @carousel-control-opacity;
font-size: @carousel-control-font-size;
color: @carousel-control-color;
width: $carousel-control-width;
opacity: $carousel-control-opacity;
font-size: $carousel-control-font-size;
color: $carousel-control-color;
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
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.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 {
left: auto;
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 {
outline: 0;
color: @carousel-control-color;
color: $carousel-control-color;
text-decoration: none;
opacity: .9;
}
......@@ -178,7 +178,7 @@
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid @carousel-indicator-border-color;
border: 1px solid $carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
......@@ -193,7 +193,7 @@
margin: 0;
width: 12px;
height: 12px;
background-color: @carousel-indicator-active-bg;
background-color: $carousel-indicator-active-bg;
}
}
......@@ -208,9 +208,10 @@
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: @carousel-caption-color;
color: $carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
text-shadow: $carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
......@@ -218,7 +219,7 @@
// Scale up controls for tablets and up
.media-sm({
@include media-sm {
// Scale up the controls a smidge
.carousel-control {
.icon-prev,
......@@ -247,4 +248,4 @@
.carousel-indicators {
bottom: 20px;
}
});
}
less/_close.less → scss/_close.scss
View file @ bad40d5c
......@@ -5,16 +5,16 @@
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
font-size: ($font-size-base * 1.5);
font-weight: $close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .2;
&:hover,
&:focus {
color: @close-color;
color: $close-color;
text-decoration: none;
cursor: pointer;
opacity: .5;
......@@ -23,7 +23,7 @@
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button& {
&button {
padding: 0;
cursor: pointer;
background: transparent;
......
less/_code.less → scss/_code.scss
View file @ bad40d5c
......@@ -8,32 +8,32 @@ code,
kbd,
pre,
samp {
font-family: @font-family-monospace;
font-family: $font-family-monospace;
}
// Inline code
code {
padding: .2rem .4rem;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
.border-radius(@border-radius-base);
color: $code-color;
background-color: $code-bg;
@include border-radius($border-radius-base);
}
// User input typically entered via keyboard
kbd {
padding: .2rem .4rem;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
.border-radius(@border-radius-sm);
.box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
.box-shadow(none);
@include box-shadow(none);
}
}
......@@ -44,10 +44,10 @@ pre {
margin-top: 0;
margin-bottom: 1rem;
font-size: 90%;
line-height: @line-height-base;
color: @pre-color;
background-color: @pre-bg;
.border-radius(@border-radius-base);
line-height: $line-height-base;
color: $pre-color;
background-color: $pre-bg;
@include border-radius($border-radius-base);
// Account for some code outputs that place code tags in pre tags
code {
......@@ -61,6 +61,6 @@ pre {
// Enable scrollable blocks of code
.pre-scrollable {
max-height: @pre-scrollable-max-height;
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}
less/_dropdown.less → scss/_dropdown.scss
View file @ bad40d5c
......@@ -16,9 +16,9 @@
content: "";
margin-left: .25rem;
vertical-align: middle;
border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
border-top: $caret-width-base solid;
border-right: $caret-width-base solid transparent;
border-left: $caret-width-base solid transparent;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
......@@ -32,24 +32,24 @@
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
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)
background-color: @dropdown-bg;
border: 1px solid @dropdown-border;
.border-radius(@border-radius-base);
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-color: $dropdown-bg;
border: 1px solid $dropdown-border;
@include border-radius($border-radius-base);
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
@include nav-divider($dropdown-divider-bg);
}
// Links within the dropdown menu
......@@ -58,8 +58,8 @@
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
line-height: $line-height-base;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
......@@ -69,8 +69,8 @@
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
color: $dropdown-link-hover-color;
background-color: $dropdown-link-hover-bg;
}
}
......@@ -79,10 +79,10 @@
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
color: $dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
background-color: $dropdown-link-active-bg;
}
}
......@@ -94,7 +94,7 @@
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
color: $dropdown-link-disabled-color;
}
// Nuke hover/focus effects
......@@ -103,8 +103,8 @@
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: @cursor-disabled;
@include reset-filter();
cursor: $cursor-disabled;
}
}
......@@ -144,9 +144,9 @@
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-sm;
line-height: @line-height-base;
color: @dropdown-header-color;
font-size: $font-size-sm;
line-height: $line-height-base;
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
......@@ -157,7 +157,7 @@
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
z-index: ($zindex-dropdown - 10);
}
// Right aligned dropdowns
......@@ -176,7 +176,7 @@
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
border-bottom: $caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
......@@ -191,16 +191,18 @@
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
.media-sm({
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
});
//
// TODO: remove?
// @include media-sm {
// .navbar-right {
// .dropdown-menu {
// .dropdown-menu-right();
// }
// // Necessary for overrides of the default right aligned menu.
// // 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 @@
// Set the container width, and override it for fixed navbars in media queries.
.container {
.make-container();
@include make-container();
@media (min-width: @screen-sm-min) {
max-width: @container-sm;
@media (min-width: $screen-sm-min) {
max-width: $container-sm;
}
@media (min-width: @screen-md-min) {
max-width: @container-md;
@media (min-width: $screen-md-min) {
max-width: $container-md;
}
@media (min-width: @screen-lg-min) {
max-width: @container-lg;
@media (min-width: $screen-lg-min) {
max-width: $container-lg;
}
}
......@@ -28,7 +28,7 @@
// width for fluid, full width layouts.
.container-fluid {
.make-container();
@include make-container();
}
......@@ -37,7 +37,7 @@
// Rows contain and clear the floats of your columns.
.row {
.make-row();
@include make-row();
}
......@@ -45,7 +45,7 @@
//
// Common styles for small and large grid columns
.make-grid-columns();
@include make-grid-columns();
// Extra small grid
......@@ -53,7 +53,7 @@
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(xs);
@include make-grid(xs);
// Small grid
......@@ -61,24 +61,24 @@
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
.media-sm({
.make-grid(sm);
});
@include media-sm {
@include make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
.media-md({
.make-grid(md);
});
@include media-md {
@include make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
.media-lg({
.make-grid(lg);
});
@include media-lg {
@include make-grid(lg);
}
less/_input-group.less → scss/_input-group.scss
View file @ bad40d5c
......@@ -40,12 +40,12 @@
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
.input-lg();
@extend .input-lg;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
.input-sm();
@extend .input-sm;
}
......@@ -57,7 +57,7 @@
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
@include border-radius(0);
}
}
// Addon and addon wrapper for buttons
......@@ -71,26 +71,26 @@
// Text input groups
// -------------------------
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
color: $input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
.border-radius(@border-radius-base);
background-color: $input-group-addon-bg;
border: 1px solid $input-group-addon-border-color;
@include border-radius($border-radius-base);
// Sizing
&.input-sm {
padding: @padding-sm-vertical @padding-smhorizontal;
font-size: @font-size-sm;
.border-radius(@border-radius-sm);
padding: $padding-sm-vertical $padding-sm-horizontal;
font-size: $font-size-sm;
@include border-radius($border-radius-sm);
}
&.input-lg {
padding: @padding-lg-vertical @padding-lg-horizontal;
font-size: @font-size-lg;
.border-radius(@border-radius-lg);
padding: $padding-lg-vertical $padding-lg-horizontal;
font-size: $font-size-lg;
@include border-radius($border-radius-lg);
}
// Nuke default margins from checkboxes and radios to vertically center within.
......@@ -108,7 +108,7 @@
.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-group:not(:last-child) > .btn {
.border-right-radius(0);
@include border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
......@@ -120,7 +120,7 @@
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.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 {
border-left: 0;
......
less/_jumbotron.less → scss/_jumbotron.scss
View file @ bad40d5c
......@@ -4,14 +4,14 @@
.jumbotron {
padding: @jumbotron-padding (@jumbotron-padding / 2);
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg;
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
.container &,
.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 {
......@@ -20,25 +20,25 @@
}
.jumbotron-heading {
color: @jumbotron-heading-color;
color: $jumbotron-heading-color;
}
.jumbotron-hr {
border-top-color: darken(@jumbotron-bg, 10%);
border-top-color: darken($jumbotron-bg, 10%);
}
.media-sm({
@include media-sm {
.jumbotron {
padding: (@jumbotron-padding * 1.6) 0;
padding: ($jumbotron-padding * 1.6) 0;
.container &,
.container-fluid & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
padding-left: ($jumbotron-padding * 2);
padding-right: ($jumbotron-padding * 2);
}
}
.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 @@
font-size: 75%;
font-weight: bold;
line-height: 1;
color: @label-color;
color: $label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
.border-radius();
// Add hover effects, but only for links
a& {
&:hover,
&:focus {
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
@include border-radius();
// Empty labels collapse automatically
&:empty {
......@@ -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
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
@include label-variant($label-default-bg);
}
.label-primary {
.label-variant(@label-primary-bg);
@include label-variant($label-primary-bg);
}
.label-success {
.label-variant(@label-success-bg);
@include label-variant($label-success-bg);
}
.label-info {
.label-variant(@label-info-bg);
@include label-variant($label-info-bg);
}
.label-warning {
.label-variant(@label-warning-bg);
@include label-variant($label-warning-bg);
}
.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 @@
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
background-color: $list-group-bg;
border: 1px solid $list-group-border;
// Round the first and last items
&:first-child {
.border-top-radius(@list-group-border-radius);
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
@include border-bottom-radius($list-group-border-radius);
}
}
......@@ -44,18 +44,18 @@
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item {
color: @list-group-link-color;
color: $list-group-link-color;
.list-group-item-heading {
color: @list-group-link-heading-color;
color: $list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
color: @list-group-link-hover-color;
background-color: @list-group-hover-bg;
color: $list-group-link-hover-color;
background-color: $list-group-hover-bg;
}
}
......@@ -64,16 +64,16 @@ a.list-group-item {
&.disabled,
&.disabled:hover,
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
cursor: @cursor-disabled;
background-color: $list-group-disabled-bg;
color: $list-group-disabled-color;
cursor: $cursor-disabled;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-disabled-text-color;
color: $list-group-disabled-text-color;
}
}
......@@ -82,9 +82,9 @@ a.list-group-item {
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
......@@ -93,7 +93,7 @@ a.list-group-item {
color: inherit;
}
.list-group-item-text {
color: @list-group-active-text-color;
color: $list-group-active-text-color;
}
}
}
......@@ -104,10 +104,10 @@ a.list-group-item {
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
.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(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
// 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 @@
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
z-index: $zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
......@@ -50,10 +50,10 @@
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-lg;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-color: $modal-content-bg;
border: 1px solid $modal-content-border-color;
border-radius: $border-radius-lg;
@include box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
......@@ -65,18 +65,18 @@
top: 0;
right: 0;
left: 0;
background-color: @modal-backdrop-bg;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.in { opacity: @modal-backdrop-opacity; }
&.in { opacity: $modal-backdrop-opacity; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
padding: $modal-title-padding;
border-bottom: 1px solid $modal-header-border-color;
min-height: ($modal-title-padding + $modal-title-line-height);
}
// Close icon
.modal-header .close {
......@@ -86,22 +86,22 @@
// Title text within header
.modal-title {
margin: 0;
line-height: @modal-title-line-height;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: @modal-inner-padding;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
padding: @modal-inner-padding;
padding: $modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
border-top: 1px solid $modal-footer-border-color;
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
......@@ -128,20 +128,20 @@
}
// Scale up the modal
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
width: $modal-md;
margin: 30px auto;
}
.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-sm { width: @modal-sm; }
.modal-sm { width: $modal-sm; }
}
@media (min-width: @screen-md-min) {
.modal-lg { width: @modal-lg; }
@media (min-width: $screen-md-min) {
.modal-lg { width: $modal-lg; }
}
less/_nav.less → scss/_nav.scss
View file @ bad40d5c
......@@ -4,8 +4,8 @@
.nav {
margin-bottom: 0;
.list-unstyled();
&:extend(.clearfix all);
@extend .list-unstyled;
@include clearfix();
}
.nav-item {
......@@ -15,26 +15,26 @@
.nav-link {
display: inline-block;
padding: @nav-link-padding;
line-height: @line-height-base;
padding: $nav-link-padding;
line-height: $line-height-base;
&:hover,
&:focus {
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 > &,
&.disabled {
color: @nav-disabled-link-color;
color: $nav-disabled-link-color;
&,
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
color: $nav-disabled-link-hover-color;
background-color: transparent;
cursor: @cursor-disabled;
cursor: $cursor-disabled;
}
}
}
......@@ -45,7 +45,7 @@
//
.nav-tabs {
border-bottom: 1px solid @nav-tabs-border-color;
border-bottom: 1px solid $nav-tabs-border-color;
.nav-item {
float: left;
......@@ -60,11 +60,11 @@
.nav-link {
display: block;
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,
&: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 @@
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
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;
color: $nav-tabs-active-link-hover-color;
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;
}
}
......@@ -86,7 +86,7 @@
&,
&:hover,
&:focus {
color: @nav-disabled-link-color;
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
......@@ -109,7 +109,7 @@
.nav-link {
display: block;
.border-radius(@nav-pills-border-radius);
@include border-radius($nav-pills-border-radius);
}
.open > .nav-link,
......@@ -119,8 +119,8 @@
&,
&:hover,
&:focus {
color: @component-active-color;
background-color: @component-active-bg;
color: $component-active-color;
background-color: $component-active-bg;
cursor: default;
}
}
......@@ -164,5 +164,5 @@
// Make dropdown border overlap tab border
margin-top: -1px;
// 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 @@
.pager {
padding-left: 0;
margin: @line-height-computed 0;
margin: $line-height-computed 0;
list-style: none;
text-align: center;
&:extend(.clearfix all);
@include clearfix();
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: @pager-bg;
border: 1px solid @pager-border;
border-radius: @pager-border-radius;
background-color: $pager-bg;
border: 1px solid $pager-border;
border-radius: $pager-border-radius;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pager-hover-bg;
background-color: $pager-hover-bg;
}
}
......@@ -46,9 +48,9 @@
> a:hover,
> a:focus,
> span {
color: @pager-disabled-color;
background-color: @pager-bg;
cursor: @cursor-disabled;
color: $pager-disabled-color;
background-color: $pager-bg;
cursor: $cursor-disabled;
}
}
}
less/_pagination.less → scss/_pagination.scss
View file @ bad40d5c
......@@ -4,34 +4,35 @@
.pagination {
display: inline-block;
padding-left: 0;
margin: @line-height-computed 0;
border-radius: @border-radius-base;
margin: $line-height-computed 0;
@include border-radius();
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-base;
text-decoration: none;
color: @pagination-color;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
color: $pagination-color;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
.border-left-radius(@border-radius-base);
@include border-left-radius($border-radius-base);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-base);
@include border-right-radius($border-radius-base);
}
}
}
......@@ -40,9 +41,9 @@
> li > span {
&:hover,
&:focus {
color: @pagination-hover-color;
background-color: @pagination-hover-bg;
border-color: @pagination-hover-border;
color: $pagination-hover-color;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
}
}
......@@ -52,9 +53,9 @@
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-border;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border;
cursor: default;
}
}
......@@ -66,10 +67,10 @@
> a,
> a:hover,
> a:focus {
color: @pagination-disabled-color;
background-color: @pagination-disabled-bg;
border-color: @pagination-disabled-border;
cursor: @cursor-disabled;
color: $pagination-disabled-color;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border;
cursor: $cursor-disabled;
}
}
}
......@@ -79,10 +80,10 @@
// Large
.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
.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 @@
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
z-index: $zindex-popover;
display: none;
max-width: @popover-max-width;
max-width: $popover-max-width;
padding: 1px;
// Reset font and text propertes given new insertion method
font-family: @font-family-base;
font-size: @font-size-base;
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: normal;
line-height: @line-height-base;
line-height: $line-height-base;
text-align: left;
background-color: @popover-bg;
background-color: $popover-bg;
background-clip: padding-box;
border: 1px solid @popover-border-color;
.border-radius(@border-radius-lg);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; }
&.top { margin-top: -$popover-arrow-width; }
&.right { margin-left: $popover-arrow-width; }
&.bottom { margin-top: $popover-arrow-width; }
&.left { margin-left: -$popover-arrow-width; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: (@border-radius-lg - 1) (@border-radius-lg - 1) 0 0;
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
@include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
}
.popover-content {
......@@ -62,69 +62,69 @@
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
border-width: $popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
border-width: $popover-arrow-width;
content: "";
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
border-top-color: $popover-arrow-outer-color;
bottom: -$popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
margin-left: -$popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
border-top-color: $popover-arrow-color;
}
}
&.right > .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-color;
border-right-color: $popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
bottom: -$popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
border-right-color: $popover-arrow-color;
}
}
&.bottom > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color;
top: -$popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
margin-left: -$popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
border-bottom-color: $popover-arrow-color;
}
}
&.left > .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-color;
border-left-color: $popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
border-left-color: $popover-arrow-color;
bottom: -$popover-arrow-width;
}
}
}
less/_progress.less → scss/_progress.scss
View file @ bad40d5c
......@@ -10,12 +10,12 @@
//
@-webkit-keyframes progress-bar-stripes {
from { background-position: @line-height-computed 0; }
from { background-position: $line-height-computed 0; }
to { background-position: 0 0; }
}
@keyframes progress-bar-stripes {
from { background-position: @line-height-computed 0; }
from { background-position: $line-height-computed 0; }
to { background-position: 0 0; }
}
......@@ -27,8 +27,8 @@
.progress {
display: block;
width: 100%;
height: @line-height-computed;
margin-bottom: @line-height-computed;
height: $line-height-computed;
margin-bottom: $line-height-computed;
}
.progress[value] {
// Reset the default appearance
......@@ -40,73 +40,73 @@
}
.progress[value]::-webkit-progress-bar {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include border-radius($border-radius-base);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-webkit-progress-value::before {
content: attr(value);
}
.progress[value]::-webkit-progress-value {
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
border-top-left-radius: $border-radius-base;
border-bottom-left-radius: $border-radius-base;
}
.progress[value="100"]::-webkit-progress-value {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-top-right-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
}
// Firefox styles must be entirely separate or it busts Webkit styles.
//
// Commented out for now because linter.
//
// @-moz-document url-prefix() {
// $-moz-document url-prefix() {
// .progress[value] {
// background-color: #eee;
// .border-radius(@border-radius-base);
// .border-radius($border-radius-base);
// .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
// }
// .progress[value]::-moz-progress-bar {
// background-color: #0074d9;
// border-top-left-radius: @border-radius-base;
// border-bottom-left-radius: @border-radius-base;
// border-top-left-radius: $border-radius-base;
// border-bottom-left-radius: $border-radius-base;
// }
// .progress[value="0"]::-moz-progress-bar {
// color: @gray-light;
// color: $gray-light;
// min-width: 2rem;
// background-color: transparent;
// background-image: none;
// }
// .progress[value="100"]::-moz-progress-bar {
// border-top-right-radius: @border-radius-base;
// border-bottom-right-radius: @border-radius-base;
// border-top-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.
@media screen and (~"min-width:0\0") {
@media screen and ("min-width:0\0") {
.progress {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include border-radius($border-radius-base);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress-bar {
display: inline-block;
height: @line-height-computed;
height: $line-height-computed;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
border-top-left-radius: $border-radius-base;
border-bottom-left-radius: $border-radius-base;
}
.progress[width^="0"] {
color: @gray-light;
color: $gray-light;
min-width: 2rem;
background-color: transparent;
background-image: none;
}
.progress[width="100%"] {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-top-right-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
}
}
......@@ -116,17 +116,17 @@
//
.progress-striped[value]::-webkit-progress-value {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
@include gradient-striped();
background-size: $line-height-computed $line-height-computed;
}
.progress-striped[value]::-moz-progress-bar {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
@include gradient-striped();
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 {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
@include gradient-striped();
background-size: $line-height-computed $line-height-computed;
}
}
......@@ -141,7 +141,7 @@
.progress-animated[value]::-moz-progress-bar {
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 {
animation: progress-bar-stripes 2s linear infinite;
}
......@@ -153,14 +153,14 @@
//
.progress-success {
.progress-variant(@progress-bar-success-bg);
@include progress-variant($progress-bar-success-bg);
}
.progress-info {
.progress-variant(@progress-bar-info-bg);
@include progress-variant($progress-bar-info-bg);
}
.progress-warning {
.progress-variant(@progress-bar-warning-bg);
@include progress-variant($progress-bar-warning-bg);
}
.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 @@
// Body reset
html {
font-size: @font-size-root;
font-size: ($font-size-root)px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
// Reset fonts for relevant elements
......@@ -44,17 +44,17 @@ textarea {
// Links
a {
color: @link-color;
color: $link-color;
text-decoration: none;
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: @link-hover-decoration;
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus {
.tab-focus();
@include tab-focus();
}
}
......@@ -77,26 +77,26 @@ img {
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
.img-responsive();
@include img-responsive();
}
// Rounded corners
.img-rounded {
.border-radius(@border-radius-lg);
@include border-radius($border-radius-lg);
}
// Image thumbnails
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
padding: $thumbnail-padding;
line-height: $line-height-base;
background-color: $thumbnail-bg;
border: 1px solid $thumbnail-border;
border-radius: $thumbnail-border-radius;
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
.img-responsive(inline-block);
@include img-responsive(inline-block);
}
// Perfect circle
......@@ -108,10 +108,10 @@ img {
// Horizontal rules
hr {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
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 @@
// Tables
// --------------------------------------------------
table {
background-color: @table-bg;
background-color: $table-bg;
}
caption {
padding-top: @table-cell-padding;
padding-bottom: @table-cell-padding;
color: @text-muted;
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
text-align: left;
}
th {
......@@ -22,7 +21,7 @@ th {
.table {
width: 100%;
max-width: 100%;
margin-bottom: @line-height-computed;
margin-bottom: $line-height-computed;
// Cells
> thead,
> tbody,
......@@ -30,17 +29,17 @@ th {
> tr {
> th,
> td {
padding: @table-cell-padding;
line-height: @line-height-base;
padding: $table-cell-padding;
line-height: $line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
border-top: 1px solid $table-border-color;
}
}
}
// Bottom align for column headings
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
border-bottom: 2px solid $table-border-color;
}
// Remove top border from thead by default
// > caption + thead,
......@@ -55,12 +54,12 @@ th {
// }
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid @table-border-color;
border-top: 2px solid $table-border-color;
}
// Nesting
// .table {
// background-color: @body-bg;
// background-color: $body-bg;
// }
}
......@@ -74,7 +73,7 @@ th {
> tr {
> th,
> td {
padding: @table-sm-cell-padding;
padding: $table-sm-cell-padding;
}
}
}
......@@ -86,14 +85,14 @@ th {
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
}
}
}
......@@ -112,7 +111,7 @@ th {
.table-striped {
> tbody > tr:nth-child(odd) {
background-color: @table-bg-accent;
background-color: $table-bg-accent;
}
}
......@@ -123,7 +122,7 @@ th {
.table-hover {
> tbody > tr:hover {
background-color: @table-bg-hover;
background-color: $table-bg-hover;
}
}
......@@ -155,11 +154,11 @@ table {
// inheritance to nested tables.
// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(info; @state-info-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
@include table-row-variant(active, $table-bg-active);
@include table-row-variant(success, $state-success-bg);
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include table-row-variant(danger, $state-danger-bg);
// Responsive tables
......@@ -172,12 +171,12 @@ table {
overflow-x: auto;
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%;
margin-bottom: (@line-height-computed * 0.75);
margin-bottom: ($line-height-computed * 0.75);
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
// Tighten up spacing
> .table {
......@@ -237,19 +236,19 @@ table {
.table > .thead-inverse {
> tr > th {
color: #fff;
background-color: @gray-dark;
background-color: $gray-dark;
}
}
.table > .thead-default {
> tr > th {
color: @gray;
background-color: @gray-lighter;
color: $gray;
background-color: $gray-lighter;
}
}
.table-inverse {
color: @gray-lighter;
background-color: @gray-dark;
color: $gray-lighter;
background-color: $gray-dark;
&.table-bordered {
border: 0;
......@@ -260,7 +259,7 @@ table {
> tr {
> th,
> td {
border-color: @gray;
border-color: $gray;
}
}
}
......@@ -284,11 +283,11 @@ table {
> tr {
> th,
> td {
border-top: 1px solid @table-border-color;
border-left: 1px solid @table-border-color;
border-top: 1px solid $table-border-color;
border-left: 1px solid $table-border-color;
&:last-child {
border-right: 1px solid @table-border-color;
border-right: 1px solid $table-border-color;
}
}
}
......@@ -297,7 +296,7 @@ table {
> tr:last-child {
> th,
> td {
border-bottom: 1px solid @table-border-color;
border-bottom: 1px solid $table-border-color;
}
}
}
......@@ -309,7 +308,7 @@ table {
th,
td {
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 @@
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
z-index: $zindex-tooltip;
display: block;
visibility: visible;
// Reset font and text propertes given new insertion method
font-family: @font-family-base;
font-size: @font-size-sm;
font-family: $font-family-base;
font-size: $font-size-sm;
font-weight: normal;
line-height: 1.4;
opacity: 0;
&.in { opacity: @tooltip-opacity; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
&.in { opacity: $tooltip-opacity; }
&.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: @tooltip-max-width;
max-width: $tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
color: $tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
.border-radius(@border-radius-base);
background-color: $tooltip-bg;
@include border-radius($border-radius-base);
}
// Arrows
......@@ -47,57 +47,57 @@
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
margin-left: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
right: $tooltip-arrow-width;
margin-bottom: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
left: $tooltip-arrow-width;
margin-bottom: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
margin-left: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
right: $tooltip-arrow-width;
margin-top: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
left: $tooltip-arrow-width;
margin-top: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
}
less/_type.less → scss/_type.scss
View file @ bad40d5c
......@@ -9,23 +9,23 @@
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
small,
.small {
font-weight: normal;
line-height: 1;
color: @headings-small-color;
color: $headings-small-color;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-bottom: (@line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
small,
.small {
......@@ -35,7 +35,7 @@ h3, .h3 {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-bottom: (@line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
small,
.small {
......@@ -43,12 +43,12 @@ h6, .h6 {
}
}
h1, .h1 { font-size: @font-size-h1; }
h2, .h2 { font-size: @font-size-h2; }
h3, .h3 { font-size: @font-size-h3; }
h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
// Body text
......@@ -71,12 +71,12 @@ p {
// Ex: (12px small font / 14px base font) * 100% = about 85%
small,
.small {
font-size: floor((100% * @font-size-sm / @font-size-base));
font-size: floor((100% * $font-size-sm / $font-size-base));
}
mark,
.mark {
background-color: @state-warning-bg;
background-color: $state-warning-bg;
padding: .2em;
}
......@@ -85,8 +85,8 @@ mark,
// -------------------------
// .page-header {
// padding-bottom: ((@line-height-computed / 2) - 1);
// margin: (@line-height-computed * 2) 0 @line-height-computed;
// padding-bottom: (($line-height-computed / 2) - 1);
// margin: ($line-height-computed * 2) 0 @line-height-computed;
// border-bottom: 1px solid @page-header-border-color;
// }
......@@ -98,7 +98,7 @@ mark,
ul,
ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
ul,
ol {
margin-bottom: 0;
......@@ -115,7 +115,7 @@ ol {
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
@extend list-unstyled();
margin-left: -5px;
> li {
......@@ -128,11 +128,11 @@ ol {
// Description Lists
dl {
margin-top: 0; // Remove browser default
margin-bottom: @line-height-computed;
margin-bottom: $line-height-computed;
}
dt,
dd {
line-height: @line-height-base;
line-height: $line-height-base;
}
dt {
font-weight: bold;
......@@ -148,19 +148,19 @@ dd {
.dl-horizontal {
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 {
float: left;
width: (@dl-horizontal-offset - 20);
width: ($dl-horizontal-offset - 20);
clear: left;
text-align: right;
.text-overflow();
@include text-overflow();
}
dd {
margin-left: @dl-horizontal-offset;
margin-left: $dl-horizontal-offset;
}
}
}
......@@ -174,7 +174,7 @@ abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @abbr-border-color;
border-bottom: 1px dotted $abbr-border-color;
}
.initialism {
font-size: 90%;
......@@ -183,10 +183,10 @@ abbr[data-original-title] {
// Blockquotes
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
font-size: @blockquote-font-size;
border-left: 5px solid @blockquote-border-color;
padding: ($line-height-computed / 2) $line-height-computed;
margin: 0 0 $line-height-computed;
font-size: $blockquote-font-size;
border-left: 5px solid $blockquote-border-color;
p,
ul,
......@@ -199,8 +199,8 @@ blockquote {
footer {
display: block;
font-size: 80%; // back to default font-size
line-height: @line-height-base;
color: @blockquote-small-color;
line-height: $line-height-base;
color: $blockquote-small-color;
&:before {
content: '\2014 \00A0'; // em dash, nbsp
......@@ -212,7 +212,7 @@ blockquote {
.blockquote-reverse {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @blockquote-border-color;
border-right: 5px solid $blockquote-border-color;
border-left: 0;
text-align: right;
......@@ -227,7 +227,7 @@ blockquote {
// Addresses
address {
margin-bottom: @line-height-computed;
margin-bottom: $line-height-computed;
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 @@
}
.visible-xs-block {
.media-xs({
@include media-xs {
display: block !important;
});
}
}
.visible-xs-inline {
.media-xs({
@include media-xs {
display: inline !important;
});
}
}
.visible-xs-inline-block {
.media-xs({
@include media-xs {
display: inline-block !important;
});
}
}
.visible-sm-block {
.media-sm-max({
@include media-sm-max {
display: block !important;
});
}
}
.visible-sm-inline {
.media-sm-max({
@include media-sm-max {
display: inline !important;
});
}
}
.visible-sm-inline-block {
.media-sm-max({
@include media-sm-max {
display: inline-block !important;
});
}
}
.visible-md-block {
.media-md-max({
@include media-md-max {
display: block !important;
});
}
}
.visible-md-inline {
.media-md-max({
@include media-md-max {
display: inline !important;
});
}
}
.visible-md-inline-block {
.media-md-max({
@include media-md-max {
display: inline-block !important;
});
}
}
.visible-lg-block {
.media-lg({
@include media-lg {
display: block !important;
});
}
}
.visible-lg-inline {
.media-lg({
@include media-lg {
display: inline !important;
});
}
}
.visible-lg-inline-block {
.media-lg({
@include media-lg {
display: inline-block !important;
});
}
}
.hidden-sm {
.media-sm-max({
.responsive-invisibility();
});
@include media-sm-max {
@include responsive-invisibility('.hidden-sm');
}
.hidden-md {
.media-md-max({
.responsive-invisibility();
});
@include media-md-max {
@include responsive-invisibility('.hidden-md');
}
.hidden-lg {
.media-lg({
.responsive-invisibility();
});
@include media-lg {
@include responsive-invisibility('.hidden-lg');
}
......@@ -147,6 +143,6 @@
.hidden-print {
@media print {
.responsive-invisibility();
@include responsive-invisibility('.hidden-print');
}
}
less/_utilities.less → scss/_utilities.scss
View file @ bad40d5c
......@@ -5,10 +5,10 @@
// Floats
.clearfix {
.clearfix();
@include clearfix();
}
.center-block {
.center-block();
@include center-block();
}
.pull-right {
float: right !important;
......@@ -20,21 +20,21 @@
// Inverse
.inverse {
color: @gray-lighter;
background-color: @gray-dark;
color: $gray-lighter;
background-color: $gray-dark;
}
// Spacing
.p-a {
padding: @spacer;
padding: $spacer;
}
.p-h {
padding-left: @spacer;
padding-right: @spacer;
padding-left: $spacer;
padding-right: $spacer;
}
.p-v {
padding-top: @spacer;
padding-bottom: @spacer;
padding-top: $spacer;
padding-bottom: $spacer;
}
// Positioning
......@@ -43,7 +43,7 @@
top: 0;
left: 0;
right: 0;
z-index: @zindex-navbar-fixed;
z-index: $zindex-navbar-fixed;
}
......@@ -55,7 +55,7 @@
visibility: hidden;
}
.text-hide {
.text-hide();
@include text-hide();
}
......@@ -86,46 +86,37 @@
.text-capitalize { text-transform: capitalize; }
// Contextual colors
.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);
color: $text-muted;
}
@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
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
.bg-primary {
// Given the contrast here, this is the only class to have its color inverted
// automatically.
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 @@
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
// @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
// .box-shadow(@shadow);
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
// $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
// .box-shadow($shadow);
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > .dropdown-toggle& {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
.open > &.dropdown-toggle {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
&:active,
&.active,
.open > .dropdown-toggle& {
.open > &.dropdown-toggle {
// Remove the gradient for the pressed/active state
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],
......@@ -36,21 +36,21 @@
&.focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
background-color: $background;
border-color: $border;
}
}
.badge {
color: @background;
background-color: @color;
color: $background;
background-color: $color;
}
}
// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
.border-radius(@border-radius);
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
@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-block() {
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
......
less/mixins/clearfix.less → scss/mixins/_clearfix.scss
View file @ bad40d5c
......@@ -10,7 +10,7 @@
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
......
less/mixins/forms.less → scss/mixins/_forms.scss
View file @ bad40d5c
// 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.
.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
.help-block,
.control-label,
......@@ -15,31 +15,31 @@
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label {
color: @text-color;
color: $text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
border-color: $border-color;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
border-color: darken($border-color, 10%);
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
@include box-shadow($shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
color: $text-color;
border-color: $border-color;
background-color: $background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @text-color;
color: $text-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
......@@ -52,12 +52,12 @@
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus() {
@mixin form-control-focus() {
&:focus {
border-color: @input-border-focus;
border-color: $input-border-focus;
outline: 0;
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @input-box-shadow-focus;
.box-shadow(@shadow);
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@include box-shadow($shadow);
}
}
......@@ -66,20 +66,23 @@
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// 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& {
height: @input-height;
line-height: @input-height;
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
#{$parent} {
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&,
select[multiple]& {
textarea#{$parent},
select[multiple]#{$parent} {
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));
}
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