From d0a39eff98f879d10b1d7f7ec28142f2c72b49fb Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 23 Nov 2016 15:44:10 -0200
Subject: [PATCH] improve bottom bar docs

---
 docs/src/components/code-block.vue           | 10 ++--
 docs/src/pages/components/BottomBar.vue      | 17 ++++++
 docs/src/pages/components/EmptyComponent.vue | 54 ++++++++++++++++++++
 3 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/pages/components/EmptyComponent.vue

diff --git a/docs/src/components/code-block.vue b/docs/src/components/code-block.vue
index e428833..4b33f41 100644
--- a/docs/src/components/code-block.vue
+++ b/docs/src/components/code-block.vue
@@ -20,11 +20,17 @@
     overflow: hidden;
     position: relative;
     border-radius: 2px;
+    background-color: #fbfbfb;
     color: #455A64;
     font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
     font-size: 14px;
     line-height: 1.4em;
 
+    + .code-block {
+      margin-top: 48px;
+      border-top: 1px solid rgba(0, 0, 0, .12);
+    }
+
     &:hover {
       &:after {
         opacity: 0;
@@ -62,10 +68,6 @@
       content: 'SCSS';
     }
 
-    + .code-block {
-      margin-top: 16px;
-    }
-
     pre {
       margin: 0;
       white-space: pre;
diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index a1dd79f..de21495 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -311,6 +311,23 @@
                 &lt;/md-bottom-bar&gt;
               &lt;/div&gt;
             </code-block>
+
+            <code-block lang="javascript">
+              export default {
+                data() {
+                  return {
+                    playground: {
+                      theme: &#039;brown&#039;
+                    }
+                  };
+                },
+                methods: {
+                  setTheme(theme) {
+                    this.playground.theme = theme;
+                  }
+                }
+              };
+            </code-block>
           </div>
         </example-box>
       </div>
diff --git a/docs/src/pages/components/EmptyComponent.vue b/docs/src/pages/components/EmptyComponent.vue
new file mode 100644
index 0000000..3e13e04
--- /dev/null
+++ b/docs/src/pages/components/EmptyComponent.vue
@@ -0,0 +1,54 @@
+<template>
+  <page-content page-title="Components - Name">
+    <docs-component>
+      <div slot="description">
+
+        <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>
+
+      <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>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>empty</md-table-cell>
+                <md-table-cell><code>Type</code></md-table-cell>
+                <md-table-cell>Description</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Default">
+          <div slot="demo">
+
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+
+</style>