diff --git a/_sass/common/components/_toc.scss b/_sass/common/components/_toc.scss index cd97a981db3..4cb27d7709e 100644 --- a/_sass/common/components/_toc.scss +++ b/_sass/common/components/_toc.scss @@ -4,65 +4,58 @@ ul.toc { color: $text-color; list-style-type: none; & > li { - margin: map-get($spacers, 1) 0; - &.active { - a { - color: $main-color-1; - } - } - } - a { - display: inline-block; - margin: map-get($spacers, 1) / 4 0; - text-decoration: none !important; - @include link-colors($text-color, $main-color-1); - } - - .toc-h1 { - color: $text-color-d; + margin: map-get($spacers, 1) / 2 0; a { - @include link-colors($text-color-d); - } - &.active { - a { - color: $main-color-1; - } + display: inline-block; + margin: map-get($spacers, 1) / 4 0; + text-decoration: none !important; } } - .toc-h5, .toc-h6 { - color: $text-color-l; + .toc-h1, + .toc-h2, + .toc-h3, + .toc-h4, + .toc-h5, + .toc-h6 { a { - @include link-colors($text-color-l); + @include link-colors($text-color, $main-color-1); } &.active { a { - color: $main-color-1; + @include link-colors($main-color-1); } } } + .toc-h2, + .toc-h3, + .toc-h4, + .toc-h5, + .toc-h6 { + &, a { + font-size: map-get($base, font-size-xs); + font-weight: map-get($base, font-weight); + line-height: map-get($base, line-height-xs); + } + } .toc-h1 { @include split-line(bottom); padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0; margin-bottom: map-get($spacers, 2); - font-size: map-get($base, font-size); - line-height: map-get($base, line-height); - } - .toc-h2 { - font-size: map-get($base, font-size-sm); - line-height: map-get($base, line-height-sm); + color: $text-color-d; + &, a { + font-size: map-get($base, font-size-sm); + font-weight: map-get($base, font-weight-bold); + line-height: map-get($base, line-height-sm); + } + a { + @include link-colors($text-color-d, $main-color-1); + } } - .toc-h1, .toc-h2 { - font-weight: map-get($base, font-weight-bold); - } - .toc-h3, - .toc-h4, - .toc-h5, - .toc-h6 { - font-size: map-get($base, font-size-xs); - font-weight: map-get($base, font-weight); - line-height: map-get($base, line-height-xs); + &, a { + font-weight: map-get($base, font-weight-bold); + } } .toc-h3 { margin-left: map-get($spacers, 3); @@ -70,9 +63,16 @@ ul.toc { .toc-h4 { margin-left: map-get($spacers, 3) * 2; } - .toc-h5, .toc-h6 { + .toc-h5, + .toc-h6 { margin-left: map-get($spacers, 3) * 3; } + .toc-h6 { + color: $text-color-l; + a { + @include link-colors($text-color-l, $main-color-1); + } + } } ul.toc--ellipsis { @@ -85,22 +85,17 @@ ul.toc--ellipsis { ul.toc--navigator { & > li { + a { + padding-left: map-get($spacers, 2); + margin: map-get($spacers, 1) 0; + } &.active { a { margin-left: -4px; - @include link-colors($main-color-1); @include split-line(left, 4px, $main-color-1); } } } - a { - padding-left: map-get($spacers, 2); - margin: map-get($spacers, 1) 0; - @include hover() { - background-color: transparent; - } - } - .toc-h2, .toc-h3, .toc-h4 { @@ -109,4 +104,21 @@ ul.toc--navigator { @include link-colors($text-color-l); } } + .toc-h1 { + &, a { + font-size: map-get($base, font-size); + line-height: map-get($base, line-height); + } + color: $text-color-d; + a { + @include link-colors($text-color-d); + } + } + .toc-h2 { + &, a { + font-size: map-get($base, font-size-sm); + font-weight: map-get($base, font-weight-bold); + line-height: map-get($base, line-height-sm); + } + } }