discourse/app/assets/stylesheets/desktop/menu-panel.scss
Alan Guo Xiang Tan 5990842dd9 UX: Revamp styling of sidebar
The following changes are made in this commit:

1. Move caret icon in sidebar section header to the right.
1. Each row in sidebar takes the full width which enables us to do a
full width highlight on hover and when sidebar link is active.
1. Ensure each row in Sidebar is of the same height.

Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 16:14:49 +08:00

46 lines
874 B
SCSS

.menu-panel {
&.user-menu.revamped {
width: unset;
}
.panel-body {
max-height: calc(100vh - 100px);
}
}
// Sidebar-hamburger hybrid
.hamburger-panel .revamped {
--d-sidebar-highlight-color: var(--highlight-medium);
--d-sidebar-row-horizontal-padding: 0.5rem;
width: var(--d-sidebar-width);
.sidebar-row {
padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
height: 27px;
align-items: center;
font-size: var(--font-down-1);
}
.panel-body-content {
width: 100%;
min-width: 0; // prevent content blowing out width
}
.sidebar-section-wrapper {
.sidebar-section-header-button {
opacity: 1;
}
.sidebar-section-link.active {
font-weight: normal;
color: var(--primary-high);
background: var(--tertiary-low);
}
}
.sidebar-footer-wrapper {
padding: 0.5em 0 0;
}
}