Merge pull request #1 from asyncLiz/master

Update to MDC v4

index.html

@@ -32,25 +32,20 @@
     <aside class="mdc-drawer mdc-drawer--dismissible">
       <div class="mdc-drawer__content">
         <h2 class="mdc-top-app-bar__title">Topics</h2>
-        <ul class="mdc-list">
-          <li>
-            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
-              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">grade</i>
-              <span class="mdc-list-item__text">The Keyword</span>
-            </a>
-          </li>
+        <nav class="mdc-list">
+          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">grade</i>
+            <span class="mdc-list-item__text">The Keyword</span>
+          </a>
 
-          <li>
-            <a class="mdc-list-item" href="#chrome">
-              <span class="mdc-list-item__text">Google Chrome</span>
-            </a>
-          </li>
-          <li>
-            <a class="mdc-list-item" href="#search">
-              <span class="mdc-list-item__text">Google Search</span>
-            </a>
-          </li>
-        </ul>
+          <a class="mdc-list-item" href="#chrome">
+            <span class="mdc-list-item__text">Google Chrome</span>
+          </a>
+
+          <a class="mdc-list-item" href="#search">
+            <span class="mdc-list-item__text">Google Search</span>
+          </a>
+        </nav>
       </div>
     </aside>
 
@@ -59,7 +54,7 @@ <h2 class="mdc-top-app-bar__title">Topics</h2>
       <header class="mdc-top-app-bar app-bar" id="app-bar">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <button id="menuToggle" class="material-icons mdc-top-app-bar__navigation-icon">menu</button>
+            <button id="menuToggle" class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <h1 class="mdc-top-app-bar__title">The Keyword</h1>
           </section>
         </div>
@@ -82,6 +77,7 @@ <h2 class="mdc-typography mdc-typography--headline6"></h2>
             <h3 class="mdc-typography mdc-typography--subtitle2"></h3>
             <div class="summary"></div>
             <button class="mdc-button mdc-button--outlined">
+              <div class="mdc-button__ripple"></div>
               <span class="mdc-button__label">More</span>
             </button>
           </div>

styles.css

@@ -26,7 +26,7 @@ h2 {
   margin-top: 1em;
 }
 
-button {
+.mdc-button {
   display: inline-block;
   margin-top: 0.5em;
 }