rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Use bootstrap.less file order in Customizer

Browse Source 
Appending stylesheets by iterating the `__less` Hash creates an order
that is not the same as 'bootstrap.less'.

Some stylesheets like 'component-animations.less' and 'modals.less' have
selectors with matching specificity, and so file order decides which
style wins. This causes issue #10030 by putting `.fade.in` after
`.modal-backdrop.in` and gives the backdrop a higher opacity than
intended.

This change uses the Less ordering in 'bootstrap.less' to generate the
final stylesheets in the Customizer to make sure customized file
ordering matches the distribution file order.

Fixes #10030
This commit is contained in:
Ross Allen 2013-09-23 23:29:45 -07:00
parent b80f58b336
commit 3663e37005
1 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs-assets/js/customizer.js
View File

@ -155,10 +155,32 @@ window.onload = function () { // wait for load in a dumb way because B-0
} }
} }
function generateCSS() { // Returns an Array of @import'd filenames from 'bootstrap.less' in the order
var $checked = $('#less-section input:checked') // in which they appear in the file.
function bootstrapLessFilenames() {
var IMPORT_REGEX = /^@import \"(.*?)\";$/
var bootstrapLessLines = __less['bootstrap.less'].split('\n')
if (!$checked.length) return false for (var i = 0, imports = []; i < bootstrapLessLines.length; i++) {
var match = IMPORT_REGEX.exec(bootstrapLessLines[i])
if (match) imports.push(match[1])
}
return imports
}
function generateCSS() {
var oneChecked = false
var lessFileIncludes = {}
$('#less-section input').each(function() {
var $this = $(this)
var checked = $this.is(':checked')
lessFileIncludes[$this.val()] = checked
oneChecked = oneChecked || checked
})
if (!oneChecked) return false
var result = {} var result = {}
var vars = {} var vars = {}
@ -169,15 +191,19 @@ window.onload = function () { // wait for load in a dumb way because B-0
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val()) $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
}) })
css += __less['variables.less'] $.each(bootstrapLessFilenames(), function(index, filename) {
if (vars) css += generateCustomCSS(vars) var fileInclude = lessFileIncludes[filename]
css += __less['mixins.less']
css += __less['normalize.less'] // Files not explicitly unchecked are compiled into the final stylesheet.
css += __less['scaffolding.less'] // Core stylesheets like 'normalize.less' are not included in the form
css += $checked // since disabling them would wreck everything, and so their 'fileInclude'
.map(function () { return __less[this.value] }) // will be 'undefined'.
.toArray() if (fileInclude || (fileInclude == null)) css += __less[filename]
.join('\n')
// Custom variables are added after Bootstrap variables so the custom
// ones take precedence.
if (('variables.less' === filename) && vars) css += generateCustomCSS(vars)
})
css = css.replace(/@import[^\n]*/gi, '') //strip any imports css = css.replace(/@import[^\n]*/gi, '') //strip any imports