honeymoose/angular-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)

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