| // |
| // Navigation Bar for use with vertical navigation |
| // -------------------------------------------------- |
| |
| .navbar-pf-vertical { |
| background-color: @navbar-pf-vertical-bg-color; |
| border: none; |
| border-radius: 0; |
| border-top: @navbar-pf-vertical-border-width @navbar-pf-vertical-border-style @navbar-pf-vertical-border-color; |
| margin-bottom: 0; |
| |
| .infotip.bottom-right .arrow { |
| left: 90%; |
| } |
| |
| .layout-pf-fixed & { |
| left: 0; |
| position: fixed; |
| right: 0; |
| top: 0; |
| z-index: @zindex-navbar-fixed; |
| } |
| |
| .nav { |
| &.navbar-nav > li > .dropdown-menu.infotip { |
| margin-top: 0; |
| } |
| |
| .nav-item-iconic { |
| cursor: pointer; |
| line-height: 1; |
| max-height: (@navbar-pf-vertical-height - @navbar-pf-vertical-border-width); // to keep Firefox from oversizing icons |
| padding: @navbar-pf-vertical-nav-item-iconic-padding; |
| position: relative; |
| |
| &:hover, |
| &:focus { |
| background-color: transparent; |
| |
| .caret, |
| .fa, |
| .glyphicon, |
| .pficon { |
| color: @navbar-pf-vertical-active-color; |
| } |
| } |
| |
| .badge { |
| background-color: @notification-badge-color; |
| border-radius: 20px; |
| color: @navbar-pf-vertical-active-color; |
| cursor: pointer; |
| font-size: (@font-size-base - 3); |
| font-weight: 700; |
| margin: 0 0 -11px -12px; |
| min-width: 0; |
| padding: 2px 4px; |
| } |
| |
| .caret, |
| .fa, |
| .pficon { |
| color: @navbar-pf-vertical-color; |
| font-size: (@font-size-base + 4); |
| } |
| |
| .caret { |
| font-size: @font-size-base; |
| width: auto; |
| } |
| |
| } |
| |
| .open > .nav-item-iconic { |
| &, |
| &:hover, |
| &:focus { |
| background: transparent; |
| |
| .caret, |
| .fa, |
| .pficon { |
| color: @navbar-pf-vertical-active-color; |
| } |
| } |
| } |
| } |
| |
| .navbar-brand { |
| color: @navbar-pf-vertical-navbar-brand-color; |
| height: auto; |
| margin: @navbar-pf-vertical-navbar-brand-margin; |
| min-height: @navbar-pf-vertical-navbar-brand-min-height; |
| padding: @navbar-pf-vertical-navbar-brand-padding; |
| |
| .navbar-brand-name { |
| display: inline-block; |
| margin: @navbar-pf-vertical-navbar-brand-name-margin; |
| // hide once screen gets too small |
| @media (max-width: @navbar-pf-vertical-navbar-brand-name-breakpoint) { |
| display: none; |
| } |
| } |
| |
| .navbar-brand-icon { |
| display: inline-block; |
| margin: @navbar-pf-vertical-navbar-brand-icon-margin; |
| } |
| } |
| |
| .navbar-iconic { |
| margin-right: 0; |
| } |
| |
| .navbar-toggle { |
| border: 0; |
| display: block; |
| float: left; |
| margin: @navbar-pf-vertical-navbar-toggle-margin; |
| |
| &:hover, |
| &:focus { |
| .icon-bar { |
| background: @navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg; |
| } |
| } |
| |
| + .navbar-brand { |
| margin-left: 0; |
| } |
| |
| .icon-bar { |
| background: @navbar-pf-vertical-color; |
| } |
| } |
| } |
