├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .github
    └── ISSUE_TEMPLATE.md
├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── app.yaml
├── app
    ├── 404.html
    ├── cache-config.json
    ├── content
    │   └── license.md
    ├── elements
    │   ├── base-bundle.html
    │   ├── my-app
    │   │   ├── my-app.html
    │   │   ├── my-app.js
    │   │   └── views
    │   │   │   ├── drawer.html
    │   │   │   ├── main.html
    │   │   │   └── pages
    │   │   │       ├── contact.html
    │   │   │       ├── home.html
    │   │   │       ├── settings.html
    │   │   │       ├── user-info.html
    │   │   │       └── users.html
    │   ├── my-greeting
    │   │   ├── my-greeting.css
    │   │   ├── my-greeting.html
    │   │   └── my-greeting.js
    │   └── my-list
    │   │   ├── my-list.css
    │   │   ├── my-list.html
    │   │   └── my-list.js
    ├── favicon.ico
    ├── humans.txt
    ├── images
    │   └── touch
    │   │   ├── apple-touch-icon.png
    │   │   ├── chrome-splashscreen-icon-384x384.png
    │   │   ├── chrome-touch-icon-192x192.png
    │   │   ├── icon-128x128.png
    │   │   ├── icon-512x512.png
    │   │   ├── icon-72x72.png
    │   │   ├── icon-96x96.png
    │   │   ├── ms-icon-144x144.png
    │   │   └── ms-touch-icon-144x144-precomposed.png
    ├── index.html
    ├── manifest.json
    ├── metadata
    │   ├── config.js
    │   └── general.js
    ├── robots.txt
    ├── scripts
    │   ├── app.js
    │   └── routing.js
    ├── sw-import.js
    ├── test
    │   ├── index.html
    │   ├── my-greeting-basic.html
    │   └── my-list-basic.html
    ├── themes
    │   └── default-theme
    │   │   ├── breakpoints.css
    │   │   ├── colors.css
    │   │   ├── colors.js
    │   │   ├── components
    │   │       ├── drawer.css
    │   │       ├── main.css
    │   │       ├── navigation.css
    │   │       ├── page.css
    │   │       ├── skeleton.css
    │   │       ├── swatch-picker.css
    │   │       ├── toast.css
    │   │       └── toggle.css
    │   │   ├── fonts.list
    │   │   ├── head.css
    │   │   ├── icons.html
    │   │   ├── mixins.css
    │   │   ├── theme.css
    │   │   ├── theme.html
    │   │   ├── typography.css
    │   │   ├── utilities
    │   │       ├── display.css
    │   │       └── layout.css
    │   │   ├── variables.css
    │   │   └── variables.js
    └── views
    │   ├── head.html
    │   └── skeleton.html
├── bower.json
├── config.js
├── docs
    ├── README.md
    ├── add-es2015-support-babel.md
    ├── add-eslint-support.md
    ├── chrome-dev-editor.md
    ├── deploy-to-firebase-pretty-urls.md
    ├── deploy-to-github-pages.md
    ├── deploy-to-google-app-engine.md
    ├── firebase.json
    ├── mobile-chrome-apps.md
    ├── neon-animated-pages.md
    └── polymer-perf.md
├── firebase.json
├── gulpfile.js
├── package.json
├── stylelint.config.js
├── tasks
    ├── clean-dist.js
    ├── copy-hosting-config.js
    ├── deploy-firebase.js
    ├── deploy-gae.js
    ├── deploy-gcs.js
    ├── deploy-ssh.js
    ├── deploy.js
    ├── download-analytics.js
    ├── download-fonts.js
    ├── ensure-files.js
    ├── fix-paths.js
    ├── js-babel.js
    ├── lint.js
    ├── minify-dist.js
    ├── pagespeed.js
    ├── revision.js
    ├── serve-gae.js
    ├── styles-postcss.js
    └── views-nunjucks.js
├── travis-runner.sh
└── wct.conf.js


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "app/bower_components"
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | 
 8 | [*]
 9 | 
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!-- Instructions: https://github.com/PolymerElements/polymer-starter-kit/CONTRIBUTING.md#filing-issues -->
 2 | ### Description
 3 | <!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
 4 | 
 5 | ### Expected outcome
 6 | 
 7 | <!-- Example: The page stays the same color. -->
 8 | 
 9 | ### Actual outcome
10 | 
11 | <!-- Example: The page turns pink. -->
12 | 
13 | ### Live Demo
14 | <!-- Example: https://jsbin.com/cagaye/edit?html,output -->
15 | 
16 | ### Steps to reproduce
17 | 
18 | <!-- Example
19 | 1. Put a `paper-foo` element in the page.
20 | 2. Open the page in a web browser.
21 | 3. Click the `paper-foo` element.
22 | -->
23 | 
24 | ### Browsers Affected
25 | <!-- Check all that apply -->
26 | - [ ] Chrome
27 | - [ ] Firefox
28 | - [ ] Safari 9
29 | - [ ] Safari 8
30 | - [ ] Safari 7
31 | - [ ] Edge
32 | - [ ] IE 11
33 | - [ ] IE 10
34 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | app/google*.html
 2 | app/scripts/analytics.js
 3 | app/themes/default-theme/fonts/*
 4 | bower_components
 5 | deploy
 6 | dist
 7 | node_modules
 8 | npm-debug.log*
 9 | TODO.md
10 | .tmp
11 | .publish/
12 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: false
 3 | addons:
 4 |   firefox: latest
 5 |   apt:
 6 |     sources:
 7 |       - google-chrome
 8 |       - ubuntu-toolchain-r-test
 9 |     packages:
10 |       - google-chrome-stable
11 |       - g++-4.8
12 | node_js:
13 |   - '0.12'
14 |   - '4.2'
15 |   - '5.1'
16 | before_script:
17 |   - 'export DISPLAY=:99.0'
18 |   - sh -e /etc/init.d/xvfb start
19 |   - sleep 3
20 |   - npm i -g bower@1.7.1 gulp@3.9.0 firebase-tools@2.2.0
21 |   - bower i
22 | script:
23 |   - ./travis-runner.sh
24 | env:
25 |   global:
26 |     - "CXX='g++-4.8'"
27 |     - secure: SbcQ7plU7aRGQlaAG2ffMhSvEs84073YSljOQ62DZAjRxgizMhF4xM7H2mPrmac9YRM4IBrQRvBKMMZy3L6OhN8gwpm8o+w2zV+5Q1fwpY9V8bilznnhp1JUY6jrB2l7aLTOFxt/cG+5ABxiupwWz/n+I7BaByYhBiHWntIBgDc528eecRNDYI5R36KWjLO/yr+SdElvyxDlDOdJGaluPvgMItbinFGcE1hYb/Jqrkkw8zpE6CTDmvMOq1aRBWSo9afgh2zDeKc02lTYP/4N0xcn8CqzHF7k5zGWHjN9DR8Ep8Bp1ff/sM7zHGZBqgVhn5WGv305jBQY6eOxiTp5cDP0WVIOjgJeM5rBu9hBQxhZSaMKBPr2B1NYUjIwTVQkBsnR4sr095Ugjg8JCZAmEevf/Ysl4CzQyW3gT+WcEluqjxUuicQWDclH6L/kOVPBJ+Eqdo/LY3G1tpLcc6fsvj4FlVO6LPTrbMyCagwQvnjX3uIdFyuthqtWWrHKQMGx2Ow9suNUi8Hyvk7WboS1Z6jrLIcs1rvXSX8rQmlMR5vJBK3Ejg6fS1OHxn/lrtLhj4lDLB9r/Fcu2PEHT1lcvQqsTa3W+t4Fk1qaShUlBDiwMbZWZgmlf1SdG5OzK1yrPLjTTdRFdqJGgb6TANCdetgczRWynvjIhr5IDMxvfJg=
28 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | 
 2 | <!--
 3 | This file is autogenerated based on
 4 | https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
 5 | 
 6 | If you edit that file, it will get updated everywhere else.
 7 | If you edit this file, your changes will get overridden :)
 8 | 
 9 | You can however override the jsbin link with one that's customized to this
10 | specific element:
11 | 
12 | jsbin=https://jsbin.com/cagaye/edit?html,output
13 | -->
14 | # Polymer Elements
15 | ## Guide for Contributors
16 | 
17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
18 | 
19 | ### Filing Issues
20 | 
21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
22 | 
23 |  1. **Who will use the feature?** _“As someone filling out a form…”_
24 |  2. **When will they use the feature?** _“When I enter an invalid value…”_
25 |  3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
26 | 
27 | **If you are filing an issue to report a bug**, please provide:
28 | 
29 |  1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
30 | 
31 |  ```markdown
32 |  The `paper-foo` element causes the page to turn pink when clicked.
33 | 
34 |  ## Expected outcome
35 | 
36 |  The page stays the same color.
37 | 
38 |  ## Actual outcome
39 | 
40 |  The page turns pink.
41 | 
42 |  ## Steps to reproduce
43 | 
44 |  1. Put a `paper-foo` element in the page.
45 |  2. Open the page in a web browser.
46 |  3. Click the `paper-foo` element.
47 |  ```
48 | 
49 |  2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
50 | 
51 |  3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
52 | 
53 | ### Submitting Pull Requests
54 | 
55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
56 | 
57 | When submitting pull requests, please provide:
58 | 
59 |  1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
60 | 
61 |  ```markdown
62 |  (For a single issue)
63 |  Fixes #20
64 | 
65 |  (For multiple issues)
66 |  Fixes #32, fixes #40
67 |  ```
68 | 
69 |  2. **A succinct description of the design** used to fix any related issues. For example:
70 | 
71 |  ```markdown
72 |  This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
73 |  ```
74 | 
75 |  3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
76 | 
77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
78 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # License
 2 | 
 3 | Everything in this repo is BSD style license unless otherwise specified.
 4 | 
 5 | Copyright (c) 2015 The Polymer Authors. All rights reserved.
 6 | 
 7 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright
10 | notice, this list of conditions and the following disclaimer.
11 | * Redistributions in binary form must reproduce the above
12 | copyright notice, this list of conditions and the following disclaimer
13 | in the documentation and/or other materials provided with the
14 | distribution.
15 | * Neither the name of Google Inc. nor the names of its
16 | contributors may be used to endorse or promote products derived from
17 | this software without specific prior written permission.
18 | 
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


--------------------------------------------------------------------------------
/app.yaml:
--------------------------------------------------------------------------------
  1 | # Google App Engine application config file tailored to static websites.
  2 | # Inspired by: https://github.com/h5bp/server-configs-gae
  3 | # Complete documentation can be found here:
  4 | # https://developers.google.com/appengine/docs/php/config/appconfig
  5 | 
  6 | runtime: python27
  7 | api_version: 1
  8 | threadsafe: yes
  9 | 
 10 | default_expiration: "365d" # 1 year, expiration on GAE is max 1 year
 11 | 
 12 | handlers:
 13 | 
 14 | # Fonts and images
 15 | 
 16 | - url: /(.+\.(eot|otf|tt[cf]|woff2?|cur|gif|ico|jpe?g|png|svgz?|webp))
 17 |   static_files: \1
 18 |   upload: (.+\.(eot|otf|tt[cf]|woff2?|cur|gif|ico|jpe?g|png|svgz?|webp))
 19 |   secure: always
 20 |   http_headers:
 21 |     # Allow cross-origin access to web fonts and images
 22 |     # You can also replace "*" with a specific host, e.g. https://example.org
 23 |     Access-Control-Allow-Origin: "*"
 24 | 
 25 | # CSS, Javascript, JSON and other file types
 26 | 
 27 | - url: /cache-config.json
 28 |   static_files: cache-config.json
 29 |   upload: cache-config.json
 30 |   expiration: "0m"
 31 |   secure: always
 32 |   http_headers:
 33 |     Vary: Accept-Encoding
 34 | 
 35 | - url: /sw-import.js
 36 |   static_files: sw-import.js
 37 |   upload: sw-import.js
 38 |   expiration: "0m"
 39 |   secure: always
 40 |   http_headers:
 41 |     Vary: Accept-Encoding
 42 | 
 43 | - url: /(.+\.(css|js|json|xml))
 44 |   static_files: \1
 45 |   upload: (.+\.(css|js|json|xml))
 46 |   secure: always
 47 |   http_headers:
 48 |     Vary: Accept-Encoding
 49 | 
 50 | # HTML pages
 51 | 
 52 | - url: /404.html
 53 |   static_files: 404.html
 54 |   upload: 404.html
 55 |   expiration: "5m"
 56 |   secure: always
 57 |   mime_type: text/html; charset=UTF-8
 58 | 
 59 | - url: /elements/(.+\.html)
 60 |   static_files: elements/\1
 61 |   upload: elements/(.+\.html)
 62 |   secure: always
 63 |   mime_type: text/html; charset=UTF-8
 64 | 
 65 | - url: /(.+\.html)
 66 |   static_files: \1
 67 |   upload: (.+\.html)
 68 |   expiration: "5m"
 69 |   secure: always
 70 |   mime_type: text/html; charset=UTF-8
 71 |   http_headers:
 72 |     # Force Internet Explorer to render pages in the highest available
 73 |     # mode in the various cases when it may not.
 74 |     # https://hsivonen.fi/doctype/#ie8
 75 |     X-UA-Compatible: "IE=edge"
 76 |     # For more details on how to craft a reasonable policy for your site, read:
 77 |     # http://www.html5rocks.com/en/tutorials/security/content-security-policy/ (or
 78 |     # the specification: http://www.w3.org/TR/CSP11/). Also, to make things easier,
 79 |     # you can use an online CSP header generator such as: http://cspisawesome.com/.
 80 |     #Content-Security-Policy: "script-src 'self'; object-src 'self'"
 81 | 
 82 | # Text files
 83 | 
 84 | - url: /humans.txt
 85 |   static_files: humans.txt
 86 |   upload: humans.txt
 87 |   expiration: "5m"
 88 |   secure: always
 89 | 
 90 | - url: /robots.txt
 91 |   static_files: robots.txt
 92 |   upload: robots.txt
 93 |   expiration: "5m"
 94 |   secure: always
 95 | 
 96 | - url: /(.+\.txt)
 97 |   static_files: \1
 98 |   upload: (.+\.txt)
 99 |   secure: always
100 | 
101 | # Homepage
102 | 
103 | - url: .*
104 |   static_files: index.html
105 |   upload: index.html
106 |   expiration: "0m"
107 |   secure: always
108 |   mime_type: text/html; charset=UTF-8
109 |   http_headers:
110 |     Link: '</themes/default-theme/fonts/Roboto-normal-500.woff>; rel=preload; as=font,
111 |            </elements/base-bundle.html>; rel=preload; as=document,
112 |            </cache-config.json>; rel=preload; as=json,
113 |            </elements/base-bundle.js>; rel=preload; as=script,
114 |            </scripts/app.min.js>; rel=preload; as=script,
115 |            </bower_components/platinum-sw/service-worker.js>; rel=preload; as=script,
116 |            </sw-import.js>; rel=preload; as=script'
117 |     X-UA-Compatible: "IE=edge"
118 |     #Content-Security-Policy: "script-src 'self'; object-src 'self'"
119 | 
120 | skip_files:
121 | - ^(.*/)?app\.yaml
122 | - ^(.*/)?app\.yml
123 | - ^(.*/)?#.*#
124 | - ^(.*/)?.*~
125 | - ^(.*/)?.*\.py[co]
126 | 


--------------------------------------------------------------------------------
/app/404.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Page Not Found</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <style>
 8 | 
 9 |         * {
10 |             line-height: 1.2;
11 |             margin: 0;
12 |         }
13 | 
14 |         html {
15 |             color: #888;
16 |             display: table;
17 |             font-family: sans-serif;
18 |             height: 100%;
19 |             text-align: center;
20 |             width: 100%;
21 |         }
22 | 
23 |         body {
24 |             display: table-cell;
25 |             vertical-align: middle;
26 |             margin: 2em auto;
27 |         }
28 | 
29 |         h1 {
30 |             color: #555;
31 |             font-size: 2em;
32 |             font-weight: 400;
33 |         }
34 | 
35 |         p {
36 |             margin: 0 auto;
37 |             width: 280px;
38 |         }
39 | 
40 |         @media only screen and (max-width: 280px) {
41 | 
42 |             body, p {
43 |                 width: 95%;
44 |             }
45 | 
46 |             h1 {
47 |                 font-size: 1.5em;
48 |                 margin: 0 0 0.3em;
49 |             }
50 | 
51 |         }
52 | 
53 |     </style>
54 | </head>
55 | <body>
56 |     <h1>Page Not Found</h1>
57 |     <p>Sorry, but the page you were trying to view does not exist.</p>
58 | </body>
59 | </html>
60 | <!-- IE needs 512+ bytes: http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx -->
61 | 


--------------------------------------------------------------------------------
/app/cache-config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "README": "This is the cache config for the dev server. The service worker cache is disabled, and it is recommended that you leave this as-is. In the dist environment, this file will be auto-generated based on the contents of your dist/ directory.",
3 |   "disabled": true
4 | }
5 | 


--------------------------------------------------------------------------------
/app/content/license.md:
--------------------------------------------------------------------------------
 1 | ## License
 2 | 
 3 | Everything in this repo is BSD style license unless otherwise specified.
 4 | 
 5 | Copyright (c) 2015 The Polymer Authors. All rights reserved.
 6 | 
 7 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 8 | 
 9 | - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
10 | - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
11 | - Neither the name of Google Inc. nor the names of its contributors may be used to endorse or promote products derived from
12 | this software without specific prior written permission.
13 | 
14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
15 | 


--------------------------------------------------------------------------------
/app/elements/base-bundle.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <!-- App Element -->
12 | <link rel="import" href="my-app/my-app.html">
13 | 
14 | <!-- Platinum elements -->
15 | <link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
16 | <link rel="import" href="../bower_components/platinum-sw/platinum-sw-offline-analytics.html">
17 | <link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
18 | 
19 | <!-- Start elements
20 | <link rel="import" href="../bower_components/start-google-analytics-tracker/start-google-analytics-tracker.html">
21 | -->
22 | 


--------------------------------------------------------------------------------
/app/elements/my-app/my-app.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer.html">
12 | 
13 | <!-- App Theme -->
14 | <link rel="import" href="../../themes/{$ config.appTheme $}/theme.html">
15 | 
16 | <!-- Iron elements -->
17 | <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
18 | <link rel="import" href="../../bower_components/iron-localstorage/iron-localstorage.html">
19 | <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
20 | <link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
21 | 
22 | <!-- Paper elements -->
23 | <link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
24 | <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
25 | <link rel="import" href="../../bower_components/paper-item/paper-item.html">
26 | <link rel="import" href="../../bower_components/paper-material/paper-material.html">
27 | <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
28 | <link rel="import" href="../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
29 | <link rel="import" href="../../bower_components/paper-styles/color.html">
30 | <link rel="import" href="../../bower_components/paper-styles/typography.html">
31 | <link rel="import" href="../../bower_components/paper-swatch-picker/paper-swatch-picker.html">
32 | <link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
33 | <link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
34 | <link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
35 | 
36 | <!-- Custom elements -->
37 | <link rel="import" href="../my-greeting/my-greeting.html">
38 | <link rel="import" href="../my-list/my-list.html">
39 | 
40 | <dom-module id="my-app">
41 | 
42 |   <template>
43 |     <style include="shared-styles">
44 |       @import "theme.css";
45 |     </style>
46 |     
47 |     <iron-localstorage id="localStorage" name="{$ config.appNameId $}"
48 |       value="{{storage}}"
49 |       on-iron-localstorage-load-empty="initializeDefaultStorage">
50 |     </iron-localstorage>
51 | 
52 |     <paper-drawer-panel id="paperDrawerPanel" responsive-width="840px" drawer-width="256px">
53 |       {% include "my-app/views/drawer.html" %}
54 |       {% include "my-app/views/main.html" %}
55 |     </paper-drawer-panel>
56 | 
57 |     <paper-toast id="confirmToast" class="Toast" duration="10000">
58 |       <span class="Toast-button" role="button" tabindex="0" on-tap="onConfirmToastTap">OK</span>
59 |     </paper-toast>
60 | 
61 |     <paper-toast id="infoToast" class="Toast" duration="8000"></paper-toast>
62 |   </template>
63 | 
64 |   <script src="my-app.js"></script>
65 | 
66 | </dom-module>
67 | 


