64 lines
1.5 KiB
SCSS
64 lines
1.5 KiB
SCSS
%main-nav-vertical {
|
|
position: absolute;
|
|
left: 0;
|
|
top: var(--chrome-height, 47px);
|
|
width: var(--chrome-width, 300px);
|
|
height: calc(100vh - var(--chrome-height, 47px) - 35px);
|
|
padding-top: 35px;
|
|
overflow: auto;
|
|
}
|
|
// disable tabbing when not visible
|
|
%main-nav-vertical:not(.in-viewport) {
|
|
visibility: hidden;
|
|
}
|
|
%main-nav-vertical li.partition,
|
|
%main-nav-vertical li.partitions,
|
|
%main-nav-vertical li.nspaces {
|
|
margin-bottom: 25px;
|
|
padding: 0 26px;
|
|
}
|
|
%main-nav-vertical li.dcs {
|
|
padding: 0 18px;
|
|
}
|
|
// TODO: We no longer have the rule that menu-panel buttons only contain two
|
|
// items, left and right aligned. We should remove this and look to use
|
|
// align-self for anything that needs right aligning instead.
|
|
|
|
%main-nav-vertical [role='menuitem'] {
|
|
justify-content: flex-start !important;
|
|
}
|
|
%main-nav-vertical [role='menuitem'] span {
|
|
margin-left: 0.5rem;
|
|
}
|
|
%main-nav-vertical-action,
|
|
%main-nav-vertical li:not([role='separator']) > span,
|
|
%main-nav-vertical [role='separator'] {
|
|
display: block;
|
|
padding: 7px 25px;
|
|
}
|
|
%main-nav-vertical [role='separator'] {
|
|
margin-top: 0.7rem;
|
|
padding-bottom: 0;
|
|
}
|
|
%main-nav-vertical-popover-menu .disclosure {
|
|
position: relative;
|
|
}
|
|
%main-nav-vertical-popover-menu-trigger {
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 10px;
|
|
}
|
|
%main-nav-vertical-popover-menu-trigger::after {
|
|
float: right;
|
|
}
|
|
%main-nav-vertical-menu-panel {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: calc(100% - 2px);
|
|
}
|
|
%main-nav-vertical-hoisted {
|
|
visibility: visible;
|
|
position: fixed;
|
|
z-index: 10;
|
|
}
|