RubyGems - patternfly-sass - Versions diffs - 3.7.0 → 3.8.0 - Mend

patternfly-sass 3.7.0 → 3.8.0

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 (144) hide show

checksums.yaml +4 -4
data/assets/fonts/patternfly/OpenSans-Bold-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-Bold-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-Bold-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-Bold-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-BoldItalic-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBold-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-ExtraBoldItalic-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-Italic-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-Italic-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-Italic-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-Italic-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-Light-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-Light-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-Light-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-Light-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-LightItalic-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-Regular-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-Regular-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-Regular-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-Regular-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-Semibold-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-Semibold-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-Semibold-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-Semibold-webfont.woff +0 -0
data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.eot +0 -0
data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.svg +0 -0
data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.ttf +0 -0
data/assets/fonts/patternfly/OpenSans-SemiboldItalic-webfont.woff +0 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.eot +0 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.svg +0 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.ttf +0 -0
data/assets/fonts/patternfly/PatternFlyIcons-webfont.woff +0 -0
data/assets/fonts/patternfly/fontawesome-webfont.eot +0 -0
data/assets/fonts/patternfly/fontawesome-webfont.svg +44 -14
data/assets/fonts/patternfly/fontawesome-webfont.ttf +0 -0
data/assets/fonts/patternfly/fontawesome-webfont.woff +0 -0
data/assets/fonts/patternfly/fontawesome-webfont.woff2 +0 -0
data/assets/images/patternfly/apple-touch-icon-precomposed-114.png +0 -0
data/assets/images/patternfly/apple-touch-icon-precomposed-144.png +0 -0
data/assets/images/patternfly/apple-touch-icon-precomposed-57.png +0 -0
data/assets/images/patternfly/apple-touch-icon-precomposed-72.png +0 -0
data/assets/images/patternfly/bg-login.jpg +0 -0
data/assets/images/patternfly/logo-alt.svg +18 -18
data/assets/images/patternfly/logo.svg +22 -22
data/assets/javascripts/patternfly.js +290 -91
data/assets/javascripts/patternfly.min.js +2 -1
data/assets/stylesheets/patternfly/_layouts.scss +23 -42
data/assets/stylesheets/patternfly/_list-view.scss +7 -0
data/assets/stylesheets/patternfly/_navbar.scss +3 -3
data/assets/stylesheets/patternfly/_notifications-drawer.scss +16 -3
data/assets/stylesheets/patternfly/_toolbar.scss +120 -14
data/assets/stylesheets/patternfly/_variables.scss +20 -5
data/assets/stylesheets/patternfly/_vertical-nav.scss +631 -381
data/assets/stylesheets/patternfly/_wizard.scss +105 -14
data/assets/stylesheets/patternfly/lib/bootstrap-datepicker.scss +0 -1
data/bower.json +11 -11
data/lib/patternfly-sass/version.rb +2 -2
data/patternfly-sass.gemspec +2 -2
data/spec/html/about-modal.html +1 -1
data/spec/html/accordions.html +1 -1
data/spec/html/alerts.html +1 -1
data/spec/html/area-charts.html +3 -3
data/spec/html/badges.html +1 -1
data/spec/html/bar-charts.html +3 -3
data/spec/html/basic.html +2 -2
data/spec/html/blank-slate.html +1 -1
data/spec/html/bootstrap-combobox.html +2 -2
data/spec/html/bootstrap-datepicker.html +2 -2
data/spec/html/bootstrap-select.html +2 -2
data/spec/html/bootstrap-switch.html +1 -1
data/spec/html/bootstrap-touchspin.html +2 -2
data/spec/html/bootstrap-treeview-2.html +3 -3
data/spec/html/bootstrap-treeview.html +3 -3
data/spec/html/breadcrumbs.html +1 -1
data/spec/html/buttons.html +1 -1
data/spec/html/cards.html +4 -4
data/spec/html/code.html +1 -1
data/spec/html/dashboard.html +3 -3
data/spec/html/datatables-columns.html +3 -3
data/spec/html/datatables.html +2 -2
data/spec/html/dist/css/patternfly-additions.css +1093 -794
data/spec/html/dist/css/patternfly-additions.css.map +1 -1
data/spec/html/dist/css/patternfly-additions.min.css +2 -2
data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
data/spec/html/dist/css/patternfly.css +133 -14
data/spec/html/dist/css/patternfly.css.map +1 -1
data/spec/html/dist/css/patternfly.min.css +6 -6
data/spec/html/dist/css/patternfly.min.css.map +1 -1
data/spec/html/donut-charts.html +3 -3
data/spec/html/dropdowns.html +1 -1
data/spec/html/form.html +2 -2
data/spec/html/forms.html +1 -1
data/spec/html/horizontal-navigation.html +5 -7
data/spec/html/icons.html +1 -1
data/spec/html/index.html +15 -15
data/spec/html/infotip.html +1 -1
data/spec/html/labels.html +1 -1
data/spec/html/line-charts.html +3 -3
data/spec/html/list-group.html +1 -1
data/spec/html/list-view-rows.html +592 -0
data/spec/html/list-view.html +314 -309
data/spec/html/login.html +1 -1
data/spec/html/modals.html +1 -1
data/spec/html/navbar.html +2 -2
data/spec/html/notification-drawer-horizontal-nav.html +1451 -0
data/spec/html/{notifications-drawer.html → notification-drawer-vertical-nav.html} +146 -265
data/spec/html/pagination.html +1 -1
data/spec/html/panels.html +1 -1
data/spec/html/pie-charts.html +3 -3
data/spec/html/popovers.html +1 -1
data/spec/html/progress-bars.html +1 -1
data/spec/html/search.html +1 -1
data/spec/html/spinner.html +1 -1
data/spec/html/tab.html +2 -2
data/spec/html/tables.html +1 -1
data/spec/html/tabs.html +1 -1
data/spec/html/time-picker.html +2 -2
data/spec/html/toast.html +1 -1
data/spec/html/toolbar.html +43 -8
data/spec/html/tooltip.html +1 -1
data/spec/html/typography-2.html +1 -1
data/spec/html/typography.html +1 -1
data/spec/html/utilization-bar-charts.html +3 -3
data/spec/html/{layout-alt-fixed-inner-scroll.html → vertical-navigation-primary-only.html} +61 -192
data/spec/html/{layout-alt-fixed.html → vertical-navigation-with-secondary.html} +120 -184
data/spec/html/{vertical-navigation-without-icons.html → vertical-navigation-with-tertiary-no-icons.html} +212 -155
data/spec/html/{vertical-navigation.html → vertical-navigation-with-tertiary-pins.html} +212 -155
data/spec/html/wizard.html +88 -48
metadata +21 -21
data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +0 -917
data/spec/html/layout-alt-fixed-with-footer.html +0 -917

