@kie-tools.dashbuilder-client.dist.org.dashbuilder.DashbuilderRuntime.less.vertical-nav.less Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of quarkus-dashbuilder-ui
Show all versions of quarkus-dashbuilder-ui
Dashbuilder extension Web Bundle
//
// 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;
}
}