pico/docs/scss/layout/_aside.scss
2021-07-02 16:54:41 +07:00

73 lines
1.1 KiB
SCSS

/**
* Docs: Aside
*/
main > aside {
nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
h1 {
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
h1 {
display: none;
}
}
}
li, summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
li a {
padding: 0.375rem 0.5rem;
svg {
vertical-align: middle;
}
}
a.secondary:focus {
background-color: transparent;
color: var(--primary-hover);
}
a.active,
a.active:hover {
color: var(--primary);
}
details {
padding-bottom: .25rem;
border-bottom: none;
summary {
color: var(--h3-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
&::after {
display: none;
}
}
&[open] summary {
color: var(--h3-color);
}
}
}