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

fix(docs-infra): fix placement of TOC hover/active markers (dots) (#40802) 

This commit fixes the placement of the TOC hover/active markers (dots)
so that they are horizontally in the middle of the marker "rail" and
vertically in the middle of the item's first line.

This commit also refactors the `_toc.scss` to be more DRY (wrt styling
the TOC markers/marker rail) and uses Sass variables and mixins to
ensure that the styling is kept up-to-date wrt future typography changes
to TOC items.

Before: ![toc marker before][1]
After: ![toc marker after][2]

[1]: https://user-images.githubusercontent.com/8604205/107270751-03e3f400-6a54-11eb-9d77-5b0a3cfb1c2b.png
[2]: https://user-images.githubusercontent.com/8604205/107270758-047c8a80-6a54-11eb-82c0-98b832c109a3.png

PR Close #40802
This commit is contained in:
George Kalpakas 2021-02-13 16:01:56 +02:00 committed by Joey Perrott
parent 5a7eba294a
commit fae0f1f213
1 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,20 @@
$tocItemLineHeight: 24;
$tocItemTopPadding: 9;
$tocMarkerRailSize: 1;
$tocMarkerSize: 6;
@mixin tocMarker($color) {
background: $color;
border-radius: 50%;
content: '';
height: #{$tocMarkerSize}px;
left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px;
position: absolute;
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
width: #{$tocMarkerSize}px;
}
.toc-container {
width: 18%;
position: fixed;
@ -106,7 +123,8 @@ aio-toc {
li {
box-sizing: border-box;
padding: 9px 0 9px 12px;
@include line-height($tocItemLineHeight);
padding: #{$tocItemTopPadding}px 0 #{$tocItemTopPadding}px 12px;
position: relative;
transition: all 0.3s ease-in-out;
@ -128,7 +146,7 @@ aio-toc {
color: lighten($darkgray, 10);
overflow: visible;
@include font-size(14);
@include line-height(24);
line-height: inherit;
display: table-cell;
}
@ -142,24 +160,17 @@ aio-toc {
* {
color: $blue;
font-weight: 500;
}
&:before {
content: '';
border-radius: 50%;
left: -3px;
top: 14px;
background: $blue;
position: absolute;
width: 6px;
height: 6px;
}
a:before {
@include tocMarker($blue);
}
}
}
&:not(.embedded) li {
&:before {
border-left: 1px solid $lightgray;
border-left: #{$tocMarkerRailSize}px solid $lightgray;
bottom: 0;
content: '';
left: 0;
@ -168,22 +179,19 @@ aio-toc {
}
&:first-child:before {
top: 15px;
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
}
&:last-child:before {
bottom: calc(100% - 15px);
bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px + #{$tocMarkerSize / 2}px));
bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem + #{$tocMarkerSize / 2}px));
}
&:not(.active):hover a:before {
content: '';
border-radius: 50%;
left: -3px;
top: 14px;
background: $lightgray;
position: absolute;
width: 6px;
height: 6px;
&:not(.active):hover {
a:before {
@include tocMarker($lightgray);
}
}
}
}