First steps styling documentation and enhaced style for <Appbar> and <Drawer>

components/autocomplete/readme.md

@@ -1,4 +1,4 @@
-# Aside
+# Autocomplete
 
 ```
 var Autocomplete = require('react-toolbox/components/autocomplete');

components/button/readme.md

@@ -1,5 +1,7 @@
 # Button
 
+A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
+
 ```
 var Button = require('react-toolbox/components/button');
 <Button className="accent" label="Flat button" />

docs/app/components/layout/main/_config.scss

@@ -1,3 +1,14 @@
 $appbar-brand-height: 2 * $unit;
 $appbar-brand-v-padding: ($appbar-height - $appbar-brand-height) / 2;
 $appbar-brand-logo-size: $appbar-height - 2.6 * $unit;
+$appbar-shadow: 0 1px rgba(255,255,255,0.75);
+
+$drawer-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
+
+$documentation-h1-size: 3.4 * $unit;
+$documentation-h2-size: 2.4 * $unit;
+$documentation-h-offset: 4 * $unit;
+$documentation-v-offset: ($documentation-h-offset / 2);
+$documentation-code-background: rgba(0, 0, 0, 0.0588235);
+$documentation-code-font-family: Consolas, Monaco, 'Andale Mono', monospace;
+$documentation-code-font-size: 13px;

docs/app/components/layout/main/style.scss

@@ -6,6 +6,7 @@
 .appbar {
   composes: appbar from "react-toolbox/app_bar/style";
   background: $color-primary-dark;
+  box-shadow: $appbar-shadow;
 }
 
 .brand {
@@ -57,7 +58,8 @@
   max-width: 22 * $unit;
   max-height: 100%;
   overflow-y: scroll;
-  border-right: 1px solid $color-divider;
+  // border-right: 1px solid $color-divider;
+  box-shadow: $drawer-shadow;
 }
 
 .draweroption {
@@ -67,9 +69,56 @@
 .documentation {
   max-height: 100%;
   flex-grow: 1;
-  padding: .8 * $unit $appbar-h-padding;
   overflow-y: scroll;
+  font-size: $font-size-normal;
+  color: $color-text;
   background-color: $color-content;
+  > *:not(pre) {
+    margin: $documentation-v-offset $documentation-h-offset;
+  }
+  h1 {
+    font-size: $documentation-h1-size;
+    + p {
+      font-size: $font-size-big;
+    }
+  }
+  h2 {
+    font-size: $documentation-h2-size;
+  }
+  h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: $font-weight-bold;
+  }
+  h1, h2 {
+    padding-top: $documentation-v-offset;
+    color: $color-primary-dark;
+  }
+  p {
+    font-size: inherit;
+    &:first-child {
+      background-color: red;
+    }
+  }
+  pre {
+    padding: $documentation-v-offset $documentation-h-offset;
+    font-family: $documentation-code-font-family;
+    font-size: $documentation-code-font-size;
+    background-color: $documentation-code-background;
+  }
+  table {
+    width: auto;
+    background-color: white;
+    // tr {
+    //   padding: 0 (4.0 * $unit);
+    // }
+    thead th {
+      font-size: $font-size-tiny;
+      color: $color-text;
+    }
+    th, td {
+      padding: $unit;
+    }
+  }
 }
 
 .playground_button {