picocss/docs/scss/layout/_aside.scss

124 lines
2 KiB
SCSS
Raw Normal View History

2019-11-27 22:10:02 +07:00
/**
* Docs: Aside
*/
main > aside {
2019-11-27 22:10:02 +07:00
nav {
width: 100%;
2021-12-23 23:29:45 +07:00
padding-bottom: var(--block-spacing-vertical);
2019-11-27 22:10:02 +07:00
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
max-height: calc(100vh - 5.5rem);
overflow-x: hidden;
overflow-y: auto;
}
a#toggle-docs-navigation {
2022-02-27 14:41:34 +07:00
display: block;
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
2019-11-27 22:10:02 +07:00
svg {
margin-right: calc(var(--spacing) * 0.5);
vertical-align: -3px;
}
@media (min-width: map-get($breakpoints, "lg")) {
2019-11-27 22:10:02 +07:00
display: none;
}
}
&.closed-on-mobile {
a#toggle-docs-navigation {
svg.collapse {
display: none;
}
}
details {
display: none;
}
@media (min-width: map-get($breakpoints, "lg")) {
details {
display: block;
}
> a#toggle-docs-navigation {
display: none;
}
}
}
&.open {
a#toggle-docs-navigation {
svg.expand {
display: none;
}
}
}
2019-11-27 22:10:02 +07:00
}
2021-10-24 12:33:20 +07:00
li,
summary {
2019-11-27 22:10:02 +07:00
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
2022-02-27 14:41:34 +07:00
ul {
padding-left: 0.25rem;
}
2019-11-27 22:10:02 +07:00
li a {
2022-02-27 14:41:34 +07:00
--nav-link-spacing-vertical: 0.25rem;
--nav-link-spacing-horizontal: 0.75rem;
2019-11-27 22:10:02 +07:00
svg {
vertical-align: middle;
}
}
2019-12-11 08:46:32 +07:00
a.secondary:focus {
background-color: transparent;
color: var(--primary-hover);
}
a.active,
a.active:hover {
color: var(--primary);
2019-11-27 22:10:02 +07:00
}
details {
border-bottom: none;
summary {
2021-07-18 10:35:59 +07:00
color: var(--h1-color);
2021-11-08 00:12:34 +07:00
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
&::after {
display: none;
}
}
2019-11-27 22:10:02 +07:00
2021-07-18 10:35:59 +07:00
&[open] {
> summary {
2022-02-27 14:41:34 +07:00
margin-bottom: 0;
&:not(:focus) {
color: var(--h1-color);
}
2021-07-18 10:35:59 +07:00
}
2019-11-27 22:10:02 +07:00
}
}
}