cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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 0f74479c47
commit 1c168c3a44
1 changed files with 8 additions and 5 deletions
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;
@ -59,9 +61,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;
}
}
@ -73,7 +75,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;
@ -111,7 +113,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;
}
@ -125,7 +127,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);
}
@ -237,6 +239,7 @@ aio-search-box.search-container {
width: 80%;
}
}
@media (max-width: 480px) {
width: 150px;
}