/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ %main-nav-vertical { position: absolute; left: 0; top: var(--chrome-height, 47px); width: var(--chrome-width, 280px); 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 > ul > [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; }