update demo to remove usage of other elements in the demo

googlearchive · Apr 23, 2014 · 3c5202a · 3c5202a
1 parent c2e402a
commit 3c5202a
Showing 1 changed file with 16 additions and 27 deletions.
diff --git a/demo.html b/demo.html
@@ -14,8 +14,6 @@
     <script src="../platform/platform.js"></script>
 
     <link rel="import" href="core-header-panel.html">
-    <link rel="import" href="../core-toolbar/core-toolbar.html">
-    <link rel="import" href="../core-icon-button/core-icon-button.html">
 
     <style shim-shadowdom>
 
@@ -34,9 +32,18 @@
         left: 70px;
       }
 
-      core-toolbar {
+      .core-header {
+        height: 60px;
+        line-height: 60px;
+        font-size: 20px;
+        padding: 0 10px;
         background-color: #4F7DC9;
         color: #FFF;
+        transition: height 0.2s;
+      }
+
+      .core-header.tall {
+        height: 180px;
       }
 
       .content {
@@ -51,50 +58,32 @@
   <body unresolved>
 
     <core-header-panel>
-      <core-toolbar>
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>standard</div>
-      </core-toolbar>
+      <div class="core-header">standard</div>
       <div class="content"></div>
     </core-header-panel>
 
     <core-header-panel mode="seamed">
-      <core-toolbar>
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>seamed</div>
-      </core-toolbar>
+      <div class="core-header">seamed</div>
       <div class="content"></div>
     </core-header-panel>
 
     <core-header-panel mode="waterfall">
-      <core-toolbar>
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>waterfall</div>
-      </core-toolbar>
+      <div class="core-header">waterfall</div>
       <div class="content"></div>
     </core-header-panel>
 
     <core-header-panel mode="waterfall-tall">
-      <core-toolbar>
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>waterfall-tall</div>
-      </core-toolbar>
+      <div class="core-header">waterfall-tall</div>
       <div class="content"></div>
     </core-header-panel>
 
     <core-header-panel mode="scroll">
-      <core-toolbar>
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>scroll</div>
-      </core-toolbar>
+      <div class="core-header">scroll</div>
       <div class="content"></div>
     </core-header-panel>
 
     <core-header-panel mode="cover">
-      <core-toolbar class="tall seamed">
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>cover</div>
-      </core-toolbar>
+      <div class="core-header tall">cover</div>
       <div class="content" style="margin: 60px 60px 60px 0;"></div>
     </core-header-panel>