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

docs(docs-infra): fix topnav layout for smaller screens (#25181) 

PR Close #25181
This commit is contained in:
Stefanie Fluin 2018-07-28 09:12:46 -07:00 committed by Igor Minar
parent 3f20a2fb5a
commit 4ee9db959a
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,18 +64,22 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
margin: $hamburgerShownMargin; margin: $hamburgerShownMargin;
padding: 0; padding: 0;
&:not(.starting) {
transition-duration: 0.4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (min-width: 992px) { @media (min-width: 992px) {
// Hamburger hidden by default on large screens. // Hamburger hidden by default on large screens.
// (Will be shown per doc.) // (Will be shown per doc.)
margin: $hamburgerHiddenMargin; margin: $hamburgerHiddenMargin;
} }
@media (max-width: 480px) {
min-width: 15%;
}
&:not(.starting) {
transition-duration: 0.4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}
&:hover { &:hover {
color: $offwhite; color: $offwhite;
} }
@ -92,6 +96,10 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
margin: 0 16px 0 0; margin: 0 16px 0 0;
padding: 21px 0; padding: 21px 0;
@media screen and (max-width: 480px) {
margin-right: 8px;
}
img { img {
position: relative; position: relative;
margin-top: -21px; margin-top: -21px;
@ -194,12 +202,17 @@ aio-search-box.search-container {
.toolbar-external-icons-container { .toolbar-external-icons-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%;
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 16px; margin-left: 16px;
@media screen and (max-width: 480px) {
margin-left: 8px;
}
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
} }