1.1 --- a/bootstrap-source/bootstrap-3.0.3/customize.html Sat Jan 18 12:34:36 2014 +0100
1.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
1.3 @@ -1,1715 +0,0 @@
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>