fix(aio): animate hamburger in/out

Fixes #17215
2017-06-08 16:30:33 +03:00
parent cf0a9e0730
commit f7422a9607
3 changed files with 12 additions and 9 deletions
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@ -86,10 +86,8 @@ aio-shell.page-resources md-toolbar.mat-toolbar {
  }

  @media (min-width: 992px) {
-    padding-left: 24px;
-
    button.hamburger {
-      display: none;
+      margin: 0 24px 0 -88px;
    }
  }
 }
--- a/aio/src/styles/2-modules/_hamburger.scss
+++ b/aio/src/styles/2-modules/_hamburger.scss
@ -8,14 +8,19 @@
 }

 .hamburger.mat-button {
-    transition: color 0.2s;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  margin: 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 {
-    color: $offwhite;
+  color: $offwhite;
 }

 .hamburger .mat-icon {