2f832b6878
This PR is updating the sidebar so that the current active page sidebar is viewable via bold and the marker.
80 lines
1.3 KiB
SCSS
80 lines
1.3 KiB
SCSS
.sidebar {
|
|
width: 260px;
|
|
position: sticky;
|
|
top: 0;
|
|
padding-bottom: $spacer-5;
|
|
overflow-y: auto;
|
|
height: 100vh;
|
|
flex-shrink: 0;
|
|
|
|
@include breakpoint(xl) {
|
|
width: 280px;
|
|
}
|
|
}
|
|
|
|
.sidebar-products > li {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sidebar-products a,
|
|
.sidebar-products .arrow {
|
|
text-decoration: none;
|
|
display: block;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.sidebar-category,
|
|
.sidebar-product {
|
|
> a,
|
|
summary a {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.sidebar-category.active {
|
|
background-color: rgba(#959da5, 0.1); // --color-auto-gray-4
|
|
// We can't do rgba(var(--color-auto-gray-4, 0.1) quite yet
|
|
// as the browsers are still working on supporting that combination
|
|
}
|
|
|
|
.sidebar-article {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: $spacer-4;
|
|
height: 100%;
|
|
border-left: 1px solid var(--color-text-primary);
|
|
width: 1px;
|
|
top: 0;
|
|
}
|
|
|
|
&.active {
|
|
&::before {
|
|
border-left: 3px solid var(--color-text-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-current-page > a {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
// only display child lists of active elements in sidebar
|
|
.sidebar-product.active > ul,
|
|
.sidebar-category.active > ul,
|
|
.sidebar-maptopic.active > ul {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar-category {
|
|
> ul {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.sidebar-maptopic > ul {
|
|
display: none;
|
|
}
|