42 lines
1.0 KiB
SCSS
42 lines
1.0 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.nspaces,
|
||
|
|
%main-nav-vertical li.dcs {
|
||
|
|
margin-bottom: 25px;
|
||
|
|
padding: 0 20px;
|
||
|
|
}
|
||
|
|
// 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: .5rem;
|
||
|
|
}
|
||
|
|
%main-nav-vertical-action,
|
||
|
|
%main-nav-vertical [role="separator"] {
|
||
|
|
display: block;
|
||
|
|
padding: 7px 25px;
|
||
|
|
}
|
||
|
|
%main-nav-vertical [role="separator"] {
|
||
|
|
margin-top: .7rem;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
%main-nav-vertical-menu-panel {
|
||
|
|
min-width: 260px;
|
||
|
|
}
|