data/spec/html/{layout-alt-fixed.html → vertical-navigation-with-secondary.html} RENAMED

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf-alt layout-pf-alt-fixed"><![endif]-->
+<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf layout-pf-fixed"><![endif]-->
 <!--[if gt IE 9]><!-->
-<html lang="en-us" class="layout-pf-alt layout-pf-alt-fixed">
+<html lang="en-us" class="layout-pf layout-pf-fixed">
   <!--<![endif]-->
     <head>
-    <title>Fixed Navbar Alt With Fixed Left Nav Alt - PatternFly</title>
+    <title>Vertical Navigation with Secondary - 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">
@@ -26,10 +26,10 @@
     <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
     <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
     <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.6.0/jquery.matchHeight-min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
     <script src="../../dist/js/patternfly.min.js"></script>
   </head>
   <div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
@@ -37,11 +37,12 @@
       <span class="pficon pficon-close"></span>
     </button>
     <span class="pficon pficon-warning-triangle-o"></span>
-    The alternate layouts are not officially supported by Patternfly.  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>.
+    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>
   <body class="cards-pf">
-    <nav class="navbar navbar-pf-alt">
+  <nav class="navbar navbar-pf-vertical">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle">
       <span class="sr-only">Toggle navigation</span>
@@ -100,80 +101,126 @@
       </li>
     </ul>
   </nav>
 </nav> <!--/.navbar-->
-<nav class="nav-pf-vertical-alt">
+<div class="nav-pf-vertical
+     nav-pf-vertical-with-sub-menus hide-nav-pf
+     ">
   <ul class="list-group">
-    <li class="list-group-item active">
-      <a href="#">
-        <span class="fa fa-dashboard" title="Dashboard" data-toggle="tooltip" data-placement="right"></span>
+    <li class="list-group-item">
+      <a>
+        <span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
         <span class="list-group-item-value">Dashboard</span>
       </a>
     </li>
     <li class="list-group-item">
-      <a href="#">
-        <span class="fa fa-file-o" title="My Services" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">My Services</span>
-        <span class="badge">12</span>
+      <a>
+        <span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
+        <span class="list-group-item-value">Dolor</span>
       </a>
     </li>
