app/addons/styletests/templates/theme.html

<!--
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.
-->
<div class="container theme-showcase">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Fauxton Style Guide <small>mostly made of Bootstrap 2.x</small></h1>
    <p>(Mostly) Standard Bootstrap styles customized for Fauxton.</p>
  </div>

  <div class="page-header">
    <h1>Typography</h1>
  </div>
  <h1>h1. Heading 1</h1>
  <h2>h2. Heading 2</h2>
  <h3>h3. Heading 3</h3>
  <h4>h4. Heading 4</h4>
  <h5>h5. Heading 5</h5>
  <h6>h6. Heading 6</h6>

  <div class="page-header">
    <h1>Buttons</h1>
  </div>

  <h4>Bootstrap Standard Button class names</h4>
  <p>.btn.btn-large.btn-*<br />
    <button type="button" class="btn btn-large btn-default">Default</button>
    <button type="button" class="btn btn-large btn-primary">Primary</button>
    <button type="button" class="btn btn-large btn-success">Success</button>
    <button type="button" class="btn btn-large btn-info">Info</button>
    <button type="button" class="btn btn-large btn-warning">Warning</button>
    <button type="button" class="btn btn-large btn-danger">Danger</button>
    <button type="button" class="btn btn-large btn-link">Link</button>
  </p>
  <p>.btn.btn-*<br />
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
  </p>
  <p>.btn.btn-small.btn-*<br />
    <button type="button" class="btn btn-small btn-default">Default</button>
    <button type="button" class="btn btn-small btn-primary">Primary</button>
    <button type="button" class="btn btn-small btn-success">Success</button>
    <button type="button" class="btn btn-small btn-info">Info</button>
    <button type="button" class="btn btn-small btn-warning">Warning</button>
    <button type="button" class="btn btn-small btn-danger">Danger</button>
    <button type="button" class="btn btn-small btn-link">Link</button>
  </p>
  <p>.btn.btn-mini.btn-*<br />
    <button type="button" class="btn btn-mini btn-default">Default</button>
    <button type="button" class="btn btn-mini btn-primary">Primary</button>
    <button type="button" class="btn btn-mini btn-success">Success</button>
    <button type="button" class="btn btn-mini btn-info">Info</button>
    <button type="button" class="btn btn-mini btn-warning">Warning</button>
    <button type="button" class="btn btn-mini btn-danger">Danger</button>
    <button type="button" class="btn btn-mini btn-link">Link</button>
  </p>

  <h4>with Icons</h4>
  <p>.btn.btn-large.btn-*<br />
    <button type="button" class="btn btn-large btn-default"><i class="icon fonticon-new-database"></i> Default</button>
    <button type="button" class="btn btn-large btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
    <button type="button" class="btn btn-large btn-success"><i class="icon fonticon-new-database"></i> Success</button>
    <button type="button" class="btn btn-large btn-info"><i class="icon fonticon-new-database"></i> Info</button>
    <button type="button" class="btn btn-large btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
    <button type="button" class="btn btn-large btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
    <button type="button" class="btn btn-large btn-link"><i class="icon fonticon-new-database"></i> Link</button>
  </p>

  <p>.btn.btn-*<br />
    <button type="button" class="btn btn-default"><i class="icon fonticon-new-database"></i> Default</button>
    <button type="button" class="btn btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
    <button type="button" class="btn btn-success"><i class="icon fonticon-new-database"></i> Success</button>
    <button type="button" class="btn btn-info"><i class="icon fonticon-new-database"></i> Info</button>
    <button type="button" class="btn btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
    <button type="button" class="btn btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
    <button type="button" class="btn btn-link"><i class="icon fonticon-new-database"></i> Link</button>
  </p>
  <p>.btn.btn-small.btn-*<br />
    <button type="button" class="btn btn-small btn-default"><i class="icon fonticon-new-database"></i> Default</button>
    <button type="button" class="btn btn-small btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
    <button type="button" class="btn btn-small btn-success"><i class="icon fonticon-new-database"></i> Success</button>
    <button type="button" class="btn btn-small btn-info"><i class="icon fonticon-new-database"></i> Info</button>
    <button type="button" class="btn btn-small btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
    <button type="button" class="btn btn-small btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
    <button type="button" class="btn btn-small btn-link"><i class="icon fonticon-new-database"></i> Link</button>
  </p>
  <p>.btn.btn-mini.btn-*<br />
    <button type="button" class="btn btn-mini btn-default"><i class="icon fonticon-new-database"></i> Default</button>
    <button type="button" class="btn btn-mini btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
    <button type="button" class="btn btn-mini btn-success"><i class="icon fonticon-new-database"></i> Success</button>
    <button type="button" class="btn btn-mini btn-info"><i class="icon fonticon-new-database"></i> Info</button>
    <button type="button" class="btn btn-mini btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
    <button type="button" class="btn btn-mini btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
    <button type="button" class="btn btn-mini btn-link"><i class="icon fonticon-new-database"></i> Link</button>
  </p>

  <h4>just Icons</h4>
  <p>.btn.btn-large.btn-*<br />
    <button type="button" class="btn btn-large btn-default"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-large btn-primary"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-large btn-success"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-large btn-info"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-large btn-warning"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-large btn-danger"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-large btn-link"><i class="icon fonticon-new-database"></i></button>
  </p>

  <p>.btn.btn-*<br />
    <button type="button" class="btn btn-default"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-primary"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-success"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-info"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-warning"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-danger"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-link"><i class="icon fonticon-new-database"></i></button>
  </p>
  <p>.btn.btn-small.btn-*<br />
    <button type="button" class="btn btn-small btn-default"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-small btn-primary"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-small btn-success"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-small btn-info"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-small btn-warning"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-small btn-danger"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-small btn-link"><i class="icon fonticon-new-database"></i></button>
  </p>
  <p>.btn.btn-mini.btn-*<br />
    <button type="button" class="btn btn-mini btn-default"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-mini btn-primary"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-mini btn-success"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-mini btn-info"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-mini btn-warning"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-mini btn-danger"><i class="icon fonticon-new-database"></i></button>
    <button type="button" class="btn btn-mini btn-link"><i class="icon fonticon-new-database"></i></button>
  </p>
  <p>.btn-group<br />
    <div class="btn-group">
      <a href="#" class="btn btn-small edits">Edit design doc</a>
      <button href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></button>
    </div>
  </p>

  <h4>disabled</h4>
  <p>.btn.btn-*<br />
    <button type="button" disabled="disabled" class="btn btn-default"><i class="icon fonticon-new-database"></i> Default</button>
    <button type="button" disabled="disabled" class="btn btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
    <button type="button" disabled="disabled" class="btn btn-success"><i class="icon fonticon-new-database"></i> Success</button>
    <button type="button" disabled="disabled" class="btn btn-info"><i class="icon fonticon-new-database"></i> Info</button>
    <button type="button" disabled="disabled" class="btn btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
    <button type="button" disabled="disabled" class="btn btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
    <button type="button" disabled="disabled" class="btn btn-link"><i class="icon fonticon-new-database"></i> Link</button>
  </p>
  <p>.btn.btn-*<br />
    <button type="button" disabled="disabled" class="btn btn-default">Default</button>
    <button type="button" disabled="disabled" class="btn btn-primary">Primary</button>
    <button type="button" disabled="disabled" class="btn btn-success">Success</button>
    <button type="button" disabled="disabled" class="btn btn-info">Info</button>
    <button type="button" disabled="disabled" class="btn btn-warning">Warning</button>
    <button type="button" disabled="disabled" class="btn btn-danger">Danger</button>
    <button type="button" disabled="disabled" class="btn btn-link">Link</button>
  </p>

  <div class="page-header">
    <h1>Forms</h1>
  </div>

  <form class="navbar-form database-search">
    <div class="input-append">
      <input class="search-autocomplete" name="search-query" autocomplete="off" placeholder="Database name" type="text">
      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
    </div>
  </form>

  <form class="navbar-form database-search">
    <div class="input-append">
      <input class="search-autocomplete" name="search-query" autocomplete="off" placeholder="Database name" type="text">
      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i> Search</button>
    </div>
  </form>

  <form class="navbar-form">
    <div class="input-append">
      <input name="search-query" placeholder="Database name" type="text">
      <button class="btn btn-primary" type="submit">Search</button>
    </div>
  </form>

  <form>
    <fieldset>
      <legend>Legend</legend>
      <label>Label name</label>
      <input type="text" placeholder="Type something…">
      <span class="help-block">Example block-level help text here.</span>
      <label class="checkbox">
        <input type="checkbox"> Check me out
      </label>
      <button type="submit" class="btn">Submit</button>
    </fieldset>
  </form>

  <p>Search</p>
  <form class="form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
  </form>

  <p>Sign in</p>
  <form class="form-inline">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
    <label class="checkbox">
      <input type="checkbox"> Remember me
    </label>
    <button type="submit" class="btn">Sign in</button>
  </form>

  <p>Whole form</p>
  <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
  </form>

  <p>Selects</p>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
   
  <select multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>

  <p>Inputs with pre</p>
  <div class="input-prepend">
    <span class="add-on">@</span>
    <input class="span2" id="prependedInput" type="text" placeholder="Username">
  </div>
  <p>Inputs with post</p>
  <div class="input-append">
    <input class="span2" id="appendedInput" type="text">
    <span class="add-on">.00</span>
  </div>
  <p>Inputs with pre and post</p>
  <div class="input-prepend input-append">
    <span class="add-on">$</span>
    <input class="span2" id="appendedPrependedInput" type="text">
    <span class="add-on">.00</span>
  </div>
  <p>Inputs with button</p>
