feat(aio): add Kapunahele animations v2 (#15023)

aio/src/app/app.component.scss

@@ -2,6 +2,16 @@
   flex: 1 1 auto;
 }
 
+.hamburger {
+  transition-duration: 150ms;
+  transition-property: background-color, color;
+  transition-timing-function: ease-in-out;
+  &:hover {
+    background-color: #fdfdfd;
+    color:#00bcd4;
+  }
+}
+
 md-input-container {
   margin-left: 10px;
   input {
@@ -39,6 +49,7 @@ md-input-container {
 
 .sidenav {
   padding: 0;
+  min-width: 220px;
 }
 
 // md-toolbar {

aio/src/app/layout/nav-item/nav-item.component.html

@@ -1,23 +1,21 @@
 <div *ngIf="!node.children">
   <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
-    (click)="itemClicked()" class="vertical-menu">
+    (click)="itemClicked()" class="vertical-menu-item">
     {{node.title}}
   </a>
 </div>
 
 <div *ngIf="node.children">
   <a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
-    (click)="headerClicked()" class="vertical-menu heading">
+    (click)="headerClicked()" class="vertical-menu-item heading">
     {{node.title}}
-    <md-icon [class.expanded]="!isExpanded">keyboard_arrow_right</md-icon>
-    <md-icon [class.expanded]="isExpanded">keyboard_arrow_down</md-icon>
+    <md-icon class="rotating-icon">keyboard_arrow_right</md-icon>
   </a>
 
   <a *ngIf="node.url == null" [ngClass]="classes" title="{{node.tooltip}}"
-    (click)="headerClicked()" class="vertical-menu heading">
+    (click)="headerClicked()" class="vertical-menu-item heading">
     {{node.title}}
-    <md-icon [class.expanded]="!isExpanded">keyboard_arrow_right</md-icon>
-    <md-icon [class.expanded]="isExpanded">keyboard_arrow_down</md-icon>
+    <md-icon class="rotating-icon">keyboard_arrow_right</md-icon>
   </a>
 
   <div class="heading-children" [ngClass]="classes">

aio/src/app/layout/nav-item/nav-item.component.scss

@@ -1,16 +1,14 @@
-
 /************************************
 
              Media queries
 
-To use these, put this snippet in the approriate selector:
+ To use these, put this snippet in the approriate selector:
 
      @include bp(tiny) {
          background-color: purple;
      }
 
      Replace "tiny" with "medium" or "big" as necessary.
-
 *************************************/
 
 @mixin bp($point) {
@@ -44,25 +42,45 @@ To use these, put this snippet in the approriate selector:
 
 /************************************/
 
-.vertical-menu {
-  padding-left: 0;
-}
-
-a.vertical-menu {
+.vertical-menu-item {
+  box-sizing: border-box;
   color: #545454;
   cursor: pointer;
   display: block;
+  max-width: 260px;
+  overflow-wrap: break-word;
   padding-bottom: 10px;
   padding-top: 10px;
-  padding-right: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
   text-decoration: none;
   text-align: left;
+  transition-duration: 180ms;
+  transition-property: background-color, color;
+  transition-timing-function: ease-in-out;
+  width: 100%;
+  word-wrap: break-word;
+  outline: none;
+
   &:hover {
     background-color: #ddd;
+    text-shadow: 0px 0px 5px #ffffff;
   }
+
+  //icons _within_ nav
+  .material-icons {
+    position: absolute;
+    top: 6px;
+  }
+
+  @include bp(tiny) {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
 }
 
-.vertical-menu.selected {
+.vertical-menu-item.selected {
   color:#018494;
 }
 
@@ -70,45 +88,65 @@ a.vertical-menu {
   color: #444;
   cursor: pointer;
   font-size: .85rem;
-  min-width: 200px;
-  padding-left: 10px;
   position: relative;
   text-transform: uppercase;
-}
-
-.material-icons {
-  display: none;
+  width: 100%;
 }
 
 .material-icons.expanded {
   display: inline-block;
   position: absolute;
   top: 6px;
-  // left: 4px;
-}
-
-.heading-children {
-  display: none;
 }
 
 .heading-children.expanded {
-  display: block;
+  visibility: visible;
+  opacity: 1;
+  // height: auto;
+  max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
+  transition: visibility 500ms, opacity 500ms, max-height 500ms;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
 }
 
+.heading-children.collapsed {
+  visibility: hidden;
+  opacity: 0;
+  max-height: 1px; // Must have measurement to transition height.
+  transition: visibility 275ms, opacity 275ms, max-height 280ms;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
 
 .heading.selected.level-1,
 .heading-children.selected.level-1 {
   border-left: 3px #00bcd4 solid;
 }
-
 .level-1 {
   padding-left: 10px;
 }
-
 .level-2 {
   padding-left: 20px;
 }
 
 .level-3 {
-  padding-left: 30px;
+  padding-left: 20px;
+}
+
+@mixin rotate($degrees) {
+  -moz-transform: rotate($degrees);
+  -webkit-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  transform: rotate($degrees);
+  transition: transform 150ms;
+  transition-timing-function: ease-in-out;
+}
+
+.level-1.expanded .material-icons, .level-2.expanded .material-icons {
+  @include rotate(90deg);
+}
+
+.level-1:not(.expanded) .material-icons, .level-2:not(.expanded) .material-icons {
+  @include rotate(0deg);
 }

aio/src/app/layout/nav-item/nav-item.component.ts

@@ -25,6 +25,7 @@ export class NavItemComponent implements OnChanges {
   setClasses() {
     this.classes = {
       ['level-' + this.level]: true,
+      collapsed: !this.isExpanded,
       expanded: this.isExpanded,
       selected: this.isSelected
     };