-    <li class="list-group-item">
-      <a href="#">
-        <span class="fa fa-file-text-o" title="My Requests" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">My Requests</span>
-        <span class="badge">2</span>
+    <li class="list-group-item active secondary-nav-item-pf" data-target="#ipsum-secondary">
+      <a>
+        <span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
+        <span class="list-group-item-value">Ipsum</span>
+      </a>
+      <div id="-secondary" class="nav-pf-secondary-nav">
+  <div class="nav-item-pf-header">
+    <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
+    <span>Ipsum</span>
+  </div>
+  <ul class="list-group">
+    <li class="list-group-item active " data-target="#ipsum-intellegam-tertiary">
+      <a>
+        <span class="list-group-item-value">Intellegam</span>
       </a>
     </li>
-    <li class="list-group-item">
-      <a href="#">
-        <span class="fa fa-copy" title="My Items" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">My Items</span>
+    <li class="list-group-item " data-target="#ipsum-copiosae-tertiary">
+      <a>
+        <span class="list-group-item-value">Copiosae</span>
       </a>
     </li>
-    <li class="list-group-item list-group-item-separator hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="fa fa-external-link" title="Launch"></span>
-        <span class="list-group-item-value">Launch</span>
+    <li class="list-group-item " data-target="#ipsum-patrioque-tertiary">
+      <a>
+        <span class="list-group-item-value">Patrioque</span>
       </a>
+    </li>
+  </ul>
+</div>
     </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="pficon pficon-flag" title="Notifications"></span>
-        <span class="list-group-item-value">Notifications</span>
-        <span class="badge notifications">2</span>
+    <li class="list-group-item secondary-nav-item-pf" data-target="#amet-secondary">
+      <a>
+        <span class="fa fa-paper-plane" data-toggle="tooltip" title="Amet"></span>
+        <span class="list-group-item-value">Amet</span>
+      </a>
+      <div id="amet-secondary" class="nav-pf-secondary-nav">
+  <div class="nav-item-pf-header">
+    <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
+    <span>Amet</span>
+  </div>
+  <ul class="list-group">
+    <li class="list-group-item " data-target="#amet-detracto-tertiary">
+      <a>
+        <span class="list-group-item-value">Detracto</span>
       </a>
     </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="pficon pficon-help" title="Help"></span>
-        <span class="list-group-item-value">Help</span>
+    <li class="list-group-item " data-target="#amet-mediocrem-tertiary">
+      <a>
+        <span class="list-group-item-value">Mediocrem</span>
       </a>
     </li>
-     <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="fa fa-info-circle" title="About"></span>
-        <span class="list-group-item-value">About</span>
+    <li class="list-group-item " data-target="#amet-corrumpit-tertiary">
+      <a>
+        <span class="list-group-item-value">Corrumpit</span>
       </a>
     </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="pficon pficon-user" title="Preferences"></span>
-        <span class="list-group-item-value">Preferences</span>
+  </ul>
+</div>
+    </li>
+    <li class="list-group-item">
+      <a>
+        <span class="fa fa-graduation-cap" data-toggle="tooltip" title="Adipscing"></span>
+        <span class="list-group-item-value">Adipscing</span>
       </a>
     </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="fa fa-sign-out" title="Log Out"></span>
-        <span class="list-group-item-value">Log Out</span>
+    <li class="list-group-item">
+      <a>
+        <span class="fa fa-gamepad" data-toggle="tooltip" title="Lorem"></span>
+        <span class="list-group-item-value">Lorem</span>
       </a>
     </li>
   </ul>
-</nav>
-<div class="container-fluid container-cards-pf container-pf-alt-nav-pf-vertical-alt">
-      <div class="row row-cards-pf">
+</div>
+<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical container-pf-nav-pf-vertical-with-sub-menus   ">
+        <div class="row row-cards-pf">
       <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-        <div class="col-xs-6 col-sm-4 col-md-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
 <div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
@@ -186,7 +233,7 @@
 </div>
         </div>
-        <div class="col-xs-6 col-sm-4 col-md-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
 <div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
@@ -200,7 +247,7 @@
 </div>
         </div>
-        <div class="col-xs-6 col-sm-4 col-md-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
 <div class="card-pf card-pf-accented card-pf-aggregate-status">
   <h2 class="card-pf-title">
     <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
@@ -213,7 +260,7 @@
 </div>
         </div>
-        <div class="col-xs-6 col-sm-4 col-md-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
           <div class="card-pf card-pf-accented card-pf-aggregate-status">
             <h2 class="card-pf-title">
               <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
@@ -225,34 +272,10 @@
             </div>
           </div>
         </div>
-        <div class="col-xs-6 col-sm-4 col-md-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
-            <h2 class="card-pf-title">
-              <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">6</span> Dolar Sit</a>
-            </h2>
-            <div class="card-pf-body">
-              <p class="card-pf-aggregate-status-notifications">
-                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-4 col-md-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status">
-            <h2 class="card-pf-title">
-              <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">199</span> Consectetur</a>
-            </h2>
-            <div class="card-pf-body">
-              <p class="card-pf-aggregate-status-notifications">
-                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
-              </p>
-            </div>
-          </div>
-        </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
       <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
 <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <span class="fa fa-rebel"></span>
