diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss index b9800c9a56..c4e6b0b0b6 100644 --- a/aio/src/styles/2-modules/_toc.scss +++ b/aio/src/styles/2-modules/_toc.scss @@ -50,140 +50,140 @@ background: $lightgray; } } + } - &.toc-heading { - mat-icon.rotating-icon { - height: 18px; - width: 18px; - position: relative; - left: -4px; - top: 5px; - } - - &:hover:not(.embedded) { - color: $accentblue; - } + &.toc-heading { + mat-icon.rotating-icon { + height: 18px; + width: 18px; + position: relative; + left: -4px; + top: 5px; } - &.toc-more-items { - color: $mediumgray; - top: 10px; + &:hover:not(.embedded) { + color: $accentblue; + } + } + + &.toc-more-items { + color: $mediumgray; + top: 10px; + position: relative; + + &:hover { + color: $accentblue; + } + + &::after { + content: 'expand_less'; + } + + &.collapsed::after { + content: 'more_horiz'; + } + } + + .mat-icon { + &.collapsed { + @include rotate(0deg); + } + + &:not(.collapsed) { + @include rotate(90deg); + } + } + + ul.toc-list { + list-style-type: none; + margin: 0; + padding: 0 8px 0 0; + + @media (max-width: 800px) { + width: auto; + } + + li { + box-sizing: border-box; + @include font-size(12); + @include line-height(16); + padding: 3px 0 3px 12px; position: relative; + transition: all 0.3s ease-in-out; + + &.h1:after { + content: ''; + display: block; + height: 1px; + width: 40%; + margin: 7px 0 4px 0; + background: $lightgray; + clear: both; + } + + &.h3 { + padding-left: 24px; + } + + a { + color: lighten($darkgray, 10); + overflow: visible; + @include font-size(12); + display: table-cell; + } &:hover { - color: $accentblue; - } - - &::after { - content: 'expand_less'; - } - - &.collapsed::after { - content: 'more_horiz'; - } - } - - .mat-icon { - &.collapsed { - @include rotate(0deg); - } - - &:not(.collapsed) { - @include rotate(90deg); - } - } - - ul.toc-list { - list-style-type: none; - margin: 0; - padding: 0 8px 0 0; - - @media (max-width: 800px) { - width: auto; - } - - li { - box-sizing: border-box; - @include font-size(12); - @include line-height(16); - padding: 3px 0 3px 12px; - position: relative; - transition: all 0.3s ease-in-out; - - &.h1:after { - content: ''; - display: block; - height: 1px; - width: 40%; - margin: 7px 0 4px 0; - background: $lightgray; - clear: both; + * { + color: $accentblue; } + } - &.h3 { - padding-left: 24px; - } + &.active { + * { + color: $blue; + font-weight: 500; - a { - color: lighten($darkgray, 10); - overflow: visible; - @include font-size(12); - display: table-cell; - } - - &:hover { - * { - color: $accentblue; - } - } - - &.active { - * { - color: $blue; - font-weight: 500; - - &:before { - content: ''; - border-radius: 50%; - left: -3px; - top: 12px; - background: $blue; - position: absolute; - width: 6px; - height: 6px; - } + &:before { + content: ''; + border-radius: 50%; + left: -3px; + top: 12px; + background: $blue; + position: absolute; + width: 6px; + height: 6px; } } } + } - &:not(.embedded) li { - &:before { - border-left: 1px solid $lightgray; - bottom: 0; - content: ''; - left: 0; - position: absolute; - top: 0; - } + &:not(.embedded) li { + &:before { + border-left: 1px solid $lightgray; + bottom: 0; + content: ''; + left: 0; + position: absolute; + top: 0; + } - &:first-child:before { - top: 13px; - } + &:first-child:before { + top: 13px; + } - &:last-child:before { - bottom: calc(100% - 14px); - } + &:last-child:before { + bottom: calc(100% - 14px); + } - &:not(.active):hover a:before { - content: ''; - border-radius: 50%; - left: -3px; - top: 12px; - background: $lightgray; - position: absolute; - width: 6px; - height: 6px; - } + &:not(.active):hover a:before { + content: ''; + border-radius: 50%; + left: -3px; + top: 12px; + background: $lightgray; + position: absolute; + width: 6px; + height: 6px; } } }