more basic-app WIP files

Author: Scott J. Miles

polymer-ui-basic-app/metadata.html

@@ -2,7 +2,7 @@
   <template>
     <polymer-ui-basic-app theme="polymer-ui-dark-theme" style="height: 400px; width: 500px;">
       <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button>
-      <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button>
       <polymer-ui-menu-button tool icon="dots">
         <polymer-ui-menu-item>Item</polymer-ui-menu-item>
         <polymer-ui-menu-item>Item</polymer-ui-menu-item>
@@ -28,8 +28,8 @@
 <x-meta id="polymer-ui-basic-app2" label="Basic App Scaffold 2" isContainer>
   <template>
     <polymer-ui-basic-app2 theme="polymer-ui-light-theme" style="height: 400px; width: 400px;">
+      <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button>
       <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button>
-      <polymer-ui-icon-button tool icon="sort"></polymer-ui-icon-button>
       <polymer-ui-menu-button tool icon="dots">
         <polymer-ui-menu-item>Item</polymer-ui-menu-item>
         <polymer-ui-menu-item>Item</polymer-ui-menu-item>
@@ -50,4 +50,31 @@
     <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
     <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html">
   </template>
+</x-meta>
+
+<x-meta id="polymer-ui-basic-app3" label="Basic App Scaffold 3" isContainer>
+  <template>
+    <polymer-ui-basic-app3 theme="polymer-ui-light-theme" style="height: 400px; width: 400px;">
+      <polymer-ui-sidebar-menu theme="polymer-ui-dark-theme" navigation label="Actions" offscreen="basement" style="width: 200px; height: 100%;">
+        <polymer-ui-menu>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        </polymer-ui-menu>
+      </polymer-ui-sidebar-menu>
+      <polymer-ui-menu-button tool icon="dots">
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+      </polymer-ui-menu-button>
+      <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button>
+      <div main style="padding: 8px;">
+        Content.
+      </div>
+    </polymer-ui-basic-app3>
+  </template>
+  <template id="imports">
+    <link rel="import" href="polymer-ui-basic-app.html">
+    <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
+    <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html">
+  </template>
 </x-meta>

polymer-ui-basic-app/polymer-ui-basic-app.css

@@ -3,14 +3,19 @@ Copyright 2013 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 */
-@host {
-  display: block;
-  position: relative;
+@host { 
+  * {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
 }
 
 .animate {
   -webkit-transition: left ease-in 0.2s;
-  transition: left ease-in 0.2s;
+  transition: left ease-out 0.2s;
+  -webkit-transition-property: left opacity;
+  transition-property: left opacity;
 }
 
 polymer-ui-sidebar-menu {
@@ -22,10 +27,10 @@ section {
 }
 
 [hidden] {
-	display: none !important;
+  display: none !important;
 }
 
 #scrim {
-	background: rgba(128, 128, 128, 0.5);
-	z-index: 1;
+  background-color: rgba(128, 128, 128, 0.01);
+  z-index: 10;
 }