patternfly-sass 3.9.0 → 3.10.0

data/assets/stylesheets/patternfly/_time-picker.scss

@@ -38,7 +38,7 @@ $bs-datetimepicker-btn-hover-bg: transparent;
     height: 30px;
     &:hover { color: $link-color; }
   }
-  .table-condensed>tbody>tr>td { padding: 0; }
+  .table-condensed > tbody > tr > td { padding: 0; }
 }
 .time-picker-pf {
   .input-group-addon {

data/assets/stylesheets/patternfly/_toast.scss

@@ -34,7 +34,7 @@
 // Sets max width on toast notifications
 .toast-pf-max-width {
  @media (min-width: $screen-md-min) {
-    max-width: 31.1% ; // sets the size to 4 cols;
+    max-width: 31.1%; // sets the size to 4 cols;
   }
 }
 // To position the notification on the top right corner, used in context on cards layout

data/assets/stylesheets/patternfly/_toolbar.scss

@@ -9,9 +9,8 @@
   padding-top: ($grid-gutter-width/4);
   .form-group {
     margin-bottom: ($grid-gutter-width/4);
-    @media (min-width: $grid-float-breakpoint){
+    @media (min-width: $grid-float-breakpoint) {
       border-right: 1px solid $sidebar-pf-border-color;
-      display: table-cell;
       float: left;
       margin-bottom: 0;
       padding-left: ($grid-gutter-width/2);
@@ -25,13 +24,9 @@
     .btn,
     .btn-group {
       + .btn,
-      + .btn-group {
-        margin-left: 5px;
-      }
+      + .btn-group { margin-left: 5px; }
       + .btn-link,
-      + .dropdown {
-        margin-left: 10px;
-      }
+      + .dropdown { margin-left: 10px; }
     }
     .btn-link {
       color: $gray-darker;
@@ -40,15 +35,12 @@
       padding: 4px 0;
       &:active,
       &:focus,
-      &:hover {
-        color: $link-color;
-      }
+      &:hover { color: $link-color; }
     }
   }
 }
 .toolbar-pf-actions {
   display: table;
-  margin-bottom: 10px;
   width: 100%;
   @media (min-width: $grid-float-breakpoint) {
     .toolbar-pf-filter {
@@ -59,44 +51,22 @@
 }
 .toolbar-pf-view-selector {
   font-size: ($font-size-base + 4);
-  @media (min-width: $grid-float-breakpoint) {
-    border-right: 0;
-    float: right;
-    padding-right: 0;
-  }
-  .active a {
+  .btn-link.active {
     color: $link-color;
     cursor: default;
   }
-  a {
-    color: $gray-darker;
-    &:hover{
-      color: $link-color;
-    }
-  }
-  .list-inline {
-    margin-bottom: 0;
-  }
 }
-.toolbar-pf-action-right{
+.toolbar-pf-action-right {
   float: right;
   @media (max-width: $grid-float-breakpoint) {
     float: none;
   }
-  .toolbar-pf-view-selector {
-    @media (min-width: $grid-float-breakpoint) {
-      float: left;
-    }
-  }
 }
 .toolbar-pf-find {
   font-size: ($font-size-base + 2);
   position: relative;
-  .btn{
-    outline: none;
-  }
 }
-.find-pf-dropdown-container{
+.find-pf-dropdown-container {
   background: $color-pf-white;
   border: solid 1px $color-pf-black-400;
   display: none;
@@ -112,14 +82,11 @@
     width: calc(100% - 30px);
   }
   &:before,
-  &:after{
+  &:after {
     content: "";
-    display:block;
-    height:0;
     position: absolute;
-    width:0;
   }
-  &:before{
+  &:before {
     border-bottom:11px solid $color-pf-black-400;
     border-left:11px solid transparent;
     border-right:11px solid transparent;
@@ -133,7 +100,7 @@
       top: 8px;
     }
   }
-  &:after{
+  &:after {
     border-bottom:10px solid $color-pf-white;
     border-left:10px solid transparent;
     border-right:10px solid transparent;
@@ -147,38 +114,36 @@
       top: 9px;
     }
   }
-  input{
-    padding: 5px 95px 5px 5px;
-    width: 100%;
+  input {
     height: 30px;
-    line-height: 30px;
+    padding: 5px 117px 5px 5px; // 112px (components) + 5px (offset)
+    width: 100%;
   }
-  .find-pf-buttons{
+  .find-pf-buttons {
     position: absolute;
     right: 10px;
-    top: 0;
-    .btn{
+    top: 5px;
+    .btn {
+      border: none;
+      cursor: pointer;
       margin-left: 0 !important;
+      padding: 0;
+      width: 18px;
+      .fa-angle-up,
+      .fa-angle-down {
+        font-weight: bold;
+        font-size: ($font-size-base + 6);
+      }
+      .pficon-close { font-size: ($font-size-base + 2); }
     }
-    span{
-      cursor: pointer;
-      display: inline-block;
+    span {
       height: 30px;
       line-height: 30px;
-      margin-right: 5px;
       vertical-align: middle;
     }
-    .find-pf-nums{
+    .find-pf-nums {
       color: $color-pf-black-500;
-      font-size: ($font-size-base + 2);
-    }
-    .btn-link .fa-angle-up,
-    .btn-link .fa-angle-down{
-      font-weight: bold;
-      font-size: ($font-size-base + 6);
-    }
-    .btn-find-close{
-      font-size: ($font-size-base + 2);
+      margin-right: 3px;
     }
   }
 }
@@ -193,7 +158,7 @@
     line-height: ($grid-gutter-width/1.5);
     margin-bottom: 0;
     margin-top: 0;
-    @media (min-width: $screen-sm-min){
+    @media (min-width: $screen-sm-min) {
       line-height: $grid-gutter-width;
     }
   }
@@ -209,11 +174,4 @@
       margin-left: 5px;
     }
   }
-  .list-inline {
-    margin: 0 10px 0 5px;
-    li {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }

data/assets/stylesheets/patternfly/_tooltip.scss

@@ -5,7 +5,7 @@
 // Base class
 .tooltip {
   font-size: $tooltip-font-size;
-  line-height: 1.4
+  line-height: 1.4;
 }
 
 // Wrapper for the tooltip content

data/assets/stylesheets/patternfly/_variables.scss

@@ -9,6 +9,7 @@ $patternfly-sass-asset-helper: false !default;
 @import "color-variables";
 
 $bootstrap-switch-handle-default-bg-color:                          $color-pf-black-100 !default;
+$bootstrap-treeview-highlight-color:                                $color-pf-blue-300 !default;
 $btn-default-bg-img-start:                                          $color-pf-black-100 !default;
 $btn-default-bg-img-stop:                                           $color-pf-black-200 !default;
 $btn-xs-font-weight:                                                400 !default;
@@ -25,7 +26,7 @@ $dropdown-divider-margin:                                           4px 1px !def
 $dropdown-link-active-border-color:                                 $color-pf-blue !default;
 $dropdown-link-hover-border-color:                                  $color-pf-blue-100 !default;
 $dropdown-link-focus-color:                                         $color-pf-white !default;
-$flyout-transition-pf:                                              all .2s cubic-bezier(.35,0,.25,1) !default;
+$flyout-transition-pf:                                              all 200ms cubic-bezier(.35, 0, .25, 1) !default;
 $font-family-monospace:                                             Menlo, Monaco, Consolas, monospace !default;
 $font-path:                                                         if($patternfly-sass-asset-helper, "patternfly", "../fonts/patternfly") !default;
 $footer-pf-bg-color:                                                $color-pf-black !default;
@@ -92,8 +93,8 @@ $navbar-pf-vertical-navbar-brand-padding:                           11px 0 12px
 $navbar-pf-vertical-navbar-toggle-margin:                           13px 15px !default;
 $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg:                $color-pf-white !default;
 $navbar-pf-vertical-nav-item-iconic-padding:                        21px 12px !default;
-$nav-pf-container-transition-period:                                0.25s !default;
-$nav-pf-menu-transition-period:                                     0.1s !default;
+$nav-pf-container-transition-period:                                250ms !default;
+$nav-pf-menu-transition-period:                                     100ms !default;
 $nav-pf-vertical-active-color:                                      $color-pf-white !default;
 $nav-pf-vertical-active-before-color:                               $color-pf-blue-300 !default;
 $nav-pf-vertical-active-bg-color:                                   $color-pf-black-800 !default;
@@ -144,10 +145,11 @@ $nav-pf-vertical-width:                                             200px !defau
 $pagination-padding-small-vertical:                                 0 !default;
 $panel-default-border-color:                                        $color-pf-black-400 !default;
 $pficon-var-add-circle-o:                                           "\e61b" !default;
-$pficon-var-middleware:                                                 "\e917" !default;
+$pficon-var-middleware:                                             "\e917" !default;
 $pficon-var-blueprint:                                              "\e915" !default;
 $pficon-var-build:                                                  "\e902" !default;
 $pficon-var-builder-image:                                          "\e800" !default;
+$pficon-var-bundle:                                                 "\e918" !default;
 $pficon-var-close:                                                  "\e60b" !default;
 $pficon-var-cloud-security:                                         "\e903" !default;
 $pficon-var-cloud-tenant:                                           "\e904" !default;
@@ -382,8 +384,10 @@ $font-size-h5:                                                      ceil(($font-
 $font-size-large:                                                   ceil(($font-size-base * 1.1666)) !default; // ~14px
 $font-size-small:                                                   ceil(($font-size-base * .9166)) !default; // ~11px
 $input-color:                                                       $gray-dark !default;
+$input-color-placeholder:                                           #999;
 $nav-tabs-active-link-hover-color:                                  $link-color !default;
 $nav-tabs-justified-link-border-color:                              $nav-tabs-border-color !default;
+$nav-pf-vertical-badges-width:                                      ($nav-pf-vertical-width + 50px) !default;
 $padding-small-horizontal:                                          $padding-base-horizontal !default;
 $padding-small-vertical:                                            $padding-base-vertical !default;
 $panel-danger-border:                                               $brand-danger !default;
@@ -398,7 +402,6 @@ $panel-warning-heading-bg:                                          $brand-warni
 $state-warning-text:                                                $brand-warning !default;
 $state-danger-text:                                                 $brand-danger !default;
 // Reference variable declared in block above
-$nav-pf-vertical-icon-size:                                         ($font-size-base + 8) !default;
 $panel-danger-text:                                                 $panel-primary-text !default;
 $panel-info-text:                                                   $panel-primary-text !default;
 $panel-success-text:                                                $panel-primary-text !default;
@@ -413,6 +416,7 @@ $btn-primary-bg-img-start:                                          $brand-prima
 $btn-primary-bg-img-stop:                                           $btn-primary-bg !default;
 $dropdown-link-focus-bg:                                            $link-color !default;
 $line-height-computed:                                              floor(($font-size-base * $line-height-base)) !default;
+$nav-pf-vertical-icon-size:                                         ($font-size-base + 8) !default;
 $notification-badge-color:                                          $brand-danger !default;
 $progress-sm:                                                       ($line-height-computed - 6) !default;
 $progress-xs:                                                       ($line-height-computed - 14) !default;

data/assets/stylesheets/patternfly/_vertical-nav.scss

@@ -7,7 +7,7 @@
 // .navbar navbar-pf-vertical
 //   .navbar-header
 //   .collapse navbar-collapse   <-- necessary for collapsing vertical nav and mobile
-// .nav-pf-vertical [.nav-pf-vertical-with-sub-menus [.nav-pf-vertical-callapsible-menus] [.nav-pf-persistent-secondary]] [.hidden-icons-pf]
+// .nav-pf-vertical [.nav-pf-vertical-callapsible-menus] [.nav-pf-persistent-secondary] [.hidden-icons-pf]
 //   .list-group
 //     .list-group-item [.active] [.secondary-nav-item-pf]
 //       a
@@ -28,7 +28,7 @@
 //                  a
 //                    .list-group-item-value
 //
-// .container-pf-nav-pf-vertical [.container-pf-nav-pf-vertical-with-sub-menus [.nav-pf-persistent-secondary]] [.hidden-icons-pf]
+// .container-pf-nav-pf-vertical [.nav-pf-persistent-secondary] [.hidden-icons-pf]
 //
 
 .nav-pf-vertical {
@@ -120,34 +120,63 @@
         border-color: $nav-pf-vertical-item-border-color;
       }
     }
-    > .list-group-item-value {
+    .list-group-item-value {
       display: block;
-      line-height: 30px;
+      line-height: 25px;
       max-width: 120px;
       overflow: hidden;
       text-overflow: ellipsis;
-      width: 100%;
     }
-
   }
   .list-group-item-separator {
     border-top-color: $nav-pf-vertical-item-border-color;
     border-top-width: 2px;
   }
-  &.collapsed {
+  &.nav-pf-vertical-with-badges {
+    width: $nav-pf-vertical-badges-width;
+    .list-group-item > a {
+      width: $nav-pf-vertical-badges-width;
+    }
+  }
+  &.collapsed { // Collapsed Primary Menu state
     width: $nav-pf-vertical-collapsed-width;
-    > .list-group { // Only the primary menu is effected by .collapsed
-      > .list-group-item {
+    > .list-group-item { // Show only the icons
+      > a {
+        width: $nav-pf-vertical-collapsed-width;
+        > .list-group-item-value {
+          display: none;
+        }
+        > .badge-container-pf {
+          display: none;
+        }
+      }
+      &.secondary-nav-item-pf { // Adjust widths
+        &.active > a,
         > a {
           width: $nav-pf-vertical-collapsed-width;
-          > .list-group-item-value {
-            display: none;
-            width: 0;
+          &:after {
+            right: 10px;
+          }
+        }
+        &.active,
+        &:hover {
+          > a {
+            width: ($nav-pf-vertical-collapsed-width + 2);
+            &:after {
+              right: 11px;
+            }
           }
         }
       }
     }
   }
+  h5 {
+    color: $nav-pf-vertical-secondary-color;
+    cursor: default;
+    font-size: ($font-size-base + 1);
+    font-weight: 600;
+    margin: $nav-pf-vertical-secondary-list-header-margin;
+  }
   &.hidden-icons-pf {
     > .list-group > .list-group-item { // only the primary menu hides icons
       > a {
@@ -162,6 +191,30 @@
       display: none;
     }
   }
+  .badge-container-pf {
+    position: absolute;
+    right: 15px;
+    top: 20px;
+    .badge {
+      background: $nav-pf-vertical-badge-bg-color;
+      color: $nav-pf-vertical-badge-color;
+      float: left;
+      font-size: $font-size-base;
+      font-weight: 700;
+      line-height: $line-height-base;
+      margin: 0;
+      padding: 0 7px;
+      text-align: center;
+      .pficon,
+      .fa {
+        font-size: ($font-size-base + 2);
+        height: 20px;
+        line-height: $line-height-base;
+        margin-right: 3px;
+        margin-top: -1px;
+      }
+    }
+  }
 }
 .nav-pf-vertical-tooltip.tooltip {
   margin-left: 15px;
@@ -174,314 +227,305 @@
     left: calc(50% - 15px) !important;
   }
 }
-.nav-pf-vertical.nav-pf-vertical-with-sub-menus {
-  &.collapsed {
-    &.collapsed-secondary-nav-pf {  // collapsed state with secondary menu pinned
-      width: $nav-pf-vertical-width;
-    }
-    &.collapsed-tertiary-nav-pf { // collapsed state with tertiary menu pinned
+.hover-secondary-nav-pf {
+  width: calc(#{$nav-pf-vertical-width} * 2);
+  &.nav-pf-vertical-with-badges {
+    width: calc(#{$nav-pf-vertical-badges-width} * 2);
+  }
+}
+.hover-tertiary-nav-pf {
+  width: calc(#{$nav-pf-vertical-width} * 3);
+  &.nav-pf-vertical-with-badges {
+    width: calc(#{$nav-pf-vertical-badges-width} * 3);
+  }
+  .nav-pf-secondary-nav {
+    width: calc(#{$nav-pf-vertical-width} * 2);
+    .collapsed-tertiary-nav-pf {
       width: $nav-pf-vertical-width;
     }
   }
-  &.hover-secondary-nav-pf {
-    width: ($nav-pf-vertical-width + $nav-pf-vertical-width);
+  .nav-pf-tertiary-nav {
+    left: calc(#{$nav-pf-vertical-width} * 2);
   }
-  &.hover-tertiary-nav-pf {
-    width: ($nav-pf-vertical-width + $nav-pf-vertical-width + $nav-pf-vertical-width);
+  &.nav-pf-vertical-with-badges {
     .nav-pf-secondary-nav {
-      width: ($nav-pf-vertical-width + $nav-pf-vertical-width);
+      width: calc(#{$nav-pf-vertical-badges-width} * 2);
       .collapsed-tertiary-nav-pf {
-        width: $nav-pf-vertical-width;
+        width: $nav-pf-vertical-badges-width;
       }
     }
     .nav-pf-tertiary-nav {
-      left: ($nav-pf-vertical-width + $nav-pf-vertical-width);
+      left: calc(#{$nav-pf-vertical-badges-width} * 2);
     }
   }
-
-  &.show-mobile-nav {
-    &.show-mobile-secondary {
-      width: $nav-pf-vertical-width;
+}
+.collapsed {
+  width: $nav-pf-vertical-collapsed-width;
+  &.collapsed-secondary-nav-pf { // collapsed state with secondary menu pinned
+    width: $nav-pf-vertical-width;
+    &.nav-pf-vertical-with-badges {
+      width: $nav-pf-vertical-badges-width;
     }
-    &.show-mobile-tertiary {
-      width: $nav-pf-vertical-width;
+  }
+  &.collapsed-tertiary-nav-pf { // collapsed state with tertiary menu pinned
+    width: $nav-pf-vertical-width;
+    &.nav-pf-vertical-with-badges {
+      width: $nav-pf-vertical-badges-width;
     }
-
-    .mobile-nav-item-pf,
-    .mobile-secondary-item-pf {
-      .nav-pf-secondary-nav {
-        left: 0;
-        opacity: 1;
-        visibility: visible;
-        z-index: ($zindex-navbar-fixed + 4);
-      }
-      > .nav-pf-tertiary-nav {
-        opacity: 1;
-        visibility: visible;
-      }
+  }
+  &.hover-secondary-nav-pf {
+    width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+    &.nav-pf-vertical-with-badges {
+      width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width});
+    }
+  }
+  &.hover-tertiary-nav-pf {
+    width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2));
+    &.nav-pf-vertical-with-badges {
+      width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2));
+    }
+  }
+}
+.show-mobile-nav {
+  &.show-mobile-secondary {
+    width: $nav-pf-vertical-width;
+    &.nav-pf-vertical-with-badges {
+      width: $nav-pf-vertical-badges-width;
+    }
+  }
+  &.show-mobile-tertiary {
+    width: $nav-pf-vertical-width;
+    &.nav-pf-vertical-with-badges {
+      width: $nav-pf-vertical-badges-width;
     }
+  }
+  .mobile-nav-item-pf,
+  .mobile-secondary-item-pf {
     .nav-pf-secondary-nav {
       left: 0;
-      .secondary-nav-item-pf:hover & {
-        opacity: 0;
-        visibility: hidden;
-      }
+      opacity: 1;
+      visibility: visible;
+      z-index: ($zindex-navbar-fixed + 4);
     }
-    .nav-pf-tertiary-nav {
+    > .nav-pf-tertiary-nav {
       left: 0;
+      opacity: 1;
+      visibility: visible;
       z-index: ($zindex-navbar-fixed + 8);
     }
-    .tertiary-nav-item-pf:hover {
-      .nav-pf-tertiary-nav {
-        opacity: 0;
-        visibility: hidden;
-      }
+  }
+  .nav-pf-secondary-nav {
+    left: 0;
+    .secondary-nav-item-pf:hover & {
+      opacity: 0;
+      visibility: hidden;
     }
-    .tertiary-nav-item-pf.mobile-nav-item-pf:hover {
-      .nav-pf-tertiary-nav {
-        opacity: 1;
-        visibility: visible;
-      }
+  }
+  .tertiary-nav-item-pf:hover {
+    .nav-pf-tertiary-nav {
+      opacity: 0;
+      visibility: hidden;
     }
   }
-  .layout-pf-fixed-with-footer & {
-    bottom: $footer-pf-height;
+  .tertiary-nav-item-pf.mobile-nav-item-pf:hover {
+    .nav-pf-tertiary-nav {
+      opacity: 1;
+      visibility: visible;
+    }
   }
-  .secondary-nav-item-pf {
+}
+.secondary-nav-item-pf {
+  > a {
+    cursor: default;
+    &:after {
+      color: $nav-pf-vertical-secondary-indicator-color;
+      content: $fa-var-angle-right;
+      display: block;
+      font-family: "FontAwesome";
+      font-size: ($font-size-base * 2);
+      line-height: 30px;
+      padding: $nav-pf-vertical-secondary-indicator-padding;
+      position: absolute;
+      right: 20px;
+      top: 0;
+    }
+  }
+  &.active,
+  &:hover {
     > a {
-      cursor: default;
+      width: calc(#{$nav-pf-vertical-width} + 1px);
+      z-index: ($zindex-navbar-fixed + 1);
       &:after {
-        color: $nav-pf-vertical-secondary-indicator-color;
-        content: $fa-var-angle-right;
-        display: block;
-        font-family: "FontAwesome";
-        font-size: ($font-size-base * 2);
-        line-height: 30px;
-        padding: $nav-pf-vertical-secondary-indicator-padding;
-        position: absolute;
-        right: 20px;
-        top: 0;
+        right: 21px;
+      }
+      .collapsed-secondary-nav-pf & {
+        z-index: $zindex-navbar-fixed;
+      }
+      .collapsed-tertiary-nav-pf & {
+        z-index: $zindex-navbar-fixed;
       }
     }
+  }
+  .nav-pf-vertical-with-badges & {
     &.active,
     &:hover {
       > a {
-        width: ($nav-pf-vertical-width + 1);
-        z-index: ($zindex-navbar-fixed + 1);
-        &:after {
-          right: 21px;
-        }
-        .collapsed-secondary-nav-pf & {
-          z-index: $zindex-navbar-fixed;
-        }
-        .collapsed-tertiary-nav-pf & {
-          z-index: $zindex-navbar-fixed;
-        }
+        width: calc(#{$nav-pf-vertical-badges-width} + 1px);
       }
     }
   }
-  &.collapsed-secondary-nav-pf {
-    width: $nav-pf-vertical-width;
-    .secondary-nav-item-pf {  // Keep sub-menu indicators below collapsed menu
-      &.active,
-      &.hover {
-        > a {
-          z-index: $zindex-navbar-fixed;
-        }
+}
+.nav-pf-vertical.collapsed-secondary-nav-pf {
+  width: $nav-pf-vertical-width;
+  &.nav-pf-vertical-with-badges {
+    width: $nav-pf-vertical-badges-width;
+  }
+  .secondary-nav-item-pf {  // Keep sub-menu indicators below collapsed menu
+    &.active,
+    &.hover {
+      > a {
+        z-index: $zindex-navbar-fixed;
       }
     }
-    &.hover-tertiary-nav-pf {
-      width: ($nav-pf-vertical-width + $nav-pf-vertical-width);
-    }
-    .nav-pf-secondary-nav {
-      left: 0;
+  }
+  &.hover-tertiary-nav-pf {
+    width: $nav-pf-vertical-width;
+    &.nav-pf-vertical-with-badges {
+      width: $nav-pf-vertical-badges-width;
     }
+  }
+  .nav-pf-secondary-nav {
+    left: 0;
+  }
+  .nav-pf-tertiary-nav {
+    left: $nav-pf-vertical-width;
+  }
+  &.nav-pf-vertical-with-badges {
     .nav-pf-tertiary-nav {
-      left: $nav-pf-vertical-width;
+      left: $nav-pf-vertical-badges-width;
     }
   }
-  &.collapsed-tertiary-nav-pf {
+}
+.nav-pf-vertical.collapsed-tertiary-nav-pf {
+  width: $nav-pf-vertical-width;
+  &.nav-pf-vertical-with-badges {
+    width: $nav-pf-vertical-badges-width;
+  }
+  .nav-pf-secondary-nav {
     width: $nav-pf-vertical-width;
-    .nav-pf-secondary-nav {
-      width: $nav-pf-vertical-width;
+    &.nav-pf-vertical-with-badges {
+      width: $nav-pf-vertical-badges-width;
     }
-    .secondary-nav-item-pf,    // Keep sub-menu indicators below collapsed menu
-    .tertiary-nav-item-pf {
-      &.active,
-      &.hover {
-        > a {
-          z-index: $zindex-navbar-fixed;
-        }
+  }
+  .secondary-nav-item-pf,    // Keep sub-menu indicators below collapsed menu
+  .tertiary-nav-item-pf {
+    &.active,
+    &.hover {
+      > a {
+        z-index: $zindex-navbar-fixed;
       }
     }
   }
-  &.nav-pf-persistent-secondary.secondary-visible-pf {  // Persistent secondary nav settings
-    @media (min-width: $screen-lg-min) { // secondary menu only persistent at lg screen
-      width: ($nav-pf-vertical-width + $nav-pf-vertical-width);
+}
+.nav-pf-vertical.nav-pf-persistent-secondary.secondary-visible-pf {  // Persistent secondary nav settings
+  @media (min-width: $screen-lg-min) { // secondary menu only persistent at lg screen
+    width: calc(#{$nav-pf-vertical-width} * 2);
+    &.nav-pf-vertical-with-badges {
+      width: calc(#{$nav-pf-vertical-badges-width} * 2);
+    }
+    &.collapsed-secondary-nav-pf {
+      width: $nav-pf-vertical-width;
+      &.nav-pf-vertical-with-badges {
+        width: $nav-pf-vertical-badges-width;
+      }
+      &.hover-tertiary-nav-pf {
+        width: calc(#{$nav-pf-vertical-width} * 2);
+        &.nav-pf-vertical-with-badges {
+          width: calc(#{$nav-pf-vertical-badges-width} * 2);
+        }
+      }
+    }
+    &.collapsed-tertiary-nav-pf {
+      width: $nav-pf-vertical-width;
+      &.nav-pf-vertical-with-badges {
+        width: $nav-pf-vertical-badges-width;
+      }
+    }
+    &.collapsed {
+      width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
       &.collapsed-secondary-nav-pf {
         width: $nav-pf-vertical-width;
+        &.nav-pf-vertical-with-badges {
+          width: $nav-pf-vertical-badges-width;
+        }
       }
       &.collapsed-tertiary-nav-pf {
         width: $nav-pf-vertical-width;
-      }
-      &.collapsed {
-        width: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width);
-        &.collapsed-secondary-nav-pf {
-          width: $nav-pf-vertical-width;
-        }
-        &.collapsed-tertiary-nav-pf {
-          width: $nav-pf-vertical-width;
+        &.nav-pf-vertical-with-badges {
+          width: $nav-pf-vertical-badges-width;
         }
       }
       &.hover-tertiary-nav-pf {
-        width: ($nav-pf-vertical-width + $nav-pf-vertical-width + $nav-pf-vertical-width);
-      }
-      .secondary-nav-item-pf.active {
-        .nav-pf-secondary-nav {
-          visibility: visible;
-          opacity: 1;
+        width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+        &.nav-pf-vertical-with-badges {
+          width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2));
         }
       }
     }
-  }
-  .badge-container-pf {
-    background-color: $nav-pf-vertical-badge-bg-color;
-    position: absolute;
-    right: 15px;
-    top: 5px;
-    .badge {
-      background: $nav-pf-vertical-badge-bg-color;
-      color: $nav-pf-vertical-badge-color;
-      float: left;
-      font-size: $font-size-base;
-      font-weight: 700;
-      line-height: $line-height-base;
-      margin: 0;
-      padding: 0 7px;
-      text-align: center;
-      .pficon,
-      .fa {
-        font-size: ($font-size-base + 2);
-        height: 20px;
-        line-height: $line-height-base;
-        margin-right: 3px;
-        margin-top: -1px;
+    &.hover-tertiary-nav-pf {
+      width: calc(#{$nav-pf-vertical-width} * 3);
+      &.nav-pf-vertical-with-badges {
+        width: calc(#{$nav-pf-vertical-badges-width} * 3);
       }
     }
-  }
-  .nav-item-pf-header {
-    color: $nav-pf-vertical-secondary-color;
-    font-size: ($font-size-base + 4);
-    margin: $nav-pf-vertical-secondary-header-margin;
-    > a {
-      cursor: pointer;
-      margin-right: 7px;
-      &:hover,
-      &:focus {
-        color: $link-color;
-        text-decoration: none;
+    .secondary-nav-item-pf.active {
+      .nav-pf-secondary-nav {
+        visibility: visible;
+        opacity: 1;
       }
     }
   }
-  h5 {
-    color: $nav-pf-vertical-secondary-color;
-    cursor: default;
-    font-size: ($font-size-base + 1);
-    font-weight: 600;
-    margin: $nav-pf-vertical-secondary-list-header-margin;
+}
+.nav-item-pf-header {
+  color: $nav-pf-vertical-secondary-color;
+  font-size: ($font-size-base + 4);
+  margin: $nav-pf-vertical-secondary-header-margin;
+  > a {
+    cursor: pointer;
+    margin-right: 7px;
+    &:hover,
+    &:focus {
+      color: $link-color;
+      text-decoration: none;
+    }
   }
-  &.collapsed {  // Collapsed Primary Menu state
-    .list-group-item {  // Show only the icons
+}
+.nav-pf-vertical.collapsed { // Collapsed Primary Menu state
+  .list-group-item { // Show only the icons
+    > a {
+      width: $nav-pf-vertical-collapsed-width;
+      > .list-group-item-value {
+        display: none;
+      }
+    }
+    &.secondary-nav-item-pf { // Adjust widths
+      &.active > a,
       > a {
         width: $nav-pf-vertical-collapsed-width;
-        > .list-group-item-value {
-          display: none;
-          width: 0;
+        &:after {
+          right: 10px;
         }
       }
-      &.secondary-nav-item-pf { // Adjust widths
-        &.active > a,
+      &.active,
+      &:hover {
         > a {
-          width: $nav-pf-vertical-collapsed-width;
+          width: ($nav-pf-vertical-collapsed-width + 2);
           &:after {
-            right: 10px;
-          }
-        }
-        &.active,
-        &:hover {
-          > a {
-            width: ($nav-pf-vertical-collapsed-width + 2);
-            &:after {
-              right: 11px;
-            }
-          }
-        }
-      }
-    }
-    .nav-pf-secondary-nav {  // Adjust left placement
-      left: $nav-pf-vertical-collapsed-width;
-      .list-group-item {
-        > a {
-          width: ($nav-pf-vertical-width - 20);
-          > .list-group-item-value { // Continue to show labels for secondary menu items
-            display: inline-block;
-            width: inherit;
+            right: 11px;
           }
         }
       }
     }
-    .nav-pf-tertiary-nav { // Adjust left placement
-      left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width);
-      .list-group-item {
-        > a {
-          width: ($nav-pf-vertical-width - 20);
-          > .list-group-item-value {  // Continue to show labels for tertiary menu items
-            display: inline-block;
-            width: inherit;
-          }
-        }
-      }
-    }
-    &.collapsed-secondary-nav-pf,
-    &.collapsed-tertiary-nav-pf {
-      width: $nav-pf-vertical-width;
-      .secondary-nav-item-pf {
-        &:hover {
-          > a {
-            z-index: $zindex-navbar-fixed;
-          }
-        }
-      }
-      .nav-pf-secondary-nav {
-        left: 0;
-      }
-    }
-    &.collapsed-secondary-nav-pf {
-      .nav-pf-tertiary-nav {
-        left: $nav-pf-vertical-width;
-      }
-    }
-    &.collapsed-tertiary-nav-pf {
-      .nav-pf-tertiary-nav {
-        left: 0;
-      }
-    }
-    &.hover-secondary-nav-pf {
-      width: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width);
-      &.collapsed-secondary-nav-pf,
-      &.collapsed-tertiary-nav-pf {
-        width: $nav-pf-vertical-width;
-      }
-    }
-    &.hover-tertiary-nav-pf {
-      width: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width + $nav-pf-vertical-width);
-      &.collapsed-secondary-nav-pf {
-        width: ($nav-pf-vertical-width + $nav-pf-vertical-width);
-      }
-      &.collapsed-tertiary-nav-pf {
-        width: $nav-pf-vertical-width;
-      }
-    }
   }
 }
 .nav-pf-secondary-nav {
@@ -537,7 +581,8 @@
       height: inherit;
       padding: $nav-pf-vertical-secondary-link-padding;
       margin-left: 20px;
-      width: ($nav-pf-vertical-width - 20);
+      width: calc(#{$nav-pf-vertical-width} - 20px);
+
       &:hover {
         .list-group-item-value {
           text-decoration: underline;
@@ -555,16 +600,13 @@
       }
     }
     .badge-container-pf {
-      background-color: $nav-pf-vertical-secondary-badge-bg-color;
+      top: 5px;
       .badge {
         background: $nav-pf-vertical-secondary-badge-bg-color;
         color: $nav-pf-vertical-badge-color;
       }
     }
     .list-group-item-value {
-      display: inline-block;
-      line-height: 20px;
-      max-width: none;
       padding-left: 5px;
     }
     &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
@@ -586,7 +628,7 @@
       &.active,
       &:hover {
         > a {
-          width: ($nav-pf-vertical-width - 20 + 1);
+          width: calc(#{$nav-pf-vertical-width} - 19px);
           z-index: ($zindex-navbar-fixed + 3);
           &:after {
             right: 21px;
@@ -595,6 +637,24 @@
       }
     }
   }
+  .nav-pf-vertical-with-badges & {
+    left: $nav-pf-vertical-badges-width;
+    width: $nav-pf-vertical-badges-width;
+    .list-group-item {
+      width: $nav-pf-vertical-badges-width;
+      > a {
+        width: calc(#{$nav-pf-vertical-badges-width} - 20px);
+      }
+      &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
+        &.active,
+        &:hover {
+          > a {
+            width: calc(#{$nav-pf-vertical-badges-width} - 19px);
+          }
+        }
+      }
+    }
+  }
 }
 .nav-pf-tertiary-nav {
   background: $nav-pf-vertical-tertiary-bg-color;
@@ -603,7 +663,7 @@
   border-top: none;
   bottom: 0;
   display: block;
-  left: ($nav-pf-vertical-width + $nav-pf-vertical-width);
+  left: calc(#{$nav-pf-vertical-width} * 2);
   opacity: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -612,12 +672,19 @@
   visibility: hidden;
   width: $nav-pf-vertical-width;
   z-index: $zindex-navbar-fixed;
+  .nav-pf-vertical-with-badges & {
+    left: $nav-pf-vertical-badges-width;
+    width: $nav-pf-vertical-badges-width;
+    .show-mobile-nav {
+      left: 0;
+    }
+  }
   .tertiary-nav-item-pf.active & {  // Show tertiary menu if active and collapsed
     .collapsed-tertiary-nav-pf & {
       left: 0;
       opacity: 1;
       visibility: visible;
-      z-index: ($zindex-navbar-fixed + 2);
+      z-index: ($zindex-navbar-fixed + 3);
     }
   }
   .tertiary-nav-item-pf.is-hover & { // Show tertiary menu if hovering
@@ -666,20 +733,124 @@
       }
     }
     .badge-container-pf {
-      background-color: $nav-pf-vertical-tertiary-badge-bg-color;
+      top: 5px;
       .badge {
         background: $nav-pf-vertical-tertiary-badge-bg-color;
         color: $nav-pf-vertical-tertiary-badge-color;
       }
     }
     .list-group-item-value {
-      display: inline-block;
-      line-height: 20px;
-      max-width: none;
       padding-left: 5px;
     }
   }
 }
+.collapsed {
+  .nav-pf-secondary-nav { // Adjust left placement
+    left: $nav-pf-vertical-collapsed-width;
+    .list-group-item {
+      > a {
+        width: calc(#{$nav-pf-vertical-width} - 20px);
+        > .list-group-item-value { // Continue to show labels for secondary menu items
+          display: inline-block;
+        }
+      }
+    }
+  }
+  .nav-pf-tertiary-nav { // Adjust left placement
+    left: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+    .list-group-item {
+      > a {
+        width: calc(#{$nav-pf-vertical-width} - 20px);
+        > .list-group-item-value { // Continue to show labels for tertiary menu items
+          display: inline-block;
+        }
+      }
+    }
+  }
+  &.collapsed-secondary-nav-pf,
+  &.collapsed-tertiary-nav-pf {
+    width: $nav-pf-vertical-width;
+    .secondary-nav-item-pf {
+      &:hover {
+        > a {
+          z-index: $zindex-navbar-fixed;
+        }
+      }
+    }
+    .nav-pf-secondary-nav {
+      left: 0;
+    }
+  }
+  &.collapsed-secondary-nav-pf {
+    .nav-pf-tertiary-nav {
+      left: $nav-pf-vertical-width;
+    }
+  }
+  &.collapsed-tertiary-nav-pf {
+    .nav-pf-tertiary-nav {
+      left: 0;
+    }
+  }
+  &.hover-secondary-nav-pf {
+    width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+
+    &.collapsed-secondary-nav-pf,
+    &.collapsed-tertiary-nav-pf {
+      width: $nav-pf-vertical-width;
+    }
+  }
+  &.hover-tertiary-nav-pf {
+    width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+    &.collapsed-secondary-nav-pf {
+      width: calc(#{$nav-pf-vertical-width} * 2);
+    }
+    &.collapsed-tertiary-nav-pf {
+      width: $nav-pf-vertical-width;
+    }
+  }
+  &.nav-pf-vertical-with-badges {
+    .nav-pf-secondary-nav {
+      .list-group-item {
+        > a {
+          width: calc(#{$nav-pf-vertical-badges-width} - 20px);
+        }
+      }
+    }
+    .nav-pf-tertiary-nav {
+      left: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width});
+      .list-group-item {
+        > a {
+          width: calc(#{$nav-pf-vertical-badges-width} - 20px);
+        }
+      }
+    }
+    &.collapsed-secondary-nav-pf,
+    &.collapsed-tertiary-nav-pf {
+      width: $nav-pf-vertical-badges-width;
+    }
+    &.collapsed-secondary-nav-pf {
+      .nav-pf-tertiary-nav {
+        left: $nav-pf-vertical-badges-width;
+      }
+    }
+    &.hover-secondary-nav-pf {
+      width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width});
+      &.collapsed-secondary-nav-pf,
+      &.collapsed-tertiary-nav-pf {
+        width: $nav-pf-vertical-badges-width;
+      }
+    }
+    &.hover-tertiary-nav-pf {
+      width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+      &.collapsed-secondary-nav-pf {
+        width: calc(#{$nav-pf-vertical-width} * 2);
+      }
+      &.collapsed-tertiary-nav-pf {
+        width: $nav-pf-vertical-width;
+      }
+    }
+  }
+}
 .secondary-collapse-toggle-pf {
   display: none;
   font-family: $icon-font-name-fa;
@@ -760,19 +931,10 @@
 }
 .nav-pf-vertical.transitions {
   transition: width $nav-pf-menu-transition-period;
-  -webkit-transition: width $nav-pf-menu-transition-period;
-  -moz-transition: width $nav-pf-menu-transition-period;
-  -o-transition: width $nav-pf-menu-transition-period;
   .nav-pf-secondary-nav {
-    -webkit-transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
-    -moz-transition: visibility ease-in-out $nav-pf-menu-transition-period, opacity ease-in-out $nav-pf-menu-transition-period linear;
-    -o-transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
     transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
   }
   .nav-pf-tertiary-nav {
-    -webkit-transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
-    -moz-transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
-    -o-transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
     transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
   }
 }