fix(toolbar): Improve layout and scrolling logic of items in toolbars (#764)

Author: amsheehan

demos/button.html

@@ -57,7 +57,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Buttons</span>
         </section>

demos/card.html

@@ -123,7 +123,7 @@
     <div class="mdc-toolbar__row">
       <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
         <span class="catalog-back">
-          <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+          <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
         </span>
         <span class="mdc-toolbar__title catalog-title">Card</span>
       </section>

demos/checkbox.html

@@ -61,7 +61,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Checkbox</span>
         </section>

demos/demos.css

@@ -34,21 +34,6 @@ fieldset {
   border: 0;
 }
 
-.mdc-toolbar a, .mdc-toolbar a:visited {
-  text-decoration: none;
-  color: #f0f0f0;
-}
-
-.catalog-title {
-  font-family: "Roboto Mono", monospace;
-}
-
-.catalog-logo, .catalog-back {
-  text-decoration: none;
-  padding-right: 24px;
-  color: #eeeeee;
-}
-
 .hero {
   background-color: rgba(0, 0, 0, 0.05);
   min-height: 360px;

demos/dialog.html

@@ -50,7 +50,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Dialog</span>
         </section>

demos/drawer/permanent-drawer-above-toolbar.html

@@ -112,7 +112,7 @@
         <div class="mdc-toolbar__row">
           <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
             <span class="catalog-back">
-              <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+              <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
             </span>
             <span class="mdc-toolbar__title catalog-title">Permanent Drawer Above Toolbar</span>
           </section>

demos/drawer/permanent-drawer-below-toolbar.html

@@ -70,7 +70,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Permanent Drawer Below Toolbar</span>
         </section>

demos/drawer/persistent-drawer.html

@@ -41,19 +41,6 @@
       width: 100%;
     }
 
-    /* A simple menu button. */
-    .demo-menu {
-      background: none;
-      border: none;
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      margin: 0;
-      margin-right: 24px;
-      color: #FFF;
-      box-sizing: border-box;
-    }
-
     /* Stack toolbar and main on top of each other. */
     .demo-content {
       display: inline-flex;
@@ -108,7 +95,7 @@
       <header class="mdc-toolbar mdc-elevation--z4">
         <div class="mdc-toolbar__row">
           <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-            <button class="demo-menu material-icons">menu</button>
+            <button class="demo-menu material-icons mdc-toolbar__icon--menu">menu</button>
             <span class="mdc-toolbar__title catalog-title">Persistent Drawer</span>
           </section>
         </div>

demos/drawer/temporary-drawer.html

@@ -31,19 +31,6 @@
       box-sizing: border-box;
     }
 
-    /* A simple menu button. */
-    .demo-menu {
-      background: none;
-      border: none;
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      margin: 0;
-      margin-right: 24px;
-      color: #FFF;
-      box-sizing: border-box;
-    }
-
     .demo-main {
       padding-left: 16px;
       overflow: auto;
@@ -54,7 +41,7 @@
     <div class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <button class="demo-menu material-icons">menu</button>
+          <button class="demo-menu material-icons mdc-toolbar__icon--menu">menu</button>
           <span class="mdc-toolbar__title catalog-title">Temporary Drawer</span>
         </section>
       </div>

demos/elevation.html

@@ -70,7 +70,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Elevation</span>
         </section>