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/popovers.html DELETED Viewed

@@ -1,115 +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>Popovers - 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>Popovers</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>
-      <p>Note: To display the close (X) icon in popovers, add data attribute <strong>data-close="true"</strong> to the trigger button element.</p>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on right with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Popover on right with title and close button</a>
-      </div>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Popover on right with close button</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on right with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Popover on right with title</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Popover on right</a>
-      </div>
-      <hr>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="left">Popover on left with title and close button</a>
-      </div>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="left">Popover on left with close button</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="left">Popover on left with title</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="left">Popover on left</a>
-      </div>
-      <hr>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="top">Popover on top with title and close button</a>
-      </div>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="top">Popover on top with close button</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on top with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="top">Popover on top with title</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about dataa smartproxy." data-placement="top">Popover on top</a>
-      </div>
-      <hr>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="bottom">Popover on bottom with title and close button</a>
-      </div>
-      <div class="bs-example" style="margin-top: 40px;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="bottom">Popover on bottom with close button</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on bottom with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="bottom">Popover on bottom with title</a>
-      </div>
-      <div class="bs-example" style="margin: 40px 0;">
-        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="bottom">Popover on bottom</a>
-      </div>
-      <hr>
-      <form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-3 control-label" for="fieldlevelhelp">Default <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="fa fa-info-circle"></span></a></label>
-    <div class="col-sm-9">
-      <input type="text" id="fieldlevelhelp" class="form-control">
-    </div>
-  </div>
-</form>
-<script>
-  // Initialize Popovers
-  $(document).ready(function() {
-    $('[data-toggle=popover]').popovers()
-  });
-</script>
-    </div><!-- /container -->
-  </body>
-</html>

data/spec/html/progress-bars.html DELETED Viewed

