Files
the-example-app-nodejs/assets/stylesheets/global/table-of-contents.css
2017-11-07 17:33:32 +01:00

47 lines
901 B
CSS

:root {
--toc-gap-left: calc(var(--grid-gutter) / 2)
}
@block table-of-contents {
@element list {
list-style: none;
margin: 0;
padding: 0;
padding-left: var(--toc-gap-left);
}
@element item {
margin: 0 0 calc(var(--grid-gutter) / 4);
padding: 0;
font-size: 0.9em;
line-height: 1.8;
}
@element link {
display: block;
color: var(--color-text-grey);
&.active {
position: relative;
font-family: var(--font-medium);
color: var(--color-text-default);
&:before,
&:after {
position: absolute;
top: 0;
}
&:before {
content: '';
left: calc(var(--toc-gap-left) * 3 * -1);
bottom: 0;
width: 3px;
background: var(--color-course-active);
}
&:after {
content: '👁';
left: calc(var(--toc-gap-left) * 2 * -1);
}
}
}
}