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

refactor(docs-infra): merge style rules in `_top-menu.scss` (#40704) 

This commit cleans up the styles in `_top-menu.scss` by merging
together blocks that target the same elements.

It also makes similar changes to selectors in `_notification.scss` rules
that override top-menu styles (for consistency).

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

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

@ -5,7 +5,7 @@ $hamburgerShownMargin: 0 8px 0 0;
$hamburgerHiddenMargin: 0 16px 0 -64px;
// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
mat-toolbar.mat-toolbar {
mat-toolbar.app-toolbar {
position: fixed;
top: 0;
right: 0;
@ -13,6 +13,47 @@ mat-toolbar.mat-toolbar {
z-index: 10;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
aio-shell.page-home & {
background-color: $blue;
@media (min-width: 481px) {
&:not(.transitioning) {
background-color: transparent;
transition: background-color 0.2s linear;
}
}
}
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
aio-shell.page-home &,
aio-shell.page-features &,
aio-shell.page-events &,
aio-shell.page-resources & {
box-shadow: none;
// FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
@media (min-width: 481px) {
position: absolute;
}
}
// DOCS PAGES OVERRIDE: HAMBURGER
aio-shell.folder-api &,
aio-shell.folder-cli &,
aio-shell.folder-docs &,
aio-shell.folder-guide &,
aio-shell.folder-errors &,
aio-shell.folder-start &,
aio-shell.folder-tutorial & {
@media (min-width: $showTopMenuWidth) {
.hamburger {
// Hamburger shown on non-marketing pages even on large screens.
margin: $hamburgerShownMargin;
}
}
}
mat-toolbar-row {
padding: 0 16px 0 0;
}
@ -20,51 +61,44 @@ mat-toolbar.mat-toolbar {
mat-icon {
color: $white;
}
}
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
aio-shell.page-home mat-toolbar.mat-toolbar {
background-color: $blue;
// 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%;
@media (min-width: 481px) {
&:not(.transitioning) {
background-color: transparent;
transition: background-color 0.2s linear;
}
}
}
a {
display: flex;
align-items: center;
padding: 24px;
margin: 0 -16px;
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
aio-shell.page-home mat-toolbar.mat-toolbar,
aio-shell.page-features mat-toolbar.mat-toolbar,
aio-shell.page-events mat-toolbar.mat-toolbar,
aio-shell.page-resources mat-toolbar.mat-toolbar {
box-shadow: none;
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid $focus-outline-ondark;
outline-offset: -16px;
}
// FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
@media (min-width: 481px) {
position: absolute;
}
}
@media screen and (max-width: 480px) {
margin: 0 0 0 8px;
padding: 0;
}
// DOCS PAGES OVERRIDE: HAMBURGER
aio-shell.folder-api mat-toolbar.mat-toolbar,
aio-shell.folder-cli mat-toolbar.mat-toolbar,
aio-shell.folder-docs mat-toolbar.mat-toolbar,
aio-shell.folder-guide mat-toolbar.mat-toolbar,
aio-shell.folder-errors mat-toolbar.mat-toolbar,
aio-shell.folder-start mat-toolbar.mat-toolbar,
aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
@media (min-width: $showTopMenuWidth) {
.hamburger.mat-button {
// Hamburger shown on non-marketing pages even on large screens.
margin: $hamburgerShownMargin;
&:hover {
opacity: 0.8;
}
img {
height: 24px;
}
}
}
}
// HAMBURGER BUTTON
.hamburger.mat-button {
.hamburger {
height: 100%;
margin: $hamburgerShownMargin;
padding: 0;
@ -239,39 +273,3 @@ aio-search-box.search-container {
}
}
}
// EXTERNAL LINK ICONS
.app-toolbar {
.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;
}
}
}
}

2
aio/src/styles/2-modules/_notification.scss
View File

@ -1,7 +1,7 @@
$notificationHeight: 56px;
// we need to override some of the toolbar styling
.mat-toolbar mat-toolbar-row.notification-container {
.app-toolbar mat-toolbar-row.notification-container {
padding: 0;
height: auto;
overflow: hidden;