Commit bad40d5c authored by Mark Otto's avatar Mark Otto
Browse files

Merge pull request #1 from twbs/scss

Move to Sass
parents 6bd84210 bafd0b05
Showing with 5397 additions and 4200 deletions
+5397 -4200
......@@ -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']);
......
This diff is collapsed.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
This diff is collapsed.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File moved
......@@ -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;
}
This diff is collapsed.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
// 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";
// 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";
// 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%);
}
}
// Contextual backgrounds
.bg-variant(@color) {
background-color: @color;
a&:hover {
background-color: darken(@color, 10%);
}
}
// 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;
}
// 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);
}
}
// 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);
}
/// 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));
}
// 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;
}
}
}
}
Supports Markdown
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