@@ -1,335 +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>Progress Bars - 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>Progress Bars</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>Basic Example</h2>
-      <div class="progress">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-          <span class="sr-only">60% Complete</span>
-        </div>
-      </div>
-      <h2>With Label</h2>
-      <div class="progress">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-          <span>60% Complete</span>
-        </div>
-      </div>
-      <h2>Contextual Alternatives</h2>
-      <div class="progress">
-        <div class="progress-bar progress-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="progress-bar progress-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="progress-bar progress-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="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
-          <span class="sr-only">80% Complete</span>
-        </div>
-      </div>
-      <h2>Striped</h2>
-      <div class="progress progress-striped">
-        <div class="progress-bar progress-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 progress-striped">
-        <div class="progress-bar progress-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 progress-striped">
-        <div class="progress-bar progress-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 progress-striped">
-        <div class="progress-bar progress-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>
-      <h2>Animated</h2>
-      <div class="progress progress-striped active">
-        <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
-          <span class="sr-only">45% Complete</span>
-        </div>
-      </div>
-      <h2>Stacked</h2>
-      <div class="progress">
-        <div class="progress-bar progress-bar-success" style="width: 35%">
-          <span class="sr-only">35% Complete (success)</span>
-        </div>
-        <div class="progress-bar progress-bar-warning" style="width: 20%">
-          <span class="sr-only">20% Complete (warning)</span>
-        </div>
-        <div class="progress-bar progress-bar-danger" style="width: 10%">
-          <span class="sr-only">10% Complete (danger)</span>
-        </div>
-      </div>
-      <h2>PatternFly Examples</h2>
-      <h3>Sizes</h3>
-      <h4>Small</h4>
-      <div class="progress progress-sm">
-        <div class="progress-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 progress-sm progress-striped active">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-          <span class="sr-only">60% Complete</span>
-        </div>
-      </div>
-      <h4>Extra Small</h4>
-      <div class="progress progress-xs">
-        <div class="progress-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 progress-xs progress-striped active">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-          <span class="sr-only">60% Complete</span>
-        </div>
-      </div>
-      <h3>With Label</h3>
-      <h4>Left</h4>
-      <div class="progress progress-label-left">
-        <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-          <span>5%</span>
-        </div>
-      </div>
-      <div class="progress progress-label-left">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-          <span>60%</span>
-        </div>
-      </div>
-      <div class="progress progress-label-left">
-        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
-          <span>100%</span>
-        </div>
-      </div>
-      <div class="progress progress-sm progress-label-left">
-        <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-          <span>5%</span>
-        </div>
-      </div>
-      <div class="progress progress-sm progress-label-left">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-          <span>60%</span>
-        </div>
-      </div>
-      <div class="progress progress-sm progress-label-left">
-        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
-          <span>100%</span>
-        </div>
-      </div>
-      <h4>Top Left Description and Top Right Label</h4>
-      <div class="progress-description">
-        Network Capacity
-      </div>
-      <div class="progress progress-label-top-right">
-        <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-          <span>5%</span>
-        </div>
-      </div>
-      <div class="progress-description">
-        <div class="spinner spinner-xs spinner-inline"></div> <strong>Downloading:</strong>  Product Repositories
-      </div>
-      <div class="progress progress-label-top-right">
-        <div class="progress-bar" role="progressbar" aria-valuenow="42.7" aria-valuemin="0" aria-valuemax="100" style="width: 42.7%;">
-          <span>42.7% (35 of 82MB)</span>
-        </div>
-      </div>
-      <div class="progress-description">
-        <span class="count">46,512</span> <strong>Downloading:</strong>  Product Repositories
-      </div>
-      <div class="progress progress-label-top-right">
-        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
-          <span>100%</span>
-        </div>
-      </div>
-      <div class="progress-description">
-        <span class="pficon pficon-ok" data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span> <strong>Network Activity:</strong>  10.10.121.02
-      </div>
-      <div class="progress progress-label-top-right">
-        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
-          <span>100%</span>
-        </div>
-      </div>
-      <div class="progress-description">
-        <span class="pficon pficon-warning-triangle-o"></span>
-        <strong>Network Activity:</strong>  10.10.121.02
-      </div>
-      <div class="progress progress-label-top-right">
-        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
-          <span>75%</span>
-        </div>
-      </div>
-      <div class="progress-description">
-        <span class="pficon pficon-error-circle-o"></span>
-        <strong>Network Activity:</strong>  10.10.121.02
-      </div>
-      <div class="progress progress-label-top-right">
-        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
-          <span>10%</span>
-        </div>
-      </div>
-      <h4>Left Description</h4>
-      <div class="progress-container progress-description-left">
-        <div class="progress-description">
-          CPU
-        </div>
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-            <span class="sr-only"><strong>25 of 460</strong> MHz</span>
-          </div>
-        </div>
-      </div>
-      <div class="progress-container progress-description-left">
-        <div class="progress-description">
-          Network Capacity
-        </div>
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-            <span class="sr-only"><strong>250 of 4600</strong> MHz</span>
-          </div>
-        </div>
-      </div>
-      <h4>Left Description and Right Label</h4>
-      <div class="progress-container progress-description-left progress-label-right">
-        <div class="progress-description">
-          CPU
-        </div>
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-          <span><strong>25 of 460</strong> MHz</span>
-          </div>
-        </div>
-      </div>
-      <div class="progress-container progress-description-left progress-label-right">
-        <div class="progress-description">
-          Network Capacity
-        </div>
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-          <span><strong>250 of 4600</strong> MHz</span>
-          </div>
-        </div>
-      </div>
-      <h3>In Table Cell</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th>Column heading</th>
-            <th>Column heading</th>
-            <th>Column heading</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Column content</td>
-            <td>
-              <div class="progress progress-sm progress-label-left progress-striped">
-                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
-                  <span>5%</span>
-                </div>
-              </div>
-            </td>
-            <td>Column content</td>
-          </tr>
-          <tr>
-            <td>Column content</td>
-            <td>
-              <div class="progress progress-sm progress-label-left progress-striped">
-                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
-                  <span>60%</span>
-                </div>
-              </div>
-            </td>
-            <td>Column content</td>
-          </tr>
-          <tr>
-            <td>Column content</td>
-            <td>
-              <div class="progress progress-sm progress-label-left progress-striped">
-                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
-                  <span>100%</span>
-                </div>
-              </div>
-            </td>
-            <td>Column content</td>
-          </tr>
-        </tbody>
-      </table>
-      <h3>With Tooltip</h3>
-      <h4>On Filled Bar</h4>
-      <div class="progress">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" title="60% Used">
-          <span class="sr-only">60% Used</span>
-        </div>
-      </div>
-      <h4>On Filled Bar and Negative Space</h4>
-      <div class="progress">
-        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" title="60% Used">
-          <span class="sr-only">60% Used</span>
-        </div>
-        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" data-toggle="tooltip" title="40% Available">
-          <span class="sr-only">40% Available</span>
-        </div>
-      </div>
-      <script>
-        // Initialize Tooltip
-        jQuery(document).ready(function() {
-          jQuery('[data-toggle="tooltip"]').tooltip();
-        });
-      </script>
-    </div><!-- /container -->
-  </body>
-</html>