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

patternfly-sass 3.23.2 → 3.31.1

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>