RubyGems - patternfly-sass - Versions diffs - 3.23.2 → 3.31.1 - Mend

patternfly-sass 3.23.2 → 3.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

data/spec/html/forms.html DELETED Viewed

@@ -1,875 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
-<!--[if gt IE 9]><!-->
-<html lang="en-us">
-<!--<![endif]-->
-  <head>
-    <title>Forms - PatternFly</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../../dist/img/favicon.ico">
-    <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
-    <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
-    <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
-    <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
-    <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
-    <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
-    <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
-      <link href="tests.css" rel="stylesheet" media="screen, print">
-    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Forms</h1>
-      </div>
-      <div class="alert alert-warning">
-        <span class="pficon pficon-warning-triangle-o"></span>
-        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
-      </div>
-      <hr>
-      <h2>Right-aligned labels</h2>
-      <h3>Basic Form</h3>
-      <form class="form-horizontal" role="form">
-        <div class="form-group">
-          <label for="inputEmail1" class="col-sm-2 control-label">Email</label>
-          <div class="col-sm-10">
-            <input type="email" class="form-control" id="inputEmail1">
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="inputPassword1" class="col-sm-2 control-label">Password</label>
-          <div class="col-sm-10">
-            <input type="password" class="form-control" id="inputPassword1">
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <div class="checkbox">
-              <label>
-                <input type="checkbox"> Remember me
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button type="submit" class="btn btn-default">Sign in</button>
-          </div>
-        </div>
-      </form>
-      <h3>All Fields Required</h3>
-      <form class="form-horizontal" role="form">
-        <p class="fields-status-pf">All fields are required.</p>
-        <div class="form-group">
-          <label for="input1" class="col-sm-2 control-label">Field One</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input1" required>
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="input2" class="col-sm-2 control-label">Field Two</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input2" required>
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="input3" class="col-sm-2 control-label">Field Three</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input3" required>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button type="submit" class="btn btn-default" disabled>Action</button>
-          </div>
-        </div>
-      </form>
-      <h3>Required and Optional Fields</h3>
-      <form class="form-horizontal" role="form">
-        <p class="fields-status-pf">The fields marked with <span class="required-pf">*</span> are required.</p>
-        <div class="form-group">
-          <label for="input4" class="col-sm-2 control-label required-pf">Field One</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input4" required>
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="input5" class="col-sm-2 control-label">Field Two</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input5">
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="input6" class="col-sm-2 control-label required-pf">Field Three</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input6" required>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button type="submit" class="btn btn-default" disabled>Action</button>
-          </div>
-        </div>
-      </form>
-      <h3>All Fields Optional</h3>
-      <form class="form-horizontal" role="form">
-        <p class="fields-status-pf">All fields are optional.</p>
-        <div class="form-group">
-          <label for="input7" class="col-sm-2 control-label">Field One</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input7">
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="input8" class="col-sm-2 control-label">Field Two</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input8">
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="input9" class="col-sm-2 control-label">Field Three</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" id="input9">
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button type="submit" class="btn btn-default">Action</button>
-          </div>
-        </div>
-      </form>
-      <h3>Error Feedback</h3>
-      <div class="alert alert-danger">
-  <span class="pficon pficon-error-circle-o"></span>
-  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
-</div>
-<form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-2 control-label" for="exampleInput">Default</label>
-    <div class="col-sm-10">
-      <input type="text" id="exampleInput" class="form-control">
-    </div>
-  </div>
-  <div class="form-group">
-    <label class="col-sm-2 control-label" for="exampleInputDisabled">Disabled</label>
-    <div class="col-sm-10">
-      <input type="text" id="exampleInputDisabled" class="form-control" disabled></div>
-  </div>
-  <div class="form-group has-error">
-    <label class="col-sm-2 control-label" for="exampleInputError">With error</label>
-    <div class="col-sm-10">
-      <input type="text" id="exampleInputError" class="form-control">
-      <span class="help-block">Please correct the error</span>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button type="submit" class="btn btn-primary">Primary Action</button>
-      <button type="submit" class="btn btn-default">Secondary Action</button>
-    </div>
-  </div>
-</form>
-      <h2>Top-aligned labels</h2>
-      <h3>Basic Form</h3>
-      <form role="form">
-        <div class="form-group">
-          <label for="exampleInputEmail1">Email address</label>
-          <input type="email" class="form-control" id="exampleInputEmail1">
-        </div>
-        <div class="form-group">
-          <label for="exampleInputPassword1">Password</label>
-          <input type="password" class="form-control" id="exampleInputPassword1">
-        </div>
-        <div class="form-group">
-          <label for="exampleInputFile">File input</label>
-          <input type="file" id="exampleInputFile">
-          <p class="help-block">Example block-level help text here.</p>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox"> Check me out
-          </label>
-        </div>
-        <button type="submit" class="btn btn-default">Submit</button>
-      </form>
-      <h3>All Fields Required</h3>
-      <form role="form">
-        <p class="fields-status-pf">All fields are required.</p>
-        <div class="form-group">
-          <label for="input10">Field One</label>
-          <input type="text" class="form-control" id="input10" required>
-        </div>
-        <div class="form-group">
-          <label for="input11">Field Two</label>
-          <input type="text" class="form-control" id="input11" required>
-        </div>
-        <div class="form-group">
-          <label for="input12">Field Three</label>
-          <input type="text" class="form-control" id="input12" required>
-        </div>
-        <button type="submit" class="btn btn-default" disabled>Action</button>
-      </form>
-      <h3>Required and Optional Fields</h3>
-      <form role="form">
-        <p class="fields-status-pf">The fields marked with <span class="required-pf">*</span> are required.</p>
-        <div class="form-group">
-          <label for="input13" class="required-pf">Field One</label>
-          <input type="text" class="form-control" id="input13" required>
-        </div>
-        <div class="form-group">
-          <label for="input14">Field Two</label>
-          <input type="text" class="form-control" id="input14">
-        </div>
-        <div class="form-group">
-          <label for="input15" class="required-pf">Field Three</label>
-          <input type="text" class="form-control" id="input15" required>
-        </div>
-        <button type="submit" class="btn btn-default" disabled>Action</button>
-      </form>
-      <h3>All Fields Optional</h3>
-      <form role="form">
-        <p class="fields-status-pf">All fields are optional.</p>
-        <div class="form-group">
-          <label for="input16">Field One</label>
-          <input type="text" class="form-control" id="input16">
-        </div>
-        <div class="form-group">
-          <label for="input17">Field Two</label>
-          <input type="text" class="form-control" id="input17">
-        </div>
-        <div class="form-group">
-          <label for="input18">Field Three</label>
-          <input type="text" class="form-control" id="input18">
-        </div>
-        <button type="submit" class="btn btn-default">Action</button>
-      </form>
-      <h2>Inline Form</h2>
-      <form class="form-inline" role="form">
-        <div class="form-group">
-          <label class="sr-only" for="exampleInputEmail2">Email address</label>
-          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
-        </div>
-        <div class="form-group">
-          <label class="sr-only" for="exampleInputPassword2">Password</label>
-          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox"> Remember me
-          </label>
-        </div>
-        <button type="submit" class="btn btn-default">Sign in</button>
-      </form>
-      <h2>Inside a modal</h2>
-      <!--
-        Styles and example-pf div makes modal visible and posistion relative. It's intended for docs page.
-        *Do not use in production*
-      -->
-      <style>
-        .example-pf .modal{
-          position: relative;
-          top: auto;
-          right: auto;
-          bottom: auto;
-          left: auto;
-          z-index: 1;
-          display: block;
-        }
-      </style>
-      <div class="example-pf">
-<div class="modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        <div class="alert alert-danger">
-  <span class="pficon pficon-error-circle-o"></span>
-  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
-</div>
-        <form class="form-horizontal">
-          <div class="form-group">
-            <label class="col-sm-2 control-label" for="modalInput">Default</label>
-            <div class="col-sm-10">
-              <input type="text" id="modalInput" class="form-control"></div>
-          </div>
-          <div class="form-group">
-            <label class="col-sm-2 control-label" for="modalInputDisabled">Disabled</label>
-            <div class="col-sm-10">
-              <input type="text" id="modalInputDisabled" class="form-control" disabled></div>
-          </div>
-          <div class="form-group has-error">
-            <label class="col-sm-2 control-label" for="modalInputError">With error</label>
-            <div class="col-sm-10">
-              <input type="text" id="modalInputError" class="form-control">
-              <span class="help-block">Please correct the error</span>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-      </div>
-      <h2>Expand-Collapse Section</h2>
-      <div class="example-pf">
-        <form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-2 control-label" for="AdvOptBlueprintName">Blueprint Name</label>
-    <div class="col-sm-10">
-      <input type="text" id="AdvOptBlueprintName" class="form-control">
-    </div>
-  </div>
-  <div class="form-group">
-    <label class="col-sm-2 control-label" for="AdvOptCatalog">Catalog</label>
-    <div class="col-sm-10">
-      <input type="text" id="AdvOptCatalog" class="form-control"></div>
-  </div>
-  <div class="form-group">
-    <label class="col-sm-2 control-label" for="AdvOptNumber">Number</label>
-    <div class="col-sm-10">
-      <input type="text" id="AdvOptNumber" class="form-control"></div>
-  </div>
-  <fieldset class="fields-section-pf" id="AdvOptSection">
-    <legend class="fields-section-header-pf">
-      <span class="fa fa-angle-right fa-angle-down field-section-toggle-pf"></span>
-      <a href="#AdvOptSection" class="field-section-toggle-pf">Advanced Options</a>
-    </legend>
-    <div class="form-group">
-      <label class="col-sm-2 control-label" for="AdvOptEntry1">Entry Point 1</label>
-      <div class="col-sm-10">
-        <input type="text" id="AdvOptEntry1" class="form-control"></div>
-    </div>
-    <div class="form-group">
-      <label class="col-sm-2 control-label" for="AdvOptEntry2">Entry Point 2</label>
-      <div class="col-sm-10">
-        <input type="text" id="AdvOptEntry2" class="form-control"></div>
-    </div>
-    <div class="form-group">
-      <label class="col-sm-2 control-label" for="AdvOptEntry3">Entry Point 3</label>
-      <div class="col-sm-10">
-        <input type="text" id="AdvOptEntry3" class="form-control"></div>
-    </div>
-  </fieldset>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button type="submit" class="btn btn-primary">Save</button>
-      <button type="submit" class="btn btn-default">Cancel</button>
-    </div>
-  </div>
-</form>
-<script>
-  // Initialize form
-  $(document).ready(function() {
-    // set default state to collapsed for expandable field section
-    $('.fields-section-header-pf').attr('aria-expanded', 'false');
-    $('.fields-section-pf .form-group').addClass('hidden');
-    $('.fa.field-section-toggle-pf').removeClass('fa-angle-down');
-    // click the field section heading to expand the section
-    $("#AdvOptSection .field-section-toggle-pf").click(function(event){
-      $(this).parents(".fields-section-pf").find(".fa").toggleClass("fa-angle-down");
-      $(this).parents(".fields-section-pf").find(".form-group").toggleClass("hidden");
-      if ($(this).parent().attr('aria-expanded') == 'false') {
-        $(this).parent().attr('aria-expanded', 'true');
-      } else {
-        $(this).parent().attr('aria-expanded', 'false');
-      }
-    })
-  });
-</script>
-      </div>
-      <h2>Expand-Collapse Section inside a modal</h2>
-      <button class="btn btn-default" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
-      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
-                <span class="pficon pficon-close"></span>
-              </button>
-              <h4 class="modal-title" id="myModalLabel">Edit Blueprint Details</h4>
-            </div>
-            <div class="modal-body">
-              <div class="example-pf">
-                <form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-3 control-label" for="AdvOptBlueprintNameMod">Blueprint Name</label>
-    <div class="col-sm-9">
-      <input type="text" id="AdvOptBlueprintNameMod" class="form-control">
-    </div>
-  </div>
-  <div class="form-group">
-    <label class="col-sm-3 control-label" for="AdvOptCatalogMod">Catalog</label>
-    <div class="col-sm-9">
-      <input type="text" id="AdvOptCatalogMod" class="form-control"></div>
-  </div>
-  <div class="form-group">
-    <label class="col-sm-3 control-label" for="AdvOptNumberMod">Number</label>
-    <div class="col-sm-9">
-      <input type="text" id="AdvOptNumberMod" class="form-control"></div>
-  </div>
-  <fieldset class="fields-section-pf" id="AdvOptSectionMod">
-    <legend class="fields-section-header-pf">
-      <span class="fa fa-angle-right fa-angle-down field-section-toggle-pf"></span>
-      <a href="#AdvOptSectionMod" class="field-section-toggle-pf">Advanced Options</a>
-    </legend>
-    <div class="form-group">
-      <label class="col-sm-3 control-label" for="AdvOptEntry1Mod">Entry Point 1</label>
-      <div class="col-sm-9">
-        <input type="text" id="AdvOptEntry1Mod" class="form-control"></div>
-    </div>
-    <div class="form-group">
-      <label class="col-sm-3 control-label" for="AdvOptEntry2Mod">Entry Point 2</label>
-      <div class="col-sm-9">
-        <input type="text" id="AdvOptEntry2Mod" class="form-control"></div>
-    </div>
-    <div class="form-group">
-      <label class="col-sm-3 control-label" for="AdvOptEntry3Mod">Entry Point 3</label>
-      <div class="col-sm-9">
-        <input type="text" id="AdvOptEntry3Mod" class="form-control"></div>
-    </div>
-  </fieldset>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-    <button type="button" class="btn btn-primary">Save</button>
-  </div>
-</form>
-<script>
-  // Initialize form
-  $(document).ready(function() {
-    // set default state to collapsed for expandable field section
-    $('.fields-section-header-pf').attr('aria-expanded', 'false');
-    $('.fields-section-pf .form-group').addClass('hidden');
-    $('.fa.field-section-toggle-pf').removeClass('fa-angle-down');
-    // click the field section heading to expand the section
-    $("#AdvOptSectionMod .field-section-toggle-pf").click(function(event){
-      $(this).parents(".fields-section-pf").find(".fa").toggleClass("fa-angle-down");
-      $(this).parents(".fields-section-pf").find(".form-group").toggleClass("hidden");
-      if ($(this).parent().attr('aria-expanded') == 'false') {
-        $(this).parent().attr('aria-expanded', 'true');
-      } else {
-        $(this).parent().attr('aria-expanded', 'false');
-      }
-    })
-  });
-</script>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <h2>Controls</h2>
-      <input type="text" class="form-control" placeholder="Text input">
-      <input type="password" class="form-control" placeholder="Text input">
-      <input type="datetime" class="form-control" placeholder="Text input">
-      <input type="datetime-local" class="form-control" placeholder="Text input">
-      <input type="date" class="form-control" placeholder="Text input">
-      <input type="month" class="form-control" placeholder="Text input">
-      <input type="time" class="form-control" placeholder="Text input">
-      <input type="week" class="form-control" placeholder="Text input">
-      <input type="number" class="form-control" placeholder="Text input">
-      <input type="email" class="form-control" placeholder="Text input">
-      <input type="url" class="form-control" placeholder="Text input">
-      <input type="search" class="form-control" placeholder="Text input">
-      <input type="tel" class="form-control" placeholder="Text input">
-      <input type="color" class="form-control" placeholder="Text input">
-      <textarea class="form-control" rows="3"></textarea>
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" value="">
-          Option one is this and that&mdash;be sure to include why it's great
-        </label>
-      </div>
-      <div class="radio">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-          Option one is this and that&mdash;be sure to include why it's great
-        </label>
-      </div>
-      <div class="radio">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-          Option two can be something else and selecting it will deselect option one
-        </label>
-      </div>
-      <label class="checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-      </label>
-      <select class="form-control">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
-      </select>
-      <select multiple class="form-control">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
-      </select>
-      <h3>Count Remaining Characters Control</h3>
-      <form>
-        <div class="form-group">
-          <label for="messageArea"></label>
-          <textarea class="form-control" id="messageArea" name="text" placeholder="Type in your message" rows="5"></textarea>
-        </div>
-          <span class="pull-right chars-remaining-pf">
-            <span id="charRemainingCntFld"></span>
-            <button id="postBtn" type="submit" class="btn btn-default">Post New Message</button>
-          </span>
-      </form>
-      <script>
-        // countFld is the id of the field where you want the 'remaining chars. count' number
-        // to be displayed.
-        $('#messageArea').countRemainingChars( {countFld: 'charRemainingCntFld'} );
-        // all settings/options
-        // $('#messageArea').countRemainingChars( {countFld: 'charRemainingCntFld',
-        //                                         charsMaxLimit: 20,
-        //                                         charsWarnRemaining: 5,
-        //                                         blockInputAtMaxLimit: true} );
-        // taId is the id of the textArea field which triggered the event
-        // Helpful if counting remaining chars on multiple TAs
-        $('#messageArea').on("overCharsMaxLimitEvent", function( event, taId ) {
-          $('#postBtn').prop("disabled",true);
-        });
-        $('#messageArea').on("underCharsMaxLimitEvent", function( event, taId) {
-          $('#postBtn').prop("disabled",false);
-        });
-      </script><br>
-      <h3>Static Control</h3>
-      <form class="form-horizontal" role="form">
-        <div class="form-group">
-          <label class="col-lg-2 control-label">Email</label>
-          <div class="col-lg-10">
-            <p class="form-control-static">email@example.com</p>
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="inputPassword" class="col-lg-2 control-label">Password</label>
-          <div class="col-lg-10">
-            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
-          </div>
-        </div>
-      </form>
-      <h3>Help Text</h3>
-      <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-      <div class="input-group">
-        <span class="input-group-addon">@</span>
-        <input type="text" class="form-control" placeholder="Username">
-      </div>
-      <h3>Control Sizing</h3>
-      <input class="form-control input-lg" type="text" placeholder=".input-lg">
-      <input class="form-control" type="text" placeholder="Default input">
-      <input class="form-control input-sm" type="text" placeholder=".input-sm">
-      <select class="form-control input-lg">...</select>
-      <select class="form-control">...</select>
-      <select class="form-control input-sm">...</select>
-      <div class="row">
-        <div class="col-lg-2">
-          <input type="text" class="form-control" placeholder=".col-lg-2">
-        </div>
-        <div class="col-lg-3">
-          <input type="text" class="form-control" placeholder=".col-lg-3">
-        </div>
-        <div class="col-lg-4">
-          <input type="text" class="form-control" placeholder=".col-lg-4">
-        </div>
-      </div>
-      <h2>Input Groups</h2>
-      <h3>Basic Example</h3>
-      <div class="input-group">
-        <input type="text" class="form-control">
-        <span class="input-group-addon">.00</span>
-      </div>
-      <div class="input-group">
-        <span class="input-group-addon">$</span>
-        <input type="text" class="form-control">
-        <span class="input-group-addon">.00</span>
-      </div>
-      <h3>Sizing</h3>
-      <div class="input-group input-group-lg">
-        <span class="input-group-addon">@</span>
-        <input type="text" class="form-control input-lg" placeholder="Username">
-      </div>
-      <div class="input-group">
-        <span class="input-group-addon">@</span>
-        <input type="text" class="form-control" placeholder="Username">
-      </div>
-      <div class="input-group input-group-sm">
-        <span class="input-group-addon">@</span>
-        <input type="text" class="form-control" placeholder="Username">
-      </div>
-      <h3>Checkboxes and radio addons</h3>
-      <div class="row">
-        <div class="col-lg-6">
-          <div class="input-group">
-            <span class="input-group-addon">
-              <input type="checkbox">
-            </span>
-            <input type="text" class="form-control">
-          </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-        <div class="col-lg-6">
-          <div class="input-group">
-            <span class="input-group-addon">
-              <input type="radio">
-            </span>
-            <input type="text" class="form-control">
-          </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-      </div><!-- /.row -->
-      <h3>Button addons</h3>
-      <div class="row">
-        <div class="col-lg-6">
-          <div class="input-group">
-            <span class="input-group-btn">
-              <button class="btn btn-default" type="button">Go!</button>
-            </span>
-            <input type="text" class="form-control">
-          </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-        <div class="col-lg-6">
-          <div class="input-group">
-            <input type="text" class="form-control">
-            <span class="input-group-btn">
-              <button class="btn btn-default" type="button">Go!</button>
-            </span>
-          </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-      </div><!-- /.row -->
-      <h3>Buttons with dropdowns</h3>
-      <div class="row">
-        <div class="col-lg-6">
-          <div class="input-group">
-            <div class="input-group-btn">
-              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
-            </div><!-- /btn-group -->
-            <input type="text" class="form-control">
-          </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-        <div class="col-lg-6">
-          <div class="input-group">
-            <input type="text" class="form-control">
-            <div class="input-group-btn">
-              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-              <ul class="dropdown-menu pull-right">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
-            </div><!-- /btn-group -->
-          </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-      </div><!-- /.row -->
-      <h3>Segmented buttons</h3>
-      <form class="bs-example bs-example-form" role="form">
-        <div class="row">
-          <div class="col-lg-6">
-            <div class="input-group">
-              <div class="input-group-btn">
-                <button type="button" class="btn btn-default" tabindex="-1">Action</button>
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-                  <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu" role="menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div>
-              <input type="text" class="form-control">
-            </div><!-- /.input-group -->
-          </div><!-- /.col-lg-6 -->
-          <div class="col-lg-6">
-            <div class="input-group">
-              <input type="text" class="form-control">
-              <div class="input-group-btn">
-                <button type="button" class="btn btn-default" tabindex="-1">Action</button>
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-                  <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu pull-right" role="menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div>
-            </div><!-- /.input-group -->
-          </div><!-- /.col-lg-6 -->
-        </div><!-- /.row -->
-      </form>
-      <h2>Form States</h2>
-      <input class="form-control" id="focusedInput" type="text" value="This is focused...">
-      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-      <form class="form-inline" role="form">
-        <fieldset disabled>
-          <div class="form-group">
-            <label for="disabledTextInput">Disabled input</label>
-            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
-          </div>
-          <div class="form-group">
-            <label for="disabledSelect">Disabled select menu</label>
-            <select id="disabledSelect" class="form-control">
-              <option>Disabled select</option>
-            </select>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input type="checkbox"> Can't check this
-            </label>
-          </div>
-          <button type="submit" class="btn btn-primary">Submit</button>
-        </fieldset>
-      </form>
-      <div class="form-group has-success">
-        <label class="control-label" for="inputSuccess">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess">
-      </div>
-      <div class="form-group has-success">
-        <label class="control-label" for="selectSuccess">Select with success</label>
-        <select class="form-control" id="selectSuccess">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-      </div>
-      <div class="form-group has-warning">
-        <label class="control-label" for="inputWarning">Input with warning</label>
-        <input type="text" class="form-control" id="inputWarning">
-      </div>
-      <div class="form-group has-warning">
-        <label class="control-label" for="selectWarning">Select with warning</label>
-        <select class="form-control" id="selectWarning">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-      </div>
-      <div class="form-group has-error">
-        <label class="control-label" for="inputError">Input with error</label>
-        <input type="text" class="form-control" id="inputError2">
-      </div>
-      <div class="form-group has-error">
-        <label class="control-label" for="selectError">Select with error</label>
-        <select class="form-control" id="selectError">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-      </div>
-    </div><!-- /container -->
-  </body>
-</html>