cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): basic fix to the TOC styling

Browse Source 
Without any major refactoring these changes bring the TOC much closer to
how the Google developer docs TOC looks.

Closes #16646
This commit is contained in:
Peter Bacon Darwin 2017-05-10 00:11:06 +01:00 committed by Pete Bacon Darwin
parent 954c08e97c
commit 412ab3f20c
1 changed files with 5 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
aio/src/styles/2-modules/_toc.scss
View File

@ -25,16 +25,18 @@ aio-toc {
display: none; display: none;
} }
} }
} }
aio-toc > div { aio-toc > div {
border-left: 4px solid #4285f4;
font-size: 13px; font-size: 13px;
overflow-y: visible; overflow-y: visible;
padding: 4px 0 0 10px; padding: 4px 0 0 10px;
.toc-heading p { .toc-heading p {
font-weight: 500; font-weight: 500;
margin: 0 0 0 -11px; margin: 0;
padding: 0; padding: 0;
} }
@ -96,7 +98,7 @@ aio-toc > div {
ul.toc-list { ul.toc-list {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0 8px; padding: 0;
@media (max-width: 800px) { @media (max-width: 800px) {
width: auto; width: auto;
@ -108,25 +110,10 @@ aio-toc > div {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin: 6px 0; margin: 6px 0;
padding: 0 16px; padding: 0;
position: relative; position: relative;
transition: all 0.3 ease-in-out; transition: all 0.3 ease-in-out;
&:before {
content: '';
border-radius: 50%;
left: -3px;
top: 10px;
background: $lightgray;
position: absolute;
width: 6px;
height: 6px;
}
&:last-child a:before {
width: 0;
}
a { a {
font-size: 12px; font-size: 12px;
color: lighten($darkgray, 10); color: lighten($darkgray, 10);
@ -136,17 +123,6 @@ aio-toc > div {
&:hover { &:hover {
color: $accentblue; color: $accentblue;
} }
&:before {
content: '';
left: -1px;
top: 10px;
background: $lightgray;
position: absolute;
display: block;
width: 1px;
height: calc(100% + 11px);
}
} }
} }