--------------------------------------------------------------------------------
/app/elements/my-app/my-app.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | @license
  3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | */
 10 | 
 11 | /* global Polymer */
 12 | 
 13 | class MyApp {
 14 |   beforeRegister() {
 15 |     this.is = 'my-app';
 16 |     this.properties = {
 17 |       /**
 18 |        * Signal to the outside world that this element
 19 |        * has been upgraded. Set in ready
 20 |        * https://github.com/Polymer/polymer/issues/2653
 21 |        */
 22 |       upgraded: Boolean,
 23 |       storage: {
 24 |         type: Object
 25 |       }
 26 |     };
 27 |   }
 28 |   //created() {}
 29 |   ready() {
 30 |     // Let the world know we're ready to receive data
 31 |     // https://github.com/Polymer/polymer/issues/2653
 32 |     this.fire('upgraded');
 33 |     this.upgraded = true;
 34 |   }
 35 |   attached() {
 36 |     let storage = JSON.parse(localStorage.getItem(this.$.localStorage.name));
 37 |     if (storage) {
 38 |       if (storage.darkThemeEnabled) {
 39 |         this.changeTheme(storage.darkThemeEnabled);
 40 |       }
 41 |       if (storage.accentColor) {
 42 |         this.changeAccentColor(storage.accentColor);
 43 |       }
 44 |     }
 45 |   }
 46 |   //detached() {}
 47 |   //attributeChanged() {}
 48 | 
 49 |   // Initialize default storage if nothing has been stored
 50 |   initializeDefaultStorage() {
 51 |     this.storage = {
 52 |       accentColor: null,
 53 |       darkThemeEnabled: null
 54 |     }
 55 |   }
 56 |   // Scroll page to top and expand header
 57 |   scrollPageToTop() {
 58 |     this.$.headerPanelMain.scrollToTop(true);
 59 |   }
 60 |   // Close drawer
 61 |   closeDrawer() {
 62 |     this.$.paperDrawerPanel.closeDrawer();
 63 |   }
 64 |   // Handle change accent color from accentColorSwatchPicker
 65 |   onAccentColorSwatchPickerSelected() {
 66 |     this.changeAccentColor(this.$.accentColorSwatchPicker.color);
 67 |   }
 68 |   // Hide confirmToast after tap on OK button
 69 |   onConfirmToastTap() {
 70 |     this.$.confirmToast.hide();
 71 |   }
 72 |   // Handle change event from darkThemeToggle
 73 |   onDarkThemeToggleChange() {
 74 |     this.changeTheme(this.$.darkThemeToggle.checked);
 75 |   }
 76 |   // Add URL path to Submit Feedback link
 77 |   onSubmitFeedbackTap() {
 78 |     this.$.submitFeedback.href += window.location.pathname;
 79 |   }
 80 |   // Change accent color
 81 |   changeAccentColor(color) {
 82 |     let accentColors = {
 83 |       '#ff5252': 'red',
 84 |       '#ff4081': 'pink',
 85 |       '#e040fb': 'purple',
 86 |       '#7c4dff': 'deep-purple',
 87 |       '#536dfe': 'indigo',
 88 |       '#448aff': 'blue',
 89 |       '#40c4ff': 'light-blue',
 90 |       '#18ffff': 'cyan',
 91 |       '#64ffda': 'teal',
 92 |       '#69f0ae': 'green',
 93 |       '#b2ff59': 'light-green',
 94 |       '#eeff41': 'lime',
 95 |       '#ffff00': 'yellow',
 96 |       '#ffd740': 'amber',
 97 |       '#ffab40': 'orange',
 98 |       '#ff6e40': 'deep-orange'
 99 |     };
100 |     let accentColorName = accentColors[color];
101 |     let themeMode = 'light';
102 |     
103 |     if (this.$.darkThemeToggle.checked) {
104 |       themeMode = 'dark';
105 |     }
106 | 
107 |     this.customStyle['--accent-color'] = this.getComputedStyleValue(`--paper-${accentColorName}-a200`);
108 |     this.customStyle['--light-accent-color'] = this.getComputedStyleValue(`--paper-${accentColorName}-a100`);
109 |     this.customStyle['--dark-accent-color'] = this.getComputedStyleValue(`--paper-${accentColorName}-a400`);
110 |     this.customStyle['--darker-accent-color'] = this.getComputedStyleValue(`--paper-${accentColorName}-a700`);
111 |     
112 |     this.updateStyles();
113 |     
114 |     this.customStyle['--toggle-checked-bar-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-checked-bar-color`);
115 |     this.customStyle['--toggle-checked-button-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-checked-button-color`);
116 |     this.customStyle['--toggle-checked-ink-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-checked-ink-color`);
117 | 
118 |     this.updateStyles();
119 |   }
120 |   // Change theme
121 |   changeTheme(darkThemeEnabled) {
122 |     let themeMode = 'light';
123 | 
124 |     if (darkThemeEnabled) {
125 |       themeMode = 'dark';
126 |     }
127 | 
128 |     this.customStyle['--primary-background-color'] = this.getComputedStyleValue(`--${themeMode}-theme-primary-background-color`);
129 |     this.customStyle['--secondary-background-color'] = this.getComputedStyleValue(`--${themeMode}-theme-secondary-background-color`);
130 |     this.customStyle['--tertiary-background-color'] = this.getComputedStyleValue(`--${themeMode}-theme-tertiary-background-color`);
131 |     this.customStyle['--primary-text-color'] = this.getComputedStyleValue(`--${themeMode}-theme-primary-text-color`);
132 |     this.customStyle['--secondary-text-color'] = this.getComputedStyleValue(`--${themeMode}-theme-secondary-text-color`);
133 |     this.customStyle['--disabled-text-color'] = this.getComputedStyleValue(`--${themeMode}-theme-disabled-text-color`);
134 |     this.customStyle['--divider-color'] = this.getComputedStyleValue(`--${themeMode}-theme-divider-color`);
135 | 
136 |     this.customStyle['--toggle-unchecked-bar-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-unchecked-bar-color`);
137 |     this.customStyle['--toggle-unchecked-button-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-unchecked-button-color`);
138 |     this.customStyle['--toggle-unchecked-ink-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-unchecked-ink-color`);
139 |     this.customStyle['--toggle-checked-bar-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-checked-bar-color`);
140 |     this.customStyle['--toggle-checked-button-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-checked-button-color`);
141 |     this.customStyle['--toggle-checked-ink-color'] = this.getComputedStyleValue(`--${themeMode}-theme-toggle-checked-ink-color`);
142 | 
143 |     this.updateStyles();
144 |   }
145 | }
146 | 
147 | Polymer(MyApp);
148 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/drawer.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <!-- Drawer Scroll Header Panel -->
12 | <paper-scroll-header-panel class="Drawer" drawer fixed>
13 |   <!-- Drawer Toolbar -->
14 |   <paper-toolbar class="Drawer-header">
15 |     <span class="Drawer-title">{$ appName $}</span>
16 |   </paper-toolbar>
17 | 
18 |   <!-- Drawer Content -->
19 |   <div class="Drawer-content">
20 |     <!-- Navigation -->
21 |     <nav class="Drawer-widget">
22 |       <paper-menu class="Navigation Navigation--menu list" attr-for-selected="data-route" selected="[[route]]">
23 |         <a class="Navigation-link" data-route="home" href$="{{baseUrl}}">
24 |           <iron-icon class="Navigation-icon" icon="home"></iron-icon>
25 |           <span class="Navigation-text">Home</span>
26 |         </a>
27 |   
28 |         <a class="Navigation-link" data-route="users" href$="{{baseUrl}}users">
29 |           <iron-icon class="Navigation-icon" icon="supervisor-account"></iron-icon>
30 |           <span class="Navigation-text">Users</span>
31 |         </a>
32 |   
33 |         <a class="Navigation-link" data-route="contact" href$="{{baseUrl}}contact">
34 |           <iron-icon class="Navigation-icon" icon="mail"></iron-icon>
35 |           <span class="Navigation-text">Contact</span>
36 |         </a>
37 |       </paper-menu>
38 |     </nav>
39 | 
40 |     <span class="u-spacer"></span>
41 | 
42 |     <div class="Drawer-widget Drawer-widget--bottom">
43 |       <paper-menu class="Navigation Navigation--menu list" attr-for-selected="data-route" selected="[[route]]">
44 |         <a class="Navigation-link" data-route="settings" href$="{{baseUrl}}settings" rel="nofollow">
45 |           <iron-icon class="Navigation-icon" icon="settings"></iron-icon>
46 |           <span class="Navigation-text">Settings</span>
47 |         </a>
48 |       </paper-menu>
49 | 
50 |       <div class="Navigation">
51 |         <a id="submitFeedback" class="Navigation-link" href="https://github.com/StartPolymer/polymer-starter-kit-plus/issues/new?title=Feedback%20for:%20" on-tap="onSubmitFeedbackTap" target="_blank">
52 |           <iron-icon class="Navigation-icon" icon="announcement"></iron-icon>
53 |           <span class="Navigation-text">Submit Feedback</span>
54 |         </a>
55 |         
56 |         <a class="Navigation-link" href="https://github.com/StartPolymer/polymer-starter-kit-plus/blob/master/README.md" target="_blank">
57 |           <iron-icon class="Navigation-icon" icon="help"></iron-icon>
58 |           <span class="Navigation-text">Help</span>
59 |         </a>
60 |       </div>
61 |     </div>
62 | 
63 |     <div class="Drawer-widget Drawer-widget--footer">
64 |       <span>{$ config.appVersion $}</span>
65 |       &nbsp;-&nbsp;
66 |       <a class="Drawer-link" href="https://github.com/StartPolymer/polymer-starter-kit-plus" target="_blank">View Source</a>
67 |     </div>
68 |   </div>
69 | </paper-scroll-header-panel>
70 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/main.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <!-- Main Area -->
12 | <paper-scroll-header-panel id="headerPanelMain" class="Main" main condenses keep-condensed-header>
13 | 
14 |   <!-- Main Toolbar -->
15 |   <paper-toolbar class="Main-header tall">
16 |     <!-- Header icons -->
17 |     <div class="Main-headerTopBar top">
18 |       <paper-icon-button id="paperToggle" class="Main-headerButton" icon="menu" paper-drawer-toggle></paper-icon-button>
19 |       <span class="u-spacer"></span>
20 |       <paper-icon-button class="Main-headerButton" icon="search"></paper-icon-button>
21 |       <paper-icon-button class="Main-headerButton" icon="bell-outline"></paper-icon-button>
22 |     </div>
23 | 
24 |     <!-- Header title -->
25 |     <div class="Main-headerMiddleBar middle">
26 |       <h1 class="Main-headerTitle">{{ pageTitle }}</h1>
27 |     </div>
28 | 
29 |     <!-- Header sub title -->
30 |     <div class="Main-headerBottomBar bottom">
31 |       <div class="Main-headerSubTitle">{{ pageSubTitle }}</div>
32 |     </div>
33 |   </paper-toolbar>
34 | 
35 |   <!-- Main Content -->
36 |   <iron-pages class="Main-content" attr-for-selected="data-route" selected="{{route}}">
37 |     {% include "my-app/views/pages/home.html" %}
38 |     {% include "my-app/views/pages/users.html" %}
39 |     {% include "my-app/views/pages/user-info.html" %}
40 |     {% include "my-app/views/pages/contact.html" %}
41 |     {% include "my-app/views/pages/settings.html" %}
42 |   </iron-pages>
43 | </paper-scroll-header-panel>
44 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/pages/contact.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <section class="Page" data-route="contact">
12 |   <paper-material class="Page-paper" elevation="1">
13 |   </paper-material>
14 | </section>
15 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/pages/home.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <section class="Page" data-route="home">
12 |   <paper-material class="Page-paper" elevation="1">
13 |     <my-greeting class="u-focusTarget" tabindex="-1"></my-greeting>
14 | 
15 |     <p class="Page-subTitle">You now have:</p>
16 |     <my-list></my-list>
17 | 
18 |     <p>Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
19 |   </paper-material>
20 | 
21 |   <paper-material class="Page-paper" elevation="1">
22 |     <p>This is another card.</p>
23 |   </paper-material>
24 | 
25 |   <paper-material class="Page-paper" elevation="1">
26 |     {% markdown "license.md" %}
27 |   </paper-material>
28 | </section>
29 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/pages/settings.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <section class="Page" data-route="settings">
12 |   <paper-material class="Page-paper Page-paper--settings" elevation="1">
13 |     <h2 class="Page-title u-focusTarget" tabindex="-1">Colors</h2>
14 |     <div class="Page-widget">
15 |       <div class="SwatchPicker">
16 |         <iron-icon class="SwatchPicker-icon" icon="color-lens"></iron-icon>
17 |         <span id="accentColorSwatchPicker_label" class="SwatchPicker-label">Accent Color</span>
18 |         <span class="u-spacer"></span>
19 |         <paper-swatch-picker id="accentColorSwatchPicker" class="SwatchPicker-button"
20 |           aria-labelledby="accentColorSwatchPicker_label"
21 |           color="{{storage.accentColor}}"
22 |           on-color-picker-selected="onAccentColorSwatchPickerSelected"
23 |           column-count="4"
24 |           color-list='["#ff5252", "#ff4081", "#e040fb", "#7c4dff", "#536dfe", "#448aff", "#40c4ff", "#18ffff", "#64ffda", "#69f0ae", "#b2ff59", "#eeff41", "#ffff00", "#ffd740", "#ffab40", "#ff6e40"]'
25 |           horizontal-align="right">
26 |         </paper-swatch-picker>
27 |       </div>
28 |       
29 |       <div class="Toggle">
30 |         <iron-icon class="Toggle-icon" icon="theme-light-dark"></iron-icon>
31 |         <span id="darkThemeToggle_label" class="Toggle-label">Dark Theme</span>
32 |         <span class="u-spacer"></span>
33 |         <paper-toggle-button id="darkThemeToggle" class="Toggle-button"
34 |           aria-labelledby="darkThemeToggle_label" toggles
35 |           checked="{{storage.darkThemeEnabled::change}}"
36 |           on-change="onDarkThemeToggleChange">
37 |         </paper-toggle-button>
38 |       </div>
39 |     </div>
40 |   </paper-material>
41 | </section>
42 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/pages/user-info.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <section class="Page" data-route="user-info">
12 |   <paper-material class="Page-paper" elevation="1">
13 |     <h2 class="Page-title u-focusTarget" tabindex="-1">User: {{params.name}}</h2>
14 |     <div>This is {{params.name}}'s section</div>
15 |   </paper-material>
16 | </section>
17 | 


--------------------------------------------------------------------------------
/app/elements/my-app/views/pages/users.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <section class="Page" data-route="users">
12 |   <paper-material class="Page-paper" elevation="1">
13 |     <a class="u-focusTarget" href$="{{baseUrl}}users/Addy" tabindex="-1">Addy</a><br>
14 |     <a href$="{{baseUrl}}users/Rob">Rob</a><br>
15 |     <a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
16 |     <a href$="{{baseUrl}}users/Sam">Sam</a>
17 |   </paper-material>
18 | </section>
19 | 


--------------------------------------------------------------------------------
/app/elements/my-greeting/my-greeting.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | 
11 | :host {
12 |   display: block;
13 | }
14 | 
15 | /*
16 |  This class is used when we manage the focus start point (like when a new page
17 |  is loaded). We typically move the focus start point to the first header in the
18 |  page and don't want a focus ring to display. Instead the next time the user
19 |  presses tab the focus ring will appear on the nearest, focusable element.
20 | */
21 | .focus-target {
22 |   outline: none;
23 | }
24 | 


--------------------------------------------------------------------------------
/app/elements/my-greeting/my-greeting.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer.html">
12 | <link rel="import" href="../../bower_components/iron-input/iron-input.html">
13 | <link rel="import" href="../../bower_components/paper-input/paper-input-container.html">
14 | <link rel="import" href="../../bower_components/paper-input/paper-input-container.html">
15 | <link rel="import" href="../../bower_components/paper-input/paper-input-char-counter.html">
16 | 
17 | <dom-module id="my-greeting">
18 | 
19 |   <template>
20 |     <style include="shared-styles">
21 |       @import "my-greeting/my-greeting";
22 |     </style>
23 | 
24 |     <h2 class="Page-title" tabindex="-1">{{greeting}}</h2>
25 |     <paper-input-container class="Page-formInput">
26 |       <label for="greetingInput">Update text to change the greeting</label>
27 |       <!-- Listens for "input" event and sets greeting to <input>.value -->
28 |       <input is="iron-input" id="greetingInput" value="{{greeting::input}}">
29 |       <paper-input-char-counter></paper-input-char-counter>
30 |     </paper-input-container>
31 |   </template>
32 | 
33 |   <script src="my-greeting.js"></script>
34 | 
35 | </dom-module>
36 | 


--------------------------------------------------------------------------------
/app/elements/my-greeting/my-greeting.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | 
11 | /* global Polymer */
12 | 
13 | class MyGreeting {
14 |   beforeRegister() {
15 |     this.is = 'my-greeting';
16 |     this.properties = {
17 |       greeting: {
18 |         type: String,
19 |         value: 'Welcome!',
20 |         notify: true
21 |       }
22 |     };
23 |   }
24 | }
25 | 
26 | Polymer(MyGreeting);
27 | 


--------------------------------------------------------------------------------
/app/elements/my-list/my-list.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | 
11 | :host {
12 |   display: block;
13 | }
14 | 


--------------------------------------------------------------------------------
/app/elements/my-list/my-list.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer.html">
12 | 
13 | <dom-module id="my-list">
14 |   <template>
15 |     <style>
16 |       @import "my-list/my-list";
17 |     </style>
18 | 
19 |     <ul>
20 |       <template is="dom-repeat" items="{{items}}">
21 |         <li><span>{{item}}</span></li>
22 |       </template>
23 |     </ul>
24 |   </template>
25 | 
26 |   <script src="my-list.js"></script>
27 | 
28 | </dom-module>
29 | 


--------------------------------------------------------------------------------
/app/elements/my-list/my-list.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | 
11 | /* global Polymer */
12 | 
13 | class MyList {
14 |   beforeRegister() {
15 |     this.is = 'my-list';
16 |     this.properties = {
17 |       items: {
18 |         type: Array,
19 |         notify: true
20 |       }
21 |     };
22 |   }
23 |   ready() {
24 |     this.items = [
25 |       'Responsive Web App boilerplate',
26 |       'Iron Elements and Paper Elements',
27 |       'End-to-end Build Tooling (including Vulcanize)',
28 |       'Unit testing with Web Component Tester',
29 |       'Routing with Page.js',
30 |       'Offline support with the Platinum Service Worker Elements'
31 |     ];
32 |   }
33 | }
34 | 
35 | Polymer(MyList);
36 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/favicon.ico


--------------------------------------------------------------------------------
/app/humans.txt:
--------------------------------------------------------------------------------
 1 | # humanstxt.org
 2 | # The humans responsible & technology colophon
 3 | 
 4 | # TEAM
 5 | 
 6 | Company:
 7 | Developer:
 8 | Site:
 9 | From:
10 | 
11 | # THANKS
12 | 
13 | Names:         Google, GitHub
14 | 
15 | # SITE
16 | 
17 | Boilerplate:   Polymer Starter Kit Plus
18 | Design:        Material Design
19 | Doctype:       HTML5
20 | Language:      English
21 | Library:       Polymer
22 | Methodologies: Progressive Web App, SUIT CSS
23 | Standards:     HTML5, CSS3, Web Components
24 | Tools:         Autoprefixer, Babel, Browsersync, Gulp, Nunjucks, PostCSS
25 | 


--------------------------------------------------------------------------------
/app/images/touch/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/apple-touch-icon.png


--------------------------------------------------------------------------------
/app/images/touch/chrome-splashscreen-icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/chrome-splashscreen-icon-384x384.png


--------------------------------------------------------------------------------
/app/images/touch/chrome-touch-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/chrome-touch-icon-192x192.png


--------------------------------------------------------------------------------
/app/images/touch/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/icon-128x128.png


--------------------------------------------------------------------------------
/app/images/touch/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/icon-512x512.png


--------------------------------------------------------------------------------
/app/images/touch/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/icon-72x72.png


--------------------------------------------------------------------------------
/app/images/touch/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/icon-96x96.png


--------------------------------------------------------------------------------
/app/images/touch/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/ms-icon-144x144.png


--------------------------------------------------------------------------------
/app/images/touch/ms-touch-icon-144x144-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartPolymer/polymer-starter-kit-plus-old/02726877e17987e6a50d191dcb15c4aa86858079/app/images/touch/ms-touch-icon-144x144-precomposed.png


--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | 
12 | <html lang="{$ lang $}">
13 | {% include "head.html" %}
14 | 
15 | <!-- Don't use <body unresolved>. It's a simple FOUC solution, but hides
16 |      the page until imports and Polymer are loaded. Intead, control FOUC manually with
17 |      a skeleton. -->
18 | <body>
19 |   <span id="browser-sync-binding"></span>
20 | 
21 |   <!-- Light weight skeleton is outside of Polymer/imports and styled by
22 |        the main page. 1st paint is fast, even on polyfilled browsers. Alternatively,
23 |        one could create an "app shell" and style the page's un-upgraded elements
24 |        similar to their final upgraded version. -->
25 |   {% include "skeleton.html" %}
26 | 
27 |   <!-- Elements wait on the page and are upgraded when elements/base-bundle.html loads. -->
28 |   <my-app id="app"></my-app>
29 | 
30 |   <!-- Service Worker support -->
31 |   <platinum-sw-register auto-register
32 |                         clients-claim
33 |                         skip-waiting
34 |                         base-uri="bower_components/platinum-sw/bootstrap">
35 |     <!-- Google Analytics offline support
36 |     <platinum-sw-offline-analytics></platinum-sw-offline-analytics>
37 |     -->
38 |     <platinum-sw-cache default-cache-strategy="fastest"
39 |                        cache-config-file="cache-config.json">
40 |     </platinum-sw-cache>
41 |   </platinum-sw-register>
42 | 
43 |   <!-- build:js scripts/app.min.js async -->
44 |   <script src="bower_components/page/page.js"></script>
45 |   <script src="scripts/app.js"></script>
46 |   <script src="scripts/routing.js"></script>
47 |   <!-- endbuild-->
48 | 
49 |   <!-- Google Analytics tracker
50 |   <start-google-analytics-tracker code="{$ config.googleAnalyticsTrackingId $}"></start-google-analytics-tracker>
51 |   -->
52 | </body>
53 | 
54 | </html>
55 | 


--------------------------------------------------------------------------------
/app/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{$ appName $}",
 3 |   "short_name": "{$ appShortName $}",
 4 |   "icons": [{
 5 |         "src": "images/touch/icon-72x72.png",
 6 |         "sizes": "72x72",
 7 |         "type": "image/png"
 8 |       }, {
 9 |         "src": "images/touch/icon-96x96.png",
10 |         "sizes": "96x96",
11 |         "type": "image/png"
12 |       }, {
13 |         "src": "images/touch/icon-128x128.png",
14 |         "sizes": "128x128",
15 |         "type": "image/png"
16 |       }, {
17 |         "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
18 |         "sizes": "144x144",
19 |         "type": "image/png"
20 |       }, {
21 |         "src": "images/touch/apple-touch-icon.png",
22 |         "sizes": "152x152",
23 |         "type": "image/png"
24 |       }, {
25 |         "src": "images/touch/chrome-touch-icon-192x192.png",
26 |         "sizes": "192x192",
27 |         "type": "image/png"
28 |       },{
29 |         "src": "images/touch/chrome-splashscreen-icon-384x384.png",
30 |         "sizes": "384x384",
31 |         "type": "image/png"
32 |       },{
33 |         "src": "images/touch/icon-512x512.png",
34 |         "sizes": "512x512",
35 |         "type": "image/png"
36 |       }],
37 |   "start_url": "./?utm_source=web_app_manifest",
38 |   "display": "standalone",
39 |   "theme_color": "{$ theme.manifest.themeColor $}",
40 |   "background_color": "{$ theme.manifest.backgroundColor $}"
41 | }
42 | 


--------------------------------------------------------------------------------
/app/metadata/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   baseUrl: '/',
3 |   baseCanonicalUrl: 'https://polymer-starter-kit-plus.appspot.com/',
4 |   // Google Analytics Tracking ID
5 |   googleAnalyticsTrackingId: 'UA-XXXX-Y'
6 | };
7 | 


--------------------------------------------------------------------------------
/app/metadata/general.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   appName: 'Polymer Starter Kit +',
 3 |   appShortName: 'PSK+',
 4 |   title: 'Polymer Starter Kit Plus',
 5 |   description: 'The future of the web today',
 6 |   charset: 'utf-8',
 7 |   lang: 'en',
 8 |   // Add to homescreen for Chrome on Android
 9 |   applicationName: 'PSK+',
10 |   // Add to homescreen for Safari on iOS
11 |   appleMobileWebAppTitle: 'PSK+'
12 | };
13 | 


--------------------------------------------------------------------------------
/app/robots.txt:
--------------------------------------------------------------------------------
1 | # www.robotstxt.org
2 | 
3 | User-agent: *
4 | Disallow:
5 | 


--------------------------------------------------------------------------------
/app/scripts/app.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | @license
  3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | */
 10 | 
 11 | /* global CustomEvent, Polymer */
 12 | 
 13 | (function(document) {
 14 |   'use strict';
 15 | 
 16 |   // Grab a reference to our auto-binding template
 17 |   // and give it some initial binding values
 18 |   // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
 19 |   let app = document.getElementById('app');
 20 | 
 21 |   // Debug mode
 22 |   app.debug = true;
 23 | 
 24 |   // Logger for debug mode
 25 |   let logger = text => {
 26 |     if (app.debug) {
 27 |       console.info(text);
 28 |     }
 29 |   };
 30 | 
 31 |   // Conditionally load the webcomponents polyfill if needed by the browser.
 32 |   // This feature detect will need to change over time as browsers implement
 33 |   // different features.
 34 |   var webComponentsSupported = ('registerElement' in document &&
 35 |     'import' in document.createElement('link') &&
 36 |     'content' in document.createElement('template'));
 37 | 
 38 |   function finishLazyLoading() {
 39 |     // (Optional) Use native Shadow DOM if it's available in the browser.
 40 |     // WARNING! This will mess up the page.js router which uses event delegation
 41 |     // and expects to receive events from anchor tags. These events get re-targeted
 42 |     // by the Shadow DOM to point to <my-app>
 43 |     // window.Polymer = window.Polymer || {dom: 'shadow'};
 44 | 
 45 |     // When base-bundle.html with elements is loaded
 46 |     var onImportLoaded = function() {
 47 |       logger('Imports are loaded and elements have been registered!');
 48 |       
 49 |       // Remove skeleton
 50 |       var skeleton = document.getElementById('skeleton');
 51 |       skeleton.remove();
 52 | 
 53 |       if (webComponentsSupported) {
 54 |         // Emulate WebComponentsReady event for browsers supporting Web Components natively
 55 |         // (Chrome, Opera, Vivaldi)
 56 |         document.dispatchEvent(
 57 |           new CustomEvent('WebComponentsReady', {bubbles: true})
 58 |         );
 59 |       }
 60 |     };
 61 | 
 62 |     var elementsBaseBundle = document.getElementById('elementsBaseBundle');
 63 | 
 64 |     // Go if the async Import loaded quickly. Otherwise wait for it.
 65 |     // crbug.com/504944 - readyState never goes to complete until Chrome 46.
 66 |     // crbug.com/505279 - Resource Timing API is not available until Chrome 46.
 67 |     if (elementsBaseBundle.import && elementsBaseBundle.import.readyState === 'complete') {
 68 |       onImportLoaded();
 69 |     } else {
 70 |       elementsBaseBundle.addEventListener('load', onImportLoaded);
 71 |     }
 72 |   }
 73 | 
 74 |   if (!webComponentsSupported) {
 75 |     logger('Web Components aren\'t supported!');
 76 |     var script = document.createElement('script');
 77 |     script.async = true;
 78 |     script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
 79 |     script.onload = finishLazyLoading;
 80 |     document.head.appendChild(script);
 81 |   } else {
 82 |     logger('Web Components are supported!');
 83 |     finishLazyLoading();
 84 |   }
 85 | 
 86 |   // Listen for template bound event to know when bindings
 87 |   // have resolved and content has been stamped to the page
 88 |   app.addEventListener('dom-change', () => {
 89 |     logger('Our app is ready to rock!');
 90 |   });
 91 | 
 92 |   // See https://github.com/Polymer/polymer/issues/1381
 93 |   window.addEventListener('WebComponentsReady', () => {
 94 |     /* imports are loaded and elements have been registered */
 95 |   });
 96 | 
 97 |   window.addEventListener('service-worker-error', e => {
 98 |     // Check to make sure caching is actually enabled—it won't be in the dev environment.
 99 |     if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
100 |       logger(e.detail);
101 |     }
102 |   });
103 | 
104 |   window.addEventListener('service-worker-installed', () => {
105 |     // Check to make sure caching is actually enabled—it won't be in the dev environment.
106 |     if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
107 |       app.$.infoToast.text = 'Caching complete! This app will work offline.';
108 |       app.$.infoToast.show();
109 |     }
110 |   });
111 | 
112 |   window.addEventListener('service-worker-updated', e => {
113 |     // Check to make sure caching is actually enabled—it won't be in the dev environment.
114 |     if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
115 |       logger(e.detail);
116 |     }
117 |   });
118 | 
119 |   // Main area's paper-scroll-header-panel custom condensing transformation of
120 |   // the headerTitle in the middle-container and the bottom title in the bottom-container.
121 |   // The headerTitle is moved to top and shrunk on condensing. The bottom sub title
122 |   // is shrunk to nothing on condensing.
123 |   window.addEventListener('paper-header-transform', e => {
124 |     let headerTitle = app.querySelector('.Main-headerTitle');
125 |     let headerSubTitle = app.querySelector('.Main-headerSubTitle');
126 |     let headerMiddleBar = app.querySelector('.Main-headerMiddleBar');
127 |     let headerBottomBar = app.querySelector('.Main-headerBottomBar');
128 |     let detail = e.detail;
129 |     let heightDiff = detail.height - detail.condensedHeight;
130 |     let yRatio = Math.min(1, detail.y / heightDiff);
131 |     let yRatio2 = Math.min(1, detail.y / (heightDiff + 30));
132 |     // headerTitle max size when condensed. The smaller the number the smaller the condensed size.
133 |     var maxMiddleScale = 0.70;
134 |     var auxHeight = heightDiff - detail.y;
135 |     var auxScale = heightDiff / (1 - maxMiddleScale);
136 |     var scaleMiddle = Math.max(maxMiddleScale, auxHeight / auxScale + maxMiddleScale);
137 |     var scaleBottom = 1 - yRatio;
138 | 
139 |     // Move/translate headerMiddleContent and headerBottomContent
140 |     if (window.matchMedia('(min-width: 600px)').matches) {
141 |       Polymer.Base.transform(`translate3d(0,${yRatio2 * 100}%,0)`, headerMiddleBar);
142 |     } else {
143 |       Polymer.Base.transform(`translate3d(${yRatio * 18}px,${yRatio2 * 100}%,0)`,
144 |         headerMiddleBar);
145 |       Polymer.Base.transform(`translate3d(${yRatio * 18}px,0,0)`, headerBottomBar);
146 |     }
147 | 
148 |     // Scale headerTitle
149 |     Polymer.Base.transform(`scale(${scaleMiddle}) translateZ(0)`, headerTitle);
150 |     // Scale headerSubTitle
151 |     Polymer.Base.transform(`scale(${scaleBottom}) translateZ(0)`, headerSubTitle);
152 |   });
153 | 
154 | })(document);
155 | 


--------------------------------------------------------------------------------
/app/scripts/routing.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | @license
  3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | */
 10 | 
 11 | /* global page */
 12 | 
 13 | // We use Page.js for routing. This is a Micro
 14 | // client-side router inspired by the Express router
 15 | // More info: https://visionmedia.github.io/page.js/
 16 | 
 17 | // Sets app default base URL
 18 | let baseUrl = '/';
 19 | 
 20 | if (window.location.port === '') {  // if production
 21 |   // Uncomment baseURL below and
 22 |   // set baseURL to '/your-pathname/' if running from folder in production
 23 |   // baseUrl = '/polymer-starter-kit-plus/';
 24 | 
 25 |   // Removes end / from baseUrl which page.base requires for production
 26 |   page.base(baseUrl.replace(/\/$/, ''));
 27 | }
 28 | 
 29 | let app = document.getElementById('app');
 30 | 
 31 | window.addEventListener('upgraded', () => {
 32 |   app.baseUrl = baseUrl;
 33 | });
 34 | 
 35 | // Utility function to listen to an event on a node once.
 36 | function once(node, event, fn, args) {
 37 |   var self = this;
 38 |   var listener = function() {
 39 |     fn.apply(self, args);
 40 |     node.removeEventListener(event, listener, false);
 41 |   };
 42 |   node.addEventListener(event, listener, false);
 43 | }
 44 | 
 45 | // Middleware
 46 | function scrollToTop(ctx, next) {
 47 |   function setData() {
 48 |     app.scrollPageToTop();
 49 |   }
 50 | 
 51 |   // Check if element prototype has not been upgraded yet
 52 |   if (!app.upgraded) {
 53 |     once(app, 'upgraded', setData);
 54 |   } else {
 55 |     setData();
 56 |   }
 57 |   next();
 58 | }
 59 | 
 60 | function closeDrawer(ctx, next) {
 61 |   function setData() {
 62 |     app.closeDrawer();
 63 |   }
 64 | 
 65 |   // Check if element prototype has not been upgraded yet
 66 |   if (!app.upgraded) {
 67 |     once(app, 'upgraded', setData);
 68 |   } else {
 69 |     setData();
 70 |   }
 71 |   next();
 72 | }
 73 | 
 74 | function setFocus(selected){
 75 |   document.querySelector('section[data-route="' + selected + '"]').focus();
 76 | }
 77 | 
 78 | // Routes
 79 | page('*', scrollToTop, closeDrawer, (ctx, next) => {
 80 |   next();
 81 | });
 82 | 
 83 | function setHomePage() {
 84 |   function setData() {
 85 |     app.route = 'home';
 86 |     app.pageTitle = 'Polymer';
 87 |     app.pageSubTitle = 'The future of the web today';
 88 |     setFocus(app.route);
 89 |   }
 90 | 
 91 |   // Check if element prototype has not been upgraded yet
 92 |   if (!app.upgraded) {
 93 |     once(app, 'upgraded', setData);
 94 |   } else {
 95 |     setData();
 96 |   }
 97 | }
 98 | 
 99 | page('/', () => {
100 |   setHomePage();
101 | });
102 | 
103 | page(baseUrl, () => {
104 |   setHomePage();
105 | });
106 | 
107 | page('/users', () => {
108 |   function setData() {
109 |     app.route = 'users';
110 |     app.pageTitle = 'Users';
111 |     app.pageSubTitle = 'This is the users section';
112 |     setFocus(app.route);
113 |   }
114 | 
115 |   // Check if element prototype has not been upgraded yet
116 |   if (!app.upgraded) {
117 |     once(app, 'upgraded', setData);
118 |   } else {
119 |     setData();
120 |   }
121 | });
122 | 
123 | page('/users/:name', ctx => {
124 |   function setData() {
125 |     app.route = 'user-info';
126 |     app.pageTitle = 'User information';
127 |     app.pageSubTitle = 'This is the users section';
128 |     app.params = ctx.params;
129 |     setFocus(app.route);
130 |   }
131 | 
132 |   // Check if element prototype has not been upgraded yet
133 |   if (!app.upgraded) {
134 |     once(app, 'upgraded', setData);
135 |   } else {
136 |     setData();
137 |   }
138 | });
139 | 
140 | page('/contact', () => {
141 |   function setData() {
142 |     app.route = 'contact';
143 |     app.pageTitle = 'Contact';
144 |     app.pageSubTitle = 'This is the contact section';
145 |     setFocus(app.route);
146 |   }
147 | 
148 |   // Check if element prototype has not been upgraded yet
149 |   if (!app.upgraded) {
150 |     once(app, 'upgraded', setData);
151 |   } else {
152 |     setData();
153 |   }
154 | });
155 | 
156 | page('/settings', () => {
157 |   function setData() {
158 |     app.route = 'settings';
159 |     app.pageTitle = 'Settings';
160 |     app.pageSubTitle = 'Edit your settings';
161 |     setFocus(app.route);
162 |   }
163 | 
164 |   // Check if element prototype has not been upgraded yet
165 |   if (!app.upgraded) {
166 |     once(app, 'upgraded', setData);
167 |   } else {
168 |     setData();
169 |   }
170 | });
171 | 
172 | // 404
173 | page('*', ctx => {
174 |   function setData() {
175 |     let url = ctx.path.substr(1);
176 |     app.$.confirmToast.text = `Can't find: ${url}. Redirected you to Home Page`;
177 |     app.$.confirmToast.show();
178 |     page.redirect(baseUrl);
179 |   }
180 | 
181 |   // Check if element prototype has not been upgraded yet
182 |   if (!app.upgraded) {
183 |     once(app, 'upgraded', setData);
184 |   } else {
185 |     setData();
186 |   }
187 | });
188 | 
189 | page({
190 |   // add #! before urls
191 |   // https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
192 |   // Disable for Firebase or GAE
193 |   hashbang: false
194 | });
195 | 


--------------------------------------------------------------------------------
/app/sw-import.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | 
11 | importScripts('bower_components/platinum-sw/service-worker.js');
12 | 


--------------------------------------------------------------------------------
/app/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | 
12 | <html>
13 | 
14 |   <head>
15 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16 |     <title>Elements Test Runner</title>
17 |     <meta charset="UTF-8">
18 | 
19 |     <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
20 |     <script src="../bower_components/web-component-tester/browser.js"></script>
21 |   </head>
22 | 
23 |   <body>
24 | 
25 |     <script>
26 |       WCT.loadSuites([
27 |         'my-greeting-basic.html',
28 |         'my-greeting-basic.html?dom=shadow',
29 |         'my-list-basic.html',
30 |         'my-list-basic.html?dom=shadow'
31 |       ]);
32 |     </script>
33 | 
34 | 
35 |   </body>
36 | 
37 | </html>
38 | 


--------------------------------------------------------------------------------
/app/test/my-greeting-basic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | 
12 | <html>
13 | <head>
14 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 |   <title>my-greeting-basic</title>
16 | 
17 |   <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
18 |   <script src="../bower_components/web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Import the element to test -->
21 |   <link rel="import" href="../elements/my-greeting/my-greeting.html">
22 | 
23 | </head>
24 | <body>
25 | 
26 |   <test-fixture id="basic">
27 |     <template>
28 |       <my-greeting></my-greeting>
29 |     </template>
30 |   </test-fixture>
31 | 
32 |   <script>
33 | 
34 |     suite('my-greeting tests', function() {
35 |       var greeting, header;
36 | 
37 |       setup(function() {
38 |         greeting = fixture('basic');
39 |       });
40 | 
41 |       test('Welcome!', function() {
42 |         header = greeting.$$('h1');
43 |         assert.equal(header.textContent, 'Welcome!');
44 |       });
45 | 
46 |     });
47 |   </script>
48 | 
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/app/test/my-list-basic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | 
12 | <html>
13 | <head>
14 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 |   <title>my-list-basic</title>
16 | 
17 |   <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
18 |   <script src="../bower_components/web-component-tester/browser.js"></script>
19 | 
20 |   <!-- Import the element to test -->
21 |   <link rel="import" href="../elements/my-list/my-list.html">
22 | 
23 | </head>
24 | <body>
25 | 
26 |   <test-fixture id="basic">
27 |     <template>
28 |        <my-list></my-list>
29 |     </template>
30 |   </test-fixture>
31 | 
32 |   <script>
33 |     suite('my-list tests', function() {
34 |       var list, listItems;
35 | 
36 |       setup(function() {
37 |         list = fixture('basic');
38 |       });
39 | 
40 |       test('Item lengths should be equalled', function(done) {
41 |         // Test a property
42 |         // TODO: Fix list.items.push('Foo') causing a WeakMap exception
43 |         // Invalid value used as weak map key
44 |         list.items = [
45 |           'Responsive Web App boilerplate',
46 |           'Iron Elements and Paper Elements',
47 |           'End-to-end Build Tooling (including Vulcanize)',
48 |           'Unit testing with Web Component Tester',
49 |           'Routing with Page.js',
50 |           'Offline support with the Platinum Service Worker Elements'
51 |         ];
52 | 
53 |         // Data bindings will stamp out new DOM asynchronously
54 |         // so wait to check for updates
55 |         flush(function() {
56 |           listItems = Polymer.dom(list.root).querySelectorAll('li');
57 |           assert.equal(list.items.length, listItems.length);
58 |           done();
59 |         });
60 |       })
61 |     });
62 |   </script>
63 | 
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/breakpoints.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | */
  9 | 
 10 | /*
 11 | Material Design Adaptive UI Breakpoints
 12 | http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
 13 | 
 14 | Following SUIT CSS naming conventions
 15 | https://github.com/suitcss/utils-size#configuration
 16 | https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
 17 | */
 18 | 
 19 | /* Single level of content hierarchy on the screen */
 20 | @custom-media --sm-viewport (max-width: 599px);
 21 | 
 22 | /* Two levels of content hierarchy on the screen */
 23 | @custom-media --md-viewport (min-width: 600px);
 24 | 
 25 | /* Max screen widths */
 26 | @custom-media --lg-viewport (min-width: 1600px);
 27 | 
 28 | /* Grid Breakpoints */
 29 | @custom-media --4-col-grid  (orientation: portrait) and (max-width: 479px);
 30 | @custom-media --8-col-grid  (orientation: portrait) and (min-width: 480px) and (max-width: 839px);
 31 | @custom-media --12-col-grid (orientation: portrait) and (min-width: 840px);
 32 | 
 33 | /* Phone Breakpoints */
 34 | @custom-media --sm-phone           (orientation: portrait) and (max-width: 359px);
 35 | @custom-media --md-phone           (orientation: portrait) and (min-width: 360px) and (max-width: 399px);
 36 | @custom-media --lg-phone           (orientation: portrait) and (min-width: 400px);
 37 | @custom-media --sm-phone-landscape (orientation: landscape) and (max-width: 599px);
 38 | @custom-media --md-phone-landscape (orientation: landscape) and (min-width: 600px) and (max-width: 719px);
 39 | @custom-media --lg-phone-landscape (orientation: landscape) and (min-width: 720px);
 40 | 
 41 | /* Tablet Breakpoints */
 42 | @custom-media --sm-tablet           (orientation: portrait) and (max-width: 719px);
 43 | @custom-media --lg-tablet           (orientation: portrait) and (min-width: 720px);
 44 | @custom-media --sm-tablet-landscape (orientation: landscape) and (max-width: 1023px);
 45 | @custom-media --lg-tablet-landscape (orientation: landscape) and (min-width: 1024px);
 46 | 
 47 | /* Query order hack for CSS MQPacker
 48 |    https://github.com/hail2u/node-css-mqpacker#known-issues
 49 | */
 50 | @media (--sm-viewport) {
 51 |   /* */
 52 | }
 53 | 
 54 | @media (--md-viewport) {
 55 |   /* */
 56 | }
 57 | 
 58 | @media (--lg-viewport) {
 59 |   /* */
 60 | }
 61 | 
 62 | @media (--4-col-grid) {
 63 |   /* */
 64 | }
 65 | 
 66 | @media (--8-col-grid) {
 67 |   /* */
 68 | }
 69 | 
 70 | @media (--12-col-grid) {
 71 |   /* */
 72 | }
 73 | 
 74 | @media (--sm-phone) {
 75 |   /* */
 76 | }
 77 | 
 78 | @media (--md-phone) {
 79 |   /* */
 80 | }
 81 | 
 82 | @media (--lg-phone) {
 83 |   /* */
 84 | }
 85 | 
 86 | @media (--sm-phone-landscape) {
 87 |   /* */
 88 | }
 89 | 
 90 | @media (--md-phone-landscape) {
 91 |   /* */
 92 | }
 93 | 
 94 | @media (--lg-phone-landscape) {
 95 |   /* */
 96 | }
 97 | 
 98 | @media (--sm-tablet) {
 99 |   /* */
100 | }
101 | 
102 | @media (--lg-tablet) {
103 |   /* */
104 | }
105 | 
106 | @media (--sm-tablet-landscape) {
107 |   /* */
108 | }
109 | 
110 | @media (--lg-tablet-landscape) {
111 |   /* */
112 | }
113 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/colors.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | */
  9 | 
 10 | /*
 11 | Colors are from file on URL https://github.com/PolymerElements/paper-styles/blob/master/color.html
 12 | */
 13 | 
 14 | :root {
 15 |   /* Material Design color palette for Google products */
 16 |   --google-red-100: #f4c7c3;
 17 |   --google-red-300: #e67c73;
 18 |   --google-red-500: #db4437;
 19 |   --google-red-700: #c53929;
 20 | 
 21 |   --google-blue-100: #c6dafc;
 22 |   --google-blue-300: #7baaf7;
 23 |   --google-blue-500: #4285f4;
 24 |   --google-blue-700: #3367d6;
 25 | 
 26 |   --google-green-100: #b7e1cd;
 27 |   --google-green-300: #57bb8a;
 28 |   --google-green-500: #0f9d58;
 29 |   --google-green-700: #0b8043;
 30 | 
 31 |   --google-yellow-100: #fce8b2;
 32 |   --google-yellow-300: #f7cb4d;
 33 |   --google-yellow-500: #f4b400;
 34 |   --google-yellow-700: #f09300;
 35 | 
 36 |   --google-grey-100: #f5f5f5;
 37 |   --google-grey-300: #e0e0e0;
 38 |   --google-grey-500: #9e9e9e;
 39 |   --google-grey-700: #616161;
 40 | 
 41 |   /* Material Design color palette from online spec document */
 42 |   --paper-red-50: #ffebee;
 43 |   --paper-red-100: #ffcdd2;
 44 |   --paper-red-200: #ef9a9a;
 45 |   --paper-red-300: #e57373;
 46 |   --paper-red-400: #ef5350;
 47 |   --paper-red-500: #f44336;
 48 |   --paper-red-600: #e53935;
 49 |   --paper-red-700: #d32f2f;
 50 |   --paper-red-800: #c62828;
 51 |   --paper-red-900: #b71c1c;
 52 |   --paper-red-a100: #ff8a80;
 53 |   --paper-red-a200: #ff5252;
 54 |   --paper-red-a400: #ff1744;
 55 |   --paper-red-a700: #d50000;
 56 | 
 57 |   --paper-pink-50: #fce4ec;
 58 |   --paper-pink-100: #f8bbd0;
 59 |   --paper-pink-200: #f48fb1;
 60 |   --paper-pink-300: #f06292;
 61 |   --paper-pink-400: #ec407a;
 62 |   --paper-pink-500: #e91e63;
 63 |   --paper-pink-600: #d81b60;
 64 |   --paper-pink-700: #c2185b;
 65 |   --paper-pink-800: #ad1457;
 66 |   --paper-pink-900: #880e4f;
 67 |   --paper-pink-a100: #ff80ab;
 68 |   --paper-pink-a200: #ff4081;
 69 |   --paper-pink-a400: #f50057;
 70 |   --paper-pink-a700: #c51162;
 71 | 
 72 |   --paper-purple-50: #f3e5f5;
 73 |   --paper-purple-100: #e1bee7;
 74 |   --paper-purple-200: #ce93d8;
 75 |   --paper-purple-300: #ba68c8;
 76 |   --paper-purple-400: #ab47bc;
 77 |   --paper-purple-500: #9c27b0;
 78 |   --paper-purple-600: #8e24aa;
 79 |   --paper-purple-700: #7b1fa2;
 80 |   --paper-purple-800: #6a1b9a;
 81 |   --paper-purple-900: #4a148c;
 82 |   --paper-purple-a100: #ea80fc;
 83 |   --paper-purple-a200: #e040fb;
 84 |   --paper-purple-a400: #d500f9;
 85 |   --paper-purple-a700: #a0f;
 86 | 
 87 |   --paper-deep-purple-50: #ede7f6;
 88 |   --paper-deep-purple-100: #d1c4e9;
 89 |   --paper-deep-purple-200: #b39ddb;
 90 |   --paper-deep-purple-300: #9575cd;
 91 |   --paper-deep-purple-400: #7e57c2;
 92 |   --paper-deep-purple-500: #673ab7;
 93 |   --paper-deep-purple-600: #5e35b1;
 94 |   --paper-deep-purple-700: #512da8;
 95 |   --paper-deep-purple-800: #4527a0;
 96 |   --paper-deep-purple-900: #311b92;
 97 |   --paper-deep-purple-a100: #b388ff;
 98 |   --paper-deep-purple-a200: #7c4dff;
 99 |   --paper-deep-purple-a400: #651fff;
100 |   --paper-deep-purple-a700: #6200ea;
101 | 
102 |   --paper-indigo-50: #e8eaf6;
103 |   --paper-indigo-100: #c5cae9;
104 |   --paper-indigo-200: #9fa8da;
105 |   --paper-indigo-300: #7986cb;
106 |   --paper-indigo-400: #5c6bc0;
107 |   --paper-indigo-500: #3f51b5;
108 |   --paper-indigo-600: #3949ab;
109 |   --paper-indigo-700: #303f9f;
110 |   --paper-indigo-800: #283593;
111 |   --paper-indigo-900: #1a237e;
112 |   --paper-indigo-a100: #8c9eff;
113 |   --paper-indigo-a200: #536dfe;
114 |   --paper-indigo-a400: #3d5afe;
115 |   --paper-indigo-a700: #304ffe;
116 | 
117 |   --paper-blue-50: #e3f2fd;
118 |   --paper-blue-100: #bbdefb;
119 |   --paper-blue-200: #90caf9;
120 |   --paper-blue-300: #64b5f6;
121 |   --paper-blue-400: #42a5f5;
122 |   --paper-blue-500: #2196f3;
123 |   --paper-blue-600: #1e88e5;
124 |   --paper-blue-700: #1976d2;
125 |   --paper-blue-800: #1565c0;
126 |   --paper-blue-900: #0d47a1;
127 |   --paper-blue-a100: #82b1ff;
128 |   --paper-blue-a200: #448aff;
129 |   --paper-blue-a400: #2979ff;
130 |   --paper-blue-a700: #2962ff;
131 | 
132 |   --paper-light-blue-50: #e1f5fe;
133 |   --paper-light-blue-100: #b3e5fc;
134 |   --paper-light-blue-200: #81d4fa;
135 |   --paper-light-blue-300: #4fc3f7;
136 |   --paper-light-blue-400: #29b6f6;
137 |   --paper-light-blue-500: #03a9f4;
138 |   --paper-light-blue-600: #039be5;
139 |   --paper-light-blue-700: #0288d1;
140 |   --paper-light-blue-800: #0277bd;
141 |   --paper-light-blue-900: #01579b;
142 |   --paper-light-blue-a100: #80d8ff;
143 |   --paper-light-blue-a200: #40c4ff;
144 |   --paper-light-blue-a400: #00b0ff;
145 |   --paper-light-blue-a700: #0091ea;
146 | 
147 |   --paper-cyan-50: #e0f7fa;
148 |   --paper-cyan-100: #b2ebf2;
149 |   --paper-cyan-200: #80deea;
150 |   --paper-cyan-300: #4dd0e1;
151 |   --paper-cyan-400: #26c6da;
152 |   --paper-cyan-500: #00bcd4;
153 |   --paper-cyan-600: #00acc1;
154 |   --paper-cyan-700: #0097a7;
155 |   --paper-cyan-800: #00838f;
156 |   --paper-cyan-900: #006064;
157 |   --paper-cyan-a100: #84ffff;
158 |   --paper-cyan-a200: #18ffff;
159 |   --paper-cyan-a400: #00e5ff;
160 |   --paper-cyan-a700: #00b8d4;
161 | 
162 |   --paper-teal-50: #e0f2f1;
163 |   --paper-teal-100: #b2dfdb;
164 |   --paper-teal-200: #80cbc4;
165 |   --paper-teal-300: #4db6ac;
166 |   --paper-teal-400: #26a69a;
167 |   --paper-teal-500: #009688;
168 |   --paper-teal-600: #00897b;
169 |   --paper-teal-700: #00796b;
170 |   --paper-teal-800: #00695c;
171 |   --paper-teal-900: #004d40;
172 |   --paper-teal-a100: #a7ffeb;
173 |   --paper-teal-a200: #64ffda;
174 |   --paper-teal-a400: #1de9b6;
175 |   --paper-teal-a700: #00bfa5;
176 | 
177 |   --paper-green-50: #e8f5e9;
178 |   --paper-green-100: #c8e6c9;
179 |   --paper-green-200: #a5d6a7;
180 |   --paper-green-300: #81c784;
181 |   --paper-green-400: #66bb6a;
182 |   --paper-green-500: #4caf50;
183 |   --paper-green-600: #43a047;
184 |   --paper-green-700: #388e3c;
185 |   --paper-green-800: #2e7d32;
186 |   --paper-green-900: #1b5e20;
187 |   --paper-green-a100: #b9f6ca;
188 |   --paper-green-a200: #69f0ae;
189 |   --paper-green-a400: #00e676;
190 |   --paper-green-a700: #00c853;
191 | 
192 |   --paper-light-green-50: #f1f8e9;
193 |   --paper-light-green-100: #dcedc8;
194 |   --paper-light-green-200: #c5e1a5;
195 |   --paper-light-green-300: #aed581;
196 |   --paper-light-green-400: #9ccc65;
197 |   --paper-light-green-500: #8bc34a;
198 |   --paper-light-green-600: #7cb342;
199 |   --paper-light-green-700: #689f38;
200 |   --paper-light-green-800: #558b2f;
201 |   --paper-light-green-900: #33691e;
202 |   --paper-light-green-a100: #ccff90;
203 |   --paper-light-green-a200: #b2ff59;
204 |   --paper-light-green-a400: #76ff03;
205 |   --paper-light-green-a700: #64dd17;
206 | 
207 |   --paper-lime-50: #f9fbe7;
208 |   --paper-lime-100: #f0f4c3;
209 |   --paper-lime-200: #e6ee9c;
210 |   --paper-lime-300: #dce775;
211 |   --paper-lime-400: #d4e157;
212 |   --paper-lime-500: #cddc39;
213 |   --paper-lime-600: #c0ca33;
214 |   --paper-lime-700: #afb42b;
215 |   --paper-lime-800: #9e9d24;
216 |   --paper-lime-900: #827717;
217 |   --paper-lime-a100: #f4ff81;
218 |   --paper-lime-a200: #eeff41;
219 |   --paper-lime-a400: #c6ff00;
220 |   --paper-lime-a700: #aeea00;
221 | 
222 |   --paper-yellow-50: #fffde7;
223 |   --paper-yellow-100: #fff9c4;
224 |   --paper-yellow-200: #fff59d;
225 |   --paper-yellow-300: #fff176;
226 |   --paper-yellow-400: #ffee58;
227 |   --paper-yellow-500: #ffeb3b;
228 |   --paper-yellow-600: #fdd835;
229 |   --paper-yellow-700: #fbc02d;
230 |   --paper-yellow-800: #f9a825;
231 |   --paper-yellow-900: #f57f17;
232 |   --paper-yellow-a100: #ffff8d;
233 |   --paper-yellow-a200: #ff0;
234 |   --paper-yellow-a400: #ffea00;
235 |   --paper-yellow-a700: #ffd600;
236 | 
237 |   --paper-amber-50: #fff8e1;
238 |   --paper-amber-100: #ffecb3;
239 |   --paper-amber-200: #ffe082;
240 |   --paper-amber-300: #ffd54f;
241 |   --paper-amber-400: #ffca28;
242 |   --paper-amber-500: #ffc107;
243 |   --paper-amber-600: #ffb300;
244 |   --paper-amber-700: #ffa000;
245 |   --paper-amber-800: #ff8f00;
246 |   --paper-amber-900: #ff6f00;
247 |   --paper-amber-a100: #ffe57f;
248 |   --paper-amber-a200: #ffd740;
249 |   --paper-amber-a400: #ffc400;
250 |   --paper-amber-a700: #ffab00;
251 | 
252 |   --paper-orange-50: #fff3e0;
253 |   --paper-orange-100: #ffe0b2;
254 |   --paper-orange-200: #ffcc80;
255 |   --paper-orange-300: #ffb74d;
256 |   --paper-orange-400: #ffa726;
257 |   --paper-orange-500: #ff9800;
258 |   --paper-orange-600: #fb8c00;
259 |   --paper-orange-700: #f57c00;
260 |   --paper-orange-800: #ef6c00;
261 |   --paper-orange-900: #e65100;
262 |   --paper-orange-a100: #ffd180;
263 |   --paper-orange-a200: #ffab40;
264 |   --paper-orange-a400: #ff9100;
265 |   --paper-orange-a700: #ff6500;
266 | 
267 |   --paper-deep-orange-50: #fbe9e7;
268 |   --paper-deep-orange-100: #ffccbc;
269 |   --paper-deep-orange-200: #ffab91;
270 |   --paper-deep-orange-300: #ff8a65;
271 |   --paper-deep-orange-400: #ff7043;
272 |   --paper-deep-orange-500: #ff5722;
273 |   --paper-deep-orange-600: #f4511e;
274 |   --paper-deep-orange-700: #e64a19;
275 |   --paper-deep-orange-800: #d84315;
276 |   --paper-deep-orange-900: #bf360c;
277 |   --paper-deep-orange-a100: #ff9e80;
278 |   --paper-deep-orange-a200: #ff6e40;
279 |   --paper-deep-orange-a400: #ff3d00;
280 |   --paper-deep-orange-a700: #dd2c00;
281 | 
282 |   --paper-brown-50: #efebe9;
283 |   --paper-brown-100: #d7ccc8;
284 |   --paper-brown-200: #bcaaa4;
285 |   --paper-brown-300: #a1887f;
286 |   --paper-brown-400: #8d6e63;
287 |   --paper-brown-500: #795548;
288 |   --paper-brown-600: #6d4c41;
289 |   --paper-brown-700: #5d4037;
290 |   --paper-brown-800: #4e342e;
291 |   --paper-brown-900: #3e2723;
292 | 
293 |   --paper-grey-50: #fafafa;
294 |   --paper-grey-100: #f5f5f5;
295 |   --paper-grey-200: #eee;
296 |   --paper-grey-300: #e0e0e0;
297 |   --paper-grey-400: #bdbdbd;
298 |   --paper-grey-500: #9e9e9e;
299 |   --paper-grey-600: #757575;
300 |   --paper-grey-700: #616161;
301 |   --paper-grey-800: #424242;
302 |   --paper-grey-900: #212121;
303 | 
304 |   --paper-blue-grey-50: #eceff1;
305 |   --paper-blue-grey-100: #cfd8dc;
306 |   --paper-blue-grey-200: #b0bec5;
307 |   --paper-blue-grey-300: #90a4ae;
308 |   --paper-blue-grey-400: #78909c;
309 |   --paper-blue-grey-500: #607d8b;
310 |   --paper-blue-grey-600: #546e7a;
311 |   --paper-blue-grey-700: #455a64;
312 |   --paper-blue-grey-800: #37474f;
313 |   --paper-blue-grey-900: #263238;
314 | 
315 |   /* opacity for dark text on a light background */
316 |   --dark-divider-opacity: 0.12;
317 |   --dark-disabled-opacity: 0.38; /* or hint text or icon */
318 |   --dark-secondary-opacity: 0.54;
319 |   --dark-primary-opacity: 0.87;
320 | 
321 |   /* opacity for light text on a dark background */
322 |   --light-divider-opacity: 0.12;
323 |   --light-disabled-opacity: 0.3; /* or hint text or icon */
324 |   --light-secondary-opacity: 0.7;
325 |   --light-primary-opacity: 1;
326 | }
327 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/colors.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | */
  9 | 
 10 | /*
 11 | Colors are from file on URL https://github.com/PolymerElements/paper-styles/blob/master/color.html
 12 | */
 13 | 
 14 | module.exports = {
 15 | 
 16 | /* Material Design color palette for Google products */
 17 | 
 18 |   'google-red-100': '#f4c7c3',
 19 |   'google-red-300': '#e67c73',
 20 |   'google-red-500': '#db4437',
 21 |   'google-red-700': '#c53929',
 22 | 
 23 |   'google-blue-100': '#c6dafc',
 24 |   'google-blue-300': '#7baaf7',
 25 |   'google-blue-500': '#4285f4',
 26 |   'google-blue-700': '#3367d6',
 27 | 
 28 |   'google-green-100': '#b7e1cd',
 29 |   'google-green-300': '#57bb8a',
 30 |   'google-green-500': '#0f9d58',
 31 |   'google-green-700': '#0b8043',
 32 | 
 33 |   'google-yellow-100': '#fce8b2',
 34 |   'google-yellow-300': '#f7cb4d',
 35 |   'google-yellow-500': '#f4b400',
 36 |   'google-yellow-700': '#f09300',
 37 | 
 38 |   'google-grey-100': '#f5f5f5',
 39 |   'google-grey-300': '#e0e0e0',
 40 |   'google-grey-500': '#9e9e9e',
 41 |   'google-grey-700': '#616161',
 42 | 
 43 |   /* Material Design color palette from online spec document */
 44 | 
 45 |   'paper-red-50': '#ffebee',
 46 |   'paper-red-100': '#ffcdd2',
 47 |   'paper-red-200': '#ef9a9a',
 48 |   'paper-red-300': '#e57373',
 49 |   'paper-red-400': '#ef5350',
 50 |   'paper-red-500': '#f44336',
 51 |   'paper-red-600': '#e53935',
 52 |   'paper-red-700': '#d32f2f',
 53 |   'paper-red-800': '#c62828',
 54 |   'paper-red-900': '#b71c1c',
 55 |   'paper-red-a100': '#ff8a80',
 56 |   'paper-red-a200': '#ff5252',
 57 |   'paper-red-a400': '#ff1744',
 58 |   'paper-red-a700': '#d50000',
 59 | 
 60 |   'paper-pink-50': '#fce4ec',
 61 |   'paper-pink-100': '#f8bbd0',
 62 |   'paper-pink-200': '#f48fb1',
 63 |   'paper-pink-300': '#f06292',
 64 |   'paper-pink-400': '#ec407a',
 65 |   'paper-pink-500': '#e91e63',
 66 |   'paper-pink-600': '#d81b60',
 67 |   'paper-pink-700': '#c2185b',
 68 |   'paper-pink-800': '#ad1457',
 69 |   'paper-pink-900': '#880e4f',
 70 |   'paper-pink-a100': '#ff80ab',
 71 |   'paper-pink-a200': '#ff4081',
 72 |   'paper-pink-a400': '#f50057',
 73 |   'paper-pink-a700': '#c51162',
 74 | 
 75 |   'paper-purple-50': '#f3e5f5',
 76 |   'paper-purple-100': '#e1bee7',
 77 |   'paper-purple-200': '#ce93d8',
 78 |   'paper-purple-300': '#ba68c8',
 79 |   'paper-purple-400': '#ab47bc',
 80 |   'paper-purple-500': '#9c27b0',
 81 |   'paper-purple-600': '#8e24aa',
 82 |   'paper-purple-700': '#7b1fa2',
 83 |   'paper-purple-800': '#6a1b9a',
 84 |   'paper-purple-900': '#4a148c',
 85 |   'paper-purple-a100': '#ea80fc',
 86 |   'paper-purple-a200': '#e040fb',
 87 |   'paper-purple-a400': '#d500f9',
 88 |   'paper-purple-a700': '#aa00ff',
 89 | 
 90 |   'paper-deep-purple-50': '#ede7f6',
 91 |   'paper-deep-purple-100': '#d1c4e9',
 92 |   'paper-deep-purple-200': '#b39ddb',
 93 |   'paper-deep-purple-300': '#9575cd',
 94 |   'paper-deep-purple-400': '#7e57c2',
 95 |   'paper-deep-purple-500': '#673ab7',
 96 |   'paper-deep-purple-600': '#5e35b1',
 97 |   'paper-deep-purple-700': '#512da8',
 98 |   'paper-deep-purple-800': '#4527a0',
 99 |   'paper-deep-purple-900': '#311b92',
100 |   'paper-deep-purple-a100': '#b388ff',
101 |   'paper-deep-purple-a200': '#7c4dff',
102 |   'paper-deep-purple-a400': '#651fff',
103 |   'paper-deep-purple-a700': '#6200ea',
104 | 
105 |   'paper-indigo-50': '#e8eaf6',
106 |   'paper-indigo-100': '#c5cae9',
107 |   'paper-indigo-200': '#9fa8da',
108 |   'paper-indigo-300': '#7986cb',
109 |   'paper-indigo-400': '#5c6bc0',
110 |   'paper-indigo-500': '#3f51b5',
111 |   'paper-indigo-600': '#3949ab',
112 |   'paper-indigo-700': '#303f9f',
113 |   'paper-indigo-800': '#283593',
114 |   'paper-indigo-900': '#1a237e',
115 |   'paper-indigo-a100': '#8c9eff',
116 |   'paper-indigo-a200': '#536dfe',
117 |   'paper-indigo-a400': '#3d5afe',
118 |   'paper-indigo-a700': '#304ffe',
119 | 
120 |   'paper-blue-50': '#e3f2fd',
121 |   'paper-blue-100': '#bbdefb',
122 |   'paper-blue-200': '#90caf9',
123 |   'paper-blue-300': '#64b5f6',
124 |   'paper-blue-400': '#42a5f5',
125 |   'paper-blue-500': '#2196f3',
126 |   'paper-blue-600': '#1e88e5',
127 |   'paper-blue-700': '#1976d2',
128 |   'paper-blue-800': '#1565c0',
129 |   'paper-blue-900': '#0d47a1',
130 |   'paper-blue-a100': '#82b1ff',
131 |   'paper-blue-a200': '#448aff',
132 |   'paper-blue-a400': '#2979ff',
133 |   'paper-blue-a700': '#2962ff',
134 | 
135 |   'paper-light-blue-50': '#e1f5fe',
136 |   'paper-light-blue-100': '#b3e5fc',
137 |   'paper-light-blue-200': '#81d4fa',
138 |   'paper-light-blue-300': '#4fc3f7',
139 |   'paper-light-blue-400': '#29b6f6',
140 |   'paper-light-blue-500': '#03a9f4',
141 |   'paper-light-blue-600': '#039be5',
142 |   'paper-light-blue-700': '#0288d1',
143 |   'paper-light-blue-800': '#0277bd',
144 |   'paper-light-blue-900': '#01579b',
145 |   'paper-light-blue-a100': '#80d8ff',
146 |   'paper-light-blue-a200': '#40c4ff',
147 |   'paper-light-blue-a400': '#00b0ff',
148 |   'paper-light-blue-a700': '#0091ea',
149 | 
150 |   'paper-cyan-50': '#e0f7fa',
151 |   'paper-cyan-100': '#b2ebf2',
152 |   'paper-cyan-200': '#80deea',
153 |   'paper-cyan-300': '#4dd0e1',
154 |   'paper-cyan-400': '#26c6da',
155 |   'paper-cyan-500': '#00bcd4',
156 |   'paper-cyan-600': '#00acc1',
157 |   'paper-cyan-700': '#0097a7',
158 |   'paper-cyan-800': '#00838f',
159 |   'paper-cyan-900': '#006064',
160 |   'paper-cyan-a100': '#84ffff',
161 |   'paper-cyan-a200': '#18ffff',
162 |   'paper-cyan-a400': '#00e5ff',
163 |   'paper-cyan-a700': '#00b8d4',
164 | 
165 |   'paper-teal-50': '#e0f2f1',
166 |   'paper-teal-100': '#b2dfdb',
167 |   'paper-teal-200': '#80cbc4',
168 |   'paper-teal-300': '#4db6ac',
169 |   'paper-teal-400': '#26a69a',
170 |   'paper-teal-500': '#009688',
171 |   'paper-teal-600': '#00897b',
172 |   'paper-teal-700': '#00796b',
173 |   'paper-teal-800': '#00695c',
174 |   'paper-teal-900': '#004d40',
175 |   'paper-teal-a100': '#a7ffeb',
176 |   'paper-teal-a200': '#64ffda',
177 |   'paper-teal-a400': '#1de9b6',
178 |   'paper-teal-a700': '#00bfa5',
179 | 
180 |   'paper-green-50': '#e8f5e9',
181 |   'paper-green-100': '#c8e6c9',
182 |   'paper-green-200': '#a5d6a7',
183 |   'paper-green-300': '#81c784',
184 |   'paper-green-400': '#66bb6a',
185 |   'paper-green-500': '#4caf50',
186 |   'paper-green-600': '#43a047',
187 |   'paper-green-700': '#388e3c',
188 |   'paper-green-800': '#2e7d32',
189 |   'paper-green-900': '#1b5e20',
190 |   'paper-green-a100': '#b9f6ca',
191 |   'paper-green-a200': '#69f0ae',
192 |   'paper-green-a400': '#00e676',
193 |   'paper-green-a700': '#00c853',
194 | 
195 |   'paper-light-green-50': '#f1f8e9',
196 |   'paper-light-green-100': '#dcedc8',
197 |   'paper-light-green-200': '#c5e1a5',
198 |   'paper-light-green-300': '#aed581',
199 |   'paper-light-green-400': '#9ccc65',
200 |   'paper-light-green-500': '#8bc34a',
201 |   'paper-light-green-600': '#7cb342',
202 |   'paper-light-green-700': '#689f38',
203 |   'paper-light-green-800': '#558b2f',
204 |   'paper-light-green-900': '#33691e',
205 |   'paper-light-green-a100': '#ccff90',
206 |   'paper-light-green-a200': '#b2ff59',
207 |   'paper-light-green-a400': '#76ff03',
208 |   'paper-light-green-a700': '#64dd17',
209 | 
210 |   'paper-lime-50': '#f9fbe7',
211 |   'paper-lime-100': '#f0f4c3',
212 |   'paper-lime-200': '#e6ee9c',
213 |   'paper-lime-300': '#dce775',
214 |   'paper-lime-400': '#d4e157',
215 |   'paper-lime-500': '#cddc39',
216 |   'paper-lime-600': '#c0ca33',
217 |   'paper-lime-700': '#afb42b',
218 |   'paper-lime-800': '#9e9d24',
219 |   'paper-lime-900': '#827717',
220 |   'paper-lime-a100': '#f4ff81',
221 |   'paper-lime-a200': '#eeff41',
222 |   'paper-lime-a400': '#c6ff00',
223 |   'paper-lime-a700': '#aeea00',
224 | 
225 |   'paper-yellow-50': '#fffde7',
226 |   'paper-yellow-100': '#fff9c4',
227 |   'paper-yellow-200': '#fff59d',
228 |   'paper-yellow-300': '#fff176',
229 |   'paper-yellow-400': '#ffee58',
230 |   'paper-yellow-500': '#ffeb3b',
231 |   'paper-yellow-600': '#fdd835',
232 |   'paper-yellow-700': '#fbc02d',
233 |   'paper-yellow-800': '#f9a825',
234 |   'paper-yellow-900': '#f57f17',
235 |   'paper-yellow-a100': '#ffff8d',
236 |   'paper-yellow-a200': '#ffff00',
237 |   'paper-yellow-a400': '#ffea00',
238 |   'paper-yellow-a700': '#ffd600',
239 | 
240 |   'paper-amber-50': '#fff8e1',
241 |   'paper-amber-100': '#ffecb3',
242 |   'paper-amber-200': '#ffe082',
243 |   'paper-amber-300': '#ffd54f',
244 |   'paper-amber-400': '#ffca28',
245 |   'paper-amber-500': '#ffc107',
246 |   'paper-amber-600': '#ffb300',
247 |   'paper-amber-700': '#ffa000',
248 |   'paper-amber-800': '#ff8f00',
249 |   'paper-amber-900': '#ff6f00',
250 |   'paper-amber-a100': '#ffe57f',
251 |   'paper-amber-a200': '#ffd740',
252 |   'paper-amber-a400': '#ffc400',
253 |   'paper-amber-a700': '#ffab00',
254 | 
255 |   'paper-orange-50': '#fff3e0',
256 |   'paper-orange-100': '#ffe0b2',
257 |   'paper-orange-200': '#ffcc80',
258 |   'paper-orange-300': '#ffb74d',
259 |   'paper-orange-400': '#ffa726',
260 |   'paper-orange-500': '#ff9800',
261 |   'paper-orange-600': '#fb8c00',
262 |   'paper-orange-700': '#f57c00',
263 |   'paper-orange-800': '#ef6c00',
264 |   'paper-orange-900': '#e65100',
265 |   'paper-orange-a100': '#ffd180',
266 |   'paper-orange-a200': '#ffab40',
267 |   'paper-orange-a400': '#ff9100',
268 |   'paper-orange-a700': '#ff6500',
269 | 
270 |   'paper-deep-orange-50': '#fbe9e7',
271 |   'paper-deep-orange-100': '#ffccbc',
272 |   'paper-deep-orange-200': '#ffab91',
273 |   'paper-deep-orange-300': '#ff8a65',
274 |   'paper-deep-orange-400': '#ff7043',
275 |   'paper-deep-orange-500': '#ff5722',
276 |   'paper-deep-orange-600': '#f4511e',
277 |   'paper-deep-orange-700': '#e64a19',
278 |   'paper-deep-orange-800': '#d84315',
279 |   'paper-deep-orange-900': '#bf360c',
280 |   'paper-deep-orange-a100': '#ff9e80',
281 |   'paper-deep-orange-a200': '#ff6e40',
282 |   'paper-deep-orange-a400': '#ff3d00',
283 |   'paper-deep-orange-a700': '#dd2c00',
284 | 
285 |   'paper-brown-50': '#efebe9',
286 |   'paper-brown-100': '#d7ccc8',
287 |   'paper-brown-200': '#bcaaa4',
288 |   'paper-brown-300': '#a1887f',
289 |   'paper-brown-400': '#8d6e63',
290 |   'paper-brown-500': '#795548',
291 |   'paper-brown-600': '#6d4c41',
292 |   'paper-brown-700': '#5d4037',
293 |   'paper-brown-800': '#4e342e',
294 |   'paper-brown-900': '#3e2723',
295 | 
296 |   'paper-grey-50': '#fafafa',
297 |   'paper-grey-100': '#f5f5f5',
298 |   'paper-grey-200': '#eeeeee',
299 |   'paper-grey-300': '#e0e0e0',
300 |   'paper-grey-400': '#bdbdbd',
301 |   'paper-grey-500': '#9e9e9e',
302 |   'paper-grey-600': '#757575',
303 |   'paper-grey-700': '#616161',
304 |   'paper-grey-800': '#424242',
305 |   'paper-grey-900': '#212121',
306 | 
307 |   'paper-blue-grey-50': '#eceff1',
308 |   'paper-blue-grey-100': '#cfd8dc',
309 |   'paper-blue-grey-200': '#b0bec5',
310 |   'paper-blue-grey-300': '#90a4ae',
311 |   'paper-blue-grey-400': '#78909c',
312 |   'paper-blue-grey-500': '#607d8b',
313 |   'paper-blue-grey-600': '#546e7a',
314 |   'paper-blue-grey-700': '#455a64',
315 |   'paper-blue-grey-800': '#37474f',
316 |   'paper-blue-grey-900': '#263238',
317 | 
318 |   /* opacity for dark text on a light background */
319 |   'dark-divider-opacity': '.12',
320 |   'dark-disabled-opacity': '.38', /* or hint text or icon */
321 |   'dark-secondary-opacity': '.54',
322 |   'dark-primary-opacity': '.87',
323 | 
324 |   /* opacity for light text on a dark background */
325 |   'light-divider-opacity': '.12',
326 |   'light-disabled-opacity': '.3', /* or hint text or icon */
327 |   'light-secondary-opacity': '.7',
328 |   'light-primary-opacity': '1'
329 | };
330 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/drawer.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define Drawer */
11 | 
12 | .Drawer {
13 |   @nest &-content {
14 |     @apply(--layout-vertical);
15 |     @apply(--paper-font-body2);
16 | 
17 |     background-color: var(--primary-background-color);
18 |     color: var(--primary-text-color);
19 |     height: 100%;
20 | 
21 |     @media (--md-viewport) {
22 |       background-color: var(--secondary-background-color);
23 |       border-right: 1px solid var(--divider-color);
24 |       color: var(--secondary-text-color);
25 |     }
26 |   }
27 | 
28 |   @nest &-header {
29 |     background-color: var(--primary-background-color);
30 |     border-bottom: 1px solid var(--divider-color);
31 |     color: var(--primary-text-color);
32 | 
33 |     @media (--md-viewport) {
34 |       background-color: var(--dark-primary-color);
35 |       border: 0 !important;
36 |       box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
37 |       color: var(--text-dark-primary-color);
38 |     }
39 |   }
40 | 
41 |   @nest &-link {
42 |     color: currentColor;
43 |     text-decoration: none;
44 |   }
45 | 
46 |   @nest &-title {
47 |     @apply(--paper-font-headline);
48 |   }
49 | 
50 |   @nest &-widget {
51 |     padding: 8px 0;
52 | 
53 |     @nest &--bottom {
54 |       border-top: 1px solid var(--divider-color);
55 |     }
56 | 
57 |     @nest &--footer {
58 |       @apply(--paper-font-caption);
59 | 
60 |       border-top: 1px solid var(--divider-color);
61 |       padding-left: 24px;
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | */
  9 | 
 10 | /** @define Main */
 11 | 
 12 | .Main {
 13 |   background-color: var(--secondary-background-color);
 14 | 
 15 |   @nest &-content {
 16 |     @apply(--paper-font-body1);
 17 |     color: var(--primary-text-color);
 18 | 
 19 |     @media (--md-viewport) {
 20 |       @apply(--paper-font-body2);
 21 |       padding: 48px 64px;
 22 |     }
 23 | 
 24 |     @nest & a {
 25 |       color: var(--accent-color);
 26 |       font-weight: 500;
 27 |       text-decoration: none;
 28 |     }
 29 |   }
 30 | 
 31 |   @nest &-header {
 32 |     box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
 33 |     color: var(--text-primary-color);
 34 | 
 35 |     /* postcss-bem-linter: ignore */
 36 |     --paper-toolbar-content: {
 37 |       padding: 0;
 38 |     };
 39 |   }
 40 | 
 41 |   @nest &-headerButton {
 42 |     /* postcss-bem-linter: ignore */
 43 |     --paper-icon-button-ink-color: var(--text-dark-primary-color);
 44 |   }
 45 | 
 46 |   @nest &-headerTopBar {
 47 |     @apply(--layout-horizontal);
 48 |     @apply(--layout-center);
 49 | 
 50 |     background-color: var(--dark-primary-color);
 51 |     bottom: 0;
 52 |     color: var(--text-dark-primary-color);
 53 |     left: 0;
 54 |     padding: 0 16px;
 55 |     position: absolute;
 56 |     right: 0;
 57 |     top: 0;
 58 |   }
 59 | 
 60 |   @nest &-headerMiddleBar {
 61 |     @apply(--layout-horizontal);
 62 |     @apply(--layout-end);
 63 | 
 64 |     height: 100%;
 65 |     margin-left: 54px;
 66 | 
 67 |     @media (--md-viewport) {
 68 |       margin-left: 64px;
 69 |     }
 70 |   }
 71 | 
 72 |   @nest &-headerBottomBar {
 73 |     @apply(--layout-horizontal);
 74 |     @apply(--layout-center);
 75 | 
 76 |     margin-left: 54px;
 77 | 
 78 |     /* Required for main area's paper-scroll-header-panel custom condensing transformation */
 79 |     transform-origin: left center;
 80 | 
 81 |     @media (--md-viewport) {
 82 |       margin-left: 64px;
 83 |     }
 84 |   }
 85 | 
 86 |   @nest &-headerTitle {
 87 |     @apply(--paper-font-headline);
 88 |     margin: 0;
 89 | 
 90 |     /* Required for main area's paper-scroll-header-panel custom condensing transformation */
 91 |     transform-origin: left center;
 92 | 
 93 |     @media (--md-viewport) {
 94 |       @apply(--paper-font-display1);
 95 |     }
 96 |   }
 97 | 
 98 |   @nest &-headerSubTitle {
 99 |     @apply(--paper-font-subhead);
100 | 
101 |     /* Required for main area's paper-scroll-header-panel custom condensing transformation */
102 |     transform-origin: left center;
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/navigation.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define Navigation */
11 | 
12 | .Navigation {
13 |   padding-bottom: 0;
14 |   padding-top: 0;
15 | 
16 |   @nest &-icon {
17 |     margin-right: 24px;
18 |     pointer-events: none;
19 |   }
20 | 
21 |   @nest &-link {
22 |     @apply(--layout-horizontal);
23 |     @apply(--layout-center);
24 | 
25 |     color: currentColor;
26 |     min-height: 48px;
27 |     padding-left: 24px;
28 |     padding-right: 24px;
29 |     text-decoration: none;
30 |   }
31 | 
32 |   @nest &-text {
33 |     pointer-events: none;
34 |   }
35 | }
36 | 
37 | /* https://github.com/jonathantneal/postcss-nesting/issues/16 */
38 | .Navigation--menu {
39 |   --paper-menu-color: currentColor;
40 | 
41 |   /* stylelint-disable indentation */
42 | 
43 |   /* postcss-bem-linter: ignore */
44 |   --paper-menu-selected-item: {
45 |     color: var(--accent-color);
46 |   };
47 | 
48 |   /* postcss-bem-linter: ignore */
49 |   --paper-menu-focused-item-after: {
50 |     background-color: var(--disabled-text-color);
51 |   };
52 |   /* stylelint-enable */
53 | 
54 |   @media (--md-viewport) {
55 |     background-color: var(--secondary-background-color);
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/page.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define Page */
11 | 
12 | .Page {
13 |   @nest &-formInput {
14 |     --paper-input-container-focus-color: var(--accent-color);
15 | 
16 |     width: 250px;
17 |   }
18 | 
19 |   @nest &:focus {
20 |     outline: none;
21 |   }
22 | 
23 |   @nest &-title {
24 |     @apply(--paper-font-display1);
25 | 
26 |     margin: 32px 0;
27 | 
28 |     @media (--sm-viewport) {
29 |       font-size: 24px;
30 |       margin: 16px 0;
31 |     }
32 |   }
33 | 
34 |   @nest &-subTitle {
35 |     @apply(--paper-font-subhead);
36 |   }
37 | 
38 |   @nest &-paper {
39 |     background-color: var(--primary-background-color);
40 |     border-radius: 2px;
41 |     height: 100%;
42 |     margin-bottom: 16px;
43 |     padding: 16px;
44 | 
45 |     @media (--md-viewport) {
46 |       margin-bottom: 32px;
47 |       padding: 16px 32px;
48 |     }
49 | 
50 |     @nest &--settings {
51 |       @apply(--layout-vertical);
52 |       @apply(--layout-center);
53 |     }
54 |   }
55 | 
56 |   @nest &-widget {
57 |     width: 100%;
58 | 
59 |     @media (--md-viewport) {
60 |       width: 512px;
61 |     }
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/skeleton.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define Skeleton */
11 | 
12 | .Skeleton {
13 |   @nest & * {
14 |     box-sizing: border-box;
15 |   }
16 | 
17 |   @nest &-drawer {
18 |     background-color: var(--secondary-background-color);
19 |     bottom: 0;
20 |     display: none;
21 |     left: 0;
22 |     position: fixed;
23 |     right: auto;
24 |     top: 0;
25 |     width: 0;
26 | 
27 |     @media (--md-viewport) {
28 |       display: block;
29 |       width: 256px;
30 |     }
31 |   }
32 | 
33 |   @nest &-drawerContent {
34 |     border-right: 1px solid var(--divider-color);
35 |     height: 100%;
36 |   }
37 | 
38 |   @nest &-drawerHeader {
39 |     background-color: var(--dark-primary-color);
40 |     box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
41 |     color: var(--text-dark-primary-color);
42 |     display: block;
43 |     height: 64px;
44 |   }
45 | 
46 |   @nest &-drawerHeaderContent {
47 |     align-items: center;
48 |     display: flex;
49 |     flex-direction: row;
50 |     height: 64px;
51 |     margin: 0 16px;
52 |   }
53 | 
54 |   @nest &-drawerTitle {
55 |     /* Nested mixins issue https://github.com/pascalduez/postcss-apply/issues/3
56 |        @apply rule with brackets issue https://github.com/pascalduez/postcss-apply/issues/4
57 |     */
58 |     @apply --paper-font-common-base;
59 |     @apply --paper-font-headline;
60 |   }
61 | 
62 |   @nest &-main {
63 |     background-color: var(--secondary-background-color);
64 |     bottom: 0;
65 |     left: 0;
66 |     overflow: hidden;
67 |     position: fixed;
68 |     right: 0;
69 |     top: 0;
70 | 
71 |     @media (--md-viewport) {
72 |       left: 256px;
73 |     }
74 |   }
75 | 
76 |   @nest &-mainHeader {
77 |     background-color: var(--primary-color);
78 |     box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
79 |     height: calc(56px * 3);
80 |     left: 0;
81 |     position: relative;
82 |     right: 0;
83 |     top: 0;
84 | 
85 |     @media (--md-viewport) {
86 |       height: calc(64px * 3);
87 |     }
88 |   }
89 | 
90 |   @nest &-mainHeaderTopBar {
91 |     background-color: var(--dark-primary-color);
92 |     height: 56px;
93 | 
94 |     @media (--md-viewport) {
95 |       height: 64px;
96 |     }
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/swatch-picker.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define SwatchPicker */
11 | 
12 | .SwatchPicker {
13 |   @apply(--layout-horizontal);
14 |   @apply(--layout-center);
15 | 
16 |   min-height: 48px;
17 | 
18 |   @nest &-button {
19 |     --paper-swatch-picker-color-size: 48px;
20 |     --paper-icon-button-ink-color: var(--accent-color);
21 | 
22 |     color: var(--accent-color);
23 |   }
24 | 
25 |   @nest &-icon {
26 |     margin-right: 24px;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/toast.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define Toast */
11 | 
12 | /* https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs */
13 | 
14 | .Toast {
15 |   @apply(--paper-font-body1);
16 | 
17 |   @nest &-button {
18 |     @apply(--paper-font-button);
19 | 
20 |     color: var(--accent-color);
21 |     margin-left: 24px;
22 | 
23 |     @media(--md-viewport) {
24 |       margin-left: 48px;
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/components/toggle.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /** @define Toggle */
11 | 
12 | /* https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch */
13 | 
14 | .Toggle {
15 |   @apply(--layout-horizontal);
16 |   @apply(--layout-center);
17 | 
18 |   min-height: 48px;
19 | 
20 |   @nest &-button {
21 |     --paper-toggle-button-unchecked-bar-color: var(--toggle-unchecked-bar-color);
22 |     --paper-toggle-button-unchecked-button-color: var(--toggle-unchecked-button-color);
23 |     --paper-toggle-button-unchecked-ink-color: var(--toggle-unchecked-ink-color);
24 |     --paper-toggle-button-checked-bar-color: var(--toggle-checked-bar-color);
25 |     --paper-toggle-button-checked-button-color: var(--toggle-checked-button-color);
26 |     --paper-toggle-button-checked-ink-color: var(--toggle-checked-ink-color);
27 |   }
28 | 
29 |   @nest &-icon {
30 |     margin-right: 24px;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/fonts.list:
--------------------------------------------------------------------------------
1 | Roboto:500&subset=latin
2 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/icons.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 2 | <link rel="import" href="../../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 3 | 
 4 | <iron-iconset-svg name="icons" size="24">
 5 | <svg><defs>
 6 |   
 7 |   <!-- Material Design Icons from sites:
 8 |        https://poly-icon.appspot.com
 9 |        https://github.com/PolymerElements/iron-icons
10 |        https://design.google.com/icons/
11 |        https://materialdesignicons.com -->
12 | 
13 |   <g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/></g>
14 |   <g id="bell-outline"><path d="M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z"/></g>
15 |   <g id="color-lens"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></g>
16 |   <g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></g>
17 |   <g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></g>
18 |   <g id="mail"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></g>
19 |   <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g>
20 |   <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></g>
21 |   <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></g>
22 |   <g id="start-polymer"><path d="M4 5v4l12.63 7.895-4.63 2.605-8-4.5v4l8 4.5 8-4.5v-4l-12.63-7.895 4.63-2.605 8 4.5v-4l-8-4.5z"/></g>
23 |   <g id="supervisor-account"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></g>
24 |   <g id="theme-light-dark"><path d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"/></g>
25 | 
26 | </defs></svg>
27 | </iron-iconset-svg>
28 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/mixins.css:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6 | Code distributed by Google as part of the polymer project is also
7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8 | */
9 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/theme.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | @import 'variables';
11 | @import 'breakpoints';
12 | @import 'mixins';
13 | 
14 | /* Components */
15 | @import 'components/drawer';
16 | @import 'components/main';
17 | @import 'components/navigation';
18 | @import 'components/swatch-picker';
19 | @import 'components/toast';
20 | @import 'components/toggle';
21 | 
22 | /* Utilities */
23 | @import 'utilities/display';
24 | @import 'utilities/layout';
25 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/theme.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer.html">
12 | <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
13 | <link rel="import" href="../../bower_components/paper-styles/color.html">
14 | <link rel="import" href="../../bower_components/paper-styles/typography.html">
15 | <link rel="import" href="icons.html">
16 | 
17 | <link rel="stylesheet" href="fonts/fonts.css">
18 | 
19 | <!-- Shared styles between elements -->
20 | <dom-module id="shared-styles">
21 | <template><style>
22 | 
23 |   @import 'breakpoints';
24 |   @import 'components/page';
25 | 
26 | </style></template>
27 | </dom-module>
28 | 
29 | <style is="custom-style">
30 | 
31 |   body {
32 |     @apply(--layout-fullbleed);
33 |     @apply(--layout-vertical);
34 |   }
35 | 
36 | </style>
37 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/typography.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | */
  9 | 
 10 | /*
 11 | Typography mixins are from file on URL https://github.com/PolymerElements/paper-styles/blob/master/typography.html
 12 | */
 13 | 
 14 | :root {
 15 |   /* Shared Styles */
 16 |   --paper-font-common-base: {
 17 |     font-family: 'Roboto', 'Noto', sans-serif;
 18 |     -webkit-font-smoothing: antialiased;
 19 |   };
 20 | 
 21 |   --paper-font-common-code: {
 22 |     font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
 23 |     -webkit-font-smoothing: antialiased;
 24 |   };
 25 | 
 26 |   --paper-font-common-expensive-kerning: {
 27 |     text-rendering: optimizeLegibility;
 28 |   };
 29 | 
 30 |   --paper-font-common-nowrap: {
 31 |     white-space: nowrap;
 32 |     overflow: hidden;
 33 |     text-overflow: ellipsis;
 34 |   };
 35 | 
 36 |   /* Material Font Styles */
 37 | 
 38 |   --paper-font-display4: {
 39 |     @apply(--paper-font-common-base);
 40 |     @apply(--paper-font-common-nowrap);
 41 | 
 42 |     font-size: 112px;
 43 |     font-weight: 300;
 44 |     letter-spacing: -0.044em;
 45 |     line-height: 120px;
 46 |   };
 47 | 
 48 |   --paper-font-display3: {
 49 |     @apply(--paper-font-common-base);
 50 |     @apply(--paper-font-common-nowrap);
 51 | 
 52 |     font-size: 56px;
 53 |     font-weight: 400;
 54 |     letter-spacing: -0.026em;
 55 |     line-height: 60px;
 56 |   };
 57 | 
 58 |   --paper-font-display2: {
 59 |     @apply(--paper-font-common-base);
 60 | 
 61 |     font-size: 45px;
 62 |     font-weight: 400;
 63 |     letter-spacing: -0.018em;
 64 |     line-height: 48px;
 65 |   };
 66 | 
 67 |   --paper-font-display1: {
 68 |     @apply(--paper-font-common-base);
 69 | 
 70 |     font-size: 34px;
 71 |     font-weight: 400;
 72 |     letter-spacing: -0.01em;
 73 |     line-height: 40px;
 74 |   };
 75 | 
 76 |   --paper-font-headline: {
 77 |     @apply(--paper-font-common-base);
 78 | 
 79 |     font-size: 24px;
 80 |     font-weight: 400;
 81 |     letter-spacing: -0.012em;
 82 |     line-height: 32px;
 83 |   };
 84 | 
 85 |   --paper-font-title: {
 86 |     @apply(--paper-font-common-base);
 87 |     @apply(--paper-font-common-nowrap);
 88 | 
 89 |     font-size: 20px;
 90 |     font-weight: 500;
 91 |     line-height: 28px;
 92 |   };
 93 | 
 94 |   --paper-font-subhead: {
 95 |     @apply(--paper-font-common-base);
 96 | 
 97 |     font-size: 16px;
 98 |     font-weight: 400;
 99 |     line-height: 24px;
100 |   };
101 | 
102 |   --paper-font-body2: {
103 |     @apply(--paper-font-common-base);
104 | 
105 |     font-size: 14px;
106 |     font-weight: 500;
107 |     line-height: 24px;
108 |   };
109 | 
110 |   --paper-font-body1: {
111 |     @apply(--paper-font-common-base);
112 | 
113 |     font-size: 14px;
114 |     font-weight: 400;
115 |     line-height: 20px;
116 |   };
117 | 
118 |   --paper-font-caption: {
119 |     @apply(--paper-font-common-base);
120 |     @apply(--paper-font-common-nowrap);
121 | 
122 |     font-size: 12px;
123 |     font-weight: 400;
124 |     letter-spacing: 0.011em;
125 |     line-height: 20px;
126 |   };
127 | 
128 |   --paper-font-menu: {
129 |     @apply(--paper-font-common-base);
130 |     @apply(--paper-font-common-nowrap);
131 | 
132 |     font-size: 13px;
133 |     font-weight: 500;
134 |     line-height: 24px;
135 |   };
136 | 
137 |   --paper-font-button: {
138 |     @apply(--paper-font-common-base);
139 |     @apply(--paper-font-common-nowrap);
140 | 
141 |     font-size: 14px;
142 |     font-weight: 500;
143 |     letter-spacing: 0.018em;
144 |     line-height: 24px;
145 |     text-transform: uppercase;
146 |   };
147 | 
148 |   --paper-font-code2: {
149 |     @apply(--paper-font-common-code);
150 | 
151 |     font-size: 14px;
152 |     font-weight: 700;
153 |     line-height: 20px;
154 |   };
155 | 
156 |   --paper-font-code1: {
157 |     @apply(--paper-font-common-code);
158 | 
159 |     font-size: 14px;
160 |     font-weight: 500;
161 |     line-height: 20px;
162 |   };
163 | }
164 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/utilities/display.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /*
11 |  This class is used when we manage the focus start point (like when a new page
12 |  is loaded). We typically move the focus start point to the first header in the
13 |  page and don't want a focus ring to display. Instead the next time the user
14 |  presses tab the focus ring will appear on the nearest, focusable element.
15 | */
16 | .u-focusTarget {
17 |   outline: none;
18 | }


--------------------------------------------------------------------------------
/app/themes/default-theme/utilities/layout.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | .u-spacer {
11 |   @apply(--layout-flex);
12 | }
13 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/variables.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | /*
11 | Polymer includes a shim for CSS Custom Properties that we can use for application theming.
12 | Below, you'll find the default palette for the Polymer Starter Kit Plus layout. Feel free to play
13 | with changing the colors used or generate your own palette of colours at MaterialPalette.com.
14 | 
15 | See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
16 | for further information on custom CSS properties.
17 | */
18 | 
19 | /* Material Design Style
20 |    http://www.google.com/design/spec/style/color.html */
21 | 
22 | :root {
23 |   /* Material Design Themes
24 |      https://www.google.com/design/spec/style/color.html#color-themes */
25 | 
26 |   /* Light theme */
27 |   --light-theme-primary-background-color: var(--paper-grey-50);     /* Content background */
28 |   --light-theme-secondary-background-color: var(--paper-grey-100);  /* Main / Drawer background */
29 |   --light-theme-tertiary-background-color: #fff;                    /* Cards / Dialogs background */
30 |   --light-theme-primary-text-color: rgba(0, 0, 0, 0.87);
31 |   --light-theme-secondary-text-color: rgba(0, 0, 0, 0.54);          /* Secondary text / Icons */
32 |   --light-theme-disabled-text-color: rgba(0, 0, 0, 0.38);           /* Disabled / Hint text */
33 |   --light-theme-divider-color: rgba(0, 0, 0, 0.12);
34 | 
35 |   /* Dark theme */
36 |   --dark-theme-primary-background-color: #303030;                   /* Content background */
37 |   --dark-theme-secondary-background-color: var(--paper-grey-900);   /* Main / Drawer background */
38 |   --dark-theme-tertiary-background-color: var(--paper-grey-800);    /* Cards / Dialogs background */
39 |   --dark-theme-primary-text-color: rgba(255, 255, 255, 0.9);
40 |   --dark-theme-secondary-text-color: rgba(255, 255, 255, 0.7);      /* Secondary text / Icons */
41 |   --dark-theme-disabled-text-color: rgba(255, 255, 255, 0.3);       /* Disabled / Hint text */
42 |   --dark-theme-divider-color: rgba(255, 255, 255, 0.12);
43 | 
44 |   /* Colors */
45 |   --primary-background-color: var(--$(themeMode)-theme-primary-background-color);
46 |   --secondary-background-color: var(--$(themeMode)-theme-secondary-background-color);
47 |   --tertiary-background-color: var(--$(themeMode)-theme-tertiary-background-color);
48 |   --primary-text-color: var(--$(themeMode)-theme-primary-text-color);
49 |   --secondary-text-color: var(--$(themeMode)-theme-secondary-text-color);
50 |   --disabled-text-color: var(--$(themeMode)-theme-disabled-text-color);
51 |   --divider-color: var(--$(themeMode)-theme-divider-color);
52 |   --error-color: var(--paper-deep-orange-a700);                     /* User input errors */
53 | 
54 |   /* Primary colors */
55 |   --primary-color: var(--paper-$(primaryColorName)-500);            /* Header bar */
56 |   --light-primary-color: var(--paper-$(primaryColorName)-100);
57 |   --dark-primary-color: var(--paper-$(primaryColorName)-700);
58 |   --text-primary-color: #fff;                                       /* Text / Icons */
59 |   --text-light-primary-color: var(--paper-grey-900);
60 |   --text-dark-primary-color: #fff;
61 | 
62 |   /* Accent colors */
63 |   --accent-color: var(--paper-$(accentColorName)-a200);             /* Focus / Links / Switches */
64 |   --light-accent-color: var(--paper-$(accentColorName)-a100);
65 |   --dark-accent-color: var(--paper-$(accentColorName)-a400);
66 |   --darker-accent-color: var(--paper-$(accentColorName)-a700);
67 |   --text-accent-color: #fff;                                        /* Text / Icons */
68 |   --text-light-accent-color: var(--paper-grey-900);
69 |   --text-dark-accent-color: #fff;
70 | 
71 |   /* Toggle button colors
72 |      https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch */
73 |   --light-theme-toggle-unchecked-bar-color: #000;
74 |   --light-theme-toggle-unchecked-button-color: var(--paper-grey-50);
75 |   --light-theme-toggle-unchecked-ink-color: var(--paper-grey-700);
76 |   --light-theme-toggle-checked-bar-color: var(--accent-color);
77 |   --light-theme-toggle-checked-button-color: var(--accent-color);
78 |   --light-theme-toggle-checked-ink-color: var(--dark-accent-color);
79 |   
80 |   --dark-theme-toggle-unchecked-bar-color: var(--paper-grey-400);
81 |   --dark-theme-toggle-unchecked-button-color: var(--paper-grey-400);
82 |   --dark-theme-toggle-unchecked-ink-color: var(--paper-grey-50);
83 |   --dark-theme-toggle-checked-bar-color: var(--light-accent-color);
84 |   --dark-theme-toggle-checked-button-color: var(--light-accent-color);
85 |   --dark-theme-toggle-checked-ink-color: var(--light-accent-color);
86 |   
87 |   --toggle-unchecked-bar-color: var(--$(themeMode)-theme-toggle-unchecked-bar-color);
88 |   --toggle-unchecked-button-color: var(--$(themeMode)-theme-toggle-unchecked-button-color);
89 |   --toggle-unchecked-ink-color: var(--$(themeMode)-theme-toggle-unchecked-ink-color);
90 |   --toggle-checked-bar-color: var(--$(themeMode)-theme-toggle-checked-bar-color);
91 |   --toggle-checked-button-color: var(--$(themeMode)-theme-toggle-checked-button-color);
92 |   --toggle-checked-ink-color: var(--$(themeMode)-theme-toggle-checked-ink-color);
93 | 
94 |   /* Deprecated values because of their confusing names.
95 |      https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html */
96 |   --default-primary-color: var(--primary-color);
97 | }
98 | 


--------------------------------------------------------------------------------
/app/themes/default-theme/variables.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | var primaryColorName = 'indigo',
11 |     accentColorName  = 'pink',
12 |     themeMode        = 'light', // or dark
13 | 
14 |     colors           = require('./colors'),
15 |     primaryColor     = colors['paper-' + primaryColorName + '-500'],
16 |     darkPrimaryColor = colors['paper-' + primaryColorName + '-700'];
17 | 
18 | module.exports = {
19 |   global: {
20 |     primaryColorName: primaryColorName,
21 |     accentColorName: accentColorName,
22 |     themeMode: themeMode
23 |   },
24 | 
25 |   // Web Application Manifest - manifest.json
26 |   manifest: {
27 |     'theme_color': darkPrimaryColor,
28 |     'background_color': primaryColor
29 |   },
30 | 
31 |   // HTML Metadata in head of index.html
32 |   metadata: {
33 |     // Chrome for Android theme color
34 |     chromeThemeColor: darkPrimaryColor,
35 |     // Tile color for Win8
36 |     msapplicationTileColor: primaryColor
37 |   }
38 | };
39 | 


--------------------------------------------------------------------------------
/app/views/head.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <head>
12 |   <base href="{$ config.baseUrl $}">
13 |   <meta charset="{$ charset $}">
14 |   <meta name="description" content="{$ description $}">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1">
16 |   <meta name="generator" content="Polymer Starter Kit Plus">
17 |   <title>{$ title $}</title>
18 |   <!-- Place favicon.ico in the `app/` directory -->
19 |   <link rel="shortcut icon" href="favicon.ico">
20 | 
21 |   <!-- Canonical link for single page site with more links to same content -->
22 |   <link rel="canonical" href="{$ config.baseCanonicalUrl $}">
23 | 
24 |   <!-- Chrome for Android theme color -->
25 |   <meta name="theme-color" content="{$ theme.metadata.chromeThemeColor $}">
26 | 
27 |   <!-- Web Application Manifest for Chrome M39
28 |        https://developer.chrome.com/multidevice/android/installtohomescreen -->
29 |   <link rel="manifest" href="manifest.json">
30 | 
31 |   <!-- Tile color for Win8 -->
32 |   <meta name="msapplication-TileColor" content="{$ theme.metadata.msapplicationTileColor $}">
33 | 
34 |   <!-- Add to homescreen for Chrome on Android -->
35 |   <meta name="mobile-web-app-capable" content="yes">
36 |   <meta name="application-name" content="{$ applicationName $}">
37 |   <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
38 | 
39 |   <!-- Add to homescreen for Safari on iOS -->
40 |   <meta name="apple-mobile-web-app-capable" content="yes">
41 |   <meta name="apple-mobile-web-app-status-bar-style" content="black">
42 |   <meta name="apple-mobile-web-app-title" content="{$ appleMobileWebAppTitle $}">
43 |   <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
44 | 
45 |   <!-- Tile icon for Win8 (144x144) -->
46 |   <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
47 | 
48 |   <!-- Because this project uses vulcanize this should be your only html import
49 |        in this file. All other imports should go in base-bundle.html -->
50 |   <link rel="import" id="elementsBaseBundle" href="elements/base-bundle.html" async>
51 | 
52 |   <!-- Skeleton styles -->
53 |   <style>
54 |     @import "head.css";
55 |   </style>
56 | </head>
57 | 


--------------------------------------------------------------------------------
/app/views/skeleton.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <!-- Light weight skeleton is outside of Polymer/imports and styled by
12 |      the main page. 1st paint is fast, even on polyfilled browsers. Alternatively,
13 |      one could create an "app shell" and style the page's un-upgraded elements
14 |      similar to their final upgraded version. -->
15 | <div id="skeleton" class="Skeleton">
16 |   <!-- drawer panel -->
17 |   <div class="Skeleton-drawer">
18 |     <!-- toolbar -->
19 |     <div class="Skeleton-drawerHeader">
20 |       <div class="Skeleton-drawerHeaderContent">
21 |         <div class="Skeleton-drawerTitle">{$ title $}</div>
22 |       </div>
23 |     </div>
24 | 
25 |     <div class="Skeleton-drawerContent"></div>
26 |   </div>
27 |   <!-- main panel -->
28 |   <div class="Skeleton-main">
29 |     <!-- toolbar -->
30 |     <div class="Skeleton-mainHeader">
31 |       <div class="Skeleton-mainHeaderTopBar"></div>
32 |     </div>
33 |   </div>
34 | </div>
35 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "polymer-starter-kit-plus",
 3 |   "private": true,
 4 |   "dependencies": {
 5 |     "font-roboto": "StartPolymer/font-empty#1.1.0",
 6 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#1.2.3",
 7 |     "iron-localstorage": "PolymerElements/iron-localstorage#1.0.5",
 8 |     "iron-pages": "PolymerElements/iron-pages#1.0.7",
 9 |     "iron-selector": "PolymerElements/iron-selector#1.2.2",
10 |     "page": "visionmedia/page.js#1.6.4",
11 |     "paper-drawer-panel": "PolymerElements/paper-drawer-panel#1.0.6",
12 |     "paper-icon-button": "PolymerElements/paper-icon-button#1.0.6",
13 |     "paper-input": "PolymerElements/paper-input#1.1.6",
14 |     "paper-item": "PolymerElements/paper-item#1.1.3",
15 |     "paper-material": "PolymerElements/paper-material#1.0.6",
16 |     "paper-menu": "PolymerElements/paper-menu#1.2.2",
17 |     "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#1.0.15",
18 |     "paper-styles": "PolymerElements/paper-styles#1.1.3",
19 |     "paper-swatch-picker": "PolymerElements/paper-swatch-picker#master",
20 |     "paper-toast": "PolymerElements/paper-toast#1.1.3",
21 |     "paper-toggle-button": "PolymerElements/paper-toggle-button#1.1.1",
22 |     "paper-toolbar": "PolymerElements/paper-toolbar#1.1.4",
23 |     "platinum-sw": "PolymerElements/platinum-sw#1.2.3",
24 |     "polymer": "Polymer/polymer#1.3.0",
25 |     "start-google-analytics-tracker": "StartPolymer/start-google-analytics-tracker#1.1.0"
26 |   },
27 |   "devDependencies": {
28 |     "web-component-tester": "4.2.0"
29 |   },
30 |   "ignore": []
31 | }
32 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
  1 | var execSync = require('child_process').execSync,
  2 |     appVersion = null;
  3 | 
  4 | try {
  5 |   appVersion = execSync('git describe --tags').toString().replace(/(\r\n|\n|\r)/gm, '');
  6 | } catch(e) {
  7 |   console.log('Warning: Can\'t run "git describe" for determine app version');
  8 | }
  9 | 
 10 | module.exports = {
 11 |   // App name ID is used for iron-localstorage element and Service Worker cache ID
 12 |   appNameId: 'polymer-starter-kit-plus',
 13 |   // App theme is directory name in app/themes
 14 |   appTheme: 'default-theme',
 15 |   // App version from git is used for deploy task and frontend
 16 |   appVersion: appVersion,
 17 |   // Autoprefixer
 18 |   autoprefixer: {
 19 |     // https://github.com/postcss/autoprefixer#browsers
 20 |     browsers: [
 21 |       // Setup for WebComponents Browser Support
 22 |       // https://github.com/WebComponents/webcomponentsjs#browser-support
 23 |       'Explorer >= 10',
 24 |       'ExplorerMobile >= 10',
 25 |       'Firefox >= 30',
 26 |       'Chrome >= 34',
 27 |       'Safari >= 7',
 28 |       'Opera >= 23',
 29 |       'iOS >= 7',
 30 |       'Android >= 4.4',
 31 |       'BlackBerry >= 10'
 32 |     ]
 33 |   },
 34 |   // BrowserSync
 35 |   browserSync: {
 36 |     browser: 'default', // or ["google chrome", "firefox"]
 37 |     https: false, // Enable https for localhost development.
 38 |     notify: false, // The small pop-over notifications in the browser.
 39 |     port: process.env.PORT || 3000, // Environment variable $PORT is for Cloud9 IDE
 40 |     ui: {
 41 |       port: 3001
 42 |     }
 43 |   },
 44 |   // Deploy task
 45 |   deploy: {
 46 |     // Choose hosting
 47 |     hosting: 'gae', // or firebase, gcs, ssh
 48 |     // Firebase
 49 |     // Firebase requires Firebase Command Line Tools to be installed and configured.
 50 |     // For info on tool: https://www.firebase.com/docs/hosting/command-line-tool.html
 51 |     firebase: {
 52 |       env: {
 53 |         development: 'polymer-starter-kit-plus-dev', // subdomain
 54 |         staging:     'polymer-starter-kit-plus-staging',
 55 |         production:  'polymer-starter-kit-plus'
 56 |       }
 57 |     },
 58 |     // Google App Engine
 59 |     // GAE requires Google Cloud SDK to be installed and configured.
 60 |     // For info on SDK: https://cloud.google.com/sdk/
 61 |     gae: {
 62 |       env: {
 63 |         development: 'polymer-starter-kit-plus-dev', // project ID
 64 |         staging:     'polymer-starter-kit-plus-staging',
 65 |         production:  'polymer-starter-kit-plus'
 66 |       },
 67 |       // Promote the deployed version to receive all traffic.
 68 |       // https://cloud.google.com/sdk/gcloud/reference/preview/app/deploy
 69 |       promote: true
 70 |     },
 71 |     // Google Cloud Storage
 72 |     // GCS requires Google Cloud SDK with gsutil to be installed and configured.
 73 |     // For info on SDK: https://cloud.google.com/sdk/
 74 |     gcs: {
 75 |       acl: { // https://cloud.google.com/storage/docs/access-control
 76 |         development: 'public-read',
 77 |         staging:     'public-read',
 78 |         production:  'public-read'
 79 |       },
 80 |       env: { // https://cloud.google.com/storage/docs/reference-uris
 81 |         development: 'dev.example.com', // bucket
 82 |         staging:     'staging.example.com',
 83 |         production:  'www.example.com'
 84 |       },
 85 |       cacheTTL: {
 86 |         development: '0',
 87 |         staging:     '0',
 88 |         production:  '315360000', // 10 years
 89 |         productionNoCache: '300' // 5 min for files without revision hash
 90 |       }
 91 |     },
 92 |     // Any Linux hosting with SSH
 93 |     // Install your SSH public key ~/.ssh/id_rsa.pub onto a remote Linux
 94 |     // Example command: ssh-copy-id root@server.example.com
 95 |     ssh: {
 96 |       env: {
 97 |         development: '/path/to/remote-dir-dev', // remote dir must not exist
 98 |         staging:     '/path/to/remote-dir-staging',
 99 |         production:  '/path/to/remote-dir'
100 |       },
101 |       host: 'server.example.com',
102 |       port: 22,
103 |       user: 'root'
104 |     }
105 |   },
106 |   // PageSpeed Insights
107 |   // Please feel free to use the `nokey` option to try out PageSpeed
108 |   // Insights as part of your build process. For more frequent use,
109 |   // we recommend registering for your own API key. For more info:
110 |   // https://developers.google.com/speed/docs/insights/v1/getting_started
111 |   pageSpeed: {
112 |     key: '', // need uncomment in task
113 |     nokey: true,
114 |     site: 'https://polymer-starter-kit-plus.firebaseapp.com',
115 |     strategy: 'mobile' // or desktop
116 |   },
117 |   // Service Worker
118 |   serviceWorker: {
119 |     cacheDisabled: false
120 |   }
121 | };
122 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Recipes
 2 | 
 3 | * [Add ES2015 (formally ES6) support using Babel](add-es2015-support-babel.md)
 4 | * [Polymer Performance Recipe](polymer-perf.md)
 5 | * [Use PSK with Chrome Dev Editor](chrome-dev-editor.md)
 6 | * [Deploy to Github Pages](deploy-to-github-pages.md)
 7 | * [Deploy to Firebase using Pretty URLs](deploy-to-firebase-pretty-urls.md)
 8 | * [Deploy to Google App Engine](deploy-to-google-app-engine.md)
 9 | * [Use PSK for Mobile Chrome Apps](mobile-chrome-apps.md)
10 | * [Add page transitions with neon-animated-pages](neon-animated-pages.md)
11 | * [Add ESLint support](add-eslint-support.md)
12 | 


--------------------------------------------------------------------------------
/docs/add-es2015-support-babel.md:
--------------------------------------------------------------------------------
  1 | # Add ES2015 support through Babel
  2 | 
  3 | Although support for ES2015 (formerly ES6) is improving in modern browsers, the majority do not yet support the full set of features. To benefit from the awesomeness of the new ES2015 syntax while keeping backwards compatibility with Polymer's supported browsers, you'll need to transpile your JS code from ES2015 to ES5
  4 | 
  5 | This recipe focuses on adding an ES2015 to ES5 transpile step to Polymer Starter Kit's build pipeline using [BabelJS](https://babeljs.io/).
  6 | 
  7 | 
  8 | ## Create a transpile gulp task
  9 | 
 10 | - Install the gulp Babel, Sourcemap, Crisper plugins and Babel ES2015 preset: `npm install --save-dev gulp-babel gulp-sourcemaps gulp-crisper babel-preset-es2015`
 11 | - Add the following gulp task in the `gulpfile.js` file:
 12 | 
 13 | ```patch
 14 | + // Transpile all JS to ES5.
 15 | + gulp.task('js', function() {
 16 | +   return gulp.src(['app/**/*.{js,html}', '!app/bower_components/**/*'])
 17 | +    .pipe($.sourcemaps.init())
 18 | +    .pipe($.if('*.html', $.crisper({scriptInHead: false}))) // Extract JS from .html files
 19 | +    .pipe($.if('*.js', $.babel({
 20 | +      presets: ['es2015']
 21 | +    })))
 22 | +    .pipe($.sourcemaps.write('.'))
 23 | +    .pipe(gulp.dest('.tmp/'))
 24 | +    .pipe(gulp.dest(dist()));
 25 | + });
 26 | ```
 27 | 
 28 | This task will transpile all JS files and inline JS inside HTML files and also generate sourcemaps. The resulting files are generated in the `.tmp` and the `dist` folders
 29 | 
 30 | [Crisper](https://github.com/PolymerLabs/crisper) extracts JavaScript that's inline to HTML files (such as imports). We need this as Babel does not support transpiling HTML files such as `<script>` tags directly
 31 | 
 32 | Note: At the time of writing Crisper does not generate the sourcemaps. Your app will work but you won't get sourcemaps for files transformed by Crisper. Relevant issues:
 33 | 
 34 |  - [ragingwind/gulp-crisper#4](https://github.com/ragingwind/gulp-crisper/issues/4)
 35 |  - [PolymerLabs/crisper#14](https://github.com/PolymerLabs/crisper/issues/14)
 36 | 
 37 | 
 38 | ## Integrating the transpile task
 39 | 
 40 | Make sure the `js` gulp task is triggered by the common build tasks:
 41 | 
 42 |  - In the gulp `serve` task, make sure `js` is triggered initially and on HTML and JS files changes:
 43 | 
 44 | ```patch
 45 | -gulp.task('serve', ['styles', 'elements', 'images'], function () {
 46 | +gulp.task('serve', ['styles', 'elements', 'images', 'js'], function () {
 47 | 
 48 |   ...
 49 | 
 50 | - gulp.watch(['app/**/*.html'], reload);
 51 | + gulp.watch(['app/**/*.html'], ['js', reload]);
 52 |   gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
 53 |   gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
 54 | - gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint']);
 55 | + gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint', 'js']);
 56 |   gulp.watch(['app/images/**/*'], reload);
 57 | });
 58 | ```
 59 | 
 60 |  - In the `default` task make sure `js` is run in parallel to `elements`:
 61 | 
 62 | ```patch
 63 | gulp.task('default', ['clean'], function (cb) {
 64 | 
 65 |   ...
 66 | 
 67 |   runSequence(
 68 |     ['copy', 'styles'],
 69 | -   'elements',
 70 | +   ['elements', 'js'],
 71 |     ['images', 'fonts', 'html'],
 72 |     'vulcanize', // 'cache-config',
 73 |     cb);
 74 | });
 75 | ```
 76 | 
 77 |  - In the `html` task replace `app` in the paths by `dist` since dist should already contain all JS and HTML files now transpiled.
 78 | 
 79 |  ```patch
 80 |  // Scan your HTML for assets & optimize them
 81 |  gulp.task('html', function () {
 82 |    return optimizeHtmlTask(
 83 | -    ['app/**/*.html', '!app/{elements,test}/**/*.html'],
 84 | +    [dist('/**/*.html'), '!' + dist('/{elements,test}/**/*.html')],
 85 |      dist());
 86 |  });
 87 |  ```
 88 | 
 89 | 
 90 |  - In the `optimizeHtmlTask` function remove the `searchPath` attribute since all assets should be found under the `dist` folder and we want to make sure we are not picking up duplicates and un-transpiled JS files:
 91 | 
 92 | ```patch
 93 | var optimizeHtmlTask = function (src, dest) {
 94 | - var assets = $.useref.assets({
 95 | -   searchPath: ['.tmp', 'app']
 96 | - });
 97 | + var assets = $.useref.assets();
 98 | ```
 99 | 
100 | ## Vulcanize the new files
101 | 
102 | Need to change the vulcanize command to grab the newly translated files.  .tmp has the translated files so will pull from there.
103 | 
104 | - First need to copy over all bower_components so that vulcanize can find the html references it needs.
105 | ```patch
106 | +// Copy all bower_components over to help js task and vulcanize work together
107 | +gulp.task('bowertotmp', function () {
108 | + return gulp.src(['app/bower_components/**/*'])
109 | +   .pipe(gulp.dest('.tmp/bower_components/'));
110 | + });
111 | ```
112 | 
113 | - add it to the default command
114 | ```patch
115 |  gulp.task('default', ['clean'], function(cb) {
116 |    // Uncomment 'cache-config' if you are going to use service workers.
117 |    runSequence(
118 | +    'bowertotmp',
119 |      ['copy', 'styles'],
120 |      ['elements', 'js'],
121 |      ['images', 'fonts', 'html'],
122 | @@ -324,6 +325,12 @@
123 |     .pipe($.sourcemaps.write('.'))
124 |     .pipe(gulp.dest('.tmp/'))
125 |     .pipe(gulp.dest(dist()));
126 | +});
127 | ```
128 | 
129 | - finally update vulcanize to point to .tmp directory
130 | ```patch
131 |  // Vulcanize granular configuration
132 |  gulp.task('vulcanize', function() {
133 | -  return gulp.src('app/elements/elements.html')
134 | +  return gulp.src('.tmp/elements/elements.html')
135 |      .pipe($.vulcanize({
136 |        stripComments: true,
137 |        inlineCss: true,
138 | ```
139 | 
140 | 
141 | ## Optional - When using shadow-dom instead shady-dom
142 | Place this configuration ([Read more](https://www.polymer-project.org/1.0/docs/devguide/settings.html)) in a separate file like `scripts/polymer-settings`
143 | 
144 | ```html
145 | <script>
146 |     window.Polymer = window.Polymer || {};
147 |     window.Polymer.dom = 'shadow';
148 | </script>
149 | ```
150 | 


--------------------------------------------------------------------------------
/docs/add-eslint-support.md:
--------------------------------------------------------------------------------
  1 | # Add ESLint support
  2 | 
  3 | This recipe helps you to create a task to use [ESLint](http://eslint.org/) tool. 
  4 | 
  5 | 
  6 | ## Create .eslintrc.json file in the root folder
  7 | 
  8 | ```
  9 | {
 10 |   "extends": "eslint:recommended",
 11 |   "rules": {
 12 |     "no-console": 0
 13 |   },
 14 |   "env": {
 15 |     "browser": true
 16 |   },
 17 |   "plugins": [
 18 |     "html"
 19 |   ],
 20 |   "globals": {
 21 |     "__dirname": false,
 22 |     "app": false,
 23 |     "page": false,
 24 |     "Polymer": false,
 25 |     "process": false,
 26 |     "require": false
 27 |   }
 28 | }
 29 | ```
 30 | 
 31 | ## Create .eslintignore file in the root folder
 32 | 
 33 | ```
 34 | /app/bower_components/**
 35 | /dist/**
 36 | ```
 37 | 
 38 | 
 39 | ## Create a lint gulp task
 40 | 
 41 | - Install the gulp-eslint and eslint-plugin-html: `npm install --save-dev gulp-eslint eslint-plugin-html`
 42 | - Add the following gulp task in the `gulpfile.js` file:
 43 | 
 44 | ```patch
 45 | 
 46 | + // Lint JavaScript
 47 | + gulp.task('lint', function() {
 48 | +   return gulp.src([
 49 | +       'app/scripts/**/*.js',
 50 | +       'app/elements/**/*.html',
 51 | +       'gulpfile.js'
 52 | +     ])
 53 | +     .pipe(reload({
 54 | +       stream: true,
 55 | +       once: true
 56 | +     }))
 57 | +     .pipe($.eslint())
 58 | +     .pipe($.eslint.format())
 59 | +     .pipe($.eslint.failAfterError());
 60 | + });
 61 | ```
 62 | 
 63 | This task will check all JS files and JS inside HTML files.
 64 | 
 65 | 
 66 | ## Integrating the lint task
 67 | 
 68 | Make sure the `lint` gulp task is triggered by the common build tasks:
 69 | 
 70 |  - In the gulp `serve` task, make sure `lint` is triggered initially and on HTML and JS files changes:
 71 | 
 72 | ```patch
 73 | -gulp.task('serve', ['styles'], function () {
 74 | +gulp.task('serve', ['lint', 'styles'], function () {
 75 | 
 76 |   ...
 77 | 
 78 |   gulp.watch(['app/**/*.html', '!app/bower_components/**/*.html'], reload);
 79 |   gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
 80 | + gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint', reload]);
 81 |   gulp.watch(['app/images/**/*'], reload);
 82 | });
 83 | ```
 84 | 
 85 |  - In the `default` task make sure `lint` is run in parallel to `images`, `fonts` and `html`:
 86 | 
 87 | ```patch
 88 | gulp.task('default', ['clean'], function (cb) {
 89 | 
 90 |   ...
 91 | 
 92 |   runSequence(
 93 |     ['copy', 'styles'],
 94 | -   ['images', 'fonts', 'html'],
 95 | +   ['lint', 'images', 'fonts', 'html'],
 96 |     'vulcanize', // 'cache-config',
 97 |     cb);
 98 | });
 99 | ```
100 | 
101 | 


--------------------------------------------------------------------------------
/docs/chrome-dev-editor.md:
--------------------------------------------------------------------------------
 1 | # Use Polymer Starter Kit on Chrome Dev Editor
 2 | 
 3 | If you are using a Chromebook, one of the few IDE you can use is [Chrome Dev Editor](https://github.com/GoogleChrome/chromedeveditor).
 4 | 
 5 | To use the Polymer Starter Kit you have to download the [latest release](https://github.com/PolymerElements/polymer-starter-kit/releases) in the `light` flavor (the additional tools can't be used from CDE).
 6 | 
 7 | After downloading the `polymer-starter-kit-light-*.zip` file unpack it in a new folder (for Example `psk-light`) you should have a directory structure like
 8 | 
 9 | ![psk-light-folder-p1](https://cloud.githubusercontent.com/assets/1431346/9451900/a73ffcf2-4ab1-11e5-8742-e0b5523ba9d5.png)
10 | 
11 | When the app first opens you'll notice, in the bottom left, that Bower is updating.
12 | 
13 | ![bower updating](https://cloud.githubusercontent.com/assets/1066253/11860260/d837edae-a427-11e5-997e-117caa83bbed.png)
14 | 
15 | Wait for this process to finish before continuing (it may take a few minutes). When it is complete, you should notice that the `bower_components` directory has moved to `app/bower_components`. This is because CDE is respecting the configuration in our `.bowerrc` file. This is a good thing :)
16 | 
17 | We can now `Open Folder...` inside CDE and start renaming the file `app/manifest.json` to `app/web-app-manifest.json`, followed by updating the link to it in the file `app/index.html`
18 | 
19 | ![manifest json](https://cloud.githubusercontent.com/assets/1431346/9452182/27e41478-4ab3-11e5-8e40-d7c0f1249feb.png)
20 | 
21 | 
22 | *This change is needed because `manifest.json` is interpreted by CDE as a [Chrome Apps Manifest](https://developer.chrome.com/extensions/manifest) and the [web app manifest](https://w3c.github.io/manifest/) is slightly different*
23 | 
24 | Open `app/elements/routing.html` and add the following code after the last route:
25 | 
26 | ```javascript
27 | page('*', function () {
28 |   app.route = 'home';
29 | });
30 | ```
31 | 
32 | After the change, the code will look like the following:
33 | 
34 | ```javascript
35 | ...
36 | page('/contact', function () {
37 |   app.route = 'contact';
38 | });
39 | 
40 | page('*', function () {
41 |   app.route = 'home';
42 | });
43 | 
44 | // add #! before urls
45 | page({
46 |   hashbang: true
47 | });
48 | ...
49 | ```
50 | 
51 | 
52 | Select `app/index.html` and hit run (or press CTRL+R) to see the application running in the browser.
53 | 


--------------------------------------------------------------------------------
/docs/deploy-to-firebase-pretty-urls.md:
--------------------------------------------------------------------------------
 1 | # Deploy to Firebase using Pretty URLs
 2 | 
 3 | Firebase is a very simple and secure way to deploy a Polymer Starter Kit site. You can sign up for a free account and deploy your application in less than 5 minutes.
 4 | 
 5 | The instructions below are based on the [Firebase hosting quick start
 6 | guide](https://www.firebase.com/docs/hosting/quickstart.html).
 7 | 
 8 | 1.  [Sign up for a Firebase account](https://www.firebase.com/signup/)
 9 | 
10 | 1.  Install the Firebase command line tools
11 | 
12 |         npm install -g firebase-tools
13 | 
14 |     The `-g` flag instructs `npm` to install the package globally so that you
15 |     can use the `firebase` command from any directory. You may need
16 |     to install the package with `sudo` privileges.
17 | 
18 | 1.  `cd` into your project directory
19 | 
20 | 1.  Inititalize the Firebase application
21 | 
22 |         firebase init
23 | 
24 |     Firebase asks you which app you would like to use for hosting. If you just
25 |     signed up, you should see one app with a randomly-generated name. You can
26 |     use that one. Otherwise go to
27 |     [https://www.firebase.com/account](https://www.firebase.com/account) to
28 |     create a new app.
29 | 
30 | 1.  Firebase asks you the name of your app's public directory. Enter `dist`.
31 |     This works because when you run `gulp` to build your application, PSK
32 |     builds everything and places it all in `dist`. So `dist` contains
33 |     everything your application needs to run.
34 | 
35 | 1.  Edit firebase.json, change firebase name, and add `rewrites` section ([see example firebase.json](/docs/firebase.json)).
36 | 
37 |         {
38 |           "firebase": "polymer-starter-kit",
39 |           "public": "dist",
40 |           "ignore": [
41 |             "firebase.json",
42 |             "**/.*",
43 |             "**/node_modules/**"
44 |           ],
45 |           "rewrites": [ {
46 |             "source": "**",
47 |             "destination": "/index.html"
48 |           } ]
49 |         }
50 | 
51 | 1.  Add `<base href="/">` to `head` near top of index.html, above ``<!-- Place favicon.ico in the `app/` directory -->``
52 | 
53 | 1.  Remove `hashbang: true` in routing.html near bottom. The call to `page` should look like this now:
54 | 
55 |         page();
56 | 
57 | 1.  Build
58 | 
59 |         gulp
60 | 
61 | 1.  Deploy
62 | 
63 |         firebase deploy
64 | 
65 |     The URL to your live site is listed in the output.
66 | 
67 | You can see a demo of Polymer Starter Kit hosted on Firebase using pretty URLs at https://polymer-starter-kit.firebaseapp.com.
68 | 


--------------------------------------------------------------------------------
/docs/deploy-to-github-pages.md:
--------------------------------------------------------------------------------
 1 | # Deploy to Github Pages
 2 | 
 3 | You can deploy to github pages with a couple minor changes to Polymer Starter Kit:
 4 | 
 5 | 1. Uncomment this line  `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
 6 | 
 7 |   ```JavaScript
 8 |   // Sets app default base URL
 9 |   app.baseUrl = '/';
10 |   if (window.location.port === '') {  // if production
11 |     // Uncomment app.baseURL below and
12 |     // set app.baseURL to '/your-pathname/' if running from folder in production
13 |     // app.baseUrl = '/polymer-starter-kit/';
14 |   }
15 |   ```
16 | 
17 | 2. Change `app.baseUrl = '/polymer-starter-kit/';`  to `app.baseUrl = '/your-pathname/';` (ex: if you repo is `github.com/username/bobs-awesome-site` you would change this to `app.baseUrl = '/bobs-awesome-site/';`)
18 | 
19 | 3. Add this code at the top of `<head>` tag in the [index.html](../app/index.html) to force HTTPS:
20 | 
21 |   ```html
22 |   <script>'https:'!==window.location.protocol&&(window.location.protocol='https')</script>
23 |   ```
24 | 
25 | 4. Run `gulp build-deploy-gh-pages` from command line
26 | 
27 | 5. To see changes wait 1-2 minutes then load Github pages for your app (ex: https://polymerelements.github.io/polymer-starter-kit)
28 | 
29 | ### Notes
30 | 
31 | * When deploying to Github Pages we recommend using hashbangs which is Polymer Starter Kit default.
32 | * This method should work for most hosting providers when using a subfolder.
33 | 


--------------------------------------------------------------------------------
/docs/deploy-to-google-app-engine.md:
--------------------------------------------------------------------------------
  1 | # Deploy to Google App Engine
  2 | 
  3 | Google App Engine is a great way to host your Polymer application using Google infrastructure.
  4 | 
  5 | [You can sign up for a Google Cloud Platform free account](https://cloud.google.com/).
  6 | 
  7 | There are multiple ways to host web app on GCP, but my favorite one is using GAE.
  8 | 
  9 | The scripts below are based on the [Using Static Files guide](https://cloud.google.com/appengine/docs/python/gettingstartedpython27/staticfiles) and [Polymer Gmail by @ebidel](https://github.com/ebidel/polymer-gmail) repository.
 10 | 
 11 | 1.  Install the gcloud command line tools
 12 | 
 13 |         curl https://sdk.cloud.google.com | bash
 14 | 
 15 |     Detailed instructions can be found [here](https://cloud.google.com/sdk/)
 16 | 
 17 | 1.  Inititalize gcloud
 18 | 
 19 |         gcloud init
 20 | 
 21 |     In this step you will be asked to login to your GCP account and set default settings, such as project, zone & region, etc.
 22 | 
 23 | 1.  Create a new GCP project using the [Developers Console](https://console.developers.google.com/home/dashboard)
 24 | 
 25 | 1.  Add `app.yaml` to your project root folder
 26 | 
 27 |     ```yaml
 28 |     runtime: python27
 29 |     api_version: 1
 30 |     threadsafe: yes
 31 | 
 32 |     handlers:
 33 | 
 34 |     - url: /bower_components
 35 |       static_dir: bower_components
 36 |       secure: always
 37 | 
 38 |     - url: /images
 39 |       static_dir: images
 40 |       secure: always
 41 | 
 42 |     - url: /(.*).(html|js|json|css)
 43 |       static_files: \1.\2
 44 |       upload: (.*)\.(html|js|json|css)
 45 |       secure: always
 46 | 
 47 |     - url: /
 48 |       static_files: index.html
 49 |       upload: index\.html
 50 |       http_headers:
 51 |         Link: '</scripts/app.js>; rel=preload; as=script, </elements/elements.html>; rel=preload; as=document, </styles/main.css>; rel=preload; as=style'
 52 |         # Access-Control-Allow-Origin: "*"
 53 |       secure: always
 54 | 
 55 |     skip_files:
 56 |     - ^(.*/)?app\.yaml
 57 |     ```
 58 | 
 59 |     This is the configuration file for the GCP project.
 60 |     It sets a python runtime environment and static file handlers.
 61 |     The configuration utilizes GAE HTTP/2 capabilities in order to minimize load time for HTTP/2 compatible browsers.
 62 | 
 63 |     **Please note**: This also ensures HTTPS; if you wish to use custom domains supporting HTTP only, you will need to remove all the 'secure: always’ entries. If you decide to have custom domains that only use HTTP instead of HTTPS, be aware some Web platform APIs such as service workers and Web app manifests, including some elements that depend on such APIs for their functionality, only work with HTTPS.
 64 | 
 65 | 1.  Add a bash script to build & deploy the application
 66 | 
 67 |     ```sh
 68 |     #!/usr/bin/env bash
 69 | 
 70 |     GAE_PROJECT=psk
 71 |     DEPLOY_VERSION=$1
 72 | 
 73 |     if [ -z "$DEPLOY_VERSION" ]
 74 |     then
 75 |       TAG=`git describe --abbrev=0`
 76 |       # GAE doesn't allow periods
 77 |       DEPLOY_VERSION=${TAG//.}
 78 |     fi
 79 | 
 80 |     # Build it.
 81 |     echo "Building $DEPLOY_VERSION"
 82 |     gulp
 83 |     cp app.yaml dist/app.yaml
 84 | 
 85 |     echo "Deploying $DEPLOY_VERSION"
 86 |     gcloud preview app deploy dist/app.yaml --project $GAE_PROJECT --promote --version $DEPLOY_VERSION
 87 |     ```
 88 | 
 89 |     You have to set `GAE_PROJECT` variable to your GAE project id.
 90 |     A deploy version can be provided as a parameter for the script, if not provided the latest git tag will be used.
 91 | 
 92 | 1.  Add execution permission to the script
 93 | 
 94 |         chmod +x deploy.sh
 95 | 
 96 | 1.  Run the deploy script
 97 | 
 98 |       Without version argument in order to use the latest git tag
 99 | 
100 |         ./deploy.sh
101 | 
102 |       Or with a version argument (according to GAE version [limitations](https://cloud.google.com/appengine/docs/python/config/appconfig?hl=en))
103 | 
104 |         ./deploy.sh v100
105 | 
106 |     The URL to your live site is listed in the output.
107 | 
108 | Enjoy!
109 | 


--------------------------------------------------------------------------------
/docs/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "firebase": "polymer-starter-kit",
 3 |   "public": "dist",
 4 |   "ignore": [
 5 |     "firebase.json",
 6 |     "**/.*",
 7 |     "**/node_modules/**"
 8 |   ],
 9 |   "rewrites": [ {
10 |     "source": "**",
11 |     "destination": "/index.html"
12 |   } ]
13 | }
14 | 


--------------------------------------------------------------------------------
/docs/mobile-chrome-apps.md:
--------------------------------------------------------------------------------
  1 | # Use Polymer Starter Kit for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps)
  2 | 
  3 | ## Getting started
  4 | 
  5 | Polymer Starter Kit could be fully adapted to Mobile Chrome Apps through mobile-friendly features. Mobile Chrome Apps, is based on Apache Cordova, and requires mobile application SDKs such as Android and iOS. so please make sure that installation development tool by following [installation guide](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md) of Mobile Chrome Apps. And then, You do some further steps to resolve some of restrictions and configurations to use Polymer Starter Kit on Cordova. Looking for a [guide video](https://www.youtube.com/watch?v=-ifgyobPLVg) below to better understand.
  6 | 
  7 | [![](https://camo.githubusercontent.com/7c498c4d60113dd1ea072576df897283100428b6/687474703a2f2f696d672e796f75747562652e636f6d2f76692f2d696667796f62504c56672f302e6a7067)](https://www.youtube.com/watch?v=-ifgyobPLVg)
  8 | 
  9 | ## Download Polymer Starter Kit into your workspace
 10 | 
 11 | To download and preparation, follow this [guide of Polymer Starter Kit](https://github.com/PolymerElements/polymer-starter-kit#getting-started). Make sure that install all of dependencies of npm and Bower.
 12 | 
 13 | ## Create a Cordova project
 14 | 
 15 | Create a Cordova project in path `polymer-starter-kit` by following command. `platform` is the path for Cordova project files, `com.your.app` is the project name/id and next following string is the description for your app.
 16 | 
 17 | ```sh
 18 | cca create platform com.your.app "Your Polymer Starter Kit App"
 19 | ```
 20 | 
 21 | If you have no problems while creating a project you will seeing the message of  installing successful coming from Cordova and have the tree of the project below.
 22 | 
 23 | ```sh
 24 | └── polymer-starter-kit
 25 |   └── app
 26 |   │   ├── elements
 27 |   │   ├── images
 28 |   │   ├── index.html
 29 |   │   ├── manifest.json
 30 |   │   ├── scripts
 31 |   │   ├── styles
 32 |   │   └── test
 33 |   ├── bower.json
 34 |   ├── bower_components
 35 |   ├── docs
 36 |   ├── gulpfile.js
 37 |   ├── node_modules
 38 |   ├── package.json
 39 |   ├── platform
 40 |   │   ├── config.xml
 41 |   │   ├── hooks
 42 |   │   ├── platforms
 43 |   │   ├── plugins
 44 |   │   └── www
 45 | ```
 46 | 
 47 | For further informations of Cordova, please visit [corodova document](https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/docs)
 48 | 
 49 | ## Configuration
 50 | 
 51 | You need to have some changes of configuration to fit for Mobile Chrome Apps as it was mentioned above.
 52 | 
 53 | ### Configure path for app built by gulp
 54 | 
 55 | - Change the path `dist` in `gulpfile.js` from `dist` to `platform/www/app`, then the app built with Polymer Starter Kit will be placed under `platform/www` will be used by Cordova.
 56 |   ```js
 57 |   var DIST = 'platform/www/app';
 58 |   ```
 59 | 
 60 | - Change the path in `platform/www/background.js` into new path
 61 |   ```js
 62 |   chrome.app.runtime.onLaunched.addListener(function() {
 63 |     chrome.app.window.create('app/index.html', {
 64 |       width: 244,
 65 |       height: 380,
 66 |     });
 67 |   });
 68 |   ```
 69 | 
 70 | - Add path `/app` to `app.baseURL` in `app/scripts/app.js'. `platform/www` is root path of app that will prevent errors coming from page routing.
 71 |   ```js
 72 |   app.baseUrl = '/app';
 73 |   ```
 74 | 
 75 | ### Update gulp tasks
 76 | 
 77 | - Using `polybuild(vulcanize + crisper)` task is mandatory because of Chrome Apps doesn't allow inline script blocks according to [CSP](https://developer.chrome.com/apps/contentSecurityPolicy). You should replace current `vulcanize` task with new task below. To do this install `polybuild` first with `npm install --save-dev polybuild` command
 78 |   ```js
 79 |   // load polybuild
 80 |   var polybuild = require('polybuild');
 81 | 
 82 |   // Vulcanize granular configuration
 83 |   gulp.task('vulcanize', function() {
 84 |     return gulp.src('app/elements/elements.html')
 85 |       .pipe(polybuild({maximumCrush: true}))
 86 |       .pipe($.rename(function(file) {
 87 |         if (file.extname === '.html') {
 88 |           file.basename = file.basename.replace('.build', '');
 89 |         }
 90 |       }))
 91 |       .pipe(gulp.dest(dist('elements')))
 92 |       .pipe($.size({title: 'vulcanize'}));
 93 |   });
 94 |   ```
 95 | 
 96 | ### More updates
 97 | 
 98 | - Remove useless files generated from Cordova.
 99 |   ```sh
100 |   rm platform/www/index.*
101 |   ```
102 | - To complete first route for `home` you need to put try/catch block into the first route code on starting app, in `app/elements/routing.html`, because Chrome Apps doesn't allow using `history` APIs which related to error message `history.pushState/replaceState is not available in packaged apps`.
103 |   ```js
104 |   try {
105 |     page({
106 |       hashbang: true
107 |     });
108 |   } catch (e) {
109 |     app.route = 'home';
110 |   }
111 |   ```
112 | 
113 | - Using `@import` instead of `link` to download external Google robot fonts which is related to `Refused to load the stylesheet` errors. Update code in `bower_components/font-roboto/roboto.html` to using `@import` code below
114 |   ```
115 |   @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic);
116 |   @import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700);
117 |   ```
118 | 
119 | ## Build and run app
120 | 
121 | After done of above steps. run this command on root path that let you see Chrome Apps built with Polymer Starter Kit.
122 | 
123 | ```sh
124 | gulp && cd platform && cca run chrome
125 | ```
126 | 
127 | or to run on Android emulator or devices
128 | 
129 | ```sh
130 | gulp && cd platform && cca run android
131 | ```
132 | 


--------------------------------------------------------------------------------
/docs/neon-animated-pages.md:
--------------------------------------------------------------------------------
  1 | # Add page transitions with neon-animated-pages
  2 | 
  3 | This recipe focuses on replacing the "static" `iron-pages` component with `neon-animated-pages` in order to display slick animations when transitioning between pages.
  4 | 
  5 | ## Update your dependencies
  6 | 
  7 | - First thing first, we need to replace the `iron-pages` import in `app/elements/elements.html` with a set of components from the `neon-animation` library, including `neon-animated-pages`:
  8 | 
  9 | ```patch
 10 | - <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
 11 | ...
 12 | +
 13 | + <!-- Neon elements -->
 14 | + <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
 15 | + <link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
 16 | + <link rel="import" href="../bower_components/neon-animation/animations/slide-from-bottom-animation.html">
 17 | + <link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">
 18 | +
 19 | ```
 20 | Note the last two imports are actually animations definitions. We are going to use `slide-from-bottom-animation` and `fade-out-animation` as entry and exit animations respectively. Those animations will apply for all page transitions.
 21 | 
 22 | If you wish to use different animations, make sure you replace those imports by the ones you need.
 23 | 
 24 | ## Replace `iron-pages` with `neon-animated-pages`
 25 | 
 26 | - Next, we need to remove the `iron-pages` from `app/index.html` and replace it with `neon-animated-pages`:
 27 | 
 28 | ```patch
 29 | - <iron-pages attr-for-selected="data-route" selected="{{route}}">
 30 | + <neon-animated-pages attr-for-selected="data-route" selected="{{route}}" entry-animation="slide-from-bottom-animation" exit-animation="fade-out-animation">
 31 | ...
 32 | - </iron-pages>
 33 | + </neon-animated-pages>
 34 | ```
 35 | This is pretty straightforward, as these elements behave similarly and share a common API, being both based on `Polymer.IronSelectableBehavior`.
 36 | 
 37 | - It is then necessary to replace the children `section` of our page selector with `neon-animatable` elements. You should proceed as follows for the contact section/page for example:
 38 | 
 39 | ```patch
 40 | - <section data-route="contact">
 41 | + <neon-animatable data-route="contact">
 42 |     <paper-material elevation="1">
 43 |       <h2 class="page-title">Contact</h2>
 44 |       <p>This is the contact section</p>
 45 |     </paper-material>
 46 | - </section>
 47 | + </neon-animatable>
 48 | ```
 49 | Until now, all the pages of our web application were embedded in `section` tags under our page selector `iron-pages`. Replacing those `section` with the convenience element `neon-animatable` is now mandatory because all children of `neon-animated-pages` are required to implement `Polymer.NeonAnimatableBehavior` in order to be animated.
 50 | 
 51 | ## Fix the CSS
 52 | 
 53 | -  In `app/styles/app-theme.html`:
 54 | 
 55 | ```patch
 56 | - section[data-route="home"] paper-material {
 57 | + neon-animatable[data-route="home"] paper-material {
 58 |     @apply(--paper-font-body2);
 59 |   }
 60 | 
 61 | - section[data-route="home"] paper-material .subhead {
 62 | + neon-animatable[data-route="home"] paper-material .subhead {
 63 |     @apply(--paper-font-subhead);
 64 |   }
 65 | 
 66 | + neon-animated-pages {
 67 | +   height: 100%;
 68 | + }
 69 | +
 70 |   paper-material {
 71 |     border-radius: 2px;
 72 | -   height: 100%;
 73 |     padding: 16px 0 16px 0;
 74 |     width: calc(98.66% - 16px);
 75 |     margin: 16px auto;
 76 |     background: white;
 77 |   }
 78 | 
 79 | ...
 80 | 
 81 |   /* Tablet+ */
 82 |   @media (min-width: 601px) {
 83 | 
 84 |     #drawer.paper-drawer-panel > [drawer] {
 85 |       border-right: 1px solid rgba(0, 0, 0, 0.14);
 86 |     }
 87 | 
 88 | -   iron-pages {
 89 | +   neon-animated-pages > * {
 90 |       padding: 48px 62px;
 91 |     }
 92 | 
 93 | ...
 94 | ```
 95 | 
 96 | ## Going further
 97 | 
 98 | This recipe took you through a basic integration of `neon-animated-pages` in Polymer Starter Kit with global and declarative transitions.
 99 | However, it doesn't stop there, as `neon-animated-pages` can enable your web application to:
100 | 
101 | - Have page specific transitions
102 | - Use multiple animations during one transition
103 | - Only animate part of your page or a specific element
104 | - Use complex animations such as cascaded animations or shared element animations (hero animation, ripple animation)
105 | 
106 | Those features require you to extract every page of your web application in its own web-component.
107 | Once that is done, we recommend you take a look at the following resources to learn how to make the most of the `neon-animated-pages` element:
108 | 
109 | * [Using neon-animation](https://elements.polymer-project.org/guides/using-neon-animations)
110 | * [Polycasts - Slick web animations](https://www.youtube.com/watch?v=Lwvi1u4XXzc) from Rob Dodson
111 | * [Polycasts - Neon-animated-pages](https://www.youtube.com/watch?v=wMhq1o0DULM) from Rob Dodson
112 | 


--------------------------------------------------------------------------------
/docs/polymer-perf.md:
--------------------------------------------------------------------------------
  1 | ### Polymer Performance Recipe
  2 | 
  3 | In the following write up we are going to take a look at how to optimize the loading of Web Component enabled websites. The goal here is not to give you a copy and paste approach, but rather to give you the starting components and thought process with how to optimize your web app given your domain constraints.
  4 | 
  5 | Current native support for Web Components is limited but growing, with only Chrome and Opera having a “fully" implemented spec. Due to the limited support, using Polymer or any web components in production across more than just Chrome requires you to load a polyfill. As with any polyfill there is a performance tradeoff, in the run time performance, spec compliance, as well as the network cost overhead. Lets dive into a few approaches that you can use to conditionally load the polyfill only when it is required.
  6 | 
  7 | In your index.html file, create an HTML Import to load your elements bundle. If Web Components are supported, this element will start loading right away, otherwise it will begin loading as soon as the Web Components polyfills have been loaded and given a chance to scan the page.
  8 | 
  9 | Note the use of the `async` attribute on the `link` element. This will ensure that loading the bundle does not block rendering in any way. Also note the `link` element has been given the `id` "bundle," this can be used later to listen for its load event.
 10 | 
 11 | ```html
 12 | <link rel="import" id="bundle" href="/elements/elements.html" async>
 13 | ```
 14 | 
 15 | Next we need to detect if Web Components are supported by the browser. If it _does_ support them, then we can skip loading the polyfills entirely. Otherwise, we'll use JavaScript to asynchronously load the polyfills.
 16 | 
 17 | Over in GitHub land @geenlen has cooked up a nifty bit of code to feature detect Web Components support
 18 | 
 19 | ```js
 20 | var webComponentsSupported = ('registerElement' in document
 21 |   && 'import' in document.createElement('link')
 22 |   && 'content' in document.createElement('template'));
 23 | ```
 24 | 
 25 | ```js
 26 | if (!webComponentsSupported) {
 27 |   var script = document.createElement('script');
 28 |   script.onload = finishLazyLoading;
 29 |   script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
 30 |   document.head.appendChild(script);
 31 | } else {
 32 |   finishLazyLoading();
 33 | }
 34 | ```
 35 | 
 36 | This bit of code can be placed directly in [`app.js`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/scripts/app.js), right under the beginning of the IIFE.
 37 | 
 38 | So what is going on here, how does it work? The first thing that this method does is dynamically create a script tag, then assigns a callback when the resource loads, the code then sets the src of the script tag, and then injects the script tag into the head of our document. Once the tag is placed inside of our document, the network request will start and when the resource is fully downloaded the callback will be invoked.
 39 | 
 40 | Awesome! So now let’s move onto the logic around `finishLazyLoading`.
 41 | 
 42 | ```js
 43 | function finishLazyLoading() {
 44 | 
 45 |   var onImportLoaded = function() {
 46 |     console.log('Elements are upgraded!');
 47 |     // Kickoff your app logic here!
 48 |   };
 49 | 
 50 |   var link = document.querySelector('#bundle');
 51 | 
 52 |   if (link.import && link.import.readyState === 'complete') {
 53 |     onImportLoaded();
 54 |   } else {
 55 |     link.addEventListener('load', onImportLoaded);
 56 |   }
 57 | }
 58 | ```
 59 | 
 60 | `finishLazyLoading` checks to see if the import has finished loading and calls the `onImportLoaded` handler if it is. `onImportLoaded` is a good place to put your initial application logic because by this point you can be confident that all of your elements are ready. If the import hast not loaded, then we'll setup a listener for the load event of the `link` element and run `onImportLoaded` then.
 61 | 
 62 | As an alternative to having the `link` tag for your imports already in the page, you could choose to load them dynamically.
 63 | 
 64 | ```js
 65 | function loadElements(pathToBundle, callback) {
 66 |   var bundle = document.createElement('link');
 67 |   bundle.setAttribute('async', true);
 68 |   bundle.rel = 'import';
 69 |   bundle.onload = callback;
 70 |   bundle.href = pathToBundle;
 71 | 
 72 |   document.head.appendChild(bundle);
 73 | }
 74 | ```
 75 | 
 76 | The `loadElements` function uses a similar approach to the one we used to load our polyfills. Note that the user should pass in a callback which will execute once the bundle has finished loading.
 77 | 
 78 | For initial page load there is a slight performance tradeoff for going this route in browsers with Web Components support as it means the page must wait on JavaScript to execute before it can begin loading the elements.
 79 | 
 80 | However, this approach does open up the possibility for you to only have users download the elements that they need for specific pages in your app, and can be extremely useful for subsequent page loads. Consider for instance an application with an admin panel and a general app view. Given the fact that most users in our made up app do not go to the admin panel too often, there is no need for them to always incur the cost of downloading the admin suite of elements. Instead we will only have users download the "bundle" that they need depending on what page they navigate to.
 81 | 
 82 | For example with page.js your router could be structured as follows to optimize page load time, given a few assumptions about how users will be interacting with your app.
 83 | 
 84 | ```js
 85 | page.on('admin', function() {
 86 |   loadElementBundle('elements/admin.html', renderAdminPane);
 87 | });
 88 | ```
 89 | 
 90 | #### Further Thoughts
 91 | 
 92 | With Polymer, it is easy to fall into the trap of getting a flash of unstyled content, or a blank page while the polyfill and elements are downloading. The best way to avoid these pitfalls is to use a "loading" screen approach. The simplest of the loading approaches is to create a "splash" screen to display while your elements bundle is downloading. The splash screen can be anything from your logo on a colored background, to a full blown skeleton of what the page will look like once everything has loaded up.
 93 | 
 94 | In your index.html, place the markup for your splashscreen in an element with an `id` of "splash".
 95 | 
 96 | ```html
 97 | <div id="splash">
 98 |   <!-- splash screen markup -->
 99 | </div>
100 | ```
101 | 
102 | You can easily modify `onImportLoaded` to remove the splash screen once your bundle has loaded in.
103 | 
104 | ```js
105 | var onImportLoaded = function() {
106 |   var splash = document.getElementById('splash');
107 |   splash.remove();
108 | 
109 |   console.log('Elements are upgraded!');
110 |   // Kickoff your app logic here!
111 | };
112 | ```
113 | 
114 | Hopefully these approaches give you some ideas on how to make your app lightning fast.
115 | 
116 | We hope to explore further ideas including [application shells](https://github.com/ebidel/polymer-experiments/blob/master/polymersummit/fouc/appshell.html) and being smart about your first meaningful paint in the near future.
117 | 
118 | --------
119 | 
120 | Further reading
121 | 
122 | * [Fast Polymer app loading](https://gist.github.com/ebidel/1ba71473d687d0567bd3) from Eric Bidelman
123 | * [Polymer Perf Patterns](https://www.youtube.com/watch?v=Yr84DpNaMfk) from Eric Bidelman
124 | * [Polymer for the Performance-obsessed](https://aerotwist.com/blog/polymer-for-the-performance-obsessed/) from Paul Lewis
125 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "public": "deploy",
 3 |   "rewrites": [ {
 4 |     "source": "**",
 5 |     "destination": "/index.html"
 6 |   } ],
 7 |   "headers": [ {
 8 |     "source" : "**/*.@(css|html|js|json|txt|xml)",
 9 |     "headers" : [ {
10 |       "key" : "Cache-Control",
11 |       "value" : "max-age=315360000"
12 |     } ]
13 |     }, {
14 |     "source" : "**/*.@(gif|jpg|jpeg|png|svg|webp)",
15 |     "headers" : [ {
16 |       "key" : "Cache-Control",
17 |       "value" : "max-age=315360000"
18 |     } ]
19 |     }, {
20 |     "source" : "**/404.html",
21 |     "headers" : [ {
22 |       "key" : "Cache-Control",
23 |       "value" : "max-age=300"
24 |     } ]
25 |     }, {
26 |     "source" : "**/humans.txt",
27 |     "headers" : [ {
28 |       "key" : "Cache-Control",
29 |       "value" : "max-age=300"
30 |     } ]
31 |     }, {
32 |     "source" : "**/index.html",
33 |     "headers" : [ {
34 |       "key" : "Cache-Control",
35 |       "value" : "max-age=300"
36 |     } ]
37 |     }, {
38 |     "source" : "**/robots.txt",
39 |     "headers" : [ {
40 |       "key" : "Cache-Control",
41 |       "value" : "max-age=300"
42 |     } ]
43 |   } ]
44 | }
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "devDependencies": {
 4 |     "autoprefixer": "^6.0.3",
 5 |     "babel-preset-es2015": "^6.3.13",
 6 |     "browser-sync": "^2.7.7",
 7 |     "commonmark": "^0.24.0",
 8 |     "connect-history-api-fallback": "^1.1.0",
 9 |     "css-mqpacker": "^4.0.0",
10 |     "csswring": "^4.1.1",
11 |     "del": "^2.0.2",
12 |     "es6-promise": "^3.1.2",
13 |     "glob-all": "^3.0.1",
14 |     "gulp": "^3.8.5",
15 |     "gulp-babel": "^6.1.1",
16 |     "gulp-cache": "^0.4.0",
17 |     "gulp-changed": "^1.0.0",
18 |     "gulp-crisper": "1.0.0",
19 |     "gulp-download": "0.0.1",
20 |     "gulp-file": "^0.2.0",
21 |     "gulp-google-webfonts": "0.0.12",
22 |     "gulp-html-postcss": "^6.0.1",
23 |     "gulp-htmlmin": "^1.1.3",
24 |     "gulp-if": "^2.0.0",
25 |     "gulp-imagemin": "^2.2.1",
26 |     "gulp-load-plugins": "^1.1.0",
27 |     "gulp-minify-css": "^1.2.1",
28 |     "gulp-minify-html": "^1.0.2",
29 |     "gulp-nunjucks-html": "^2.0.0",
30 |     "gulp-plumber": "^1.0.1",
31 |     "gulp-postcss": "^6.0.0",
32 |     "gulp-rename": "^1.2.0",
33 |     "gulp-replace": "^0.5.4",
34 |     "gulp-rev-all": "^0.8.21",
35 |     "gulp-shell": "^0.5.2",
36 |     "gulp-size": "^2.0.0",
37 |     "gulp-sourcemaps": "^1.5.2",
38 |     "gulp-strip-css-comments": "^1.2.0",
39 |     "gulp-uglify": "^1.2.0",
40 |     "gulp-useref": "^3.0.5",
41 |     "gulp-vulcanize": "^6.0.0",
42 |     "merge": "^1.2.0",
43 |     "merge-stream": "^1.0.0",
44 |     "nunjucks-markdown": "^1.1.0",
45 |     "postcss-apply": "^0.1.0",
46 |     "postcss-bem-linter": "^2.3.3",
47 |     "postcss-custom-media": "^5.0.0",
48 |     "postcss-custom-properties": "^5.0.0",
49 |     "postcss-discard-empty": "^2.0.0",
50 |     "postcss-import": "^7.1.3",
51 |     "postcss-nesting": "^2.0.2",
52 |     "postcss-reporter": "^1.2.1",
53 |     "postcss-simple-vars": "^1.2.0",
54 |     "psi": "^2.0.2",
55 |     "require-dir": "^0.3.0",
56 |     "require-uncached": "^1.0.2",
57 |     "run-sequence": "^1.0.2",
58 |     "stylelint": "^4.3.3",
59 |     "stylelint-config-standard": "^3.0.0",
60 |     "vulcanize": ">= 1.4.2",
61 |     "web-component-tester": "^4.0.0"
62 |   },
63 |   "scripts": {
64 |     "deploy:dev": "gulp deploy:dev",
65 |     "deploy:prod": "gulp deploy:prod",
66 |     "deploy:promote": "gulp deploy:promote",
67 |     "deploy:stag": "gulp deploy:stag",
68 |     "check:ver": "ncu && ncu -m bower",
69 |     "init": "gulp init",
70 |     "install:all": "npm install && bower install",
71 |     "install:complete": "sudo npm install -g npm && sudo npm install -g bower gulp && npm install && bower install",
72 |     "lint": "gulp lint",
73 |     "serve": "gulp serve",
74 |     "serve:dist": "gulp serve:dist",
75 |     "serve:gae": "gulp serve:gae",
76 |     "test": "gulp test:local",
77 |     "update:all": "npm update && bower update",
78 |     "update:ver": "ncu -u && ncu -um bower"
79 |   },
80 |   "engines": {
81 |     "node": ">=4.0"
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "extends": "stylelint-config-standard",
 3 |   "rules": {
 4 |     "block-closing-brace-newline-after": null,
 5 |     "block-closing-brace-newline-before": null,
 6 |     "function-url-quotes": "single",
 7 |     "function-whitespace-after": null,
 8 |     "string-quotes": "single"
 9 |   }
10 | };
11 | 


--------------------------------------------------------------------------------
/tasks/clean-dist.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Clean dist directory
 4 | module.exports = function (del) { return function (cb) {
 5 |   return del([
 6 |     'dist/bower_components/**/*',
 7 |     '!dist/bower_components/webcomponentsjs',
 8 |     '!dist/bower_components/webcomponentsjs/webcomponents-lite.min.js',
 9 |     '!dist/bower_components/platinum-sw',
10 |     '!dist/bower_components/platinum-sw/service-worker.js',
11 |     '!dist/bower_components/platinum-sw/bootstrap/**',
12 |     '!dist/bower_components/promise-polyfill',
13 |     '!dist/bower_components/promise-polyfill/Promise.js',
14 |     '!dist/bower_components/promise-polyfill/Promise-Statics.js',
15 |     '!dist/bower_components/sw-toolbox',
16 |     '!dist/bower_components/sw-toolbox/companion.js',
17 |     '!dist/bower_components/sw-toolbox/sw-toolbox.js',
18 |     'dist/elements/*',
19 |     '!dist/elements/*-bundle.{html,js}',
20 |     'dist/scripts/app.js',
21 |     'dist/scripts/routing.js',
22 |     'dist/scripts/**/*.map',
23 |     'dist/themes/*/*.{html,map}',
24 |     'dist/themes/*/fonts/fonts.css'
25 |   ], cb);
26 | };};
27 | 


--------------------------------------------------------------------------------
/tasks/copy-hosting-config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Copy hosting configuration
 4 | module.exports = function ($, config, gulp) { return function () {
 5 |   var configFile = '';
 6 | 
 7 |   if (config.deploy.hosting === 'gae') {
 8 |     configFile = 'app.yaml';
 9 |   }
10 | 
11 |   return gulp.src(configFile)
12 |     .pipe(gulp.dest('dist'));
13 | };};
14 | 


--------------------------------------------------------------------------------
/tasks/deploy-firebase.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Deploy to Firebase
 4 | // Firebase requires Firebase Command Line Tools to be installed and configured.
 5 | // For info on tool: https://www.firebase.com/docs/hosting/command-line-tool.html
 6 | module.exports = function ($, config, gulp, environment) {
 7 |   var subdomain = null;
 8 | 
 9 |   if (environment === 'promote') {
10 |     console.log('Firebase don\'t support promote');
11 |     return;
12 |   } else {
13 |     subdomain = config.deploy.firebase.env[environment];
14 |   }
15 | 
16 |   return gulp.src('').pipe($.shell('firebase deploy -f ' + subdomain));
17 | };
18 | 


--------------------------------------------------------------------------------
/tasks/deploy-gae.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Deploy to Google App Engine
 4 | // GAE requires Google Cloud SDK to be installed and configured.
 5 | // For info on SDK: https://cloud.google.com/sdk/
 6 | module.exports = function ($, config, gulp, environment) {
 7 |   var projectID = null;
 8 | 
 9 |   if (environment === 'promote') {
10 |     console.log('Google App Engine don\'t support promote');
11 |     return;
12 |   } else {
13 |     projectID = config.deploy.gae.env[environment];
14 |   }
15 | 
16 |   var flags = ' ';
17 |   if (config.deploy.gae.promote) {
18 |     flags += '--promote';
19 |   } else {
20 |     flags += '--no-promote';
21 |   }
22 | 
23 |   if (config.appVersion) {
24 |     flags += ' --version ' + config.appVersion.replace(/\./g, '-');
25 |   }
26 | 
27 |   var deployCmd = 'gcloud preview app deploy deploy/app.yaml -q --project ' + projectID + flags;
28 | 
29 |   return gulp.src('').pipe($.shell(deployCmd));
30 | };
31 | 


--------------------------------------------------------------------------------
/tasks/deploy-gcs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Deploy to Google Cloud Storage
 4 | // GCS requires Google Cloud SDK with gsutil to be installed and configured.
 5 | // For info on SDK: https://cloud.google.com/sdk/
 6 | module.exports = function ($, config, gulp, environment) {
 7 |   var acl = null;
 8 |   var cacheTTL = null;
 9 |   var cmds = null;
10 |   var src = null;
11 |   var dest = null;
12 | 
13 |   if (environment === 'promote') {
14 |     // Set promote (essentially prod) specific vars here.
15 |     acl = config.deploy.gcs.acl.production;
16 |     cacheTTL = config.deploy.gcs.cacheTTL.production;
17 |     src = 'gs://' + config.deploy.gcs.env.staging + '/*';
18 |     dest = 'gs://' + config.deploy.gcs.env.production;
19 |   } else {
20 |     acl = config.deploy.gcs.acl[environment];
21 |     cacheTTL = config.deploy.gcs.cacheTTL[environment];
22 |     src = 'deploy/*';
23 |     dest = 'gs://' + config.deploy.gcs.env[environment];
24 |   }
25 | 
26 |   var infoMsg = 'Deploy ' + environment + ' to GCS (' + dest + ') from ' + src;
27 |   process.stdout.write(infoMsg + '\n');
28 | 
29 |   // Build gsutil command
30 |   var cacheControl = '-h "Cache-Control:public,max-age=' + cacheTTL + '"';
31 |   var deployCmd = 'gsutil -m ' + cacheControl +
32 |     ' cp -r -a ' + acl + ' -z css,html,js,json,svg,txt ' + src + ' ' + dest;
33 |   var removeCmd = 'gsutil -m rm ' + dest + '/**';
34 |   cmds = [removeCmd, deployCmd];
35 | 
36 |   // Set cache for files without revision hash
37 |   if (environment === 'production') {
38 |     cacheTTL = config.deploy.gcs.cacheTTL.productionNoCache;
39 |     cacheControl = '-h "Cache-Control:public,max-age=' + cacheTTL + '"';
40 |     var cacheCmd = 'gsutil -m setmeta ' + cacheControl + ' ' +
41 |       dest + '/404.html ' + dest + '/humans.txt ' + dest + '/index.html ' +
42 |       dest + '/robots.txt';
43 |     cmds = [removeCmd, deployCmd, cacheCmd];
44 |   }
45 | 
46 |   return gulp.src('').pipe($.shell(cmds, {ignoreErrors: true}));
47 | };
48 | 


--------------------------------------------------------------------------------
/tasks/deploy-ssh.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Deploy to Firebase
 4 | // Firebase requires Firebase Command Line Tools to be installed and configured.
 5 | // For info on tool: https://www.firebase.com/docs/hosting/command-line-tool.html
 6 | module.exports = function ($, config, gulp, environment) {
 7 |   var remoteDir = null,
 8 |       remoteSymbolicLink = null,
 9 |       appVersion = config.appVersion || new Date().toISOString();
10 | 
11 |   if (environment === 'promote') {
12 |     console.log('SSH don\'t support promote');
13 |     return;
14 |   } else {
15 |     remoteDir = config.deploy.ssh.env[environment] + '.' + appVersion;
16 |     remoteSymbolicLink = config.deploy.ssh.env[environment];
17 |   }
18 | 
19 |   var port = config.deploy.ssh.port;  
20 |   var remoteServer = config.deploy.ssh.user + '@' + config.deploy.ssh.host;
21 | 
22 |   return gulp.src('')
23 |     .pipe($.shell('ssh -p ' + port + ' ' + remoteServer + ' mkdir -p ' + remoteDir, {verbose: true}))
24 |     .pipe($.shell('scp -rP ' + port + ' deploy/* ' + remoteServer + ':' + remoteDir, {verbose: true}))
25 |     .pipe($.shell('ssh -p ' + port + ' ' + remoteServer + ' "rm -f ' + remoteSymbolicLink +
26 |                   ' && ln -s ' + remoteDir + ' ' + remoteSymbolicLink + '"', {verbose: true}));
27 | };
28 | 


--------------------------------------------------------------------------------
/tasks/deploy.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Deploy function
 4 | module.exports = function ($, config, gulp, environment) { return function () {
 5 |   if (config.deploy.hosting === 'firebase') {
 6 |     return require('./deploy-firebase')($, config, gulp, environment);
 7 | 
 8 |   } else if (config.deploy.hosting === 'gae') {
 9 |     return require('./deploy-gae')($, config, gulp, environment);
10 | 
11 |   } else if (config.deploy.hosting === 'gcs') {
12 |     return require('./deploy-gcs')($, config, gulp, environment);
13 | 
14 |   } else if (config.deploy.hosting === 'ssh') {
15 |     return require('./deploy-ssh')($, config, gulp, environment);
16 |   }
17 | };};
18 | 


--------------------------------------------------------------------------------
/tasks/download-analytics.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Download newest script analytics.js from Google, because link
 4 | // https://www.google-analytics.com/analytics.js has set only 2 hours cache
 5 | module.exports = function ($, gulp) { return function () {
 6 |   return $.download('https://www.google-analytics.com/analytics.js')
 7 |     .pipe(gulp.dest('app/scripts'))
 8 |     .pipe($.size({title: 'Copy downloaded analytics.js file to app/scripts dir:'}));
 9 | };};
10 | 


--------------------------------------------------------------------------------
/tasks/download-fonts.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Download Google Fonts for load page performance and offline using
 4 | module.exports = function ($, config, gulp) { return function () {
 5 |   return gulp.src('./app/themes/' + config.appTheme + '/fonts.list')
 6 |     .pipe($.googleWebfonts())
 7 |     .pipe(gulp.dest('./app/themes/' + config.appTheme + '/fonts'))
 8 |     .pipe($.if('*.woff',
 9 |       $.size({title: 'Copy downloaded WOFF fonts to app/themes/' +
10 |         config.appTheme + '/fonts dir:'})
11 |     ))
12 |     .pipe($.if('*.woff2',
13 |       $.size({title: 'Copy downloaded WOFF2 fonts to app/themes/' +
14 |         config.appTheme + '/fonts dir:'})
15 |     ));
16 | };};
17 | 


--------------------------------------------------------------------------------
/tasks/ensure-files.js:
--------------------------------------------------------------------------------
 1 | /**
 2 | @license
 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | var fs = require('fs');
11 | 
12 | /**
13 |  * @param {Array<string>} files
14 |  * @param {Function} cb
15 |  */
16 | 
17 | function ensureFiles(files, cb) {
18 |   var missingFiles = files.reduce(function(prev, filePath) {
19 |     var fileFound = false;
20 | 
21 |     try {
22 |       fileFound = fs.statSync(filePath).isFile();
23 |     } catch (e) { }
24 | 
25 |     if (!fileFound) {
26 |       prev.push(filePath + ' Not Found');
27 |     }
28 | 
29 |     return prev;
30 |   }, []);
31 | 
32 |   if (missingFiles.length) {
33 |     var err = new Error('Missing Required Files\n' + missingFiles.join('\n'));
34 |   }
35 | 
36 |   if (cb) {
37 |     cb(err);
38 |   } else if (err) {
39 |     throw err;
40 |   }
41 | }
42 | 
43 | module.exports = ensureFiles;
44 | 


--------------------------------------------------------------------------------
/tasks/fix-paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Fix paths for revision task
 4 | module.exports = function ($, gulp, merge, order) { return function () {
 5 |   var baseBundle, swToolboxSetup;
 6 | 
 7 |   if (order === 'before') {
 8 |     baseBundle = gulp.src('dist/elements/base-bundle.js')
 9 |       .pipe($.replace('("bootstrap/', '("../bower_components/platinum-sw/bootstrap/'))
10 |       .pipe(gulp.dest('dist/elements'));
11 | 
12 |     swToolboxSetup = gulp.src('dist/bower_components/platinum-sw/bootstrap/sw-toolbox-setup.js')
13 |       .pipe($.replace('"../sw-toolbox/sw-toolbox.js', '"../../sw-toolbox/sw-toolbox.js'))
14 |       .pipe(gulp.dest('dist/bower_components/platinum-sw/bootstrap'));
15 | 
16 |   } else if (order === 'after') {
17 |     baseBundle = gulp.src('deploy/elements/base-bundle.*.js')
18 |       .pipe($.replace('("../bower_components/platinum-sw/bootstrap/', '("bootstrap/'))
19 |       .pipe(gulp.dest('deploy/elements'));
20 | 
21 |     swToolboxSetup = gulp.src('deploy/bower_components/platinum-sw/bootstrap/sw-toolbox-setup.*.js')
22 |       .pipe($.replace('"../../sw-toolbox/sw-toolbox', '"../sw-toolbox/sw-toolbox'))
23 |       .pipe(gulp.dest('deploy/bower_components/platinum-sw/bootstrap'));
24 |   }
25 | 
26 |   return merge(baseBundle, swToolboxSetup);
27 | };};
28 | 


--------------------------------------------------------------------------------
/tasks/js-babel.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Transpile all JS from ES2015 (ES6) to ES5
 4 | module.exports = function ($, gulp) { return function () {
 5 |   return gulp.src([
 6 |       'app/{scripts,elements}/**/*.js',
 7 |       '!app/scripts/analytics.js'
 8 |     ])
 9 |     .pipe($.plumber())
10 |     .pipe($.sourcemaps.init())
11 |     .pipe($.if('*.html', $.crisper())) // Extract JS from .html files
12 |     .pipe($.if('*.js', $.babel({
13 |       presets: ['es2015']
14 |     })))
15 |     .pipe($.sourcemaps.write('.'))
16 |     .pipe(gulp.dest('.tmp'))
17 |     .pipe(gulp.dest('dist'));
18 | };};
19 | 


--------------------------------------------------------------------------------
/tasks/lint.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Lint CSS and JavaScript
 4 | module.exports = function ($, gulp, merge) { return function () {
 5 |   var stylelintConfig = require('../stylelint.config');
 6 |   var postcssPlugins = [
 7 |     // Lint CSS
 8 |     require('stylelint')(stylelintConfig),
 9 |     // Lint SUIT CSS methodology
10 |     //require('postcss-bem-linter')(),
11 |     require('postcss-reporter')({
12 |       clearMessages: true
13 |     })
14 |   ];
15 | 
16 |   var css = gulp.src([
17 |       'app/elements/**/*.css',
18 |       'app/themes/**/*.css',
19 |       '!app/themes/*/fonts/fonts.css'
20 |     ])
21 |     .pipe($.plumber({
22 |       handleError: function (error) {
23 |         console.log(error);
24 |         this.emit('end');
25 |       }
26 |     }))
27 |     .pipe($.postcss(postcssPlugins));
28 | 
29 |   return merge(css);
30 | };};
31 | 


--------------------------------------------------------------------------------
/tasks/minify-dist.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Minify CSS and JavaScript in dist directory
 4 | module.exports = function ($, gulp, merge) { return function () {
 5 |   var postcssCssWring = require('csswring');
 6 |   var postcssReporter = require('postcss-reporter');
 7 | 
 8 |   var index = gulp.src('dist/index.html')
 9 |     .pipe($.htmlPostcss([
10 |       // Minify CSS
11 |       postcssCssWring(),
12 |       postcssReporter({
13 |         clearMessages: true
14 |       })
15 |     ]))
16 |     .pipe(gulp.dest('dist'));
17 | 
18 |   var platinumSw = gulp.src('dist/bower_components/platinum-sw/**/*.js')
19 |     .pipe($.uglify())
20 |     .pipe(gulp.dest('dist/bower_components/platinum-sw'));
21 | 
22 |   var promisePolyfill = gulp.src('dist/bower_components/promise-polyfill/*.js')
23 |     .pipe($.uglify())
24 |     .pipe(gulp.dest('dist/bower_components/promise-polyfill'));
25 | 
26 |   var swImport = gulp.src('dist/sw-import.js')
27 |     .pipe($.uglify())
28 |     .pipe(gulp.dest('dist'));
29 | 
30 |   var swToolbox = gulp.src('dist/bower_components/sw-toolbox/*.js')
31 |     .pipe($.uglify())
32 |     .pipe(gulp.dest('dist/bower_components/sw-toolbox'));
33 | 
34 |   return merge(index, platinumSw, promisePolyfill, swImport, swToolbox);
35 | };};
36 | 


--------------------------------------------------------------------------------
/tasks/pagespeed.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Run PageSpeed Insights
 4 | module.exports = function (config) { return function () {
 5 |   return require('psi').output(config.pageSpeed.site, {
 6 |     // key: config.pageSpeed.key,
 7 |     nokey: config.pageSpeed.nokey,
 8 |     strategy: config.pageSpeed.strategy
 9 |   }, function (err) {
10 |     if (err) {
11 |       console.log(err);
12 |     }
13 |   });
14 | };};
15 | 


--------------------------------------------------------------------------------
/tasks/revision.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Static asset revisioning by appending content hash to filenames
 4 | module.exports = function ($, gulp) { return function () {
 5 |   // Files without revision hash
 6 |   var revAll = new $.revAll({ dontGlobal: [
 7 |     /^\/404.html/g,
 8 |     /^\/google.*.html/g,
 9 |     /^\/humans.txt/g,
10 |     /^\/robots.txt/g
11 |   // Only revision files in this file content
12 |   ], dontRenameFile: [
13 |     /^\/app.yaml/g,
14 |     /^\/cache-config.json/g,
15 |     /^\/index.html/g,
16 |     /^\/sw-import.js/g
17 |   ], dontUpdateReference: [
18 |     /^\/app.yaml/g,
19 |     /^\/cache-config.json/g,
20 |     /^\/index.html/g,
21 |     /^\/sw-import.js/g
22 |   ]});
23 | 
24 |   return gulp.src('dist/**')
25 |     .pipe(revAll.revision())
26 |     .pipe(gulp.dest('deploy'))
27 |     .pipe($.size({title: 'deploy'}));
28 | };};
29 | 


--------------------------------------------------------------------------------
/tasks/serve-gae.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | // Build and serve the output from the dist build with GAE tool
4 | module.exports = function ($, gulp) { return function () {
5 |   return gulp.src('app.yaml')
6 |     .pipe(gulp.dest('dist'))
7 |     .pipe($.shell('gcloud preview app run dist/app.yaml'));
8 | };};
9 | 


--------------------------------------------------------------------------------
/tasks/styles-postcss.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Transform styles with PostCSS
  4 | module.exports = function ($, config, gulp, merge) { return function () {
  5 |   var variables = require('../app/themes/' + config.appTheme + '/variables');
  6 |   var postcssApply = require('postcss-apply');
  7 |   var postcssAutoprefixer = require('autoprefixer');
  8 |   var postcssCssMqpacker = require('css-mqpacker');
  9 |   var postcssCustomMedia = require('postcss-custom-media');
 10 |   var postcssCustomProperties = require('postcss-custom-properties');
 11 |   var postcssDiscardEmpty = require('postcss-discard-empty');
 12 |   var postcssImport = require('postcss-import');
 13 |   var postcssNesting = require('postcss-nesting');
 14 |   var postcssReporter = require('postcss-reporter');
 15 |   var postcssSimpleVars = require('postcss-simple-vars');
 16 |   var postcssPlugins = [
 17 |     // Transform @import rules by inlining content
 18 |     postcssImport({
 19 |       path: [
 20 |         'app/elements',
 21 |         'app/themes/' + config.appTheme
 22 |       ]
 23 |     }),
 24 |     // Sass-like variables
 25 |     postcssSimpleVars({ variables: variables.global }),
 26 |     // Transform W3C CSS Custom Media Queries
 27 |     postcssCustomMedia(),
 28 |     // Unwrap nested rules, following CSS Nesting Module Level 3 specification
 29 |     postcssNesting(),
 30 |     // Pack same CSS media query rules into one media query rule
 31 |     postcssCssMqpacker(),
 32 |     // Add vendor prefixes to CSS rules using values from "Can I Use"
 33 |     postcssAutoprefixer(config.autoprefixer),
 34 |     // Remove empty rules, selectors & media queries
 35 |     postcssDiscardEmpty(),
 36 |     postcssReporter({
 37 |       clearMessages: true
 38 |     })
 39 |   ];
 40 | 
 41 |   var theme = gulp.src([
 42 |       'app/themes/' + config.appTheme + '/*.html',
 43 |       '!app/themes/' + config.appTheme + '/icons.html'
 44 |     ])
 45 |     .pipe($.plumber({
 46 |       handleError: function (error) {
 47 |         console.log(error);
 48 |         // For gulp.watch
 49 |         // http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
 50 |         this.emit('end');
 51 |       }
 52 |     }))
 53 |     .pipe($.sourcemaps.init())
 54 |     .pipe($.htmlPostcss(postcssPlugins))
 55 |     .pipe($.sourcemaps.write('.'))
 56 |     .pipe(gulp.dest('.tmp/themes/' + config.appTheme))
 57 |     .pipe($.size({title: 'Copy transformed styles to .tmp/themes dir:'}))
 58 |     .pipe(gulp.dest('dist/themes/' + config.appTheme))
 59 |     .pipe($.size({title: 'Copy transformed styles to dist/themes dir:'}));
 60 | 
 61 |   var elements = gulp.src([
 62 |       '.tmp/elements/**/*.html'
 63 |     ])
 64 |     .pipe($.plumber({
 65 |       handleError: function (error) {
 66 |         console.log(error);
 67 |         // For gulp.watch
 68 |         // http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
 69 |         this.emit('end');
 70 |       }
 71 |     }))
 72 |     .pipe($.sourcemaps.init())
 73 |     .pipe($.htmlPostcss(postcssPlugins))
 74 |     .pipe($.sourcemaps.write('.'))
 75 |     .pipe(gulp.dest('.tmp/elements'))
 76 |     .pipe($.size({title: 'Copy transformed styles to .tmp/elements dir:'}))
 77 |     .pipe(gulp.dest('dist/elements'))
 78 |     .pipe($.size({title: 'Copy transformed styles to dist/elements dir:'}));
 79 | 
 80 |     var index = gulp.src([
 81 |         '.tmp/index.html'
 82 |       ])
 83 |       .pipe($.plumber({
 84 |         handleError: function (error) {
 85 |           console.log(error);
 86 |           // For gulp.watch
 87 |           // http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
 88 |           this.emit('end');
 89 |         }
 90 |       }))
 91 |       .pipe($.sourcemaps.init())
 92 |       .pipe($.htmlPostcss([
 93 |         // Transform @import rules by inlining content
 94 |         postcssImport({
 95 |           path: [
 96 |             'app/themes/' + config.appTheme
 97 |           ]
 98 |         }),
 99 |         // Sass-like variables
100 |         postcssSimpleVars({ variables: variables.global }),
101 |         // Plugin enabling custom properties sets references - Polymer mixins
102 |         postcssApply(),
103 |         // Transform W3C CSS Custom Properties for variables syntax to more compatible CSS
104 |         postcssCustomProperties(),
105 |         // Transform W3C CSS Custom Media Queries
106 |         postcssCustomMedia(),
107 |         // Unwrap nested rules, following CSS Nesting Module Level 3 specification
108 |         postcssNesting(),
109 |         // Pack same CSS media query rules into one media query rule
110 |         postcssCssMqpacker(),
111 |         // Add vendor prefixes to CSS rules using values from "Can I Use"
112 |         postcssAutoprefixer(config.autoprefixer),
113 |         // Remove empty rules, selectors & media queries
114 |         postcssDiscardEmpty(),
115 |         postcssReporter({
116 |           clearMessages: true
117 |         })
118 |       ]))
119 |       .pipe($.sourcemaps.write('.'))
120 |       .pipe(gulp.dest('.tmp'))
121 |       .pipe($.size({title: 'Copy transformed styles to .tmp dir:'}))
122 |       .pipe(gulp.dest('dist'))
123 |       .pipe($.size({title: 'Copy transformed styles to dist dir:'}));
124 | 
125 |   return merge(theme, elements, index);
126 | };};
127 | 


--------------------------------------------------------------------------------
/tasks/views-nunjucks.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Compile HTML files with Nunjucks templating engine
 4 | module.exports = function ($, config, gulp, requireUncached) { return function () {
 5 |   var merge = require('merge');
 6 |   var metadata = {
 7 |     config: merge(requireUncached('../app/metadata/config'), config),
 8 |     theme: requireUncached('../app/themes/' + config.appTheme + '/variables')
 9 |   };
10 | 
11 |   function markdownRender(markdown) {
12 |     var cm = require('commonmark');
13 |     var reader = new cm.Parser();
14 |     var writer = new cm.HtmlRenderer();
15 |     var parsed = reader.parse(markdown);
16 |     return writer.render(parsed);
17 |   }
18 | 
19 |   return gulp.src([
20 |       'app/**/*.html',
21 |       '!app/bower_components/**',
22 |       '!app/test/**',
23 |       '!app/themes/**',
24 |       '!app/views/**'
25 |     ])
26 |     .pipe($.plumber({
27 |       handleError: function (error) {
28 |         console.log(error);
29 |         // For gulp.watch
30 |         // http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/
31 |         this.emit('end');
32 |       }
33 |     }))
34 |     .pipe($.nunjucksHtml({
35 |       locals: merge(metadata, requireUncached('../app/metadata/general')),
36 |       searchPaths: ['app/content', 'app/elements', 'app/views'],
37 |       tags: {
38 |         variableStart: '{$',
39 |         variableEnd: '$}'
40 |       },
41 |       setUp: function(env) {
42 |         require('nunjucks-markdown').register(env, markdownRender);
43 |         return env;
44 |       }
45 |     }))
46 |     .pipe(gulp.dest('.tmp'));
47 | };};
48 | 


--------------------------------------------------------------------------------
/travis-runner.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -e
 2 | set -o pipefail
 3 | 
 4 | if [ "$TRAVIS_BRANCH" = "master" ] && [ "$TRAVIS_PULL_REQUEST" = "false" ]  && [ "$TRAVIS_NODE_VERSION" = "5.1" ]
 5 | then
 6 |   git config --global user.email "samccone@gmail.com"
 7 |   git config --global user.name "auto deployer"
 8 | 
 9 |   # Stamp index.html with the date and time of PSK's deploying
10 |   date_value=`date`
11 |   sed -i.tmp1 "s/This is another card./This is another card. PSK Deployed on: $date_value/" app/index.html
12 | 
13 |   deploy_ghpages () {
14 |     # Deploying to GitHub Pages! (http://polymerelements.github.io/polymer-starter-kit)
15 |     echo Deploying to GitHub Pages
16 |     sed -i.tmp "s/\/\/ app.baseUrl = '\/polymer-starter-kit/app.baseUrl = '\/polymer-starter-kit/" app/scripts/app.js
17 |     sed -i.tmp2 "s/<\/head>/\  \<script>'https:'!==window.location.protocol\&\&(window.location.protocol='https')<\/script>&/g" app/index.html
18 |     gulp build-deploy-gh-pages
19 |     # Undoing Changes to PSK for GitHub Pages
20 |     cp app/scripts/app.js.tmp app/scripts/app.js
21 |     rm app/scripts/app.js.tmp
22 |     cp app/index.html.tmp2 app/index.html
23 |     rm app/index.html.tmp2
24 |   }
25 | 
26 |   deploy_firebase () {
27 |     # Deploying to Firebase! (https://polymer-starter-kit.firebaseapp.com)
28 |     echo Deploying to Firebase
29 |     # Making Changes to PSK for Firebase
30 |     sed -i.tmp 's/<!-- Chrome for Android theme color -->/<base href="\/">\'$'\n<!-- Chrome for Android theme color -->/g' app/index.html
31 |     sed -i.tmp "s/hashbang: true/hashbang: false/" app/elements/routing.html
32 |     cp docs/firebase.json firebase.json
33 |     # Starting Build Process for Firebase Changes
34 |     gulp
35 |     # Starting Deploy Process to Firebaseapp.com Server -- polymer-starter-kit.firebaseapp.com
36 |     firebase deploy --token "$FIREBASE_TOKEN" -m "Auto Deployed by Travis CI"
37 |     # Undoing Changes to PSK for Firebase
38 |     cp app/index.html.tmp app/index.html
39 |     cp app/elements/routing.html.tmp app/elements/routing.html
40 |     rm app/elements/routing.html.tmp
41 |     rm app/index.html.tmp
42 |     rm firebase.json
43 |   }
44 | 
45 |   deploy_ghpages
46 |   deploy_firebase
47 | 
48 |   # Revert to orginal index.html and delete temp file
49 |   cp app/index.html.tmp1 app/index.html
50 |   rm app/index.html.tmp1
51 | elif [ "$TRAVIS_BRANCH" = "master" ] && [ "$TRAVIS_PULL_REQUEST" = "false" ]  && [ "$TRAVIS_NODE_VERSION" != "5.1" ]
52 | then
53 |   echo "Do Nothing, only deploy with Node 5.1"
54 | else
55 |   npm test
56 | fi
57 | 


--------------------------------------------------------------------------------
/wct.conf.js:
--------------------------------------------------------------------------------
 1 | /**
 2 | @license
 3 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | var path = require('path');
11 | 
12 | var ret = {
13 |   'suites': ['app/test'],
14 |   'webserver': {
15 |     'pathMappings': []
16 |   }
17 | };
18 | 
19 | var mapping = {};
20 | var rootPath = (__dirname).split(path.sep).slice(-1)[0];
21 | 
22 | mapping['/components/' + rootPath  +
23 | '/app/bower_components'] = 'bower_components';
24 | 
25 | ret.webserver.pathMappings.push(mapping);
26 | 
27 | module.exports = ret;
28 | 


--------------------------------------------------------------------------------