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

refactor(docs-infra): use Sass variable for top-bar hamburger button show/hide threshold (#37938) 

Use a Sass variable for the screen width break-point at which the
top-bar hamburger button is hidden/shown. This allows more easily
updating the break-point.

PR Close #37938
This commit is contained in:
George Kalpakas 2020-07-06 19:10:22 +03:00 committed by Alex Rickabaugh
parent ec32eba02c
commit 90b93da743
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,6 @@
// VARIABLES
$hamburgerShownMaxWidth: 991px;
$hamburgerHiddenMinWidth: $hamburgerShownMaxWidth + 1;
$hamburgerShownMargin: 0 8px 0 0;
$hamburgerHiddenMargin: 0 16px 0 -64px;
@ -52,9 +54,9 @@ aio-shell.folder-docs mat-toolbar.mat-toolbar,
aio-shell.folder-guide mat-toolbar.mat-toolbar,
aio-shell.folder-start mat-toolbar.mat-toolbar,
aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
@media (min-width: 992px) {
@media (min-width: $hamburgerHiddenMinWidth) {
.hamburger.mat-button {
// Hamburger shown on non-marketing pages on large screens.
// Hamburger shown on non-marketing pages even on large screens.
margin: $hamburgerShownMargin;
}
}
@ -66,7 +68,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
margin: $hamburgerShownMargin;
padding: 0;
@media (min-width: 992px) {
@media (min-width: $hamburgerHiddenMinWidth) {
// Hamburger hidden by default on large screens.
// (Will be shown per doc.)
margin: $hamburgerHiddenMargin;
@ -104,7 +106,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
outline-offset: 4px;
}
@media screen and (max-width: 991px) {
@media screen and (max-width: $hamburgerShownMaxWidth) {
padding: 4px 0;
}
@ -118,7 +120,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
top: 12px;
height: 40px;
@media (max-width: 991px) {
@media (max-width: $hamburgerShownMaxWidth) {
&:hover {
transform: scale(1.1);
}
@ -230,6 +232,7 @@ aio-search-box.search-container {
width: 80%;
}
}
@media (max-width: 480px) {
width: 150px;
}