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

refactor(docs-infra): scope top-menu styles to the .app-toolbar element (#40704)

Browse Source 
This commit ensures that all styles for the app top-menu (which are
defined in `_top-menu.scss`) only apply to elements inside an
`.app-toolbar` element. This will prevent the styles accidentally taking
effect on a different part of the app.

PR Close #40704
This commit is contained in:
George Kalpakas 2021-02-05 12:48:57 +02:00 committed by Alex Rickabaugh
parent e3f5f9331b
commit b258b2901c
1 changed files with 177 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,41 +62,6 @@ mat-toolbar.app-toolbar {
color: $white; color: $white;
} }
// 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: 24px;
margin: 0 -16px;
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid $focus-outline-ondark;
outline-offset: -16px;
}
@media screen and (max-width: 480px) {
margin: 0 0 0 8px;
padding: 0;
}
&:hover {
opacity: 0.8;
}
img {
height: 24px;
}
}
}
}
// HAMBURGER BUTTON // HAMBURGER BUTTON
.hamburger { .hamburger {
height: 100%; height: 100%;
@ -273,3 +238,38 @@ aio-search-box.search-container {
} }
} }
} }
// 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: 24px;
margin: 0 -16px;
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid $focus-outline-ondark;
outline-offset: -16px;
}
@media screen and (max-width: 480px) {
margin: 0 0 0 8px;
padding: 0;
}
&:hover {
opacity: 0.8;
}
img {
height: 24px;
}
}
}
}