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