From 000b9da6393d760bd8e456c7da64b07a60910a23 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 17 Aug 2016 09:03:13 -0300
Subject: [PATCH] Add initial docs for Bottom Bar

---
 src/docs/config.js                          |  2 +-
 src/docs/core/components/page-container.vue |  5 --
 src/docs/pages/BottomBar.vue                | 64 +++++++++++++++------
 3 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/docs/config.js b/src/docs/config.js
index 4150a9d..59fcfbe 100644
--- a/src/docs/config.js
+++ b/src/docs/config.js
@@ -33,7 +33,7 @@ Vue.use(VueMaterial.MdTheme, {
       hue: 'A200'
     }
   },
-  'bottom-bar': {
+  'teal': {
     primary: 'teal',
     accent: 'orange'
   }
diff --git a/src/docs/core/components/page-container.vue b/src/docs/core/components/page-container.vue
index 303a117..8cb196e 100644
--- a/src/docs/core/components/page-container.vue
+++ b/src/docs/core/components/page-container.vue
@@ -35,11 +35,6 @@
   }
 
   .page-documentation {
-    display: flex;
-    flex-flow: column;
-    background-color: lighten(#2d3234, 10%);
-    color: #fff;
-
     ::-webkit-scrollbar {
       box-shadow: inset 1px 1px 0 rgba(#fff, .1);
       background-color: rgba(#fff, .05);
diff --git a/src/docs/pages/BottomBar.vue b/src/docs/pages/BottomBar.vue
index 3f84474..8575bc3 100644
--- a/src/docs/pages/BottomBar.vue
+++ b/src/docs/pages/BottomBar.vue
@@ -1,28 +1,60 @@
 <template>
-  <section v-md-theme="'bottom-bar'">
-    <h2 class="title">Bottom Bar</h2>
+  <page-container>
+    <div slot="example">
+      <code-section title="Bottom Bar">
+        <div class="cell-phone" 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" class="md-active">Favorites</md-bottom-bar-item>
+            <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
+      </code-section>
 
-    <div class="cell-phone">
-      <md-bottom-bar>
-        <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="favorite" class="md-active">Favorites</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
-      </md-bottom-bar>
+      <code-section title="Bottom Bar Shifting">
+        <div class="cell-phone" v-md-theme="'teal'">
+          <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 class="md-active" md-icon="books">Books</md-bottom-bar-item>
+            <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
+      </code-section>
     </div>
 
-    <div class="cell-phone">
-      <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 class="md-active" md-icon="books">Books</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
-      </md-bottom-bar>
+    <div slot="documentation">
+      <code-example>
+&lt;!-- Bottom Bar --&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; class=&quot;md-active&quot;&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;!-- Bottom Bar Shifting --&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 class=&quot;md-active&quot; md-icon=&quot;books&quot;&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-example>
     </div>
-  </section>
+  </page-container>
 </template>
 
 <style lang="scss" scoped>
   .cell-phone {
     background-color: #eee;
+    border: 1px solid #ccc;
   }
 </style>
+
+<script>
+  export default {
+    ready() {
+      this.$dispatch('pageTitle', 'Bottom Bar');
+    }
+  };
+</script>