Commit acc08752 authored by Mark Otto's avatar Mark Otto

fix up customizer js and classes; turn buttons into real buttons

parent 432d417a
...@@ -97,6 +97,17 @@ body { ...@@ -97,6 +97,17 @@ body {
/* Customize and Download button /* Customize and Download button
-------------------------------------------------- */ -------------------------------------------------- */
.bs-customizer {
}
.bs-customizer .toggle {
float: right;
}
.bs-customizer label {
margin-top: 10px;
}
.bs-customize-download { .bs-customize-download {
text-align:center; text-align:center;
} }
......
...@@ -27,13 +27,6 @@ ...@@ -27,13 +27,6 @@
$('.bs-top').affix() $('.bs-top').affix()
}, 100) }, 100)
// add-ons
$('.add-on :checkbox').on('click', function () {
var $this = $(this)
, method = $this.attr('checked') ? 'addClass' : 'removeClass'
$(this).parents('.add-on')[method]('active')
})
// add tipsies to grid for scaffolding // add tipsies to grid for scaffolding
if ($('#grid-system').length) { if ($('#grid-system').length) {
$('#grid-system').tooltip({ $('#grid-system').tooltip({
...@@ -76,22 +69,22 @@ ...@@ -76,22 +69,22 @@
$('.bs-docs-carousel-example').carousel() $('.bs-docs-carousel-example').carousel()
// javascript build logic // javascript build logic
var inputsComponent = $("#components.download input") var inputsComponent = $("#components input")
, inputsPlugin = $("#plugins.download input") , inputsPlugin = $("#plugins input")
, inputsVariables = $("#variables.download input") , inputsVariables = $("#variables input")
// toggle all plugin checkboxes // toggle all plugin checkboxes
$('#components.download .toggle-all').on('click', function (e) { $('#components .toggle').on('click', function (e) {
e.preventDefault() e.preventDefault()
inputsComponent.attr('checked', !inputsComponent.is(':checked')) inputsComponent.prop('checked', !inputsComponent.is(':checked'))
}) })
$('#plugins.download .toggle-all').on('click', function (e) { $('#plugins .toggle').on('click', function (e) {
e.preventDefault() e.preventDefault()
inputsPlugin.attr('checked', !inputsPlugin.is(':checked')) inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
}) })
$('#variables.download .toggle-all').on('click', function (e) { $('#variables .toggle').on('click', function (e) {
e.preventDefault() e.preventDefault()
inputsVariables.val('') inputsVariables.val('')
}) })
...@@ -99,16 +92,16 @@ ...@@ -99,16 +92,16 @@
// request built javascript // request built javascript
$('.download-btn .btn').on('click', function () { $('.download-btn .btn').on('click', function () {
var css = $("#components.download input:checked") var css = $("#components input:checked")
.map(function () { return this.value }) .map(function () { return this.value })
.toArray() .toArray()
, js = $("#plugins.download input:checked") , js = $("#plugins input:checked")
.map(function () { return this.value }) .map(function () { return this.value })
.toArray() .toArray()
, vars = {} , vars = {}
, img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png'] , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
$("#variables.download input") $("#variables input")
.each(function () { .each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val()) $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
}) })
......
...@@ -7,10 +7,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -7,10 +7,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<!-- Customize <!-- Customize
================================================== --> ================================================== -->
<form> <form class="bs-customizer">
<div class="bs-docs-section" id="components"> <div class="bs-docs-section" id="components">
<div class="page-header"> <div class="page-header">
<a class="btn btn-default pull-right toggle-all" href="#">Toggle all</a> <button class="btn btn-default toggle" type="button">Toggle all</button>
<h1>LESS components</h1> <h1>LESS components</h1>
</div> </div>
<p class="lead">Choose which LESS files should be compiled into your custom stylesheets.</p> <p class="lead">Choose which LESS files should be compiled into your custom stylesheets.</p>
...@@ -273,10 +273,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -273,10 +273,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
</div> </div>
</div> </div>
<div class="bs-docs-section" id="plugins"> <div class="bs-docs-section" id="plugins">
<div class="page-header"> <div class="page-header">
<a class="btn btn-default pull-right toggle-all" href="#">Toggle all</a> <button class="btn btn-default toggle" type="button">Toggle all</button>
<h1>jQuery plugins</h1> <h1>jQuery plugins</h1>
</div> </div>
<p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files.</p> <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files.</p>
...@@ -369,11 +369,11 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -369,11 +369,11 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> <p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div> </div>
</div> </div>
<div class="bs-docs-section" id="variables"> <div class="bs-docs-section" id="variables">
<div class="page-header"> <div class="page-header">
<a class="btn btn-default pull-right toggle-all" href="#">Reset to defaults</a> <button class="btn btn-default toggle" type="button">Reset to defaults</button>
<h1>LESS variables</h1> <h1>LESS variables</h1>
</div> </div>
<p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p> <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
......
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