1ul.toc { 2 display: block; 3 margin: 0; 4 color: $text-color; 5 list-style-type: none; 6 & > li { 7 margin: map-get($spacers, 1) 0; 8 &.active { 9 a { 10 color: $main-color-1; 11 } 12 } 13 } 14 a { 15 display: inline-block; 16 margin: map-get($spacers, 1) / 4 0; 17 text-decoration: none !important; 18 @include link-colors($text-color, $main-color-1); 19 } 20 21 .toc-h1 { 22 color: $text-color-d; 23 a { 24 @include link-colors($text-color-d); 25 } 26 &.active { 27 a { 28 color: $main-color-1; 29 } 30 } 31 } 32 .toc-h5, .toc-h6 { 33 color: $text-color-l; 34 a { 35 @include link-colors($text-color-l); 36 } 37 &.active { 38 a { 39 color: $main-color-1; 40 } 41 } 42 } 43 44 .toc-h1 { 45 @include split-line(bottom); 46 padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0; 47 margin-bottom: map-get($spacers, 2); 48 font-size: map-get($base, font-size); 49 line-height: map-get($base, line-height); 50 } 51 .toc-h2 { 52 font-size: map-get($base, font-size-sm); 53 line-height: map-get($base, line-height-sm); 54 } 55 .toc-h1, 56 .toc-h2 { 57 font-weight: map-get($base, font-weight-bold); 58 } 59 .toc-h3, 60 .toc-h4, 61 .toc-h5, 62 .toc-h6 { 63 font-size: map-get($base, font-size-xs); 64 font-weight: map-get($base, font-weight); 65 line-height: map-get($base, line-height-xs); 66 } 67 .toc-h3 { 68 margin-left: map-get($spacers, 3); 69 } 70 .toc-h4 { 71 margin-left: map-get($spacers, 3) * 2; 72 } 73 .toc-h5, .toc-h6 { 74 margin-left: map-get($spacers, 3) * 3; 75 } 76} 77 78ul.toc--ellipsis { 79 & > li { 80 @include overflow(hidden); 81 text-overflow: ellipsis; 82 white-space: nowrap; 83 } 84} 85 86ul.toc--navigator { 87 & > li { 88 &.active { 89 a { 90 margin-left: -4px; 91 @include link-colors($main-color-1); 92 @include split-line(left, 4px, $main-color-1); 93 } 94 } 95 } 96 a { 97 padding-left: map-get($spacers, 2); 98 margin: map-get($spacers, 1) 0; 99 @include hover() { 100 background-color: transparent; 101 } 102 } 103 104 .toc-h2, 105 .toc-h3, 106 .toc-h4 { 107 color: $text-color-l; 108 a { 109 @include link-colors($text-color-l); 110 } 111 } 112}