mirror of
https://github.com/status-im/consul.git
synced 2025-02-17 08:07:35 +00:00
82a62cd2ed
* CSS for moving from a horizontal main menu to a side/vertical one * Add <App /> Component and rearrange <HashcorpConsul /> to use it 1. HashicorpConsul now uses <App /> 2. <App /> is now translated and adds 'skip to main content' functionality 3. Adds ember-in-viewport addon in order to visibly hide main navigation items in order to take them out of focus/tabbing 4. Slight amends to the dom service while I was there
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;
|
|
}
|