Make demo more appealing

DanielGarciaMandillo · May 29, 2015 · aaccd95 · aaccd95
1 parent 8828cc6
commit aaccd95
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components
+
diff --git a/bower.json b/bower.json
@@ -16,6 +16,7 @@
     "polymer": "Polymer/polymer#^1.0.0"
   },
   "devDependencies": {
+    "paper-styles": "polymerelements/paper-styles#^1.0.2",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -17,6 +17,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../paper-styles/paper-styles.html">
   <link rel="import" href="x-app.html">
 
   <style>
@@ -32,7 +34,7 @@
   </style>
 
 </head>
-<body>
+<body class="fullbleed">
 
   <x-app></x-app>
 

diff --git a/demo/x-app.html b/demo/x-app.html
@@ -16,19 +16,23 @@
 
     :host {
       @apply(--layout-horizontal);
+      @apply(--paper-font-body2);
     }
 
     [nav] {
-      width: 300px;
       @apply(--layout-vertical);
-      background-color: #ddd;
+
+      width: 200px;
+      background-color: var(--paper-grey-300);
     }
 
     [item] {
+      @apply(--layout-horizontal);
+      @apply(--layout-center);
+
       height: 60px;
       padding-left: 16px;
-      @apply(--layout-horizontal --layout-center);
-      border-bottom: 1px solid #bbb;
+      border-bottom: 1px solid var(--paper-grey-400);
     }
 
     [main] {
@@ -37,31 +41,39 @@
     }
 
     [header] {
+      @apply(--layout-horizontal);
+      @apply(--layout-center);
+
+      @apply(--paper-font-subhead);
+
       height: 60px;
-      background-color: #ccc;
+      background-color: var(--google-blue-700);
       padding: 0 16px;
-      @apply(--layout-horizontal --layout-center);
+      color: white;
     }
 
     [tool] {
       @apply(--layout-inline);
     }
 
-    [flex] {
-      @apply(--layout-flex);
-    }
-
     [content] {
       @apply(--layout-flex);
+
       overflow: auto;
+      padding: 0 10px;
     }
 
     [card] {
+      @apply(--layout-vertical);
+      @apply(--layout-center-center);
+
+      @apply(--shadow-elevation-2dp);
+
       height: 300px;
-      width: 300px;
+      max-width: 800px;
       margin: 16px auto;
-      background-color: #eee;
-      @apply(--layout-vertical --layout-center-center);
+      font-weight: bold;
+      background-color: var(--paper-grey-200);
     }
 
   </style>
@@ -81,7 +93,7 @@
     <div main>
       <div header>
         <div tool>Foo</div>
-        <div flex></div>
+        <div class="flex"></div>
         <div tool>Bar</div>
       </div>
       <div content>