styling updates.

googlearchive · Jul 11, 2014 · 1ea585c · 1ea585c
1 parent ab49c4b
commit 1ea585c
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 106 deletions.
diff --git a/bower.json b/bower.json
@@ -3,17 +3,16 @@
   "private": true,
   "dependencies": {
     "platform": "Polymer/platform#master",
-    "polymer-ui-icon-button": "Polymer/polymer-ui-icon-button#master",
-    "polymer-ui-menu-button": "Polymer/polymer-ui-menu-button#master",
-    "polymer-ui-menu-item": "Polymer/polymer-ui-menu-item#master",
-    "polymer-ui-scaffold": "Polymer/polymer-ui-scaffold#master",
-    "polymer-ui-pages": "Polymer/polymer-ui-pages#master",
-    "polymer-ui-sidebar-menu": "Polymer/polymer-ui-sidebar-menu#master",
-    "polymer-ui-toolbar": "Polymer/polymer-ui-toolbar#master",
-    "polymer-ui-icon": "Polymer/polymer-ui-icon#master",
+    "core-icon-button": "Polymer/core-icon-button#master",
+    "core-menu-button": "Polymer/core-menu-button#master",
+    "core-item": "Polymer/core-item#master",
+    "core-scaffold": "Polymer/core-scaffold#master",
+    "core-animated-pages": "Polymer/core-animated-pages#master",
+    "core-drawer-panel": "Polymer/core-drawer-panel#master",
+    "core-header-panel": "Polymer/core-header-panel#master",
+    "core-toolbar": "Polymer/core-toolbar#master",
+    "paper-button": "Polymer/paper-button#master",
     "speech-mic": "Polymer/speech-mic#master",
-    "polymer-ui-animated-pages": "Polymer/polymer-ui-animated-pages#master",
-    "polymer-animation": "Polymer/polymer-animation#master",
     "google-apis": "Polymer/google-apis/#master",
     "cool-clock": "Polymer/cool-clock#master",
     "polymer-stock": "Polymer/polymer-stock#master",

diff --git a/elements/css/pi-accounts.css b/elements/css/pi-accounts.css
@@ -4,11 +4,6 @@
  * license that can be found in the LICENSE file.
  */
 :host {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   background: white;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -61,24 +56,6 @@
 }
 
 .button {
-  -webkit-appearance: none;
-  padding: 8px 14px 8px;
-  background-color: #e6e6e6;
-  background-repeat: no-repeat;
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-  border: 1px solid #ccc;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  border-radius: 3px;
-  font-size: 14px;
-  color: #333;
-}
-
-.button:hover {
-  background-position: 0 -15px;
-}
-
-.button:active {
-  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-  color: #555;
-}
+  background-color: #02a8f3;
+  color: white;
+}
diff --git a/elements/css/pi-app.css b/elements/css/pi-app.css
@@ -3,21 +3,6 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
-:host {
-  font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-/* TODO(sorvell): move someplace better */
-* /deep/ core-menu-button {
-  font-size: 0.9rem;
-  color: black;
-}
-
-* /deep/ core-icon {
-  opacity: 0.6;
-
-}
 
 core-pages > * {
   background-color: #fafafa;
@@ -48,7 +33,7 @@ core-pages > * {
 }
 
 
-#appToolbar /deep/ core-menu-button core-icon {
+#appToolbar /deep/ #overlay core-icon {
   opacity: 0.6;
   fill: black;
 }

diff --git a/elements/css/pi-explore.css b/elements/css/pi-explore.css
@@ -1,21 +1,9 @@
-:host {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-flex-flow: column;
-  flex-direction: column;
-  height: 100%;
-}
-
-pi-feed-viewer#viewer {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
+#viewer {
+  position: relative;  
 }
 
 #searchBox {
-  background: white;
+  background-color: white;
   position: relative;
   width: 100%;
   height: 50px;

diff --git a/elements/css/pi-home.css b/elements/css/pi-home.css
@@ -1,7 +1,5 @@
 :host {
   display: block;
-  width: 100%;
-  height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }

diff --git a/elements/css/pi-items-view.css b/elements/css/pi-items-view.css
@@ -96,7 +96,7 @@
   font-size: 18px;
 }
 
