| // |
| // 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 fade(@color-pf-black, 15%); |
| 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; |
| outline: 0; |
| 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 { |
| text-decoration: none; |
| } |
| } |
| &.active, |
| &:hover { |
| > a { |
| 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 |
| @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: 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; |
| } |
| } |
| .nav-pf-tertiary-nav { |
| left: calc(@nav-pf-vertical-width * 2); |
| } |
| &.nav-pf-vertical-with-badges { |
| .nav-pf-secondary-nav { |
| width: calc(@nav-pf-vertical-badges-width * 2); |
| .collapsed-tertiary-nav-pf { |
| width: @nav-pf-vertical-badges-width; |
| } |
| } |
| .nav-pf-tertiary-nav { |
| left: 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: 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-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; |
| 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: 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: 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: 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; |
| &.nav-pf-vertical-with-badges { |
| width: @nav-pf-vertical-badges-width; |
| } |
| } |
| &.hover-tertiary-nav-pf { |
| 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)); |
| } |
| } |
| } |
| &.hover-tertiary-nav-pf { |
| width: calc(@nav-pf-vertical-width * 3); |
| &.nav-pf-vertical-with-badges { |
| width: 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: calc(@nav-pf-vertical-width - 20px); |
| |
| &:hover { |
| .list-group-item-value { |
| text-decoration: underline; |
| } |
| } |
| } |
| &.active > a:before { |
| display: none; |
| } |
| &.active, |
| &:hover { |
| > a { |
| 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: 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: 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; |
| border: 1px solid @nav-pf-vertical-border-color; |
| border-bottom: none; |
| border-top: none; |
| bottom: 0; |
| display: block; |
| left: 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, |
| &:hover { |
| > a { |
| 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: 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: 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; |
| } |
| > .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: 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; |
| 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; |
| } |
| } |
