From b44764f20a4d2cd7f6c2a812e481e005059af2f2 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 23 Nov 2016 15:31:52 -0200
Subject: [PATCH] create bottom-bar documentation with the new template

---
 docs/src/components/ExampleBox.vue            |   4 +-
 docs/src/components/code-block.vue            |  71 ++-
 docs/src/pages/components/Avatar.vue          |  10 +-
 docs/src/pages/components/BottomBar.vue       | 491 +++++++++++-------
 src/components/mdBottomBar/mdBottomBar.theme  |  24 +
 .../mdBottomBar/mdBottomBarItem.vue           |   2 -
 src/components/mdTable/mdTable.scss           |   6 +-
 7 files changed, 383 insertions(+), 225 deletions(-)

diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
index 70277d4..2a41e47 100644
--- a/docs/src/components/ExampleBox.vue
+++ b/docs/src/components/ExampleBox.vue
@@ -17,8 +17,8 @@
 </template>
 
 <style lang="scss" scoped>
-  .example-box + .example-box {
-    margin-top: 16px;
+  .example-box {
+    margin-bottom: 16px;
   }
 
   .example-title {
diff --git a/docs/src/components/code-block.vue b/docs/src/components/code-block.vue
index 057f8cd..e428833 100644
--- a/docs/src/components/code-block.vue
+++ b/docs/src/components/code-block.vue
@@ -2,13 +2,13 @@
   <div class="code-block" :data-lang="lang">
     <div class="code-block-wrapper">
       <pre><code :class="lang" ref="block"><slot></slot></code></pre>
+
+      <span class="copied" :class="{ 'active': showMessage }">Copied!</span>
     </div>
 
     <md-button class="md-icon-button md-dense" ref="copy">
       <md-icon>content_copy</md-icon>
     </md-button>
-
-    <span class="copied" :class="{ 'active': showMessage }">Copied!</span>
   </div>
 </template>
 
@@ -16,8 +16,9 @@
   @import '../../../src/core/stylesheets/variables.scss';
 
   .code-block {
-    position: relative;
+    margin: -16px;
     overflow: hidden;
+    position: relative;
     border-radius: 2px;
     color: #455A64;
     font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
@@ -37,7 +38,7 @@
     &:after {
       position: absolute;
       top: 20px;
-      right: 12px;
+      right: 30px;
       transition: $swift-ease-out;
       color: rgba(#000, .26);
       font-family: $font-roboto;
@@ -79,15 +80,14 @@
   .code-block-wrapper {
     min-width: 100%;
     max-height: 550px;
-    margin: -16px;
-    padding: 0 16px;
+    padding: 16px;
     overflow: auto;
   }
 
   .md-icon-button {
     position: absolute;
     top: 8px;
-    right: 0;
+    right: 20px;
     z-index: 2;
     opacity: 0;
     transition: $swift-ease-out;
@@ -96,11 +96,11 @@
   .copied {
     padding: 8px 16px;
     position: absolute;
-    right: 0;
-    bottom: 0;
+    top: 14px;
+    left: 12px;
     background-color: rgba(#000, .87);
     border-radius: 2px;
-    transform: translate3d(0, 36px, 0);
+    transform: translate3d(0, -48px, 0);
     transition: $swift-ease-in-out;
     color: #fff;
     font-family: $font-roboto;
@@ -170,19 +170,46 @@
     data: () => ({
       showMessage: false
     }),
+    methods: {
+      enableCopy() {
+        const clipboard = new Clipboard(this.$refs.copy.$el, {
+          target: () => this.$refs.block
+        });
+
+        clipboard.on('success', (event) => {
+          event.clearSelection();
+          this.showMessage = true;
+
+          window.setTimeout(() => {
+            this.showMessage = false;
+          }, 2000);
+        });
+      },
+      reindent() {
+        const block = this.$refs.block;
+        let lines = block.textContent.split('\n');
+        let matches;
+
+        if (lines[0] === '') {
+          lines.shift();
+        }
+
+        let indentation = (matches = (/^[\s\t]+/).exec(lines[0])) !== null ? matches[0] : null;
+
+        if (indentation) {
+          lines = lines.map(function(line) {
+            line = line.replace(indentation, '');
+
+            return line.replace(/\t/g, '  ');
+          });
+
+          block.textContent = lines.join('\n').trim();
+        }
+      }
+    },
     mounted() {
-      const clipboard = new Clipboard(this.$refs.copy.$el, {
-        target: () => this.$refs.block
-      });
-
-      clipboard.on('success', (event) => {
-        event.clearSelection();
-        this.showMessage = true;
-
-        window.setTimeout(() => {
-          this.showMessage = false;
-        }, 2000);
-      });
+      this.reindent();
+      this.enableCopy();
 
       highlight.highlightBlock(this.$refs.block);
     }
diff --git a/docs/src/pages/components/Avatar.vue b/docs/src/pages/components/Avatar.vue
index 8c935db..fbd4b02 100644
--- a/docs/src/pages/components/Avatar.vue
+++ b/docs/src/pages/components/Avatar.vue
@@ -38,7 +38,7 @@
 
       <div slot="example">
         <example-box card-title="Default">
-          <div class="card-holder" slot="demo">
+          <div class="avatar-holder" slot="demo">
             <md-avatar>
               <img src="assets/avatar.png" alt="Avatar">
             </md-avatar>
@@ -86,7 +86,7 @@
         </example-box>
 
         <example-box card-title="Large">
-          <div class="card-holder" slot="demo">
+          <div class="avatar-holder" slot="demo">
             <md-avatar class="md-large">
               <img src="assets/avatar-2.jpg" alt="People">
             </md-avatar>
@@ -136,3 +136,9 @@
     </docs-component>
   </page-content>
 </template>
+
+<style lang="scss" scoped>
+  .md-avatar + .md-avatar {
+    margin-left: 8px;
+  }
+</style>
diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index 63eb3bb..a1dd79f 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -1,220 +1,321 @@
 <template>
-  <demo-page label="Components - Bottom Bar">
-    <div slot="examples">
-      <demo-example label="Default">
-        <div class="phone-viewport">
-          <md-bottom-bar>
-            <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
-      </demo-example>
+  <page-content page-title="Components - Bottom Bar">
+    <docs-component>
+      <div slot="description">
+        <p>Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.</p>
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+          <li><code>md-transparent</code></li>
+        </ul>
+      </div>
 
-      <demo-example label="Shifting">
-        <div class="phone-viewport">
-          <md-bottom-bar md-shift>
-            <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
+      <div slot="api">
+        <api-table name="md-bottom-bar">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-        <div class="phone-viewport">
-          <md-bottom-bar class="md-accent" md-shift>
-            <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-shift</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable the shifting variant</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
 
-        <div class="phone-viewport">
-          <md-bottom-bar class="md-warn" md-shift>
-            <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
+        <api-table name="md-bottom-bar-item">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-        <div class="phone-viewport">
-          <md-bottom-bar class="md-transparent" md-shift>
-            <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
-      </demo-example>
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-icon</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Icon name on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> docs</md-table-cell>
+              </md-table-row>
 
-      <demo-example label="Themed">
-        <div class="phone-viewport">
-          <md-bottom-bar v-md-theme="'indigo'">
-            <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
+              <md-table-row>
+                <md-table-cell>md-active</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Set initial selection</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
 
-        <div class="phone-viewport">
-          <md-bottom-bar v-md-theme="'orange'">
-            <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
+      <div slot="example">
+        <example-box card-title="Default">
+          <div slot="demo">
+            <div class="phone-viewport">
+              <md-bottom-bar>
+                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
 
-        <div class="phone-viewport">
-          <md-bottom-bar md-shift v-md-theme="'green'">
-            <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
+            <div class="phone-viewport">
+              <md-bottom-bar class="md-accent">
+                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
 
-        <div class="phone-viewport">
-          <md-bottom-bar md-shift v-md-theme="'brown'">
-            <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
-      </demo-example>
+            <div class="phone-viewport">
+              <md-bottom-bar class="md-warn">
+                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
 
-      <demo-example label="Dynamic Theme">
-        <div class="phone-viewport">
-          <md-bottom-bar md-shift v-md-theme="playground.theme">
-            <md-bottom-bar-item @click="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
-            <md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
-            <md-bottom-bar-item @click="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
-            <md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
-          </md-bottom-bar>
-        </div>
-      </demo-example>
-    </div>
+            <div class="phone-viewport">
+              <md-bottom-bar class="md-transparent">
+                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+          </div>
 
-    <div slot="code">
-      <demo-example label="Default">
-        <code-block lang="xml">
-&lt;md-bottom-bar&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
-      </demo-example>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-      <demo-example label="Shifting">
-        <code-block lang="xml">
-&lt;md-bottom-bar md-shift&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar class=&quot;md-accent&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-        <code-block lang="xml">
-&lt;md-bottom-bar class=&quot;md-accent&quot; md-shift&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar class=&quot;md-warn&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-        <code-block lang="xml">
-&lt;md-bottom-bar class=&quot;md-warn&quot; md-shift&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar class=&quot;md-transparent&quot;&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-        <code-block lang="xml">
-&lt;md-bottom-bar class=&quot;md-transparent&quot; md-shift&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
-      </demo-example>
+        <example-box card-title="Shifting">
+          <div slot="demo">
+            <div class="phone-viewport">
+              <md-bottom-bar md-shift>
+                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
 
-      <demo-example label="Themed">
-        <code-block lang="xml">
-&lt;md-bottom-bar v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+            <div class="phone-viewport">
+              <md-bottom-bar class="md-accent" md-shift>
+                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
 
-        <code-block lang="xml">
-&lt;md-bottom-bar v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+            <div class="phone-viewport">
+              <md-bottom-bar class="md-warn" md-shift>
+                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
 
-        <code-block lang="xml">
-&lt;md-bottom-bar md-shift v-md-theme=&quot;&#039;green&#039;&quot;&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+            <div class="phone-viewport">
+              <md-bottom-bar class="md-transparent" md-shift>
+                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+          </div>
 
-        <code-block lang="xml">
-&lt;md-bottom-bar md-shift v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
-      </demo-example>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar md-shift&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-      <demo-example label="Dynamic Theme">
-        <code-block lang="xml">
-&lt;md-bottom-bar md-shift v-md-theme=&quot;playground.theme&quot;&gt;
-  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
-&lt;/md-bottom-bar&gt;
-        </code-block>
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar class=&quot;md-accent&quot; md-shift&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-        <code-block lang="javascript">
-export default {
-  data() {
-    return {
-      playground: {
-        theme: 'brown'
-      }
-    };
-  },
-  methods: {
-    setTheme(theme) {
-      this.playground.theme = theme;
-    }
-  }
-};
-        </code-block>
-      </demo-example>
-    </div>
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar class=&quot;md-warn&quot; md-shift&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
 
-    <div slot="api">
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar class=&quot;md-transparent&quot; md-shift&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-    </div>
-  </demo-page>
+        <example-box card-title="Themes">
+          <div slot="demo">
+            <div class="phone-viewport" v-md-theme="'orange'">
+              <md-bottom-bar>
+                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+
+            <div class="phone-viewport" v-md-theme="'teal'">
+              <md-bottom-bar>
+                <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+
+            <div class="phone-viewport" v-md-theme="'green'">
+              <md-bottom-bar md-shift>
+                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+
+            <div class="phone-viewport" v-md-theme="'indigo'">
+              <md-bottom-bar md-shift>
+                <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;phone-viewport&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+                &lt;md-bottom-bar&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+
+              &lt;div class=&quot;phone-viewport&quot; v-md-theme=&quot;&#039;teal&#039;&quot;&gt;
+                &lt;md-bottom-bar&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+
+              &lt;div class=&quot;phone-viewport&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+                &lt;md-bottom-bar md-shift&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+
+              &lt;div class=&quot;phone-viewport&quot; v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;
+                &lt;md-bottom-bar md-shift&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Dynamic Theme Example">
+          <div slot="demo">
+            <div class="phone-viewport">
+              <md-bottom-bar md-shift v-md-theme="playground.theme">
+                <md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item @click.native="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
+              </md-bottom-bar>
+            </div>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div class=&quot;phone-viewport&quot;&gt;
+                &lt;md-bottom-bar md-shift v-md-theme=&quot;playground.theme&quot;&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                &lt;/md-bottom-bar&gt;
+              &lt;/div&gt;
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
 </template>
 
 <style lang="scss" scoped>
@@ -227,7 +328,7 @@ export default {
 
   .phone-viewport {
     width: 320px;
-    height: 480px;
+    height: 150px;
     margin-right: 16px;
     display: inline-block;
     position: relative;
diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme
index 10b6bcc..4ea0ad0 100644
--- a/src/components/mdBottomBar/mdBottomBar.theme
+++ b/src/components/mdBottomBar/mdBottomBar.theme
@@ -11,6 +11,30 @@
           color: #{'PRIMARY-COLOR'};
         }
       }
+
+      &.md-accent {
+        .md-bottom-bar-item {
+          &.md-active {
+            color: #{'ACCENT-COLOR'};
+          }
+        }
+      }
+
+      &.md-warn {
+        .md-bottom-bar-item {
+          &.md-active {
+            color: #{'WARN-COLOR'};
+          }
+        }
+      }
+
+      &.md-transparent {
+        .md-bottom-bar-item {
+          &.md-active {
+            color: #{'BACKGROUND-CONTRAST'};
+          }
+        }
+      }
     }
 
     &.md-shift {
diff --git a/src/components/mdBottomBar/mdBottomBarItem.vue b/src/components/mdBottomBar/mdBottomBarItem.vue
index a647fbc..977e5e7 100644
--- a/src/components/mdBottomBar/mdBottomBarItem.vue
+++ b/src/components/mdBottomBar/mdBottomBarItem.vue
@@ -38,8 +38,6 @@
         });
 
         this.active = !!active;
-
-        this.$emit('click');
       }
     },
     mounted() {
diff --git a/src/components/mdTable/mdTable.scss b/src/components/mdTable/mdTable.scss
index 9565f26..fba3c35 100644
--- a/src/components/mdTable/mdTable.scss
+++ b/src/components/mdTable/mdTable.scss
@@ -149,6 +149,8 @@
     }
 
     &.md-numeric {
+      text-align: right;
+
       .md-table-cell-container {
         justify-content: flex-end;
       }
@@ -156,14 +158,14 @@
 
     &.md-has-action {
       .md-table-cell-container {
+        display: flex;
+        align-items: center;
         justify-content: space-between;
       }
     }
 
     .md-table-cell-container {
       padding: 0 32px 0 24px;
-      display: flex;
-      align-items: center;
     }
 
     .md-button {