Files
documentation/assets/scss/layouts/_sidebar.scss
2021-06-21 15:10:42 +02:00

140 lines
2.7 KiB
SCSS

.docs-links,
.docs-toc {
@extend %tfx;
scrollbar-width: thin;
scrollbar-color: var(--bg) var(--bg);
ul {
li { // sidebar & TOC links
margin: 0;
line-height: 24px;
}
}
}
.docs-links,
.docs-toc {
&::-webkit-scrollbar { width: 5px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb { background: transparent; }
&:hover {
scrollbar-width: thin;
scrollbar-color: var(--text-light) var(--bg-muted);
&::-webkit-scrollbar-track { background: var(--bg-muted); }
&::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: var(--radius); }
}
}
.docs-links h3,
.page-links h3 {
text-transform: uppercase;
font-size: $font-size-base;
margin: 1.25rem 0 0.5rem 0;
padding: 1.5rem 0 0 0;
@include break(d) {
margin: 1.125rem size(3) 0.75rem 0;
padding: 1.375rem 0 0 0;
}
}
.docs-links h3:not(:first-child) {
border-top: 2px solid var(--bg-muted);
}
a.docs-link,
.page-links a {
@extend %tfx;
color: var(--text-muted);
display: block;
padding: size(0.5) size(1); //0.125rem 0;
font-size: $font-size-base;
line-height: size(2);
border-radius: var(--radius);
@include break(d) {
margin: 0 size(3) 0 0;
}
&:hover {
color: var(--text);
background: var(--bg-muted);
text-decoration: none;
body.dark & {
color: var(--bg-white);
background: hsla(var(--bg-muted-hsl), 0.05);
}
}
&.active {
text-decoration: none;
color: var(--hub);
font-weight: 500;
background: hsla(var(--hub-hsl), 0.1);
body.dark & {
color: hsl(200.4, 93.2%, 77.1%);
background: hsla(200.4, 93.2%, 77.1%, 0.1);
}
}
}
.page-links { // TOC
a {
margin: 0;
font-size: 13px;
line-height: size(1.5);
font-weight: 500;
color: var(--text);
padding: size(0.5) size(1);
}
li {
margin-top: 0.375rem;
padding-top: 0.375rem;
ul {
li {
padding-left: 1rem;
padding-top: 0.125rem;
a {
font-weight: 400;
color: var(--text-muted);
}
}
}
}
}
/*
.page-links li:not(:first-child) {
border-top: 1px dashed $gray-200;
}
.page-links a {
color: $body-color;
display: block;
padding: 0.125rem 0;
font-size: $font-size-base * 0.9375;
}
.docs-link:hover,
.docs-link.active,
.page-links a:hover {
text-decoration: none;
color: $link-color;
}
*/
.docs-links h3.sidebar-link,
.page-links h3.sidebar-link {
text-transform: none;
font-size: $font-size-md;
font-weight: normal;
}
.docs-links h3.sidebar-link a,
.page-links h3.sidebar-link a {
color: $body-color;
}
.docs-links h3.sidebar-link a:hover,
.page-links h3.sidebar-link a:hover {
text-decoration: underline;
}