patternfly-sass 0.0.0.pre.semantically.pre.released → 1.2.0

data/dist/sass/rcue/_vertical-nav.scss

@@ -1,944 +0,0 @@
-//
-//  Vertical navigation
-// --------------------------------------------------
-//
-// Basic Required Layout for Vertical Navigation
-//
-// .navbar navbar-pf-vertical
-//   .navbar-header
-//   .collapse navbar-collapse   <-- necessary for collapsing vertical nav and mobile
-// .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
-//         [primary icon] <-- Not shown if .hidden-icons-pf above
-//         .list-group-item-value
-//       .nav-pf-secondary-nav  <-- if .secondary-nav-item-pf above
-//         .nav-item-pf-header
-//           .secondary-collapse-toggle-pf data-toggle="collapse-secondary-nav"
-//         .list-group
-//           .list-group-item [.active] [tertiary-nav-item-pf]
-//             a
-//              .list-group-item-value
-//            .nav-pf-tertiary-nav  <-- if .tertiary-nav-item-pf above
-//              .nav-item-pf-header
-//                .tertiary-collapse-toggle-pf data-toggle="collapse-tertiary-nav"
-//              .list-group
-//                .list-group-item [.active] [tertiary-nav-item-pf]
-//                  a
-//                    .list-group-item-value
-//
-// .container-pf-nav-pf-vertical [.nav-pf-persistent-secondary] [.hidden-icons-pf]
-//
-
-.nav-pf-vertical {
-  background: $nav-pf-vertical-bg-color;
-  border-right: 1px solid $nav-pf-vertical-border-color;
-  bottom: 0;
-  left: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  top: $navbar-pf-height;
-  width: $nav-pf-vertical-width;
-  z-index: $zindex-navbar-fixed;
-  .layout-pf-fixed-with-footer & {
-    bottom: $footer-pf-height;
-  }
-  .ie9.layout-pf-fixed & {
-    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
-  }
-   &.hidden.show-mobile-nav {  // Mobile mode open
-    box-shadow: 0 0 3px rgba($color-pf-black, (15/100));
-    display: block !important;
-  }
-  &.hide-nav-pf {  // Used to hide navigation initially to avoid startup flicker
-    visibility: hidden !important;
-  }
-  .list-group {
-    border-top: 0;
-    margin-bottom: 0;
-  }
-  .list-group-item {
-    background-color: transparent;
-    border-color: $nav-pf-vertical-item-border-color;
-    padding: 0;
-    > a {
-      background-color: transparent;
-      color: $nav-pf-vertical-color;
-      cursor: pointer;
-      display: block;
-      font-size: ($font-size-base + 2);
-      font-weight: $nav-pf-vertical-font-weight;
-      height: $nav-pf-vertical-link-height;
-      line-height: 26px;
-      padding: $nav-pf-vertical-link-padding;
-      position: relative;
-      white-space: nowrap;
-      width: $nav-pf-vertical-width;
-      // When flexbox is supported nav item names take up all available space
-      @supports (display: flex) {
-        display: flex;
-        padding-right: 0;
-      }
-      .fa,
-      .glyphicon,
-      .pficon {
-        color: $nav-pf-vertical-icon-color;
-        float: left;
-        font-size: ($font-size-base + 8);
-        line-height: 26px;
-        margin-right: 10px;
-        text-align: center;
-        width: $nav-pf-vertical-icon-width;
-      }
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-    }
-    &.active > a,
-    &:hover > a,
-    & > a:focus {
-      background-color: $nav-pf-vertical-active-bg-color;
-      color: $nav-pf-vertical-active-color;
-      font-weight: $nav-pf-vertical-active-font-weight;
-      .fa,
-      .glyphicon,
-      .pficon {
-        color: $nav-pf-vertical-active-icon-color;
-      }
-    }
-    &.active {
-      > a:before {
-        background: $nav-pf-vertical-active-before-color;
-        content: " ";
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 3px;
-      }
-      &:hover { // to over-ride default list group setting
-        background-color: transparent;
-        border-color: $nav-pf-vertical-item-border-color;
-      }
-    }
-    .list-group-item-value {
-      display: block;
-      line-height: 25px;
-      max-width: 120px;
-      // If flexbox is supported, do not set max-width, take all space with just some right padding
-      // This generates a known issue on IE11:
-      // https://github.com/patternfly/patternfly/pull/810
-      @supports (display: flex) {
-        flex: 1;
-        max-width: none;
-        padding-right: 15px;
-      }
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .list-group-item-separator {
-    border-top-color: $nav-pf-vertical-item-border-color;
-    border-top-width: 2px;
-  }
-  &.nav-pf-vertical-with-badges {
-    width: $nav-pf-vertical-badges-width;
-    .list-group-item > a {
-      width: $nav-pf-vertical-badges-width;
-    }
-  }
-  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 {
-        .fa,
-        .glyphicon,
-        .pficon {
-          display: none;
-        }
-      }
-    }
-    &.collapsed {
-      display: none;
-    }
-  }
-  .badge-container-pf {
-    position: absolute;
-    right: 15px;
-    top: 20px;
-    // If flexbox is supported, use relative positioning to place to the right of the label
-    // and adjust the top position so that the secondary and tertiary nav items don't need to change
-    @supports (display: flex) {
-      padding-left: 0;
-      padding-right: 15px;
-      position: relative;
-      right: 0;
-      margin-top: -3px;
-      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;
-      }
-    }
-  }
-}
-.nav-pf-vertical-tooltip.tooltip {
-  margin-left: 15px;
-  .tooltip-inner {
-    background-color: $color-pf-white;
-    color: $color-pf-black-900;
-  }
-  .tooltip-arrow {
-    border-bottom-color: $color-pf-white;
-    left: calc(50% - 15px) !important;
-  }
-}
-.hover-secondary-nav-pf {
-  width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
-  &.nav-pf-vertical-with-badges {
-    width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
-  }
-}
-.hover-tertiary-nav-pf {
-  width: unquote("calc(#{$nav-pf-vertical-width} * 3)");
-  &.nav-pf-vertical-with-badges {
-    width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)");
-  }
-  .nav-pf-secondary-nav {
-    width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
-    .collapsed-tertiary-nav-pf {
-      width: $nav-pf-vertical-width;
-    }
-  }
-  .nav-pf-tertiary-nav {
-    left: unquote("calc(#{$nav-pf-vertical-width} * 2)");
-  }
-  &.nav-pf-vertical-with-badges {
-    .nav-pf-secondary-nav {
-      width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
-      .collapsed-tertiary-nav-pf {
-        width: $nav-pf-vertical-badges-width;
-      }
-    }
-    .nav-pf-tertiary-nav {
-      left: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
-    }
-  }
-}
-.nav-pf-vertical.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;
-    }
-  }
-  &.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;
-    }
-  }
-  &.hover-secondary-nav-pf {
-    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
-    &.nav-pf-vertical-with-badges {
-      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
-    }
-  }
-  &.hover-tertiary-nav-pf {
-    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
-    &.nav-pf-vertical-with-badges {
-      width: unquote("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;
-      opacity: 1;
-      visibility: visible;
-      z-index: ($zindex-navbar-fixed + 4);
-    }
-    > .nav-pf-tertiary-nav {
-      left: 0;
-      opacity: 1;
-      visibility: visible;
-      z-index: ($zindex-navbar-fixed + 8);
-    }
-  }
-  .nav-pf-secondary-nav {
-    left: 0;
-    .secondary-nav-item-pf:hover & {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-  .tertiary-nav-item-pf:hover {
-    .nav-pf-tertiary-nav {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-  .tertiary-nav-item-pf.mobile-nav-item-pf:hover {
-    .nav-pf-tertiary-nav {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}
-.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;
-    }
-    .list-group-item-value {
-      // If flex box is supported add some padding to account for the submenu indicator
-      @supports (display: flex) {
-        padding-right: 35px;
-      }
-    }
-  }
-  &.active,
-  &:hover {
-    > a {
-      width: unquote("calc(#{$nav-pf-vertical-width} + 1px)");
-      z-index: ($zindex-navbar-fixed + 1);
-      &:after {
-        right: 21px;
-      }
-      .collapsed-secondary-nav-pf & {
-        z-index: 0;
-      }
-      .collapsed-tertiary-nav-pf & {
-        z-index: 0;
-      }
-    }
-  }
-  .nav-pf-vertical-with-badges & {
-    &.active,
-    &:hover {
-      > a {
-        width: unquote("calc(#{$nav-pf-vertical-badges-width} + 1px)");
-      }
-    }
-  }
-}
-.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-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-badges-width;
-    }
-  }
-}
-.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-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: 0;
-      }
-    }
-  }
-}
-.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: unquote("calc(#{$nav-pf-vertical-width} * 2)");
-    &.nav-pf-vertical-with-badges {
-      width: unquote("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: unquote("calc(#{$nav-pf-vertical-width} * 2)");
-        &.nav-pf-vertical-with-badges {
-          width: unquote("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: unquote("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;
-        &.nav-pf-vertical-with-badges {
-          width: $nav-pf-vertical-badges-width;
-        }
-      }
-      &.hover-tertiary-nav-pf {
-        width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
-        &.nav-pf-vertical-with-badges {
-          width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2))");
-        }
-      }
-    }
-    &.hover-tertiary-nav-pf {
-      width: unquote("calc(#{$nav-pf-vertical-width} * 3)");
-      &.nav-pf-vertical-with-badges {
-        width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)");
-      }
-    }
-    .secondary-nav-item-pf.active {
-      .nav-pf-secondary-nav {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-}
-.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;
-    }
-  }
-}
-.nav-pf-vertical.collapsed { // Collapsed Primary Menu state
-  width: $nav-pf-vertical-collapsed-width;
-  .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;
-        &:after {
-          right: 10px;
-        }
-      }
-      &.active,
-      &:hover {
-        > a {
-          width: ($nav-pf-vertical-collapsed-width + 2);
-          &:after {
-            right: 11px;
-          }
-        }
-      }
-    }
-  }
-}
-.nav-pf-secondary-nav {
-  background: $nav-pf-vertical-secondary-bg-color;
-  border: 1px solid $nav-pf-vertical-border-color;
-  border-bottom: none;
-  border-top: none;
-  bottom: 0;
-  display: block;
-  left: $nav-pf-vertical-width;
-  opacity: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  top: $navbar-pf-height;
-  visibility: hidden;
-  width: $nav-pf-vertical-width;
-  z-index: $zindex-navbar-fixed;
-  .secondary-nav-item-pf.active & {  // Show secondary menu if active and either is collapsed
-    .collapsed-secondary-nav-pf & {
-      left: 0;
-      opacity: 1;
-      visibility: visible;
-      z-index: ($zindex-navbar-fixed + 2);
-    }
-    .collapsed-tertiary-nav-pf & {
-      left: 0;
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-  .secondary-nav-item-pf.is-hover & { // Show secondary menu if hovering
-    .hover-secondary-nav-pf & {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-  .ie9.layout-pf-fixed & {
-    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
-  }
-  .layout-pf-fixed-with-footer & {
-    bottom: $footer-pf-height;
-  }
-  .list-group-item {
-    border: none;
-    padding: $nav-pf-vertical-secondary-item-padding;
-    width: $nav-pf-vertical-width;
-    > a {
-      background-color: $nav-pf-vertical-secondary-bg-color;
-      color: $nav-pf-vertical-secondary-item-color;
-      font-size: $font-size-base;
-      font-weight: inherit;
-      height: inherit;
-      padding: $nav-pf-vertical-secondary-link-padding;
-      margin-left: 20px;
-      width: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
-    }
-    &.active > a:before {
-      display: none;
-    }
-    &.active > a,
-    &:hover > a,
-    & > a:focus {
-      background-color: $nav-pf-vertical-secondary-active-bg-color;
-      color: $nav-pf-vertical-secondary-active-color;
-    }
-    .badge-container-pf {
-      top: 5px;
-      .badge {
-        background: $nav-pf-vertical-secondary-badge-bg-color;
-        color: $nav-pf-vertical-badge-color;
-      }
-    }
-    .list-group-item-value {
-      padding-left: 5px;
-    }
-    &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
-      > a {
-        cursor: default;
-        &:after {
-          color: $nav-pf-vertical-secondary-indicator-color;
-          content: $fa-var-angle-right;
-          display: block;
-          font-family: "FontAwesome";
-          font-size: 20px;
-          line-height: 20px;
-          padding: $nav-pf-vertical-tertiary-indicator-padding;
-          position: absolute;
-          right: 20px;
-          top: 4px;
-        }
-        // If flex box is supported add some padding to account for the submenu indicator
-        .list-group-item-value {
-          @supports (display: flex) {
-            padding-right: 35px;
-          }
-        }
-      }
-      &.active,
-      &:hover {
-        > a {
-          width: unquote("calc(#{$nav-pf-vertical-width} - 19px)");
-          z-index: ($zindex-navbar-fixed + 3);
-          &:after {
-            right: 21px;
-          }
-        }
-      }
-    }
-  }
-  .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: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
-      }
-      &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
-        &.active,
-        &:hover {
-          > a {
-            width: unquote("calc(#{$nav-pf-vertical-badges-width} - 19px)");
-          }
-        }
-      }
-    }
-  }
-}
-.nav-pf-tertiary-nav {
-  background: $nav-pf-vertical-tertiary-bg-color;
-  border: 1px solid $nav-pf-vertical-border-color;
-  border-bottom: none;
-  border-top: none;
-  bottom: 0;
-  display: block;
-  left: unquote("calc(#{$nav-pf-vertical-width} * 2)");
-  opacity: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  top: $navbar-pf-height;
-  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 + 3);
-    }
-  }
-  .tertiary-nav-item-pf.is-hover & { // Show tertiary menu if hovering
-    .hover-tertiary-nav-pf & {
-      opacity: 1;
-      visibility: visible;
-      .collapsed.collapsed-tertiary-nav-pf & {
-        left: 0;
-      }
-    }
-  }
-  .ie9.layout-pf-fixed & {
-    box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
-  }
-  .layout-pf-fixed-with-footer & {
-    bottom: $footer-pf-height;
-  }
-  .nav-item-pf-header {
-    color: $nav-pf-vertical-tertiary-color;
-    margin: $nav-pf-vertical-tertiary-header-margin;
-  }
-  h5 {
-    color: $nav-pf-vertical-tertiary-color;
-    margin: $nav-pf-vertical-tertiary-list-header-margin;
-  }
-  .list-group-item {
-    border: none;
-    padding: $nav-pf-vertical-tertiary-item-padding;
-    > a {
-      background-color: transparent;
-      color: $nav-pf-vertical-tertiary-item-color;
-      font-size: $font-size-base;
-      font-weight: inherit;
-      height: inherit;
-      margin: $nav-pf-vertical-tertiary-link-margin;
-      padding: $nav-pf-vertical-tertiary-link-padding;
-    }
-    &.active > a:before {
-      display: none;
-    }
-    &.active > a,
-    &:hover > a,
-    & > a:focus {
-      background-color: $nav-pf-vertical-tertiary-active-bg-color;
-      color: $nav-pf-vertical-tertiary-active-color;
-    }
-    .badge-container-pf {
-      top: 5px;
-      .badge {
-        background: $nav-pf-vertical-tertiary-badge-bg-color;
-        color: $nav-pf-vertical-tertiary-badge-color;
-      }
-    }
-    .list-group-item-value {
-      padding-left: 5px;
-    }
-  }
-}
-.collapsed {
-  .nav-pf-secondary-nav { // Adjust left placement
-    left: $nav-pf-vertical-collapsed-width;
-    .list-group-item {
-      > a {
-        width: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
-        > .list-group-item-value { // Continue to show labels for secondary menu items
-          display: inline-block;
-        }
-        > .badge-container-pf {
-          display: inline-block;
-        }
-      }
-    }
-  }
-  .nav-pf-tertiary-nav { // Adjust left placement
-    left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
-    .list-group-item {
-      > a {
-        width: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
-        > .list-group-item-value { // Continue to show labels for tertiary menu items
-          display: inline-block;
-        }
-        > .badge-container-pf {
-          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: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
-    &.collapsed-secondary-nav-pf {
-      width: unquote("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: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
-        }
-      }
-    }
-    .nav-pf-tertiary-nav {
-      left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
-      .list-group-item {
-        > a {
-          width: unquote("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: unquote("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: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
-      &.collapsed-secondary-nav-pf {
-        width: unquote("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;
-  font-size: inherit;
-  opacity: 0;
-  pointer-events: none;
-  -webkit-font-smoothing: antialiased;
-  &:before {
-    content: $fa-var-arrow-circle-o-left;
-  }
-  &.collapsed {
-    &:before {
-      content: $fa-var-arrow-circle-o-right;
-    }
-  }
-}
-.tertiary-collapse-toggle-pf {
-  display: none;
-  font-family: $icon-font-name-fa;
-  font-size: inherit;
-  opacity: 0;
-  pointer-events: none;
-  -webkit-font-smoothing: antialiased;
-  &:before {
-    content: $fa-var-arrow-circle-o-left;
-  }
-  &.collapsed {
-    &:before {
-      content: $fa-var-arrow-circle-o-right;
-    }
-  }
-}
-.nav-pf-vertical-collapsible-menus {
-  .secondary-collapse-toggle-pf {
-    display: inline-block;
-  }
-  .secondary-nav-item-pf.active {
-    .secondary-collapse-toggle-pf {
-      opacity: 1;
-      pointer-events: all;
-    }
-  }
-  .tertiary-collapse-toggle-pf {
-    display: inline-block;
-  }
-  .tertiary-nav-item-pf.active {
-    .tertiary-collapse-toggle-pf {
-      opacity: 1;
-      pointer-events: all;
-    }
-  }
-}
-.show-mobile-nav {
-  .secondary-collapse-toggle-pf {
-    display: inline-block;
-    opacity: 1;
-    pointer-events: all;
-    &:before {
-      content: $fa-var-arrow-circle-o-left;
-    }
-  }
-  .tertiary-collapse-toggle-pf {
-    display: inline-block;
-    opacity: 1;
-    pointer-events: all;
-    &:before {
-      content: $fa-var-arrow-circle-o-left;
-    }
-  }
-}
-.force-hide-secondary-nav-pf { // Used to temporarily hide sub-menus on an unpin event
-  .nav-pf-secondary-nav {
-    display: none !important;
-  }
-  .nav-pf-tertiary-nav {
-    display: none !important;
-  }
-}
-.nav-pf-vertical.transitions {
-  transition: width $nav-pf-menu-transition-period;
-  .nav-pf-secondary-nav {
-    transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
-  }
-  .nav-pf-tertiary-nav {
-    transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear;
-  }
-}