1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/bootstrap-source/bootstrap-3.0.3/customize.html Fri Jan 17 11:59:43 2014 +0100
1.3 @@ -0,0 +1,1715 @@
1.4 +---
1.5 +layout: default
1.6 +title: Customize and download
1.7 +slug: customize
1.8 +lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
1.9 +base_url: "../"
1.10 +---
1.11 +
1.12 +<!-- Customizer form -->
1.13 +<form class="bs-customizer" role="form">
1.14 + <div class="bs-docs-section" id="less-section">
1.15 + <div class="page-header">
1.16 + <button class="btn btn-default toggle" type="button">Toggle all</button>
1.17 + <h1 id="less">LESS files</h1>
1.18 + </div>
1.19 + <p class="lead">Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
1.20 +
1.21 + <div class="row">
1.22 + <div class="col-xs-6 col-sm-4">
1.23 + <h3>Common CSS</h3>
1.24 + <div class="checkbox">
1.25 + <label>
1.26 + <input type="checkbox" checked value="print.less">
1.27 + Print media styles
1.28 + </label>
1.29 + </div>
1.30 + <div class="checkbox">
1.31 + <label>
1.32 + <input type="checkbox" checked value="type.less">
1.33 + Typography
1.34 + </label>
1.35 + </div>
1.36 + <div class="checkbox">
1.37 + <label>
1.38 + <input type="checkbox" checked value="code.less">
1.39 + Code
1.40 + </label>
1.41 + </div>
1.42 + <div class="checkbox">
1.43 + <label>
1.44 + <input type="checkbox" checked value="grid.less">
1.45 + Grid system
1.46 + </label>
1.47 + </div>
1.48 + <div class="checkbox">
1.49 + <label>
1.50 + <input type="checkbox" checked value="tables.less">
1.51 + Tables
1.52 + </label>
1.53 + </div>
1.54 + <div class="checkbox">
1.55 + <label>
1.56 + <input type="checkbox" checked value="forms.less" data-dependents="navbar.less,input-groups.less">
1.57 + Forms
1.58 + </label>
1.59 + </div>
1.60 + <div class="checkbox">
1.61 + <label>
1.62 + <input type="checkbox" checked value="buttons.less">
1.63 + Buttons
1.64 + </label>
1.65 + </div>
1.66 + </div><!-- .col-xs-6 .col-sm-4 -->
1.67 +
1.68 + <div class="col-xs-6 col-sm-4">
1.69 + <h3>Components</h3>
1.70 + <div class="checkbox">
1.71 + <label>
1.72 + <input type="checkbox" checked value="glyphicons.less">
1.73 + Glyphicons
1.74 + </label>
1.75 + </div>
1.76 + <div class="checkbox">
1.77 + <label>
1.78 + <input type="checkbox" checked value="button-groups.less" data-dependency="buttons.less">
1.79 + Button groups
1.80 + </label>
1.81 + </div>
1.82 + <div class="checkbox">
1.83 + <label>
1.84 + <input type="checkbox" checked value="input-groups.less" data-dependency="forms.less">
1.85 + Input groups
1.86 + </label>
1.87 + </div>
1.88 + <div class="checkbox">
1.89 + <label>
1.90 + <input type="checkbox" checked value="navs.less" data-dependents="navbar.less">
1.91 + Navs
1.92 + </label>
1.93 + </div>
1.94 + <div class="checkbox">
1.95 + <label>
1.96 + <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less">
1.97 + Navbar
1.98 + </label>
1.99 + </div>
1.100 + <div class="checkbox">
1.101 + <label>
1.102 + <input type="checkbox" checked value="breadcrumbs.less">
1.103 + Breadcrumbs
1.104 + </label>
1.105 + </div>
1.106 + <div class="checkbox">
1.107 + <label>
1.108 + <input type="checkbox" checked value="pagination.less">
1.109 + Pagination
1.110 + </label>
1.111 + </div>
1.112 + <div class="checkbox">
1.113 + <label>
1.114 + <input type="checkbox" checked value="pager.less">
1.115 + Pager
1.116 + </label>
1.117 + </div>
1.118 + <div class="checkbox">
1.119 + <label>
1.120 + <input type="checkbox" checked value="labels.less">
1.121 + Labels
1.122 + </label>
1.123 + </div>
1.124 + <div class="checkbox">
1.125 + <label>
1.126 + <input type="checkbox" checked value="badges.less">
1.127 + Badges
1.128 + </label>
1.129 + </div>
1.130 + <div class="checkbox">
1.131 + <label>
1.132 + <input type="checkbox" checked value="jumbotron.less">
1.133 + Jumbotron
1.134 + </label>
1.135 + </div>
1.136 + <div class="checkbox">
1.137 + <label>
1.138 + <input type="checkbox" checked value="thumbnails.less">
1.139 + Thumbnails
1.140 + </label>
1.141 + </div>
1.142 + <div class="checkbox">
1.143 + <label>
1.144 + <input type="checkbox" checked value="alerts.less">
1.145 + Alerts
1.146 + </label>
1.147 + </div>
1.148 + <div class="checkbox">
1.149 + <label>
1.150 + <input type="checkbox" checked value="progress-bars.less">
1.151 + Progress bars
1.152 + </label>
1.153 + </div>
1.154 + <div class="checkbox">
1.155 + <label>
1.156 + <input type="checkbox" checked value="media.less">
1.157 + Media items
1.158 + </label>
1.159 + </div>
1.160 + <div class="checkbox">
1.161 + <label>
1.162 + <input type="checkbox" checked value="list-group.less">
1.163 + List groups
1.164 + </label>
1.165 + </div>
1.166 + <div class="checkbox">
1.167 + <label>
1.168 + <input type="checkbox" checked value="panels.less">
1.169 + Panels
1.170 + </label>
1.171 + </div>
1.172 + <div class="checkbox">
1.173 + <label>
1.174 + <input type="checkbox" checked value="wells.less">
1.175 + Wells
1.176 + </label>
1.177 + </div>
1.178 + <div class="checkbox">
1.179 + <label>
1.180 + <input type="checkbox" checked value="close.less">
1.181 + Close icon
1.182 + </label>
1.183 + </div>
1.184 + </div><!-- .col-xs-6 .col-sm-4 -->
1.185 +
1.186 + <div class="col-xs-6 col-sm-4">
1.187 + <h3>JavaScript components</h3>
1.188 + <div class="checkbox">
1.189 + <label>
1.190 + <input type="checkbox" checked value="dropdowns.less">
1.191 + Dropdowns
1.192 + </label>
1.193 + </div>
1.194 + <div class="checkbox">
1.195 + <label>
1.196 + <input type="checkbox" checked value="tooltip.less">
1.197 + Tooltips
1.198 + </label>
1.199 + </div>
1.200 + <div class="checkbox">
1.201 + <label>
1.202 + <input type="checkbox" checked value="popovers.less">
1.203 + Popovers
1.204 + </label>
1.205 + </div>
1.206 + <div class="checkbox">
1.207 + <label>
1.208 + <input type="checkbox" checked value="modals.less">
1.209 + Modals
1.210 + </label>
1.211 + </div>
1.212 + <div class="checkbox">
1.213 + <label>
1.214 + <input type="checkbox" checked value="carousel.less">
1.215 + Carousel
1.216 + </label>
1.217 + </div>
1.218 +
1.219 + <h3>Utilities</h3>
1.220 + <div class="checkbox">
1.221 + <label>
1.222 + <input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
1.223 + Basic utilities
1.224 + </label>
1.225 + </div>
1.226 + <div class="checkbox">
1.227 + <label>
1.228 + <input type="checkbox" checked value="responsive-utilities.less">
1.229 + Responsive utilities
1.230 + </label>
1.231 + </div>
1.232 + <div class="checkbox">
1.233 + <label>
1.234 + <input type="checkbox" checked value="component-animations.less">
1.235 + Component animations (for JS)
1.236 + </label>
1.237 + </div>
1.238 + </div><!-- .col-xs-6 .col-sm-4 -->
1.239 + </div><!-- /.row -->
1.240 + </div>
1.241 +
1.242 +
1.243 +
1.244 + <div class="bs-docs-section" id="plugin-section">
1.245 + <div class="page-header">
1.246 + <button class="btn btn-default toggle" type="button">Toggle all</button>
1.247 + <h1 id="plugins">jQuery plugins</h1>
1.248 + </div>
1.249 + <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
1.250 + <div class="row">
1.251 + <div class="col-lg-6">
1.252 + <h4>Linked to components</h4>
1.253 + <div class="checkbox">
1.254 + <label>
1.255 + <input type="checkbox" checked value="alert.js">
1.256 + Alert dismissal
1.257 + </label>
1.258 + </div>
1.259 + <div class="checkbox">
1.260 + <label>
1.261 + <input type="checkbox" checked value="button.js">
1.262 + Advanced buttons
1.263 + </label>
1.264 + </div>
1.265 + <div class="checkbox">
1.266 + <label>
1.267 + <input type="checkbox" checked value="carousel.js">
1.268 + Carousel functionality
1.269 + </label>
1.270 + </div>
1.271 + <div class="checkbox">
1.272 + <label>
1.273 + <input type="checkbox" checked value="dropdown.js">
1.274 + Dropdowns
1.275 + </label>
1.276 + </div>
1.277 + <div class="checkbox">
1.278 + <label>
1.279 + <input type="checkbox" checked value="modal.js">
1.280 + Modals
1.281 + </label>
1.282 + </div>
1.283 + <div class="checkbox">
1.284 + <label>
1.285 + <input type="checkbox" checked value="tooltip.js">
1.286 + Tooltips
1.287 + </label>
1.288 + </div>
1.289 + <div class="checkbox">
1.290 + <label>
1.291 + <input type="checkbox" checked value="popover.js" data-dependency="tooltip.js">
1.292 + Popovers <small>(requires Tooltips)</small>
1.293 + </label>
1.294 + </div>
1.295 + <div class="checkbox">
1.296 + <label>
1.297 + <input type="checkbox" checked value="tab.js">
1.298 + Togglable tabs
1.299 + </label>
1.300 + </div>
1.301 + </div>
1.302 + <div class="col-lg-6">
1.303 + <h4>Magic</h4>
1.304 + <div class="checkbox">
1.305 + <label>
1.306 + <input type="checkbox" checked value="affix.js">
1.307 + Affix
1.308 + </label>
1.309 + </div>
1.310 + <div class="checkbox">
1.311 + <label>
1.312 + <input type="checkbox" checked value="collapse.js">
1.313 + Collapse
1.314 + </label>
1.315 + </div>
1.316 + <div class="checkbox">
1.317 + <label>
1.318 + <input type="checkbox" checked value="scrollspy.js">
1.319 + Scrollspy
1.320 + </label>
1.321 + </div>
1.322 + <div class="checkbox">
1.323 + <label>
1.324 + <input type="checkbox" checked value="transition.js">
1.325 + Transitions <small>(required for any kind of animation)</small>
1.326 + </label>
1.327 + </div>
1.328 + </div>
1.329 + </div>
1.330 +
1.331 + <div class="bs-callout bs-callout-info">
1.332 + <h4>Produces two files</h4>
1.333 + <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
1.334 + </div>
1.335 +
1.336 + <div class="bs-callout bs-callout-danger">
1.337 + <h4>jQuery required</h4>
1.338 + <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
1.339 + </div>
1.340 + </div>
1.341 +
1.342 +
1.343 +
1.344 + <div class="bs-docs-section" id="less-variables-section">
1.345 + <div class="page-header">
1.346 + <button class="btn btn-default toggle" type="button">Reset to defaults</button>
1.347 + <h1 id="less-variables">LESS variables</h1>
1.348 + </div>
1.349 + <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
1.350 +
1.351 + <h2 id="variables-basics">Basics</h2>
1.352 +
1.353 +
1.354 + <h3>Color system</h3>
1.355 + <div class="row">
1.356 + <div class="col-md-6">
1.357 + <label>@brand-primary</label>
1.358 + <input type="text" class="form-control" placeholder="#428bca" data-var="@brand-primary">
1.359 + <label>@brand-success</label>
1.360 + <input type="text" class="form-control" placeholder="#5cb85c" data-var="@brand-success">
1.361 + <label>@brand-warning</label>
1.362 + <input type="text" class="form-control" placeholder="#f0ad4e" data-var="@brand-warning">
1.363 + </div>
1.364 + <div class="col-md-6">
1.365 + <label>@brand-danger</label>
1.366 + <input type="text" class="form-control" placeholder="#d9534f" data-var="@brand-danger">
1.367 + <label>@brand-info</label>
1.368 + <input type="text" class="form-control" placeholder="#5bc0de" data-var="@brand-info">
1.369 + </div>
1.370 + </div>
1.371 +
1.372 +
1.373 + <h3>Body scaffolding</h3>
1.374 + <div class="row">
1.375 + <div class="col-md-6">
1.376 + <label>@body-bg</label>
1.377 + <input type="text" class="form-control" placeholder="#fff" data-var="@body-bg">
1.378 + <p class="help-block">Background color for <code><body></code>.</p>
1.379 + <label>@text-color</label>
1.380 + <input type="text" class="form-control" placeholder="@gray-dark" data-var="@text-color">
1.381 + <p class="help-block">Global text color on <code><body></code>.</p>
1.382 + </div>
1.383 + <div class="col-md-6">
1.384 + <label>@link-color</label>
1.385 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@link-color">
1.386 + <p class="help-block">Global textual link color</p>
1.387 + <label>@link-hover-color</label>
1.388 + <input type="text" class="form-control" placeholder="darken(@link-color, 15%)" data-var="@link-hover-color">
1.389 + <p class="help-block">Link hover color set via <code>darken()</code> function</p>
1.390 + </div>
1.391 + </div>
1.392 +
1.393 +
1.394 + <h3>Typography</h3>
1.395 + <div class="row">
1.396 + <div class="col-lg-6">
1.397 + <h4>Generic font variables</h4>
1.398 + <label>@font-family-sans-serif</label>
1.399 + <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif">
1.400 + <p class="help-block">Default sans-serif fonts.</p>
1.401 + <label>@font-family-serif</label>
1.402 + <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif" data-var="@font-family-serif">
1.403 + <p class="help-block">Default serif fonts.</p>
1.404 + <label>@font-family-monospace</label>
1.405 + <input type="text" class="form-control" placeholder="Menlo, Monaco, Consolas, 'Courier New', monospace" data-var="@font-family-monospace">
1.406 + <p class="help-block">Default monospace fonts for <code><code></code> and <code><pre></code>.</p>
1.407 +
1.408 + <h4>Base type styes</h4>
1.409 + <label>@font-family-base</label>
1.410 + <input type="text" class="form-control" placeholder="@font-family-sans-serif" data-var="@font-family-base">
1.411 + <label>@font-size-base</label>
1.412 + <input type="text" class="form-control" placeholder="14px" data-var="@font-size-base">
1.413 + <label>@line-height-base</label>
1.414 + <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
1.415 + <label>@line-height-large</label>
1.416 + <input type="text" class="form-control" placeholder="1.33" data-var="@line-height-large">
1.417 + <label>@line-height-small</label>
1.418 + <input type="text" class="form-control" placeholder="1.5" data-var="@line-height-small">
1.419 + </div>
1.420 + <div class="col-lg-6">
1.421 + <h4>Heading font sizes</h4>
1.422 + <label>@font-size-h1</label>
1.423 + <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.6)" data-var="@font-size-h1">
1.424 + <label>@font-size-h2</label>
1.425 + <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.15)" data-var="@font-size-h2">
1.426 + <label>@font-size-h3</label>
1.427 + <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.7)" data-var="@font-size-h3">
1.428 + <label>@font-size-h4</label>
1.429 + <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.25)" data-var="@font-size-h4">
1.430 + <label>@font-size-h5</label>
1.431 + <input type="text" class="form-control" placeholder="@font-size-base" data-var="@font-size-h5">
1.432 + <label>@font-size-h6</label>
1.433 + <input type="text" class="form-control" placeholder="ceil(@font-size-base * 0.85)" data-var="@font-size-h6">
1.434 + </div>
1.435 + </div>
1.436 +
1.437 +
1.438 + <h3>Headings</h3>
1.439 + <div class="row">
1.440 + <div class="col-lg-6">
1.441 + <label>@headings-font-family</label>
1.442 + <input type="text" class="form-control" placeholder="@font-family-base" data-var="@headings-font-family">
1.443 + <label>@headings-font-weight</label>
1.444 + <input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
1.445 + </div>
1.446 + <div class="col-lg-6">
1.447 + <label>@headings-line-height</label>
1.448 + <input type="text" class="form-control" placeholder="1.1" data-var="@headings-line-height">
1.449 + <label>@headings-color</label>
1.450 + <input type="text" class="form-control" placeholder="inherit" data-var="@headings-color">
1.451 + </div>
1.452 + </div>
1.453 +
1.454 +
1.455 + <h3>Code blocks</h3>
1.456 + <div class="row">
1.457 + <div class="col-lg-6">
1.458 + <label>@code-color</label>
1.459 + <input type="text" class="form-control" placeholder="#c7254e" data-var="@code-color">
1.460 + <label>@code-bg</label>
1.461 + <input type="text" class="form-control" placeholder="#f9f2f4" data-var="@code-bg">
1.462 + </div>
1.463 + <div class="col-lg-6">
1.464 + <label>@pre-color</label>
1.465 + <input type="text" class="form-control" placeholder="@gray-dark" data-var="@pre-color">
1.466 + <label>@pre-bg</label>
1.467 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@pre-bg">
1.468 + <label>@pre-border-color</label>
1.469 + <input type="text" class="form-control" placeholder="#ccc" data-var="@pre-border-color">
1.470 + </div>
1.471 + </div>
1.472 +
1.473 +
1.474 + <h3>Media queries breakpoints</h3>
1.475 + <div class="row">
1.476 + <div class="col-xs-6 col-md-3">
1.477 + <label>@screen-xs-min</label>
1.478 + <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
1.479 + </div>
1.480 + <div class="col-xs-6 col-md-3">
1.481 + <label>@screen-sm-min</label>
1.482 + <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
1.483 + </div>
1.484 + <div class="col-xs-6 col-md-3">
1.485 + <label>@screen-md-min</label>
1.486 + <input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
1.487 + </div>
1.488 + <div class="col-xs-6 col-md-3">
1.489 + <label>@screen-lg-min</label>
1.490 + <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
1.491 + </div>
1.492 + </div>
1.493 +
1.494 + <h3>Layout and grid system</h3>
1.495 + <div class="row">
1.496 + <div class="col-xs-6 col-sm-4">
1.497 + <label>@container-sm</label>
1.498 + <input type="text" class="form-control" placeholder="((720px + @grid-gutter-width))" data-var="@container-sm">
1.499 + <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
1.500 + </div>
1.501 + <div class="col-xs-6 col-sm-4">
1.502 + <label>@container-md</label>
1.503 + <input type="text" class="form-control" placeholder="((940px + @grid-gutter-width))" data-var="@container-md">
1.504 + <p class="help-block">For <code>@screen-md-min</code> and up.</p>
1.505 + </div>
1.506 + <div class="clearfix visible-xs"></div>
1.507 + <div class="col-xs-6 col-sm-4">
1.508 + <label>@container-lg</label>
1.509 + <input type="text" class="form-control" placeholder="((1140px + @grid-gutter-width))" data-var="@container-lg">
1.510 + <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
1.511 + </div>
1.512 + </div>
1.513 +
1.514 + <div class="row">
1.515 + <div class="col-xs-6 col-sm-4">
1.516 + <label>@grid-columns</label>
1.517 + <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
1.518 + <p class="help-block">Number of columns in the grid.</p>
1.519 + </div>
1.520 + <div class="col-xs-6 col-sm-4">
1.521 + <label>@grid-gutter-width</label>
1.522 + <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
1.523 + <p class="help-block">Padding between columns.</p>
1.524 + </div>
1.525 + <div class="clearfix visible-xs"></div>
1.526 + <div class="col-xs-6 col-sm-4">
1.527 + <label>@grid-float-breakpoint</label>
1.528 + <input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
1.529 + <p class="help-block">Point at which the navbar stops collapsing.</p>
1.530 + </div>
1.531 + </div>
1.532 +
1.533 +
1.534 + <h3>Components</h3>
1.535 +
1.536 + <h4>Padding</h4>
1.537 + <div class="row">
1.538 + <div class="col-md-4">
1.539 + <label>@padding-base-vertical</label>
1.540 + <input type="text" class="form-control" placeholder="6px" data-var="@padding-base-vertical">
1.541 + <label>@padding-base-horizontal</label>
1.542 + <input type="text" class="form-control" placeholder="12px" data-var="@padding-base-horizontal">
1.543 + </div>
1.544 + <div class="col-md-4">
1.545 + <label>@padding-large-vertical</label>
1.546 + <input type="text" class="form-control" placeholder="10px" data-var="@padding-large-vertical">
1.547 + <label>@padding-large-horizontal</label>
1.548 + <input type="text" class="form-control" placeholder="16px" data-var="@padding-large-horizontal">
1.549 + </div>
1.550 + <div class="col-md-4">
1.551 + <label>@padding-small-vertical</label>
1.552 + <input type="text" class="form-control" placeholder="5px" data-var="@padding-small-vertical">
1.553 + <label>@padding-small-horizontal</label>
1.554 + <input type="text" class="form-control" placeholder="10px" data-var="@padding-small-horizontal">
1.555 + </div>
1.556 + </div>
1.557 +
1.558 + <h4>Rounded corners</h4>
1.559 + <div class="row">
1.560 + <div class="col-md-4">
1.561 + <label>@border-radius-base</label>
1.562 + <input type="text" class="form-control" placeholder="4px" data-var="@border-radius-base">
1.563 + </div>
1.564 + <div class="col-md-4">
1.565 + <label>@border-radius-large</label>
1.566 + <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
1.567 + </div>
1.568 + <div class="col-md-4">
1.569 + <label>@border-radius-small</label>
1.570 + <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
1.571 + </div>
1.572 + </div>
1.573 +
1.574 + <h4>Component active state</h4>
1.575 + <div class="row">
1.576 + <div class="col-md-6">
1.577 + <label>@component-active-color</label>
1.578 + <input type="text" class="form-control" placeholder="#fff" data-var="@component-active-color">
1.579 + <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
1.580 + </div>
1.581 + <div class="col-md-6">
1.582 + <label>@component-active-bg</label>
1.583 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
1.584 + <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
1.585 + </div>
1.586 + </div>
1.587 +
1.588 + <h4>Carets</h4>
1.589 + <div class="row">
1.590 + <div class="col-md-6">
1.591 + <label>@caret-width-base</label>
1.592 + <input type="text" class="form-control" placeholder="4px" data-var="@caret-width-base">
1.593 + </div>
1.594 + <div class="col-md-6">
1.595 + <label>@caret-width-large</label>
1.596 + <input type="text" class="form-control" placeholder="5px" data-var="@caret-width-large">
1.597 + </div>
1.598 + </div>
1.599 +
1.600 +
1.601 + <h2 id="variables-buttons">Buttons</h2>
1.602 + <div class="row">
1.603 + <div class="col-md-6">
1.604 + <label>@btn-font-weight</label>
1.605 + <input type="text" class="form-control" placeholder="normal" data-var="@btn-font-weight">
1.606 + </div>
1.607 + <div class="col-md-6">
1.608 + <label>@btn-link-disabled-color</label>
1.609 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@btn-link-disabled-color">
1.610 + </div>
1.611 + </div>
1.612 + <div class="row">
1.613 + <div class="col-md-6">
1.614 + <h4>Default</h4>
1.615 + <label>@btn-default-color</label>
1.616 + <input type="text" class="form-control" placeholder="#333" data-var="@btn-default-color">
1.617 + <label>@btn-default-bg</label>
1.618 + <input type="text" class="form-control" placeholder="#fff" data-var="@btn-default-bg">
1.619 + <label>@btn-default-border</label>
1.620 + <input type="text" class="form-control" placeholder="#ccc" data-var="@btn-default-border">
1.621 + <h4>Primary</h4>
1.622 + <label>@btn-primary-color</label>
1.623 + <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-primary-color">
1.624 + <label>@btn-primary-bg</label>
1.625 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@btn-primary-bg">
1.626 + <label>@btn-primary-border</label>
1.627 + <input type="text" class="form-control" placeholder="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border">
1.628 + <h4>Info</h4>
1.629 + <label>@btn-info-color</label>
1.630 + <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-info-color">
1.631 + <label>@btn-info-bg</label>
1.632 + <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
1.633 + <label>@btn-info-border</label>
1.634 + <input type="text" class="form-control" placeholder="darken(@btn-info-bg, 5%)" data-var="@btn-info-border">
1.635 + </div>
1.636 + <div class="col-md-6">
1.637 + <h4>Success</h4>
1.638 + <label>@btn-success-color</label>
1.639 + <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-success-color">
1.640 + <label>@btn-success-bg</label>
1.641 + <input type="text" class="form-control" placeholder="@brand-success" data-var="@btn-success-bg">
1.642 + <label>@btn-success-border</label>
1.643 + <input type="text" class="form-control" placeholder="darken(@btn-success-bg, 5%);" data-var="@btn-success-border">
1.644 + <h4>Warning</h4>
1.645 + <label>@btn-warning-color</label>
1.646 + <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-warning-color">
1.647 + <label>@btn-warning-bg</label>
1.648 + <input type="text" class="form-control" placeholder="@brand-warning" data-var="@btn-warning-bg">
1.649 + <label>@btn-warning-border</label>
1.650 + <input type="text" class="form-control" placeholder=" darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border">
1.651 + <h4>Danger</h4>
1.652 + <label>@btn-danger-color</label>
1.653 + <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-danger-color">
1.654 + <label>@btn-danger-bg</label>
1.655 + <input type="text" class="form-control" placeholder="@brand-danger" data-var="@btn-danger-bg">
1.656 + <label>@btn-danger-border</label>
1.657 + <input type="text" class="form-control" placeholder="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border">
1.658 + </div>
1.659 + </div>
1.660 +
1.661 +
1.662 + <h2 id="variables-form-states">Form states and alerts</h2>
1.663 + <div class="row">
1.664 + <div class="col-md-6">
1.665 + <h4>Success</h4>
1.666 + <label>@state-success-text</label>
1.667 + <input type="text" class="form-control" placeholder="#468847" data-var="@state-success-text">
1.668 + <label>@state-success-bg</label>
1.669 + <input type="text" class="form-control" placeholder="#dff0d8" data-var="@state-success-bg">
1.670 + <label>@state-success-border</label>
1.671 + <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border">
1.672 + <h4>Warning</h4>
1.673 + <label>@state-warning-text</label>
1.674 + <input type="text" class="form-control" placeholder="#c09853" data-var="@state-warning-text">
1.675 + <label>@state-warning-bg</label>
1.676 + <input type="text" class="form-control" placeholder="#fcf8e3" data-var="@state-warning-bg">
1.677 + <label>@state-warning-border</label>
1.678 + <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)" data-var="@state-warning-border">
1.679 + </div>
1.680 + <div class="col-md-6">
1.681 + <h4>Danger</h4>
1.682 + <label>@state-danger-text</label>
1.683 + <input type="text" class="form-control" placeholder="#b94a48" data-var="@state-danger-text">
1.684 + <label>@state-danger-bg</label>
1.685 + <input type="text" class="form-control" placeholder="#f2dede" data-var="@state-danger-bg">
1.686 + <label>@state-danger-border</label>
1.687 + <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)" data-var="@state-danger-border">
1.688 + <h4>Info</h4>
1.689 + <label>@state-info-text</label>
1.690 + <input type="text" class="form-control" placeholder="#3a87ad" data-var="@state-info-text">
1.691 + <label>@state-info-bg</label>
1.692 + <input type="text" class="form-control" placeholder="#d9edf7" data-var="@state-info-bg">
1.693 + <label>@state-info-border</label>
1.694 + <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border">
1.695 + </div>
1.696 + </div>
1.697 +
1.698 +
1.699 + <h2 id="variables-alerts">Alerts</h2>
1.700 +
1.701 + <h4>Base styles</h4>
1.702 + <div class="row">
1.703 + <div class="col-md-4">
1.704 + <label>@alert-padding</label>
1.705 + <input type="text" class="form-control" placeholder="15px" data-var="@alert-padding">
1.706 + </div>
1.707 + <div class="col-md-4">
1.708 + <label>@alert-border-radius</label>
1.709 + <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@alert-border-radius">
1.710 + </div>
1.711 + <div class="col-md-4">
1.712 + <label>@alert-link-font-weight</label>
1.713 + <input type="text" class="form-control" placeholder="bold" data-var="@alert-link-font-weight">
1.714 + </div>
1.715 + </div>
1.716 +
1.717 + <div class="row">
1.718 + <div class="col-lg-6">
1.719 + <h4>Warning</h4>
1.720 + <label>@alert-warning-text</label>
1.721 + <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@alert-warning-text">
1.722 + <label>@alert-warning-bg</label>
1.723 + <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@alert-warning-bg">
1.724 + <label>@alert-warning-border</label>
1.725 + <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@alert-warning-border">
1.726 +
1.727 + <h4>Success</h4>
1.728 + <label>@alert-success-text</label>
1.729 + <input type="text" class="form-control" placeholder="@state-success-text" data-var="@alert-success-text">
1.730 + <label>@alert-success-bg</label>
1.731 + <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@alert-success-bg">
1.732 + <label>@alert-success-border</label>
1.733 + <input type="text" class="form-control" placeholder="@state-success-border" data-var="@alert-success-border">
1.734 + </div>
1.735 + <div class="col-lg-6">
1.736 + <h4>Danger</h4>
1.737 + <label>@alert-danger-text</label>
1.738 + <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@alert-danger-text">
1.739 + <label>@alert-danger-bg</label>
1.740 + <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@alert-danger-bg">
1.741 + <label>@alert-danger-border</label>
1.742 + <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@alert-danger-border">
1.743 +
1.744 + <h4>Info</h4>
1.745 + <label>@alert-info-text</label>
1.746 + <input type="text" class="form-control" placeholder="@state-info-text" data-var="@alert-info-text">
1.747 + <label>@alert-info-bg</label>
1.748 + <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@alert-info-bg">
1.749 + <label>@alert-info-border</label>
1.750 + <input type="text" class="form-control" placeholder="@state-info-border" data-var="@alert-info-border">
1.751 + </div>
1.752 + </div>
1.753 +
1.754 +
1.755 + <h2 id="variables-navbar">Navbar</h2>
1.756 +
1.757 + <h3>Base styles</h3>
1.758 + <div class="row">
1.759 + <div class="col-md-4">
1.760 + <label>@navbar-height</label>
1.761 + <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
1.762 + <label>@navbar-margin-bottom</label>
1.763 + <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
1.764 + </div>
1.765 + <div class="col-md-4">
1.766 + <label>@navbar-padding-horizontal</label>
1.767 + <input type="text" class="form-control" placeholder="floor(@grid-gutter-width / 2)" data-var="@navbar-padding-horizontal">
1.768 + <label>@navbar-padding-vertical</label>
1.769 + <input type="text" class="form-control" placeholder="((@navbar-height - @line-height-computed) / 2)" data-var="@@navbar-padding-vertical">
1.770 + </div>
1.771 + <div class="col-md-4">
1.772 + <label>@navbar-border-radius</label>
1.773 + <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
1.774 + </div>
1.775 + </div>
1.776 +
1.777 + <div class="row">
1.778 + <div class="col-lg-6">
1.779 + <h3>Default navbar</h3>
1.780 + <h4>Basics</h4>
1.781 + <label>@navbar-default-color</label>
1.782 + <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-color">
1.783 + <label>@navbar-default-bg</label>
1.784 + <input type="text" class="form-control" placeholder="#f8f8f8" data-var="@navbar-default-bg">
1.785 + <label>@navbar-default-border</label>
1.786 + <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border">
1.787 +
1.788 + <h4>Links</h4>
1.789 + <label>@navbar-default-link-color</label>
1.790 + <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-link-color">
1.791 + <label>@navbar-default-link-hover-color</label>
1.792 + <input type="text" class="form-control" placeholder="#333" data-var="@navbar-default-link-hover-color">
1.793 + <label>@navbar-default-link-hover-bg</label>
1.794 + <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-hover-bg">
1.795 + <label>@navbar-default-link-active-color</label>
1.796 + <input type="text" class="form-control" placeholder="#555" data-var="@navbar-default-link-active-color">
1.797 + <label>@navbar-default-link-active-bg</label>
1.798 + <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg">
1.799 + <label>@navbar-default-link-disabled-color</label>
1.800 + <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-link-disabled-color">
1.801 + <label>@navbar-default-link-disabled-bg</label>
1.802 + <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-disabled-bg">
1.803 +
1.804 + <h4>Brand</h4>
1.805 + <label>@navbar-default-brand-color</label>
1.806 + <input type="text" class="form-control" placeholder="@navbar-default-link-color" data-var="@navbar-default-brand-color">
1.807 + <label>@navbar-default-brand-hover-color</label>
1.808 + <input type="text" class="form-control" placeholder="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color">
1.809 + <label>@navbar-default-brand-hover-bg</label>
1.810 + <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-brand-hover-bg">
1.811 +
1.812 + <h4>Toggle</h4>
1.813 + <label>@navbar-default-toggle-hover-bg</label>
1.814 + <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-hover-bg">
1.815 + <label>@navbar-default-toggle-icon-bar-bg</label>
1.816 + <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-toggle-icon-bar-bg">
1.817 + <label>@navbar-default-toggle-border-color</label>
1.818 + <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-border-color">
1.819 + </div>
1.820 +
1.821 + <div class="col-lg-6">
1.822 + <h3>Inverted navbar</h3>
1.823 +
1.824 + <h4>Basics</h4>
1.825 + <label>@navbar-inverse-color</label>
1.826 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-color">
1.827 + <label>@navbar-inverse-bg</label>
1.828 + <input type="text" class="form-control" placeholder="#222" data-var="@navbar-inverse-bg">
1.829 + <label>@navbar-inverse-border</label>
1.830 + <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border">
1.831 +
1.832 + <h4>Links</h4>
1.833 + <label>@navbar-inverse-link-color</label>
1.834 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-link-color">
1.835 + <label>@navbar-inverse-link-hover-color</label>
1.836 + <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-link-hover-color">
1.837 + <label>@navbar-inverse-link-hover-bg</label>
1.838 + <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-hover-bg">
1.839 + <label>@navbar-inverse-link-active-color</label>
1.840 + <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color">
1.841 + <label>@navbar-inverse-link-active-bg</label>
1.842 + <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg">
1.843 + <label>@navbar-inverse-link-disabled-color</label>
1.844 + <input type="text" class="form-control" placeholder="#444" data-var="@navbar-inverse-link-disabled-color">
1.845 + <label>@navbar-inverse-link-disabled-bg</label>
1.846 + <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-disabled-bg">
1.847 +
1.848 + <h4>Brand</h4>
1.849 + <label>@navbar-inverse-brand-color</label>
1.850 + <input type="text" class="form-control" placeholder="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color">
1.851 + <label>@navbar-inverse-brand-hover-color</label>
1.852 + <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-brand-hover-color">
1.853 + <label>@navbar-inverse-brand-hover-bg</label>
1.854 + <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-brand-hover-bg">
1.855 +
1.856 + <h4>Toggle</h4>
1.857 + <label>@navbar-inverse-toggle-hover-bg</label>
1.858 + <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-hover-bg">
1.859 + <label>@navbar-inverse-toggle-icon-bar-bg</label>
1.860 + <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg">
1.861 + <label>@navbar-inverse-toggle-border-color</label>
1.862 + <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-border-color">
1.863 + </div>
1.864 + </div>
1.865 +
1.866 +
1.867 + <h2 id="variables-nav">Nav</h2>
1.868 +
1.869 + <h3>Default nav</h3>
1.870 + <div class="row">
1.871 + <div class="col-lg-6">
1.872 + <h4>Common values</h4>
1.873 + <label>@nav-link-padding</label>
1.874 + <input type="text" class="form-control" placeholder="10px 15px" data-var="@nav-link-padding">
1.875 + <label>@nav-link-hover-bg</label>
1.876 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-link-hover-bg">
1.877 + <label>@nav-disabled-link-color</label>
1.878 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-color">
1.879 + <label>@nav-disabled-link-hover-color</label>
1.880 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-hover-color">
1.881 + <label>@nav-open-link-hover-color</label>
1.882 + <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-link-hover-color">
1.883 + <label>@nav-open-caret-border-color</label>
1.884 + <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-caret-border-color">
1.885 +
1.886 + <h4>Pills</h4>
1.887 + <label>@nav-pills-active-link-hover-color</label>
1.888 + <input type="text" class="form-control" placeholder="@fff" data-var="@nav-pills-active-link-hover-color">
1.889 + <label>@nav-pills-active-link-hover-bg</label>
1.890 + <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@nav-pills-active-link-hover-bg">
1.891 + </div>
1.892 + <div class="col-lg-6">
1.893 + <h4>Tabs</h4>
1.894 + <label>@nav-tabs-border-color</label>
1.895 + <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-border-color">
1.896 + <label>@nav-tabs-link-hover-border-color</label>
1.897 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-tabs-link-hover-border-color">
1.898 + <label>@nav-tabs-active-link-hover-color</label>
1.899 + <input type="text" class="form-control" placeholder="@gray" data-var="@nav-tabs-active-link-hover-color">
1.900 + <label>@nav-tabs-active-link-hover-bg</label>
1.901 + <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-active-link-hover-bg">
1.902 + <label>@nav-tabs-active-link-hover-border-color</label>
1.903 + <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-active-link-hover-border-color">
1.904 + <label>@nav-tabs-justified-link-border-color</label>
1.905 + <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-justified-link-border-color">
1.906 + <label>@nav-tabs-justified-active-link-border-color</label>
1.907 + <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-justified-active-link-border-color">
1.908 + </div>
1.909 + </div>
1.910 +
1.911 +
1.912 + <h2 id="variables-tables">Tables</h2>
1.913 + <div class="row">
1.914 + <div class="col-md-4">
1.915 + <label>@table-cell-padding</label>
1.916 + <input type="text" class="form-control" placeholder="8px" data-var="@table-cell-padding">
1.917 + <p class="help-block">Default padding for <code><th></code>s and <code><td></code>s</p>
1.918 + <label>@table-condensed-cell-padding</label>
1.919 + <input type="text" class="form-control" placeholder="5px" data-var="@table-condensed-cell-padding">
1.920 + <p class="help-block">Default padding cells in <code>.table-condensed</code></p>
1.921 + </div>
1.922 + <div class="col-md-4">
1.923 + <label>@table-bg</label>
1.924 + <input type="text" class="form-control" placeholder="transparent" data-var="@table-bg">
1.925 + <p class="help-block">Default background color used for all tables.</p>
1.926 + <label>@table-bg-accent</label>
1.927 + <input type="text" class="form-control" placeholder="#f9f9f9" data-var="@table-bg-accent">
1.928 + <p class="help-block">Background color used for <code>.table-striped</code>.</p>
1.929 + </div>
1.930 + <div class="col-md-4">
1.931 + <label>@table-bg-hover</label>
1.932 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@table-bg-hover">
1.933 + <p class="help-block">Background color used for <code>.table-hover</code>.</p>
1.934 + <label>@table-border-color</label>
1.935 + <input type="text" class="form-control" placeholder="#ddd" data-var="@table-border-color">
1.936 + <p class="help-block">Border color for table and cell borders.</p>
1.937 + </div>
1.938 + </div>
1.939 +
1.940 +
1.941 + <h2 id="variables-forms">Forms</h2>
1.942 +
1.943 + <h3>Inputs</h3>
1.944 + <div class="row">
1.945 + <div class="col-md-4">
1.946 + <label>@input-color</label>
1.947 + <input type="text" class="form-control" placeholder="@gray" data-var="@input-color">
1.948 + <p class="help-block">Text color for <code><input></code>s</p>
1.949 + <label>@input-bg</label>
1.950 + <input type="text" class="form-control" placeholder="#fff" data-var="@input-bg">
1.951 + <p class="help-block"><code><input></code> background color</p>
1.952 + </div>
1.953 + <div class="col-md-4">
1.954 + <label>@input-border</label>
1.955 + <input type="text" class="form-control" placeholder="#ccc" data-var="@input-border">
1.956 + <p class="help-block"><code><input></code> border color</p>
1.957 + <label>@input-border-radius</label>
1.958 + <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@input-border-radius">
1.959 + <p class="help-block"><code><input></code> border radius</p>
1.960 + </div>
1.961 + <div class="col-md-4">
1.962 + <label>@input-color-placeholder</label>
1.963 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@input-color-placeholder">
1.964 + <p class="help-block">Placeholder text color</p>
1.965 + </div>
1.966 + </div>
1.967 +
1.968 + <h3>Input states</h3>
1.969 + <div class="row">
1.970 + <div class="col-md-4">
1.971 + <label>@input-border-focus</label>
1.972 + <input type="text" class="form-control" placeholder="#66afe9" data-var="@input-border-focus">
1.973 + <p class="help-block">Border color for inputs on focus</p>
1.974 + </div>
1.975 + <div class="col-md-4">
1.976 + <label>@input-bg-disabled</label>
1.977 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-bg-disabled">
1.978 + <p class="help-block"><code><input disabled></code> background color</p>
1.979 + </div>
1.980 + </div>
1.981 +
1.982 + <h3>Input sizes</h3>
1.983 + <div class="row">
1.984 + <div class="col-md-4">
1.985 + <label>@input-height-base</label>
1.986 + <input type="text" class="form-control" placeholder="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base">
1.987 + <p class="help-block">Default <code>.form-control</code> height</p>
1.988 + </div>
1.989 + <div class="col-md-4">
1.990 + <label>@input-height-large</label>
1.991 + <input type="text" class="form-control" placeholder="(floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large">
1.992 + <p class="help-block">Large <code>.form-control</code> height</p>
1.993 + </div>
1.994 + <div class="col-md-4">
1.995 + <label>@input-height-small</label>
1.996 + <input type="text" class="form-control" placeholder="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small">
1.997 + <p class="help-block">Small <code>.form-control</code> height</p>
1.998 + </div>
1.999 + </div>
1.1000 +
1.1001 + <h3>Legend</h3>
1.1002 + <div class="row">
1.1003 + <div class="col-md-4">
1.1004 + <label>@legend-color</label>
1.1005 + <input type="text" class="form-control" placeholder="@gray-dark" data-var="@legend-color">
1.1006 + </div>
1.1007 + <div class="col-md-4">
1.1008 + <label>@legend-border-color</label>
1.1009 + <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@legend-border-color">
1.1010 + </div>
1.1011 + </div>
1.1012 +
1.1013 + <h3>Input groups</h3>
1.1014 + <div class="row">
1.1015 + <div class="col-md-4">
1.1016 + <label>@input-group-addon-bg</label>
1.1017 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-group-addon-bg">
1.1018 + <p class="help-block">Background color for textual input addons</p>
1.1019 + </div>
1.1020 + <div class="col-md-4">
1.1021 + <label>@input-group-addon-border-color</label>
1.1022 + <input type="text" class="form-control" placeholder="@input-border" data-var="@input-group-addon-border-color">
1.1023 + <p class="help-block">Border color for textual input addons</p>
1.1024 + </div>
1.1025 + </div>
1.1026 +
1.1027 +
1.1028 + <h2 id="variables-dropdowns">Dropdowns</h2>
1.1029 + <div class="row">
1.1030 + <div class="col-md-6">
1.1031 + <h3>Dropdown menu</h3>
1.1032 + <label>@dropdown-bg</label>
1.1033 + <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-bg">
1.1034 + <p class="help-block">Dropdown menu background color</p>
1.1035 + <label>@dropdown-border</label>
1.1036 + <input type="text" class="form-control" placeholder="rgba(0,0,0,.15)" data-var="@dropdown-border">
1.1037 + <p class="help-block">Dropdown menu border color</p>
1.1038 + <label>@dropdown-fallback-border</label>
1.1039 + <input type="text" class="form-control" placeholder="#ccc" data-var="@dropdown-fallback-border">
1.1040 + <p class="help-block">Dropdown menu border color <strong>for IE8</strong></p>
1.1041 + <label>@dropdown-caret-color</label>
1.1042 + <input type="text" class="form-control" placeholder="@dropdown-caret-color" data-var="@dropdown-caret-color">
1.1043 + <p class="help-block">Indicator arrow for showing an element has a dropdown</p>
1.1044 + <label>@dropdown-divider-bg</label>
1.1045 + <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@dropdown-divider-bg">
1.1046 + <p class="help-block">Dropdown divider top border color</p>
1.1047 + <label>@dropdown-header-color</label>
1.1048 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-header-color">
1.1049 + <p class="help-block">Text color for headers within dropdown menus</p>
1.1050 + </div>
1.1051 + <div class="col-md-6">
1.1052 + <h3>Dropdown items</h3>
1.1053 + <label>@dropdown-link-color</label>
1.1054 + <input type="text" class="form-control" placeholder="@gray-dark" data-var="@dropdown-link-color">
1.1055 + <p class="help-block">Dropdown text color</p>
1.1056 +
1.1057 + <label>@dropdown-link-hover-color</label>
1.1058 + <input type="text" class="form-control" placeholder="darken(@dropdown-link-color, 5%)" data-var="@dropdown-link-hover-color">
1.1059 + <p class="help-block">Hovered dropdown menu entry text color</p>
1.1060 + <label>@dropdown-link-hover-bg</label>
1.1061 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@dropdown-link-hover-bg">
1.1062 + <p class="help-block">Hovered dropdown menu entry text color</p>
1.1063 +
1.1064 + <label>@dropdown-link-active-color</label>
1.1065 + <input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
1.1066 + <p class="help-block">Active dropdown menu entry text color</p>
1.1067 + <label>@dropdown-link-active-bg</label>
1.1068 + <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">
1.1069 + <p class="help-block">Active dropdown menu entry background color</p>
1.1070 +
1.1071 + <label>@dropdown-link-disabled-color</label>
1.1072 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-link-disabled-color">
1.1073 + <p class="help-block">Disabled dropdown menu entry background color</p>
1.1074 + </div>
1.1075 + </div>
1.1076 +
1.1077 +
1.1078 + <h2 id="variables-panels-wells">Panels and wells</h2>
1.1079 +
1.1080 + <h3>Common panel styles</h3>
1.1081 + <div class="row">
1.1082 + <div class="col-md-6">
1.1083 + <label>@panel-bg</label>
1.1084 + <input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
1.1085 + <label>@panel-inner-border</label>
1.1086 + <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-inner-border">
1.1087 + <p class="help-block">Border color for elements within panels</p>
1.1088 + </div>
1.1089 + <div class="col-md-6">
1.1090 + <label>@panel-border-radius</label>
1.1091 + <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius">
1.1092 + <label>@panel-footer-bg</label>
1.1093 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
1.1094 + </div>
1.1095 + </div>
1.1096 + <h3>Contextual panel colors</h3>
1.1097 + <div class="row">
1.1098 + <div class="col-md-6">
1.1099 + <h4>Default</h4>
1.1100 + <label>@panel-default-text</label>
1.1101 + <input type="text" class="form-control" placeholder="@gray-dark" data-var="@panel-default-text">
1.1102 + <label>@panel-default-border</label>
1.1103 + <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-default-border">
1.1104 + <label>@panel-default-heading-bg</label>
1.1105 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-default-heading-bg">
1.1106 +
1.1107 + <h4>Primary</h4>
1.1108 + <label>@panel-primary-text</label>
1.1109 + <input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text">
1.1110 + <label>@panel-primary-border</label>
1.1111 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border">
1.1112 + <label>@panel-primary-heading-bg</label>
1.1113 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg">
1.1114 +
1.1115 + <h4>Success</h4>
1.1116 + <label>@panel-success-text</label>
1.1117 + <input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text">
1.1118 + <label>@panel-success-border</label>
1.1119 + <input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border">
1.1120 + <label>@panel-success-heading-bg</label>
1.1121 + <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg">
1.1122 + </div>
1.1123 + <div class="col-md-6">
1.1124 + <h4>Info</h4>
1.1125 + <label>@panel-info-text</label>
1.1126 + <input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text">
1.1127 + <label>@panel-info-border</label>
1.1128 + <input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border">
1.1129 + <label>@panel-info-heading-bg</label>
1.1130 + <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg">
1.1131 +
1.1132 + <h4>Warning</h4>
1.1133 + <label>@panel-warning-text</label>
1.1134 + <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text">
1.1135 + <label>@panel-warning-border</label>
1.1136 + <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border">
1.1137 + <label>@panel-warning-heading-bg</label>
1.1138 + <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg">
1.1139 +
1.1140 + <h4>Danger</h4>
1.1141 + <label>@panel-danger-text</label>
1.1142 + <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text">
1.1143 + <label>@panel-danger-border</label>
1.1144 + <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border">
1.1145 + <label>@panel-danger-heading-bg</label>
1.1146 + <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg">
1.1147 + </div>
1.1148 + </div>
1.1149 +
1.1150 + <h3>Wells</h3>
1.1151 + <label>@well-bg</label>
1.1152 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
1.1153 +
1.1154 +
1.1155 + <h2 id="variables-accordion">Accordion</h2>
1.1156 + <label>@accordion-border-bg</label>
1.1157 + <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@accordion-border-bg">
1.1158 +
1.1159 +
1.1160 + <h2 id="variables-badges">Badges</h2>
1.1161 +
1.1162 + <h3>Base styles</h3>
1.1163 + <div class="row">
1.1164 + <div class="col-md-4">
1.1165 + <label>@badge-font-weight</label>
1.1166 + <input type="text" class="form-control" placeholder="bold" data-var="@badge-font-weight">
1.1167 + <label>@badge-color</label>
1.1168 + <input type="text" class="form-control" placeholder="#fff" data-var="@badge-color">
1.1169 + </div>
1.1170 + <div class="col-md-4">
1.1171 + <label>@badge-bg</label>
1.1172 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@badge-bg">
1.1173 + </div>
1.1174 + <div class="col-md-4">
1.1175 + <label>@badge-border-radius</label>
1.1176 + <input type="text" class="form-control" placeholder="10px" data-var="@badge-border-radius">
1.1177 + </div>
1.1178 + </div>
1.1179 +
1.1180 + <h3>States</h3>
1.1181 + <div class="row">
1.1182 + <div class="col-md-4">
1.1183 + <label>@badge-link-hover-color</label>
1.1184 + <input type="text" class="form-control" placeholder="#fff" data-var="@badge-link-hover-color">
1.1185 + <p class="help-block">Linked badge text color on hover</p>
1.1186 + </div>
1.1187 + <div class="col-md-4">
1.1188 + <label>@badge-active-color</label>
1.1189 + <input type="text" class="form-control" placeholder="@link-color" data-var="@badge-active-color">
1.1190 + <p class="help-block">Badge text color in active nav link</p>
1.1191 + </div>
1.1192 + <div class="col-md-4">
1.1193 + <label>@badge-active-bg</label>
1.1194 + <input type="text" class="form-control" placeholder="@badge-color" data-var="@badge-active-bg">
1.1195 + <p class="help-block">Badge background color in active nav link</p>
1.1196 + </div>
1.1197 + </div>
1.1198 +
1.1199 +
1.1200 + <h2 id="variables-breadcrumbs">Breadcrumbs</h2>
1.1201 + <div class="row">
1.1202 + <div class="col-md-6">
1.1203 + <label>@breadcrumb-color</label>
1.1204 + <input type="text" class="form-control" placeholder="#ccc" data-var="@breadcrumb-color">
1.1205 + <p class="help-block">Breadcrumb text color</p>
1.1206 + <label>@breadcrumb-bg</label>
1.1207 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@breadcrumb-bg">
1.1208 + <p class="help-block">Breadcrumb background color</p>
1.1209 + </div>
1.1210 + <div class="col-md-6">
1.1211 + <label>@breadcrumb-active-color</label>
1.1212 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@breadcrumb-active-color">
1.1213 + <p class="help-block">Text color of current page in the breadcrumb</p>
1.1214 + <label>@breadcrumb-separator</label>
1.1215 + <input type="text" class="form-control" placeholder='"/"' data-var="@breadcrumb-separator">
1.1216 + <p class="help-block">Textual separator for between breadcrumb elements</p>
1.1217 + </div>
1.1218 + </div>
1.1219 +
1.1220 + <h2 id="variables-jumbotron">Jumbotron</h2>
1.1221 + <div class="row">
1.1222 + <div class="col-md-6">
1.1223 + <label>@jumbotron-padding</label>
1.1224 + <input type="text" class="form-control" placeholder="30px" data-var="@jumbotron-padding">
1.1225 + <label>@jumbotron-bg</label>
1.1226 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@jumbotron-bg">
1.1227 + <label>@jumbotron-font-size</label>
1.1228 + <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.5)" data-var="@jumbotron-font-size">
1.1229 + </div>
1.1230 + <div class="col-md-6">
1.1231 + <label>@jumbotron-color</label>
1.1232 + <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-color">
1.1233 + <label>@jumbotron-heading-color</label>
1.1234 + <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-heading-color">
1.1235 + </div>
1.1236 + </div>
1.1237 +
1.1238 +
1.1239 + <h2 id="variables-modals">Modals</h2>
1.1240 +
1.1241 + <h3>Base modal</h3>
1.1242 + <div class="row">
1.1243 + <div class="col-md-4">
1.1244 + <label>@modal-inner-padding</label>
1.1245 + <input type="text" class="form-control" placeholder="20px" data-var="@modal-inner-padding">
1.1246 + <p class="help-block">Padding applied to the modal body</p>
1.1247 + </div>
1.1248 + <div class="col-md-4">
1.1249 + <label>@modal-backdrop-bg</label>
1.1250 + <input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
1.1251 + <p class="help-block">Modal backdrop background color</p>
1.1252 + </div>
1.1253 + </div>
1.1254 +
1.1255 + <h3>Modal header and footer</h3>
1.1256 + <div class="row">
1.1257 + <div class="col-md-4">
1.1258 + <label>@modal-title-padding</label>
1.1259 + <input type="text" class="form-control" placeholder="15px" data-var="@modal-title-padding">
1.1260 + <p class="help-block">Padding applied to the modal title</p>
1.1261 + </div>
1.1262 + <div class="col-md-4">
1.1263 + <label>@modal-title-line-height</label>
1.1264 + <input type="text" class="form-control" placeholder="@line-height-base" data-var="@modal-title-line-height">
1.1265 + <p class="help-block">Modal title line-height</p>
1.1266 + </div>
1.1267 + <div class="col-md-4">
1.1268 + <label>@modal-header-border-color</label>
1.1269 + <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@modal-header-border-color">
1.1270 + <p class="help-block">Modal header border color</p>
1.1271 + <label>@modal-footer-border-color</label>
1.1272 + <input type="text" class="form-control" placeholder="@modal-header-border-color" data-var="@modal-footer-border-color">
1.1273 + <p class="help-block">Modal footer border color</p>
1.1274 + </div>
1.1275 + </div>
1.1276 +
1.1277 + <h3>Modal content</h3>
1.1278 + <div class="row">
1.1279 + <div class="col-md-4">
1.1280 + <label>@modal-content-bg</label>
1.1281 + <input type="text" class="form-control" placeholder="#fff" data-var="@modal-content-bg">
1.1282 + <p class="help-block">Background color of modal content area</p>
1.1283 + </div>
1.1284 + <div class="col-md-4">
1.1285 + <label>@modal-content-border-color</label>
1.1286 + <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@modal-content-border-color">
1.1287 + <p class="help-block">Modal content border color</p>
1.1288 + </div>
1.1289 + <div class="col-md-4">
1.1290 + <label>@modal-content-fallback-border-color</label>
1.1291 + <input type="text" class="form-control" placeholder="#999" data-var="@modal-content-fallback-border-color">
1.1292 + <p class="help-block">Modal content border color <strong>for IE8</strong></p>
1.1293 + </div>
1.1294 + </div>
1.1295 +
1.1296 +
1.1297 + <h2 id="variables-carousel">Carousel</h2>
1.1298 + <div class="row">
1.1299 + <div class="col-md-4">
1.1300 + <label>@carousel-text-shadow</label>
1.1301 + <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow">
1.1302 + </div>
1.1303 + <div class="col-md-4">
1.1304 + <label>@carousel-control-color</label>
1.1305 + <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-control-color">
1.1306 + </div>
1.1307 + <div class="col-md-4">
1.1308 + <label>@carousel-caption-color</label>
1.1309 + <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-caption-color">
1.1310 + </div>
1.1311 + </div>
1.1312 + <div class="row">
1.1313 + <div class="col-md-4">
1.1314 + <label>@carousel-indicator-border-color</label>
1.1315 + <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-border-color">
1.1316 + </div>
1.1317 + <div class="col-md-4">
1.1318 + <label>@carousel-indicator-active-bg</label>
1.1319 + <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-active-bg">
1.1320 + </div>
1.1321 + </div>
1.1322 +
1.1323 +
1.1324 + <h2 id="variables-list-group">List group</h2>
1.1325 +
1.1326 + <h3>Base styles</h3>
1.1327 + <div class="row">
1.1328 + <div class="col-md-4">
1.1329 + <label>@list-group-bg</label>
1.1330 + <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-bg">
1.1331 + <p class="help-block">Background color on <code>.list-group-item</code></p>
1.1332 + </div>
1.1333 + <div class="col-md-4">
1.1334 + <label>@list-group-border</label>
1.1335 + <input type="text" class="form-control" placeholder="#ddd" data-var="@list-group-border">
1.1336 + <p class="help-block"><code>.list-group-item</code> border color</p>
1.1337 + </div>
1.1338 + <div class="col-md-4">
1.1339 + <label>@list-group-border-radius</label>
1.1340 + <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@list-group-border-radius">
1.1341 + <p class="help-block">List group border radius</p>
1.1342 + </div>
1.1343 + </div>
1.1344 +
1.1345 + <h3>Hover and active states</h3>
1.1346 + <div class="row">
1.1347 + <div class="col-md-6">
1.1348 + <label>@list-group-hover-bg</label>
1.1349 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@list-group-hover-bg">
1.1350 + <p class="help-block">Background color of single list elements on hover</p>
1.1351 + </div>
1.1352 + </div>
1.1353 + <div class="row">
1.1354 + <div class="col-md-4">
1.1355 + <label>@list-group-active-color</label>
1.1356 + <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-active-color">
1.1357 + <p class="help-block">Text color of active list elements</p>
1.1358 + </div>
1.1359 + <div class="col-md-4">
1.1360 + <label>@list-group-active-bg</label>
1.1361 + <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@list-group-active-bg">
1.1362 + <p class="help-block">Background color of active list elements</p>
1.1363 + </div>
1.1364 + <div class="col-md-4">
1.1365 + <label>@list-group-active-border</label>
1.1366 + <input type="text" class="form-control" placeholder="@list-group-active-bg" data-var="@list-group-active-border">
1.1367 + <p class="help-block">Border color of active list elements</p>
1.1368 + </div>
1.1369 + </div>
1.1370 +
1.1371 +
1.1372 + <h2 id="variables-thumbnails">Thumbnails</h2>
1.1373 +
1.1374 + <h3>Base thumbnail</h3>
1.1375 + <div class="row">
1.1376 + <div class="col-md-6">
1.1377 + <label>@thumbnail-padding</label>
1.1378 + <input type="text" class="form-control" placeholder="4px" data-var="@thumbnail-padding">
1.1379 + <p class="help-block">Padding around the thumbnail image</p>
1.1380 + <label>@thumbnail-bg</label>
1.1381 + <input type="text" class="form-control" placeholder="@body-bg" data-var="@thumbnail-bg">
1.1382 + <p class="help-block">Thumbnail background color</p>
1.1383 + </div>
1.1384 + <div class="col-md-6">
1.1385 + <label>@thumbnail-border</label>
1.1386 + <input type="text" class="form-control" placeholder="#ddd" data-var="@thumbnail-border">
1.1387 + <p class="help-block">Thumbnail border color</p>
1.1388 + <label>@thumbnail-border-radius</label>
1.1389 + <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@thumbnail-border-radius">
1.1390 + <p class="help-block">Thumbnail border radius</p>
1.1391 + </div>
1.1392 + </div>
1.1393 +
1.1394 + <h3>Thumbnail captions</h3>
1.1395 + <div class="row">
1.1396 + <div class="col-md-6">
1.1397 + <label>@thumbnail-caption-padding</label>
1.1398 + <input type="text" class="form-control" placeholder="9px" data-var="@thumbnail-caption-padding">
1.1399 + <p class="help-block">Padding around the thumbnail caption</p>
1.1400 + </div>
1.1401 + <div class="col-md-6">
1.1402 + <label>@thumbnail-caption-color</label>
1.1403 + <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-color">
1.1404 + <p class="help-block">Custom text color for thumbnail captions</p>
1.1405 + </div>
1.1406 + </div>
1.1407 +
1.1408 +
1.1409 + <h2 id="variables-progress">Progress bars</h2>
1.1410 +
1.1411 + <h3>Shared styles</h3>
1.1412 + <div class="row">
1.1413 + <div class="col-md-4">
1.1414 + <label>@progress-bg</label>
1.1415 + <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@progress-bg">
1.1416 + <p class="help-block">Background color of the whole progress component</p>
1.1417 + </div>
1.1418 + <div class="col-md-4">
1.1419 + <label>@progress-bar-color</label>
1.1420 + <input type="text" class="form-control" placeholder="#fff" data-var="@progress-bar-color">
1.1421 + <p class="help-block">Info progress bar text color</p>
1.1422 + </div>
1.1423 + <div class="col-md-4">
1.1424 + <label>@progress-bar-text-shadow</label>
1.1425 + <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)" data-var="@progress-bar-text-shadow">
1.1426 + <p class="help-block">Info progress bar text shadow</p>
1.1427 + </div>
1.1428 + <div class="col-md-4">
1.1429 + <label>@progress-bar-bg</label>
1.1430 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@progress-bar-bg">
1.1431 + <p class="help-block">Default progress bar color</p>
1.1432 + </div>
1.1433 + </div>
1.1434 +
1.1435 + <h3>Contextual states</h3>
1.1436 + <div class="row">
1.1437 + <div class="col-md-4">
1.1438 + <label>@progress-bar-success-bg</label>
1.1439 + <input type="text" class="form-control" placeholder="@brand-success" data-var="@progress-bar-success-bg">
1.1440 + <p class="help-block">Success progress bar color</p>
1.1441 + <label>@progress-bar-info-bg</label>
1.1442 + <input type="text" class="form-control" placeholder="@brand-info" data-var="@progress-bar-info-bg">
1.1443 + <p class="help-block">Info progress bar color</p>
1.1444 + </div>
1.1445 + <div class="col-md-4">
1.1446 + <label>@progress-bar-warning-bg</label>
1.1447 + <input type="text" class="form-control" placeholder="@brand-warning" data-var="@progress-bar-warning-bg">
1.1448 + <p class="help-block">Warning progress bar color</p>
1.1449 + <label>@progress-bar-danger-bg</label>
1.1450 + <input type="text" class="form-control" placeholder="@brand-danger" data-var="@progress-bar-danger-bg">
1.1451 + <p class="help-block">Danger progress bar color</p>
1.1452 + </div>
1.1453 + </div>
1.1454 +
1.1455 +
1.1456 + <h2 id="variables-pagination">Pagination</h2>
1.1457 +
1.1458 + <h3>Default styles</h3>
1.1459 + <div class="row">
1.1460 + <div class="col-md-4">
1.1461 + <label>@pagination-bg</label>
1.1462 + <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-bg">
1.1463 + <p class="help-block">Background color</p>
1.1464 + </div>
1.1465 + <div class="col-md-4">
1.1466 + <label>@pagination-border</label>
1.1467 + <input type="text" class="form-control" placeholder="#ddd" data-var="@pagination-border">
1.1468 + <p class="help-block">Border color</p>
1.1469 + </div>
1.1470 + <div class="col-md-4">
1.1471 + <label>@pagination-hover-bg</label>
1.1472 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@pagination-hover-bg">
1.1473 + <p class="help-block">Background hover color</p>
1.1474 + </div>
1.1475 + </div>
1.1476 +
1.1477 + <h3>Disabled and active states</h3>
1.1478 + <div class="row">
1.1479 + <div class="col-md-4">
1.1480 + <label>@pagination-disabled-color</label>
1.1481 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@pagination-disabled-color">
1.1482 + <p class="help-block">Disabled text color</p>
1.1483 + </div>
1.1484 + <div class="col-md-4">
1.1485 + <label>@pagination-active-bg</label>
1.1486 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@pagination-active-bg">
1.1487 + <p class="help-block">Active background color</p>
1.1488 + </div>
1.1489 + <div class="col-md-4">
1.1490 + <label>@pagination-active-color</label>
1.1491 + <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-active-color">
1.1492 + <p class="help-block">Active text color</p>
1.1493 + </div>
1.1494 + </div>
1.1495 +
1.1496 +
1.1497 + <h2 id="variables-pager">Pager</h2>
1.1498 + <div class="row">
1.1499 + <div class="col-md-4">
1.1500 + <label>@pager-border-radius</label>
1.1501 + <input type="text" class="form-control" placeholder="15px" data-var="@pager-border-radius">
1.1502 + <p class="help-block">Pager border radius</p>
1.1503 + </div>
1.1504 + <div class="col-md-4">
1.1505 + <label>@pager-disabled-color</label>
1.1506 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@pager-disabled-color">
1.1507 + <p class="help-block">Pager disabled state color</p>
1.1508 + </div>
1.1509 + </div>
1.1510 +
1.1511 +
1.1512 + <h2 id="variables-labels">Labels</h2>
1.1513 + <div class="row">
1.1514 + <div class="col-md-4">
1.1515 + <label>@label-color</label>
1.1516 + <input type="text" class="form-control" placeholder="#fff" data-var="@label-color">
1.1517 + <p class="help-block">Default label text color</p>
1.1518 + </div>
1.1519 + <div class="col-md-4">
1.1520 + <label>@label-link-hover-color</label>
1.1521 + <input type="text" class="form-control" placeholder="#fff" data-var="@label-link-hover-color">
1.1522 + <p class="help-block">Default text color of a linked label</p>
1.1523 + </div>
1.1524 + <div class="col-md-4">
1.1525 + <label>@label-default-bg</label>
1.1526 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@label-default-bg">
1.1527 + <p class="help-block">Default label background color</p>
1.1528 + </div>
1.1529 + </div>
1.1530 +
1.1531 + <div class="row">
1.1532 + <div class="col-md-4">
1.1533 + <label>@label-primary-bg</label>
1.1534 + <input type="text" class="form-control" placeholder="@brand-primary" data-var="@label-primary-bg">
1.1535 + <p class="help-block">Primary label background color</p>
1.1536 + <label>@label-success-bg</label>
1.1537 + <input type="text" class="form-control" placeholder="@brand-success" data-var="@label-success-bg">
1.1538 + <p class="help-block">Success label background color</p>
1.1539 + </div>
1.1540 + <div class="col-md-4">
1.1541 + <label>@label-info-bg</label>
1.1542 + <input type="text" class="form-control" placeholder="@brand-info" data-var="@label-info-bg">
1.1543 + <p class="help-block">Info label background color</p>
1.1544 + <label>@label-warning-bg</label>
1.1545 + <input type="text" class="form-control" placeholder="@brand-warning" data-var="@label-warning-bg">
1.1546 + <p class="help-block">Warning label background color</p>
1.1547 + </div>
1.1548 + <div class="col-md-4">
1.1549 + <label>@label-danger-bg</label>
1.1550 + <input type="text" class="form-control" placeholder="@brand-danger" data-var="@label-danger-bg">
1.1551 + <p class="help-block">Danger label background color</p>
1.1552 + </div>
1.1553 + </div>
1.1554 +
1.1555 +
1.1556 + <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
1.1557 +
1.1558 + <h3>Tooltip</h3>
1.1559 + <div class="row">
1.1560 + <div class="col-md-4">
1.1561 + <label>@tooltip-color</label>
1.1562 + <input type="text" class="form-control" placeholder="#fff" data-var="@tooltip-color">
1.1563 + <p class="help-block">Tooltip text color</p>
1.1564 + <label>@tooltip-bg</label>
1.1565 + <input type="text" class="form-control" placeholder="#000" data-var="@tooltip-bg">
1.1566 + <p class="help-block">Tooltip background color</p>
1.1567 + </div>
1.1568 + <div class="col-md-4">
1.1569 + <label>@tooltip-arrow-width</label>
1.1570 + <input type="text" class="form-control" placeholder="5px" data-var="@tooltip-arrow-width">
1.1571 + <p class="help-block">Tooltip arrow width</p>
1.1572 + <label>@tooltip-arrow-color</label>
1.1573 + <input type="text" class="form-control" placeholder="@tooltip-bg" data-var="@tooltip-arrow-color">
1.1574 + <p class="help-block">Tooltip arrow color</p>
1.1575 + </div>
1.1576 + <div class="col-md-4">
1.1577 + <label>@tooltip-max-width</label>
1.1578 + <input type="text" class="form-control" placeholder="200px" data-var="@tooltip-max-width">
1.1579 + <p class="help-block">Tooltip max width</p>
1.1580 + </div>
1.1581 + </div>
1.1582 +
1.1583 + <h3>Popovers</h3>
1.1584 +
1.1585 + <h3>Base styles</h3>
1.1586 + <div class="row">
1.1587 + <div class="col-md-4">
1.1588 + <label>@popover-bg</label>
1.1589 + <input type="text" class="form-control" placeholder="#fff" data-var="@popover-bg">
1.1590 + <p class="help-block">Popover body background color</p>
1.1591 + <label>@popover-max-width</label>
1.1592 + <input type="text" class="form-control" placeholder="276px" data-var="@popover-max-width">
1.1593 + <p class="help-block">Popover maximum width</p>
1.1594 + </div>
1.1595 + <div class="col-md-4">
1.1596 + <label>@popover-border-color</label>
1.1597 + <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@popover-border-color">
1.1598 + <p class="help-block">Popover border color</p>
1.1599 + <label>@popover-fallback-border-color</label>
1.1600 + <input type="text" class="form-control" placeholder="#ccc" data-var="@popover-fallback-border-color">
1.1601 + <p class="help-block">Popover fallback border color</p>
1.1602 + </div>
1.1603 + <div class="col-md-4">
1.1604 + <label>@popover-title-bg</label>
1.1605 + <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)" data-var="@popover-title-bg">
1.1606 + <p class="help-block">Popover title background color</p>
1.1607 + </div>
1.1608 + </div>
1.1609 +
1.1610 + <h3>Popover arrows</h3>
1.1611 + <div class="row">
1.1612 + <div class="col-md-4">
1.1613 + <label>@popover-arrow-width</label>
1.1614 + <input type="text" class="form-control" placeholder="10px" data-var="@popover-arrow-width">
1.1615 + <p class="help-block">Popover arrow width</p>
1.1616 + </div>
1.1617 + <div class="col-md-4">
1.1618 + <label>@popover-arrow-color</label>
1.1619 + <input type="text" class="form-control" placeholder="#fff" data-var="@popover-arrow-color">
1.1620 + <p class="help-block">Popover arrow color</p>
1.1621 + </div>
1.1622 + </div>
1.1623 + <div class="row">
1.1624 + <div class="col-md-4">
1.1625 + <label>@popover-arrow-outer-width</label>
1.1626 + <input type="text" class="form-control" placeholder="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width">
1.1627 + <p class="help-block">Popover outer arrow width</p>
1.1628 + </div>
1.1629 + <div class="col-md-4">
1.1630 + <label>@popover-arrow-outer-color</label>
1.1631 + <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)" data-var="@popover-arrow-outer-color">
1.1632 + <p class="help-block">Popover outer arrow color</p>
1.1633 + </div>
1.1634 + <div class="col-md-4">
1.1635 + <label>@popover-arrow-outer-fallback-color</label>
1.1636 + <input type="text" class="form-control" placeholder="#999" data-var="@popover-arrow-outer-fallback-color">
1.1637 + <p class="help-block">Popover outer arrow fallback color</p>
1.1638 + </div>
1.1639 + </div>
1.1640 +
1.1641 +
1.1642 + <h2 id="variables-close">Close button</h2>
1.1643 + <div class="row">
1.1644 + <div class="col-md-4">
1.1645 + <label>@close-font-weight</label>
1.1646 + <input type="text" class="form-control" placeholder="bold" data-var="@close-font-weight">
1.1647 + </div>
1.1648 + <div class="col-md-4">
1.1649 + <label>@close-color</label>
1.1650 + <input type="text" class="form-control" placeholder="#000" data-var="@close-color">
1.1651 + </div>
1.1652 + <div class="col-md-4">
1.1653 + <label>@close-text-shadow</label>
1.1654 + <input type="text" class="form-control" placeholder="0 1px 0 #fff" data-var="@close-text-shadow">
1.1655 + </div>
1.1656 + </div>
1.1657 +
1.1658 +
1.1659 + <h2 id="variables-type">Type</h2>
1.1660 + <div class="row">
1.1661 + <div class="col-md-6">
1.1662 + <label>@text-muted</label>
1.1663 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@text-muted">
1.1664 + <p class="help-block">Text muted color</p>
1.1665 + </div>
1.1666 + <div class="col-md-6">
1.1667 + <label>@abbr-border-color</label>
1.1668 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@abbr-border-color">
1.1669 + <p class="help-block">Abbreviations and acronyms border color</p>
1.1670 + </div>
1.1671 + <div class="col-md-6">
1.1672 + <label>@headings-small-color</label>
1.1673 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@headings-small-color">
1.1674 + <p class="help-block">Headings small color</p>
1.1675 + </div>
1.1676 + <div class="col-md-6">
1.1677 + <label>@blockquote-small-color</label>
1.1678 + <input type="text" class="form-control" placeholder="@gray-light" data-var="@blockquote-small-color">
1.1679 + <p class="help-block">Blockquote small color</p>
1.1680 + </div>
1.1681 + <div class="col-md-6">
1.1682 + <label>@blockquote-border-color</label>
1.1683 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@blockquote-border-color">
1.1684 + <p class="help-block">Blockquote border color</p>
1.1685 + </div>
1.1686 + <div class="col-md-6">
1.1687 + <label>@page-header-border-color</label>
1.1688 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@page-header-border-color">
1.1689 + <p class="help-block">Page header border color</p>
1.1690 + </div>
1.1691 + </div>
1.1692 +
1.1693 +
1.1694 + <h2 id="variables-other">Other</h2>
1.1695 + <div class="row">
1.1696 + <div class="col-md-6">
1.1697 + <label>@hr-border</label>
1.1698 + <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@hr-border">
1.1699 + <p class="help-block">Horizontal line color</p>
1.1700 + </div>
1.1701 + <div class="col-md-6">
1.1702 + <label>@component-offset-horizontal</label>
1.1703 + <input type="text" class="form-control" placeholder="180px" data-var="@component-offset-horizontal">
1.1704 + <p class="help-block">Horizontal offset for forms and lists</p>
1.1705 + </div>
1.1706 + </div>
1.1707 + </div>
1.1708 +
1.1709 + <div class="bs-docs-section">
1.1710 + <div class="page-header">
1.1711 + <h1 id="download">Download</h1>
1.1712 + </div>
1.1713 + <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
1.1714 + <div class="bs-customize-download">
1.1715 + <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
1.1716 + </div>
1.1717 + </div><!-- /download -->
1.1718 +</form>