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

fix(docs-infra): do not underline link icons on hover (#41051) 

The external links in the docs content and the download links in the
"Press kit" page have icons next to their text (an external link icon
and a download icon respectively).

Previously, when hovering over one of those links, the icons used to get
underlined along with the link text, which was not desirable.

This commit fixes it by changing the mechanics of how these icons are
positioned inside the anchor elements so that only the link text is
underlined on hover.

Before: ![external links on hover before][1]
Before: ![presskit links on hover before][2]
After: ![external links on hover after][3]
After: ![presskit links on hover after][4]

[1]: https://user-images.githubusercontent.com/8604205/109340455-b64bf180-7871-11eb-923b-3113a237b8d8.png
[2]: https://user-images.githubusercontent.com/8604205/109340461-b815b500-7871-11eb-9c9d-91b6ffb17346.png
[3]: https://user-images.githubusercontent.com/8604205/109340458-b77d1e80-7871-11eb-884c-c1093ec83e66.png
[4]: https://user-images.githubusercontent.com/8604205/109340462-b815b500-7871-11eb-8f00-702b2b61f6ac.png

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:14 +02:00 committed by Andrew Kushnir
parent fa3689f432
commit 7944ee2c30
2 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
aio/src/styles/0-base/_typography.scss
View File

@ -204,25 +204,24 @@ code {
// We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`). // We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`).
// For more info see PR #36601. // For more info see PR #36601.
@include docs-pages { @include docs-pages {
aio-doc-viewer{ aio-doc-viewer {
a { // The docs-viewer also contain links to GitHub (e.g. the "edit this page" icon) identified with
&[href^="http:"]::after, // the `.github-links` class. We don't want to add the external link icon to these links.
&[href^="https:"]::after { :not(.github-links) {
font-family: "Material Icons"; > a {
content: "open_in_new"; &[href^="http:"],
margin-left: 2px; &[href^="https:"] {
position: relative; display: inline-flex;
@include line-height(24); padding-right: calc(1em + 0.25rem);
vertical-align: middle; position: relative;
}
}
// The docs-viewer also contain links to GitHub (e.g. the edit this page icon) identified with `.github-links` class. &::after {
// We don't want to add the external link icon to these links, so we hide them. content: "open_in_new";
.github-links a { font-family: "Material Icons";
&[href^="http:"]::after, position: absolute;
&[href^="https:"]::after { right: 0;
display: none; }
}
} }
} }
} }

14
aio/src/styles/2-modules/_presskit.scss
View File

@ -50,14 +50,16 @@
padding: 0; padding: 0;
a { a {
display: flex; display: inline-flex;
align-items: center; padding-right: 3rem;
position: relative;
&:after { &::after {
font-family: 'Material Icons'; content: "cloud_download";
content: 'cloud_download'; font-family: "Material Icons";
@include font-size(24); @include font-size(24);
margin-left: 0.5rem; position: absolute;
right: 0;
} }
} }
} }