@@ -266,7 +289,7 @@
 </div>
         </div>
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
 <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <a href="#">
@@ -282,7 +305,7 @@
 </div>
         </div>
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
 <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
   <h2 class="card-pf-title">
     <a href="#">
@@ -298,7 +321,7 @@
 </div>
         </div>
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+        <div class="col-xs-12 col-sm-6 col-md-3">
           <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
             <h2 class="card-pf-title">
               <a href="#">
@@ -313,39 +336,10 @@
             </div>
           </div>
         </div>
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-            <h2 class="card-pf-title">
-              <a href="#">
-                <span class="fa fa-shield"></span>
-                <span class="card-pf-aggregate-status-count">6</span> Dolar Sit
-              </a>
-            </h2>
-            <div class="card-pf-body">
-              <p class="card-pf-aggregate-status-notifications">
-                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-            <h2 class="card-pf-title">
-              <a href="#">
-                <span class="fa fa-rocket"></span>
-                <span class="card-pf-aggregate-status-count">199</span> Consectetur
-              </a>
-            </h2>
-            <div class="card-pf-body">
-              <p class="card-pf-aggregate-status-notifications">
-                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>23</span></a>
-              </p>
-            </div>
-          </div>
-        </div>
       </div>
       <div class="row row-cards-pf">
-        <div class="col-xs-12 col-sm-6 col-md-4">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-12 col-sm-6">
 <div class="card-pf">
   <div class="card-pf-heading">
     <h2 class="card-pf-title">
@@ -401,7 +395,7 @@
 </div>
         </div>
-        <div class="col-xs-12 col-sm-6 col-md-4">
+        <div class="col-xs-12 col-sm-6">
 <div class="card-pf">
   <div class="card-pf-heading">
     <h2 class="card-pf-title">
@@ -462,69 +456,8 @@
 </div>
         </div>
-        <div class="col-xs-12 col-sm-6 col-md-4">
-          <div class="card-pf">
-            <div class="card-pf-heading">
-              <h2 class="card-pf-title">
-                Quotas
-              </h2>
-            </div>
-            <div class="card-pf-body">
-              <div class="progress-container progress-description-left">
-                <div class="progress-description">
-                  CPU
-                </div>
-                <div class="progress">
-                  <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
-                    <span class="sr-only">25% Used</span>
-                  </div>
-                  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
-                    <span class="sr-only">75% Available</span>
-                  </div>
-                </div>
-              </div>
-              <div class="progress-container progress-description-left">
-                <div class="progress-description">
-                  Memory
-                </div>
-                <div class="progress">
-                  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
-                    <span class="sr-only">50% Used</span>
-                  </div>
-                  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
-                    <span class="sr-only">50% Available</span>
-                  </div>
-                </div>
-              </div>
-              <div class="progress-container progress-description-left">
-                <div class="progress-description">
-                  Pods
-                </div>
-                <div class="progress">
-                  <div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
-                    <span class="sr-only">62.5% Used</span>
-                  </div>
-                  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
-                    <span class="sr-only">37.5% Available</span>
-                  </div>
-                </div>
-              </div>
-              <div class="progress-container progress-description-left">
-                <div class="progress-description">
-                  Services
-                </div>
-                <div class="progress">
-                  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
-                    <span class="sr-only">100% Used</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
-        <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-md-12">
 <div class="card-pf card-pf-utilization">
   <div class="card-pf-heading">
@@ -766,6 +699,7 @@
         </div>
       </div><!-- /row -->
       <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
         <div class="col-xs-12 col-sm-6 col-md-5">
 <div class="card-pf">
   <div class="card-pf-heading">
@@ -837,7 +771,7 @@
                 </ul>
               </div>
               <p>
-                <a href="#" class="card-pf-link-with-icon disabled">
+                <a href="#" class="card-pf-link-with-icon">
                   <span class="pficon pficon-flag"></span>View CPU Events
                 </a>
               </p>
@@ -898,16 +832,18 @@
 </div>
 <script>
-  $(function() {
+  $(document).ready(function() {
     // matchHeight the contents of each .card-pf and then the .card-pf itself
     $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
     $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
     $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
     $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
-    // initialize tooltips
-    $('[data-toggle="tooltip"]').tooltip();
+    // Initialize the vertical navigation
+    $().setupVerticalNavigation(true);
   });
 </script>
   </body>
 </html>