diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss index 5ff87e7ddf..2dc2565ef4 100644 --- a/aio/src/styles/1-layouts/_layout-global.scss +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -7,6 +7,10 @@ body, background-color: $white; } +.github-links + .content h1 { + max-width: 90%; +} + .clearfix { content: ""; display: table; diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss index 9f128783d0..87284ea7a8 100644 --- a/aio/src/styles/2-modules/_toc.scss +++ b/aio/src/styles/2-modules/_toc.scss @@ -6,183 +6,183 @@ bottom: 12px; overflow-y: auto; overflow-x: hidden; +} - .toc-inner { - @include font-size(13); - overflow-y: visible; - padding: 4px 0 0 10px; +.toc-inner { + @include font-size(13); + overflow-y: visible; + padding: 4px 0 0 10px; - .toc-heading, - .toc-list .h1 { - @include font-size(16); - } + .toc-heading, + .toc-list .h1 { + @include font-size(16); + } - .toc-heading { - font-weight: 500; - margin: 0 0 16px 8px; - padding: 0; + .toc-heading { + font-weight: 500; + margin: 0 0 16px 8px; + padding: 0; - &.secondary { - position: relative; - top: -8px; - - &:hover { - color: $accentblue; - } - - } - } - - button.toc-heading, - button.toc-more-items { - cursor: pointer; - display: inline-block; - background: 0; - background-color: transparent; - border: none; - box-shadow: none; - padding: 0; - text-align: start; - - &.embedded:focus { - outline: none; - background: $lightgray; - } - } - - button.toc-heading { - mat-icon.rotating-icon { - height: 18px; - width: 18px; - position: relative; - left: -4px; - top: 5px; - } - - &:hover:not(.embedded) { - color: $accentblue; - } - } - - button.toc-more-items { - color: $mediumgray; - top: 10px; + &.secondary { position: relative; + top: -8px; &:hover { color: $accentblue; } - &::after { - content: 'expand_less'; - } + } + } - &.collapsed::after { - content: 'more_horiz'; - } + button.toc-heading, + button.toc-more-items { + cursor: pointer; + display: inline-block; + background: 0; + background-color: transparent; + border: none; + box-shadow: none; + padding: 0; + text-align: start; + + &.embedded:focus { + outline: none; + background: $lightgray; + } + } + + button.toc-heading { + mat-icon.rotating-icon { + height: 18px; + width: 18px; + position: relative; + left: -4px; + top: 5px; } - .mat-icon { - &.collapsed { - @include rotate(0deg); - } + &:hover:not(.embedded) { + color: $accentblue; + } + } - &:not(.collapsed) { - @include rotate(90deg); - } + button.toc-more-items { + color: $mediumgray; + top: 10px; + position: relative; + + &:hover { + color: $accentblue; } - ul.toc-list { - list-style-type: none; - margin: 0; - padding: 0 8px 0 0; + &::after { + content: 'expand_less'; + } - @media (max-width: 800px) { - width: auto; + &.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; } - li { - box-sizing: border-box; + &.h3 { + padding-left: 24px; + } + + a { + color: lighten($darkgray, 10); + overflow: visible; @include font-size(12); - @include line-height(16); - padding: 3px 0 3px 12px; - position: relative; - transition: all 0.3s ease-in-out; + display: table-cell; + } - &.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; - } - } - - &.active { - * { - color: $blue; - font-weight: 500; - - &:before { - content: ''; - border-radius: 50%; - left: -3px; - top: 12px; - background: $blue; - position: absolute; - width: 6px; - height: 6px; - } - } + &:hover { + * { + color: $accentblue; } } - &:not(.embedded) li { - &:before { - border-left: 1px solid $lightgray; - bottom: 0; - content: ''; - left: 0; - position: absolute; - top: 0; - } + &.active { + * { + color: $blue; + font-weight: 500; - &:first-child:before { - top: 13px; + &:before { + content: ''; + border-radius: 50%; + left: -3px; + top: 12px; + background: $blue; + position: absolute; + width: 6px; + height: 6px; + } } + } + } - &:last-child:before { - bottom: calc(100% - 14px); - } + &:not(.embedded) li { + &:before { + border-left: 1px solid $lightgray; + bottom: 0; + content: ''; + left: 0; + position: absolute; + top: 0; + } - &:not(.active):hover a:before { - content: ''; - border-radius: 50%; - left: -3px; - top: 12px; - background: $lightgray; - position: absolute; - width: 6px; - height: 6px; - } + &:first-child:before { + top: 13px; + } + + &: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; } } }