discourse/app/assets/stylesheets/common/base/sidebar-more-section-links.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

47 lines
1.0 KiB
SCSS

.sidebar-more-section-links-details {
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
}
.sidebar-more-section-links-details-summary {
color: var(--primary-high);
transition: background-color 0.25s;
display: flex;
align-items: center;
list-style: none;
box-sizing: border-box;
.d-icon {
margin-left: auto;
color: var(--primary-medium);
}
&::before {
display: none;
}
}
.sidebar-more-section-links-details-content-wrapper {
position: absolute;
width: 100%;
z-index: z("modal", "content") + 1;
background: transparent;
}
.sidebar-more-section-link-details-content {
background-color: var(--secondary);
box-shadow: shadow("dropdown");
border-radius: 5px;
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
.sidebar-row {
padding: calc(var(--d-sidebar-row-horizontal-padding) / 3);
}
}
.sidebar-more-section-links-details-content-secondary {
border-top: 1.5px solid var(--primary-low);
}
}