POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/customizer-variables.html

   1
   2 <!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
   3 <h2 id="colors">Colors</h2>
   4 <p>Gray and brand colors for use across Bootstrap.</p>
   5 <div class="row">
   6   <div class="col-xs-4">
   7     <label for="input-@gray-base">@gray-base</label>
   8     <input id="input-@gray-base" type="text" value="#000" data-var="@gray-base" class="form-control"/>
   9   </div>
  10   <div class="col-xs-4">
  11     <label for="input-@gray-darker">@gray-darker</label>
  12     <input id="input-@gray-darker" type="text" value="lighten(@gray-base, 13.5%)" data-var="@gray-darker" class="form-control"/>
  13   </div>
  14   <div class="col-xs-4">
  15     <label for="input-@gray-dark">@gray-dark</label>
  16     <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control"/>
  17   </div>
  18   <div class="clearfix"></div>
  19   <div class="col-xs-4">
  20     <label for="input-@gray">@gray</label>
  21     <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control"/>
  22   </div>
  23   <div class="col-xs-4">
  24     <label for="input-@gray-light">@gray-light</label>
  25     <input id="input-@gray-light" type="text" value="lighten(@gray-base, 46.7%)" data-var="@gray-light" class="form-control"/>
  26   </div>
  27   <div class="col-xs-4">
  28     <label for="input-@gray-lighter">@gray-lighter</label>
  29     <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control"/>
  30   </div>
  31   <div class="clearfix"></div>
  32   <div class="col-xs-4">
  33     <label for="input-@brand-primary">@brand-primary</label>
  34     <input id="input-@brand-primary" type="text" value="darken(#428bca, 6.5%)" data-var="@brand-primary" class="form-control"/>
  35   </div>
  36   <div class="col-xs-4">
  37     <label for="input-@brand-success">@brand-success</label>
  38     <input id="input-@brand-success" type="text" value="#5cb85c" data-var="@brand-success" class="form-control"/>
  39   </div>
  40   <div class="col-xs-4">
  41     <label for="input-@brand-info">@brand-info</label>
  42     <input id="input-@brand-info" type="text" value="#5bc0de" data-var="@brand-info" class="form-control"/>
  43   </div>
  44   <div class="clearfix"></div>
  45   <div class="col-xs-4">
  46     <label for="input-@brand-warning">@brand-warning</label>
  47     <input id="input-@brand-warning" type="text" value="#f0ad4e" data-var="@brand-warning" class="form-control"/>
  48   </div>
  49   <div class="col-xs-4">
  50     <label for="input-@brand-danger">@brand-danger</label>
  51     <input id="input-@brand-danger" type="text" value="#d9534f" data-var="@brand-danger" class="form-control"/>
  52   </div>
  53 </div>
  54 <h2 id="scaffolding">Scaffolding</h2>
  55 <p>Settings for some of the most global styles.</p>
  56 <div class="row">
  57   <div class="col-xs-4">
  58     <label for="input-@body-bg">@body-bg</label>
  59     <input id="input-@body-bg" type="text" aria-describedby="help-block-@body-bg" value="#fff" data-var="@body-bg" class="form-control"/>
  60     <p id="help-block-@body-bg" class="help-block">Background color for <code>&lt;body&gt;</code>.</p>
  61   </div>
  62   <div class="col-xs-4">
  63     <label for="input-@text-color">@text-color</label>
  64     <input id="input-@text-color" type="text" aria-describedby="help-block-@text-color" value="@gray-dark" data-var="@text-color" class="form-control"/>
  65     <p id="help-block-@text-color" class="help-block">Global text color on <code>&lt;body&gt;</code>.</p>
  66   </div>
  67   <div class="col-xs-4">
  68     <label for="input-@link-color">@link-color</label>
  69     <input id="input-@link-color" type="text" aria-describedby="help-block-@link-color" value="@brand-primary" data-var="@link-color" class="form-control"/>
  70     <p id="help-block-@link-color" class="help-block">Global textual link color.</p>
  71   </div>
  72   <div class="clearfix"></div>
  73   <div class="col-xs-4">
  74     <label for="input-@link-hover-color">@link-hover-color</label>
  75     <input id="input-@link-hover-color" type="text" aria-describedby="help-block-@link-hover-color" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/>
  76     <p id="help-block-@link-hover-color" class="help-block">Link hover color set via <code>darken()</code> function.</p>
  77   </div>
  78   <div class="col-xs-4">
  79     <label for="input-@link-hover-decoration">@link-hover-decoration</label>
  80     <input id="input-@link-hover-decoration" type="text" aria-describedby="help-block-@link-hover-decoration" value="underline" data-var="@link-hover-decoration" class="form-control"/>
  81     <p id="help-block-@link-hover-decoration" class="help-block">Link hover decoration.</p>
  82   </div>
  83 </div>
  84 <h2 id="typography">Typography</h2>
  85 <p>Font, line-height, and color for body text, headings, and more.</p>
  86 <div class="row">
  87   <div class="col-xs-4">
  88     <label for="input-@font-family-sans-serif">@font-family-sans-serif</label>
  89     <input id="input-@font-family-sans-serif" type="text" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif" class="form-control"/>
  90   </div>
  91   <div class="col-xs-4">
  92     <label for="input-@font-family-serif">@font-family-serif</label>
  93     <input id="input-@font-family-serif" type="text" value="Georgia, &quot;Times New Roman&quot;, Times, serif" data-var="@font-family-serif" class="form-control"/>
  94   </div>
  95   <div class="col-xs-4">
  96     <label for="input-@font-family-monospace">@font-family-monospace</label>
  97     <input id="input-@font-family-monospace" type="text" aria-describedby="help-block-@font-family-monospace" value="Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace" data-var="@font-family-monospace" class="form-control"/>
  98     <p id="help-block-@font-family-monospace" class="help-block">Default monospace fonts for <code>&lt;code&gt;</code>, <code>&lt;kbd&gt;</code>, and <code>&lt;pre&gt;</code>.</p>
  99   </div>
 100   <div class="clearfix"></div>
 101   <div class="col-xs-4">
 102     <label for="input-@font-family-base">@font-family-base</label>
 103     <input id="input-@font-family-base" type="text" value="@font-family-sans-serif" data-var="@font-family-base" class="form-control"/>
 104   </div>
 105   <div class="col-xs-4">
 106     <label for="input-@font-size-base">@font-size-base</label>
 107     <input id="input-@font-size-base" type="text" value="14px" data-var="@font-size-base" class="form-control"/>
 108   </div>
 109   <div class="col-xs-4">
 110     <label for="input-@font-size-large">@font-size-large</label>
 111     <input id="input-@font-size-large" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-large" class="form-control"/>
 112   </div>
 113   <div class="clearfix"></div>
 114   <div class="col-xs-4">
 115     <label for="input-@font-size-small">@font-size-small</label>
 116     <input id="input-@font-size-small" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-small" class="form-control"/>
 117   </div>
 118   <div class="col-xs-4">
 119     <label for="input-@font-size-h1">@font-size-h1</label>
 120     <input id="input-@font-size-h1" type="text" value="floor((@font-size-base * 2.6))" data-var="@font-size-h1" class="form-control"/>
 121   </div>
 122   <div class="col-xs-4">
 123     <label for="input-@font-size-h2">@font-size-h2</label>
 124     <input id="input-@font-size-h2" type="text" value="floor((@font-size-base * 2.15))" data-var="@font-size-h2" class="form-control"/>
 125   </div>
 126   <div class="clearfix"></div>
 127   <div class="col-xs-4">
 128     <label for="input-@font-size-h3">@font-size-h3</label>
 129     <input id="input-@font-size-h3" type="text" value="ceil((@font-size-base * 1.7))" data-var="@font-size-h3" class="form-control"/>
 130   </div>
 131   <div class="col-xs-4">
 132     <label for="input-@font-size-h4">@font-size-h4</label>
 133     <input id="input-@font-size-h4" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-h4" class="form-control"/>
 134   </div>
 135   <div class="col-xs-4">
 136     <label for="input-@font-size-h5">@font-size-h5</label>
 137     <input id="input-@font-size-h5" type="text" value="@font-size-base" data-var="@font-size-h5" class="form-control"/>
 138   </div>
 139   <div class="clearfix"></div>
 140   <div class="col-xs-4">
 141     <label for="input-@font-size-h6">@font-size-h6</label>
 142     <input id="input-@font-size-h6" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-h6" class="form-control"/>
 143   </div>
 144   <div class="col-xs-4">
 145     <label for="input-@line-height-base">@line-height-base</label>
 146     <input id="input-@line-height-base" type="text" aria-describedby="help-block-@line-height-base" value="1.428571429" data-var="@line-height-base" class="form-control"/>
 147     <p id="help-block-@line-height-base" class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p>
 148   </div>
 149   <div class="col-xs-4">
 150     <label for="input-@line-height-computed">@line-height-computed</label>
 151     <input id="input-@line-height-computed" type="text" aria-describedby="help-block-@line-height-computed" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/>
 152     <p id="help-block-@line-height-computed" class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
 153   </div>
 154   <div class="clearfix"></div>
 155   <div class="col-xs-4">
 156     <label for="input-@headings-font-family">@headings-font-family</label>
 157     <input id="input-@headings-font-family" type="text" aria-describedby="help-block-@headings-font-family" value="inherit" data-var="@headings-font-family" class="form-control"/>
 158     <p id="help-block-@headings-font-family" class="help-block">By default, this inherits from the <code>&lt;body&gt;</code>.</p>
 159   </div>
 160   <div class="col-xs-4">
 161     <label for="input-@headings-font-weight">@headings-font-weight</label>
 162     <input id="input-@headings-font-weight" type="text" value="500" data-var="@headings-font-weight" class="form-control"/>
 163   </div>
 164   <div class="col-xs-4">
 165     <label for="input-@headings-line-height">@headings-line-height</label>
 166     <input id="input-@headings-line-height" type="text" value="1.1" data-var="@headings-line-height" class="form-control"/>
 167   </div>
 168   <div class="clearfix"></div>
 169   <div class="col-xs-4">
 170     <label for="input-@headings-color">@headings-color</label>
 171     <input id="input-@headings-color" type="text" value="inherit" data-var="@headings-color" class="form-control"/>
 172   </div>
 173 </div>
 174 <h2 id="iconography">Iconography</h2>
 175 <p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p>
 176 <div class="row">
 177   <div class="col-xs-4">
 178     <label for="input-@icon-font-path">@icon-font-path</label>
 179     <input id="input-@icon-font-path" type="text" aria-describedby="help-block-@icon-font-path" value="&quot;../fonts/&quot;" data-var="@icon-font-path" class="form-control"/>
 180     <p id="help-block-@icon-font-path" class="help-block">Load fonts from this directory.</p>
 181   </div>
 182   <div class="col-xs-4">
 183     <label for="input-@icon-font-name">@icon-font-name</label>
 184     <input id="input-@icon-font-name" type="text" aria-describedby="help-block-@icon-font-name" value="&quot;glyphicons-halflings-regular&quot;" data-var="@icon-font-name" class="form-control"/>
 185     <p id="help-block-@icon-font-name" class="help-block">File name for all font files.</p>
 186   </div>
 187   <div class="col-xs-4">
 188     <label for="input-@icon-font-svg-id">@icon-font-svg-id</label>
 189     <input id="input-@icon-font-svg-id" type="text" aria-describedby="help-block-@icon-font-svg-id" value="&quot;glyphicons_halflingsregular&quot;" data-var="@icon-font-svg-id" class="form-control"/>
 190     <p id="help-block-@icon-font-svg-id" class="help-block">Element ID within SVG icon file.</p>
 191   </div>
 192 </div>
 193 <h2 id="components">Components</h2>
 194 <p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p>
 195 <div class="row">
 196   <div class="col-xs-4">
 197     <label for="input-@padding-base-vertical">@padding-base-vertical</label>
 198     <input id="input-@padding-base-vertical" type="text" value="6px" data-var="@padding-base-vertical" class="form-control"/>
 199   </div>
 200   <div class="col-xs-4">
 201     <label for="input-@padding-base-horizontal">@padding-base-horizontal</label>
 202     <input id="input-@padding-base-horizontal" type="text" value="12px" data-var="@padding-base-horizontal" class="form-control"/>
 203   </div>
 204   <div class="col-xs-4">
 205     <label for="input-@padding-large-vertical">@padding-large-vertical</label>
 206     <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control"/>
 207   </div>
 208   <div class="clearfix"></div>
 209   <div class="col-xs-4">
 210     <label for="input-@padding-large-horizontal">@padding-large-horizontal</label>
 211     <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control"/>
 212   </div>
 213   <div class="col-xs-4">
 214     <label for="input-@padding-small-vertical">@padding-small-vertical</label>
 215     <input id="input-@padding-small-vertical" type="text" value="5px" data-var="@padding-small-vertical" class="form-control"/>
 216   </div>
 217   <div class="col-xs-4">
 218     <label for="input-@padding-small-horizontal">@padding-small-horizontal</label>
 219     <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control"/>
 220   </div>
 221   <div class="clearfix"></div>
 222   <div class="col-xs-4">
 223     <label for="input-@padding-xs-vertical">@padding-xs-vertical</label>
 224     <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control"/>
 225   </div>
 226   <div class="col-xs-4">
 227     <label for="input-@padding-xs-horizontal">@padding-xs-horizontal</label>
 228     <input id="input-@padding-xs-horizontal" type="text" value="5px" data-var="@padding-xs-horizontal" class="form-control"/>
 229   </div>
 230   <div class="col-xs-4">
 231     <label for="input-@line-height-large">@line-height-large</label>
 232     <input id="input-@line-height-large" type="text" value="1.3333333" data-var="@line-height-large" class="form-control"/>
 233   </div>
 234   <div class="clearfix"></div>
 235   <div class="col-xs-4">
 236     <label for="input-@line-height-small">@line-height-small</label>
 237     <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control"/>
 238   </div>
 239   <div class="col-xs-4">
 240     <label for="input-@border-radius-base">@border-radius-base</label>
 241     <input id="input-@border-radius-base" type="text" value="4px" data-var="@border-radius-base" class="form-control"/>
 242   </div>
 243   <div class="col-xs-4">
 244     <label for="input-@border-radius-large">@border-radius-large</label>
 245     <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control"/>
 246   </div>
 247   <div class="clearfix"></div>
 248   <div class="col-xs-4">
 249     <label for="input-@border-radius-small">@border-radius-small</label>
 250     <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control"/>
 251   </div>
 252   <div class="col-xs-4">
 253     <label for="input-@component-active-color">@component-active-color</label>
 254     <input id="input-@component-active-color" type="text" aria-describedby="help-block-@component-active-color" value="#fff" data-var="@component-active-color" class="form-control"/>
 255     <p id="help-block-@component-active-color" class="help-block">Global color for active items (e.g., navs or dropdowns).</p>
 256   </div>
 257   <div class="col-xs-4">
 258     <label for="input-@component-active-bg">@component-active-bg</label>
 259     <input id="input-@component-active-bg" type="text" aria-describedby="help-block-@component-active-bg" value="@brand-primary" data-var="@component-active-bg" class="form-control"/>
 260     <p id="help-block-@component-active-bg" class="help-block">Global background color for active items (e.g., navs or dropdowns).</p>
 261   </div>
 262   <div class="clearfix"></div>
 263   <div class="col-xs-4">
 264     <label for="input-@caret-width-base">@caret-width-base</label>
 265     <input id="input-@caret-width-base" type="text" aria-describedby="help-block-@caret-width-base" value="4px" data-var="@caret-width-base" class="form-control"/>
 266     <p id="help-block-@caret-width-base" class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p>
 267   </div>
 268   <div class="col-xs-4">
 269     <label for="input-@caret-width-large">@caret-width-large</label>
 270     <input id="input-@caret-width-large" type="text" aria-describedby="help-block-@caret-width-large" value="5px" data-var="@caret-width-large" class="form-control"/>
 271     <p id="help-block-@caret-width-large" class="help-block">Carets increase slightly in size for larger components.</p>
 272   </div>
 273 </div>
 274 <h2 id="tables">Tables</h2>
 275 <p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p>
 276 <div class="row">
 277   <div class="col-xs-4">
 278     <label for="input-@table-cell-padding">@table-cell-padding</label>
 279     <input id="input-@table-cell-padding" type="text" aria-describedby="help-block-@table-cell-padding" value="8px" data-var="@table-cell-padding" class="form-control"/>
 280     <p id="help-block-@table-cell-padding" class="help-block">Padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s.</p>
 281   </div>
 282   <div class="col-xs-4">
 283     <label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label>
 284     <input id="input-@table-condensed-cell-padding" type="text" aria-describedby="help-block-@table-condensed-cell-padding" value="5px" data-var="@table-condensed-cell-padding" class="form-control"/>
 285     <p id="help-block-@table-condensed-cell-padding" class="help-block">Padding for cells in <code>.table-condensed</code>.</p>
 286   </div>
 287   <div class="col-xs-4">
 288     <label for="input-@table-bg">@table-bg</label>
 289     <input id="input-@table-bg" type="text" aria-describedby="help-block-@table-bg" value="transparent" data-var="@table-bg" class="form-control"/>
 290     <p id="help-block-@table-bg" class="help-block">Default background color used for all tables.</p>
 291   </div>
 292   <div class="clearfix"></div>
 293   <div class="col-xs-4">
 294     <label for="input-@table-bg-accent">@table-bg-accent</label>
 295     <input id="input-@table-bg-accent" type="text" aria-describedby="help-block-@table-bg-accent" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/>
 296     <p id="help-block-@table-bg-accent" class="help-block">Background color used for <code>.table-striped</code>.</p>
 297   </div>
 298   <div class="col-xs-4">
 299     <label for="input-@table-bg-hover">@table-bg-hover</label>
 300     <input id="input-@table-bg-hover" type="text" aria-describedby="help-block-@table-bg-hover" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/>
 301     <p id="help-block-@table-bg-hover" class="help-block">Background color used for <code>.table-hover</code>.</p>
 302   </div>
 303   <div class="col-xs-4">
 304     <label for="input-@table-bg-active">@table-bg-active</label>
 305     <input id="input-@table-bg-active" type="text" value="@table-bg-hover" data-var="@table-bg-active" class="form-control"/>
 306   </div>
 307   <div class="clearfix"></div>
 308   <div class="col-xs-4">
 309     <label for="input-@table-border-color">@table-border-color</label>
 310     <input id="input-@table-border-color" type="text" aria-describedby="help-block-@table-border-color" value="#ddd" data-var="@table-border-color" class="form-control"/>
 311     <p id="help-block-@table-border-color" class="help-block">Border color for table and cell borders.</p>
 312   </div>
 313 </div>
 314 <h2 id="buttons">Buttons</h2>
 315 <p>For each of Bootstrap's buttons, define text, background and border color.</p>
 316 <div class="row">
 317   <div class="col-xs-4">
 318     <label for="input-@btn-font-weight">@btn-font-weight</label>
 319     <input id="input-@btn-font-weight" type="text" value="normal" data-var="@btn-font-weight" class="form-control"/>
 320   </div>
 321   <div class="col-xs-4">
 322     <label for="input-@btn-default-color">@btn-default-color</label>
 323     <input id="input-@btn-default-color" type="text" value="#333" data-var="@btn-default-color" class="form-control"/>
 324   </div>
 325   <div class="col-xs-4">
 326     <label for="input-@btn-default-bg">@btn-default-bg</label>
 327     <input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control"/>
 328   </div>
 329   <div class="clearfix"></div>
 330   <div class="col-xs-4">
 331     <label for="input-@btn-default-border">@btn-default-border</label>
 332     <input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control"/>
 333   </div>
 334   <div class="col-xs-4">
 335     <label for="input-@btn-primary-color">@btn-primary-color</label>
 336     <input id="input-@btn-primary-color" type="text" value="#fff" data-var="@btn-primary-color" class="form-control"/>
 337   </div>
 338   <div class="col-xs-4">
 339     <label for="input-@btn-primary-bg">@btn-primary-bg</label>
 340     <input id="input-@btn-primary-bg" type="text" value="@brand-primary" data-var="@btn-primary-bg" class="form-control"/>
 341   </div>
 342   <div class="clearfix"></div>
 343   <div class="col-xs-4">
 344     <label for="input-@btn-primary-border">@btn-primary-border</label>
 345     <input id="input-@btn-primary-border" type="text" value="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border" class="form-control"/>
 346   </div>
 347   <div class="col-xs-4">
 348     <label for="input-@btn-success-color">@btn-success-color</label>
 349     <input id="input-@btn-success-color" type="text" value="#fff" data-var="@btn-success-color" class="form-control"/>
 350   </div>
 351   <div class="col-xs-4">
 352     <label for="input-@btn-success-bg">@btn-success-bg</label>
 353     <input id="input-@btn-success-bg" type="text" value="@brand-success" data-var="@btn-success-bg" class="form-control"/>
 354   </div>
 355   <div class="clearfix"></div>
 356   <div class="col-xs-4">
 357     <label for="input-@btn-success-border">@btn-success-border</label>
 358     <input id="input-@btn-success-border" type="text" value="darken(@btn-success-bg, 5%)" data-var="@btn-success-border" class="form-control"/>
 359   </div>
 360   <div class="col-xs-4">
 361     <label for="input-@btn-info-color">@btn-info-color</label>
 362     <input id="input-@btn-info-color" type="text" value="#fff" data-var="@btn-info-color" class="form-control"/>
 363   </div>
 364   <div class="col-xs-4">
 365     <label for="input-@btn-info-bg">@btn-info-bg</label>
 366     <input id="input-@btn-info-bg" type="text" value="@brand-info" data-var="@btn-info-bg" class="form-control"/>
 367   </div>
 368   <div class="clearfix"></div>
 369   <div class="col-xs-4">
 370     <label for="input-@btn-info-border">@btn-info-border</label>
 371     <input id="input-@btn-info-border" type="text" value="darken(@btn-info-bg, 5%)" data-var="@btn-info-border" class="form-control"/>
 372   </div>
 373   <div class="col-xs-4">
 374     <label for="input-@btn-warning-color">@btn-warning-color</label>
 375     <input id="input-@btn-warning-color" type="text" value="#fff" data-var="@btn-warning-color" class="form-control"/>
 376   </div>
 377   <div class="col-xs-4">
 378     <label for="input-@btn-warning-bg">@btn-warning-bg</label>
 379     <input id="input-@btn-warning-bg" type="text" value="@brand-warning" data-var="@btn-warning-bg" class="form-control"/>
 380   </div>
 381   <div class="clearfix"></div>
 382   <div class="col-xs-4">
 383     <label for="input-@btn-warning-border">@btn-warning-border</label>
 384     <input id="input-@btn-warning-border" type="text" value="darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border" class="form-control"/>
 385   </div>
 386   <div class="col-xs-4">
 387     <label for="input-@btn-danger-color">@btn-danger-color</label>
 388     <input id="input-@btn-danger-color" type="text" value="#fff" data-var="@btn-danger-color" class="form-control"/>
 389   </div>
 390   <div class="col-xs-4">
 391     <label for="input-@btn-danger-bg">@btn-danger-bg</label>
 392     <input id="input-@btn-danger-bg" type="text" value="@brand-danger" data-var="@btn-danger-bg" class="form-control"/>
 393   </div>
 394   <div class="clearfix"></div>
 395   <div class="col-xs-4">
 396     <label for="input-@btn-danger-border">@btn-danger-border</label>
 397     <input id="input-@btn-danger-border" type="text" value="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border" class="form-control"/>
 398   </div>
 399   <div class="col-xs-4">
 400     <label for="input-@btn-link-disabled-color">@btn-link-disabled-color</label>
 401     <input id="input-@btn-link-disabled-color" type="text" value="@gray-light" data-var="@btn-link-disabled-color" class="form-control"/>
 402   </div>
 403 </div>
 404 <h2 id="forms">Forms</h2>
 405 <div class="row">
 406   <div class="col-xs-4">
 407     <label for="input-@input-bg">@input-bg</label>
 408     <input id="input-@input-bg" type="text" aria-describedby="help-block-@input-bg" value="#fff" data-var="@input-bg" class="form-control"/>
 409     <p id="help-block-@input-bg" class="help-block"><code>&lt;input&gt;</code> background color</p>
 410   </div>
 411   <div class="col-xs-4">
 412     <label for="input-@input-bg-disabled">@input-bg-disabled</label>
 413     <input id="input-@input-bg-disabled" type="text" aria-describedby="help-block-@input-bg-disabled" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control"/>
 414     <p id="help-block-@input-bg-disabled" class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
 415   </div>
 416   <div class="col-xs-4">
 417     <label for="input-@input-color">@input-color</label>
 418     <input id="input-@input-color" type="text" aria-describedby="help-block-@input-color" value="@gray" data-var="@input-color" class="form-control"/>
 419     <p id="help-block-@input-color" class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
 420   </div>
 421   <div class="clearfix"></div>
 422   <div class="col-xs-4">
 423     <label for="input-@input-border">@input-border</label>
 424     <input id="input-@input-border" type="text" aria-describedby="help-block-@input-border" value="#ccc" data-var="@input-border" class="form-control"/>
 425     <p id="help-block-@input-border" class="help-block"><code>&lt;input&gt;</code> border color</p>
 426   </div>
 427   <div class="col-xs-4">
 428     <label for="input-@input-border-radius">@input-border-radius</label>
 429     <input id="input-@input-border-radius" type="text" aria-describedby="help-block-@input-border-radius" value="@border-radius-base" data-var="@input-border-radius" class="form-control"/>
 430     <p id="help-block-@input-border-radius" class="help-block">Default <code>.form-control</code> border radius</p>
 431   </div>
 432   <div class="col-xs-4">
 433     <label for="input-@input-border-radius-large">@input-border-radius-large</label>
 434     <input id="input-@input-border-radius-large" type="text" aria-describedby="help-block-@input-border-radius-large" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control"/>
 435     <p id="help-block-@input-border-radius-large" class="help-block">Large <code>.form-control</code> border radius</p>
 436   </div>
 437   <div class="clearfix"></div>
 438   <div class="col-xs-4">
 439     <label for="input-@input-border-radius-small">@input-border-radius-small</label>
 440     <input id="input-@input-border-radius-small" type="text" aria-describedby="help-block-@input-border-radius-small" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control"/>
 441     <p id="help-block-@input-border-radius-small" class="help-block">Small <code>.form-control</code> border radius</p>
 442   </div>
 443   <div class="col-xs-4">
 444     <label for="input-@input-border-focus">@input-border-focus</label>
 445     <input id="input-@input-border-focus" type="text" aria-describedby="help-block-@input-border-focus" value="#66afe9" data-var="@input-border-focus" class="form-control"/>
 446     <p id="help-block-@input-border-focus" class="help-block">Border color for inputs on focus</p>
 447   </div>
 448   <div class="col-xs-4">
 449     <label for="input-@input-color-placeholder">@input-color-placeholder</label>
 450     <input id="input-@input-color-placeholder" type="text" aria-describedby="help-block-@input-color-placeholder" value="#999" data-var="@input-color-placeholder" class="form-control"/>
 451     <p id="help-block-@input-color-placeholder" class="help-block">Placeholder text color</p>
 452   </div>
 453   <div class="clearfix"></div>
 454   <div class="col-xs-4">
 455     <label for="input-@input-height-base">@input-height-base</label>
 456     <input id="input-@input-height-base" type="text" aria-describedby="help-block-@input-height-base" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/>
 457     <p id="help-block-@input-height-base" class="help-block">Default <code>.form-control</code> height</p>
 458   </div>
 459   <div class="col-xs-4">
 460     <label for="input-@input-height-large">@input-height-large</label>
 461     <input id="input-@input-height-large" type="text" aria-describedby="help-block-@input-height-large" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control"/>
 462     <p id="help-block-@input-height-large" class="help-block">Large <code>.form-control</code> height</p>
 463   </div>
 464   <div class="col-xs-4">
 465     <label for="input-@input-height-small">@input-height-small</label>
 466     <input id="input-@input-height-small" type="text" aria-describedby="help-block-@input-height-small" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/>
 467     <p id="help-block-@input-height-small" class="help-block">Small <code>.form-control</code> height</p>
 468   </div>
 469   <div class="clearfix"></div>
 470   <div class="col-xs-4">
 471     <label for="input-@form-group-margin-bottom">@form-group-margin-bottom</label>
 472     <input id="input-@form-group-margin-bottom" type="text" aria-describedby="help-block-@form-group-margin-bottom" value="15px" data-var="@form-group-margin-bottom" class="form-control"/>
 473     <p id="help-block-@form-group-margin-bottom" class="help-block"><code>.form-group</code> margin</p>
 474   </div>
 475   <div class="col-xs-4">
 476     <label for="input-@legend-color">@legend-color</label>
 477     <input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control"/>
 478   </div>
 479   <div class="col-xs-4">
 480     <label for="input-@legend-border-color">@legend-border-color</label>
 481     <input id="input-@legend-border-color" type="text" value="#e5e5e5" data-var="@legend-border-color" class="form-control"/>
 482   </div>
 483   <div class="clearfix"></div>
 484   <div class="col-xs-4">
 485     <label for="input-@input-group-addon-bg">@input-group-addon-bg</label>
 486     <input id="input-@input-group-addon-bg" type="text" aria-describedby="help-block-@input-group-addon-bg" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/>
 487     <p id="help-block-@input-group-addon-bg" class="help-block">Background color for textual input addons</p>
 488   </div>
 489   <div class="col-xs-4">
 490     <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label>
 491     <input id="input-@input-group-addon-border-color" type="text" aria-describedby="help-block-@input-group-addon-border-color" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/>
 492     <p id="help-block-@input-group-addon-border-color" class="help-block">Border color for textual input addons</p>
 493   </div>
 494   <div class="col-xs-4">
 495     <label for="input-@cursor-disabled">@cursor-disabled</label>
 496     <input id="input-@cursor-disabled" type="text" aria-describedby="help-block-@cursor-disabled" value="not-allowed" data-var="@cursor-disabled" class="form-control"/>
 497     <p id="help-block-@cursor-disabled" class="help-block">Disabled cursor for form controls and buttons.</p>
 498   </div>
 499 </div>
 500 <h2 id="dropdowns">Dropdowns</h2>
 501 <p>Dropdown menu container and contents.</p>
 502 <div class="row">
 503   <div class="col-xs-4">
 504     <label for="input-@dropdown-bg">@dropdown-bg</label>
 505     <input id="input-@dropdown-bg" type="text" aria-describedby="help-block-@dropdown-bg" value="#fff" data-var="@dropdown-bg" class="form-control"/>
 506     <p id="help-block-@dropdown-bg" class="help-block">Background for the dropdown menu.</p>
 507   </div>
 508   <div class="col-xs-4">
 509     <label for="input-@dropdown-border">@dropdown-border</label>
 510     <input id="input-@dropdown-border" type="text" aria-describedby="help-block-@dropdown-border" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control"/>
 511     <p id="help-block-@dropdown-border" class="help-block">Dropdown menu <code>border-color</code>.</p>
 512   </div>
 513   <div class="col-xs-4">
 514     <label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label>
 515     <input id="input-@dropdown-fallback-border" type="text" aria-describedby="help-block-@dropdown-fallback-border" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/>
 516     <p id="help-block-@dropdown-fallback-border" class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p>
 517   </div>
 518   <div class="clearfix"></div>
 519   <div class="col-xs-4">
 520     <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label>
 521     <input id="input-@dropdown-divider-bg" type="text" aria-describedby="help-block-@dropdown-divider-bg" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/>
 522     <p id="help-block-@dropdown-divider-bg" class="help-block">Divider color for between dropdown items.</p>
 523   </div>
 524   <div class="col-xs-4">
 525     <label for="input-@dropdown-link-color">@dropdown-link-color</label>
 526     <input id="input-@dropdown-link-color" type="text" aria-describedby="help-block-@dropdown-link-color" value="@gray-dark" data-var="@dropdown-link-color" class="form-control"/>
 527     <p id="help-block-@dropdown-link-color" class="help-block">Dropdown link text color.</p>
 528   </div>
 529   <div class="col-xs-4">
 530     <label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label>
 531     <input id="input-@dropdown-link-hover-color" type="text" aria-describedby="help-block-@dropdown-link-hover-color" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/>
 532     <p id="help-block-@dropdown-link-hover-color" class="help-block">Hover color for dropdown links.</p>
 533   </div>
 534   <div class="clearfix"></div>
 535   <div class="col-xs-4">
 536     <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label>
 537     <input id="input-@dropdown-link-hover-bg" type="text" aria-describedby="help-block-@dropdown-link-hover-bg" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/>
 538     <p id="help-block-@dropdown-link-hover-bg" class="help-block">Hover background for dropdown links.</p>
 539   </div>
 540   <div class="col-xs-4">
 541     <label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label>
 542     <input id="input-@dropdown-link-active-color" type="text" aria-describedby="help-block-@dropdown-link-active-color" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control"/>
 543     <p id="help-block-@dropdown-link-active-color" class="help-block">Active dropdown menu item text color.</p>
 544   </div>
 545   <div class="col-xs-4">
 546     <label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label>
 547     <input id="input-@dropdown-link-active-bg" type="text" aria-describedby="help-block-@dropdown-link-active-bg" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/>
 548     <p id="help-block-@dropdown-link-active-bg" class="help-block">Active dropdown menu item background color.</p>
 549   </div>
 550   <div class="clearfix"></div>
 551   <div class="col-xs-4">
 552     <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label>
 553     <input id="input-@dropdown-link-disabled-color" type="text" aria-describedby="help-block-@dropdown-link-disabled-color" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/>
 554     <p id="help-block-@dropdown-link-disabled-color" class="help-block">Disabled dropdown menu item background color.</p>
 555   </div>
 556   <div class="col-xs-4">
 557     <label for="input-@dropdown-header-color">@dropdown-header-color</label>
 558     <input id="input-@dropdown-header-color" type="text" aria-describedby="help-block-@dropdown-header-color" value="@gray-light" data-var="@dropdown-header-color" class="form-control"/>
 559     <p id="help-block-@dropdown-header-color" class="help-block">Text color for headers within dropdown menus.</p>
 560   </div>
 561   <div class="col-xs-4">
 562     <label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
 563     <input id="input-@dropdown-caret-color" type="text" aria-describedby="help-block-@dropdown-caret-color" value="#000" data-var="@dropdown-caret-color" class="form-control"/>
 564     <p id="help-block-@dropdown-caret-color" class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
 565   </div>
 566 </div>
 567 <h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
 568 <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
 569 <div class="row">
 570   <div class="col-xs-4">
 571     <label for="input-@screen-xs">@screen-xs</label>
 572     <input id="input-@screen-xs" type="text" aria-describedby="help-block-@screen-xs" value="480px" data-var="@screen-xs" class="form-control"/>
 573     <p id="help-block-@screen-xs" class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p>
 574   </div>
 575   <div class="col-xs-4">
 576     <label for="input-@screen-xs-min">@screen-xs-min</label>
 577     <input id="input-@screen-xs-min" type="text" aria-describedby="help-block-@screen-xs-min" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/>
 578     <p id="help-block-@screen-xs-min" class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
 579   </div>
 580   <div class="col-xs-4">
 581     <label for="input-@screen-phone">@screen-phone</label>
 582     <input id="input-@screen-phone" type="text" aria-describedby="help-block-@screen-phone" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/>
 583     <p id="help-block-@screen-phone" class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
 584   </div>
 585   <div class="clearfix"></div>
 586   <div class="col-xs-4">
 587     <label for="input-@screen-sm">@screen-sm</label>
 588     <input id="input-@screen-sm" type="text" aria-describedby="help-block-@screen-sm" value="768px" data-var="@screen-sm" class="form-control"/>
 589     <p id="help-block-@screen-sm" class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p>
 590   </div>
 591   <div class="col-xs-4">
 592     <label for="input-@screen-sm-min">@screen-sm-min</label>
 593     <input id="input-@screen-sm-min" type="text" value="@screen-sm" data-var="@screen-sm-min" class="form-control"/>
 594   </div>
 595   <div class="col-xs-4">
 596     <label for="input-@screen-tablet">@screen-tablet</label>
 597     <input id="input-@screen-tablet" type="text" aria-describedby="help-block-@screen-tablet" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/>
 598     <p id="help-block-@screen-tablet" class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
 599   </div>
 600   <div class="clearfix"></div>
 601   <div class="col-xs-4">
 602     <label for="input-@screen-md">@screen-md</label>
 603     <input id="input-@screen-md" type="text" aria-describedby="help-block-@screen-md" value="992px" data-var="@screen-md" class="form-control"/>
 604     <p id="help-block-@screen-md" class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p>
 605   </div>
 606   <div class="col-xs-4">
 607     <label for="input-@screen-md-min">@screen-md-min</label>
 608     <input id="input-@screen-md-min" type="text" value="@screen-md" data-var="@screen-md-min" class="form-control"/>
 609   </div>
 610   <div class="col-xs-4">
 611     <label for="input-@screen-desktop">@screen-desktop</label>
 612     <input id="input-@screen-desktop" type="text" aria-describedby="help-block-@screen-desktop" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/>
 613     <p id="help-block-@screen-desktop" class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
 614   </div>
 615   <div class="clearfix"></div>
 616   <div class="col-xs-4">
 617     <label for="input-@screen-lg">@screen-lg</label>
 618     <input id="input-@screen-lg" type="text" aria-describedby="help-block-@screen-lg" value="1200px" data-var="@screen-lg" class="form-control"/>
 619     <p id="help-block-@screen-lg" class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p>
 620   </div>
 621   <div class="col-xs-4">
 622     <label for="input-@screen-lg-min">@screen-lg-min</label>
 623     <input id="input-@screen-lg-min" type="text" value="@screen-lg" data-var="@screen-lg-min" class="form-control"/>
 624   </div>
 625   <div class="col-xs-4">
 626     <label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
 627     <input id="input-@screen-lg-desktop" type="text" aria-describedby="help-block-@screen-lg-desktop" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/>
 628     <p id="help-block-@screen-lg-desktop" class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
 629   </div>
 630   <div class="clearfix"></div>
 631   <div class="col-xs-4">
 632     <label for="input-@screen-xs-max">@screen-xs-max</label>
 633     <input id="input-@screen-xs-max" type="text" value="(@screen-sm-min - 1)" data-var="@screen-xs-max" class="form-control"/>
 634   </div>
 635   <div class="col-xs-4">
 636     <label for="input-@screen-sm-max">@screen-sm-max</label>
 637     <input id="input-@screen-sm-max" type="text" value="(@screen-md-min - 1)" data-var="@screen-sm-max" class="form-control"/>
 638   </div>
 639   <div class="col-xs-4">
 640     <label for="input-@screen-md-max">@screen-md-max</label>
 641     <input id="input-@screen-md-max" type="text" value="(@screen-lg-min - 1)" data-var="@screen-md-max" class="form-control"/>
 642   </div>
 643 </div>
 644 <h2 id="grid-system">Grid system</h2>
 645 <p>Define your custom responsive grid.</p>
 646 <div class="row">
 647   <div class="col-xs-4">
 648     <label for="input-@grid-columns">@grid-columns</label>
 649     <input id="input-@grid-columns" type="text" aria-describedby="help-block-@grid-columns" value="12" data-var="@grid-columns" class="form-control"/>
 650     <p id="help-block-@grid-columns" class="help-block">Number of columns in the grid.</p>
 651   </div>
 652   <div class="col-xs-4">
 653     <label for="input-@grid-gutter-width">@grid-gutter-width</label>
 654     <input id="input-@grid-gutter-width" type="text" aria-describedby="help-block-@grid-gutter-width" value="30px" data-var="@grid-gutter-width" class="form-control"/>
 655     <p id="help-block-@grid-gutter-width" class="help-block">Padding between columns. Gets divided in half for the left and right.</p>
 656   </div>
 657   <div class="col-xs-4">
 658     <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label>
 659     <input id="input-@grid-float-breakpoint" type="text" aria-describedby="help-block-@grid-float-breakpoint" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/>
 660     <p id="help-block-@grid-float-breakpoint" class="help-block">Point at which the navbar becomes uncollapsed.</p>
 661   </div>
 662   <div class="clearfix"></div>
 663   <div class="col-xs-4">
 664     <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label>
 665     <input id="input-@grid-float-breakpoint-max" type="text" aria-describedby="help-block-@grid-float-breakpoint-max" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/>
 666     <p id="help-block-@grid-float-breakpoint-max" class="help-block">Point at which the navbar begins collapsing.</p>
 667   </div>
 668 </div>
 669 <h2 id="container-sizes">Container sizes</h2>
 670 <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
 671 <div class="row">
 672   <div class="col-xs-4">
 673     <label for="input-@container-tablet">@container-tablet</label>
 674     <input id="input-@container-tablet" type="text" value="(720px + @grid-gutter-width)" data-var="@container-tablet" class="form-control"/>
 675   </div>
 676   <div class="col-xs-4">
 677     <label for="input-@container-sm">@container-sm</label>
 678     <input id="input-@container-sm" type="text" aria-describedby="help-block-@container-sm" value="@container-tablet" data-var="@container-sm" class="form-control"/>
 679     <p id="help-block-@container-sm" class="help-block">For <code>@screen-sm-min</code> and up.</p>
 680   </div>
 681   <div class="col-xs-4">
 682     <label for="input-@container-desktop">@container-desktop</label>
 683     <input id="input-@container-desktop" type="text" value="(940px + @grid-gutter-width)" data-var="@container-desktop" class="form-control"/>
 684   </div>
 685   <div class="clearfix"></div>
 686   <div class="col-xs-4">
 687     <label for="input-@container-md">@container-md</label>
 688     <input id="input-@container-md" type="text" aria-describedby="help-block-@container-md" value="@container-desktop" data-var="@container-md" class="form-control"/>
 689     <p id="help-block-@container-md" class="help-block">For <code>@screen-md-min</code> and up.</p>
 690   </div>
 691   <div class="col-xs-4">
 692     <label for="input-@container-large-desktop">@container-large-desktop</label>
 693     <input id="input-@container-large-desktop" type="text" value="(1140px + @grid-gutter-width)" data-var="@container-large-desktop" class="form-control"/>
 694   </div>
 695   <div class="col-xs-4">
 696     <label for="input-@container-lg">@container-lg</label>
 697     <input id="input-@container-lg" type="text" aria-describedby="help-block-@container-lg" value="@container-large-desktop" data-var="@container-lg" class="form-control"/>
 698     <p id="help-block-@container-lg" class="help-block">For <code>@screen-lg-min</code> and up.</p>
 699   </div>
 700 </div>
 701 <h2 id="navbar">Navbar</h2>
 702 <div class="row">
 703   <div class="col-xs-4">
 704     <label for="input-@navbar-height">@navbar-height</label>
 705     <input id="input-@navbar-height" type="text" value="50px" data-var="@navbar-height" class="form-control"/>
 706   </div>
 707   <div class="col-xs-4">
 708     <label for="input-@navbar-margin-bottom">@navbar-margin-bottom</label>
 709     <input id="input-@navbar-margin-bottom" type="text" value="@line-height-computed" data-var="@navbar-margin-bottom" class="form-control"/>
 710   </div>
 711   <div class="col-xs-4">
 712     <label for="input-@navbar-border-radius">@navbar-border-radius</label>
 713     <input id="input-@navbar-border-radius" type="text" value="@border-radius-base" data-var="@navbar-border-radius" class="form-control"/>
 714   </div>
 715   <div class="clearfix"></div>
 716   <div class="col-xs-4">
 717     <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label>
 718     <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control"/>
 719   </div>
 720   <div class="col-xs-4">
 721     <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label>
 722     <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control"/>
 723   </div>
 724   <div class="col-xs-4">
 725     <label for="input-@navbar-collapse-max-height">@navbar-collapse-max-height</label>
 726     <input id="input-@navbar-collapse-max-height" type="text" value="340px" data-var="@navbar-collapse-max-height" class="form-control"/>
 727   </div>
 728   <div class="clearfix"></div>
 729   <div class="col-xs-4">
 730     <label for="input-@navbar-default-color">@navbar-default-color</label>
 731     <input id="input-@navbar-default-color" type="text" value="#777" data-var="@navbar-default-color" class="form-control"/>
 732   </div>
 733   <div class="col-xs-4">
 734     <label for="input-@navbar-default-bg">@navbar-default-bg</label>
 735     <input id="input-@navbar-default-bg" type="text" value="#f8f8f8" data-var="@navbar-default-bg" class="form-control"/>
 736   </div>
 737   <div class="col-xs-4">
 738     <label for="input-@navbar-default-border">@navbar-default-border</label>
 739     <input id="input-@navbar-default-border" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border" class="form-control"/>
 740   </div>
 741   <div class="clearfix"></div>
 742   <div class="col-xs-4">
 743     <label for="input-@navbar-default-link-color">@navbar-default-link-color</label>
 744     <input id="input-@navbar-default-link-color" type="text" value="#777" data-var="@navbar-default-link-color" class="form-control"/>
 745   </div>
 746   <div class="col-xs-4">
 747     <label for="input-@navbar-default-link-hover-color">@navbar-default-link-hover-color</label>
 748     <input id="input-@navbar-default-link-hover-color" type="text" value="#333" data-var="@navbar-default-link-hover-color" class="form-control"/>
 749   </div>
 750   <div class="col-xs-4">
 751     <label for="input-@navbar-default-link-hover-bg">@navbar-default-link-hover-bg</label>
 752     <input id="input-@navbar-default-link-hover-bg" type="text" value="transparent" data-var="@navbar-default-link-hover-bg" class="form-control"/>
 753   </div>
 754   <div class="clearfix"></div>
 755   <div class="col-xs-4">
 756     <label for="input-@navbar-default-link-active-color">@navbar-default-link-active-color</label>
 757     <input id="input-@navbar-default-link-active-color" type="text" value="#555" data-var="@navbar-default-link-active-color" class="form-control"/>
 758   </div>
 759   <div class="col-xs-4">
 760     <label for="input-@navbar-default-link-active-bg">@navbar-default-link-active-bg</label>
 761     <input id="input-@navbar-default-link-active-bg" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg" class="form-control"/>
 762   </div>
 763   <div class="col-xs-4">
 764     <label for="input-@navbar-default-link-disabled-color">@navbar-default-link-disabled-color</label>
 765     <input id="input-@navbar-default-link-disabled-color" type="text" value="#ccc" data-var="@navbar-default-link-disabled-color" class="form-control"/>
 766   </div>
 767   <div class="clearfix"></div>
 768   <div class="col-xs-4">
 769     <label for="input-@navbar-default-link-disabled-bg">@navbar-default-link-disabled-bg</label>
 770     <input id="input-@navbar-default-link-disabled-bg" type="text" value="transparent" data-var="@navbar-default-link-disabled-bg" class="form-control"/>
 771   </div>
 772   <div class="col-xs-4">
 773     <label for="input-@navbar-default-brand-color">@navbar-default-brand-color</label>
 774     <input id="input-@navbar-default-brand-color" type="text" value="@navbar-default-link-color" data-var="@navbar-default-brand-color" class="form-control"/>
 775   </div>
 776   <div class="col-xs-4">
 777     <label for="input-@navbar-default-brand-hover-color">@navbar-default-brand-hover-color</label>
 778     <input id="input-@navbar-default-brand-hover-color" type="text" value="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color" class="form-control"/>
 779   </div>
 780   <div class="clearfix"></div>
 781   <div class="col-xs-4">
 782     <label for="input-@navbar-default-brand-hover-bg">@navbar-default-brand-hover-bg</label>
 783     <input id="input-@navbar-default-brand-hover-bg" type="text" value="transparent" data-var="@navbar-default-brand-hover-bg" class="form-control"/>
 784   </div>
 785   <div class="col-xs-4">
 786     <label for="input-@navbar-default-toggle-hover-bg">@navbar-default-toggle-hover-bg</label>
 787     <input id="input-@navbar-default-toggle-hover-bg" type="text" value="#ddd" data-var="@navbar-default-toggle-hover-bg" class="form-control"/>
 788   </div>
 789   <div class="col-xs-4">
 790     <label for="input-@navbar-default-toggle-icon-bar-bg">@navbar-default-toggle-icon-bar-bg</label>
 791     <input id="input-@navbar-default-toggle-icon-bar-bg" type="text" value="#888" data-var="@navbar-default-toggle-icon-bar-bg" class="form-control"/>
 792   </div>
 793   <div class="clearfix"></div>
 794   <div class="col-xs-4">
 795     <label for="input-@navbar-default-toggle-border-color">@navbar-default-toggle-border-color</label>
 796     <input id="input-@navbar-default-toggle-border-color" type="text" value="#ddd" data-var="@navbar-default-toggle-border-color" class="form-control"/>
 797   </div>
 798   <div class="col-xs-4">
 799     <label for="input-@navbar-inverse-color">@navbar-inverse-color</label>
 800     <input id="input-@navbar-inverse-color" type="text" value="lighten(@gray-light, 15%)" data-var="@navbar-inverse-color" class="form-control"/>
 801   </div>
 802   <div class="col-xs-4">
 803     <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label>
 804     <input id="input-@navbar-inverse-bg" type="text" value="#222" data-var="@navbar-inverse-bg" class="form-control"/>
 805   </div>
 806   <div class="clearfix"></div>
 807   <div class="col-xs-4">
 808     <label for="input-@navbar-inverse-border">@navbar-inverse-border</label>
 809     <input id="input-@navbar-inverse-border" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border" class="form-control"/>
 810   </div>
 811   <div class="col-xs-4">
 812     <label for="input-@navbar-inverse-link-color">@navbar-inverse-link-color</label>
 813     <input id="input-@navbar-inverse-link-color" type="text" value="lighten(@gray-light, 15%)" data-var="@navbar-inverse-link-color" class="form-control"/>
 814   </div>
 815   <div class="col-xs-4">
 816     <label for="input-@navbar-inverse-link-hover-color">@navbar-inverse-link-hover-color</label>
 817     <input id="input-@navbar-inverse-link-hover-color" type="text" value="#fff" data-var="@navbar-inverse-link-hover-color" class="form-control"/>
 818   </div>
 819   <div class="clearfix"></div>
 820   <div class="col-xs-4">
 821     <label for="input-@navbar-inverse-link-hover-bg">@navbar-inverse-link-hover-bg</label>
 822     <input id="input-@navbar-inverse-link-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-link-hover-bg" class="form-control"/>
 823   </div>
 824   <div class="col-xs-4">
 825     <label for="input-@navbar-inverse-link-active-color">@navbar-inverse-link-active-color</label>
 826     <input id="input-@navbar-inverse-link-active-color" type="text" value="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color" class="form-control"/>
 827   </div>
 828   <div class="col-xs-4">
 829     <label for="input-@navbar-inverse-link-active-bg">@navbar-inverse-link-active-bg</label>
 830     <input id="input-@navbar-inverse-link-active-bg" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg" class="form-control"/>
 831   </div>
 832   <div class="clearfix"></div>
 833   <div class="col-xs-4">
 834     <label for="input-@navbar-inverse-link-disabled-color">@navbar-inverse-link-disabled-color</label>
 835     <input id="input-@navbar-inverse-link-disabled-color" type="text" value="#444" data-var="@navbar-inverse-link-disabled-color" class="form-control"/>
 836   </div>
 837   <div class="col-xs-4">
 838     <label for="input-@navbar-inverse-link-disabled-bg">@navbar-inverse-link-disabled-bg</label>
 839     <input id="input-@navbar-inverse-link-disabled-bg" type="text" value="transparent" data-var="@navbar-inverse-link-disabled-bg" class="form-control"/>
 840   </div>
 841   <div class="col-xs-4">
 842     <label for="input-@navbar-inverse-brand-color">@navbar-inverse-brand-color</label>
 843     <input id="input-@navbar-inverse-brand-color" type="text" value="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color" class="form-control"/>
 844   </div>
 845   <div class="clearfix"></div>
 846   <div class="col-xs-4">
 847     <label for="input-@navbar-inverse-brand-hover-color">@navbar-inverse-brand-hover-color</label>
 848     <input id="input-@navbar-inverse-brand-hover-color" type="text" value="#fff" data-var="@navbar-inverse-brand-hover-color" class="form-control"/>
 849   </div>
 850   <div class="col-xs-4">
 851     <label for="input-@navbar-inverse-brand-hover-bg">@navbar-inverse-brand-hover-bg</label>
 852     <input id="input-@navbar-inverse-brand-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-brand-hover-bg" class="form-control"/>
 853   </div>
 854   <div class="col-xs-4">
 855     <label for="input-@navbar-inverse-toggle-hover-bg">@navbar-inverse-toggle-hover-bg</label>
 856     <input id="input-@navbar-inverse-toggle-hover-bg" type="text" value="#333" data-var="@navbar-inverse-toggle-hover-bg" class="form-control"/>
 857   </div>
 858   <div class="clearfix"></div>
 859   <div class="col-xs-4">
 860     <label for="input-@navbar-inverse-toggle-icon-bar-bg">@navbar-inverse-toggle-icon-bar-bg</label>
 861     <input id="input-@navbar-inverse-toggle-icon-bar-bg" type="text" value="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg" class="form-control"/>
 862   </div>
 863   <div class="col-xs-4">
 864     <label for="input-@navbar-inverse-toggle-border-color">@navbar-inverse-toggle-border-color</label>
 865     <input id="input-@navbar-inverse-toggle-border-color" type="text" value="#333" data-var="@navbar-inverse-toggle-border-color" class="form-control"/>
 866   </div>
 867 </div>
 868 <h2 id="navs">Navs</h2>
 869 <h3 id="shared-nav-styles">Shared nav styles</h3>
 870 <div class="row">
 871   <div class="col-xs-4">
 872     <label for="input-@nav-link-padding">@nav-link-padding</label>
 873     <input id="input-@nav-link-padding" type="text" value="10px 15px" data-var="@nav-link-padding" class="form-control"/>
 874   </div>
 875   <div class="col-xs-4">
 876     <label for="input-@nav-link-hover-bg">@nav-link-hover-bg</label>
 877     <input id="input-@nav-link-hover-bg" type="text" value="@gray-lighter" data-var="@nav-link-hover-bg" class="form-control"/>
 878   </div>
 879   <div class="col-xs-4">
 880     <label for="input-@nav-disabled-link-color">@nav-disabled-link-color</label>
 881     <input id="input-@nav-disabled-link-color" type="text" value="@gray-light" data-var="@nav-disabled-link-color" class="form-control"/>
 882   </div>
 883   <div class="clearfix"></div>
 884   <div class="col-xs-4">
 885     <label for="input-@nav-disabled-link-hover-color">@nav-disabled-link-hover-color</label>
 886     <input id="input-@nav-disabled-link-hover-color" type="text" value="@gray-light" data-var="@nav-disabled-link-hover-color" class="form-control"/>
 887   </div>
 888 </div>
 889 <h2 id="tabs">Tabs</h2>
 890 <div class="row">
 891   <div class="col-xs-4">
 892     <label for="input-@nav-tabs-border-color">@nav-tabs-border-color</label>
 893     <input id="input-@nav-tabs-border-color" type="text" value="#ddd" data-var="@nav-tabs-border-color" class="form-control"/>
 894   </div>
 895   <div class="col-xs-4">
 896     <label for="input-@nav-tabs-link-hover-border-color">@nav-tabs-link-hover-border-color</label>
 897     <input id="input-@nav-tabs-link-hover-border-color" type="text" value="@gray-lighter" data-var="@nav-tabs-link-hover-border-color" class="form-control"/>
 898   </div>
 899   <div class="col-xs-4">
 900     <label for="input-@nav-tabs-active-link-hover-bg">@nav-tabs-active-link-hover-bg</label>
 901     <input id="input-@nav-tabs-active-link-hover-bg" type="text" value="@body-bg" data-var="@nav-tabs-active-link-hover-bg" class="form-control"/>
 902   </div>
 903   <div class="clearfix"></div>
 904   <div class="col-xs-4">
 905     <label for="input-@nav-tabs-active-link-hover-color">@nav-tabs-active-link-hover-color</label>
 906     <input id="input-@nav-tabs-active-link-hover-color" type="text" value="@gray" data-var="@nav-tabs-active-link-hover-color" class="form-control"/>
 907   </div>
 908   <div class="col-xs-4">
 909     <label for="input-@nav-tabs-active-link-hover-border-color">@nav-tabs-active-link-hover-border-color</label>
 910     <input id="input-@nav-tabs-active-link-hover-border-color" type="text" value="#ddd" data-var="@nav-tabs-active-link-hover-border-color" class="form-control"/>
 911   </div>
 912   <div class="col-xs-4">
 913     <label for="input-@nav-tabs-justified-link-border-color">@nav-tabs-justified-link-border-color</label>
 914     <input id="input-@nav-tabs-justified-link-border-color" type="text" value="#ddd" data-var="@nav-tabs-justified-link-border-color" class="form-control"/>
 915   </div>
 916   <div class="clearfix"></div>
 917   <div class="col-xs-4">
 918     <label for="input-@nav-tabs-justified-active-link-border-color">@nav-tabs-justified-active-link-border-color</label>
 919     <input id="input-@nav-tabs-justified-active-link-border-color" type="text" value="@body-bg" data-var="@nav-tabs-justified-active-link-border-color" class="form-control"/>
 920   </div>
 921 </div>
 922 <h2 id="pills">Pills</h2>
 923 <div class="row">
 924   <div class="col-xs-4">
 925     <label for="input-@nav-pills-border-radius">@nav-pills-border-radius</label>
 926     <input id="input-@nav-pills-border-radius" type="text" value="@border-radius-base" data-var="@nav-pills-border-radius" class="form-control"/>
 927   </div>
 928   <div class="col-xs-4">
 929     <label for="input-@nav-pills-active-link-hover-bg">@nav-pills-active-link-hover-bg</label>
 930     <input id="input-@nav-pills-active-link-hover-bg" type="text" value="@component-active-bg" data-var="@nav-pills-active-link-hover-bg" class="form-control"/>
 931   </div>
 932   <div class="col-xs-4">
 933     <label for="input-@nav-pills-active-link-hover-color">@nav-pills-active-link-hover-color</label>
 934     <input id="input-@nav-pills-active-link-hover-color" type="text" value="@component-active-color" data-var="@nav-pills-active-link-hover-color" class="form-control"/>
 935   </div>
 936 </div>
 937 <h2 id="pagination">Pagination</h2>
 938 <div class="row">
 939   <div class="col-xs-4">
 940     <label for="input-@pagination-color">@pagination-color</label>
 941     <input id="input-@pagination-color" type="text" value="@link-color" data-var="@pagination-color" class="form-control"/>
 942   </div>
 943   <div class="col-xs-4">
 944     <label for="input-@pagination-bg">@pagination-bg</label>
 945     <input id="input-@pagination-bg" type="text" value="#fff" data-var="@pagination-bg" class="form-control"/>
 946   </div>
 947   <div class="col-xs-4">
 948     <label for="input-@pagination-border">@pagination-border</label>
 949     <input id="input-@pagination-border" type="text" value="#ddd" data-var="@pagination-border" class="form-control"/>
 950   </div>
 951   <div class="clearfix"></div>
 952   <div class="col-xs-4">
 953     <label for="input-@pagination-hover-color">@pagination-hover-color</label>
 954     <input id="input-@pagination-hover-color" type="text" value="@link-hover-color" data-var="@pagination-hover-color" class="form-control"/>
 955   </div>
 956   <div class="col-xs-4">
 957     <label for="input-@pagination-hover-bg">@pagination-hover-bg</label>
 958     <input id="input-@pagination-hover-bg" type="text" value="@gray-lighter" data-var="@pagination-hover-bg" class="form-control"/>
 959   </div>
 960   <div class="col-xs-4">
 961     <label for="input-@pagination-hover-border">@pagination-hover-border</label>
 962     <input id="input-@pagination-hover-border" type="text" value="#ddd" data-var="@pagination-hover-border" class="form-control"/>
 963   </div>
 964   <div class="clearfix"></div>
 965   <div class="col-xs-4">
 966     <label for="input-@pagination-active-color">@pagination-active-color</label>
 967     <input id="input-@pagination-active-color" type="text" value="#fff" data-var="@pagination-active-color" class="form-control"/>
 968   </div>
 969   <div class="col-xs-4">
 970     <label for="input-@pagination-active-bg">@pagination-active-bg</label>
 971     <input id="input-@pagination-active-bg" type="text" value="@brand-primary" data-var="@pagination-active-bg" class="form-control"/>
 972   </div>
 973   <div class="col-xs-4">
 974     <label for="input-@pagination-active-border">@pagination-active-border</label>
 975     <input id="input-@pagination-active-border" type="text" value="@brand-primary" data-var="@pagination-active-border" class="form-control"/>
 976   </div>
 977   <div class="clearfix"></div>
 978   <div class="col-xs-4">
 979     <label for="input-@pagination-disabled-color">@pagination-disabled-color</label>
 980     <input id="input-@pagination-disabled-color" type="text" value="@gray-light" data-var="@pagination-disabled-color" class="form-control"/>
 981   </div>
 982   <div class="col-xs-4">
 983     <label for="input-@pagination-disabled-bg">@pagination-disabled-bg</label>
 984     <input id="input-@pagination-disabled-bg" type="text" value="#fff" data-var="@pagination-disabled-bg" class="form-control"/>
 985   </div>
 986   <div class="col-xs-4">
 987     <label for="input-@pagination-disabled-border">@pagination-disabled-border</label>
 988     <input id="input-@pagination-disabled-border" type="text" value="#ddd" data-var="@pagination-disabled-border" class="form-control"/>
 989   </div>
 990 </div>
 991 <h2 id="pager">Pager</h2>
 992 <div class="row">
 993   <div class="col-xs-4">
 994     <label for="input-@pager-bg">@pager-bg</label>
 995     <input id="input-@pager-bg" type="text" value="@pagination-bg" data-var="@pager-bg" class="form-control"/>
 996   </div>
 997   <div class="col-xs-4">
 998     <label for="input-@pager-border">@pager-border</label>
 999     <input id="input-@pager-border" type="text" value="@pagination-border" data-var="@pager-border" class="form-control"/>
