diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index e47805d37b4661b739f860f76211e5c5f475983d..533d5938da066d79545d7710772ed4b3a6fc8c3f 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -134,7 +134,17 @@ body {
background-color: #b94a48;
}
-
+.swatch { padding: 0 }
+.swatch div {
+ margin-top: 35px;
+ width: 38px;
+ display: block;
+ height: 38px;
+ border: 1px solid #ccc;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
/* Docs pages and sections
-------------------------------------------------- */
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 4fa65cb9eea1ebc616be15bed020e86e0c18e537..5dc31a6dc32f88a8d483fb1b315b14f4eb9de91b 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -81,6 +81,17 @@
inputsVariables.val('')
})
+ // color preview
+ $('.color-preview input').on('input', function (e) {
+ var color = $(e.target).val().replace('#', '');
+ var $swatch = $(e.target).closest('.color-preview').find('.swatch div');
+ if (color) {
+ $swatch.css('background-color', '#' + color);
+ } else {
+ $swatch.css('background-color', $swatch.data('default-color'));
+ }
+ });
+
// request built javascript
$('.bs-customize-download .btn').on('click', function (e) {
e.preventDefault()
diff --git a/docs/customize.html b/docs/customize.html
index 19957867f2b313ff243af6dc99819ed7355c2350..edf197df38ef01a14b1686778a5bdc8b716e1c81 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -372,15 +372,6 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-basics">Basics</h2>
- <h3>Body background</h3>
- <div class="row">
- <div class="col-lg-6">
- <label>@body-bg</label>
- <input type="text" placeholder="#fff">
- <p class="help-block">Background color applied to <code><body></code>.</p>
- </div>
- </div>
-
<h3>Typography</h3>
<div class="row">
<div class="col-lg-6">
@@ -415,35 +406,111 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Colors</h3>
<div class="row">
+
+ <!--Primary Colors-->
<div class="col-lg-6">
- <p>Define custom colors used in several contexts.</p>
- <label>@brand-primary</label>
- <input type="text" placeholder="#428bca">
- <p class="help-block">Used for primary buttons, panels and more.</p>
- <label>@brand-success</label>
- <input type="text" placeholder="#5cb85c">
- <p class="help-block">Used to indicate success.</p>
- <label>@brand-warning</label>
- <input type="text" placeholder="#f0ad4e">
- <p class="help-block">Used to indicate a warning.</p>
- <label>@brand-danger</label>
- <input type="text" placeholder="#d9534f">
- <p class="help-block">Used to indicate danger.</p>
- <label>@brand-info</label>
- <input type="text" placeholder="#5bc0de">
- <p class="help-block">Used to indicate informational content.</p>
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@body-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Background color applied to <code><body></code>.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div class="swatch" data-default-color="#fff" style="background-color: #fff"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@brand-primary</label>
+ <input type="text" placeholder="#428bca">
+ <p class="help-block">Used for primary buttons, panels and more.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#428bca" style="background-color: #428bca"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@brand-success</label>
+ <input type="text" placeholder="#5cb85c">
+ <p class="help-block">Used to indicate success.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#5cb85c" style="background-color: #5cb85c"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@brand-warning</label>
+ <input type="text" placeholder="#f0ad4e">
+ <p class="help-block">Used to indicate a warning.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#f0ad4e" style="background-color: #f0ad4e"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@brand-danger</label>
+ <input type="text" placeholder="#d9534f">
+ <p class="help-block">Used to indicate danger.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#d9534f" style="background-color: #d9534f"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@brand-info</label>
+ <input type="text" placeholder="#5bc0de">
+ <p class="help-block">Used to indicate informational content.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#5bc0de" style="background-color: #5bc0de"></div>
+ </div>
+ </div>
</div>
+
+ <!--Text Colors-->
<div class="col-lg-6">
- <p>Define your preferred colors for standard text and links.</p>
- <label>@text-color</label>
- <input type="text" placeholder="@gray-dark">
- <p class="help-block">Global color set on the body.</p>
- <label>@link-color</label>
- <input type="text" placeholder="@brand-primary">
- <p class="help-block">Global link color for text.</p>
- <label>@link-color-hover</label>
- <input type="text" placeholder="darken(@link-color, 15%)">
- <p class="help-block">Automatically darken links on hover via color function.</p>
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@text-color</label>
+ <input type="text" placeholder="#333333">
+ <p class="help-block">Global color set on the body.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch" style="padding: 0">
+ <div data-default-color="#333333" style="background-color: #333333"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@link-color</label>
+ <input type="text" placeholder="#428bca">
+ <p class="help-block">Global link color for text.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#428bca" style="background-color: #428bca"></div>
+ </div>
+ </div>
+
+ <div class="row color-preview">
+ <div class="col-11 col-lg-10">
+ <label>@link-color-hover</label>
+ <input type="text" placeholder="#2a6496">
+ <p class="help-block">Automatically darken links on hover via color function.</p>
+ </div>
+ <div class="col-1 col-lg-2 swatch">
+ <div data-default-color="#2a6496" style="background-color: #2a6496"></div>
+ </div>
+ </div>
+
</div>
</div>