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

fix(aio): animate hamburger in/out 

Fixes #17215
This commit is contained in:
Georgios Kalpakas 2017-06-08 16:30:33 +03:00 committed by Pete Bacon Darwin
parent cf0a9e0730
commit f7422a9607
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/app.component.html
View File

@ -5,7 +5,7 @@
</div> </div>
<md-toolbar color="primary" class="app-toolbar"> <md-toolbar color="primary" class="app-toolbar">
<button class="hamburger" md-button <button class="hamburger" [class.starting]="isStarting" md-button
(click)="sidenav.toggle()" title="Docs menu"> (click)="sidenav.toggle()" title="Docs menu">
<md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon> <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
</button> </button>

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

@ -86,10 +86,8 @@ aio-shell.page-resources md-toolbar.mat-toolbar {
} }
@media (min-width: 992px) { @media (min-width: 992px) {
padding-left: 24px;
button.hamburger { button.hamburger {
display: none; margin: 0 24px 0 -88px;
} }
} }
} }

15
aio/src/styles/2-modules/_hamburger.scss
View File

@ -8,14 +8,19 @@
} }
.hamburger.mat-button { .hamburger.mat-button {
transition: color 0.2s; height: 100%;
height: 100%; margin: 0;
margin: 0; padding: 0;
padding: 0;
&:not(.starting) {
transition-duration: .4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}
} }
.hamburger.mat-button:hover { .hamburger.mat-button:hover {
color: $offwhite; color: $offwhite;
} }
.hamburger .mat-icon { .hamburger .mat-icon {