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

style visited lessons with proper icon instead of emoji

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-04 13:11:29 +02:00
committed by Benedikt Rötsch
parent 9d3c6753b6
commit 38b431f17b
3 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,10 +20,14 @@
display: block; display: block;
color: var(--color-text-grey); color: var(--color-text-grey);
&:hover,
&.active { &.active {
position: relative;
font-family: var(--font-medium); font-family: var(--font-medium);
color: var(--color-text-default); color: var(--color-text-default);
}
&.active {
position: relative;
&:before, &:before,
&:after { &:after {
@@ -37,27 +41,27 @@
width: 3px; width: 3px;
background: var(--color-course-active); background: var(--color-course-active);
} }
&:after {
content: '👁';
left: calc(var(--toc-gap-left) * 2 * -1);
}
}
&:hover {
font-family: var(--font-medium);
color: var(--color-text-default);
} }
&.visited { &.visited {
position:relative; position:relative;
&:before, &:before,
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
} }
&:after { &:after {
content: '👁'; content: '';
display: block;
width: 16px;
height: 16px;
top: 50%;
left: calc(var(--toc-gap-left) * 2 * -1); left: calc(var(--toc-gap-left) * 2 * -1);
transform: translateY(-50%);
background: url('/images/icon-viewed.svg') no-repeat center center;
background-size: contain;
} }
} }
} }

6
public/images/icon-viewed.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 11">
<g fill="none" fill-rule="evenodd">
<path d="M0-3h17v17H0z"/>
<path fill="#A9B9C0" fill-rule="nonzero" d="M8.5.188C4.958.188 1.934 2.39.708 5.5c1.226 3.11 4.25 5.313 7.792 5.313S15.066 8.61 16.292 5.5C15.066 2.39 12.042.187 8.5.187zm0 8.854A3.543 3.543 0 0 1 4.958 5.5 3.543 3.543 0 0 1 8.5 1.958 3.543 3.543 0 0 1 12.042 5.5 3.543 3.543 0 0 1 8.5 9.042zm0-5.667c-1.176 0-2.125.95-2.125 2.125 0 1.176.95 2.125 2.125 2.125 1.176 0 2.125-.95 2.125-2.125 0-1.176-.95-2.125-2.125-2.125z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 571 B

28
public/stylesheets/style.css
View File

@@ -1192,12 +1192,16 @@ display: flex;
color: #8091a5; color: #8091a5;
} }
.table-of-contents__link.active { .table-of-contents__link:hover,
position: relative; .table-of-contents__link.active {
font-family: 'robotomedium', Helvetica, sans-serif; font-family: 'robotomedium', Helvetica, sans-serif;
color: #2a3039; color: #2a3039;
} }
.table-of-contents__link.active {
position: relative;
}
.table-of-contents__link.active:before, .table-of-contents__link.active:before,
.table-of-contents__link.active:after { .table-of-contents__link.active:after {
position: absolute; position: absolute;
@@ -1212,16 +1216,6 @@ display: flex;
background: #536171; background: #536171;
} }
.table-of-contents__link.active:after {
content: '👁';
left: -22px;
}
.table-of-contents__link:hover {
font-family: 'robotomedium', Helvetica, sans-serif;
color: #2a3039;
}
.table-of-contents__link.visited { .table-of-contents__link.visited {
position:relative; position:relative;
} }
@@ -1233,8 +1227,16 @@ display: flex;
} }
.table-of-contents__link.visited:after { .table-of-contents__link.visited:after {
content: '👁'; content: '';
display: block;
width: 16px;
height: 16px;
top: 50%;
left: -22px; left: -22px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: url('/images/icon-viewed.svg') no-repeat center center;
background-size: contain;
} }
.sidebar-menu {} .sidebar-menu {}