1000   </div>
1001   <div class="col-xs-4">
1002     <label for="input-@pager-border-radius">@pager-border-radius</label>
1003     <input id="input-@pager-border-radius" type="text" value="15px" data-var="@pager-border-radius" class="form-control"/>
1004   </div>
1005   <div class="clearfix"></div>
1006   <div class="col-xs-4">
1007     <label for="input-@pager-hover-bg">@pager-hover-bg</label>
1008     <input id="input-@pager-hover-bg" type="text" value="@pagination-hover-bg" data-var="@pager-hover-bg" class="form-control"/>
1009   </div>
1010   <div class="col-xs-4">
1011     <label for="input-@pager-active-bg">@pager-active-bg</label>
1012     <input id="input-@pager-active-bg" type="text" value="@pagination-active-bg" data-var="@pager-active-bg" class="form-control"/>
1013   </div>
1014   <div class="col-xs-4">
1015     <label for="input-@pager-active-color">@pager-active-color</label>
1016     <input id="input-@pager-active-color" type="text" value="@pagination-active-color" data-var="@pager-active-color" class="form-control"/>
1017   </div>
1018   <div class="clearfix"></div>
1019   <div class="col-xs-4">
1020     <label for="input-@pager-disabled-color">@pager-disabled-color</label>
1021     <input id="input-@pager-disabled-color" type="text" value="@pagination-disabled-color" data-var="@pager-disabled-color" class="form-control"/>
1022   </div>
1023 </div>
1024 <h2 id="jumbotron">Jumbotron</h2>
1025 <div class="row">
1026   <div class="col-xs-4">
1027     <label for="input-@jumbotron-padding">@jumbotron-padding</label>
1028     <input id="input-@jumbotron-padding" type="text" value="30px" data-var="@jumbotron-padding" class="form-control"/>
1029   </div>
1030   <div class="col-xs-4">
1031     <label for="input-@jumbotron-color">@jumbotron-color</label>
1032     <input id="input-@jumbotron-color" type="text" value="inherit" data-var="@jumbotron-color" class="form-control"/>
1033   </div>
1034   <div class="col-xs-4">
1035     <label for="input-@jumbotron-bg">@jumbotron-bg</label>
1036     <input id="input-@jumbotron-bg" type="text" value="@gray-lighter" data-var="@jumbotron-bg" class="form-control"/>
1037   </div>
1038   <div class="clearfix"></div>
1039   <div class="col-xs-4">
1040     <label for="input-@jumbotron-heading-color">@jumbotron-heading-color</label>
1041     <input id="input-@jumbotron-heading-color" type="text" value="inherit" data-var="@jumbotron-heading-color" class="form-control"/>
1042   </div>
1043   <div class="col-xs-4">
1044     <label for="input-@jumbotron-font-size">@jumbotron-font-size</label>
1045     <input id="input-@jumbotron-font-size" type="text" value="ceil((@font-size-base * 1.5))" data-var="@jumbotron-font-size" class="form-control"/>
1046   </div>
1047 </div>
1048 <h2 id="form-states-and-alerts">Form states and alerts</h2>
1049 <p>Define colors for form feedback states and, by default, alerts.</p>
1050 <div class="row">
1051   <div class="col-xs-4">
1052     <label for="input-@state-success-text">@state-success-text</label>
1053     <input id="input-@state-success-text" type="text" value="#3c763d" data-var="@state-success-text" class="form-control"/>
1054   </div>
1055   <div class="col-xs-4">
1056     <label for="input-@state-success-bg">@state-success-bg</label>
1057     <input id="input-@state-success-bg" type="text" value="#dff0d8" data-var="@state-success-bg" class="form-control"/>
1058   </div>
1059   <div class="col-xs-4">
1060     <label for="input-@state-success-border">@state-success-border</label>
1061     <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control"/>
1062   </div>
1063   <div class="clearfix"></div>
1064   <div class="col-xs-4">
1065     <label for="input-@state-info-text">@state-info-text</label>
1066     <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control"/>
1067   </div>
1068   <div class="col-xs-4">
1069     <label for="input-@state-info-bg">@state-info-bg</label>
1070     <input id="input-@state-info-bg" type="text" value="#d9edf7" data-var="@state-info-bg" class="form-control"/>
1071   </div>
1072   <div class="col-xs-4">
1073     <label for="input-@state-info-border">@state-info-border</label>
1074     <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control"/>
1075   </div>
1076   <div class="clearfix"></div>
1077   <div class="col-xs-4">
1078     <label for="input-@state-warning-text">@state-warning-text</label>
1079     <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control"/>
1080   </div>
1081   <div class="col-xs-4">
1082     <label for="input-@state-warning-bg">@state-warning-bg</label>
1083     <input id="input-@state-warning-bg" type="text" value="#fcf8e3" data-var="@state-warning-bg" class="form-control"/>
1084   </div>
1085   <div class="col-xs-4">
1086     <label for="input-@state-warning-border">@state-warning-border</label>
1087     <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control"/>
1088   </div>
1089   <div class="clearfix"></div>
1090   <div class="col-xs-4">
1091     <label for="input-@state-danger-text">@state-danger-text</label>
1092     <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control"/>
1093   </div>
1094   <div class="col-xs-4">
1095     <label for="input-@state-danger-bg">@state-danger-bg</label>
1096     <input id="input-@state-danger-bg" type="text" value="#f2dede" data-var="@state-danger-bg" class="form-control"/>
1097   </div>
1098   <div class="col-xs-4">
1099     <label for="input-@state-danger-border">@state-danger-border</label>
1100     <input id="input-@state-danger-border" type="text" value="darken(spin(@state-danger-bg, -10), 5%)" data-var="@state-danger-border" class="form-control"/>
1101   </div>
1102 </div>
1103 <h2 id="tooltips">Tooltips</h2>
1104 <div class="row">
1105   <div class="col-xs-4">
1106     <label for="input-@tooltip-max-width">@tooltip-max-width</label>
1107     <input id="input-@tooltip-max-width" type="text" aria-describedby="help-block-@tooltip-max-width" value="200px" data-var="@tooltip-max-width" class="form-control"/>
1108     <p id="help-block-@tooltip-max-width" class="help-block">Tooltip max width</p>
1109   </div>
1110   <div class="col-xs-4">
1111     <label for="input-@tooltip-color">@tooltip-color</label>
1112     <input id="input-@tooltip-color" type="text" aria-describedby="help-block-@tooltip-color" value="#fff" data-var="@tooltip-color" class="form-control"/>
1113     <p id="help-block-@tooltip-color" class="help-block">Tooltip text color</p>
1114   </div>
1115   <div class="col-xs-4">
1116     <label for="input-@tooltip-bg">@tooltip-bg</label>
1117     <input id="input-@tooltip-bg" type="text" aria-describedby="help-block-@tooltip-bg" value="#000" data-var="@tooltip-bg" class="form-control"/>
1118     <p id="help-block-@tooltip-bg" class="help-block">Tooltip background color</p>
1119   </div>
1120   <div class="clearfix"></div>
1121   <div class="col-xs-4">
1122     <label for="input-@tooltip-opacity">@tooltip-opacity</label>
1123     <input id="input-@tooltip-opacity" type="text" value=".9" data-var="@tooltip-opacity" class="form-control"/>
1124   </div>
1125   <div class="col-xs-4">
1126     <label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label>
1127     <input id="input-@tooltip-arrow-width" type="text" aria-describedby="help-block-@tooltip-arrow-width" value="5px" data-var="@tooltip-arrow-width" class="form-control"/>
1128     <p id="help-block-@tooltip-arrow-width" class="help-block">Tooltip arrow width</p>
1129   </div>
1130   <div class="col-xs-4">
1131     <label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label>
1132     <input id="input-@tooltip-arrow-color" type="text" aria-describedby="help-block-@tooltip-arrow-color" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control"/>
1133     <p id="help-block-@tooltip-arrow-color" class="help-block">Tooltip arrow color</p>
1134   </div>
1135 </div>
1136 <h2 id="popovers">Popovers</h2>
1137 <div class="row">
1138   <div class="col-xs-4">
1139     <label for="input-@popover-bg">@popover-bg</label>
1140     <input id="input-@popover-bg" type="text" aria-describedby="help-block-@popover-bg" value="#fff" data-var="@popover-bg" class="form-control"/>
1141     <p id="help-block-@popover-bg" class="help-block">Popover body background color</p>
1142   </div>
1143   <div class="col-xs-4">
1144     <label for="input-@popover-max-width">@popover-max-width</label>
1145     <input id="input-@popover-max-width" type="text" aria-describedby="help-block-@popover-max-width" value="276px" data-var="@popover-max-width" class="form-control"/>
1146     <p id="help-block-@popover-max-width" class="help-block">Popover maximum width</p>
1147   </div>
1148   <div class="col-xs-4">
1149     <label for="input-@popover-border-color">@popover-border-color</label>
1150     <input id="input-@popover-border-color" type="text" aria-describedby="help-block-@popover-border-color" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/>
1151     <p id="help-block-@popover-border-color" class="help-block">Popover border color</p>
1152   </div>
1153   <div class="clearfix"></div>
1154   <div class="col-xs-4">
1155     <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label>
1156     <input id="input-@popover-fallback-border-color" type="text" aria-describedby="help-block-@popover-fallback-border-color" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/>
1157     <p id="help-block-@popover-fallback-border-color" class="help-block">Popover fallback border color</p>
1158   </div>
1159   <div class="col-xs-4">
1160     <label for="input-@popover-title-bg">@popover-title-bg</label>
1161     <input id="input-@popover-title-bg" type="text" aria-describedby="help-block-@popover-title-bg" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control"/>
1162     <p id="help-block-@popover-title-bg" class="help-block">Popover title background color</p>
1163   </div>
1164   <div class="col-xs-4">
1165     <label for="input-@popover-arrow-width">@popover-arrow-width</label>
1166     <input id="input-@popover-arrow-width" type="text" aria-describedby="help-block-@popover-arrow-width" value="10px" data-var="@popover-arrow-width" class="form-control"/>
1167     <p id="help-block-@popover-arrow-width" class="help-block">Popover arrow width</p>
1168   </div>
1169   <div class="clearfix"></div>
1170   <div class="col-xs-4">
1171     <label for="input-@popover-arrow-color">@popover-arrow-color</label>
1172     <input id="input-@popover-arrow-color" type="text" aria-describedby="help-block-@popover-arrow-color" value="@popover-bg" data-var="@popover-arrow-color" class="form-control"/>
1173     <p id="help-block-@popover-arrow-color" class="help-block">Popover arrow color</p>
1174   </div>
1175   <div class="col-xs-4">
1176     <label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label>
1177     <input id="input-@popover-arrow-outer-width" type="text" aria-describedby="help-block-@popover-arrow-outer-width" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control"/>
1178     <p id="help-block-@popover-arrow-outer-width" class="help-block">Popover outer arrow width</p>
1179   </div>
1180   <div class="col-xs-4">
1181     <label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label>
1182     <input id="input-@popover-arrow-outer-color" type="text" aria-describedby="help-block-@popover-arrow-outer-color" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control"/>
1183     <p id="help-block-@popover-arrow-outer-color" class="help-block">Popover outer arrow color</p>
1184   </div>
1185   <div class="clearfix"></div>
1186   <div class="col-xs-4">
1187     <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label>
1188     <input id="input-@popover-arrow-outer-fallback-color" type="text" aria-describedby="help-block-@popover-arrow-outer-fallback-color" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control"/>
1189     <p id="help-block-@popover-arrow-outer-fallback-color" class="help-block">Popover outer arrow fallback color</p>
1190   </div>
1191 </div>
1192 <h2 id="labels">Labels</h2>
1193 <div class="row">
1194   <div class="col-xs-4">
1195     <label for="input-@label-default-bg">@label-default-bg</label>
1196     <input id="input-@label-default-bg" type="text" aria-describedby="help-block-@label-default-bg" value="@gray-light" data-var="@label-default-bg" class="form-control"/>
1197     <p id="help-block-@label-default-bg" class="help-block">Default label background color</p>
1198   </div>
1199   <div class="col-xs-4">
1200     <label for="input-@label-primary-bg">@label-primary-bg</label>
1201     <input id="input-@label-primary-bg" type="text" aria-describedby="help-block-@label-primary-bg" value="@brand-primary" data-var="@label-primary-bg" class="form-control"/>
1202     <p id="help-block-@label-primary-bg" class="help-block">Primary label background color</p>
1203   </div>
1204   <div class="col-xs-4">
1205     <label for="input-@label-success-bg">@label-success-bg</label>
1206     <input id="input-@label-success-bg" type="text" aria-describedby="help-block-@label-success-bg" value="@brand-success" data-var="@label-success-bg" class="form-control"/>
1207     <p id="help-block-@label-success-bg" class="help-block">Success label background color</p>
1208   </div>
1209   <div class="clearfix"></div>
1210   <div class="col-xs-4">
1211     <label for="input-@label-info-bg">@label-info-bg</label>
1212     <input id="input-@label-info-bg" type="text" aria-describedby="help-block-@label-info-bg" value="@brand-info" data-var="@label-info-bg" class="form-control"/>
1213     <p id="help-block-@label-info-bg" class="help-block">Info label background color</p>
1214   </div>
1215   <div class="col-xs-4">
1216     <label for="input-@label-warning-bg">@label-warning-bg</label>
1217     <input id="input-@label-warning-bg" type="text" aria-describedby="help-block-@label-warning-bg" value="@brand-warning" data-var="@label-warning-bg" class="form-control"/>
1218     <p id="help-block-@label-warning-bg" class="help-block">Warning label background color</p>
1219   </div>
1220   <div class="col-xs-4">
1221     <label for="input-@label-danger-bg">@label-danger-bg</label>
1222     <input id="input-@label-danger-bg" type="text" aria-describedby="help-block-@label-danger-bg" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/>
1223     <p id="help-block-@label-danger-bg" class="help-block">Danger label background color</p>
1224   </div>
1225   <div class="clearfix"></div>
1226   <div class="col-xs-4">
1227     <label for="input-@label-color">@label-color</label>
1228     <input id="input-@label-color" type="text" aria-describedby="help-block-@label-color" value="#fff" data-var="@label-color" class="form-control"/>
1229     <p id="help-block-@label-color" class="help-block">Default label text color</p>
1230   </div>
1231   <div class="col-xs-4">
1232     <label for="input-@label-link-hover-color">@label-link-hover-color</label>
1233     <input id="input-@label-link-hover-color" type="text" aria-describedby="help-block-@label-link-hover-color" value="#fff" data-var="@label-link-hover-color" class="form-control"/>
1234     <p id="help-block-@label-link-hover-color" class="help-block">Default text color of a linked label</p>
1235   </div>
1236 </div>
1237 <h2 id="modals">Modals</h2>
1238 <div class="row">
1239   <div class="col-xs-4">
1240     <label for="input-@modal-inner-padding">@modal-inner-padding</label>
1241     <input id="input-@modal-inner-padding" type="text" aria-describedby="help-block-@modal-inner-padding" value="15px" data-var="@modal-inner-padding" class="form-control"/>
1242     <p id="help-block-@modal-inner-padding" class="help-block">Padding applied to the modal body</p>
1243   </div>
1244   <div class="col-xs-4">
1245     <label for="input-@modal-title-padding">@modal-title-padding</label>
1246     <input id="input-@modal-title-padding" type="text" aria-describedby="help-block-@modal-title-padding" value="15px" data-var="@modal-title-padding" class="form-control"/>
1247     <p id="help-block-@modal-title-padding" class="help-block">Padding applied to the modal title</p>
1248   </div>
1249   <div class="col-xs-4">
1250     <label for="input-@modal-title-line-height">@modal-title-line-height</label>
1251     <input id="input-@modal-title-line-height" type="text" aria-describedby="help-block-@modal-title-line-height" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/>
1252     <p id="help-block-@modal-title-line-height" class="help-block">Modal title line-height</p>
1253   </div>
1254   <div class="clearfix"></div>
1255   <div class="col-xs-4">
1256     <label for="input-@modal-content-bg">@modal-content-bg</label>
1257     <input id="input-@modal-content-bg" type="text" aria-describedby="help-block-@modal-content-bg" value="#fff" data-var="@modal-content-bg" class="form-control"/>
1258     <p id="help-block-@modal-content-bg" class="help-block">Background color of modal content area</p>
1259   </div>
1260   <div class="col-xs-4">
1261     <label for="input-@modal-content-border-color">@modal-content-border-color</label>
1262     <input id="input-@modal-content-border-color" type="text" aria-describedby="help-block-@modal-content-border-color" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control"/>
1263     <p id="help-block-@modal-content-border-color" class="help-block">Modal content border color</p>
1264   </div>
1265   <div class="col-xs-4">
1266     <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
1267     <input id="input-@modal-content-fallback-border-color" type="text" aria-describedby="help-block-@modal-content-fallback-border-color" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/>
1268     <p id="help-block-@modal-content-fallback-border-color" class="help-block">Modal content border color <strong>for IE8</strong></p>
1269   </div>
1270   <div class="clearfix"></div>
1271   <div class="col-xs-4">
1272     <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
1273     <input id="input-@modal-backdrop-bg" type="text" aria-describedby="help-block-@modal-backdrop-bg" value="#000" data-var="@modal-backdrop-bg" class="form-control"/>
1274     <p id="help-block-@modal-backdrop-bg" class="help-block">Modal backdrop background color</p>
1275   </div>
1276   <div class="col-xs-4">
1277     <label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label>
1278     <input id="input-@modal-backdrop-opacity" type="text" aria-describedby="help-block-@modal-backdrop-opacity" value=".5" data-var="@modal-backdrop-opacity" class="form-control"/>
1279     <p id="help-block-@modal-backdrop-opacity" class="help-block">Modal backdrop opacity</p>
1280   </div>
1281   <div class="col-xs-4">
1282     <label for="input-@modal-header-border-color">@modal-header-border-color</label>
1283     <input id="input-@modal-header-border-color" type="text" aria-describedby="help-block-@modal-header-border-color" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/>
1284     <p id="help-block-@modal-header-border-color" class="help-block">Modal header border color</p>
1285   </div>
1286   <div class="clearfix"></div>
1287   <div class="col-xs-4">
1288     <label for="input-@modal-footer-border-color">@modal-footer-border-color</label>
1289     <input id="input-@modal-footer-border-color" type="text" aria-describedby="help-block-@modal-footer-border-color" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/>
1290     <p id="help-block-@modal-footer-border-color" class="help-block">Modal footer border color</p>
1291   </div>
1292   <div class="col-xs-4">
1293     <label for="input-@modal-lg">@modal-lg</label>
1294     <input id="input-@modal-lg" type="text" value="900px" data-var="@modal-lg" class="form-control"/>
1295   </div>
1296   <div class="col-xs-4">
1297     <label for="input-@modal-md">@modal-md</label>
1298     <input id="input-@modal-md" type="text" value="600px" data-var="@modal-md" class="form-control"/>
1299   </div>
1300   <div class="clearfix"></div>
1301   <div class="col-xs-4">
1302     <label for="input-@modal-sm">@modal-sm</label>
1303     <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control"/>
1304   </div>
1305 </div>
1306 <h2 id="alerts">Alerts</h2>
1307 <p>Define alert colors, border radius, and padding.</p>
1308 <div class="row">
1309   <div class="col-xs-4">
1310     <label for="input-@alert-padding">@alert-padding</label>
1311     <input id="input-@alert-padding" type="text" value="15px" data-var="@alert-padding" class="form-control"/>
1312   </div>
1313   <div class="col-xs-4">
1314     <label for="input-@alert-border-radius">@alert-border-radius</label>
1315     <input id="input-@alert-border-radius" type="text" value="@border-radius-base" data-var="@alert-border-radius" class="form-control"/>
1316   </div>
1317   <div class="col-xs-4">
1318     <label for="input-@alert-link-font-weight">@alert-link-font-weight</label>
1319     <input id="input-@alert-link-font-weight" type="text" value="bold" data-var="@alert-link-font-weight" class="form-control"/>
1320   </div>
1321   <div class="clearfix"></div>
1322   <div class="col-xs-4">
1323     <label for="input-@alert-success-bg">@alert-success-bg</label>
1324     <input id="input-@alert-success-bg" type="text" value="@state-success-bg" data-var="@alert-success-bg" class="form-control"/>
1325   </div>
1326   <div class="col-xs-4">
1327     <label for="input-@alert-success-text">@alert-success-text</label>
1328     <input id="input-@alert-success-text" type="text" value="@state-success-text" data-var="@alert-success-text" class="form-control"/>
1329   </div>
1330   <div class="col-xs-4">
1331     <label for="input-@alert-success-border">@alert-success-border</label>
1332     <input id="input-@alert-success-border" type="text" value="@state-success-border" data-var="@alert-success-border" class="form-control"/>
1333   </div>
1334   <div class="clearfix"></div>
1335   <div class="col-xs-4">
1336     <label for="input-@alert-info-bg">@alert-info-bg</label>
1337     <input id="input-@alert-info-bg" type="text" value="@state-info-bg" data-var="@alert-info-bg" class="form-control"/>
1338   </div>
1339   <div class="col-xs-4">
1340     <label for="input-@alert-info-text">@alert-info-text</label>
1341     <input id="input-@alert-info-text" type="text" value="@state-info-text" data-var="@alert-info-text" class="form-control"/>
1342   </div>
1343   <div class="col-xs-4">
1344     <label for="input-@alert-info-border">@alert-info-border</label>
1345     <input id="input-@alert-info-border" type="text" value="@state-info-border" data-var="@alert-info-border" class="form-control"/>
1346   </div>
1347   <div class="clearfix"></div>
1348   <div class="col-xs-4">
1349     <label for="input-@alert-warning-bg">@alert-warning-bg</label>
1350     <input id="input-@alert-warning-bg" type="text" value="@state-warning-bg" data-var="@alert-warning-bg" class="form-control"/>
1351   </div>
1352   <div class="col-xs-4">
1353     <label for="input-@alert-warning-text">@alert-warning-text</label>
1354     <input id="input-@alert-warning-text" type="text" value="@state-warning-text" data-var="@alert-warning-text" class="form-control"/>
1355   </div>
1356   <div class="col-xs-4">
1357     <label for="input-@alert-warning-border">@alert-warning-border</label>
1358     <input id="input-@alert-warning-border" type="text" value="@state-warning-border" data-var="@alert-warning-border" class="form-control"/>
1359   </div>
1360   <div class="clearfix"></div>
1361   <div class="col-xs-4">
1362     <label for="input-@alert-danger-bg">@alert-danger-bg</label>
1363     <input id="input-@alert-danger-bg" type="text" value="@state-danger-bg" data-var="@alert-danger-bg" class="form-control"/>
1364   </div>
1365   <div class="col-xs-4">
1366     <label for="input-@alert-danger-text">@alert-danger-text</label>
1367     <input id="input-@alert-danger-text" type="text" value="@state-danger-text" data-var="@alert-danger-text" class="form-control"/>
1368   </div>
1369   <div class="col-xs-4">
1370     <label for="input-@alert-danger-border">@alert-danger-border</label>
1371     <input id="input-@alert-danger-border" type="text" value="@state-danger-border" data-var="@alert-danger-border" class="form-control"/>
1372   </div>
1373 </div>
1374 <h2 id="progress-bars">Progress bars</h2>
1375 <div class="row">
1376   <div class="col-xs-4">
1377     <label for="input-@progress-bg">@progress-bg</label>
1378     <input id="input-@progress-bg" type="text" aria-describedby="help-block-@progress-bg" value="#f5f5f5" data-var="@progress-bg" class="form-control"/>
1379     <p id="help-block-@progress-bg" class="help-block">Background color of the whole progress component</p>
1380   </div>
1381   <div class="col-xs-4">
1382     <label for="input-@progress-bar-color">@progress-bar-color</label>
1383     <input id="input-@progress-bar-color" type="text" aria-describedby="help-block-@progress-bar-color" value="#fff" data-var="@progress-bar-color" class="form-control"/>
1384     <p id="help-block-@progress-bar-color" class="help-block">Progress bar text color</p>
1385   </div>
1386   <div class="col-xs-4">
1387     <label for="input-@progress-border-radius">@progress-border-radius</label>
1388     <input id="input-@progress-border-radius" type="text" aria-describedby="help-block-@progress-border-radius" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/>
1389     <p id="help-block-@progress-border-radius" class="help-block">Variable for setting rounded corners on progress bar.</p>
1390   </div>
1391   <div class="clearfix"></div>
1392   <div class="col-xs-4">
1393     <label for="input-@progress-bar-bg">@progress-bar-bg</label>
1394     <input id="input-@progress-bar-bg" type="text" aria-describedby="help-block-@progress-bar-bg" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/>
1395     <p id="help-block-@progress-bar-bg" class="help-block">Default progress bar color</p>
1396   </div>
1397   <div class="col-xs-4">
1398     <label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label>
1399     <input id="input-@progress-bar-success-bg" type="text" aria-describedby="help-block-@progress-bar-success-bg" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control"/>
1400     <p id="help-block-@progress-bar-success-bg" class="help-block">Success progress bar color</p>
1401   </div>
1402   <div class="col-xs-4">
1403     <label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label>
1404     <input id="input-@progress-bar-warning-bg" type="text" aria-describedby="help-block-@progress-bar-warning-bg" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/>
1405     <p id="help-block-@progress-bar-warning-bg" class="help-block">Warning progress bar color</p>
1406   </div>
1407   <div class="clearfix"></div>
1408   <div class="col-xs-4">
1409     <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label>
1410     <input id="input-@progress-bar-danger-bg" type="text" aria-describedby="help-block-@progress-bar-danger-bg" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/>
1411     <p id="help-block-@progress-bar-danger-bg" class="help-block">Danger progress bar color</p>
1412   </div>
1413   <div class="col-xs-4">
1414     <label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label>
1415     <input id="input-@progress-bar-info-bg" type="text" aria-describedby="help-block-@progress-bar-info-bg" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control"/>
1416     <p id="help-block-@progress-bar-info-bg" class="help-block">Info progress bar color</p>
1417   </div>
1418 </div>
1419 <h2 id="list-group">List group</h2>
1420 <div class="row">
1421   <div class="col-xs-4">
1422     <label for="input-@list-group-bg">@list-group-bg</label>
1423     <input id="input-@list-group-bg" type="text" aria-describedby="help-block-@list-group-bg" value="#fff" data-var="@list-group-bg" class="form-control"/>
1424     <p id="help-block-@list-group-bg" class="help-block">Background color on <code>.list-group-item</code></p>
1425   </div>
1426   <div class="col-xs-4">
1427     <label for="input-@list-group-border">@list-group-border</label>
1428     <input id="input-@list-group-border" type="text" aria-describedby="help-block-@list-group-border" value="#ddd" data-var="@list-group-border" class="form-control"/>
1429     <p id="help-block-@list-group-border" class="help-block"><code>.list-group-item</code> border color</p>
1430   </div>
1431   <div class="col-xs-4">
1432     <label for="input-@list-group-border-radius">@list-group-border-radius</label>
1433     <input id="input-@list-group-border-radius" type="text" aria-describedby="help-block-@list-group-border-radius" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/>
1434     <p id="help-block-@list-group-border-radius" class="help-block">List group border radius</p>
1435   </div>
1436   <div class="clearfix"></div>
1437   <div class="col-xs-4">
1438     <label for="input-@list-group-hover-bg">@list-group-hover-bg</label>
1439     <input id="input-@list-group-hover-bg" type="text" aria-describedby="help-block-@list-group-hover-bg" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/>
1440     <p id="help-block-@list-group-hover-bg" class="help-block">Background color of single list items on hover</p>
1441   </div>
1442   <div class="col-xs-4">
1443     <label for="input-@list-group-active-color">@list-group-active-color</label>
1444     <input id="input-@list-group-active-color" type="text" aria-describedby="help-block-@list-group-active-color" value="@component-active-color" data-var="@list-group-active-color" class="form-control"/>
1445     <p id="help-block-@list-group-active-color" class="help-block">Text color of active list items</p>
1446   </div>
1447   <div class="col-xs-4">
1448     <label for="input-@list-group-active-bg">@list-group-active-bg</label>
1449     <input id="input-@list-group-active-bg" type="text" aria-describedby="help-block-@list-group-active-bg" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/>
1450     <p id="help-block-@list-group-active-bg" class="help-block">Background color of active list items</p>
1451   </div>
1452   <div class="clearfix"></div>
1453   <div class="col-xs-4">
1454     <label for="input-@list-group-active-border">@list-group-active-border</label>
1455     <input id="input-@list-group-active-border" type="text" aria-describedby="help-block-@list-group-active-border" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/>
1456     <p id="help-block-@list-group-active-border" class="help-block">Border color of active list elements</p>
1457   </div>
1458   <div class="col-xs-4">
1459     <label for="input-@list-group-active-text-color">@list-group-active-text-color</label>
1460     <input id="input-@list-group-active-text-color" type="text" aria-describedby="help-block-@list-group-active-text-color" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control"/>
1461     <p id="help-block-@list-group-active-text-color" class="help-block">Text color for content within active list items</p>
1462   </div>
1463   <div class="col-xs-4">
1464     <label for="input-@list-group-disabled-color">@list-group-disabled-color</label>
1465     <input id="input-@list-group-disabled-color" type="text" aria-describedby="help-block-@list-group-disabled-color" value="@gray-light" data-var="@list-group-disabled-color" class="form-control"/>
1466     <p id="help-block-@list-group-disabled-color" class="help-block">Text color of disabled list items</p>
1467   </div>
1468   <div class="clearfix"></div>
1469   <div class="col-xs-4">
1470     <label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label>
1471     <input id="input-@list-group-disabled-bg" type="text" aria-describedby="help-block-@list-group-disabled-bg" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control"/>
1472     <p id="help-block-@list-group-disabled-bg" class="help-block">Background color of disabled list items</p>
1473   </div>
1474   <div class="col-xs-4">
1475     <label for="input-@list-group-disabled-text-color">@list-group-disabled-text-color</label>
1476     <input id="input-@list-group-disabled-text-color" type="text" aria-describedby="help-block-@list-group-disabled-text-color" value="@list-group-disabled-color" data-var="@list-group-disabled-text-color" class="form-control"/>
1477     <p id="help-block-@list-group-disabled-text-color" class="help-block">Text color for content within disabled list items</p>
1478   </div>
1479   <div class="col-xs-4">
1480     <label for="input-@list-group-link-color">@list-group-link-color</label>
1481     <input id="input-@list-group-link-color" type="text" value="#555" data-var="@list-group-link-color" class="form-control"/>
1482   </div>
1483   <div class="clearfix"></div>
1484   <div class="col-xs-4">
1485     <label for="input-@list-group-link-hover-color">@list-group-link-hover-color</label>
1486     <input id="input-@list-group-link-hover-color" type="text" value="@list-group-link-color" data-var="@list-group-link-hover-color" class="form-control"/>
1487   </div>
1488   <div class="col-xs-4">
1489     <label for="input-@list-group-link-heading-color">@list-group-link-heading-color</label>
1490     <input id="input-@list-group-link-heading-color" type="text" value="#333" data-var="@list-group-link-heading-color" class="form-control"/>
1491   </div>
1492 </div>
1493 <h2 id="panels">Panels</h2>
1494 <div class="row">
1495   <div class="col-xs-4">
1496     <label for="input-@panel-bg">@panel-bg</label>
1497     <input id="input-@panel-bg" type="text" value="#fff" data-var="@panel-bg" class="form-control"/>
1498   </div>
1499   <div class="col-xs-4">
1500     <label for="input-@panel-body-padding">@panel-body-padding</label>
1501     <input id="input-@panel-body-padding" type="text" value="15px" data-var="@panel-body-padding" class="form-control"/>
1502   </div>
1503   <div class="col-xs-4">
1504     <label for="input-@panel-heading-padding">@panel-heading-padding</label>
1505     <input id="input-@panel-heading-padding" type="text" value="10px 15px" data-var="@panel-heading-padding" class="form-control"/>
1506   </div>
1507   <div class="clearfix"></div>
1508   <div class="col-xs-4">
1509     <label for="input-@panel-footer-padding">@panel-footer-padding</label>
1510     <input id="input-@panel-footer-padding" type="text" value="@panel-heading-padding" data-var="@panel-footer-padding" class="form-control"/>
1511   </div>
1512   <div class="col-xs-4">
1513     <label for="input-@panel-border-radius">@panel-border-radius</label>
1514     <input id="input-@panel-border-radius" type="text" value="@border-radius-base" data-var="@panel-border-radius" class="form-control"/>
1515   </div>
1516   <div class="col-xs-4">
1517     <label for="input-@panel-inner-border">@panel-inner-border</label>
1518     <input id="input-@panel-inner-border" type="text" aria-describedby="help-block-@panel-inner-border" value="#ddd" data-var="@panel-inner-border" class="form-control"/>
1519     <p id="help-block-@panel-inner-border" class="help-block">Border color for elements within panels</p>
1520   </div>
1521   <div class="clearfix"></div>
1522   <div class="col-xs-4">
1523     <label for="input-@panel-footer-bg">@panel-footer-bg</label>
1524     <input id="input-@panel-footer-bg" type="text" value="#f5f5f5" data-var="@panel-footer-bg" class="form-control"/>
1525   </div>
1526   <div class="col-xs-4">
1527     <label for="input-@panel-default-text">@panel-default-text</label>
1528     <input id="input-@panel-default-text" type="text" value="@gray-dark" data-var="@panel-default-text" class="form-control"/>
1529   </div>
1530   <div class="col-xs-4">
1531     <label for="input-@panel-default-border">@panel-default-border</label>
1532     <input id="input-@panel-default-border" type="text" value="#ddd" data-var="@panel-default-border" class="form-control"/>
1533   </div>
1534   <div class="clearfix"></div>
1535   <div class="col-xs-4">
1536     <label for="input-@panel-default-heading-bg">@panel-default-heading-bg</label>
1537     <input id="input-@panel-default-heading-bg" type="text" value="#f5f5f5" data-var="@panel-default-heading-bg" class="form-control"/>
1538   </div>
1539   <div class="col-xs-4">
1540     <label for="input-@panel-primary-text">@panel-primary-text</label>
1541     <input id="input-@panel-primary-text" type="text" value="#fff" data-var="@panel-primary-text" class="form-control"/>
1542   </div>
1543   <div class="col-xs-4">
1544     <label for="input-@panel-primary-border">@panel-primary-border</label>
1545     <input id="input-@panel-primary-border" type="text" value="@brand-primary" data-var="@panel-primary-border" class="form-control"/>
1546   </div>
1547   <div class="clearfix"></div>
1548   <div class="col-xs-4">
1549     <label for="input-@panel-primary-heading-bg">@panel-primary-heading-bg</label>
1550     <input id="input-@panel-primary-heading-bg" type="text" value="@brand-primary" data-var="@panel-primary-heading-bg" class="form-control"/>
1551   </div>
1552   <div class="col-xs-4">
1553     <label for="input-@panel-success-text">@panel-success-text</label>
1554     <input id="input-@panel-success-text" type="text" value="@state-success-text" data-var="@panel-success-text" class="form-control"/>
1555   </div>
1556   <div class="col-xs-4">
1557     <label for="input-@panel-success-border">@panel-success-border</label>
1558     <input id="input-@panel-success-border" type="text" value="@state-success-border" data-var="@panel-success-border" class="form-control"/>
1559   </div>
1560   <div class="clearfix"></div>
1561   <div class="col-xs-4">
1562     <label for="input-@panel-success-heading-bg">@panel-success-heading-bg</label>
1563     <input id="input-@panel-success-heading-bg" type="text" value="@state-success-bg" data-var="@panel-success-heading-bg" class="form-control"/>
1564   </div>
1565   <div class="col-xs-4">
1566     <label for="input-@panel-info-text">@panel-info-text</label>
1567     <input id="input-@panel-info-text" type="text" value="@state-info-text" data-var="@panel-info-text" class="form-control"/>
1568   </div>
1569   <div class="col-xs-4">
1570     <label for="input-@panel-info-border">@panel-info-border</label>
1571     <input id="input-@panel-info-border" type="text" value="@state-info-border" data-var="@panel-info-border" class="form-control"/>
1572   </div>
1573   <div class="clearfix"></div>
1574   <div class="col-xs-4">
1575     <label for="input-@panel-info-heading-bg">@panel-info-heading-bg</label>
1576     <input id="input-@panel-info-heading-bg" type="text" value="@state-info-bg" data-var="@panel-info-heading-bg" class="form-control"/>
1577   </div>
1578   <div class="col-xs-4">
1579     <label for="input-@panel-warning-text">@panel-warning-text</label>
1580     <input id="input-@panel-warning-text" type="text" value="@state-warning-text" data-var="@panel-warning-text" class="form-control"/>
1581   </div>
1582   <div class="col-xs-4">
1583     <label for="input-@panel-warning-border">@panel-warning-border</label>
1584     <input id="input-@panel-warning-border" type="text" value="@state-warning-border" data-var="@panel-warning-border" class="form-control"/>
1585   </div>
1586   <div class="clearfix"></div>
1587   <div class="col-xs-4">
1588     <label for="input-@panel-warning-heading-bg">@panel-warning-heading-bg</label>
1589     <input id="input-@panel-warning-heading-bg" type="text" value="@state-warning-bg" data-var="@panel-warning-heading-bg" class="form-control"/>
1590   </div>
1591   <div class="col-xs-4">
1592     <label for="input-@panel-danger-text">@panel-danger-text</label>
1593     <input id="input-@panel-danger-text" type="text" value="@state-danger-text" data-var="@panel-danger-text" class="form-control"/>
1594   </div>
1595   <div class="col-xs-4">
1596     <label for="input-@panel-danger-border">@panel-danger-border</label>
1597     <input id="input-@panel-danger-border" type="text" value="@state-danger-border" data-var="@panel-danger-border" class="form-control"/>
1598   </div>
1599   <div class="clearfix"></div>
1600   <div class="col-xs-4">
1601     <label for="input-@panel-danger-heading-bg">@panel-danger-heading-bg</label>
1602     <input id="input-@panel-danger-heading-bg" type="text" value="@state-danger-bg" data-var="@panel-danger-heading-bg" class="form-control"/>
1603   </div>
1604 </div>
1605 <h2 id="thumbnails">Thumbnails</h2>
1606 <div class="row">
1607   <div class="col-xs-4">
1608     <label for="input-@thumbnail-padding">@thumbnail-padding</label>
1609     <input id="input-@thumbnail-padding" type="text" aria-describedby="help-block-@thumbnail-padding" value="4px" data-var="@thumbnail-padding" class="form-control"/>
1610     <p id="help-block-@thumbnail-padding" class="help-block">Padding around the thumbnail image</p>
1611   </div>
1612   <div class="col-xs-4">
1613     <label for="input-@thumbnail-bg">@thumbnail-bg</label>
1614     <input id="input-@thumbnail-bg" type="text" aria-describedby="help-block-@thumbnail-bg" value="@body-bg" data-var="@thumbnail-bg" class="form-control"/>
1615     <p id="help-block-@thumbnail-bg" class="help-block">Thumbnail background color</p>
1616   </div>
1617   <div class="col-xs-4">
1618     <label for="input-@thumbnail-border">@thumbnail-border</label>
1619     <input id="input-@thumbnail-border" type="text" aria-describedby="help-block-@thumbnail-border" value="#ddd" data-var="@thumbnail-border" class="form-control"/>
1620     <p id="help-block-@thumbnail-border" class="help-block">Thumbnail border color</p>
1621   </div>
1622   <div class="clearfix"></div>
1623   <div class="col-xs-4">
1624     <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label>
1625     <input id="input-@thumbnail-border-radius" type="text" aria-describedby="help-block-@thumbnail-border-radius" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/>
1626     <p id="help-block-@thumbnail-border-radius" class="help-block">Thumbnail border radius</p>
1627   </div>
1628   <div class="col-xs-4">
1629     <label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label>
1630     <input id="input-@thumbnail-caption-color" type="text" aria-describedby="help-block-@thumbnail-caption-color" value="@text-color" data-var="@thumbnail-caption-color" class="form-control"/>
1631     <p id="help-block-@thumbnail-caption-color" class="help-block">Custom text color for thumbnail captions</p>
1632   </div>
1633   <div class="col-xs-4">
1634     <label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label>
1635     <input id="input-@thumbnail-caption-padding" type="text" aria-describedby="help-block-@thumbnail-caption-padding" value="9px" data-var="@thumbnail-caption-padding" class="form-control"/>
1636     <p id="help-block-@thumbnail-caption-padding" class="help-block">Padding around the thumbnail caption</p>
1637   </div>
1638 </div>
1639 <h2 id="wells">Wells</h2>
1640 <div class="row">
1641   <div class="col-xs-4">
1642     <label for="input-@well-bg">@well-bg</label>
1643     <input id="input-@well-bg" type="text" value="#f5f5f5" data-var="@well-bg" class="form-control"/>
1644   </div>
1645   <div class="col-xs-4">
1646     <label for="input-@well-border">@well-border</label>
1647     <input id="input-@well-border" type="text" value="darken(@well-bg, 7%)" data-var="@well-border" class="form-control"/>
1648   </div>
1649 </div>
1650 <h2 id="badges">Badges</h2>
1651 <div class="row">
1652   <div class="col-xs-4">
1653     <label for="input-@badge-color">@badge-color</label>
1654     <input id="input-@badge-color" type="text" value="#fff" data-var="@badge-color" class="form-control"/>
1655   </div>
1656   <div class="col-xs-4">
1657     <label for="input-@badge-link-hover-color">@badge-link-hover-color</label>
1658     <input id="input-@badge-link-hover-color" type="text" aria-describedby="help-block-@badge-link-hover-color" value="#fff" data-var="@badge-link-hover-color" class="form-control"/>
1659     <p id="help-block-@badge-link-hover-color" class="help-block">Linked badge text color on hover</p>
1660   </div>
1661   <div class="col-xs-4">
1662     <label for="input-@badge-bg">@badge-bg</label>
1663     <input id="input-@badge-bg" type="text" value="@gray-light" data-var="@badge-bg" class="form-control"/>
1664   </div>
1665   <div class="clearfix"></div>
1666   <div class="col-xs-4">
1667     <label for="input-@badge-active-color">@badge-active-color</label>
1668     <input id="input-@badge-active-color" type="text" aria-describedby="help-block-@badge-active-color" value="@link-color" data-var="@badge-active-color" class="form-control"/>
1669     <p id="help-block-@badge-active-color" class="help-block">Badge text color in active nav link</p>
1670   </div>
1671   <div class="col-xs-4">
1672     <label for="input-@badge-active-bg">@badge-active-bg</label>
1673     <input id="input-@badge-active-bg" type="text" aria-describedby="help-block-@badge-active-bg" value="#fff" data-var="@badge-active-bg" class="form-control"/>
1674     <p id="help-block-@badge-active-bg" class="help-block">Badge background color in active nav link</p>
1675   </div>
1676   <div class="col-xs-4">
1677     <label for="input-@badge-font-weight">@badge-font-weight</label>
1678     <input id="input-@badge-font-weight" type="text" value="bold" data-var="@badge-font-weight" class="form-control"/>
1679   </div>
1680   <div class="clearfix"></div>
1681   <div class="col-xs-4">
1682     <label for="input-@badge-line-height">@badge-line-height</label>
1683     <input id="input-@badge-line-height" type="text" value="1" data-var="@badge-line-height" class="form-control"/>
1684   </div>
1685   <div class="col-xs-4">
1686     <label for="input-@badge-border-radius">@badge-border-radius</label>
1687     <input id="input-@badge-border-radius" type="text" value="10px" data-var="@badge-border-radius" class="form-control"/>
1688   </div>
1689 </div>
1690 <h2 id="breadcrumbs">Breadcrumbs</h2>
1691 <div class="row">
1692   <div class="col-xs-4">
1693     <label for="input-@breadcrumb-padding-vertical">@breadcrumb-padding-vertical</label>
1694     <input id="input-@breadcrumb-padding-vertical" type="text" value="8px" data-var="@breadcrumb-padding-vertical" class="form-control"/>
1695   </div>
1696   <div class="col-xs-4">
1697     <label for="input-@breadcrumb-padding-horizontal">@breadcrumb-padding-horizontal</label>
1698     <input id="input-@breadcrumb-padding-horizontal" type="text" value="15px" data-var="@breadcrumb-padding-horizontal" class="form-control"/>
1699   </div>
1700   <div class="col-xs-4">
1701     <label for="input-@breadcrumb-bg">@breadcrumb-bg</label>
1702     <input id="input-@breadcrumb-bg" type="text" aria-describedby="help-block-@breadcrumb-bg" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/>
1703     <p id="help-block-@breadcrumb-bg" class="help-block">Breadcrumb background color</p>
1704   </div>
1705   <div class="clearfix"></div>
1706   <div class="col-xs-4">
1707     <label for="input-@breadcrumb-color">@breadcrumb-color</label>
1708     <input id="input-@breadcrumb-color" type="text" aria-describedby="help-block-@breadcrumb-color" value="#ccc" data-var="@breadcrumb-color" class="form-control"/>
1709     <p id="help-block-@breadcrumb-color" class="help-block">Breadcrumb text color</p>
1710   </div>
1711   <div class="col-xs-4">
1712     <label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label>
1713     <input id="input-@breadcrumb-active-color" type="text" aria-describedby="help-block-@breadcrumb-active-color" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control"/>
1714     <p id="help-block-@breadcrumb-active-color" class="help-block">Text color of current page in the breadcrumb</p>
1715   </div>
1716   <div class="col-xs-4">
1717     <label for="input-@breadcrumb-separator">@breadcrumb-separator</label>
1718     <input id="input-@breadcrumb-separator" type="text" aria-describedby="help-block-@breadcrumb-separator" value="&quot;/&quot;" data-var="@breadcrumb-separator" class="form-control"/>
1719     <p id="help-block-@breadcrumb-separator" class="help-block">Textual separator for between breadcrumb elements</p>
1720   </div>
1721 </div>
1722 <h2 id="carousel">Carousel</h2>
1723 <div class="row">
1724   <div class="col-xs-4">
1725     <label for="input-@carousel-text-shadow">@carousel-text-shadow</label>
1726     <input id="input-@carousel-text-shadow" type="text" value="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow" class="form-control"/>
1727   </div>
1728   <div class="col-xs-4">
1729     <label for="input-@carousel-control-color">@carousel-control-color</label>
1730     <input id="input-@carousel-control-color" type="text" value="#fff" data-var="@carousel-control-color" class="form-control"/>
1731   </div>
1732   <div class="col-xs-4">
1733     <label for="input-@carousel-control-width">@carousel-control-width</label>
1734     <input id="input-@carousel-control-width" type="text" value="15%" data-var="@carousel-control-width" class="form-control"/>
1735   </div>
1736   <div class="clearfix"></div>
1737   <div class="col-xs-4">
1738     <label for="input-@carousel-control-opacity">@carousel-control-opacity</label>
1739     <input id="input-@carousel-control-opacity" type="text" value=".5" data-var="@carousel-control-opacity" class="form-control"/>
1740   </div>
1741   <div class="col-xs-4">
1742     <label for="input-@carousel-control-font-size">@carousel-control-font-size</label>
1743     <input id="input-@carousel-control-font-size" type="text" value="20px" data-var="@carousel-control-font-size" class="form-control"/>
1744   </div>
1745   <div class="col-xs-4">
1746     <label for="input-@carousel-indicator-active-bg">@carousel-indicator-active-bg</label>
1747     <input id="input-@carousel-indicator-active-bg" type="text" value="#fff" data-var="@carousel-indicator-active-bg" class="form-control"/>
1748   </div>
1749   <div class="clearfix"></div>
1750   <div class="col-xs-4">
1751     <label for="input-@carousel-indicator-border-color">@carousel-indicator-border-color</label>
1752     <input id="input-@carousel-indicator-border-color" type="text" value="#fff" data-var="@carousel-indicator-border-color" class="form-control"/>
1753   </div>
1754   <div class="col-xs-4">
1755     <label for="input-@carousel-caption-color">@carousel-caption-color</label>
1756     <input id="input-@carousel-caption-color" type="text" value="#fff" data-var="@carousel-caption-color" class="form-control"/>
1757   </div>
1758 </div>
1759 <h2 id="close">Close</h2>
1760 <div class="row">
1761   <div class="col-xs-4">
1762     <label for="input-@close-font-weight">@close-font-weight</label>
1763     <input id="input-@close-font-weight" type="text" value="bold" data-var="@close-font-weight" class="form-control"/>
1764   </div>
1765   <div class="col-xs-4">
1766     <label for="input-@close-color">@close-color</label>
1767     <input id="input-@close-color" type="text" value="#000" data-var="@close-color" class="form-control"/>
1768   </div>
1769   <div class="col-xs-4">
1770     <label for="input-@close-text-shadow">@close-text-shadow</label>
1771     <input id="input-@close-text-shadow" type="text" value="0 1px 0 #fff" data-var="@close-text-shadow" class="form-control"/>
1772   </div>
1773 </div>
1774 <h2 id="code">Code</h2>
1775 <div class="row">
1776   <div class="col-xs-4">
1777     <label for="input-@code-color">@code-color</label>
1778     <input id="input-@code-color" type="text" value="#c7254e" data-var="@code-color" class="form-control"/>
1779   </div>
1780   <div class="col-xs-4">
1781     <label for="input-@code-bg">@code-bg</label>
1782     <input id="input-@code-bg" type="text" value="#f9f2f4" data-var="@code-bg" class="form-control"/>
1783   </div>
1784   <div class="col-xs-4">
1785     <label for="input-@kbd-color">@kbd-color</label>
1786     <input id="input-@kbd-color" type="text" value="#fff" data-var="@kbd-color" class="form-control"/>
1787   </div>
1788   <div class="clearfix"></div>
1789   <div class="col-xs-4">
1790     <label for="input-@kbd-bg">@kbd-bg</label>
1791     <input id="input-@kbd-bg" type="text" value="#333" data-var="@kbd-bg" class="form-control"/>
1792   </div>
1793   <div class="col-xs-4">
1794     <label for="input-@pre-bg">@pre-bg</label>
1795     <input id="input-@pre-bg" type="text" value="#f5f5f5" data-var="@pre-bg" class="form-control"/>
1796   </div>
1797   <div class="col-xs-4">
1798     <label for="input-@pre-color">@pre-color</label>
1799     <input id="input-@pre-color" type="text" value="@gray-dark" data-var="@pre-color" class="form-control"/>
1800   </div>
1801   <div class="clearfix"></div>
1802   <div class="col-xs-4">
1803     <label for="input-@pre-border-color">@pre-border-color</label>
1804     <input id="input-@pre-border-color" type="text" value="#ccc" data-var="@pre-border-color" class="form-control"/>
1805   </div>
1806   <div class="col-xs-4">
1807     <label for="input-@pre-scrollable-max-height">@pre-scrollable-max-height</label>
1808     <input id="input-@pre-scrollable-max-height" type="text" value="340px" data-var="@pre-scrollable-max-height" class="form-control"/>
1809   </div>
1810 </div>
1811 <h2 id="type">Type</h2>
1812 <div class="row">
1813   <div class="col-xs-4">
1814     <label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
1815     <input id="input-@component-offset-horizontal" type="text" aria-describedby="help-block-@component-offset-horizontal" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
1816     <p id="help-block-@component-offset-horizontal" class="help-block">Horizontal offset for forms and lists.</p>
1817   </div>
1818   <div class="col-xs-4">
1819     <label for="input-@text-muted">@text-muted</label>
1820     <input id="input-@text-muted" type="text" aria-describedby="help-block-@text-muted" value="@gray-light" data-var="@text-muted" class="form-control"/>
1821     <p id="help-block-@text-muted" class="help-block">Text muted color</p>
1822   </div>
1823   <div class="col-xs-4">
1824     <label for="input-@abbr-border-color">@abbr-border-color</label>
1825     <input id="input-@abbr-border-color" type="text" aria-describedby="help-block-@abbr-border-color" value="@gray-light" data-var="@abbr-border-color" class="form-control"/>
1826     <p id="help-block-@abbr-border-color" class="help-block">Abbreviations and acronyms border color</p>
1827   </div>
1828   <div class="clearfix"></div>
1829   <div class="col-xs-4">
1830     <label for="input-@headings-small-color">@headings-small-color</label>
1831     <input id="input-@headings-small-color" type="text" aria-describedby="help-block-@headings-small-color" value="@gray-light" data-var="@headings-small-color" class="form-control"/>
1832     <p id="help-block-@headings-small-color" class="help-block">Headings small color</p>
1833   </div>
1834   <div class="col-xs-4">
1835     <label for="input-@blockquote-small-color">@blockquote-small-color</label>
1836     <input id="input-@blockquote-small-color" type="text" aria-describedby="help-block-@blockquote-small-color" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/>
1837     <p id="help-block-@blockquote-small-color" class="help-block">Blockquote small color</p>
1838   </div>
1839   <div class="col-xs-4">
1840     <label for="input-@blockquote-font-size">@blockquote-font-size</label>
1841     <input id="input-@blockquote-font-size" type="text" aria-describedby="help-block-@blockquote-font-size" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/>
1842     <p id="help-block-@blockquote-font-size" class="help-block">Blockquote font size</p>
1843   </div>
1844   <div class="clearfix"></div>
1845   <div class="col-xs-4">
1846     <label for="input-@blockquote-border-color">@blockquote-border-color</label>
1847     <input id="input-@blockquote-border-color" type="text" aria-describedby="help-block-@blockquote-border-color" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/>
1848     <p id="help-block-@blockquote-border-color" class="help-block">Blockquote border color</p>
1849   </div>
1850   <div class="col-xs-4">
1851     <label for="input-@page-header-border-color">@page-header-border-color</label>
1852     <input id="input-@page-header-border-color" type="text" aria-describedby="help-block-@page-header-border-color" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/>
1853     <p id="help-block-@page-header-border-color" class="help-block">Page header border color</p>
1854   </div>
1855   <div class="col-xs-4">
1856     <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
1857     <input id="input-@dl-horizontal-offset" type="text" aria-describedby="help-block-@dl-horizontal-offset" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/>
1858     <p id="help-block-@dl-horizontal-offset" class="help-block">Width of horizontal description list titles</p>
1859   </div>
1860   <div class="clearfix"></div>
1861   <div class="col-xs-4">
1862     <label for="input-@hr-border">@hr-border</label>
1863     <input id="input-@hr-border" type="text" aria-describedby="help-block-@hr-border" value="@gray-lighter" data-var="@hr-border" class="form-control"/>
1864     <p id="help-block-@hr-border" class="help-block">Horizontal line color.</p>
1865   </div>
1866 </div>
1867 <!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->