update docs

googlearchive · Jun 9, 2014 · fe6c0bb · fe6c0bb
1 parent 7213ef2
commit fe6c0bb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/core-toolbar.css b/core-toolbar.css
@@ -59,13 +59,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 /* middle bar */
 #middleBar {
   position: absolute;
-  top: 64px;
+  top: 0;
   right: 0;
   left: 0;
 }
 
-:host(.narrow) #middleBar {
-  top: 56px;
+:host(.tall, .medium-tall) #middleBar {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
 }
 
 /* bottom bar */
@@ -93,16 +94,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   transform: translateY(-200%);
 }
 
+/* make elements (e.g. buttons) respond to mouse/touch events */
 polyfill-next-selector { content: '.toolbar-tools > *'; }
 ::content > * {
-  pointer-events: visible;
+  pointer-events: auto;
 }
 
+/* elements spacing */
 polyfill-next-selector { content: '.toolbar-tools > *'; }
 ::content > * {
   margin: 0px 8px;
 }
 
+/* misc helpers */
 polyfill-next-selector { content: '.toolbar-tools > .fit'; }
 ::content > .fit {
   position: absolute;

diff --git a/core-toolbar.html b/core-toolbar.html
@@ -11,32 +11,39 @@
 `core-toolbar` is a horizontal bar containing elements that can be used for
 label, navigation, search and actions.
 
-<b>Example:</b>
-
     <core-toolbar>
       <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
       <div flex>Title</div>
       <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
     </core-toolbar>
 
 `core-toolbar` has a standard height, but can be taller by setting `tall`
-class on the `core-toolbar`.
+class on the `core-toolbar`.  The will make the toolbar 3x the normal height.
 
     <core-toolbar class="tall">
       <core-icon-button icon="menu"></core-icon-button>
     </core-toolbar>
     
-Apply `medium-tall` class to make the toolbar medium tall.
+Apply `medium-tall` class to make the toolbar medium tall.  The will make the 
+toolbar 2x the normal height.
 
     <core-toolbar class="medium-tall">
       <core-icon-button icon="menu"></core-icon-button>
     </core-toolbar>
 
-When taller, actions can pin to either the top (default), middle or bottom.
+When taller, elements can pin to either the top (default), middle or bottom.
+
+    <core-toolbar class="tall">
+      <core-icon-button icon="menu"></core-icon-button>
+      <div class="middle indent">Middle Title</div>
+      <div class="bottom indent">Bottom Title</div>
+    </core-toolbar>
+    
+To make an element completely fits at the bottom of the toolbar, use `fit` along
+with `bottom`.
 
     <core-toolbar class="tall">
-      <core-icon-button class="bottom" icon="menu"></core-icon-button>
-      <div class="middle">Toolbar</div>
+      <div id="progressBar" class="bottom fit"></div>
     </core-toolbar>
 
 @group Polymer Core Elements

diff --git a/demo.html b/demo.html
@@ -66,7 +66,7 @@
 
   <core-toolbar class="tall">
     <core-icon-button icon="menu" class="bottom"></core-icon-button>
-    <span flex class="bottom">Toolbar: tall with actions pin to the bottom</span>
+    <span flex class="bottom">Toolbar: tall with elements pin to the bottom</span>
     <core-icon-button icon="refresh" class="bottom"></core-icon-button>
     <core-icon-button icon="add" class="bottom"></core-icon-button>
   </core-toolbar>
@@ -78,7 +78,7 @@
     <span flex></span>
     <core-icon-button icon="refresh"></core-icon-button>
     <core-icon-button icon="add"></core-icon-button>
-    <span class="bottom indent">Toolbar: medium tall with label aligns to the bottom</span>
+    <span class="bottom indent">Toolbar: medium-tall with label aligns to the bottom</span>
   </core-toolbar>
 
   <br>
@@ -88,8 +88,19 @@
     <div flex></div>
     <core-icon-button icon="refresh"></core-icon-button>
     <core-icon-button icon="add"></core-icon-button>
-    <div flex class="middle indent">Toolbar: label aligns to the middle</div>
-    <div flex class="bottom indent" style="color: #666; font-size: 18px;">some stuffs align to the bottom</div>
+    <div class="middle indent">label aligns to the middle</div>
+    <div class="bottom indent" style="color: #666; font-size: 18px;">some stuffs align to the bottom</div>
+  </core-toolbar>
+
+  <br>
+
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <div flex></div>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <div class="middle indent">element (e.g. progress) fits at the bottom of the toolbar</div>
+    <div class="bottom fit" style="height: 20px; background-color: #0f9d58;"></div>
   </core-toolbar>
 
 </body>