| // |
| // Nav Vertical Alt |
| // -------------------------------------------------- |
| |
| .layout-pf-alt-fixed.transitions .nav-pf-vertical-alt { |
| transition: @flyout-transition-pf; |
| |
| &.collapsed .list-group-item .list-group-item-value { |
| transition: opacity 0ms 100ms, opacity 100ms linear; |
| } |
| |
| .list-group-item { |
| .badge { |
| transition: @flyout-transition-pf; |
| } |
| |
| .list-group-item-value { |
| transition: opacity 500ms ease-out; |
| transition-delay: 150ms; |
| } |
| } |
| } |
| |
| .nav-pf-vertical-alt { |
| background: @nav-pf-vertical-alt-bg-color; |
| |
| .ie9.layout-pf-alt-fixed & { |
| box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box |
| } |
| |
| .layout-pf-alt-fixed & { |
| border-right: 1px solid @nav-pf-vertical-alt-border-color; |
| bottom: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| left: 0; |
| position: fixed; |
| top: @navbar-pf-alt-height; // move out of way of navbar-pf-alt |
| width: @nav-pf-vertical-alt-width; |
| z-index: @zindex-navbar-fixed; |
| |
| &.collapsed { |
| width: @nav-pf-vertical-alt-collapsed-width !important; |
| |
| .list-group-item { |
| .badge { |
| padding: 2px 3px; |
| right: 21px; |
| top: 36px; |
| } |
| |
| .list-group-item-value { |
| opacity: 0; |
| } |
| } |
| } |
| |
| &.hidden { |
| display: none; |
| |
| &.show-mobile-nav { |
| box-shadow: 0 0 3px fade(@color-pf-black, 15%); |
| display: block !important; |
| } |
| } |
| } |
| |
| .layout-pf-alt-fixed-with-footer & { |
| bottom: @footer-pf-alt-height; |
| } |
| |
| .list-group { |
| border-top: 0; |
| margin-bottom: 0; |
| } |
| |
| .list-group-item { |
| padding: 0; |
| |
| a { |
| color: @gray-dark; |
| display: block; |
| font-size: (@font-size-base + 2); |
| height: @nav-pf-vertical-alt-link-height; |
| padding: @nav-pf-vertical-alt-link-padding; |
| position: relative; |
| white-space: nowrap; |
| |
| &:focus { |
| color: @gray-dark; |
| text-decoration: none; |
| } |
| |
| &:hover { |
| color: @nav-pf-vertical-alt-active-color; |
| text-decoration: none; |
| } |
| } |
| |
| &.active { |
| background-color: @nav-pf-vertical-alt-bg-color; |
| border-color: @list-group-border; |
| |
| &:before { |
| background: @nav-pf-vertical-alt-active-color; |
| content: " "; |
| display: block; |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 5px; |
| } |
| |
| a { |
| color: @nav-pf-vertical-alt-active-color; |
| } |
| } |
| |
| .badge { |
| background: @gray-dark; |
| border: 1px solid @nav-pf-vertical-alt-bg-color; |
| border-radius: 3px; |
| color: @nav-pf-vertical-alt-badge-color; |
| font-weight: 700; |
| font-size: (@font-size-base - 3); |
| padding: 5px; |
| position: absolute; |
| right: 15px; |
| text-align: center; |
| top: 21px; |
| |
| &.notifications { |
| background: @notification-badge-color; |
| } |
| } |
| |
| .fa, |
| .glyphicon, |
| .pficon { |
| float: left; |
| font-size: 18px; |
| line-height: 30px; |
| margin-right: 10px; |
| text-align: center; |
| width: 18px; |
| } |
| |
| .list-group-item-value { |
| display: inline-block; |
| line-height: 30px; |
| opacity: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| width: 140px; |
| } |
| |
| } |
| |
| .list-group-item-separator { |
| border-top-width: 5px; |
| } |
| |
| .sidebar-pf & { |
| margin-left: (-(@grid-gutter-width / 2)); |
| margin-right: (-(@grid-gutter-width / 2)); |
| } |
| } |