-.topics .source.core-h {
+.topics .source {
   display: none !important;
 }
 

diff --git a/elements/css/pi-story.css b/elements/css/pi-story.css
@@ -28,6 +28,7 @@ img:first-of-type {
   margin: 0 auto;
   padding: 40px;
   font-size: 16px;
+  overflow: hidden;
   will-change: transform;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);

diff --git a/elements/css/theme.css b/elements/css/theme.css
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+body {
+  font-family: "RobotoDraft", sans-serif;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body /deep/ core-menu-button {
+  font-size: 0.9rem;
+  color: black;
+}
+
+body /deep/ core-icon {
+  opacity: 0.6;
+}
+
+/* TODO(sorvell): temp workaround for overlay layer styling issue under SD polyfill */
+core-overlay-layer #overlay {
+  background-color: white;
+}
diff --git a/elements/pi-accounts.html b/elements/pi-accounts.html
@@ -5,16 +5,17 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../components/core-icon-button/core-icon-button.html"/>
-<link rel="import" href="../components/core-item/core-item.html"/>
-<link rel="import" href="../components/core-menu-button/core-menu-button.html"/>
-<link rel="import" href="pi-gfeeds.html"/>
+<link rel="import" href="../components/core-icon-button/core-icon-button.html">
+<link rel="import" href="../components/core-item/core-item.html">
+<link rel="import" href="../components/core-menu-button/core-menu-button.html">
+<link rel="import" href="../components/paper-button/paper-button.html">
+<link rel="import" href="pi-gfeeds.html">
 <polymer-element name="pi-accounts" attributes="accounts">
   <template>
-    <link rel="stylesheet" href="css/pi-accounts.css" />
+    <link rel="stylesheet" href="css/pi-accounts.css">
     <div center horizontal layout class="item">
       <div flex></div>
-      <button class="button" on-tap="{{reset}}">Restore Defaults</button>
+      <paper-button raisedButton class="button" on-tap="{{reset}}" label="Restore Defaults"></paper-button>
     </div>
     <div center horizontal layout class="header item">Finance</div>
     <div>
@@ -27,15 +28,15 @@
     </div>
     <div center horizontal layout class="item">
       <div class="item-input-label">Symbol: </div>
-      <input id="symbol" autocorrect="off" operation="addStock" on-keyup="{{keyupHandler}}" />
-      <core-icon-button icon="plus" on-tap="{{addStock}}"></core-icon-button>
+      <input id="symbol" autocorrect="off" operation="addStock" on-keyup="{{keyupHandler}}" >
+      <core-icon-button icon="add" on-tap="{{addStock}}"></core-icon-button>
     </div>
     <div center horizontal layout class="header item">Topics</div>
     <div center horizontal layout class="item accounts-title">Add New Feed</div>
     <div center horizontal layout class="item no-border">
       <div class="item-input-label">Url: </div>
-      <input id="feed" type="url" flex operation="addFeed" on-keyup="{{keyupHandler}}" />
-      <core-icon-button icon="plus" on-tap="{{addFeed}}"></core-icon-button>
+      <input id="feed" type="url" flex operation="addFeed" on-keyup="{{keyupHandler}}" >
+      <core-icon-button icon="add" on-tap="{{addFeed}}"></core-icon-button>
     </div>
     <div center horizontal layout class="item">
       <div class="item-input-label">Category: </div>
@@ -49,8 +50,8 @@
     <div center horizontal layout class="item accounts-title">Add New Category</div>
     <div center horizontal layout class="item">
       <div class="item-input-label">Name: </div>
-      <input id="category" flex operation='addCategory' on-keyup="{{keyupHandler}}" />
-      <core-icon-button icon="plus" on-tap="{{addCategory}}"></core-icon-button>
+      <input id="category" flex operation='addCategory' on-keyup="{{keyupHandler}}" >
+      <core-icon-button icon="add" on-tap="{{addCategory}}"></core-icon-button>
     </div>
     <div>
       <template repeat="{{accounts.topics}}">

diff --git a/elements/pi-app.html b/elements/pi-app.html
@@ -14,12 +14,14 @@
 <link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
 <link rel="import" href="../components/core-animated-pages/transitions/slide-from-bottom.html">
 <link rel="import" href="../components/core-icon-button/core-icon-button.html">
+<link rel="import" href="../components/font-roboto/roboto.html">
 <link rel="import" href="pi-toolbar-buttons.html">
 <link rel="import" href="pi-feed-viewer.html">
 <link rel="import" href="pi-explore.html">
 <link rel="import" href="pi-home.html">
 <link rel="import" href="pi-accounts.html">
 <link rel="import" href="pi-accounts-model.html">
+<link rel="stylesheet" href="css/theme.css" shim-shadowdom>
 
 <polymer-element name="pi-app" on-keyup="{{keyupHandler}}">
   <template>
@@ -59,15 +61,15 @@
             on-core-select="{{panelSelectAction}}" transitions="slide-from-bottom slide-from-right">
 
           <div id="Home"><template if="{{activatedPanels.Home}}">
-              <pi-home stocks="{{$.accountsModel.stocks}}"></pi-home>
+              <pi-home stocks="{{$.accountsModel.stocks}}" fit></pi-home>
           </template></div>
           <pi-feed-viewer id="Topics" topics="{{$.accountsModel.topics}}" panel="{{selectedViewPanel}}"
               layout="{{layout}}" topicsLayout="grid" story="{{story}}"></pi-feed-viewer>
           <div id="Explore"><template if="{{activatedPanels.Explore}}">
-            <pi-explore isContentPanel panel="{{selectedViewPanel}}"></pi-explore>
+            <pi-explore isContentPanel panel="{{selectedViewPanel}}" fit></pi-explore>
           </template></div>
           <div id="Accounts"><template if="{{activatedPanels.Accounts}}">
-              <pi-accounts accounts="{{$.accountsModel}}"></pi-accounts>
+              <pi-accounts accounts="{{$.accountsModel}}" fit></pi-accounts>
           </template></div>
 
         </core-animated-pages>

diff --git a/elements/pi-explore.html b/elements/pi-explore.html
@@ -5,19 +5,19 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<link rel="import" href="../components/core-icon/core-icon.html"/>
-<link rel="import" href="../components/speech-mic/speech-mic.html"/>
-<link rel="import" href="pi-gfeeds.html"/>
-<link rel="import" href="pi-feed-viewer.html"/>
-<polymer-element name="pi-explore" attributes="panel topic">
+<link rel="import" href="../components/core-icon/core-icon.html">
+<link rel="import" href="../components/speech-mic/speech-mic.html">
+<link rel="import" href="pi-gfeeds.html">
+<link rel="import" href="pi-feed-viewer.html">
+<polymer-element name="pi-explore" attributes="panel topic" vertical layout>
   <template>
-    <link rel="stylesheet" href="css/pi-explore.css" />
+    <link rel="stylesheet" href="css/pi-explore.css">
     <div id="searchBox" center horizontal layout>
       <core-icon icon="search"></core-icon>
-      <input id="searchInput" flex on-input="{{inputChange}}"/>
+      <input id="searchInput" flex on-input="{{inputChange}}">
       <speech-mic id="speech" on-result="{{speechResult}}"></speech-mic>
     </div>
-    <pi-feed-viewer id="viewer" topics="{{topics}}" topic="{{topic}}" panel="{{panel}}"
+    <pi-feed-viewer id="viewer" flex topics="{{topics}}" topic="{{topic}}" panel="{{panel}}"
         layout="{{layout}}" topicsLayout="{{layout}}" loading="{{loading}}" disableTracking></pi-feed-viewer>
     <pi-gfeeds query="{{query}}" on-queryresponse="{{queryResponse}}" loading="{{loading}}"></pi-gfeeds>
   </template>

diff --git a/elements/pi-feed-viewer.html b/elements/pi-feed-viewer.html
@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="css/pi-feed-viewer.css">
 
     <core-animated-pages id="panels" class="feed-viewer-panels" selected="{{panel}}" valueattr="id"
-        on-core-animated-pages-transition-end="{{panelSelected}}" Xon-core-select="{{panelSelected}}" transitions="hero-transition tile-cascade cross-fade cross-fade-delayed">
+        on-core-animated-pages-transition-end="{{panelSelected}}" transitions="hero-transition tile-cascade cross-fade cross-fade-delayed">
       <pi-items-view id="topics" layout="{{topicsLayout}}" items="{{topics}}" view="topics" selected="{{topic}}"></pi-items-view>
       <pi-items-view id="stories" layout="{{layout}}" items="{{stories}}" view="stories" selected="{{story}}"></pi-items-view>
       <pi-story id="story" story="{{story}}" on-flick="{{storyFlickHandler}}" on-keydown="{{storyKeydownHandler}}"></pi-story>

diff --git a/elements/pi-toolbar-buttons.html b/elements/pi-toolbar-buttons.html
@@ -8,7 +8,7 @@
 <link rel="import" href="../components/core-icons/iconsets/social-icons.html"/>
 <link rel="import" href="../components/core-menu-button/core-menu-button.html"/>
 <link rel="import" href="../components/core-item/core-item.html"/>
-<polymer-element name="pi-view-button" attributes="layout halign">
+<polymer-element name="pi-view-button" attributes="layout halign" noscript>
   <template>
     <style>
       core-item.hidden-wide {
@@ -31,12 +31,9 @@
       <core-item name="list" label="List View" icon="view-list"></core-item>
     </core-menu-button>
   </template>
-  <script>
-    Polymer('pi-view-button');
-  </script>
 </polymer-element>
 
-<polymer-element name="pi-action-button" attributes="halign">
+<polymer-element name="pi-action-button" attributes="halign" noscript>
   <template>
     <core-menu-button icon="more-vert" responsive="true" halign="{{halign}}">
       <core-item icon="create">Post a Comment</core-item>
@@ -45,18 +42,12 @@
       <core-item icon="favorite">Add to Favorites</core-item>
     </core-menu-button>
   </template>
-  <script>
-    Polymer('pi-action-button');
-  </script>
 </polymer-element>
 
-<polymer-element name="pi-link-button" attributes="link">
+<polymer-element name="pi-link-button" attributes="link" noscript>
   <template>
     <a href="{{link}}" target="_blank">
       <core-icon-button icon="launch"></core-icon-button>
     </a>
   </template>
-  <script>
-    Polymer('pi-link-button');
-  </script>
 </polymer-element>