/* TPP override: sidebar collapse toggle icon. * * Vuexy's compiled core.css sets the brand-area menu toggle glyph to * ti-circle-dot (expanded) / ti-circle (collapsed) — see * src/scss/_components/_layout.scss. That reads as a stray radio/target dot * rather than a "collapse the sidebar" control. * * This file restores a conventional directional chevron. * * !important is required: Vuexy's template-customizer.js re-injects core.css * into at runtime (it manages the .template-customizer-core-css links), * landing AFTER this file. Our rule and the vendor rule have equal specificity, * so without !important the later-in-DOM vendor rule wins and the dot returns. * * Expanded -> chevron-left (\ea60) : collapses the menu toward the left edge * Collapsed -> chevron-right (\ea61) : expands it back out */ .layout-menu-toggle .menu-toggle-icon::before { content: "\ea60" !important; } .layout-menu-collapsed .layout-menu-toggle .menu-toggle-icon::before { content: "\ea61" !important; } /* Hide the "The Packaging People" wordmark when the sidebar is collapsed, so it * doesn't peek out of the narrow rail. The wordmark is a bare (no Vuexy * .app-brand-text class), so Vuexy's own collapse logic never hides it. We gate * on :not(.layout-menu-hover) — mirroring Vuexy's brand-text rule — so the * wordmark reappears when the collapsed menu is hovered/expanded. The circle * mark (logo_tpp.png) is left untouched and remains as the collapsed icon. */ .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand img[src*="TPP_PRIMARY"] { display: none !important; } /* Breathing room above/below the brand logos. demo.css pins .app-brand to a * fixed 64px (only ~11px around the 42px logo); switch to auto height + vertical * padding so the logos aren't cramped against the top edge. Symmetric padding * keeps the brand block balanced relative to the first menu item. */ .layout-menu .app-brand.demo { height: auto !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }