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

fix(docs-infra): convert external links to `MatIconButton`s (#42584) 

This commit changes the anchor elements used for external links to
`MatIconButton`s. While the appearance remains the same (with the
exception of hover/focus styles), this better aligns the styling of
external link icons with other nearby icon buttons (i.e. the theme
toggle) and alows as to simplify the CSS for external links (since much
of their styling is handled by Angular Material).

PR Close #42584
This commit is contained in:
George Kalpakas 2021-06-18 11:29:59 +03:00 committed by Dylan Hunn
parent 0f6ebe1ab5
commit fd8f9ab4e8
4 changed files with 16 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
aio/src/app/app.component.html
View File

@ -28,13 +28,13 @@
<aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
<aio-theme-toggle></aio-theme-toggle>
<div class="toolbar-external-icons-container">
<a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
<a mat-icon-button href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
<mat-icon svgIcon="logos:twitter"></mat-icon>
</a>
<a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
<a mat-icon-button href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
<mat-icon svgIcon="logos:github"></mat-icon>
</a>
<a href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
<a mat-icon-button href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
<mat-icon svgIcon="logos:youtube"></mat-icon>
</a>
</div>

10
aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
View File

@ -95,15 +95,5 @@
border-right: 1px solid constants.$white;
}
}
// EXTERNAL LINK ICONS
.toolbar-external-icons-container {
a {
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid constants.$focus-outline-ondark;
}
}
}
}
}

25
aio/src/styles/1-layouts/top-menu/_top-menu.scss
View File

@ -198,28 +198,13 @@ mat-toolbar.app-toolbar {
// EXTERNAL LINK ICONS
.toolbar-external-icons-container {
display: flex;
flex-direction: row;
flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
height: 100%;
a {
display: flex;
align-items: center;
padding: 0;
margin: 24px 8px;
&:hover {
opacity: 0.8;
}
&:focus {
outline-offset: 8px;
}
@media screen and (max-width: 480px) {
margin: 0 0 0 8px;
padding: 0;
margin: 0;
&:not(:first-child) {
margin-left: -8px;
}
}
@media screen and (max-width: 420px) {

16
goldens/size-tracking/aio-payloads.json
View File

@ -3,11 +3,11 @@
"master": {
"uncompressed": {
"runtime-es2017": 4619,
"main-es2017": 456578,
"main-es2017": 456646,
"polyfills-es2017": 55210,
"styles": 69643,
"light-theme": 79520,
"dark-theme": 79419
"styles": 69324,
"light-theme": 79417,
"dark-theme": 79316
}
}
},
@ -15,11 +15,11 @@
"master": {
"uncompressed": {
"runtime-es2017": 4619,
"main-es2017": 456717,
"main-es2017": 456785,
"polyfills-es2017": 55348,
"styles": 69643,
"light-theme": 79520,
"dark-theme": 79419
"styles": 69324,
"light-theme": 79417,
"dark-theme": 79316
}
}
}