<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>
  <p>Inputs with two buttons</p>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>
<p>Inputs with dropdown button</p>
<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>
<p>Inputs sizes</p>
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">


  <div class="page-header">
    <h1>Thumbnails</h1>
  </div>
<img src="https://dl.dropboxusercontent.com/u/44146427/ripley.jpeg" class="img-rounded">
<img src="https://dl.dropboxusercontent.com/u/44146427/ripley.jpeg" class="img-circle">
<img src="https://dl.dropboxusercontent.com/u/44146427/ripley.jpeg" class="img-polaroid">


  <div class="page-header">
    <h1>Dropdown menus</h1>
  </div>
  <div class="dropdown theme-dropdown clearfix">
    <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>




  <div class="page-header">
    <h1>Navbars</h1>
  </div>

  <div class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/">Default</a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li class="active"><a href="./">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

  <div class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/">Default</a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li class="active"><a href="./">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>



  <div class="page-header">
    <h1>Alerts</h1>
  </div>
  <div class="alert alert-success">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
  <div class="alert alert-info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
  </div>
  <div class="alert alert-danger">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
  </div>



  <div class="page-header">
    <h1>Progresss</h1>
  </div>
  <div class="progress">
    <div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
  </div>
  <div class="progress">
    <div class="bar bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
  </div>
  <div class="progress">
    <div class="bar bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
  </div>
  <div class="progress">
    <div class="bar bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
  </div>
  <div class="progress">
    <div class="bar bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
  </div>
  <div class="progress">
    <div class="bar bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
    <div class="bar bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
    <div class="bar bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
  </div>



  <div class="page-header">
    <h1>List groups</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <ul class="nav nav-tabs nav-stacked">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-4">
      <div class="nav nav-tabs nav-stacked">
        <a href="#" class="list-group-item active">
          Cras justo odio
        </a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
      </div>
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-4">
      <div class="nav nav-tabs nav-stacked">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
      </div>
    </div><!-- /.col-sm-4 -->
  </div>

  <div class="page-header">
    <h1>Wells</h1>
  </div>
  <div class="well">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
  </div>


</div> <!-- /container -->