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

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

@ -62,43 +62,8 @@ mat-toolbar.app-toolbar {
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 {
// HAMBURGER BUTTON
.hamburger {
height: 100%;
margin: $hamburgerShownMargin;
padding: 0;
@ -127,10 +92,10 @@ mat-toolbar.app-toolbar {
color: $white;
position: inherit;
}
}
}
// HOME NAV-LINK
.nav-link.home {
// HOME NAV-LINK
.nav-link.home {
cursor: pointer;
margin: 0 16px 0 0;
padding: 8px 0;
@ -161,10 +126,10 @@ mat-toolbar.app-toolbar {
}
}
}
}
}
// TOP MENU
aio-top-menu {
// TOP MENU
aio-top-menu {
display: flex;
flex-direction: row;
align-items: center;
@ -227,10 +192,10 @@ aio-top-menu {
}
}
}
}
}
// SEARCH BOX
aio-search-box.search-container {
// SEARCH BOX
aio-search-box.search-container {
display: flex;
justify-content: flex-end;
align-items: center;
@ -272,4 +237,39 @@ aio-search-box.search-container {
width: 150px;
}
}
}
// 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;
}
}
}
}