iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): fix styling of embedded Table-of-Contents (#34312) 

This commit fixes the following issues:
- Align text content with caret icon in embedded ToC header.
- Fix display of expand/collapse button at the bottom of embeded ToC.

These were accidentally broken in #32124, while fixing another
ToC-related issue. Some CSS rules in `_toc.scss` (e.g. those for
`.mat-icon` and `ul.toc-list`) were correctly moved out of the
`.toc-inner > button` block, but others (e.g. `&.toc-heading` and
`&.toc-more-items`) should not have been moved outside the
`.toc-inner > button` block.

_Before:_
![toc-styles before](https://user-images.githubusercontent.com/8604205/70441952-00df2380-1a9e-11ea-8fc7-d141cc8c9045.png)

_After:_
![toc-styles after](https://user-images.githubusercontent.com/8604205/70441953-0177ba00-1a9e-11ea-8af8-d497977009ae.png)

Closes #34300

PR Close #34312
This commit is contained in:
George Kalpakas 2019-12-09 15:57:37 +02:00 committed by Andrew Kushnir
parent f95e2c7e7e
commit 419b153b17
1 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
aio/src/styles/2-modules/_toc.scss
View File

@ -50,37 +50,37 @@
background: $lightgray; background: $lightgray;
} }
} }
}
&.toc-heading { &.toc-heading {
mat-icon.rotating-icon { mat-icon.rotating-icon {
height: 18px; height: 18px;
width: 18px; width: 18px;
position: relative;
left: -4px;
top: 5px;
}
&:hover:not(.embedded) {
color: $accentblue;
}
}
&.toc-more-items {
color: $mediumgray;
top: 10px;
position: relative; position: relative;
left: -4px;
top: 5px;
}
&:hover:not(.embedded) { &:hover {
color: $accentblue; color: $accentblue;
} }
}
&.toc-more-items { &::after {
color: $mediumgray; content: 'expand_less';
top: 10px; }
position: relative;
&:hover { &.collapsed::after {
color: $accentblue; content: 'more_horiz';
} }
&::after {
content: 'expand_less';
}
&.collapsed::after {
content: 'more_horiz';
} }
} }
@ -98,7 +98,7 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0 8px 0 0; padding: 0 8px 0 0;
@media (max-width: 800px) { @media (max-width: 800px) {
width: auto; width: auto;
} }