refactor(docs-infra): scope TOC styles to the `<aio-toc>` element (#40704)
This commit ensures that all styles for the TOC (which are defined in `_toc.scss`) only apply to elements inside an `<aio-toc>` element. This will prevent the styles accidentally taking effect on a different part of the app. PR Close #40704
This commit is contained in:
parent
67257aa64b
commit
3224c52503
|
@ -8,204 +8,205 @@
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc-inner {
|
aio-toc {
|
||||||
@include font-size(13);
|
.toc-inner {
|
||||||
overflow-y: visible;
|
@include font-size(13);
|
||||||
padding: 4px 0 0 10px;
|
overflow-y: visible;
|
||||||
|
padding: 4px 0 0 10px;
|
||||||
|
|
||||||
.toc-heading,
|
.toc-heading,
|
||||||
.toc-list .h1 {
|
.toc-list .h1 {
|
||||||
@include font-size(16);
|
@include font-size(16);
|
||||||
}
|
|
||||||
|
|
||||||
.toc-heading {
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0 0 16px 8px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&.secondary {
|
|
||||||
position: relative;
|
|
||||||
top: -8px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $accentblue;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
.toc-heading {
|
||||||
&.toc-heading,
|
font-weight: 500;
|
||||||
&.toc-more-items {
|
margin: 0 0 16px 8px;
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
background: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: start;
|
|
||||||
|
|
||||||
&.embedded:focus {
|
&.secondary {
|
||||||
outline: none;
|
|
||||||
background: $lightgray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toc-heading {
|
|
||||||
mat-icon.rotating-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -4px;
|
top: -8px;
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(.embedded) {
|
&:hover {
|
||||||
color: $accentblue;
|
color: $accentblue;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toc-more-items {
|
button {
|
||||||
color: $mediumgray;
|
&.toc-heading,
|
||||||
top: 10px;
|
&.toc-more-items {
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
background: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 0;
|
||||||
|
text-align: start;
|
||||||
|
|
||||||
&:hover {
|
&.embedded:focus {
|
||||||
color: $accentblue;
|
outline: none;
|
||||||
|
background: $lightgray;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&.toc-heading {
|
||||||
content: 'expand_less';
|
mat-icon.rotating-icon {
|
||||||
}
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
position: relative;
|
||||||
|
left: -4px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
&.collapsed::after {
|
&:hover:not(.embedded) {
|
||||||
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;
|
|
||||||
padding: 7px 0 7px 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(14);
|
|
||||||
@include line-height(28);
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
* {
|
|
||||||
color: $accentblue;
|
color: $accentblue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.toc-more-items {
|
||||||
* {
|
color: $mediumgray;
|
||||||
color: $blue;
|
top: 10px;
|
||||||
font-weight: 500;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:hover {
|
||||||
content: '';
|
color: $accentblue;
|
||||||
border-radius: 50%;
|
}
|
||||||
left: -3px;
|
|
||||||
top: 14px;
|
&::after {
|
||||||
background: $blue;
|
content: 'expand_less';
|
||||||
position: absolute;
|
}
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
&.collapsed::after {
|
||||||
}
|
content: 'more_horiz';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.embedded) li {
|
.mat-icon {
|
||||||
&:before {
|
&.collapsed {
|
||||||
border-left: 1px solid $lightgray;
|
@include rotate(0deg);
|
||||||
bottom: 0;
|
|
||||||
content: '';
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child:before {
|
&:not(.collapsed) {
|
||||||
top: 15px;
|
@include rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.toc-list {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 8px 0 0;
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child:before {
|
li {
|
||||||
bottom: calc(100% - 15px);
|
box-sizing: border-box;
|
||||||
|
padding: 7px 0 7px 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(14);
|
||||||
|
@include line-height(28);
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
* {
|
||||||
|
color: $accentblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
* {
|
||||||
|
color: $blue;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
border-radius: 50%;
|
||||||
|
left: -3px;
|
||||||
|
top: 14px;
|
||||||
|
background: $blue;
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.active):hover a:before {
|
&:not(.embedded) li {
|
||||||
content: '';
|
&:before {
|
||||||
border-radius: 50%;
|
border-left: 1px solid $lightgray;
|
||||||
left: -3px;
|
bottom: 0;
|
||||||
top: 14px;
|
content: '';
|
||||||
background: $lightgray;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 6px;
|
top: 0;
|
||||||
height: 6px;
|
}
|
||||||
|
|
||||||
|
&:first-child:before {
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child:before {
|
||||||
|
bottom: calc(100% - 15px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.active):hover a:before {
|
||||||
|
content: '';
|
||||||
|
border-radius: 50%;
|
||||||
|
left: -3px;
|
||||||
|
top: 14px;
|
||||||
|
background: $lightgray;
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alternative TOC View for Smaller Screens
|
||||||
|
&.embedded {
|
||||||
|
@media (min-width: 801px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-inner {
|
||||||
|
padding: 12px 0 0 0;
|
||||||
|
|
||||||
|
.toc-heading {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
.secondary {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Alternative TOC View for Smaller Screens
|
|
||||||
aio-toc.embedded {
|
|
||||||
@media (min-width: 801px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-inner {
|
|
||||||
padding: 12px 0 0 0;
|
|
||||||
|
|
||||||
.toc-heading {
|
|
||||||
margin: 0 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.collapsed {
|
|
||||||
.secondary {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue