iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(aio): fix ToC styling (#17110) 

There seems to have been a bad rebase of #16228 on top of #16959, which affected
ToC styles from both PRs. This commit restores the horizontal line under `.h1`
elements and the vertical blue bar on the left-hand side of the ToC (with the
circle running along the bar to indicate the active section).

Fixes #17098
This commit is contained in:
George Kalpakas 2017-05-31 01:15:31 +03:00 committed by Victor Berchet
parent e5138081ec
commit 0d894a18fc
1 changed files with 37 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,11 +8,6 @@
overflow-x: hidden; overflow-x: hidden;
} }
.toc-content {
border-left: 1px solid $lightgray;
margin-left: 8px;
}
aio-toc { aio-toc {
&.embedded { &.embedded {
@media (min-width: 801px) { @media (min-width: 801px) {
@ -22,20 +17,15 @@ aio-toc {
} }
.toc-inner { .toc-inner {
&:not(.embedded) {
@media (max-width: 800px) {
border-left: 4px solid #4285f4;
display: none;
}
}
}
aio-toc > div {
font-size: 13px; font-size: 13px;
overflow-y: visible; overflow-y: visible;
padding: 4px 0 0 10px; padding: 4px 0 0 10px;
.toc-heading,
.toc-list .h1 {
font-size: 115%;
}
.toc-heading { .toc-heading {
font-weight: 500; font-weight: 500;
margin: 0 0 16px 8px; margin: 0 0 16px 8px;
@ -43,7 +33,6 @@ aio-toc > div {
} }
.toc-heading.secondary { .toc-heading.secondary {
padding-bottom: 0;
position: relative; position: relative;
top: -8px; top: -8px;
@ -63,18 +52,12 @@ aio-toc > div {
padding: 0; padding: 0;
text-align: start; text-align: start;
&:focus.embedded { &.embedded:focus {
outline: none; outline: none;
background: $lightgray; background: $lightgray;
} }
} }
button.toc-heading,
div.toc-heading,
ul.toc-list li.h1 {
font-size: 115%;
}
button.toc-heading { button.toc-heading {
md-icon.rotating-icon { md-icon.rotating-icon {
height: 18px; height: 18px;
@ -89,7 +72,6 @@ aio-toc > div {
} }
} }
button.toc-more-items { button.toc-more-items {
color: $mediumgray; color: $mediumgray;
top: 10px; top: 10px;
@ -121,7 +103,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 8px 0 0;
@media (max-width: 800px) { @media (max-width: 800px) {
width: auto; width: auto;
@ -130,37 +112,29 @@ aio-toc > div {
} }
ul.toc-list li { ul.toc-list li {
box-sizing: border-box;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin: 6px 0; padding: 3px 0 3px 12px;
// padding: 0 16px;
position: relative; position: relative;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
&.active { &.h1:after {
a { content: '';
color: $blue; display: block;
font-weight: 500; height: 1px;
} width: 40%;
margin: 7px 0 4px 0;
background: #DBDBDB;
clear: both;
}
&:before { &.h1, &.h2, &.h3 {
content: ''; border-left: 1px solid $blue;
border-radius: 50%;
left: -16px;
top: 10px;
background: $blue;
position: absolute;
width: 6px;
height: 6px;
}
} }
&.h3 { &.h3 {
margin-left: 8px; padding-left: 24px;
}
&:last-child a:before {
width: 0;
} }
a { a {
@ -171,39 +145,30 @@ aio-toc > div {
font-size: 12px; font-size: 12px;
display: table-cell; display: table-cell;
&:hover { &:hover {
color: $accentblue; color: $accentblue;
} }
}
&.h2 { &.active {
&:before { a {
content: ''; color: $blue;
left: -1px; font-weight: 500;
top: 10px; }
background: red;
position: absolute; &:before {
display: block; content: '';
width: 1px; border-radius: 50%;
height: calc(100% + 11px); left: -4px;
} top: 12px;
background: $blue;
position: absolute;
width: 6px;
height: 6px;
} }
} }
} }
// ul.toc-list li.h3 {
// margin-left: 15px;
// }
// ul.toc-list li.h1:after {
// content: "";
// display: block;
// height: 1px;
// width: 40%;
// margin: 24px 0px 10px;
// background: #DBDBDB;
// clear: both;
// }
} }
aio-toc.embedded > div.collapsed li.secondary { aio-toc.embedded > div.collapsed li.secondary {