Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

course detail styling and basic lesson module styling

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 17:33:40 +02:00
committed by Benedikt Rötsch
parent 478633c398
commit 71c0c0e95a
13 changed files with 335 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/stylesheets/global/table-of-contents.css
View File

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