WebCompDev / COMPONENTS

Browse Code »

Commit 07d13c9c7da42659f5ceab5081d186d8447a7ed0

Authored by isisadmin 2015-11-20 14:52:39 +0100

1 parent 707a1508

polymer catalog

Inline Side-by-side

Showing 86 changed files with 7943 additions and 0 deletions

bower_components/polymer-element-catalog/.firebaserc.enc 0 → 100644

View file @07d13c9

No preview for this file type

bower_components/polymer-element-catalog/.gitignore 0 → 100644

View file @07d13c9

	1	+.tmp
	2	+node_modules
	3	+bower_components
	4	+dist
	5	+npm-debug.log
	6	+.divshot-cache
...	...

bower_components/polymer-element-catalog/.travis.yml 0 → 100644

View file @07d13c9

	1	+language: node_js
	2	+sudo: false
	3	+node_js:
	4	+- 0.12
	5	+before_install:
	6	+- openssl aes-256-cbc -K $encrypted_430815991462_key -iv $encrypted_430815991462_iv
	7	+ -in .firebaserc.enc -out $HOME/.firebaserc -d
	8	+install:
	9	+- npm install
	10	+- "./node_modules/.bin/bower update"
	11	+script: npm run build
	12	+cache:
	13	+ directories:
	14	+ - node_modules
	15	+ - bower_components
	16	+after_success:
	17	+- "./scripts/travis_deploy"
	18	+notifications:
	19	+ slack: polymer:j3IJDjBbXxqzuGRCIDYJ7tIA
...	...

bower_components/polymer-element-catalog/LICENSE.txt 0 → 100644

View file @07d13c9

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

bower_components/polymer-element-catalog/README.md 0 → 100644

View file @07d13c9

	1	+# Polymer Element Catalog
	2	+
	3	+## Getting Started
	4	+
	5	+To work on the Polymer Elements Catalog, clone the repository.
	6	+
	7	+To install dependencies:
	8	+
	9	+ npm run deps
	10	+
	11	+To start a local development server:
	12	+
	13	+ npm run serve
	14	+
	15	+To start a local development server with `fixtures` turned on:
	16	+
	17	+ FIXTURES=true npm run serve
	18	+
	19	+To prepare the repo for publication:
	20	+
	21	+ npm run build
	22	+
	23	+Note: Make sure that you're running chrome 42 or later!
	24	+
	25	+### Fixtures
	26	+
	27	+While parts of the system are still in flux, it will be necessary to have stubbed
	28	+data and other bits to be able to work against. Anything in the `fixtures`
	29	+directory will be available when running a development server. By the time
	30	+the catalog ships, the `fixtures` directory should be empty.
	31	+
	32	+## Managing Catalog Data
	33	+
	34	+Data for the catalog is compiled by intelligently composing together information
	35	+from multiple sources:
	36	+
	37	+1. The `catalog.json` file in this repository
	38	+2. The `bower.json` for each element package and individual element
	39	+3. Metadata parsed directly elements' source using [hydrolysis](https://github.com/PolymerLabs/hydrolysis)
	40	+4. Other files in package and element repositories, such as guide markdown files
	41	+
	42	+Each of these inputs is combined and compiled into a static format easily loaded
	43	+by the catalog application. Outputs of the catalog compilation process include:
	44	+
	45	+1. A `/data/catalog.json` file heavily annotated with parsed metadata
	46	+2. Pre-parsed element documentation in `/data/docs`
	47	+3. The compiled HTML output of guide markdown files in `/data/guides`
	48	+
	49	+### How `catalog.json` is Created
	50	+
	51	+The final `catalog.json` file can be thought of as the repo's initial file
	52	+decorated substantially with metadata. For instance, a package in the initial
	53	+file:
	54	+
	55	+```json
	56	+{
	57	+ "packages": [
	58	+ {"title":"Iron Elements", "name":"iron-elements"}
	59	+ ]
	60	+}
	61	+```
	62	+
	63	+Gets decorated with metadata parsed from its' `bower.json`:
	64	+
	65	+```json
	66	+{
	67	+ "packages": [
	68	+ {
	69	+ "title":"Iron Elements",
	70	+ "name":"iron-elements",
	71	+ "description":"Polymer core elements",
	72	+ "version":"1.0.0",
	73	+ "tags":["utility","scaffolding","user-input"]
	74	+ }
	75	+ ]
	76	+}
	77	+```
	78	+
	79	+This decoration occurs in steps and can be considered a series of merges.
	80	+
	81	+### Packages
	82	+
	83	+Each set of elements (henceforth "package") is responsible for maintaining its
	84	+own documentation according to the conventions established elsewhere in this
	85	+document. Each package is represented in `catalog.json` as an entry in an array.
	86	+This array corresponds to the order in which packages are presented in nav
	87	+contexts in the element catalog. Each package has the following associated data:
	88	+
	89	+* name: the corresponding package name from `bower.json`
	90	+* title: the human-friendly name of the package for nav display
	91	+
	92	+Each named package should be declared as a dependency in the `bower.json` for
	93	+this repository. Additionally, each package's version number should be explicit,
	94	+as the version declared in `bower.json` is used as display text in the catalog.
	95	+
	96	+```js
	97	+{
	98	+ // correct example
	99	+ "iron-elements": "PolymerElements/iron-elements#1.0.0"
	100	+ // incorrect example
	101	+ "paper-elements": "PolymerElements/paper-elements#^1.0"
	102	+}
	103	+```
	104	+
	105	+By maintaining strict versioning in the catalog, updating a package's data
	106	+becomes as easy as a pull request to `bower.json`.
	107	+
	108	+### Package Metadata
	109	+
	110	+As much as possible, the element catalog uses existing conventions from systems
	111	+such as Bower as a repository for metadata.
	112	+
	113	+#### bower.json
	114	+
	115	+The `bower.json` for a package should contain a `dependencies` entry for each of
	116	+its child elements. A declared dependency will be considered a child element of
	117	+the package if and only if its name is identical to the package name before the
	118	+first dash. As an example, if the package is `iron-elements`, `iron-ajax` would
	119	+be considered a child but `polymer` would not.
	120	+
	121	+The element catalog uses the following information from `bower.json`:
	122	+
	123	+* name: The package name should correspond to a `packages` entry in the
	124	+ `catalog.json` file in this repository for it to be displayed.
	125	+* description: The package description should be phrased such that it can
	126	+ be used as descriptive summary text in the catalog when the package is
	127	+ presented along-side other packages. It should be less than 200 characters
	128	+ in length but adequately descriptive of the primary use cases for the package.
	129	+* keywords: Excluding `web-components` and `polymer`, these keywords will be
	130	+ used as tags in the final catalog data.
	131	+
	132	+### Elements
	133	+
	134	+Elements behave much like packages: they are responsible for maintaining their
	135	+own documentation in `bower.json`. In addition, the source `.html` files for
	136	+elements should be documented in accordance with the [Polymer Elements style guide](http://polymerelements.github.io/style-guide/).
	137	+
	138	+#### bower.json
	139	+
	140	+The catalog uses the following information from an element's `bower.json`:
	141	+
	142	+* name: The element name. Except in rare cases, this should match a `.html`
	143	+ file of the same name that contains the element or imports all default elements
	144	+ for element repos with multiple elements.
	145	+* description: A less-than-200 character description of what the element
	146	+ does and how it should be used.
	147	+* keywords: Except for `web-components` and `polymer`, these keywords will
	148	+ be used as tags in the final catalog data.
	149	+* main: This field should represent **every .html file that a user might
	150	+ directly import**. For instance, in `iron-icons` each icon set might be imported
	151	+ separately, so each set should be included in main. For many (most) elements
	152	+ this can just be a string with the `.html` filename matching the `name` field.
	153	+
	154	+### Guides
	155	+
	156	+Guides are in-depth articles that allow for article-style documentation in
	157	+addition to the API documentation for each element parsed using hydrolysis.
	158	+
	159	+Guides are simply Markdown files with YAML front-matter and can be included
	160	+in the repository for the catalog, a package, or an individual element. To
	161	+avoid namespace collisions, guides for packages and individual elements are
	162	+identified with `repo-name/guide-name`, while guides in this repository are
	163	+identified simply with `guide-name`.
	164	+
	165	+Each guide will be listed and accessible in the Guides section of the
	166	+catalog, and will additionally be associated with each element and package
	167	+it references.
	168	+
	169	+#### Example Markdown File (e.g. `bower_components/gold-elements/guides/ecommerce.md`)
	170	+
	171	+```markdown
	172	+---
	173	+title: How to Build an E-Commerce Site with Gold Elements
	174	+summary: "Learn how to add drop-in E-commerce components to quickly build a web presence for your business."
	175	+tags: ['ecommerce','beginner']
	176	+elements: ['gold-checkout','paper-input']
	177	+updated: 2015-04-10
	178	+---
	179	+
	180	+Actual article content starts here.
	181	+
	182	+## Example Section
	183	+
	184	+Etc. etc.
	185	+```
	186	+
	187	+#### Example compiled `catalog.json`
	188	+
	189	+```js
	190	+{
	191	+ // guides with associated packages should also be referenced in the package metadata
	192	+ "packages": [
	193	+ {"name":"gold-elements","guides":["gold-elements/ecommerce"]}
	194	+ ],
	195	+ "guides": [
	196	+ {
	197	+ "name":"gold-elements/ecommerce",
	198	+ "title":"How to Build an E-Commerce Site with Gold Elements",
	199	+ "tags":["ecommerce","beginner"],
	200	+ "elements":["gold-checkout","paper-input"],
	201	+ "package":"gold-elements"
	202	+ }
	203	+ ],
	204	+ "elements": [
	205	+ {"name":"paper-input","guides":["gold-elements/ecommerce"]}
	206	+ ]
	207	+}
	208	+```
	209	+
	210	+#### Assets in Guides
	211	+
	212	+If a guide needs images or other assets, those should be stored in `/guides/assets`
	213	+in the repository and always referenced with relative URLs (e.g. `assets/filename.jpg`).
	214	+By maintaining this convention the catalog compilation process will automatically
	215	+ensure that images and other assets are properly accessible to the guide.
0	216	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-bar/app-bar.css 0 → 100644

View file @07d13c9

	1	+:host * {
	2	+ box-sizing: border-box;
	3	+}
	4	+
	5	+:host(.search-on) {
	6	+ left: 0;
	7	+ background: inherit;
	8	+ z-index: 1001;
	9	+}
	10	+
	11	+:host ::content iron-icon {
	12	+ margin-right: 15px;
	13	+ cursor: pointer;
	14	+}
	15	+
	16	+#search {
	17	+ position: relative;
	18	+}
	19	+
	20	+#search iron-icon {
	21	+ margin-right: 0;
	22	+}
	23	+
	24	+#search[show] {
	25	+ position: absolute;
	26	+ width: 100%;
	27	+ height: 100%;
	28	+ left: 0;
	29	+ top: 0;
	30	+ padding: 0 16px;
	31	+ background: #fff;
	32	+}
	33	+
	34	+#search input {
	35	+ display: none;
	36	+ font-family: var(--primary-font-family);
	37	+ font-size: 15px;
	38	+ width: 100%;
	39	+ padding: 10px;
	40	+ border: 0;
	41	+ border-radius: 2px;
	42	+ -webkit-appearance: none;
	43	+}
	44	+
	45	+#search[show] input {
	46	+ display: block;
	47	+}
	48	+
	49	+#search input:focus {
	50	+ outline: 0;
	51	+}
0	52	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-bar/app-bar.html 0 → 100644

View file @07d13c9

	1	+<dom-module id="app-bar">
	2	+ <!--<link rel="import" type="css" href="app-bar.css">-->
	3	+ <style>
	4	+ :host * {
	5	+ box-sizing: border-box;
	6	+ }
	7	+
	8	+ :host(.search-on) {
	9	+ left: 0;
	10	+ background: inherit;
	11	+ z-index: 1001;
	12	+ }
	13	+
	14	+ :host ::content iron-icon {
	15	+ margin-right: 15px;
	16	+ cursor: pointer;
	17	+ }
	18	+
	19	+ #search {
	20	+ position: relative;
	21	+ }
	22	+
	23	+ #search iron-icon {
	24	+ margin-right: 0;
	25	+ }
	26	+
	27	+ #search[show] {
	28	+ position: absolute;
	29	+ width: 100%;
	30	+ height: 100%;
	31	+ left: 0;
	32	+ top: 0;
	33	+ padding: 0 16px;
	34	+ background: #fff;
	35	+ }
	36	+
	37	+ #search input {
	38	+ display: none;
	39	+ font-family: var(--primary-font-family);
	40	+ font-size: 15px;
	41	+ width: 100%;
	42	+ padding: 10px;
	43	+ border: 0;
	44	+ border-radius: 2px;
	45	+ -webkit-appearance: none;
	46	+ }
	47	+
	48	+ #search[show] input {
	49	+ display: block;
	50	+ }
	51	+
	52	+ #search input:focus {
	53	+ outline: 0;
	54	+ }
	55	+ </style>
	56	+ <template>
	57	+ <content></content>
	58	+ <div id="search" class="horizontal layout center" show$="{{showingSearch}}" on-tap="toggleSearch">
	59	+ <iron-icon icon="search" hidden$="[[noSearch]]"></iron-icon>
	60	+ <form on-submit="performSearch" class="flex">
	61	+ <input type="search" id="query" value="{{query::keyup}}" autocomplete="off" placeholder="Search Elements" on-blur="clearSearch">
	62	+ </form>
	63	+ </div>
	64	+ </template>
	65	+</dom-module>
	66	+
	67	+<script>
	68	+ Polymer({
	69	+ is: 'app-bar',
	70	+ properties: {
	71	+ query: {
	72	+ type: String,
	73	+ notify: true
	74	+ },
	75	+ showingSearch: {
	76	+ type: Boolean,
	77	+ value: false
	78	+ },
	79	+ noSearch: {
	80	+ type: Boolean,
	81	+ value: false
	82	+ }
	83	+ },
	84	+ observers: [
	85	+ 'updateSearchDisplay(showingSearch)'
	86	+ ],
	87	+ listeners: {
	88	+ keyup: 'hotkeys'
	89	+ },
	90	+ toggleSearch: function(e) {
	91	+ if (e) {
	92	+ e.stopPropagation();
	93	+ }
	94	+ if (e.target === this.$.query) {
	95	+ return;
	96	+ }
	97	+
	98	+ this.showingSearch = !this.showingSearch;
	99	+ },
	100	+ clearSearch: function() {
	101	+ this.showingSearch = false;
	102	+ },
	103	+ updateSearchDisplay: function(showingSearch) {
	104	+ if (showingSearch) {
	105	+ this.classList.add('search-on');
	106	+ this.async(function() {
	107	+ this.$.query.focus();
	108	+ });
	109	+ } else {
	110	+ this.classList.remove('search-on');
	111	+ }
	112	+ },
	113	+ hotkeys: function(e) {
	114	+ // ESC
	115	+ if (e.keyCode === 27 && Polymer.dom(e).rootTarget === this.$.query) {
	116	+ this.showingSearch = false;
	117	+ }
	118	+ },
	119	+ performSearch: function(e) {
	120	+ e.preventDefault();
	121	+ this.fire('nav', {url: '/browse?q=' + this.query});
	122	+ }
	123	+ });
	124	+</script>
0	125	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-cart/app-cart.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
	2	+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
	3	+<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
	4	+<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
	5	+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
	6	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	7	+<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
	8	+<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
	9	+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
	10	+
	11	+<link rel="import" href="../cart-item/cart-item.html">
	12	+<link rel="import" href="../catalog-cart/catalog-cart.html">
	13	+
	14	+<dom-module id="app-cart">
	15	+ <style>
	16	+ :host {
	17	+ background: white;
	18	+ @apply(--layout-fit);
	19	+ @apply(--layout);
	20	+ @apply(--layout-vertical);
	21	+ }
	22	+
	23	+ #toolbar {
	24	+ color: #666;
	25	+ }
	26	+
	27	+ #toolbar-title {
	28	+ margin-left: 15px;
	29	+ }
	30	+
	31	+ #download {
	32	+ padding: 16px;
	33	+ }
	34	+
	35	+ #dl code {
	36	+ font-weight: bold;
	37	+ color: #3f51b5;
	38	+ }
	39	+
	40	+ #download h4 {
	41	+ font-size: 14px;
	42	+ font-weight: bold;
	43	+ margin: 0;
	44	+ }
	45	+
	46	+ #download > section {
	47	+ margin-bottom: 24px;
	48	+ }
	49	+
	50	+ #download textarea {
	51	+ box-sizing: border-box;
	52	+ display: block;
	53	+ width: 100%;
	54	+ height: 110px;
	55	+ padding: 8px;
	56	+ background: var(--paper-blue-grey-50);
	57	+ border: 1px solid var(--paper-blue-grey-100);
	58	+ border-radius: 2px;
	59	+ font-size: 12px;
	60	+ color: var(--paper-blue-grey-500);
	61	+ resize: none;
	62	+ }
	63	+
	64	+ #download paper-button {
	65	+ background: #e91e63;
	66	+ color: white;
	67	+ margin-top: 10px;
	68	+ }
	69	+
	70	+ paper-tabs {
	71	+ --paper-tabs-selection-bar-color: #304ffe;
	72	+ }
	73	+ paper-tab {
	74	+ --paper-tab-ink: #304ffe;
	75	+ }
	76	+ </style>
	77	+ <template>
	78	+ <catalog-cart id="data" items="{{items}}"></catalog-cart>
	79	+
	80	+ <paper-toolbar id="toolbar">
	81	+ <iron-icon icon="stars"></iron-icon>
	82	+ <span id="toolbar-title" class="flex">My Collection</span>
	83	+ <iron-icon icon="chevron-right" on-tap="close"></iron-icon>
	84	+ </paper-toolbar>
	85	+ <paper-tabs id="tabs" selected="{{_tab}}">
	86	+ <paper-tab name="elements">Elements (<span>[[items.length]]</span>)</paper-tab>
	87	+ <paper-tab name="download">Download</paper-tab>
	88	+ </paper-tabs>
	89	+ <iron-pages selected="[[_tab]]" class="flex">
	90	+ <div id="elements">
	91	+ <template is="dom-repeat" items="[[items]]">
	92	+ <cart-item element="[[item]]" on-remove="_handleRemove"></cart-item>
	93	+ </template>
	94	+ </div>
	95	+ <div id="download">
	96	+ <section>
	97	+ <h4>Download Options</h4>
	98	+
	99	+ <paper-radio-group selected="{{downloadMethod}}" id="dl">
	100	+ <paper-radio-button name="elements">
	101	+ <code>elements folder</code> - the full source for the latest
	102	+ version of all your selected elements
	103	+ </paper-radio-button>
	104	+ <paper-radio-button name="bower">
	105	+ <code>bower.json</code> - just the bower.json file, from which
	106	+ you can run bower install to fetch your elements
	107	+ </paper-radio-button>
	108	+ </paper-radio-group>
	109	+
	110	+ <paper-button raised on-tap="download">Download</paper-button>
	111	+ </section>
	112	+ <section>
	113	+ <h4>Bower Command</h4>
	114	+
	115	+ <p>You can copy the command below and paste it into the terminal to
	116	+ install the elements from your cart into a project that already uses
	117	+ Bower.</p>
	118	+
	119	+ <textarea readonly value="[[_itemsAsBowerCommand(items.*)]]" on-tap="_selectAll"></textarea>
	120	+ </section>
	121	+ </div>
	122	+ </iron-pages>
	123	+ </template>
	124	+</dom-module>
	125	+
	126	+<script>
	127	+Polymer({
	128	+ is: 'app-cart',
	129	+ enableCustomStyleProperties: true,
	130	+ properties: {
	131	+ items: {
	132	+ type: Array,
	133	+ notify: true
	134	+ },
	135	+ downloadMethod: {
	136	+ type: String,
	137	+ value: 'bower'
	138	+ },
	139	+ _tab: {
	140	+ type: Number,
	141	+ value: 0
	142	+ }
	143	+ },
	144	+ log: function() { console.log(arguments); },
	145	+ close: function() {
	146	+ this.fire('cart-close');
	147	+ },
	148	+ add: function(name) {
	149	+ if (this.includes(name)) {
	150	+ this.fire('toast', {text: "Element " + name + " is already in your collection"});
	151	+ } else if (this.$.data.add(name)) {
	152	+ this.fire('toast', {text: "Element " + name + " has been added to your collection"});
	153	+ }
	154	+ },
	155	+ remove: function(name) {
	156	+ if (name.name) name = name.name;
	157	+ this.$.data.remove(name);
	158	+ this.fire('toast', {text: "Element " + name + " has been removed from your collection"});
	159	+ },
	160	+ _hasAny: function(arr) {
	161	+ return arr && (arr > 0);
	162	+ },
	163	+ _handleRemove: function(e) {
	164	+ this.remove(e.currentTarget.element);
	165	+ },
	166	+ includes: function(el) {
	167	+ return this.$.data.includes(el);
	168	+ },
	169	+ _itemsAsDependencies: function() {
	170	+ var out = {};
	171	+ this.items.forEach(function(item) {
	172	+ out[item.name] = item.source + "#" + item.target;
	173	+ });
	174	+ return out;
	175	+ },
	176	+ _itemsAsQueryString: function() {
	177	+ return this.items.map(function(item) {
	178	+ return item.name + "=" + encodeURIComponent(item.source + "#" + item.target);
	179	+ }).join("&");
	180	+ },
	181	+ _itemsAsBowerCommand: function() {
	182	+ return "bower install --save " + this.items.map(function(item) {
	183	+ if (item) {
	184	+ return item.source + "#" + item.target;
	185	+ }
	186	+ }).join(" ");
	187	+ },
	188	+ _selectAll: function(e) {
	189	+ e.currentTarget.select();
	190	+ },
	191	+ bowerString: function() {
	192	+ return JSON.stringify({
	193	+ name: "polymer-project",
	194	+ dependencies: this._itemsAsDependencies()
	195	+ }, null, 2);
	196	+ },
	197	+ zipUrl: function() {
	198	+ return "http://bowerarchiver.appspot.com/archive?" + this._itemsAsQueryString();
	199	+ },
	200	+ download: function() {
	201	+ var link = document.createElement('a');
	202	+ ga('send', 'event', 'download');
	203	+
	204	+ switch (this.downloadMethod) {
	205	+ case 'bower':
	206	+ var blob = new Blob([this.bowerString()], {type: 'application/json'});
	207	+ var url = URL.createObjectURL(blob);
	208	+ link.href = url;
	209	+ link.download = 'bower.json';
	210	+ document.body.appendChild(link);
	211	+ link.click();
	212	+ document.body.removeChild(link);
	213	+ break;
	214	+ case 'elements':
	215	+ link.href = this.zipUrl();
	216	+ link.download = 'elements.zip';
	217	+ document.body.appendChild(link);
	218	+ link.click();
	219	+ document.body.removeChild(link);
	220	+ break;
	221	+ }
	222	+ }
	223	+});
	224	+</script>
0	225	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-link/app-link.html 0 → 100644

View file @07d13c9

	1	+<script>
	2	+Polymer({
	3	+ is: 'app-link',
	4	+ extends: 'a',
	5	+ properties: {
	6	+ skipNav: Boolean
	7	+ },
	8	+ listeners: {
	9	+ 'click': 'navigate'
	10	+ },
	11	+ navigate: function(e) {
	12	+ // allow for ctrl+click to open in new window
	13	+ if (e.ctrlKey \|\| e.metaKey) {
	14	+ return true;
	15	+ } else {
	16	+ e.preventDefault();
	17	+ if (!this.skipNav) this.fire('nav', {url: this.href});
	18	+ }
	19	+ }
	20	+});
	21	+</script>
0	22	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-logo/app-logo.html 0 → 100644

View file @07d13c9

	1	+<style is="custom-style">
	2	+ * {
	3	+ --app-logo-color: var(--primary-text-color);
	4	+ --app-logo-font-size: 20px;
	5	+ }
	6	+</style>
	7	+
	8	+<dom-module id="app-logo">
	9	+ <style>
	10	+ :host {
	11	+ font-size: var(--app-logo-font-size);
	12	+ }
	13	+
	14	+ a {
	15	+ max-width: 125px;
	16	+ color: var(--app-logo-color);
	17	+ text-transform: none;
	18	+ text-decoration: none;
	19	+ }
	20	+
	21	+ :host([full]) a {
	22	+ max-width: 200px;
	23	+ }
	24	+
	25	+ h1 {
	26	+ font-size: 18px;
	27	+ padding: 0 0 0 16px;
	28	+ font-weight: 500;
	29	+ color: #606060;
	30	+ margin: 0;
	31	+ }
	32	+
	33	+ img {
	34	+ min-width: 36px;
	35	+ padding: 2px;
	36	+ box-sizing: border-box;
	37	+ margin: 6px;
	38	+ }
	39	+ </style>
	40	+ <template>
	41	+ <a href="/" is="pushstate-anchor" class="horizontal layout center">
	42	+ <img src="/images/polymer.svg" width="36" alt="Polymer Logo">
	43	+ <h1 hidden$="[[!full]]">Polymer Catalog</h1>
	44	+ <h1 hidden$="[[full]]">Catalog</h1>
	45	+ </a>
	46	+ </template>
	47	+</dom-module>
	48	+
	49	+<script>
	50	+ Polymer({
	51	+ is: 'app-logo',
	52	+ enableCustomStyleProperties: true,
	53	+ properties: {
	54	+ full: {
	55	+ type: Boolean,
	56	+ value: false
	57	+ }
	58	+ }
	59	+ });
	60	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/app-shell/app-shell.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
	2	+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
	3	+<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
	4	+<link rel="import" href="../../bower_components/app-router/app-router.html">
	5	+<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
	6	+
	7	+<link rel="import" href="../app-styles/app-styles.html">
	8	+<link rel="import" href="../app-link/app-link.html">
	9	+<link rel="import" href="../app-logo/app-logo.html">
	10	+<link rel="import" href="../app-cart/app-cart.html">
	11	+<link rel="import" href="../app-bar/app-bar.html">
	12	+<link rel="import" href="../app-sidebar/app-sidebar.html">
	13	+
	14	+<link rel="import" href="../pages/page-packages.html">
	15	+<link rel="import" href="../pages/page-browse.html">
	16	+<link rel="import" href="../pages/page-element.html">
	17	+<link rel="import" href="../pages/page-guide.html">
	18	+<link rel="import" href="../pages/page-not-found.html">
	19	+
	20	+<dom-module id="app-shell">
	21	+ <style>
	22	+ #cartpanel::shadow > #scrim {
	23	+ z-index: 4;
	24	+ }
	25	+ #cartpanel::shadow > #drawer {
	26	+ z-index: 5;
	27	+ }
	28	+
	29	+ paper-toast {
	30	+ z-index: 5;
	31	+ }
	32	+ </style>
	33	+ <template>
	34	+ <paper-drawer-panel id="cartpanel" class="flex" force-narrow right-drawer disable-edge-swipe disable-swipe drawer-width="320px">
	35	+ <div id="main" main>
	36	+ <app-router id="router" class="flex" mode="pushstate" on-activate-route-end="trackPageview">
	37	+ <app-route path="/" element="page-packages" bindRouter></app-route>
	38	+ <app-route path="/browse" element="page-browse" bindRouter onUrlChange="updateModel"></app-route>
	39	+ <app-route path="/elements/:element" element="page-element" bindRouter onUrlChange="updateModel"></app-route>
	40	+ <app-route path="/guides/:name" element="page-guide" bindRouter></app-route>
	41	+ <app-route path="*" element="page-not-found"></app-route>
	42	+ </app-router>
	43	+ </div>
	44	+ <app-cart id="cart" drawer></app-cart>
	45	+ </paper-drawer-panel>
	46	+ </template>
	47	+</dom-module>
	48	+<script>
	49	+ Polymer({
	50	+ is: 'app-shell',
	51	+ listeners: {
	52	+ 'nav': 'handleNav',
	53	+ 'page-meta': 'updateTitle',
	54	+ 'cart-close': 'cartClose',
	55	+ 'cart-open': 'cartOpen',
	56	+ 'cart-add': 'cartAdd',
	57	+ 'cart-remove': 'cartRemove',
	58	+ 'toast': 'showToast'
	59	+ },
	60	+ _toast: null,
	61	+
	62	+ toggleSearch: function() {
	63	+ this.$.search.active = !this.$.search.active;
	64	+ },
	65	+ performSearch: function(e) {
	66	+ e.preventDefault();
	67	+ if (this.query.length) this.$.router.go('/elements?q=' + this.query);
	68	+ },
	69	+ handleNav: function(_, nav) {
	70	+ this.$.router.go(nav.url);
	71	+ this.$.cartpanel.closeDrawer();
	72	+ },
	73	+ updateTitle: function(_, detail) {
	74	+ if (detail.title && detail.title.length) {
	75	+ document.title = detail.title + " - Polymer Element Catalog";
	76	+ } else {
	77	+ document.title = "Polymer Element Catalog";
	78	+ }
	79	+ },
	80	+ cartClose: function() {
	81	+ this.$.cartpanel.closeDrawer();
	82	+ },
	83	+ cartOpen: function() {
	84	+ this.$.cartpanel.openDrawer();
	85	+ },
	86	+ cartAdd: function(e, el) {
	87	+ this.$.cart.add(el);
	88	+ },
	89	+ cartRemove: function(e, el) {
	90	+ this.$.cart.remove(el);
	91	+ },
	92	+ showToast: function(e, detail) {
	93	+ if (!this._toast) {
	94	+ this._toast = document.createElement('paper-toast');
	95	+ Polymer.dom(this.$.router).appendChild(this._toast);
	96	+ }
	97	+ this._toast.text = detail.text;
	98	+ this.async(this._toast.show.bind(this._toast), 1);
	99	+ },
	100	+
	101	+ trackPageview: function(e, detail) {
	102	+ this.debounce('pageview', function() {
	103	+ var loc = window.location.pathname + window.location.search;
	104	+ ga('send', 'pageview', {
	105	+ location: loc,
	106	+ title: document.title
	107	+ });
	108	+ ga('set', 'page', loc);
	109	+ }, 2000);
	110	+ }
	111	+ });
	112	+</script>
0	113	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-sidebar/app-sidebar.css 0 → 100644

View file @07d13c9

	1	+:host {
	2	+ height: 100%;
	3	+ box-sizing: border-box;
	4	+ z-index: 2;
	5	+ background: white;
	6	+ border-right: 1px solid #e5e5e5;
	7	+ @apply(--layout);
	8	+ @apply(--layout-vertical);
	9	+ overflow-x: hidden;
	10	+ overflow-y: auto;
	11	+ -webkit-overflow-scrolling: touch;
	12	+}
	13	+
	14	+::content paper-toolbar {
	15	+ --paper-toolbar-background: white;
	16	+}
	17	+
	18	+::content .section {
	19	+ margin-bottom: 20px;
	20	+ opacity: 0;
	21	+ transform: translate(0, 100px);
	22	+ transition: var(--material-curve-320);
	23	+}
	24	+
	25	+::content .section:first-child { transition-delay: 100ms; }
	26	+::content .section:nth-child(2) { transition-delay: 200ms; }
	27	+::content .section:nth-child(3) { transition-delay: 300ms; }
	28	+::content .section:nth-child(4) { transition-delay: 400ms; }
	29	+
	30	+::content .active .section {
	31	+ transform: translate(0, 0);
	32	+ opacity: 1;
	33	+}
	34	+
	35	+::content .section h5 {
	36	+ @apply(--paper-font-body2);
	37	+ border-top: 1px solid;
	38	+ border-top-color: var(--divider-color);
	39	+ margin: 24px 0 0 0;
	40	+ padding: 16px 24px 12px 24px;
	41	+}
	42	+
	43	+::content .section p {
	44	+ @apply(--paper-font-body1);
	45	+ color: var(--secondary-text-color);
	46	+ padding: 0 24px;
	47	+ margin: 0;
	48	+}
	49	+
	50	+::content .content {
	51	+ @apply(--layout-vertical);
	52	+}
0	53	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-sidebar/app-sidebar.html 0 → 100644

View file @07d13c9

	1	+<style is="custom-style">
	2	+ :root {
	3	+ --app-sidebar-width: 272px;
	4	+ --app-sidebar-background: var(--primary-background-color);
	5	+ }
	6	+</style>
	7	+
	8	+<dom-module id="app-sidebar">
	9	+ <link rel="import" type="css" href="app-sidebar.css">
	10	+ <template>
	11	+ <content></content>
	12	+ </template>
	13	+</dom-module>
	14	+
	15	+<script>
	16	+ Polymer({
	17	+ is: 'app-sidebar',
	18	+ enableCustomStyleProperties: true
	19	+ });
	20	+</script>
0	21	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/app-styles/app-styles.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
	2	+
	3	+<style is="custom-style">
	4	+ * {
	5	+ box-sizing: border-box;
	6	+ }
	7	+
	8	+ :root {
	9	+ --iron-icon-size: 24px;
	10	+
	11	+ --primary-font-family: Roboto, 'Noto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	12	+
	13	+ --secondary-background-color: #fafafa;
	14	+
	15	+ --material-curve: cubic-bezier(0.55, 0, 0.1, 1);
	16	+ --material-curve-320: all 320ms cubic-bezier(0.55, 0, 0.1, 1);
	17	+ --material-curve-220: all 220ms cubic-bezier(0.55, 0, 0.1, 1);
	18	+
	19	+ --paper-toolbar-background: #fafafa;
	20	+ --paper-toolbar-color: #424242;
	21	+ }
	22	+</style>
0	23	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/cart-icon/cart-icon.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	2	+<link rel="import" href="../catalog-cart/catalog-cart.html">
	3	+
	4	+<dom-module id="cart-icon">
	5	+ <style>
	6	+ :host {
	7	+ display: inline-block;
	8	+ line-height: 40px;
	9	+ width: 40px;
	10	+ height: 40px;
	11	+ cursor: pointer;
	12	+ text-align: center;
	13	+ }
	14	+
	15	+ iron-icon {
	16	+ margin-top: -2px;
	17	+ }
	18	+
	19	+ :host(.full) iron-icon {
	20	+ color: var(--paper-pink-500);
	21	+ }
	22	+ </style>
	23	+ <template>
	24	+ <catalog-cart items="{{cartItems}}"></catalog-cart>
	25	+ <iron-icon icon="stars"></iron-icon>
	26	+ </template>
	27	+</dom-module>
	28	+
	29	+<script>
	30	+Polymer({
	31	+ is: 'cart-icon',
	32	+ listeners: {
	33	+ tap: 'openCart'
	34	+ },
	35	+ observers: [
	36	+ '_anyItems(cartItems.length)'
	37	+ ],
	38	+ openCart: function() {
	39	+ this.fire('cart-open');
	40	+ },
	41	+ _anyItems: function() {
	42	+ if (this.cartItems.length >= 1) {
	43	+ this.classList.add('full');
	44	+ } else {
	45	+ this.classList.remove('full');
	46	+ }
	47	+ },
	48	+ _pulse: function() {
	49	+ this.classList.remove('pulse');
	50	+ this.async(function() {
	51	+ this.classList.add('pulse');
	52	+ });
	53	+ },
	54	+ _shrink: function() {
	55	+
	56	+ }
	57	+});
	58	+</script>
0	59	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/cart-item-icon/cart-item-icon.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	2	+
	3	+<link rel="import" href="../catalog-cart/catalog-cart.html">
	4	+
	5	+<dom-module id="cart-item-icon">
	6	+ <style>
	7	+ iron-icon {
	8	+ width: var(--cart-item-icon-size, 18px);
	9	+ height: var(--cart-item-icon-size, 18px);
	10	+ }
	11	+
	12	+ span {
	13	+ @apply(--cart-item-icon-label);
	14	+ }
	15	+ </style>
	16	+ <template>
	17	+ <catalog-cart id="cart" on-item-added="_update" on-item-removed="_update" on-items-changed="_update"></catalog-cart>
	18	+
	19	+ <iron-icon icon="[[_icon]]" title$="[[_label]]"></iron-icon>
	20	+ <span hidden$="[[noLabel]]">[[_label]]</span>
	21	+ </template>
	22	+</dom-module>
	23	+
	24	+<script>
	25	+Polymer({
	26	+ is: 'cart-item-icon',
	27	+ properties: {
	28	+ element: {type: String, observer: '_update'},
	29	+ presentLabel: {type: String, value: 'Remove from Collection', observer: '_update'},
	30	+ absentLabel: {type: String, value: 'Add to Collection', observer: '_update'},
	31	+ present: {type: Boolean, notify: true, readOnly: true, value: false},
	32	+ noLabel: {type: Boolean, value: false},
	33	+ tappable: {type: Boolean, value: false},
	34	+ _label: String,
	35	+ _icon: String
	36	+ },
	37	+ listeners: {
	38	+ tap: '_tapped'
	39	+ },
	40	+ attached: function() {
	41	+ this._update();
	42	+ },
	43	+ _update: function() {
	44	+ this._setPresent(this.$.cart.includes(this.element));
	45	+
	46	+ this._label = this.present ? this.presentLabel : this.absentLabel;
	47	+ this.setAttribute('aria-label',this._label);
	48	+
	49	+ this.debounce('icon', function() {
	50	+ this._icon = this.present ? 'star' : 'star-border';
	51	+ }, 10);
	52	+ },
	53	+ toggle: function(e) {
	54	+ this.fire(this.present ? 'cart-remove' : 'cart-add', this.element);
	55	+ },
	56	+ _tapped: function() {
	57	+ if (this.tappable) this.toggle();
	58	+ }
	59	+});
	60	+</script>
0	61	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/cart-item/cart-item.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	2	+
	3	+<link rel="import" href="../catalog-element/catalog-element.html">
	4	+
	5	+<dom-module id="cart-item">
	6	+ <style>
	7	+ :host {
	8	+ display: block;
	9	+ font-size: 16px;
	10	+ padding: 12px 16px;
	11	+ @apply(--layout);
	12	+ @apply(--layout-horizontal);
	13	+ cursor: pointer;
	14	+ }
	15	+
	16	+ :host(:hover) iron-icon {
	17	+ opacity: 0.85;
	18	+ }
	19	+
	20	+ iron-icon:hover {
	21	+ opacity: 1.0;
	22	+ }
	23	+
	24	+ iron-icon {
	25	+ width: 16px !important;
	26	+ height: 16px !important;
	27	+ cursor: pointer;
	28	+ margin: 0 6px;
	29	+ opacity: 0.0;
	30	+ transition: var(--material-curve-320);
	31	+ }
	32	+ </style>
	33	+ <template>
	34	+ <span class="flex">[[element.name]]</span>
	35	+ <iron-icon icon="description" view="docs" on-tap="_nav"></iron-icon>
	36	+ <iron-icon icon="visibility" view="demo" on-tap="_nav"></iron-icon>
	37	+ <iron-icon icon="clear" on-tap="_remove"></iron-icon>
	38	+ </template>
	39	+</dom-module>
	40	+
	41	+<script>
	42	+Polymer({
	43	+ is: 'cart-item',
	44	+ properties: {
	45	+ element: String
	46	+ },
	47	+ _remove: function() {
	48	+ this.fire('remove');
	49	+ },
	50	+ _nav: function(e) {
	51	+ var view = e.currentTarget.getAttribute('view');
	52	+ this.fire('nav', {url: '/elements/' + this.element.name + '?view=' + view});
	53	+ }
	54	+});
	55	+</script>
0	56	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/catalog-cart/catalog-cart.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../catalog-element/catalog-element.html">
	2	+
	3	+<script>
	4	+(function() {
	5	+ var _instances = [];
	6	+
	7	+ var _store = function() {
	8	+ if (_instances.length) {
	9	+ localStorage['catalog.cart'] = JSON.stringify(_instances[0].items);
	10	+ }
	11	+ };
	12	+
	13	+ var _retrieve = function() {
	14	+ try {
	15	+ return JSON.parse(localStorage['catalog.cart'] \|\| '[]');
	16	+ } catch (e) {
	17	+ console.log('error retrieving catalog data from localstorage.', e);
	18	+ return [];
	19	+ }
	20	+ };
	21	+
	22	+ var _add = function(name) {
	23	+ var el = document.createElement('catalog-element');
	24	+ el.name = name;
	25	+ if (!el.data) {
	26	+ return;
	27	+ }
	28	+
	29	+ var check = _instances[0];
	30	+ var insertAt;
	31	+ if (check.items.length === 0 \|\| check.items[0].name > name) {
	32	+ insertAt = 0;
	33	+ } else {
	34	+ for (var i = 0; i < check.items.length; i++) {
	35	+ if (name > check.items[i].name && (!check.items[i + 1] \|\| name < check.items[i+1].name)) {
	36	+ //console.log(name, ">", check.items[i].name);
	37	+ insertAt = i + 1;
	38	+ break;
	39	+ }
	40	+ }
	41	+ }
	42	+
	43	+ _instances.forEach(function(instance) {
	44	+ instance.splice('items',insertAt,0,el.data);
	45	+ instance.fire('item-added', {name: el.name, element: el.data}, {bubbles: false});
	46	+ });
	47	+ _store();
	48	+ return el.data;
	49	+ };
	50	+
	51	+ var _remove = function(el) {
	52	+ var check = _instances[0];
	53	+ var removeAt = -1;
	54	+ for (var i = 0; i < check.items.length; i++) {
	55	+ if (check.items[i] === el \|\| check.items[i].name === el) {
	56	+ removeAt = i;
	57	+ }
	58	+ }
	59	+
	60	+ if (removeAt >= 0) {
	61	+ _instances.forEach(function(instance) {
	62	+ instance.splice('items',removeAt,1);
	63	+ instance.fire('item-removed', {name: el.name, element: el.data}, {bubbles: false});
	64	+ });
	65	+ _store();
	66	+ } else {
	67	+ return false;
	68	+ }
	69	+ };
	70	+
	71	+ Polymer({
	72	+ is: 'catalog-cart',
	73	+ properties: {
	74	+ items: {
	75	+ type: Array,
	76	+ notify: true,
	77	+ value: function() {
	78	+ return _retrieve();
	79	+ }
	80	+ }
	81	+ },
	82	+ created: function() {
	83	+ _instances.push(this);
	84	+ },
	85	+ add: function(name) {
	86	+ if (this.includes(name)) return false;
	87	+ return _add(name);
	88	+ },
	89	+ remove: function(name) {
	90	+ return _remove(name);
	91	+ },
	92	+ includes: function(el) {
	93	+ for (var i = 0; i < this.items.length; i++) {
	94	+ if (this.items[i] === el \|\| this.items[i].name === el) return true;
	95	+ }
	96	+ return false;
	97	+ }
	98	+ });
	99	+})();
	100	+</script>
0	101	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/catalog-data/catalog-data.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
	2	+
	3	+<dom-module id="catalog-data">
	4	+ <template>
	5	+ <iron-ajax id="req" url="/catalog.json" method="get" handle-as="json" on-response="_handleResponse"></iron-ajax>
	6	+ </template>
	7	+</dom-module>
	8	+
	9	+<script>
	10	+ (function() {
	11	+ var _data = {};
	12	+ var _els = [];
	13	+
	14	+ var _generateMap = function(list) {
	15	+ var out = {};
	16	+ for (var i = 0; i < list.length; i++) {
	17	+ out[list[i].name] = list[i];
	18	+ }
	19	+ return out;
	20	+ };
	21	+
	22	+ var _setPackageData = function(data) {
	23	+ _data = data \|\| {};
	24	+ if (data) {
	25	+ _data.packageMap = _generateMap(data.packages);
	26	+ _data.elementMap = _generateMap(data.elements);
	27	+ _data.guideMap = _generateMap(data.guides);
	28	+ _data.behaviorMap = {};
	29	+ _data.elements.forEach(function(el) {
	30	+ el.behaviors.forEach(function(be) {
	31	+ _data.behaviorMap[be] = el.name;
	32	+ });
	33	+ });
	34	+ }
	35	+ _els.forEach(function(el){ el.load(_data); });
	36	+ };
	37	+
	38	+ Polymer({
	39	+ is: 'catalog-data',
	40	+ ready: function() {
	41	+ this.load(_data);
	42	+ },
	43	+ attached: function() {
	44	+ if (_els.length === 0 && !_data.packages) { this.$.req.generateRequest(); }
	45	+ _els.push(this);
	46	+ },
	47	+ detached: function() {
	48	+ _els.splice(_els.indexOf(this), 1);
	49	+ },
	50	+ properties: {
	51	+ packages: {
	52	+ type: Array,
	53	+ readOnly: true,
	54	+ notify: true
	55	+ },
	56	+ packageMap: {
	57	+ type: Object,
	58	+ readOnly: true,
	59	+ notify: true
	60	+ },
	61	+ elements: {
	62	+ type: Array,
	63	+ readOnly: true,
	64	+ notify: true
	65	+ },
	66	+ elementMap: {
	67	+ type: Object,
	68	+ readOnly: true,
	69	+ notify: true
	70	+ },
	71	+ guides: {
	72	+ type: Array,
	73	+ readOnly: true,
	74	+ notify: true
	75	+ },
	76	+ guideMap: {
	77	+ type: Object,
	78	+ readOnly: true,
	79	+ notify: true
	80	+ },
	81	+ tags: {
	82	+ type: Object,
	83	+ readOnly: true,
	84	+ notify: true
	85	+ },
	86	+ behaviorMap: {
	87	+ type: Object,
	88	+ readOnly: true,
	89	+ notify: true
	90	+ }
	91	+ },
	92	+ load: function(data) {
	93	+ if (data.packages) {
	94	+ this._setPackages(data.packages);
	95	+ this._setPackageMap(data.packageMap);
	96	+ this._setElements(data.elements);
	97	+ this._setElementMap(data.elementMap);
	98	+ this._setGuides(data.guides);
	99	+ this._setGuideMap(data.guideMap);
	100	+ this._setBehaviorMap(data.behaviorMap);
	101	+ this._setTags(data.tags);
	102	+ }
	103	+ },
	104	+ _handleResponse: function(_, req) {
	105	+ _setPackageData(req.response);
	106	+ }
	107	+ });
	108	+ })();
	109	+</script>
0	110	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/catalog-element/catalog-element.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../catalog-data/catalog-data.html">
	2	+
	3	+<dom-module id="catalog-element">
	4	+ <template>
	5	+ <catalog-data element-map="{{_elements}}"></catalog-data>
	6	+ </template>
	7	+</dom-module>
	8	+<script>
	9	+ Polymer({
	10	+ is: 'catalog-element',
	11	+ properties: {
	12	+ name: {type: String, notify: true},
	13	+ _elements: Object,
	14	+
	15	+ data: {type: Object, notify: true, computed: 'getData(_elements,name)'}
	16	+ },
	17	+ getData: function(_elements,name) {
	18	+ if (!_elements) return;
	19	+ return _elements[name];
	20	+ }
	21	+ });
	22	+</script>
0	23	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/catalog-guide/catalog-guide.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../catalog-data/catalog-data.html">
	2	+
	3	+<dom-module id="catalog-guide">
	4	+ <template>
	5	+ <catalog-data guide-map="{{_guides}}"></catalog-data>
	6	+ <iron-ajax id="req" auto url="[[src]]" method="get" handle-as="text" last-response="{{content}}" on-error="_didReceiveError"></iron-ajax>
	7	+ </template>
	8	+</dom-module>
	9	+<script>
	10	+ Polymer({
	11	+ is: 'catalog-guide',
	12	+ properties: {
	13	+ name: {type: String, notify: true},
	14	+ _guides: {type: Object, notify: true},
	15	+
	16	+ data: {type: Object, notify: true, computed: 'getData(_guides,name)'},
	17	+ src: {type: String, notify: true, computed: 'getSrc(name)'},
	18	+ content: {type: String, notify: true}
	19	+ },
	20	+ getData: function(_guides,name) {
	21	+ if (!_guides) return;
	22	+ return _guides[name];
	23	+ },
	24	+ getSrc: function(name) {
	25	+ return "/data/guides/" + name + ".html";
	26	+ },
	27	+ _didReceiveError: function(e) {
	28	+ this.fire('catalog-guide-error', e.detail);
	29	+ }
	30	+ });
	31	+</script>
0	32	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/catalog-package/catalog-package.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../catalog-data/catalog-data.html">
	2	+
	3	+<dom-module id="catalog-package">
	4	+ <template>
	5	+ <catalog-data package-map="{{_packages}}"></catalog-data>
	6	+ </template>
	7	+</dom-module>
	8	+<script>
	9	+ Polymer({
	10	+ is: 'catalog-package',
	11	+ properties: {
	12	+ name: {type: String, notify: true},
	13	+ _packages: {type: Object, notify: true},
	14	+
	15	+ data: {type: Object, notify: true, computed: 'getData(_packages,name)'}
	16	+ },
	17	+ getData: function(_packages,name) {
	18	+ if (!_packages) return;
	19	+ return _packages[name];
	20	+ }
	21	+ });
	22	+</script>
0	23	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/element-action-menu/element-action-menu.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	2	+
	3	+<link rel="import" href="../catalog-element/catalog-element.html">
	4	+
	5	+<dom-module id="element-action-menu">
	6	+ <template>
	7	+ <style>
	8	+ :host {
	9	+ @apply(--layout);
	10	+ @apply(--layout-center);
	11	+ @apply(--layout-center-justified);
	12	+ position: absolute;
	13	+ text-align: center;
	14	+ padding-top: 15px;
	15	+ margin-right: 5px;
	16	+ opacity: 1;
	17	+ transition: opacity 0.2s;
	18	+ -webkit-transition: opacity 0.2s;
	19	+ }
	20	+
	21	+ :host(.cards) {
	22	+ background-color: rgba(255, 255, 255, 0.9);
	23	+ margin-right: 0px;
	24	+ }
	25	+
	26	+ :host(.hidden) {
	27	+ pointer-events: none;
	28	+ opacity: 0;
	29	+ }
	30	+
	31	+ a, iron-icon {
	32	+ font-size: 12px;
	33	+ color: #666;
	34	+ outline: none;
	35	+ }
	36	+
	37	+ a {
	38	+ margin: 0 5px;
	39	+ cursor: pointer;
	40	+ }
	41	+
	42	+ span {
	43	+ width: 40px;
	44	+ display: block;
	45	+ }
	46	+
	47	+ a:hover,
	48	+ a:hover iron-icon {
	49	+ color: black;
	50	+ }
	51	+
	52	+ iron-icon {
	53	+ --iron-icon-width: 18px;
	54	+ --iron-icon-height: 18px;
	55	+ }
	56	+
	57	+ cart-item-icon {
	58	+ --cart-item-icon-label: {
	59	+ display: block;
	60	+ width: 40px;
	61	+ };
	62	+ }
	63	+
	64	+ </style>
	65	+ <catalog-element name="[[element]]" data="{{_element}}"></catalog-element>
	66	+
	67	+ <a tabindex="0" role="button" on-tap="cartAdd">
	68	+ <cart-item-icon id="cartItemIcon" element="[[element]]" present-label="Remove" absent-label="Add" no-label="[[iconsOnly]]"></cart-item-icon>
	69	+ </a>
	70	+
	71	+ <a tabindex="0" role="button" on-click="navToDocs" aria-label="View Docs">
	72	+ <iron-icon icon="description" title="View Docs"></iron-icon>
	73	+ <span hidden$="[[iconsOnly]]">Docs</span>
	74	+ </a>
	75	+
	76	+ <a tabindex="0" role="button" href="[[githubLink(_element.source)]]" target="_blank" title="View Source on GitHub" aria-label="View Source on GitHub">
	77	+ <iron-icon icon="code"></iron-icon>
	78	+ <span hidden$="[[iconsOnly]]">Source</span>
	79	+ </a>
	80	+
	81	+ <a tabindex="0" role="button" on-click="navToDemo" hidden$="[[!_element.demo]]" aria-label="View Demo">
	82	+ <iron-icon icon="visibility" title="View Demo"></iron-icon>
	83	+ <span hidden$="[[iconsOnly]]">Demo</span>
	84	+ </a>
	85	+ </template>
	86	+</dom-module>
	87	+
	88	+<script>
	89	+Polymer({
	90	+ is: 'element-action-menu',
	91	+ properties: {
	92	+ element: String,
	93	+ _element: Object,
	94	+ iconsOnly: {type: Boolean, value: false, reflectToAttribute: true}
	95	+ },
	96	+ githubLink: function(source) {
	97	+ return "https://github.com/" + source;
	98	+ },
	99	+ cartAdd: function(e) {
	100	+ e.stopPropagation();
	101	+ e.preventDefault();
	102	+ this.$.cartItemIcon.toggle();
	103	+ },
	104	+ navToDocs: function(e) {
	105	+ e.stopPropagation();
	106	+ e.preventDefault();
	107	+ this.fire('nav', {url: '/elements/' + this.element + '?view=docs'});
	108	+ },
	109	+ navToDemo: function(e) {
	110	+ e.stopPropagation();
	111	+ e.preventDefault();
	112	+ if (e.currentTarget.hasAttribute('disabled')) return false;
	113	+ this.fire('nav', {url: '/elements/' + this.element + '?active=' + this._element.active + "&view=demo:" + this._element.demo.path});
	114	+ }
	115	+});
	116	+</script>
0	117	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/element-card/element-card.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
	2	+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
	3	+
	4	+<link rel="import" href="../catalog-element/catalog-element.html">
	5	+<link rel="import" href="../catalog-package/catalog-package.html">
	6	+<link rel="import" href="../hero-image/hero-image.html">
	7	+<link rel="import" href="../package-symbol/package-symbol.html">
	8	+<link rel="import" href="../element-action-menu/element-action-menu.html">
	9	+
	10	+<dom-module id="element-card">
	11	+ <template>
	12	+ <style>
	13	+ :host {
	14	+ display: block;
	15	+ margin: 10px 10px 10px 0;
	16	+ cursor: pointer;
	17	+ border-radius: 4px;
	18	+ border: 1px solid #d0d0d0;
	19	+ background: white;
	20	+ flex: 1 250px;
	21	+ max-width: calc(33% - 10px);
	22	+ transition-properties: opacity, box-shadow;
	23	+ transition-duration: 0.4s;
	24	+
	25	+ -webkit-transition-properties: opacity, box-shadow;
	26	+ -webkit-transition-duration: 0.4s;
	27	+ }
	28	+
	29	+ @media (max-width: 1070px) {
	30	+ :host {
	31	+ max-width: calc(50% - 10px);
	32	+ }
	33	+ }
	34	+
	35	+ @media (max-width: 530px) {
	36	+ :host {
	37	+ max-width: calc(100% - 10px);
	38	+ }
	39	+ }
	40	+
	41	+ :host(:hover),
	42	+ :host(.hover) {
	43	+ @apply(--shadow-elevation-2dp);
	44	+ }
	45	+
	46	+ h3 {
	47	+ font-size: 16px;
	48	+ font-weight: 500;
	49	+ margin: 0;
	50	+ padding: 10px 16px 0;
	51	+ }
	52	+
	53	+ p {
	54	+ margin: 0;
	55	+ }
	56	+
	57	+ #el {
	58	+ cursor: pointer;
	59	+ }
	60	+
	61	+ #hero {
	62	+ width: 100%;
	63	+ height: 120px;
	64	+ background: #ccc;
	65	+ border-radius: 3px 3px 0 0;
	66	+ overflow: hidden;
	67	+ border-bottom: 1px solid #e5e5e5;
	68	+ }
	69	+
	70	+ #hero > img {
	71	+ width: 100%;
	72	+ height: 100%;
	73	+ }
	74	+
	75	+ .meta {
	76	+ border-top: 1px solid;
	77	+ border-bottom: 1px solid;
	78	+ border-color: var(--divider-color);
	79	+ padding: 10px 16px;
	80	+ }
	81	+
	82	+ .meta + .meta {
	83	+ border-top: 0;
	84	+ }
	85	+
	86	+ .meta:last-child {
	87	+ border-bottom: 0;
	88	+ }
	89	+
	90	+ #el-desc {
	91	+ @apply(--paper-font-body1);
	92	+ color: var(--secondary-text-color);
	93	+ margin: 0;
	94	+ padding: 10px 16px;
	95	+ height: 75px;
	96	+ }
	97	+
	98	+ .package {
	99	+ font-size: 12px;
	100	+ font-weight: 500;
	101	+ }
	102	+
	103	+ .package package-symbol {
	104	+ margin: 0 15px 0 0;
	105	+ }
	106	+
	107	+ .package > a:hover {
	108	+ text-decoration: underline;
	109	+ }
	110	+
	111	+ .tags iron-icon {
	112	+ margin: 0 15px 0 0;
	113	+ padding: 5px;
	114	+ color: var(--secondary-text-color);
	115	+ --iron-icon-size: 18px;
	116	+ }
	117	+
	118	+ .tag {
	119	+ margin-right: 4px;
	120	+ font-size: 12px;
	121	+ }
	122	+
	123	+ .tag:hover {
	124	+ text-decoration: underline;
	125	+ }
	126	+
	127	+ .tag:after {
	128	+ margin-left: -3px;
	129	+ content: " ,";
	130	+ }
	131	+
	132	+ .tag:last-of-type:after {
	133	+ content: "";
	134	+ }
	135	+ </style>
	136	+ <a href="[[_getElementLink(item.name)]]">
	137	+ <div id="content" class="vertical layout">
	138	+ <div id="el" view="docs">
	139	+ <div id="hero" on-mouseenter="_mouseEnter" on-mouseleave="_mouseLeave" style$="[[_computeStyle(color)]]">
	140	+ <img src="[[_getImageSrc(item.hero)]]">
	141	+ </div>
	142	+ <h3>[[item.name]]</h3>
	143	+ </div>
	144	+ <p id="el-desc">[[item.description]]</p>
	145	+ <div class="horizontal layout center meta package">
	146	+ <package-symbol symbol="[[packageSymbol]]" color="[[color]]"></package-symbol>
	147	+ <a href="[[_getPackageLink(item.package)]]">[[item.package]]</a>
	148	+ </div>
	149	+ <div class="meta tags">
	150	+ <iron-icon icon="maps:local-offer" class="flex-none"></iron-icon>
	151	+ <template is="dom-repeat" items="[[item.tags]]" as="tag">
	152	+ <a href="[[_getTagLink(item.package, tag)]]" class="tag">[[tag]]</a>
	153	+ </template>
	154	+ </div>
	155	+ </div>
	156	+ </a>
	157	+ </template>
	158	+</dom-module>
	159	+
	160	+<script>
	161	+(function() {
	162	+ var sharedActionMenu = null;
	163	+ var activeCard = null;
	164	+
	165	+ function mouseEnter() {
	166	+ if (activeCard) {
	167	+ activeCard.showActions();
	168	+ }
	169	+ }
	170	+
	171	+ function mouseLeave() {
	172	+ if (activeCard) {
	173	+ activeCard.hideActions();
	174	+ }
	175	+ }
	176	+
	177	+ Polymer({
	178	+ is: 'element-card',
	179	+ enableCustomStyleProperties: true,
	180	+ properties: {
	181	+ item: Object,
	182	+ color: String,
	183	+ packageSymbol: String
	184	+ },
	185	+
	186	+ observers: [
	187	+ '_updatePackage(_element)'
	188	+ ],
	189	+
	190	+ attached: function() {
	191	+ this.style.opacity = 0;
	192	+
	193	+ this.async(function() {
	194	+ this.style.opacity = 1;
	195	+ }, 1);
	196	+ },
	197	+
	198	+ detached: function() {
	199	+ if (activeCard === this) {
	200	+ activeCard = null;
	201	+ if (sharedActionMenu) {
	202	+ Polymer.dom(this.parentNode).removeChild(sharedActionMenu);
	203	+ sharedActionMenu = null;
	204	+ }
	205	+ }
	206	+ },
	207	+
	208	+ _tagClicked: function(e) {
	209	+ e.stopPropagation();
	210	+ this.fire('update-params', {tag: e.currentTarget.name});
	211	+ },
	212	+ _computeStyle: function(color) {
	213	+ return 'background-color:' + color;
	214	+ },
	215	+ _getElementLink: function(elementName) {
	216	+ return '/elements/' + elementName;
	217	+ },
	218	+ _getImageSrc: function(src) {
	219	+ return src && src.length ? src : '/images/hero/random-' + Math.ceil(Math.random() * 4) + '.svg';
	220	+ },
	221	+
	222	+ _getPackageLink: function(packageName) {
	223	+ return '/browse?package=' + packageName + '&view=cards';
	224	+ },
	225	+
	226	+ _getTagLink: function(packageName, tag) {
	227	+ return '/browse?tag=' + tag + '&view=cards';
	228	+ },
	229	+
	230	+ showActions: function() {
	231	+ var top = this.$.hero.offsetTop;
	232	+ var left = this.$.hero.offsetLeft;
	233	+ var width = this.$.hero.offsetWidth;
	234	+
	235	+ if (!sharedActionMenu) {
	236	+ sharedActionMenu = document.createElement('element-action-menu');
	237	+ sharedActionMenu.classList.add('cards');
	238	+ sharedActionMenu.classList.add('hidden');
	239	+ sharedActionMenu.addEventListener('mouseenter', mouseEnter);
	240	+ sharedActionMenu.addEventListener('mouseleave', mouseLeave);
	241	+ }
	242	+ if (!sharedActionMenu.parentNode) {
	243	+ Polymer.dom(this.parentNode).appendChild(sharedActionMenu);
	244	+ }
	245	+
	246	+ top += this.$.hero.offsetHeight - sharedActionMenu.offsetHeight;
	247	+
	248	+ sharedActionMenu.element = this.item.name;
	249	+ sharedActionMenu.style.top = top + 'px';
	250	+ sharedActionMenu.style.left = left + 'px';
	251	+ sharedActionMenu.style.width = width + 'px';
	252	+
	253	+ this._layoutIfNeeded(sharedActionMenu);
	254	+ sharedActionMenu.classList.remove('hidden');
	255	+ this.classList.add('hover');
	256	+ sharedActionMenu.cancelDebouncer('hide');
	257	+ },
	258	+
	259	+ hideActions: function() {
	260	+ if (sharedActionMenu && sharedActionMenu.element == this.item.name) {
	261	+ sharedActionMenu.debounce('hide', function() {
	262	+ sharedActionMenu.classList.add('hidden');
	263	+ }, 10);
	264	+ this.classList.remove('hover');
	265	+ }
	266	+ },
	267	+
	268	+ _mouseEnter: function() {
	269	+ activeCard = this;
	270	+ mouseEnter();
	271	+ },
	272	+
	273	+ _mouseLeave: function(e) {
	274	+ mouseLeave();
	275	+ },
	276	+
	277	+ _layoutIfNeeded: function(el) {
	278	+ return el.offsetTop;
	279	+ }
	280	+ });
	281	+
	282	+})();
	283	+</script>
0	284	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/element-table-cards/element-table-cards.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../element-card/element-card.html">
	2	+<link rel="import" href="../catalog-data/catalog-data.html">
	3	+
	4	+<dom-module id="element-table-cards">
	5	+ <style>
	6	+ :host {
	7	+ display: block;
	8	+ max-width: 920px;
	9	+ }
	10	+ #cards {
	11	+ @apply(--layout-horizontal);
	12	+ @apply(--layout-wrap);
	13	+
	14	+ margin-right: -10px;
	15	+ }
	16	+ </style>
	17	+ <template>
	18	+ <catalog-data package-map="{{packages}}"></catalog-data>
	19	+ <div id="cards" on-tap="_tap">
	20	+ <!--
	21	+ Waiting for Kevin :)
	22	+ <template name="element-cards-repeat" is="dom-repeat" items="[[elements]]" initial-count="10" chunk-count="10">
	23	+ <element-card item="[[item]]" color="[[_getColor(item)]]" package-symbol="[[_getPackageSymbol(item)]]"></element-card>
	24	+ </template>
	25	+ -->
	26	+ </div>
	27	+ </template>
	28	+</dom-module>
	29	+<script>
	30	+ Polymer({
	31	+ is: 'element-table-cards',
	32	+
	33	+ properties: {
	34	+ packages: {
	35	+ type: Array
	36	+ },
	37	+
	38	+ elements: {
	39	+ type: Array
	40	+ }
	41	+ },
	42	+
	43	+ observers: [
	44	+ '_render(elements, packages, isAttached)'
	45	+ ],
	46	+
	47	+ _findAncestor: function(node, fn) {
	48	+ while (node && fn.call(this, node)) {
	49	+ node = node.parentNode;
	50	+ }
	51	+ return node;
	52	+ },
	53	+
	54	+ _tap: function(e) {
	55	+ var sourceEvent = e.detail.sourceEvent;
	56	+ var A = this._findAncestor(e.target, function(node) {
	57	+ return node != this && node.tagName !== 'A';
	58	+ });
	59	+
	60	+ if (A && A.tagName === 'A' && A.href.indexOf(location.host) > 0) {
	61	+ if (sourceEvent.ctrlKey \|\| sourceEvent.metaKey) {
	62	+ window.open(A.href);
	63	+ } else {
	64	+ this.fire('nav', {url: A.href});
	65	+ }
	66	+ e.preventDefault();
	67	+ }
	68	+ },
	69	+
	70	+ _getColor: function(item) {
	71	+ return this.packages[item.package].color;
	72	+ },
	73	+
	74	+ _getPackageSymbol: function(item) {
	75	+ return this.packages[item.package].symbol;
	76	+ },
	77	+
	78	+ _render: function(elements, packages) {
	79	+ if (elements) {
	80	+ this.$.cards.innerHTML = '';
	81	+
	82	+ var head = 0;
	83	+ var batchSize = 3;
	84	+ var flush = function() {
	85	+ if (head + batchSize >= elements.length) {
	86	+ batchSize = elements.length - head;
	87	+ }
	88	+
	89	+ if (batchSize <= 0) {
	90	+ return false;
	91	+ }
	92	+ var el;
	93	+ var firstHead = head;
	94	+ var lastHead = firstHead + batchSize;
	95	+
	96	+ for (; head < lastHead; head++) {
	97	+ el = document.createElement('element-card');
	98	+ el.item = elements[head];
	99	+ el.color = packages[el.item.package].color;
	100	+ el.packageSymbol = packages[el.item.package].symbol;
	101	+ Polymer.dom(this.$.cards).appendChild(el);
	102	+ }
	103	+ return true;
	104	+ };
	105	+ var batch = function() {
	106	+ if (flush.call(this)) {
	107	+ batchSize = 10;
	108	+ requestAnimationFrame(batch.bind(this));
	109	+ }
	110	+ };
	111	+
	112	+ batch.call(this);
	113	+ }
	114	+ }
	115	+ });
	116	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/element-table/element-table.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
	2	+
	3	+<link rel="import" href="../element-action-menu/element-action-menu.html">
	4	+<link rel="import" href="../tag-link/tag-link.html">
	5	+
	6	+<dom-module id="element-table">
	7	+ <template>
	8	+ <style>
	9	+ :host {
	10	+ display: block;
	11	+ position: relative;
	12	+ background: white;
	13	+ border: 1px solid #d0d0d0;
	14	+ border-radius: 3px;
	15	+ opacity: 1;
	16	+ transition: opacity 0.4s;
	17	+ }
	18	+
	19	+ :host(.hidden) {
	20	+ transition: none;
	21	+ opacity: 0;
	22	+ }
	23	+
	24	+ .header {
	25	+ padding: 0 24px;
	26	+ line-height: 56px;
	27	+ font-size: 12px;
	28	+ font-weight: 500;
	29	+ border-bottom: 1px solid #e5e5e5;
	30	+ }
	31	+
	32	+ :host([narrow-viewport]) .header .description {
	33	+ display: none;
	34	+ }
	35	+
	36	+ :host(:not([narrow-viewport])) .header,
	37	+ :host(:not([narrow-viewport])) .row,
	38	+ :host(:not([narrow-viewport])) .row a {
	39	+ @apply(--layout-horizontal);
	40	+ }
	41	+
	42	+ :host([narrow-viewport]) .header,
	43	+ :host([narrow-viewport]) .row,
	44	+ :host([narrow-viewport]) .row a {
	45	+ @apply(--layout-vertical);
	46	+ }
	47	+
	48	+ .row {
	49	+ border-bottom: 1px solid #e5e5e5;
	50	+ }
	51	+
	52	+ .row a {
	53	+ box-sizing: border-box;
	54	+ cursor: pointer;
	55	+ overflow: hidden;
	56	+ width: 100%;
	57	+ padding: 15px 24px;
	58	+ font-weight: 400;
	59	+ font-size: 13px;
	60	+ }
	61	+
	62	+ .row.hover {
	63	+ background: #fafafa;
	64	+ }
	65	+
	66	+ :host(:not([narrow-viewport])) .row.hover .description {
	67	+ padding-right: 120px;
	68	+ }
	69	+
	70	+ .name {
	71	+ min-width: 250px;
	72	+ font-weight: 500;
	73	+ }
	74	+
	75	+ .name .narrow {
	76	+ display: none;
	77	+ }
	78	+
	79	+ :host([narrow-viewport]) .name .narrow {
	80	+ display: inline;
	81	+ }
	82	+
	83	+ .row .description {
	84	+ color: #757575;
	85	+ }
	86	+
	87	+ :host(:not([narrow-viewport])) .row .description {
	88	+ white-space: nowrap;
	89	+ overflow: hidden;
	90	+ text-overflow: ellipsis;
	91	+ }
	92	+
	93	+ #actions element-action-menu {
	94	+ right: 0;
	95	+ }
	96	+
	97	+ </style>
	98	+ <iron-media-query query="(max-width: 640px)" query-matches="{{narrowViewport}}"></iron-media-query>
	99	+
	100	+ <div class="header" style$="[[_getHeaderStyle(color)]]">
	101	+ <div class="name">Name <span class="narrow">/ Description</span></div>
	102	+ <div class="description">Description</div>
	103	+ </div>
	104	+ <template is="dom-repeat" items="[[elements]]">
	105	+ <div class="row" data-index$="[[index]]">
	106	+ <a href$="[[_elementLink(item.name)]]">
	107	+ <div class="name">[[item.name]]</div>
	108	+ <div class="description">[[item.description]]</div>
	109	+ </a>
	110	+ </div>
	111	+ </template>
	112	+ <div id="actions"></div>
	113	+ </template>
	114	+</dom-module>
	115	+<script>
	116	+ Polymer({
	117	+ is: 'element-table',
	118	+
	119	+ properties: {
	120	+ elements: {
	121	+ type: Array,
	122	+ observer: '_elementsChanged'
	123	+ },
	124	+ color: {
	125	+ type: String
	126	+ },
	127	+ narrowViewport: {
	128	+ type: Boolean,
	129	+ reflectToAttribute: true
	130	+ }
	131	+ },
	132	+
	133	+ listeners: {
	134	+ 'tap': '_tap',
	135	+ 'mouseover': '_mouseOver',
	136	+ 'mouseleave': '_mouseLeave'
	137	+ },
	138	+
	139	+ _currentRowIndex: -1,
	140	+
	141	+ _sharedActionMenu: null,
	142	+
	143	+ _findAncestor: function(node, fn) {
	144	+ while (node && fn.call(this, node)) {
	145	+ node = node.parentNode;
	146	+ }
	147	+ return node;
	148	+ },
	149	+
	150	+ _tap: function(e) {
	151	+ var sourceEvent = e.detail.sourceEvent;
	152	+ var A = this._findAncestor(e.target, function(node) {
	153	+ return node != this && node.tagName !== 'A';
	154	+ });
	155	+
	156	+ if (A && A.tagName === 'A' && A.href.indexOf(location.host) > 0) {
	157	+ if (sourceEvent.ctrlKey \|\| sourceEvent.metaKey) {
	158	+ window.open(A.href);
	159	+ } else {
	160	+ this.fire('nav', {url: A.href});
	161	+ }
	162	+ e.preventDefault();
	163	+ }
	164	+ },
	165	+
	166	+ _mouseOver: function(e) {
	167	+ var row = this._findAncestor(e.target, function(node) {
	168	+ return node != this && !node.classList.contains('row') && node.id !== 'actions';
	169	+ });
	170	+ if (row && row.classList.contains('row')) {
	171	+ if (this._currentRowIndex != row.dataset.index) {
	172	+ this._hideActions();
	173	+ this._showActions(row, row.dataset.index);
	174	+ }
	175	+ } else if (row.id !== 'actions') {
	176	+ this._hideActions();
	177	+ }
	178	+ },
	179	+
	180	+ _mouseLeave: function() {
	181	+ this._hideActions();
	182	+ },
	183	+
	184	+ _showActions: function(row, index) {
	185	+ var sharedActionMenu = this._sharedActionMenu;
	186	+ var rowOffsetTop = row.offsetTop;
	187	+
	188	+ if (!sharedActionMenu) {
	189	+ this._sharedActionMenu = document.createElement('element-action-menu');
	190	+ this._sharedActionMenu.classList.add('hidden');
	191	+ Polymer.dom(this.$.actions).appendChild(this._sharedActionMenu);
	192	+ sharedActionMenu = this._sharedActionMenu;
	193	+ }
	194	+
	195	+ sharedActionMenu.iconsOnly = true;
	196	+ sharedActionMenu.element = this.elements[index].name;
	197	+ sharedActionMenu.style.top = rowOffsetTop + 'px';
	198	+
	199	+ this._layoutIfNeeded(sharedActionMenu);
	200	+ sharedActionMenu.classList.remove('hidden');
	201	+ row.classList.add('hover');
	202	+
	203	+ this._currentRowIndex = index;
	204	+ this._currentRow = row;
	205	+ },
	206	+
	207	+ _hideActions: function() {
	208	+ var row = this._currentRow;
	209	+ var sharedActionMenu = this._sharedActionMenu;
	210	+
	211	+ if (row) {
	212	+ if (sharedActionMenu) {
	213	+ sharedActionMenu.classList.add('hidden');
	214	+ }
	215	+ row.classList.remove('hover');
	216	+ this._currentRowIndex = -1;
	217	+ this._currentRow = null;
	218	+ }
	219	+ },
	220	+
	221	+ _elementLink: function(name) {
	222	+ return "/elements/" + name;
	223	+ },
	224	+
	225	+ _getHeaderStyle: function(color) {
	226	+ return 'background-color: '+ color+';';
	227	+ },
	228	+
	229	+ _elementsChanged: function() {
	230	+ this.classList.add('hidden');
	231	+ this.async(function() {
	232	+ this.classList.remove('hidden');
	233	+ }, 1);
	234	+ },
	235	+
	236	+ _layoutIfNeeded: function(el) {
	237	+ return el.offsetTop;
	238	+ }
	239	+ });
	240	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/elements.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../bower_components/polymer/polymer.html">
	2	+<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html">
	3	+<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
	4	+<link rel="import" href="../bower_components/prism-element/prism-highlighter.html">
	5	+<link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">
	6	+
	7	+<link rel="import" href="app-shell/app-shell.html">
0	8	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/guide-card/guide-card.css 0 → 100644

View file @07d13c9

	1	+:host {
	2	+ display: block;
	3	+ width: 456px;
	4	+ margin: 0 16px 16px;
	5	+ background: white;
	6	+}
	7	+
	8	+#content {
	9	+ border: 1px solid #e5e5e5;
	10	+}
	11	+
	12	+h3 {
	13	+ font-size: 20px;
	14	+ font-weight: 500;
	15	+ margin: 0;
	16	+ padding: 10px 16px 0;
	17	+}
	18	+
	19	+img {
	20	+ width: 456px;
	21	+ height: 220px;
	22	+ background: #673AB7;
	23	+ border: 0;
	24	+}
	25	+
	26	+p {
	27	+ margin: 0;
	28	+ line-height: 130%;
	29	+ margin: 0 16px 16px;
	30	+}
	31	+
	32	+#el {
	33	+ cursor: pointer;
	34	+}
	35	+
	36	+#el-graphic {
	37	+ position: relative;
	38	+ width: 100%;
	39	+ height: 120px;
	40	+ background: #ccc;
	41	+ border-radius: 3px 3px 0 0;
	42	+ overflow: hidden;
	43	+}
	44	+
	45	+#el-package package-symbol {
	46	+ margin: 0 15px 0 0;
	47	+}
	48	+
	49	+.meta {
	50	+ @apply(--paper-font-caption);
	51	+ border-top: 1px solid;
	52	+ border-bottom: 1px solid;
	53	+ border-color: var(--divider-color);
	54	+ padding: 10px 16px;
	55	+}
	56	+
	57	+.meta + .meta {
	58	+ border-top: 0;
	59	+}
	60	+
	61	+.meta:last-child {
	62	+ border-bottom: 0;
	63	+}
	64	+
	65	+#el-menu {
	66	+ position: absolute;
	67	+ width: 100%;
	68	+ bottom: 0;
	69	+ padding: 10px 16px;
	70	+ background: rgba(0,0,0,.1);
	71	+ box-sizing: border-box;
	72	+ transform: translate(0, 20px);
	73	+ transition: var(--material-curve-320);
	74	+ opacity: 0;
	75	+ visibility: hidden;
	76	+}
	77	+
	78	+#el-menu a {
	79	+ display: block;
	80	+ text-align: center;
	81	+}
	82	+
	83	+#el-menu a:hover {
	84	+ color: #fff;
	85	+}
	86	+
	87	+#el-menu iron-icon {
	88	+ margin: -2px 8px 0 0;
	89	+}
	90	+
	91	+#el-graphic:hover #el-menu {
	92	+ visibility: visible;
	93	+ transform: translate(0, 0);
	94	+ opacity: 1;
	95	+}
	96	+
	97	+#el-desc {
	98	+ @apply(--paper-font-body1);
	99	+ color: var(--secondary-text-color);
	100	+ margin: 0;
	101	+ padding: 10px 16px;
	102	+ height: 75px;
	103	+}
	104	+
	105	+#el-package {
	106	+ font-weight: 500;
	107	+}
	108	+
	109	+#el-tags iron-icon {
	110	+ margin: 0 15px 0 0;
	111	+ padding: 5px;
	112	+ color: var(--secondary-text-color);
	113	+}
	114	+
	115	+#el-tags tag-link:last-of-type + span {
	116	+ display: none;
	117	+}
0	118	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/guide-card/guide-card.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
	2	+
	3	+<link rel="import" href="../catalog-guide/catalog-guide.html">
	4	+
	5	+<dom-module id="guide-card">
	6	+ <link rel="import" type="css" href="guide-card.css">
	7	+ <template>
	8	+ <catalog-guide name="[[guide]]" data="{{_guide}}"></catalog-guide>
	9	+
	10	+ <div id="content" class="vertical layout">
	11	+ <h3>[[_guide.title]]</h3>
	12	+ <p>[[_guide.summary]]</p>
	13	+ </div>
	14	+ </template>
	15	+</dom-module>
	16	+
	17	+<script>
	18	+Polymer({
	19	+ is: 'guide-card',
	20	+ enableCustomStyleProperties: true,
	21	+ properties: {
	22	+ guide: {type: String, notify: true},
	23	+ _guide: Object
	24	+ }
	25	+});
	26	+</script>
0	27	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/hero-image/hero-image.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-image/iron-image.html">
	2	+
	3	+<dom-module id="hero-image">
	4	+ <style>
	5	+ :host {
	6	+ position: relative;
	7	+ @apply(--layout-horizontal);
	8	+ @apply(--layout-center-justified);
	9	+ @apply(--layout-center);
	10	+ }
	11	+
	12	+ iron-image {
	13	+ @apply(--layout-fit);
	14	+ }
	15	+
	16	+ iron-image::shadow img {
	17	+ fill: white;
	18	+ }
	19	+ </style>
	20	+ <template>
	21	+
	22	+ </template>
	23	+</dom-module>
	24	+
	25	+<script>
	26	+Polymer({
	27	+ is: 'hero-image',
	28	+ properties: {
	29	+ src: {type: String, observer: '_update'},
	30	+ _src: String
	31	+ },
	32	+ ready: function() {
	33	+ this._update();
	34	+ },
	35	+ _update: function(src) {
	36	+ if (src && src.length) {
	37	+ this._src = src;
	38	+ } else {
	39	+ this._src = "/images/hero/random-" + Math.ceil(Math.random() * 4) + ".svg";
	40	+ }
	41	+ }
	42	+});
	43	+</script>
0	44	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/package-symbol/package-symbol.html 0 → 100644

View file @07d13c9

	1	+<dom-module id="package-symbol">
	2	+ <style>
	3	+ :host {
	4	+ display: block;
	5	+ line-height: 34px;
	6	+ width: 34px;
	7	+ height: 34px;
	8	+ background: #ccc;
	9	+ text-align: center;
	10	+ font-weight: 500;
	11	+ font-size: 18px;
	12	+ color: #606060;
	13	+ outline: none;
	14	+ }
	15	+
	16	+ :host(.large) {
	17	+ line-height: 64px;
	18	+ width: 64px;
	19	+ height: 64px;
	20	+ font-size: 30px;
	21	+ }
	22	+ </style>
	23	+ <template>
	24	+ <div style$="[[_getComputedStyle(color)]]">
	25	+ <span>[[symbol]]</span>
	26	+ </div>
	27	+ </template>
	28	+</dom-module>
	29	+
	30	+<script>
	31	+ Polymer({
	32	+ is: 'package-symbol',
	33	+ properties: {
	34	+ symbol: String,
	35	+ color: String
	36	+ },
	37	+
	38	+ _getComputedStyle: function(color) {
	39	+ return 'background-color: ' + color + ';';
	40	+ }
	41	+ });
	42	+</script>
0	43	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/package-tile/package-tile.css 0 → 100644

View file @07d13c9

	1	+:host {
	2	+ display: block;
	3	+ transition: var(--material-curve-320);
	4	+ transform: translate(0, 60px);
	5	+ opacity: 0;
	6	+}
	7	+
	8	+:host(.active) {
	9	+ transform: translate(0, 0);
	10	+ opacity: 1;
	11	+}
	12	+
	13	+#content {
	14	+ display: block;
	15	+ position: relative;
	16	+ width: 100%;
	17	+ background: #fafafa;
	18	+ border-radius: 2px;
	19	+ box-sizing: border-box;
	20	+ overflow: hidden;
	21	+ cursor: pointer;
	22	+ transition: box-shadow 200ms;
	23	+ transition-timing-function: var(--material-curve);
	24	+ color: #606060;
	25	+ border: none;
	26	+ padding: 16px;
	27	+}
	28	+
	29	+:host(:hover) #content {
	30	+ box-shadow: 0 5px 10px rgba(0,0,0,.15);
	31	+}
	32	+
	33	+h2 {
	34	+ font-weight: 400;
	35	+ font-size: 48px;
	36	+ margin: 20px 0;
	37	+ transform: translate(-50px, 0);
	38	+ opacity: 0;
	39	+ transition: all 500ms 320ms;
	40	+ transition-timing-function: var(--material-curve-320);
	41	+}
	42	+
	43	+:host(.active) h2 {
	44	+ transform: translate(0, 0);
	45	+ opacity: 1;
	46	+}
	47	+
	48	+h3 {
	49	+ transform: translate(-50px, 0);
	50	+ opacity: 0;
	51	+ transition: all 600ms 320ms;
	52	+ transition-timing-function: var(--material-curve-320);
	53	+}
	54	+
	55	+:host(.active) h3 {
	56	+ transform: translate(0, 0);
	57	+ opacity: 1;
	58	+}
	59	+
	60	+hr {
	61	+ border: 0;
	62	+ background: #fff;
	63	+ width: 0;
	64	+ height: 1px;
	65	+ opacity: 0.2;
	66	+ margin: 0;
	67	+ transition: width 400ms 320ms;
	68	+ transition-timing-function: var(--material-curve-320);
	69	+}
	70	+
	71	+:host(.active) hr {
	72	+ width: 100%;
	73	+ background: #606060;
	74	+ opacity: 1;
	75	+}
	76	+
	77	+.version {
	78	+ position: absolute;
	79	+ top: 16px;
	80	+ right: 16px;
	81	+ font-size: 13px;
	82	+ transition: all 400ms 320ms;
	83	+ transition-timing-function: var(--material-curve-320);
	84	+ transform: translate(50px, 0);
	85	+ opacity: 0;
	86	+}
	87	+
	88	+:host(.active) .version {
	89	+ transform: translate(0, 0);
	90	+ opacity: 0.8;
	91	+}
	92	+
	93	+.title {
	94	+ display: table-caption;
	95	+ margin: 0 0 15px;
	96	+ height: 64px;
	97	+ font-size: 20px;
	98	+ font-weight: 500;
	99	+ line-height: 28px;
	100	+}
	101	+
	102	+.title[extended] {
	103	+ display: block;
	104	+}
	105	+
	106	+.tagline {
	107	+ transition: all 700ms 320ms;
	108	+ transition-timing-function: var(--material-curve-320);
	109	+ transform: translate(-50px, 0);
	110	+ opacity: 0;
	111	+ font-size: 13px;
	112	+ margin: 10px 0 0 0;
	113	+ line-height: 20px;
	114	+ height: 40px;
	115	+}
	116	+
	117	+:host(.active) .tagline {
	118	+ transform: translate(0, 0);
	119	+ opacity: 1;
	120	+}
0	121	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/package-tile/package-tile.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../catalog-package/catalog-package.html">
	2	+<link rel="import" href="../theme-color/theme-color.html">
	3	+
	4	+<dom-module id="package-tile">
	5	+ <link rel="import" type="css" href="package-tile.css">
	6	+ <template>
	7	+ <catalog-package name="[[name]]" data="{{package}}"></catalog-package>
	8	+ <theme-color id="content" color="[[package.color]]" class="vertical layout" themed themed-border>
	9	+ <span class="version">[[package.version]]</span>
	10	+ <h2 class="symbol">[[package.symbol]]</h2>
	11	+ <h3 class="title" extended$="[[_extendedTitle(package)]]">[[package.title]]</h3>
	12	+ <hr themed-reverse>
	13	+ <p class="tagline">[[package.tagline]]</p>
	14	+ </theme-color>
	15	+ </template>
	16	+</dom-module>
	17	+
	18	+<script>
	19	+ Polymer({
	20	+ is: 'package-tile',
	21	+ enableCustomStyleProperties: true,
	22	+ properties: {
	23	+ name: {type: String, notify: true},
	24	+ package: {type: Object}
	25	+ },
	26	+ attached: function() {
	27	+ var tiles = this.parentNode.querySelectorAll('package-tile');
	28	+ var index = Array.prototype.indexOf.call(tiles, this);
	29	+ setTimeout(function() {
	30	+ this.classList.add('active');
	31	+ }.bind(this), (index + 1) * 50);
	32	+ },
	33	+ _extendedTitle: function(p) {
	34	+ if (p.title.length > 20) return true;
	35	+ }
	36	+ });
	37	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-browse.css 0 → 100644

View file @07d13c9

	1	+:host {
	2	+ background: #fafafa;
	3	+}
	4	+
	5	+a {
	6	+ color: black;
	7	+ text-decoration: none;
	8	+}
	9	+
	10	+#container {
	11	+ background: #fafafa;
	12	+}
	13	+
	14	+.paper-header [paper-drawer-toggle] {
	15	+ margin-left: 10px;
	16	+}
	17	+
	18	+.paper-header {
	19	+ @apply(--layout-horizontal);
	20	+ @apply(--layout-center);
	21	+}
	22	+
	23	+.paper-header h2 {
	24	+ margin-left: 20px;
	25	+ @apply(--layout-flex);
	26	+}
	27	+
	28	+.paper-header .toggleViewButton {
	29	+ --paper-icon-button-ink-color: transparent;
	30	+}
	31	+
	32	+.paper-header .cartButton {
	33	+ margin-right: 10px;
	34	+}
	35	+
	36	+#content {
	37	+ overflow: auto;
	38	+ -webkit-overflow-scrolling: touch;
	39	+ padding: 0 10px;
	40	+}
	41	+
	42	+app-bar .menu-icon {
	43	+ margin-right: 15px;
	44	+}
	45	+
	46	+.elements-title h2 {
	47	+ @apply(--paper-font-title);
	48	+ color: #424242;
	49	+}
	50	+
	51	+.elements-title iron-icon, .elements-title cart-icon {
	52	+ cursor: pointer;
	53	+ margin-left: 16px;
	54	+}
	55	+
	56	+.elements-title > [paper-drawer-toggle] {
	57	+ margin: 0 16px 0 0;
	58	+}
	59	+
	60	+#package-heading .description {
	61	+ font-size: 16px;
	62	+ color: var(--paper-grey-600);
	63	+}
	64	+
	65	+#element-cards, element-table,
	66	+.elements-title, #package-heading {
	67	+ max-width: 920px;
	68	+ margin: 20px auto;
	69	+}
	70	+
	71	+#package-heading {
	72	+ margin: 0px auto 16px;
	73	+}
	74	+
	75	+[size=xs] > * {
	76	+ display: none;
	77	+}
	78	+
	79	+responsive-element[size=xs].layout {
	80	+ -ms-flex-direction: column;
	81	+ -webkit-flex-direction: column;
	82	+ flex-direction: column;
	83	+}
	84	+
	85	+[size=xs] app-sidebar {
	86	+ min-width: 100%;
	87	+ height: auto;
	88	+}
	89	+
	90	+[size=xs] app-sidebar paper-toolbar /deep/ #topBar {
	91	+ padding: 0 16px;
	92	+}
	93	+
	94	+app-sidebar paper-toolbar {
	95	+ --paper-toolbar-background: white;
	96	+ --paper-toolbar: {
	97	+ box-sizing: border-box;
	98	+ }
	99	+}
	100	+
	101	+#package-tag {
	102	+ display: none;
	103	+}
	104	+
	105	+#package-info {
	106	+ position: relative;
	107	+}
	108	+
	109	+#package-header {
	110	+ position: relative;
	111	+ padding: 16px 24px 0 24px;
	112	+ overflow: hidden;
	113	+}
	114	+
	115	+#package-header iron-icon {
	116	+ cursor: pointer;
	117	+}
	118	+
	119	+#package-header package-symbol {
	120	+ display: inline-block;
	121	+ margin: 0;
	122	+ transform: translate(-50px, 0);
	123	+ opacity: 0;
	124	+ transition: var(--material-curve-320);
	125	+}
	126	+
	127	+#package-title {
	128	+ @apply(--paper-font-title);
	129	+ margin: 0 0 20px;
	130	+ transform: translate(-50px, 0);
	131	+ opacity: 0;
	132	+ transition: var(--material-curve-320);
	133	+}
	134	+
	135	+#package-tagline {
	136	+ margin: 0;
	137	+ padding-right: 80px;
	138	+ transform: translate(-50px, 0);
	139	+ opacity: 0;
	140	+ transition: var(--material-curve-320);
	141	+ font-size: 13px;
	142	+ line-height: 20px;
	143	+}
	144	+
	145	+#package-version {
	146	+ position: absolute;
	147	+ top: 24px;
	148	+ right: 16px;
	149	+ transform: translate(50px, 0);
	150	+ opacity: 0;
	151	+ transition: var(--material-curve-320);
	152	+}
	153	+
	154	+#package-desc {
	155	+ margin: 0;
	156	+}
	157	+
	158	+[size=xs] #package-title {
	159	+ margin-bottom: 0;
	160	+}
	161	+
	162	+[size=xs] #package-tagline {
	163	+ display: none;
	164	+}
	165	+
	166	+[size=xs] #package-tagline {
	167	+ margin-top: 0;
	168	+}
	169	+
	170	+.active #package-header package-symbol,
	171	+.active #package-title,
	172	+.active #package-tagline {
	173	+ transform: translate(0, 0);
	174	+ opacity: 1;
	175	+}
	176	+
	177	+.active #package-version {
	178	+ transform: translate(0, 0);
	179	+ opacity: 0.6;
	180	+}
	181	+
	182	+#search {
	183	+ height: 48px;
	184	+ line-height: 48px;
	185	+ margin-bottom: 12px;
	186	+ position: relative;
	187	+}
	188	+
	189	+#search iron-icon {
	190	+ margin-left: 16px;
	191	+ margin-right: 8px;
	192	+ position: absolute;
	193	+ top: 12px;
	194	+ left: 2px;
	195	+}
	196	+
	197	+#search input {
	198	+ height: 46px;
	199	+ -webkit-appearance: none;
	200	+ line-height: 46px;
	201	+ border: 0;
	202	+ margin: 0;
	203	+ padding-left: 50px;
	204	+ border-bottom: 1px solid #e5e5e5;
	205	+ border-top: 1px solid #e5e5e5;
	206	+ @apply(--paper-font-body1);
	207	+}
	208	+
	209	+#search input:focus {
	210	+ outline: 0;
	211	+ background-color: #eceff1;
	212	+ border-color: #cfd8dc;
	213	+}
	214	+
	215	+#search input::-webkit-search-cancel-button{
	216	+ position: relative;
	217	+ right: 15px;
	218	+}
	219	+
	220	+#package-list {
	221	+ padding: 0 0 10px;
	222	+}
	223	+
	224	+#package-list h5 {
	225	+ margin: 10px 0;
	226	+ padding: 0 16px;
	227	+ color: rgba(0,0,0,.54);
	228	+ font-weight: 500;
	229	+}
	230	+
	231	+#package-list .package {
	232	+ display: block;
	233	+ padding: 9px 16px;
	234	+ font-weight: 500;
	235	+ color: rgba(0,0,0,.87);
	236	+ text-transform: none;
	237	+ cursor: pointer;
	238	+ border-width: 1px 0;
	239	+}
	240	+
	241	+#package-list .package[active] {
	242	+ background: var(--paper-blue-grey-50);
	243	+}
	244	+
	245	+#package-list .package .all-symbol {
	246	+ padding: 5px;
	247	+}
	248	+
	249	+#package-list .package package-symbol, #package-list .package .all-symbol {
	250	+ margin-right: 15px;
	251	+}
	252	+
	253	+#current-tag {
	254	+ background: #2196F3;
	255	+ color: rgba(255,255,255,0.87);
	256	+ padding: 12px;
	257	+ font-size: 16px;
	258	+}
	259	+
	260	+#current-tag b {
	261	+ margin-right: 6px;
	262	+}
	263	+
	264	+#current-tag span {
	265	+ text-transform: uppercase;
	266	+}
	267	+
	268	+.tags tag-link:last-of-type + span {
	269	+ display: none;
	270	+}
	271	+
	272	+[view=cards] element-table {
	273	+ display: none;
	274	+}
	275	+
	276	+[view=table] #element-cards {
	277	+ display: none;
	278	+}
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-browse.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
	2	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	3	+<link rel="import" href="../../bower_components/iron-icons/av-icons.html">
	4	+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
	5	+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
	6	+<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
	7	+
	8	+<link rel="import" href="../app-sidebar/app-sidebar.html">
	9	+<link rel="import" href="../app-logo/app-logo.html">
	10	+<link rel="import" href="../app-bar/app-bar.html">
	11	+<link rel="import" href="../cart-icon/cart-icon.html">
	12	+<link rel="import" href="../catalog-data/catalog-data.html">
	13	+<link rel="import" href="../catalog-package/catalog-package.html">
	14	+<link rel="import" href="../package-symbol/package-symbol.html">
	15	+<link rel="import" href="../tag-link/tag-link.html">
	16	+<link rel="import" href="../theme-color/theme-color.html">
	17	+<link rel="import" href="../element-action-menu/element-action-menu.html">
	18	+<link rel="import" href="../element-table/element-table.html">
	19	+<link rel="import" href="../element-table-cards/element-table-cards.html">
	20	+<link rel="import" href="../responsive-element/responsive-element.html">
	21	+
	22	+<dom-module id="page-browse">
	23	+ <link rel="import" type="css" href="page-browse.css">
	24	+ <template>
	25	+ <catalog-data elements="{{elements}}" packages="{{packages}}"></catalog-data>
	26	+ <catalog-package name="[[package]]" data="{{packageInfo}}"></catalog-package>
	27	+ <paper-drawer-panel id="drawerPanel" responsive-width="900px" narrow="{{narrowMode}}" drawer-width="272px" disable-edge-swipe>
	28	+ <app-sidebar drawer>
	29	+ <paper-toolbar>
	30	+ <app-logo class="flex" tabindex="1"></app-logo>
	31	+ <app-bar class="horizontal layout center end-justified" no-search></app-bar>
	32	+ </paper-toolbar>
	33	+ <div id="search" class="layout horizontal center">
	34	+ <iron-icon icon="search"></iron-icon>
	35	+ <input id="query" type="search" autocomplete="off" value="{{q::keyup}}" placeholder="Search Elements" class="flex" on-search="onSearch">
	36	+ </div>
	37	+ <div class="content">
	38	+ <div id="package-tag" hidden$="[[!tag]]">
	39	+ <span>[[tag]]</span> <iron-icon icon="clear" on-tap="clearTag"></iron-icon>
	40	+ </div>
	41	+ <div id="package-list">
	42	+ <nav>
	43	+ <a class="package" is="app-link" href="/browse?package=" active$="[[_isEqual(package,'')]]" tabindex="1">
	44	+ <div class="layout horizontal center">
	45	+ <div class="all-symbol" aria-hidden="true"><iron-icon icon="apps"></iron-icon></div>
	46	+ <span class="title flex">All Elements</span>
	47	+ </div>
	48	+ </a>
	49	+ <template is="dom-repeat" items="[[packages]]">
	50	+ <a class="package" is="app-link" href$="[[_packageLink(item.name)]]" active$="[[_isEqual(package,item.name)]]" tabindex="1">
	51	+ <div class="layout horizontal center">
	52	+ <package-symbol aria-hidden="true" symbol="[[item.symbol]]" color="[[item.color]]"></package-symbol>
	53	+ <span class="title flex">[[item.title]]</span>
	54	+ </div>
	55	+ </a>
	56	+ </template>
	57	+ </nav>
	58	+ </div>
	59	+ <div hidden$="[[!tag]]" id="current-tag" class="horizontal layout center">
	60	+ <b>Tag:</b> <span class="flex">[[tag]]</span> <iron-icon icon="clear" on-tap="clearTag"></iron-icon>
	61	+ </div>
	62	+ </div>
	63	+ </app-sidebar>
	64	+ <paper-header-panel id="container" mode="[[_getMode(narrowMode)]]" view$="[[_actualView(view)]]" main>
	65	+ <div class="paper-header">
	66	+ <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
	67	+ <h2 class="flex">[[pageTitle]]</h2>
	68	+ <paper-icon-button class="toggleViewButton" icon="[[viewIcon]]" on-tap="toggleView" hidden$="[[_forceCards]]"></paper-icon-button>
	69	+ <cart-icon class="cartButton" id="cart-toggle" icon="stars" on-tap="cartOpen"></cart-icon>
	70	+ </div>
	71	+ <div id="content">
	72	+ <div id="package-heading" hidden$="[[!packageInfo]]">
	73	+ <div class="description">[[packageInfo.description]]</div>
	74	+ </div>
	75	+
	76	+ <template is="dom-if" if="[[_stampCards(view)]]" restamp>
	77	+ <element-table-cards id="element-cards" elements="[[_filteredElements]]"></element-table-cards>
	78	+ </template>
	79	+ <template is="dom-if" if="[[_stampTable(view)]]" restamp>
	80	+ <element-table color="[[_getColor(packageInfo)]]" elements="[[_filteredElements]]" on-tag-selected="updateTag"></element-table>
	81	+ </template>
	82	+ </div>
	83	+ </paper-header-panel>
	84	+ </paper-drawer-panel>
	85	+ </template>
	86	+</dom-module>
	87	+
	88	+<script>
	89	+ (function() {
	90	+ var _lastNavigated = null;
	91	+ Polymer({
	92	+ is: 'page-browse',
	93	+ enableCustomStyleProperties: true,
	94	+ properties: {
	95	+ router: Object,
	96	+ pageTitle: {type: String},
	97	+
	98	+ // Query Parameters
	99	+ q: {type: String, notify: true, value: '', observer: '_qChanged'},
	100	+ tag: {type: String, notify: true, value: ''},
	101	+ package: {type: String, notify: true, value: ''},
	102	+ view: {type: String, notify: true},
	103	+
	104	+ tagList: {type: Array, computed: 'arrayParam(tag)', value: function() { return []; }},
	105	+ packageList: {type: Array, computed: 'arrayParam(package)', value: function() { return []; }},
	106	+
	107	+ viewIcon: {type: String, computed: 'computeViewIcon(view)', value: 'view-module'},
	108	+ packages: Array,
	109	+ packageInfo: {type: Object, value: {}},
	110	+ elements: Array,
	111	+
	112	+ _filteredElements: Array,
	113	+ _elementCount: Number,
	114	+ _forceCards: {type: Boolean},
	115	+ },
	116	+ observers: [
	117	+ 'updateURL(q,package, tag, view, elements)',
	118	+ 'updateMeta(package, packageInfo)',
	119	+ 'scrollToTop(package)'
	120	+ ],
	121	+ listeners: {
	122	+ 'update-params': '_handleParamsUpdate'
	123	+ },
	124	+
	125	+ ready: function() {
	126	+ this.view = this._forceCards ? 'cards' : 'table';
	127	+ },
	128	+
	129	+ filter: function(element) {
	130	+ if (this.q && this.q.length && element.name.indexOf(this.q) < 0) {
	131	+ return false;
	132	+ }
	133	+
	134	+ if (this.packageList.length && this.packageList.indexOf(element.package) < 0) {
	135	+ return false;
	136	+ }
	137	+
	138	+ if (this.tagList.length) {
	139	+ var match = false;
	140	+ for (var i = 0; i < this.tagList.length; i++) {
	141	+ if (element.tags.join(' ').indexOf(this.tagList[i]) >= 0) match = true;
	142	+ }
	143	+ if (!match) return false;
	144	+ }
	145	+
	146	+ return true;
	147	+ },
	148	+
	149	+ updateTag: function(e, detail) {
	150	+ e.stopPropagation();
	151	+ e.preventDefault();
	152	+ var newTag = detail.name;
	153	+ var t = this.tagList.slice(0);
	154	+ if (t.indexOf(newTag) < 0) t.push(newTag);
	155	+ this.tag = t.join(',');
	156	+ },
	157	+ clearTag: function() { this.tag = null; },
	158	+ updatePackage: function(e) {
	159	+ e.stopPropagation();
	160	+ e.preventDefault();
	161	+ var newPkg = e.currentTarget.name;
	162	+ var p = this.packageList.slice(0);
	163	+ if (p.indexOf(newPkg) < 0) p.push(newPkg);
	164	+ this.package = p.join(',');
	165	+ },
	166	+ clearPackage: function() { this.package = null; },
	167	+ togglePackages: function() {
	168	+ if (this.package) {
	169	+ this.prevPackage = this.package;
	170	+ this.clearPackage();
	171	+ } else {
	172	+ this.package = this.prevPackage;
	173	+ }
	174	+ },
	175	+ _parseQueryString: function() {
	176	+ var query = window.location.search.substring(1);
	177	+ var params = query.split('&');
	178	+ var results = [];
	179	+ for (var i = 0; i < params.length; i++) {
	180	+ var pair = params[i].split('=');
	181	+ results[pair[0]] = pair[1];
	182	+ }
	183	+ return results;
	184	+ },
	185	+ _buildQueryString: function() {
	186	+ var out = [];
	187	+ if (this.q && this.q.length) out.push("q=" + this.q);
	188	+ if (this.tag && this.tag.length) out.push("tag=" + this.tag);
	189	+ if (this.package && this.package.length) out.push("package=" + this.package);
	190	+ if (this.view !== 'table') out.push("view=" + this.view);
	191	+
	192	+ return out.join("&");
	193	+ },
	194	+ _handleParamsUpdate: function(_, params) {
	195	+ for (var key in params) {
	196	+ this[key] = params[key];
	197	+ }
	198	+ },
	199	+ _packageLink: function(name) {
	200	+ return "/browse?package=" + name;
	201	+ },
	202	+ _qChanged: function(q) {
	203	+ if (q) {
	204	+ this.async(function() {
	205	+ this.$.query.focus();
	206	+
	207	+ // make sure to force the cursor to the end of the
	208	+ // input. Only an issue in Firefox.
	209	+ this.$.query.setSelectionRange(q.length, q.length);
	210	+ });
	211	+ }
	212	+ },
	213	+ updateURL: function(q, packageName, packageInfo, tag, view) {
	214	+ var qs = this._buildQueryString();
	215	+ if (qs !== _lastNavigated && this.router) {
	216	+ _lastNavigated = qs;
	217	+ this.router.go('/browse' + (qs.length ? '?' + qs : ''), {replace: true});
	218	+ }
	219	+ this.updateMeta(packageName, this.packageInfo);
	220	+
	221	+ if (this.elements) {
	222	+ this._filteredElements = this.elements.filter(this.filter.bind(this));
	223	+ this._elementCount = this._filteredElements.length;
	224	+ }
	225	+ this.scrollToTop();
	226	+ },
	227	+ updateMeta: function(packageName, packageInfo) {
	228	+ if (this.q && this.q.length) {
	229	+ var t = "'" + this.q + "' ";
	230	+ t += (packageInfo && packageInfo.title) ? packageInfo.title : "Elements";
	231	+ this.pageTitle = t;
	232	+ } else if (packageInfo && packageInfo.title) {
	233	+ this.pageTitle = packageInfo.title;
	234	+ } else if (this.tagList.length) {
	235	+ this.pageTitle = "Elements Tagged '" + this.tagList.join("' or '") + "'";
	236	+ } else {
	237	+ this.pageTitle = "All Elements";
	238	+ }
	239	+
	240	+ this.fire('page-meta', { title: this.pageTitle });
	241	+ this.$.drawerPanel.closeDrawer();
	242	+ },
	243	+ toggleView: function() {
	244	+ if (this.view === 'table') {
	245	+ this.view = 'cards';
	246	+ } else {
	247	+ this.view = 'table';
	248	+ }
	249	+ },
	250	+ computeViewIcon: function(view) {
	251	+ if (view === 'table') {
	252	+ return 'view-module';
	253	+ } else {
	254	+ return 'view-list';
	255	+ }
	256	+ },
	257	+ arrayParam: function(param) {
	258	+ if (!param \|\| !param.length) { return []; }
	259	+ return param.toString().split(',');
	260	+ },
	261	+ cartOpen: function(e) {
	262	+ this.fire('cart-open');
	263	+ },
	264	+ onSearch: function(e) {
	265	+ // when a user clicks on the (x) button we need to be sure to
	266	+ // clear the query
	267	+ this.q = this.$.query.value;
	268	+ },
	269	+ scrollToTop: function() {
	270	+ this.$.container.scroller.scrollTop = 0;
	271	+ },
	272	+ _stampCards: function(view) {
	273	+ return view === 'cards';
	274	+ },
	275	+ _stampTable: function(view) {
	276	+ return view === 'table';
	277	+ },
	278	+ closeDrawer: function() {
	279	+ this.$.drawerPanel.closeDrawer();
	280	+ },
	281	+ _actualView: function(view, force) {
	282	+ return force ? 'cards' : view;
	283	+ },
	284	+ _isEqual: function(a,b) {
	285	+ return a === b;
	286	+ },
	287	+ _getColor: function() {
	288	+ return this.packageInfo && this.packageInfo.color ? this.packageInfo.color : '';
	289	+ },
	290	+
	291	+ _getMode: function(narrow) {
	292	+ return narrow ? 'waterfall' : 'scroll';
	293	+ }
	294	+ });
	295	+ })();
	296	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-element.css 0 → 100644

View file @07d13c9

	1	+responsive-element[size=xs].layout {
	2	+ flex-direction: column;
	3	+}
	4	+
	5	+[size=xs] app-sidebar {
	6	+ min-width: 100%;
	7	+ height: auto;
	8	+}
	9	+
	10	+app-sidebar paper-toolbar {
	11	+ --paper-toolbar-background: white;
	12	+ --paper-toolbar: {
	13	+ box-sizing: border-box;
	14	+ }
	15	+}
	16	+
	17	+[size=xs] app-sidebar paper-toolbar /deep/ #topBar {
	18	+ padding: 0 16px;
	19	+}
	20	+
	21	+#package-heading {
	22	+ height: 48px;
	23	+ line-height: 48px;
	24	+ background: var(--paper-blue-grey-50);
	25	+ border: solid;
	26	+ border-color: var(--paper-blue-grey-100);
	27	+ border-width: 1px 0;
	28	+ cursor: pointer;
	29	+ font-weight: 500;
	30	+}
	31	+
	32	+#package-heading iron-icon {
	33	+ margin: 0 0 0 4px;
	34	+}
	35	+
	36	+#package-heading package-symbol {
	37	+ margin: 0 8px 0 2px;
	38	+}
	39	+
	40	+#element-header {
	41	+ position: relative;
	42	+ padding: 8px 16px;
	43	+}
	44	+
	45	+#element-header .version {
	46	+ position: absolute;
	47	+ top: 24px;
	48	+ right: 16px;
	49	+ font-size: 14px;
	50	+ color: var(--paper-grey-500);
	51	+}
	52	+
	53	+#element-header h2 {
	54	+ margin: 0;
	55	+}
	56	+
	57	+#element-desc p {
	58	+ margin-bottom: 0;
	59	+}
	60	+
	61	+#element-tags tag-link:last-of-type + span {
	62	+ display: none;
	63	+}
	64	+
	65	+[size=xs] .section {
	66	+ display: none;
	67	+}
	68	+
	69	+paper-item, a.item {
	70	+ display: block;
	71	+ font-size: 14px;
	72	+ padding: 4px 16px;
	73	+ min-height: inherit;
	74	+ cursor: pointer;
	75	+ font-weight: 400;
	76	+}
	77	+
	78	+.nav {
	79	+ display: block;
	80	+ margin-top: 8px;
	81	+}
	82	+
	83	+.nav iron-icon {
	84	+ width: 18px;
	85	+ height: 18px;
	86	+ margin-right: 8px;
	87	+}
	88	+
	89	+.nav [active] {
	90	+ background: var(--paper-blue-grey-50);
	91	+}
	92	+
	93	+.nav [active] iron-icon {
	94	+ color: var(--paper-blue-a700);
	95	+}
	96	+
	97	+.nav .item {
	98	+ white-space: nowrap;
	99	+ overflow: hidden;
	100	+ text-overflow: ellipsis;
	101	+}
	102	+
	103	+app-sidebar h4 {
	104	+ font-size: 14px;
	105	+ font-weight: 500;
	106	+ margin: 12px 16px;
	107	+}
	108	+
	109	+app-sidebar section {
	110	+ border-top: 1px solid #e5e5e5;
	111	+}
	112	+
	113	+section[main] {
	114	+ background: #fafafa;
	115	+}
	116	+
	117	+iron-component-page {
	118	+ --iron-component-page-container: {
	119	+ padding: 10px;
	120	+ };
	121	+ --iron-component-page-max-width: 920px;
	122	+}
	123	+
	124	+:host([package-name=iron-elements]) iron-component-page {
	125	+ --iron-doc-viewer-header: {
	126	+ background-color: #81c784;
	127	+ };
	128	+}
	129	+
	130	+:host([package-name=gold-elements]) iron-component-page {
	131	+ --iron-doc-viewer-header: {
	132	+ background-color: #ffb74d;
	133	+ };
	134	+}
	135	+
	136	+:host([package-name=google-web-components]) iron-component-page {
	137	+ --iron-doc-viewer-header: {
	138	+ background-color: #64B5F6;
	139	+ };
	140	+}
	141	+
	142	+:host([package-name=neon-elements]) iron-component-page {
	143	+ --iron-doc-viewer-header: {
	144	+ background-color: #a7ffeb;
	145	+ };
	146	+}
	147	+
	148	+:host([package-name=platinum-elements]) iron-component-page {
	149	+ --iron-doc-viewer-header: {
	150	+ background-color: #cfd8dc;
	151	+ };
	152	+}
	153	+
	154	+:host([package-name=molecules]) iron-component-page {
	155	+ --iron-doc-viewer-header: {
	156	+ background-color: #ffab91;
	157	+ };
	158	+}
	159	+
	160	+
	161	+[narrow] iron-component-page {
	162	+ top: 64px;
	163	+}
	164	+
	165	+[paper-drawer-toggle] {
	166	+ position: absolute;
	167	+ top: 12px;
	168	+ left: 10px;
	169	+}
	170	+
	171	+cart-icon {
	172	+ position: absolute;
	173	+ top: 12px;
	174	+ right: 10px;
	175	+}
	176	+
	177	+cart-item-icon {
	178	+ --cart-item-icon-size: 18px;
	179	+ --cart-item-icon-label: {
	180	+ margin-left: 8px;
	181	+ };
	182	+}
	183	+
	184	+#other-elements {
	185	+ overflow: hidden;
	186	+ -webkit-flex-shrink: 5;
	187	+ flex-shrink: 5;
	188	+}
	189	+
	190	+#other-elements .list {
	191	+ overflow-y: auto;
	192	+ -webkit-overflow-scrolling: touch;
	193	+}
	194	+
	195	+#element-header, #package-heading, #nav, #cart-add {
	196	+ -webkit-flex-shrink: 0;
	197	+ flex-shrink: 0;
	198	+}
	199	+
	200	+.shrinkable {
	201	+ overflow: hidden;
	202	+ @apply(--layout);
	203	+ @apply(--layout-vertical);
	204	+}
	205	+
	206	+.shrinkable .nav, .shrinkable .list {
	207	+ overflow-x: hidden;
	208	+ overflow-y: auto;
	209	+ -webkit-overflow-scrolling: touch;
	210	+}
	211	+
	212	+.bower-command-label {
	213	+ margin: 10px 0 2px 17px;
	214	+ font-size: 10px;
	215	+ line-height: 16px;
	216	+ font-weight: 500;
	217	+}
	218	+
	219	+.bower-command {
	220	+ display: block;
	221	+ height: 32px;
	222	+ -webkit-flex-shrink: 0;
	223	+ flex-shrink: 0;
	224	+ padding: 10px 4px;
	225	+ margin: 0 13px 12px;
	226	+ -moz-box-sizing: border-box;
	227	+ box-sizing: border-box;
	228	+ border: 1px solid var(--paper-blue-grey-100);
	229	+ border-radius: 2px;
	230	+ font-size: 12px;
	231	+ color: var(--paper-blue-grey-500);
	232	+}
	233	+
	234	+cart-icon {
	235	+ transition: opacity 0.2;
	236	+ -webkit-transition: opacity 0.2s;
	237	+}
	238	+
	239	+cart-icon[fade-out] {
	240	+ opacity: 0;
	241	+}
0	242	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-element.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
	2	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	3	+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
	4	+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
	5	+<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
	6	+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
	7	+<link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
	8	+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
	9	+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
	10	+
	11	+<link rel="import" href="../catalog-data/catalog-data.html">
	12	+<link rel="import" href="../catalog-element/catalog-element.html">
	13	+<link rel="import" href="../catalog-package/catalog-package.html">
	14	+<link rel="import" href="../package-symbol/package-symbol.html">
	15	+<link rel="import" href="../responsive-element/responsive-element.html">
	16	+<link rel="import" href="../theme-color/theme-color.html">
	17	+<link rel="import" href="../cart-icon/cart-icon.html">
	18	+<link rel="import" href="../cart-item-icon/cart-item-icon.html">
	19	+
	20	+<dom-module id="page-element">
	21	+ <link rel="import" type="css" href="page-element.css">
	22	+ <template>
	23	+ <catalog-element name="[[element]]" data="{{metadata}}"></catalog-element>
	24	+ <catalog-package name="[[metadata.package]]" data="{{package}}"></catalog-package>
	25	+ <catalog-data elements="{{elements}}" behavior-map="{{behaviorMap}}"></catalog-data>
	26	+ <paper-drawer-panel id="drawerPanel" narrow="{{narrowDrawer}}" responsive-width="900px" drawer-width="272px" disable-edge-swipe>
	27	+ <app-sidebar drawer>
	28	+ <paper-toolbar>
	29	+ <app-logo class="flex"></app-logo>
	30	+ <app-bar class="horizontal layout center end-justified" query="{{q}}"></app-bar>
	31	+ </paper-toolbar>
	32	+ <div class="content">
	33	+ <a is="app-link" href="[[_packageLink(package.name)]]" class="horizontal layout center" id="package-heading">
	34	+ <iron-icon icon="chevron-left"></iron-icon>
	35	+ <package-symbol color="[[package.color]]" symbol="[[package.symbol]]"></package-symbol>
	36	+ <span class="name flex">[[package.title]]</span>
	37	+ </a>
	38	+ <div id="element-header">
	39	+ <span class="version">[[metadata.version]]</span>
	40	+ <h2 id="element-title">[[element]]</h2>
	41	+ <div id="element-desc">
	42	+ <p>[[metadata.description]]</p>
	43	+ </div>
	44	+ </div>
	45	+
	46	+ <nav id="nav" class="nav" attr-for-selected="name" selected="{{view}}">
	47	+ <a is="app-link" class="item" href="[[_link(active,'docs')]]" active$="[[_isEqual(view,'docs')]]"><iron-icon icon="description"></iron-icon> <span>Docs</span></a>
	48	+ <template is="dom-repeat" items="[[docDemos]]">
	49	+ <a is="app-link" class="item" href="[[_demoLink(active,item.path)]]" active$="[[_demoActive(item.path,view)]]"><iron-icon icon="visibility"></iron-icon> <span>[[_demoName(item.desc)]]</span></a>
	50	+ </template>
	51	+ <a class="item" href="[[_githubLink(metadata.source)]]" target="_blank"><iron-icon icon="code"></iron-icon> <span>Source</span></a>
	52	+ </nav>
	53	+
	54	+ <div class="nav" id="cart-add">
	55	+ <paper-item hidden$="[[!metadata]]" on-tap="toggleCart"><cart-item-icon id="cartIcon" element="[[element]]"></cart-item-icon></paper-item>
	56	+ </div>
	57	+
	58	+ <div class="bower-command-label">Bower Command</div>
	59	+ <input class="bower-command" title="Bower Command" readonly value="[[_bowerCommand(metadata.source)]]" on-tap="_selectAllBowerCommand">
	60	+
	61	+ <section hidden$="[[_oneOrFewer(docElements, docBehaviors)]]" class="shrinkable">
	62	+ <h4>Bundled Elements</h4>
	63	+
	64	+ <nav id="elnav" class="nav">
	65	+ <template is="dom-repeat" items="[[docElements]]">
	66	+ <a is="app-link" class="item" href$="[[_link(item.is,view)]]" active$="[[_isEqual(item.is,active)]]">[[item.is]]</a>
	67	+ </template>
	68	+ </nav>
	69	+ </section>
	70	+
	71	+ <section class="shrinkable" hidden$="[[_oneOrFewer(docBehaviors, docElements)]]">
	72	+ <h4>Bundled Behaviors</h4>
	73	+ <nav id="elnav" class="nav" attr-for-selected="name" selected="[[active]]">
	74	+ <template is="dom-repeat" items="[[docBehaviors]]">
	75	+ <a is="app-link" class="item" href$="[[_link(item.is,view)]]" active$="[[_isEqual(item.is,active)]]">[[item.is]]</a>
	76	+ </template>
	77	+ </nav>
	78	+ </section>
	79	+ </div>
	80	+ </app-sidebar>
	81	+ <section main class="fit">
	82	+ <iron-component-page
	83	+ _catalog
	84	+ id="componentPage"
	85	+ scroll-mode="[[_getScrollMode(narrowDrawer)]]"
	86	+ package$="[[package.name]]"
	87	+ version="[[metadata.version]]"
	88	+ doc-src="[[docSrc(element)]]"
	89	+ base="[[baseURI(element)]]"
	90	+ view="{{view}}"
	91	+ doc-elements="{{docElements}}"
	92	+ doc-behaviors="{{docBehaviors}}"
	93	+ doc-demos="{{docDemos}}"
	94	+ active="{{active}}"
	95	+ on-iron-doc-viewer-component-selected="navToBehavior"
	96	+ on-iron-component-page-error="_handleError">
	97	+ </iron-component-page>
	98	+ <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
	99	+ <cart-icon fade-out$="[[_isCartIconHidden(view)]]"></cart-icon>
	100	+ </section>
	101	+ </paper-drawer-panel>
	102	+ </template>
	103	+</dom-module>
	104	+
	105	+<script>
	106	+ Polymer({
	107	+ is: 'page-element',
	108	+ enableCustomStyleProperties: true,
	109	+ properties: {
	110	+ element: String,
	111	+ view: {type: String, value: 'docs'},
	112	+ active: {type: String, value: ''},
	113	+ docElements: Array,
	114	+ docBehaviors: Array,
	115	+ docDemos: Array,
	116	+ docs: Object,
	117	+ metadata: {type: Object, value: null},
	118	+ package: Object,
	119	+ router: Object,
	120	+ q: String,
	121	+ packageName: {
	122	+ type: String,
	123	+ reflectToAttribute: true
	124	+ },
	125	+ narrowDrawer: Boolean
	126	+ },
	127	+ observers: [
	128	+ 'updateMeta(element,active)',
	129	+ 'viewUpdated(view)',
	130	+ 'analyze(importPath)',
	131	+ 'search(q)',
	132	+ '_updateStyles(package)'
	133	+ ],
	134	+ attached: function() {
	135	+ this.updateMeta();
	136	+ },
	137	+ analyze: function() {
	138	+ this.$.analyzer.analyze();
	139	+ },
	140	+ _link: function(active,view) {
	141	+ return this.getURL(active,view);
	142	+ },
	143	+ _demoLink: function(active,path) {
	144	+ return this.getURL(active, 'demo:' + path, true);
	145	+ },
	146	+ _demoActive: function(path) {
	147	+ return this.view === 'demo:' + path;
	148	+ },
	149	+ _githubLink: function(source) {
	150	+ return 'https://github.com/' + source;
	151	+ },
	152	+ getURL: function(active,view,force) {
	153	+ var url = "/elements/" + this.element;
	154	+ var qs = [];
	155	+ if (force \|\| (view && view.length && view !== 'docs')) qs.push('view=' + view);
	156	+ if (force \|\| (active && active.length && active !== this.element)) qs.push('active=' + active);
	157	+ if (qs.length) url += "?" + qs.join("&");
	158	+ return url;
	159	+ },
	160	+ updateMeta: function(element,active) {
	161	+ this.$.drawerPanel.closeDrawer();
	162	+ this.fire('page-meta', {title: (this.active && this.active.length) ? this.active : this.element});
	163	+ },
	164	+ viewUpdated: function() {
	165	+ this.$.drawerPanel.closeDrawer();
	166	+ },
	167	+ _packageLink: function() {
	168	+ return "/browse?package=" + this.package.name;
	169	+ },
	170	+ navToElement: function(e) {
	171	+ this.router.go("/elements/" + e.currentTarget.getAttribute('name'));
	172	+ },
	173	+ navToBehavior: function(e, detail) {
	174	+ if (this.behaviorMap[detail]) {
	175	+ this.router.go("/elements/" + this.behaviorMap[detail] + "?active=" + detail);
	176	+ } else {
	177	+ this.fire('toast', {text: "No documentation available for " + detail});
	178	+ }
	179	+ },
	180	+ docSrc: function(element) {
	181	+ return "/data/docs/" + element + ".json";
	182	+ },
	183	+ baseURI: function(element) {
	184	+ return window.location.origin + "/bower_components/" + element + "/" + element + ".html";
	185	+ },
	186	+ search: function(q) {
	187	+ if (q \|\| this.q) {
	188	+ this.router.go('/browse?q=' + (q \|\| this.q));
	189	+ }
	190	+ },
	191	+ cartAdd: function() {
	192	+ this.fire('cart-add', this.element);
	193	+ },
	194	+ _oneOrFewer: function(arr1, arr2) {
	195	+ if (!arr1 \|\| arr1.length === 0) {
	196	+ return true;
	197	+ }
	198	+ if (!arr2) {
	199	+ return arr1.length <= 1;
	200	+ }
	201	+ return arr1.length + arr2.length <= 1;
	202	+ },
	203	+ toggleCart: function() {
	204	+ this.$.cartIcon.toggle();
	205	+ },
	206	+ listFilter: function(el) {
	207	+ return el.package === this.package.name;
	208	+ },
	209	+ _demoName: function(name) {
	210	+ return name === 'demo' ? 'Demo' : name;
	211	+ },
	212	+ _isEqual: function(a,b) {
	213	+ return a === b;
	214	+ },
	215	+ _bowerCommand: function(source) {
	216	+ return 'bower install --save ' + source;
	217	+ },
	218	+ _selectAllBowerCommand: function(e) {
	219	+ e.currentTarget.select();
	220	+ },
	221	+ _isCartIconHidden: function(view) {
	222	+ return view.indexOf('demo:') === 0;
	223	+ },
	224	+
	225	+ _handleError: function() {
	226	+ this.router.go('/404');
	227	+ },
	228	+
	229	+ _updateStyles: function(packageInfo) {
	230	+ this.packageName = packageInfo.name;
	231	+ this.async(this.$.componentPage.updateStyles, 2);
	232	+ },
	233	+ _getScrollMode: function(narrowDrawer) {
	234	+ return narrowDrawer ? 'waterfall' : 'scroll';
	235	+ }
	236	+ });
	237	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-guide.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
	2	+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
	3	+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
	4	+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
	5	+
	6	+<link rel="import" href="../catalog-guide/catalog-guide.html">
	7	+<link rel="import" href="../catalog-data/catalog-data.html">
	8	+
	9	+<dom-module id="page-guide">
	10	+ <style>
	11	+ .content {
	12	+ display: block;
	13	+ padding: 12px 24px;
	14	+ }
	15	+
	16	+ #main {
	17	+ background: #fafafa;
	18	+ }
	19	+
	20	+ .guide-section {
	21	+ background: white;
	22	+ margin: 24px auto;
	23	+ max-width: 800px;
	24	+ padding-bottom: 1px;
	25	+ @apply(--shadow-elevation-2dp);
	26	+ }
	27	+
	28	+ .guide-section .reference-link {
	29	+ float: right;
	30	+ margin: 12px 18px;
	31	+ color: #999;
	32	+ }
	33	+
	34	+ .guide-section .reference-link:hover {
	35	+ color: #333;
	36	+ }
	37	+
	38	+ .guide-section > h2 {
	39	+ border-bottom: 1px solid #e5e5e5;
	40	+ font-size: 20px;
	41	+ line-height: 28px;
	42	+ padding: 10px 18px;
	43	+ margin: 0;
	44	+ }
	45	+
	46	+ .guide-section h3 {
	47	+ font-size: 18px;
	48	+ margin: 20px 20px 12px 20px;
	49	+ font-weight: bold;
	50	+ }
	51	+
	52	+ .guide-section h4 {
	53	+ font-weight: bold;
	54	+ font-size: 16px;
	55	+ margin: 18px 20px 12px 20px;
	56	+ }
	57	+
	58	+ .guide-section p {
	59	+ margin: 16px 20px;
	60	+ }
	61	+
	62	+ .guide-section pre {
	63	+ padding: 20px;
	64	+ background: #fafafa;
	65	+ border: solid #e5e5e5;
	66	+ border-width: 1px 0;
	67	+ }
	68	+
	69	+ #main > paper-toolbar {
	70	+ --paper-toolbar-background: #fafafa;
	71	+ font-size: 20px;
	72	+ }
	73	+
	74	+ app-sidebar paper-toolbar {
	75	+ --paper-toolbar-background: white;
	76	+ }
	77	+
	78	+ #guide-list .item {
	79	+ display: block;
	80	+ font-weight: 400;
	81	+ cursor: pointer;
	82	+ font-size: 14px;
	83	+ line-height: 24px;
	84	+ padding: 0 24px;
	85	+ }
	86	+
	87	+ [paper-drawer-toggle] {
	88	+ margin: 0 10px;
	89	+ cursor: pointer;
	90	+ }
	91	+
	92	+ app-sidebar h4 {
	93	+ font-size: 14px;
	94	+ font-weight: 500;
	95	+ margin: 12px 24px;
	96	+ }
	97	+ </style>
	98	+ <template>
	99	+ <prism-highlighter></prism-highlighter>
	100	+
	101	+ <catalog-data guides="{{guides}}"></catalog-data>
	102	+ <catalog-guide name="[[name]]" data="{{guide}}" content="{{content}}" on-catalog-guide-error="_catalogGuideError"></catalog-guide>
	103	+
	104	+ <paper-drawer-panel drawer-width="272px" disable-edge-swipe>
	105	+ <app-sidebar drawer>
	106	+ <paper-toolbar>
	107	+ <app-logo class="flex"></app-logo>
	108	+ <app-bar class="horizontal layout center end-justified"></app-bar>
	109	+ </paper-toolbar>
	110	+ <h4>Guides</h4>
	111	+ <nav id="guide-list" class="flex">
	112	+ <template is="dom-repeat" items="[[guides]]">
	113	+ <a class="item" is="app-link" href$="[[_guideUrl(item.name)]]">[[item.title]]</a>
	114	+ </template>
	115	+ </nav>
	116	+ </app-sidebar>
	117	+ <paper-header-panel mode="waterfall" class="vertical layout fit" id="main" main>
	118	+ <paper-toolbar class="paper-header flex-none">
	119	+ <iron-icon icon="menu" paper-drawer-toggle></iron-icon>
	120	+ <span class="flex">[[guide.title]]</span>
	121	+ </paper-toolbar>
	122	+
	123	+ <div class="content fit">
	124	+ <div id="content"></div>
	125	+ </div>
	126	+ </paper-header-panel>
	127	+ </paper-drawer-panel>
	128	+ </template>
	129	+</dom-module>
	130	+
	131	+<script>
	132	+ Polymer({
	133	+ is: 'page-guide',
	134	+ properties: {
	135	+ router: Object,
	136	+ guides: Array,
	137	+ guide: Object,
	138	+ name: {
	139	+ type: String,
	140	+ observer: '_nameChanged'
	141	+ },
	142	+ content: String
	143	+ },
	144	+ enableCustomStyleProperties: true,
	145	+ observers: [
	146	+ 'contentChanged(content)',
	147	+ 'updateMeta(guide)'
	148	+ ],
	149	+
	150	+ contentChanged: function() {
	151	+ if (this.content.indexOf('<!doctype') >= 0) {
	152	+ this._catalogGuideError();
	153	+ } else { console.log( this.content);
	154	+ this.$.content.innerHTML = this.content;
	155	+ this._decorateHeadings();
	156	+ this._highlight();
	157	+ this.scopeSubtree(this.$.content);
	158	+ if (window.location.hash !== "") {
	159	+ var el = Polymer.dom(this.$.content).querySelector(window.location.hash);
	160	+ if (el) el.scrollIntoView();
	161	+ }
	162	+ }
	163	+ },
	164	+
	165	+ _nameChanged: function() {
	166	+ this.$.content.innerHTML = '';
	167	+ },
	168	+
	169	+ _decorateHeadings: function() {
	170	+ var h2s = this.$.content.querySelectorAll('h2');
	171	+ for (var i = 0; i < h2s.length; i++) {
	172	+ var link = document.createElement('a');
	173	+ link.className = "reference-link";
	174	+ link.href = "#" + h2s[i].id;
	175	+ var icon = document.createElement('iron-icon');
	176	+ icon.icon = 'link';
	177	+ link.appendChild(icon);
	178	+ h2s[i].parentNode.insertBefore(link, h2s[i]);
	179	+ }
	180	+ },
	181	+ _highlight: function() {
	182	+ var els = this.$.content.querySelectorAll('pre code');
	183	+ for (var i = 0; i < els.length; i++) {
	184	+ var code = els[i].textContent;
	185	+ var event = this.fire('syntax-highlight', {code: code});
	186	+ if (event.detail.code && !els[i].highlighted) {
	187	+ els[i].highlighted = true;
	188	+ els[i].innerHTML = event.detail.code;
	189	+ }
	190	+ }
	191	+ },
	192	+ _guideUrl: function(name) {
	193	+ return "/guides/" + name;
	194	+ },
	195	+ updateMeta: function() {
	196	+ this.fire('page-meta', {title: this.guide.title});
	197	+ },
	198	+ nav: function(e) {
	199	+ var name = e.currentTarget.getAttribute('name');
	200	+ if (this.name !== name) {
	201	+ this.router.go('/guides/' + name);
	202	+ }
	203	+ },
	204	+ _catalogGuideError: function() {
	205	+ this.router.go('/404');
	206	+ }
	207	+ });
	208	+</script>
0	209	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-not-found.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
	2	+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
	3	+<link rel="import" href="../app-sidebar/app-sidebar.html">
	4	+<link rel="import" href="../app-link/app-link.html">
	5	+
	6	+<dom-module id="page-not-found">
	7	+ <template>
	8	+ <style>
	9	+ paper-toolbar {
	10	+ background-color: white;
	11	+ }
	12	+ section {
	13	+ background-color: #fafafa;
	14	+ padding: 40px;
	15	+ }
	16	+ </style>
	17	+ <paper-drawer-panel id="drawerPanel" responsive-width="900px" drawer-width="272px" disable-edge-swipe>
	18	+ <app-sidebar drawer>
	19	+ <paper-toolbar>
	20	+ <app-logo class="flex"></app-logo>
	21	+ <app-bar class="horizontal layout center end-justified" query="{{q}}"></app-bar>
	22	+ </paper-toolbar>
	23	+ </app-sidebar>
	24	+ <section main class="fit">
	25	+ <h1>There isn't an element for that yet</h1>
	26	+ <p>It seems like you may have misspelled that URL...</p>
	27	+ <a href="/" is="app-link">Take me to the front page</a>
	28	+ </section>
	29	+ </paper-drawer-panel>
	30	+ </template>
	31	+</dom-module>
	32	+
	33	+<script>
	34	+ Polymer({
	35	+ is: 'page-not-found',
	36	+ attached: function() {
	37	+ this.fire('page-meta', { title: 'Page not found' });
	38	+ }
	39	+ });
	40	+</script>
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-packages.css 0 → 100644

View file @07d13c9

	1	+paper-header-panel {
	2	+ background: #fafafa;
	3	+}
	4	+
	5	+.content {
	6	+ display: block;
	7	+ padding: 50px 0;
	8	+}
	9	+
	10	+.packages, #guides-container {
	11	+ max-width: 1100px;
	12	+ margin: 0 auto;
	13	+}
	14	+
	15	+cart-icon {
	16	+ margin-left: 8px;
	17	+}
	18	+
	19	+@media (max-width: 1132px) {
	20	+ .packages, #guides-container {
	21	+ max-width: 880px;
	22	+ }
	23	+}
	24	+
	25	+@media (max-width: 912px) {
	26	+ .packages, #guides-container {
	27	+ max-width: 660px;
	28	+ }
	29	+}
	30	+
	31	+@media (max-width: 692px) {
	32	+ .packages, #guides-container {
	33	+ max-width: 440px;
	34	+ }
	35	+}
	36	+
	37	+a.package {
	38	+ width: 220px;
	39	+ margin: 8px;
	40	+}
	41	+
	42	+@media (max-width: 489px) {
	43	+ a.package {
	44	+ width: calc(100% - 16px);
	45	+ }
	46	+}
	47	+
	48	+.search.active {
	49	+ left: 15px;
	50	+}
	51	+
	52	+@media (max-width: 639px) {
	53	+ paper-toolbar /deep/ #topBar {
	54	+ margin-top: 4px;
	55	+ padding: 0 16px;
	56	+ }
	57	+}
	58	+
	59	+guide-card, #coming-soon {
	60	+ width: 456px;
	61	+ cursor: pointer;
	62	+ margin: 8px;
	63	+}
	64	+
	65	+@media (max-width: 489px) {
	66	+ guide-card, #coming-soon {
	67	+ width: 100%;
	68	+ }
	69	+}
	70	+
	71	+#guides-container h3 {
	72	+ margin: 36px 8px 8px;
	73	+}
	74	+
	75	+#coming-soon {
	76	+ cursor: normal;
	77	+ line-height: 76px;
	78	+ text-align: center;
	79	+ font-size: 16px;
	80	+ color: rgba(0, 0, 0, var(--dark-primary-opacity));
	81	+ border: 1px dashed #e5e5e5;
	82	+}
...	...

bower_components/polymer-element-catalog/app/elements/pages/page-packages.html 0 → 100644

View file @07d13c9

	1	+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
	2	+<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
	3	+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
	4	+
	5	+<link rel="import" href="../catalog-data/catalog-data.html">
	6	+<link rel="import" href="../package-tile/package-tile.html">
	7	+<link rel="import" href="../guide-card/guide-card.html">
	8	+<link rel="import" href="../cart-icon/cart-icon.html">
	9	+
	10	+<dom-module id="page-packages">
	11	+ <link rel="import" type="css" href="page-packages.css">
	12	+ <template>
	13	+ <catalog-data packages="{{packages}}" guides="{{guides}}"></catalog-data>
	14	+ <paper-header-panel mode="seamed" class="fit">
	15	+ <paper-toolbar class="paper-header">
	16	+ <app-logo full class="flex"></app-logo>
	17	+ <app-bar class="horizontal layout center end-justified" query="{{q}}"></app-bar>
	18	+ <cart-icon></cart-icon>
	19	+ </paper-toolbar>
	20	+
	21	+ <div class="content fit">
	22	+ <div class="packages layout horizontal wrap">
	23	+ <template is="dom-repeat" items="[[packages]]">
	24	+ <a href$="[[_packageLink(item.name)]]" is="app-link" class="package flex-none"><package-tile name$="[[item.name]]"></package-tile></a>
	25	+ </template>
	26	+ </div>
	27	+
	28	+ <div id="guides-container">
	29	+ <h3>Element Guides</h3>
	30	+ <div id="guide-list" class="horizontal layout wrap">
	31	+ <template is="dom-repeat" items="[[guides]]">
	32	+ <a href$="[[_link('guides',item.name)]]" is="app-link"><guide-card guide="[[item.name]]"></guide-card></a>
	33	+ </template>
	34	+ <div id="coming-soon">More guides coming soon, stay tuned!</div>
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+ </paper-header-panel>
	39	+ </template>
	40	+</dom-module>
	41	+
	42	+<script>
	43	+ Polymer({
	44	+ is: 'page-packages',
	45	+ enableCustomStyleProperties: true,
	46	+ properties: {
	47	+ q: { type: String, notify: true }
	48	+ },
	49	+ attached: function() {
	50	+ // reset page title since this is the default page
	51	+ this.fire('page-meta', {title: null});
	52	+ },
	53	+ observers: [
	54	+ 'search(q)'
	55	+ ],
	56	+ search: function(q) {
	57	+ if (q \|\| this.q) {
	58	+ this.router.go('/browse?q=' + (q \|\| this.q));
	59	+ }
	60	+ },
	61	+ _link: function() {
	62	+ return "/" + Array.prototype.slice.call(arguments).join("/");
	63	+ },
	64	+ _packageLink: function(name) {
	65	+ return "/browse?package=" + name;
	66	+ },
	67	+ guideSelect: function(e) {
	68	+ this.router.go('/guides/' + e.currentTarget.guide);
	69	+ }
	70	+ });
	71	+</script>
0	72	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/responsive-element/responsive-element.html 0 → 100644

View file @07d13c9

	1	+<dom-module id="responsive-element">
	2	+ <style>
	3	+ :host {
	4	+ display: block;
	5	+ }
	6	+ </style>
	7	+ <template>
	8	+ <content></content>
	9	+ </template>
	10	+</dom-module>
	11	+
	12	+<script>
	13	+ (function() {
	14	+ var _els = [];
	15	+ var _lastRecalc = new Date().getTime();
	16	+ var _recalc = function() {
	17	+ for (var i = 0; i < _els.length; i++) {
	18	+ _els[i].recalc();
	19	+ }
	20	+ };
	21	+
	22	+ Polymer({
	23	+ is: 'responsive-element',
	24	+ properties: {
	25	+ size: {
	26	+ type: String,
	27	+ readOnly: true,
	28	+ reflectToAttribute: true
	29	+ },
	30	+ s: {
	31	+ type: Number,
	32	+ value: 768
	33	+ },
	34	+ m: {
	35	+ type: Number,
	36	+ value: 992
	37	+ },
	38	+ l: {
	39	+ type: Number,
	40	+ value: 1200
	41	+ },
	42	+ xl: {
	43	+ type: Number,
	44	+ value: 1600
	45	+ }
	46	+ },
	47	+ attached: function() {
	48	+ _els.push(this);
	49	+ this.recalc();
	50	+ },
	51	+ detached: function() {
	52	+ _els.splice(_els.indexOf(this), 1);
	53	+ },
	54	+ recalc: function() {
	55	+ var w = this.getBoundingClientRect().width;
	56	+
	57	+ if (w < this.s) { this._setSize('xs'); }
	58	+ else if (w < this.m) { this._setSize('s'); }
	59	+ else if (w < this.l) { this._setSize('m'); }
	60	+ else if (w < this.xl) { this._setSize('l'); }
	61	+ else { this._setSize('xl'); }
	62	+ }
	63	+ });
	64	+
	65	+ var _debounce = function(func, wait, immediate) {
	66	+ var timeout;
	67	+ return function() {
	68	+ var context = this, args = arguments;
	69	+ var later = function() {
	70	+ timeout = null;
	71	+ if (!immediate) func.apply(context, args);
	72	+ };
	73	+ var callNow = immediate && !timeout;
	74	+ clearTimeout(timeout);
	75	+ timeout = setTimeout(later, wait);
	76	+ if (callNow) func.apply(context, args);
	77	+ };
	78	+ };
	79	+ window.addEventListener('resize', _debounce(_recalc, 6));
	80	+ })();
	81	+</script>
0	82	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/tag-link/tag-link.html 0 → 100644

View file @07d13c9

	1	+<dom-module id="tag-link">
	2	+ <style>
	3	+ :host, a {
	4	+ display: inline-block;
	5	+ cursor: pointer;
	6	+ color: #606060;
	7	+ }
	8	+
	9	+ :host(:hover) span {
	10	+ text-decoration: underline;
	11	+ }
	12	+
	13	+ span {
	14	+ font-size: 12px;
	15	+ font-weight: 500;
	16	+ color: var(--primary-text-color);
	17	+ text-decoration: none;
	18	+ }
	19	+ </style>
	20	+ <template>
	21	+ <span>{{name}}</span>
	22	+ </template>
	23	+</dom-module>
	24	+
	25	+<script>
	26	+ Polymer({
	27	+ is: 'tag-link',
	28	+ enableCustomStyleProperties: true,
	29	+ properties: {
	30	+ name: {type: String, notify: true, reflectToAttribute: true, observer: 'convert'}
	31	+ },
	32	+ convert: function() {
	33	+ if (typeof this.name === 'object') {
	34	+ this.name = this.name.valueOf();
	35	+ }
	36	+ }
	37	+ });
	38	+</script>
0	39	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/elements/theme-color/theme-color.html 0 → 100644

View file @07d13c9

	1	+<script src="../../bower_components/color/one-color.js"></script>
	2	+
	3	+<script>
	4	+ Polymer({
	5	+ is: 'theme-color',
	6	+ properties: {
	7	+ color: {type: String, notify: true},
	8	+ textColor: {type: String, notify: true, computed: 'computeTextColor(color)'},
	9	+ outline: {type: Boolean}
	10	+ },
	11	+ observers: [
	12	+ 'colorContent(color)'
	13	+ ],
	14	+ computeTextColor: function(color) {
	15	+ if (this.color) {
	16	+ var lightness = one.color(this.color).lightness();
	17	+ return (lightness > 0.5) ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.8)';
	18	+ } else {
	19	+ return null;
	20	+ }
	21	+ },
	22	+ _color: function(node, bgColor, color) {
	23	+ node.style.color = color;
	24	+ node.style.backgroundColor = bgColor;
	25	+ if (this.outline) this._outline(node, bgColor);
	26	+ },
	27	+ _colorBorder: function(node, borderColor) {
	28	+ node.style.borderColor = borderColor;
	29	+ },
	30	+ _outline: function(node, bgColor) {
	31	+ if (one.color(bgColor).lightness() > 0.9) {
	32	+ node.style.outline = '1px solid rgba(0,0,0,.25)';
	33	+ node.style.outlineOffset = '-1px';
	34	+ }
	35	+ },
	36	+ colorContent: function() {
	37	+ if (this.hasAttribute('themed')) this._color(this, this.color, this.textColor);
	38	+ if (this.hasAttribute('themed-reverse')) this._color(this, this.textColor, this.color);
	39	+ if (this.hasAttribute('themed-border')) this._colorBorder(this, this.color);
	40	+ if (this.hasAttribute('themed-border-reverse')) this._colorBorder(this, this.textColor);
	41	+
	42	+ var nodes = Polymer.dom(this).querySelectorAll('[themed],[themed-reverse],[themed-border],[themed-border-reverse]');
	43	+ for (var i = 0; i < nodes.length; i++) {
	44	+ if (nodes[i].hasAttribute('themed')) {
	45	+ this._color(nodes[i], this.color, this.textColor);
	46	+ } else if (nodes[i].hasAttribute('themed-reverse')) {
	47	+ this._color(nodes[i], this.textColor, this.color);
	48	+ } else if (nodes[i].hasAttribute('themed-border')) {
	49	+ this._colorBorder(nodes[i], this.color);
	50	+ } else if (nodes[i].hasAttribute('themed-border-reverse')) {
	51	+ this._colorBorder(nodes[i], this.textColor);
	52	+ }
	53	+ }
	54	+ }
	55	+ });
	56	+</script>
0	57	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/app/images/hero/random-1.svg 0 → 100644

View file @07d13c9

	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	4	+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	5	+ width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
	6	+ xml:space="preserve">
	7	+<g id="background" display="none">
	8	+ <rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
	9	+</g>
	10	+<g id="art">
	11	+ <circle cx="673.92" cy="1778.4" r="34.56"/>
	12	+ <circle cx="1477.44" cy="1709.28" r="34.56"/>
	13	+ <circle cx="1140.48" cy="1458.72" r="34.56"/>
	14	+ <circle cx="457.92" cy="1458.72" r="34.56"/>
	15	+ <circle cx="1088.64" cy="1173.6" r="34.56"/>
	16	+ <circle cx="786.24" cy="1510.56" r="34.56"/>
	17	+ <circle cx="1140.48" cy="1709.28" r="34.56"/>
	18	+ <circle cx="561.6" cy="1208.16" r="34.56"/>
	19	+ <path d="M671.328,1790.496l-222.912-330.912l107.136-260.064l553.824-36.288l-309.312,344.736l139.104,77.76l201.312-138.24
	20	+ l362.88,270.432h-365.472l-198.72-111.456L671.328,1790.496z M467.424,1457.856l208.224,308.448l247.104-169.344l-150.336-84.672
	21	+ l295.488-329.184L567.648,1216.8L467.424,1457.856z M1143.072,1700.64h308.448l-311.04-231.552l-184.896,126.144L1143.072,1700.64z
	22	+ "/>
	23	+</g>
	24	+</svg>
...	...

bower_components/polymer-element-catalog/app/images/hero/random-2.svg 0 → 100644

View file @07d13c9

	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	4	+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	5	+ width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
	6	+ xml:space="preserve">
	7	+<g id="background" display="none">
	8	+ <rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
	9	+</g>
	10	+<g id="art">
	11	+ <circle cx="1373.76" cy="1432.8" r="34.56"/>
	12	+ <circle cx="1123.2" cy="1596.96" r="34.56"/>
	13	+ <circle cx="561.6" cy="1380.96" r="34.56"/>
	14	+ <circle cx="751.68" cy="1216.8" r="34.56"/>
	15	+ <circle cx="1062.72" cy="1173.6" r="34.56"/>
	16	+ <circle cx="457.92" cy="1571.04" r="34.56"/>
	17	+ <circle cx="1477.44" cy="1285.92" r="34.56"/>
	18	+ <circle cx="665.28" cy="1778.4" r="34.56"/>
	19	+ <path d="M669.6,1786.176l-10.368-0.864l-207.36-207.36l1.728-12.96l206.496-135.648l-101.088-38.88l-2.592-14.688l190.08-164.16
	20	+ l8.64-1.728l156.384,54.432l146.88-96.768l12.96,6.048l21.6,153.792l191.808,66.528l188.352-114.048l11.232,12.096l-103.68,146.88
	21	+ l-9.504,3.456l-84.672-29.376l-166.752,101.088l12.096,82.944l-11.232,9.504l-93.312-35.424L669.6,1786.176z M471.744,1572.768
	22	+ l195.264,195.264l339.552-206.496l-326.592-126.144L471.744,1572.768z M1045.44,1558.08l66.528,25.92l-8.64-61.344L1045.44,1558.08
	23	+ z M697.248,1424.16l327.456,126.144l76.032-45.792l-23.328-165.024l-164.16-57.024L697.248,1424.16z M1096.416,1345.536
	24	+ l21.6,148.608l148.608-89.856L1096.416,1345.536z M1305.504,1399.968l64.8,22.464l76.032-108L1305.504,1399.968z M578.016,1378.368
	25	+ l99.36,38.016l215.136-141.696l-139.104-48.384L578.016,1378.368z M931.392,1270.368l143.424,50.112l-19.008-131.328
	26	+ L931.392,1270.368z"/>
	27	+</g>
	28	+</svg>
...	...

bower_components/polymer-element-catalog/app/images/hero/random-3.svg 0 → 100644

View file @07d13c9

	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	4	+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	5	+ width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
	6	+ xml:space="preserve">
	7	+<g id="background" display="none">
	8	+ <rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
	9	+</g>
	10	+<g id="art">
	11	+ <circle cx="1373.76" cy="1501.92" r="34.56"/>
	12	+ <circle cx="1105.92" cy="1778.4" r="34.56"/>
	13	+ <circle cx="924.48" cy="1614.24" r="34.56"/>
	14	+ <circle cx="1226.88" cy="1337.76" r="34.56"/>
	15	+ <circle cx="777.6" cy="1320.48" r="34.56"/>
	16	+ <circle cx="457.92" cy="1173.6" r="34.56"/>
	17	+ <circle cx="1477.44" cy="1285.92" r="34.56"/>
	18	+ <circle cx="561.6" cy="1631.52" r="34.56"/>
	19	+ <path d="M1111.968,1784.448l-14.688-8.64l88.128-322.272l-391.392-119.232l138.24,275.616l-7.776,12.96l-362.88,17.28l-8.64-6.912
	20	+ l-103.68-457.92l9.504-10.368l1019.52,112.32l0.864,17.28l-245.376,50.976l-26.784,96.768l169.344,51.84l3.456,14.688
	21	+ L1111.968,1784.448z M1202.688,1458.72l-79.488,289.44l234.144-241.92L1202.688,1458.72z M469.152,1183.104l99.36,439.776
	22	+ l342.144-16.416l-140.832-282.528l10.368-12.096l410.4,125.28l27.648-101.952l6.912-6.048l196.992-40.608L469.152,1183.104z"/>
	23	+</g>
	24	+</svg>
...	...

bower_components/polymer-element-catalog/app/images/hero/random-4.svg 0 → 100644

View file @07d13c9

	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	4	+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	5	+ width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
	6	+ xml:space="preserve">
	7	+<g id="background" display="none">
	8	+ <rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
	9	+</g>
	10	+<g id="art">
	11	+ <circle cx="1477.44" cy="1389.6" r="34.56"/>
	12	+ <circle cx="1477.44" cy="1709.28" r="34.56"/>
	13	+ <circle cx="665.28" cy="1778.4" r="34.56"/>
	14	+ <circle cx="1270.08" cy="1242.72" r="34.56"/>
	15	+ <circle cx="1088.64" cy="1173.6" r="34.56"/>
	16	+ <circle cx="457.92" cy="1614.24" r="34.56"/>
	17	+ <circle cx="1270.08" cy="1579.68" r="34.56"/>
	18	+ <circle cx="561.6" cy="1406.88" r="34.56"/>
	19	+ <path d="M618.624,1791.36l400.896-191.808l-591.84,25.056l380.16-266.112l-244.512,57.024l-5.184-16.416l527.04-233.28l8.64,14.688
	20	+ l-201.312,140.832l380.16-88.128l3.456,2.592l219.456,155.52l-390.528,187.488l168.48-6.912l2.592,1.728l228.96,143.424
	21	+ L618.624,1791.36z M1063.584,1596.96l-351.648,168.48l739.584-63.072l-184.032-114.048L1063.584,1596.96z M854.496,1348.128
	22	+ l-367.2,256.608l572.832-24.192l400.032-192.672l-191.808-136.512L854.496,1348.128z M1010.88,1217.664l-362.016,159.84
	23	+ l198.72-45.792L1010.88,1217.664z"/>
	24	+</g>
	25	+</svg>
...	...

bower_components/polymer-element-catalog/app/images/p-logo-32.png 0 → 100644

View file @07d13c9

5.5 KB

bower_components/polymer-element-catalog/app/images/polymer.svg 0 → 100644

View file @07d13c9

	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	4	+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	5	+ width="416px" height="286px" viewBox="0 0 416 286" enable-background="new 0 0 416 286" xml:space="preserve">
	6	+<g>
	7	+ <g>
	8	+ <polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 125.436,214.5 "/>
	9	+ <polygon fill="#3F51B5" points="331.842,0 290.561,71.5 331.842,143 373.121,71.5 "/>
	10	+ <polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 "/>
	11	+ <polygon fill="#FF4081" points="249.278,0 84.157,286 166.721,286 331.842,0 "/>
	12	+ <polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 "/>
	13	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="249.278,0 290.561,71.5 331.842,0 "/>
	14	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.278,0 290.561,71.5 "/>
	15	+ <polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.278,143 290.561,71.5 "/>
	16	+ <polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.278,143 "/>
	17	+ <polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.278,143 "/>
	18	+ <polygon fill-opacity="0.3" points="125.438,214.5 166.721,143 208,214.5 "/>
	19	+ <polygon fill-opacity="0.4" points="125.438,214.5 166.721,286 208,214.5 "/>
	20	+ <polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 "/>
	21	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 "/>
	22	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 "/>
	23	+ <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 "/>
	24	+ <polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 "/>
	25	+ <polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 "/>
	26	+ <polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 "/>
	27	+ <polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 "/>
	28	+ <polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 "/>
	29	+ <polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 "/>
	30	+ <g>
	31	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 "/>
	32	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 "/>
	33	+ <polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 "/>
	34	+ <polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 "/>
	35	+ <polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 "/>
	36	+ </g>
	37	+ </g>
	38	+ <rect y="-65" fill="none" width="416" height="416"/>
	39	+</g>
	40	+<g display="none">
	41	+ <g display="inline">
	42	+ <polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 "/>
	43	+ <polygon fill="#3F51B5" points="331.842,0 249.278,0 331.842,143 373.121,71.5 "/>
	44	+ <polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 "/>
	45	+ <polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 "/>
	46	+ <polygon fill-opacity="0.5" points="249.278,0 290.561,71.5 331.842,0 "/>
	47	+ <polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 "/>
	48	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 "/>
	49	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 "/>
	50	+ <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 "/>
	51	+ <polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 "/>
	52	+ <polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 "/>
	53	+ <polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 "/>
	54	+ <polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 "/>
	55	+ <g>
	56	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 "/>
	57	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 "/>
	58	+ <polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 "/>
	59	+ <polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 "/>
	60	+ <polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 "/>
	61	+ </g>
	62	+ <polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 "/>
	63	+ <polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 "/>
	64	+ </g>
	65	+ <rect y="-65" display="inline" fill="none" width="416" height="416"/>
	66	+</g>
	67	+<g display="none">
	68	+ <g display="inline">
	69	+ <polygon fill="#FF4081" points="249.279,0 84.157,286 166.721,286 331.843,0 "/>
	70	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 "/>
	71	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 "/>
	72	+ <polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 "/>
	73	+ <polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 "/>
	74	+ <polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 "/>
	75	+ <polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 "/>
	76	+ <polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/>
	77	+ <polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 "/>
	78	+ </g>
	79	+ <g display="inline">
	80	+ <polygon fill="#FF4081" points="331.84,0 166.718,286 249.279,286 373.121,71.5 "/>
	81	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 "/>
	82	+ <polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 "/>
	83	+ <polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 "/>
	84	+ <polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 "/>
	85	+ <polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 "/>
	86	+ <polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 "/>
	87	+ <polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 "/>
	88	+ </g>
	89	+ <g display="inline">
	90	+ <polygon fill="#FF4081" points="166.718,0 42.878,214.5 84.16,286 249.279,0 "/>
	91	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 "/>
	92	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 "/>
	93	+ <polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 "/>
	94	+ <polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 "/>
	95	+ <polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 "/>
	96	+ <polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 "/>
	97	+ <polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 "/>
	98	+ </g>
	99	+ <rect y="-65" display="inline" fill="none" width="416" height="416"/>
	100	+ <g display="inline">
	101	+ <polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 "/>
	102	+ <polygon fill="#3F51B5" points="331.843,0 249.279,0 331.843,143 373.121,71.5 "/>
	103	+ <polygon fill="#7986CB" points="373.121,71.5 249.279,286 331.843,286 414.4,143 "/>
	104	+ <polygon fill="#536DFE" points="84.157,0 1.597,143 42.878,214.5 166.721,0 "/>
	105	+ <polygon fill-opacity="0.5" points="249.279,0 290.558,71.5 331.843,0 "/>
	106	+ <polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/>
	107	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 "/>
	108	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 "/>
	109	+ <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 "/>
	110	+ <polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 "/>
	111	+ <polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 "/>
	112	+ <polygon fill="#FFFFFF" fill-opacity="0" points="125.439,214.5 84.157,143 42.878,214.5 "/>
	113	+ <polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.843,143 290.558,71.5 "/>
	114	+ <g>
	115	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="331.843,143 373.121,71.5 414.4,143 "/>
	116	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="331.843,143 373.121,214.5 414.4,143 "/>
	117	+ <polygon fill="#FFFFFF" fill-opacity="0" points="290.558,214.5 331.843,143 373.121,214.5 "/>
	118	+ <polygon fill-opacity="0.1" points="290.558,214.5 331.843,286 373.121,214.5 "/>
	119	+ <polygon fill-opacity="0.2" points="249.279,286 290.558,214.5 331.843,286 "/>
	120	+ </g>
	121	+ <polygon fill-opacity="0.2" points="125.439,214.5 84.157,286 42.878,214.5 "/>
	122	+ <polygon fill-opacity="0.2" points="373.121,71.5 331.843,0 290.558,71.5 "/>
	123	+ </g>
	124	+</g>
	125	+<g display="none">
	126	+ <g display="inline">
	127	+ <polygon fill="#9F499B" points="249.279,0 84.157,286 166.721,286 331.843,0 "/>
	128	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 "/>
	129	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 "/>
	130	+ <polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 "/>
	131	+ <polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 "/>
	132	+ <polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 "/>
	133	+ <polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 "/>
	134	+ <polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/>
	135	+ <polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 "/>
	136	+ </g>
	137	+ <g display="inline">
	138	+ <polygon fill="#9F499B" points="331.84,0 166.718,286 249.279,286 373.121,71.5 "/>
	139	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 "/>
	140	+ <polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 "/>
	141	+ <polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 "/>
	142	+ <polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 "/>
	143	+ <polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 "/>
	144	+ <polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 "/>
	145	+ <polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 "/>
	146	+ </g>
	147	+ <g display="inline">
	148	+ <polygon fill="#9F499B" points="373.121,71.5 249.279,286 331.843,286 414.4,143 "/>
	149	+ <polygon fill-opacity="0.2" points="331.843,143 373.121,214.5 414.4,143 "/>
	150	+ <polygon fill-opacity="0.3" points="290.558,214.5 331.843,143 373.121,214.5 "/>
	151	+ <polygon fill-opacity="0.4" points="290.558,214.5 331.843,286 373.121,214.5 "/>
	152	+ <polygon fill-opacity="0.5" points="249.279,286 290.558,214.5 331.843,286 "/>
	153	+ <polygon fill-opacity="0.1" points="331.843,143 373.121,71.5 414.4,143 "/>
	154	+ </g>
	155	+ <g display="inline">
	156	+ <polygon fill="#9F499B" points="166.718,0 42.878,214.5 84.16,286 249.279,0 "/>
	157	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 "/>
	158	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 "/>
	159	+ <polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 "/>
	160	+ <polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 "/>
	161	+ <polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 "/>
	162	+ <polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 "/>
	163	+ <polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 "/>
	164	+ </g>
	165	+ <g display="inline">
	166	+ <polygon fill="#9F499B" points="84.157,0 1.6,143 42.878,214.5 166.721,0 "/>
	167	+ <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 "/>
	168	+ <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 "/>
	169	+ <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 "/>
	170	+ <polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 "/>
	171	+ <polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 "/>
	172	+ </g>
	173	+ <rect y="-65" display="inline" fill="none" width="416" height="416"/>
	174	+</g>
	175	+</svg>
...	...

bower_components/polymer-element-catalog/app/index.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="utf-8">
	5	+ <meta name="description" content="A catalog of Polymer-based web components">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1">
	7	+ <title>Polymer Element Catalog</title>
	8	+
	9	+ <link rel="shortcut icon" href="/images/p-logo-32.png">
	10	+
	11	+ <link rel="stylesheet" href="/styles/main.css" inline>
	12	+
	13	+ <script src="/../bower_components/webcomponentsjs/webcomponents-lite.js" inline></script>
	14	+
	15	+ <!-- will be replaced with /elements/elements.build.html -->
	16	+ <link rel="import" href="/elements/elements.html">
	17	+ <!-- endreplace-->
	18	+
	19	+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:900">
	20	+
	21	+<script>
	22	+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	23	+ (i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	24	+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	25	+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	26	+ ga('create', 'UA-39334307-10', 'auto');
	27	+ // ga('send', 'pageview');
	28	+ </script>
	29	+</head>
	30	+
	31	+<body id="app" class="fullbleed" unresolved>
	32	+ <app-shell class="fit"></app-shell>
	33	+</body>
	34	+</html>
...	...

bower_components/polymer-element-catalog/app/styles/main.css 0 → 100644

View file @07d13c9

	1	+body {
	2	+ font-family: Roboto, 'Noto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	3	+ -webkit-font-smoothing: antialiased;
	4	+ font-weight: 400;
	5	+ color: #424242;
	6	+ line-height: 20px;
	7	+ font-size: 13px;
	8	+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	9	+}
	10	+
	11	+body, a {
	12	+ color: #424242;
	13	+}
	14	+
	15	+pre, code {
	16	+ font-family: Inconsolata, monospace;
	17	+}
	18	+
	19	+pre {
	20	+ overflow-x: auto;
	21	+}
	22	+
	23	+h1, h2, h3, h4, h5, h6, a {
	24	+ text-rendering: optimizeLegibility;
	25	+}
	26	+
	27	+
	28	+a {
	29	+ text-decoration: none;
	30	+ letter-spacing: 0;
	31	+}
	32	+
	33	+p {
	34	+ font-size: 14px;
	35	+ line-height: 22px;
	36	+}
	37	+
	38	+h1 {
	39	+ font-size: 45px;
	40	+ font-weight: 400;
	41	+ letter-spacing: -.018em;
	42	+ line-height: 48px;
	43	+}
	44	+
	45	+h2 {
	46	+ font-weight: 400;
	47	+ font-size: 18px;
	48	+ letter-spacing: 0;
	49	+ line-height: 48px;
	50	+ margin: 8px 0;
	51	+}
	52	+
	53	+h3 {
	54	+ font-size: 24px;
	55	+ font-weight: 400;
	56	+ letter-spacing: -.012em;
	57	+ line-height: 32px;
	58	+}
	59	+
	60	+h4 {
	61	+ font-size: 16px;
	62	+ font-weight: 400;
	63	+ line-height: 24px;
	64	+}
	65	+
	66	+h5, h6 {
	67	+ font-size: 13px;
	68	+ line-height: 20px;
	69	+}
	70	+
	71	+a {
	72	+ font-size: 14px;
	73	+ font-weight: 500;
	74	+ letter-spacing: 0.018em;
	75	+ line-height: 24px;
	76	+}
	77	+
	78	+catalog-app {
	79	+ overflow: hidden;
	80	+}
	81	+
	82	+.menu-icon {
	83	+ display: block;
	84	+ width: 24px;
	85	+ padding-top: 3px;
	86	+ cursor: pointer;
	87	+ box-sizing: border-box;
	88	+ -webkit-user-select: none;
	89	+}
	90	+
	91	+.menu-bar {
	92	+ display: block;
	93	+ width: 18px;
	94	+ height: 2px;
	95	+ margin: 0 auto;
	96	+ margin-bottom: 3px;
	97	+ background: #333;
	98	+ -webkit-transform-origin: center;
	99	+ transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1);
	100	+}
	101	+
	102	+.menu-icon[active] .menu-bar {
	103	+ opacity: 0;
	104	+}
	105	+
	106	+.menu-icon[active] .menu-bar:first-child {
	107	+ -webkit-transform: rotate(45deg) translate(2px,2px);
	108	+ margin-top: 4px;
	109	+ opacity: 1;
	110	+}
	111	+
	112	+.menu-icon[active] .menu-bar:last-child {
	113	+ -webkit-transform: rotate(-45deg) translate(5px,-5px);
	114	+ opacity: 1;
	115	+}
	116	+
	117	+paper-toolbar {
	118	+ color: #424242;
	119	+ transition: height 450ms cubic-bezier(0.55, 0, 0.1, 1);
	120	+}
	121	+
	122	+paper-toolbar.medium-tall {
	123	+ height: 107px;
	124	+}
	125	+
	126	+paper-toolbar nav {
	127	+ margin: 12px 0 0 0;
	128	+}
	129	+
	130	+paper-toolbar nav a {
	131	+ display: inline-block;
	132	+ font-weight: 500;
	133	+ line-height: 50px;
	134	+ text-transform: none;
	135	+ color: #666;
	136	+ margin: 0 12px;
	137	+ padding: 0 4px;
	138	+}
	139	+
	140	+paper-toolbar nav a:hover {
	141	+ color: #536DFE;
	142	+}
	143	+
	144	+paper-toolbar nav a:first-child {
	145	+ margin-left: 0;
	146	+}
	147	+
	148	+paper-toolbar nav .active {
	149	+ color: black;
	150	+ border-bottom: 2px solid #7986CB;
	151	+}
	152	+
	153	+iron-icon {
	154	+ color: rgba(0,0,0,0.54);
	155	+}
	156	+
	157	+p a {
	158	+ text-transform: none;
	159	+ color: rgb(85,114,250);
	160	+}
	161	+
	162	+li p {
	163	+ margin: 0;
	164	+}
	165	+
	166	+aside {
	167	+ margin: 40px;
	168	+ padding: 20px 40px;
	169	+ background-color: #fafafa;
	170	+ border: 1px solid #e5e5e5;
	171	+}
0	172	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/bower.json 0 → 100644

View file @07d13c9

	1	+{
	2	+ "name": "polymer-element-catalog",
	3	+ "version": "1.0.11",
	4	+ "authors": [
	5	+ "Google"
	6	+ ],
	7	+ "description": "A catalog showcasing Google's Web Components",
	8	+ "main": "dist/index.html",
	9	+ "license": "http://polymer.github.io/LICENSE.txt",
	10	+ "ignore": [
	11	+ "*/.",
	12	+ "node_modules",
	13	+ "bower_components",
	14	+ "test",
	15	+ "tests"
	16	+ ],
	17	+ "private": true,
	18	+ "dependencies": {
	19	+ "iron-elements": "PolymerElements/iron-elements#^1.0.0",
	20	+ "paper-elements": "PolymerElements/paper-elements#^1.0.0",
	21	+ "gold-elements": "PolymerElements/gold-elements#^1.0.0",
	22	+ "neon-elements": "PolymerElements/neon-elements#^1.0.0",
	23	+ "platinum-elements": "PolymerElements/platinum-elements#^1.0.0",
	24	+ "google-web-components": "GoogleWebComponents/google-web-components#^1.0.0",
	25	+ "molecules": "PolymerElements/molecules#^1.0.0",
	26	+ "polymer": "Polymer/polymer#^1.0.0",
	27	+ "app-router": "blasten/app-router#master",
	28	+ "pushstate-anchor": "~0.3.0",
	29	+ "color": "~2.5.0",
	30	+ "hydrolysis": "PolymerLabs/hydrolysis#^1.11.0"
	31	+ }
	32	+}
...	...

bower_components/polymer-element-catalog/build/catalog/elements.js 0 → 100644

View file @07d13c9

	1	+var path = require('path');
	2	+var fs = require('fs-extra');
	3	+
	4	+var _ = require('lodash');
	5	+var async = require('async');
	6	+
	7	+var stream = require('./utils/stream').obj;
	8	+var packageDetails = require('./utils/package-details');
	9	+var packageElements = require('./utils/package-elements');
	10	+var analyze = require('./utils/analyze');
	11	+var cleanTags = require('./utils/clean-tags');
	12	+
	13	+module.exports = function (imports) {
	14	+
	15	+ var root = imports.root;
	16	+ var destDir = imports.destDir;
	17	+ var bowerFile = require(root + '/bower.json');
	18	+ var deps = bowerFile.dependencies;
	19	+
	20	+ var data = [];
	21	+ var out = {};
	22	+
	23	+ return stream.compose(
	24	+ stream.parse('packages.*'),
	25	+ stream.filter(function(package) {
	26	+
	27	+ return deps[package.name];
	28	+ }),
	29	+ stream.asyncMap(function (package, done) {
	30	+
	31	+ var packageBower = packageDetails({
	32	+ root: root,
	33	+ name: package.name
	34	+ });
	35	+
	36	+ var elements = packageElements({
	37	+ name: package.name,
	38	+ deps: packageBower.dependencies
	39	+ });
	40	+
	41	+ var output = async.map(elements, function (elementName, cb) {
	42	+
	43	+ var details = packageDetails({
	44	+ root: root,
	45	+ name: elementName
	46	+ });
	47	+
	48	+ fs.mkdirsSync(path.join(root, destDir, 'data', 'docs'));
	49	+ if (typeof details.main === 'string') details.main = [details.main];
	50	+ analyze(root, destDir, elementName, details.main \|\| [elementName + '.html'], function(err, data) {
	51	+ // Set up object schema
	52	+ console.log("-",elementName,"(" + details._release + ")");
	53	+
	54	+ var combined = data.elements.concat(data.behaviors);
	55	+ var hero;
	56	+ combined.forEach(function(el) {
	57	+ if (el.hero) hero = '/bower_components/' + elementName + '/' + el.hero;
	58	+ });
	59	+
	60	+ var active = null;
	61	+ var demo = null;
	62	+ for (var i in combined) {
	63	+ if (combined[i].demos.length) {
	64	+ active = combined[i].is;
	65	+ demo = (combined[i].demos \|\| [])[0] \|\| null;
	66	+ }
	67	+ }
	68	+
	69	+ cb(err, {
	70	+ name: elementName,
	71	+ version: details._release,
	72	+ source: details._originalSource,
	73	+ target: details._target,
	74	+ package: package.name,
	75	+ description: details.description,
	76	+ tags: (details.keywords \|\| []).filter(cleanTags),
	77	+ hero: hero,
	78	+ demo: demo,
	79	+ active: active,
	80	+ elements: (data.elements \|\| []).map(function(el){ return el.is; }),
	81	+ behaviors: (data.behaviors \|\| []).map(function(be){ return be.is; }),
	82	+ });
	83	+ });
	84	+ }, function(err, output) {
	85	+ done(err, output);
	86	+ });
	87	+ }),
	88	+
	89	+ // Convert to objects from arrays (and flatten),
	90	+ // and sort
	91	+ stream.create(
	92	+ function (chunk, enc, done) {
	93	+
	94	+ data.push(chunk);
	95	+ done();
	96	+ },
	97	+ function (done) {
	98	+
	99	+ var sortedData = _(data)
	100	+ .flatten()
	101	+ .sortBy('name')
	102	+ .value();
	103	+
	104	+ this.push(sortedData);
	105	+ done();
	106	+ }
	107	+ )
	108	+ );
	109	+}
0	110	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/guides.js 0 → 100644

View file @07d13c9

	1	+var path = require('path');
	2	+
	3	+var fs = require('graceful-fs');
	4	+var _ = require('lodash');
	5	+var gs = require('glob-stream');
	6	+var fm = require('front-matter');
	7	+var mkdirp = require('mkdirp');
	8	+
	9	+var stream = require('./utils/stream').obj;
	10	+var render = require('./utils/render-guide');
	11	+
	12	+module.exports = function (options) {
	13	+
	14	+ var guideFilePaths = options.src;
	15	+ var destDir = options.destDir;
	16	+ var output = stream.create();
	17	+
	18	+ gs.create(guideFilePaths)
	19	+ .pipe(stream.get('path'))
	20	+ .pipe(getFileContents())
	21	+ .pipe(constructGuide(destDir))
	22	+ .pipe(output);
	23	+
	24	+ return output;
	25	+};
	26	+
	27	+function getFileContents () {
	28	+
	29	+ return stream.asyncMap(function (filepath, enc, done) {
	30	+
	31	+ fs.readFile(filepath, function (err, content) {
	32	+
	33	+ done(err, {
	34	+ path: filepath,
	35	+ content: content.toString()
	36	+ });
	37	+ });
	38	+ });
	39	+}
	40	+
	41	+function constructGuide (destDir) {
	42	+
	43	+ return stream.concurrent(function (file, enc, done) {
	44	+
	45	+ var rawGuide = fm(file.content);
	46	+ var packageName = getPackageName(file.path);
	47	+ var guideName = getGuideName(file.path);
	48	+ if (packageName) guideName = path.join(packageName, guideName);
	49	+
	50	+ var guide = _(rawGuide.attributes)
	51	+ //.omit('updated', 'summary')
	52	+ .extend({
	53	+ name: guideName,
	54	+ package: packageName
	55	+ })
	56	+ .value();
	57	+
	58	+ // Convert markdown guides to HTML
	59	+ writeGuidesFile({
	60	+ src: file.path,
	61	+ dest: destDir,
	62	+ body: rawGuide.body
	63	+ }, function (err) {
	64	+
	65	+ done(err, guide)
	66	+ });
	67	+ });
	68	+}
	69	+
	70	+function writeGuidesFile (options, done) {
	71	+
	72	+ var src = options.src;
	73	+ var body = options.body;
	74	+ var destDir = options.dest;
	75	+
	76	+ var guideDestPath = formatParsedGuideFilepath(src, destDir);
	77	+ var dir = path.dirname(guideDestPath);
	78	+
	79	+ mkdirp(dir, function (err) {
	80	+
	81	+ if (err) {
	82	+ return done(err);
	83	+ }
	84	+
	85	+ fs.writeFile(guideDestPath, render(body), done);
	86	+ });
	87	+}
	88	+
	89	+function getPackageName (filepath) {
	90	+
	91	+ var segments = filepath.split('/');
	92	+ if (segments.indexOf('bower_components') >= 0) {
	93	+ return segments[segments.length - 3];
	94	+ }
	95	+}
	96	+
	97	+function getGuideName (filepath) {
	98	+
	99	+ var segments = filepath.split('/');
	100	+ return _.last(segments).split('.')[0];
	101	+}
	102	+
	103	+function formatParsedGuideFilepath (srcPath, destDir) {
	104	+
	105	+ var relativeSrcPath = srcPath
	106	+ .replace(process.cwd() + path.sep, '')
	107	+ .split('/')
	108	+ .filter(function (segment) {
	109	+
	110	+ return segment !== 'bower_components';
	111	+ });
	112	+
	113	+ // Elements in the bower_components directory
	114	+ // need to have the guides segment put before the
	115	+ // element name in the path
	116	+ if (relativeSrcPath[0] !== 'guides') {
	117	+ relativeSrcPath[1] = relativeSrcPath[0];
	118	+ relativeSrcPath[0] = 'guides';
	119	+ }
	120	+
	121	+ var filename = _.last(relativeSrcPath).split('.')[0] + '.html';
	122	+ relativeSrcPath = path.dirname(relativeSrcPath.join('/'));
	123	+
	124	+ return path.join(
	125	+ process.cwd(),
	126	+ destDir,
	127	+ 'data',
	128	+ relativeSrcPath,
	129	+ filename
	130	+ );
	131	+}
0	132	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/index.js 0 → 100644

View file @07d13c9

	1	+#!/usr/bin/env node
	2	+
	3	+var fs = require('fs');
	4	+var path = require('path');
	5	+
	6	+var _ = require('lodash');
	7	+
	8	+var packages = require('./packages');
	9	+var elements = require('./elements');
	10	+var tags = require('./tags');
	11	+var guides = require('./guides');
	12	+var objectFromStreams = require('./utils/object-from-streams');
	13	+
	14	+module.exports = function (options) {
	15	+
	16	+ var srcFilepath = options.src;
	17	+ var destDir = options.destDir;
	18	+
	19	+ var root = path.resolve(__dirname, '../../');
	20	+ var srcCatalog = fs.createReadStream(srcFilepath);
	21	+ var guideFilepaths = [
	22	+ path.resolve(process.cwd(), 'guides', '**.md')//,
	23	+ //path.resolve(process.cwd(), 'bower_components', '', 'guides', '.md')
	24	+ ];
	25	+
	26	+ var elementsStream = srcCatalog.pipe(elements({root: root, destDir: destDir}));
	27	+ var guidesStream = guides({
	28	+ src: guideFilepaths,
	29	+ destDir: destDir
	30	+ });
	31	+
	32	+ return objectFromStreams({
	33	+ packages: srcCatalog.pipe(packages({
	34	+ root: root,
	35	+ guides: guidesStream
	36	+ })),
	37	+ elements: elementsStream,
	38	+ tags: {
	39	+ data: elementsStream.pipe(tags()),
	40	+ onArray: _.first
	41	+ },
	42	+ guides: guidesStream
	43	+ });
	44	+};
0	45	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/packages.js 0 → 100644

View file @07d13c9

	1	+var _ = require('lodash');
	2	+
	3	+var stream = require('./utils/stream').obj;
	4	+var packageDetails = require('./utils/package-details');
	5	+var packageElements = require('./utils/package-elements');
	6	+var parseVersion = require('./utils/parse-version');
	7	+
	8	+module.exports = function (imports) {
	9	+
	10	+ var root = imports.root;
	11	+ var bowerFile = require(root + '/bower.json');
	12	+ var deps = bowerFile.dependencies;
	13	+ var guidesStream = imports.guides;
	14	+
	15	+ return stream.compose(
	16	+ stream.parse('packages.*'),
	17	+ stream.filter(function (package) {
	18	+
	19	+ return deps[package.name];
	20	+ }),
	21	+ stream.asyncMap(function (package, done) {
	22	+
	23	+ var details = packageDetails({
	24	+ root: root,
	25	+ name: package.name
	26	+ });
	27	+
	28	+ var elements = packageElements({
	29	+ name: package.name,
	30	+ deps: details.dependencies
	31	+ });
	32	+
	33	+ // Parse all guides and add to packages meta
	34	+ guidesStream
	35	+ .pipe(stream.filter(function (guide) {
	36	+
	37	+ return guide.package === package.name
	38	+ }))
	39	+ .pipe(stream.concat(function (guides) {
	40	+
	41	+ package.version = details._release;
	42	+ package.description = details.description;
	43	+ package.elements = elements;
	44	+ package.guides = _.pluck(guides, 'name');
	45	+
	46	+ console.log("===",package.name,"(" + details._release + ")");
	47	+
	48	+ done(null, package);
	49	+ }));
	50	+ })
	51	+ );
	52	+};
0	53	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/tags.js 0 → 100644

View file @07d13c9

	1	+var path = require('path');
	2	+
	3	+var _ = require('lodash');
	4	+
	5	+var stream = require('./utils/stream').obj;
	6	+var packageDetails = require('./utils/package-details');
	7	+var packageElements = require('./utils/package-elements');
	8	+
	9	+module.exports = function (imports) {
	10	+
	11	+ return stream.map(function (element) {
	12	+
	13	+ var tags = element.tags;
	14	+
	15	+ // TODO: parse tags from elements. None of them
	16	+ // have any tags yet
	17	+
	18	+ return {};
	19	+ });
	20	+};
0	21	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/analyze.js 0 → 100644

View file @07d13c9

	1	+var path = require('path');
	2	+var fs = require('fs-extra');
	3	+var Analyzer = require('hydrolysis').Analyzer;
	4	+var FileLoader = require('hydrolysis/lib/loader/file-loader');
	5	+var FSResolver = require('hydrolysis/lib/loader/fs-resolver');
	6	+var Promise = require('es6-promise').Promise;
	7	+
	8	+module.exports = function(root, destDir, elementName, sources, callback) {
	9	+ var elRoot = path.join(root, 'bower_components', elementName);
	10	+ var elPath = path.join(elRoot, elementName + '.html');
	11	+ var sourcePaths = sources.map(function(source) {
	12	+ return (source.indexOf('/') >= 0) ? source : path.join(elRoot,source);
	13	+ });
	14	+ var loader = new FileLoader();
	15	+
	16	+ Promise.all(sourcePaths.filter(function(path) {
	17	+ return fs.existsSync(path);
	18	+ }).map(function(path) {
	19	+ return Analyzer.analyze(path,
	20	+ {
	21	+ clean: true,
	22	+ filter: function(href){
	23	+ if (href.indexOf("http://") > -1 \|\| href.indexOf("https://") > -1) {
	24	+ return true;
	25	+ } else {
	26	+ return false;
	27	+ }
	28	+ }
	29	+ })
	30	+ .then(function(analyzer){
	31	+ return {
	32	+ elements: analyzer.elementsForFolder(path),
	33	+ behaviors: analyzer.behaviorsForFolder(path),
	34	+ features: []
	35	+ };
	36	+ });
	37	+ })).then(function(values) {
	38	+ var out = {elements: [], behaviors: [], features: [], elementsByTagName: {}};
	39	+ values.forEach(function(data) {
	40	+ var els = out.elements.map(function(el){ return el.is });
	41	+ var bes = out.behaviors.map(function(be){ return be.is });
	42	+ data.elements.forEach(function(element){
	43	+ element.scriptElement = undefined;
	44	+ element.behaviors && element.behaviors.forEach(function(behavior){
	45	+ behavior.javascriptNode = undefined;
	46	+ });
	47	+ element.properties && element.properties.forEach(function(property){
	48	+ property.javascriptNode = undefined;
	49	+ });
	50	+ })
	51	+
	52	+ out.elements = out.elements.concat(data.elements && data.elements.filter(function(el) { return els.indexOf(el.is) < 0 }) \|\| []);
	53	+ out.behaviors = out.behaviors.concat(data.behaviors && data.behaviors.filter(function(be) { return bes.indexOf(be.is) < 0 }) \|\| []);
	54	+ out.features = out.features.concat(data.features \|\| []);
	55	+
	56	+ data.elements.forEach(function(element) {
	57	+ if (!out.elementsByTagName[element.is]) {
	58	+ out.elementsByTagName[element.is] = element;
	59	+ }
	60	+ });
	61	+ });
	62	+
	63	+ fs.writeFileSync(path.join(root, destDir, 'data', 'docs', elementName + '.json'), JSON.stringify(out));
	64	+
	65	+ callback(null, out);
	66	+ }).catch(function(err) {
	67	+ console.error(err.stack);
	68	+ callback(err);
	69	+ });
	70	+}
0	71	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/clean-tags.js 0 → 100644

View file @07d13c9

	1	+var excluded = ['web-components','polymer','web-component','gold','paper','google','iron'];
	2	+module.exports = function(tag) {
	3	+ return excluded.indexOf(tag.toLowerCase()) < 0;
	4	+}
0	5	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/object-from-streams.js 0 → 100644

View file @07d13c9

	1	+var _ = require('lodash');
	2	+var asyncEach = require('async-each');
	3	+
	4	+var stream = require('./stream').obj;
	5	+
	6	+module.exports = function (spec) {
	7	+
	8	+ var objectStream = stream.create();
	9	+
	10	+
	11	+ asyncEach(Object.keys(spec), function (key, done) {
	12	+
	13	+ if (stream.validate(spec[key])) {
	14	+ spec[key].pipe(stream.concat(function (data) {
	15	+
	16	+ var obj = {};
	17	+ obj[key] = data;
	18	+ objectStream.push(obj);
	19	+
	20	+ done();
	21	+ }));
	22	+ }
	23	+
	24	+ else if (typeof spec[key] === 'object' && spec[key].onArray && stream.validate(spec[key].data)) {
	25	+
	26	+ spec[key].data.pipe(stream.concat(function (data) {
	27	+
	28	+ var obj = {};
	29	+ obj[key] = spec[key].onArray(data);
	30	+ objectStream.push(obj);
	31	+
	32	+ done();
	33	+ }));
	34	+ }
	35	+
	36	+ else {
	37	+ var obj = {};
	38	+ obj[key] = spec[key];
	39	+ objectStream.push(obj);
	40	+ done();
	41	+ }
	42	+ }, function () {
	43	+
	44	+ objectStream.end();
	45	+ });
	46	+
	47	+ // TODO: right now this returns a stream containing the whole object.
	48	+ // It might be could to split it by key?
	49	+ return objectStream
	50	+ .pipe(stream.reduce(_.extend));
	51	+};
0	52	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/package-details.js 0 → 100644

View file @07d13c9

	1	+var path = require('path');
	2	+var fs = require('fs');
	3	+
	4	+module.exports = function (imports) {
	5	+
	6	+ var root = imports.root;
	7	+ var name = imports.name;
	8	+
	9	+ var packageBowerFilepath = path.resolve(root, 'bower_components/' + name + '/.bower.json');
	10	+ if (fs.existsSync(packageBowerFilepath)) {
	11	+ return require(packageBowerFilepath);
	12	+ } else {
	13	+ return {};
	14	+ }
	15	+};
0	16	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/package-elements.js 0 → 100644

View file @07d13c9

	1	+var _ = require('lodash');
	2	+
	3	+module.exports = function (imports) {
	4	+
	5	+ var name = imports.name;
	6	+ var deps = imports.deps;
	7	+
	8	+ deps = deps \|\| {};
	9	+
	10	+ return _(deps).keys().value();
	11	+}
0	12	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/parse-version.js 0 → 100644

View file @07d13c9

	1	+module.exports = function (version) {
	2	+
	3	+ return (version.indexOf('#') > 0) ? version.split('#')[1] : version;
	4	+}
0	5	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/render-guide.js 0 → 100644

View file @07d13c9

	1	+var marked = require('marked');
	2	+
	3	+var renderer = new marked.Renderer();
	4	+var firstHeading = true;
	5	+var permalinks = [];
	6	+
	7	+renderer.heading = function(text, level) {
	8	+ var permalink = text.toLowerCase().replace(/[^\w]+/g, '-');
	9	+ if (permalinks.indexOf(permalink) >= 0) {
	10	+ permalink = permalink + "-1";
	11	+ }
	12	+ permalinks.push(permalink);
	13	+
	14	+ var htext = '<h' + level + ' id="' + permalink + '">' + text + '</h' + level + '>';
	15	+
	16	+ if (level === 2) {
	17	+ var out = "";
	18	+ firstHeading ? firstHeading = false : out += "</section>\n\n";
	19	+ return out + '<section class="guide-section">\n' + htext + '\n';
	20	+ } else {
	21	+ return htext;
	22	+ }
	23	+}
	24	+
	25	+module.exports = function(content) {
	26	+ permalinks = [];
	27	+ firstHeading = true;
	28	+
	29	+ var out = marked(content, {renderer: renderer});
	30	+ out += '</section>'
	31	+ return out;
	32	+}
0	33	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/build/catalog/utils/stream.js 0 → 100644

View file @07d13c9

	1	+var concat = require('concat-stream');
	2	+var reduce = require('through2-reduce');
	3	+var asyncMap = require('through2-asyncmap');
	4	+var filter = require('through2-filter');
	5	+var map = require('through2-map');
	6	+var through = require('through2');
	7	+var jsonStream = require('JSONStream');
	8	+var isStream = require('is-stream');
	9	+var split = require('split');
	10	+var writeStreamP = require('writestreamp');
	11	+var pumpify = require('pumpify');
	12	+var from = require('from2');
	13	+var concurrent = require('through2-concurrent');
	14	+var eos = require('end-of-stream');
	15	+
	16	+exports.create = through;
	17	+exports.split = split;
	18	+exports.writeFile = writeStreamP;
	19	+exports.from = from;
	20	+exports.concurrent = concurrent;
	21	+exports.onEnd = eos;
	22	+
	23	+exports.parse = jsonStream.parse.bind(jsonStream);
	24	+exports.stringify = jsonStream.stringify.bind(jsonStream);
	25	+exports.stringify.obj = jsonStream.stringifyObject = function (options) {
	26	+
	27	+ options = options \|\| {};
	28	+
	29	+ return through.obj(function (chunk, enc, done) {
	30	+
	31	+ done(null, JSON.stringify(chunk, null, options.space));
	32	+ });
	33	+}
	34	+exports.validate = isStream;
	35	+
	36	+exports.concat = concat;
	37	+exports.compose = pumpify;
	38	+
	39	+exports.reduce = reduce;
	40	+reduce.obj = function (fn) {
	41	+
	42	+ return reduce.call(null, {objectMode: true}, fn);
	43	+}
	44	+exports.filter = filter;
	45	+exports.map = map;
	46	+exports.asyncMap = asyncMap;
	47	+
	48	+// Object mode
	49	+exports.obj = {
	50	+ create: exports.create.obj,
	51	+ split: exports.split.obj,
	52	+ writeFile: exports.writeFile,
	53	+ from: from.obj,
	54	+ concurrent: exports.concurrent.obj,
	55	+ onEnd: exports.onEnd,
	56	+
	57	+ parse: exports.parse,
	58	+ stringify: exports.stringify.obj,
	59	+ validate: exports.validate,
	60	+
	61	+ concat: exports.concat,
	62	+ compose: exports.compose.obj,
	63	+
	64	+ reduce: exports.reduce.obj,
	65	+ filter: exports.filter.obj,
	66	+ map: exports.map.obj,
	67	+ asyncMap: exports.asyncMap.obj,
	68	+ get: function (key) {
	69	+
	70	+ return exports.obj.create(function (obj, enc, done) {
	71	+
	72	+ done(null, obj[key]);
	73	+ });
	74	+ }
	75	+};
...	...

bower_components/polymer-element-catalog/catalog.json 0 → 100644

View file @07d13c9

	1	+{
	2	+ "packages": [
	3	+ {
	4	+ "name":"iron-elements",
	5	+ "title":"Iron Elements",
	6	+ "color":"#81c784",
	7	+ "symbol": "Fe",
	8	+ "tagline":"Polymer core elements"
	9	+ },
	10	+ {
	11	+ "name":"paper-elements",
	12	+ "title":"Paper Elements",
	13	+ "color":"#ffffff",
	14	+ "symbol": "Md",
	15	+ "tagline":"Material design elements"
	16	+ },
	17	+ {
	18	+ "name":"google-web-components",
	19	+ "title":"Google Web Components",
	20	+ "color":"#64B5F6",
	21	+ "symbol":"Go",
	22	+ "tagline":"Components for Google's APIs and services"
	23	+ },
	24	+ {
	25	+ "name":"gold-elements",
	26	+ "color":"#ffb74d",
	27	+ "title":"Gold Elements",
	28	+ "symbol": "Au",
	29	+ "tagline":"Ecommerce Elements"
	30	+ },
	31	+ {
	32	+ "name":"neon-elements",
	33	+ "title":"Neon Elements",
	34	+ "color":"#a7ffeb",
	35	+ "symbol":"Ne",
	36	+ "tagline": "Animation and Special Effects"
	37	+ },
	38	+ {
	39	+ "name":"platinum-elements",
	40	+ "title":"Platinum Elements",
	41	+ "color":"#cfd8dc",
	42	+ "symbol":"Pt",
	43	+ "tagline":"Offline, push, and more"
	44	+ },
	45	+ {
	46	+ "name":"molecules",
	47	+ "title":"Molecules",
	48	+ "color":"#ffab91",
	49	+ "symbol":"Mo",
	50	+ "tagline": "Wrappers for third-party libraries"
	51	+ }
	52	+ ]
	53	+}
0	54	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/divshot.json 0 → 100644

View file @07d13c9

	1	+{
	2	+ "name": "polymer-element-catalog",
	3	+ "root": "./dist",
	4	+ "clean_urls": false,
	5	+ "error_page": "error.html",
	6	+ "routes": {
	7	+ "**":"index.html"
	8	+ }
	9	+}
0	10	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/firebase.json 0 → 100644

View file @07d13c9

	1	+{
	2	+ "firebase": "sizzling-inferno-6187",
	3	+ "public": "dist",
	4	+ "ignore": [
	5	+ "firebase.json",
	6	+ "*/.",
	7	+ "/node_modules/"
	8	+ ],
	9	+ "rewrites": [{
	10	+ "source":"**",
	11	+ "destination":"/index.html"
	12	+ }]
	13	+}
0	14	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/fixtures/catalog.json 0 → 100644

View file @07d13c9

	1	+{
	2	+ "packages": [
	3	+ {
	4	+ "name":"iron-elements",
	5	+ "title":"Iron Elements",
	6	+ "version":"1.0.0",
	7	+ "symbol":"Fe",
	8	+ "color":"#81c784",
	9	+ "tagline":"Polymer core elements",
	10	+ "description":"Iron elements are a set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps."
	11	+ },
	12	+ {
	13	+ "name":"gold-elements",
	14	+ "title":"Gold Elements",
	15	+ "symbol":"Au",
	16	+ "color":"#ffb74d",
	17	+ "version":"1.0.0",
	18	+ "tagline":"Business elements",
	19	+ "description":"Business elements provide UI and common utility components for eCommerce. They include elements such as checkout forms, product listings, and shopping carts."
	20	+ },
	21	+ {
	22	+ "name":"paper-elements",
	23	+ "title":"Paper Elements",
	24	+ "symbol":"Md",
	25	+ "color":"#ffffff",
	26	+ "version":"1.0.0",
	27	+ "tagline":"Material design elements",
	28	+ "description":"--TBD--"
	29	+ },
	30	+ {
	31	+ "name":"oxygen-elements",
	32	+ "title":"Oxygen Elements",
	33	+ "symbol":"O",
	34	+ "color":"#4DD0E1",
	35	+ "version":"1.0.0",
	36	+ "tagline":"Data-pipes and specialized services",
	37	+ "description":"--TBD--"
	38	+ },
	39	+ {
	40	+ "name":"neon-elements",
	41	+ "title":"Neon Elements",
	42	+ "symbol":"Ne",
	43	+ "color":"#a7ffeb",
	44	+ "version":"1.0.0",
	45	+ "tagline":"Elements that implement special effects",
	46	+ "description":"--TBD--"
	47	+ },
	48	+ {
	49	+ "name":"carbon-elements",
	50	+ "title":"Carbon Elements",
	51	+ "symbol":"C",
	52	+ "color":"#b0bec5",
	53	+ "version":"1.0.0",
	54	+ "tagline":"Magical unknown element group",
	55	+ "description":"--TBD--"
	56	+ },
	57	+ {
	58	+ "name":"molecules",
	59	+ "title":"Molecules",
	60	+ "symbol":"Mo",
	61	+ "color":"#ffab91",
	62	+ "version":"1.0.0",
	63	+ "tagline":"Third-party library wrappers",
	64	+ "description":"--TBD--"
	65	+ },
	66	+ {
	67	+ "name":"service-worker-elements",
	68	+ "title":"Service Worker Elements",
	69	+ "symbol":"Sw",
	70	+ "color":"#ffeb3b",
	71	+ "version":"1.0.0",
	72	+ "tagline":"Offline and networking",
	73	+ "description":"--TBD--"
	74	+ }
	75	+ ],
	76	+ "elements": [
	77	+ {
	78	+ "name":"iron-ajax",
	79	+ "package":"iron-elements",
	80	+ "description":"Make requests using AJAX",
	81	+ "tags":["utility","data","app"]
	82	+ },
	83	+ {
	84	+ "name":"iron-toolbar",
	85	+ "package":"iron-elements",
	86	+ "description":"A horizontal bar useful for layout and navigation",
	87	+ "tags":["ui","layout"]
	88	+ },
	89	+ {
	90	+ "name":"gold-checkout",
	91	+ "package":"gold-elements",
	92	+ "description":"A checkout form for collecting payment info.",
	93	+ "tags":["ui","payments"]
	94	+ },
	95	+ {
	96	+ "name":"paper-item",
	97	+ "package":"paper-elements",
	98	+ "description":"A list item",
	99	+ "tags":["ui","lists"]
	100	+ }
	101	+ ],
	102	+ "guides": [
	103	+ {
	104	+ "name":"example",
	105	+ "title":"Example Guide",
	106	+ "summary":"An example guide to live in place of all guides since we don't have any yet.",
	107	+ "packages":["iron-elements","oxygen-elements"],
	108	+ "elements":["iron-ajax","oxygen-foobar"]
	109	+ }
	110	+ ],
	111	+ "tags": {
	112	+ "app":["iron-ajax"],
	113	+ "layout":["iron-toolbar"],
	114	+ "data":["iron-ajax"],
	115	+ "utility":["iron-ajax"],
	116	+ "ui":["iron-toolbar"]
	117	+ }
	118	+}
0	119	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/fixtures/guides/example.html 0 → 100644

View file @07d13c9

	1	+<p>This is an example guide, it would normally be generated from Markdown found
	2	+in <code>/guides</code> but in the interest of getting something in the repo
	3	+it isn't this time.</p>
0	4	\ No newline at end of file
...	...

bower_components/polymer-element-catalog/guides/assets/custom-header.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
	5	+ </script>
	6	+ <link rel="import"
	7	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	8	+ <link rel="import"
	9	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	10	+ <link rel="import"
	11	+ href="/bower_components/font-roboto/roboto.html">
	12	+ <style>
	13	+ body {
	14	+ font-family: Roboto, 'Noto', 'Helvetica Neue',
	15	+ Helvetica, Arial, sans-serif;
	16	+ }
	17	+ .paper-header {
	18	+ padding: 25px;
	19	+ }
	20	+ </style>
	21	+</head>
	22	+<body class="fullbleed vertical layout">
	23	+ <paper-header-panel class="flex">
	24	+ <div class="paper-header">Header</div>
	25	+ <div>Content</div>
	26	+ </paper-header-panel>
	27	+</body>
	28	+</html>
...	...

bower_components/polymer-element-catalog/guides/assets/drawer.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
	5	+ </script>
	6	+ <link rel="import"
	7	+ href="/bower_components/paper-drawer-panel/paper-drawer-panel.html">
	8	+ <link rel="import"
	9	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	10	+ <link rel="import"
	11	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	12	+ <link rel="import"
	13	+ href="/bower_components/paper-icon-button/paper-icon-button.html">
	14	+ <link rel="import"
	15	+ href="/bower_components/iron-icons/iron-icons.html">
	16	+ <link rel="import"
	17	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	18	+ <link rel="import"
	19	+ href="/bower_components/font-roboto/roboto.html">
	20	+ <style>
	21	+ body {
	22	+ font-family: Roboto, 'Noto', 'Helvetica Neue',
	23	+ Helvetica, Arial, sans-serif;
	24	+ }
	25	+ </style>
	26	+</head>
	27	+<body class="fullbleed vertical layout">
	28	+ <paper-drawer-panel class="flex">
	29	+ <paper-header-panel drawer>
	30	+ <paper-toolbar>
	31	+ <div>Application</div>
	32	+ </paper-toolbar>
	33	+ <div> Drawer content... </div>
	34	+ </paper-header-panel>
	35	+ <paper-header-panel main>
	36	+ <paper-toolbar>
	37	+ <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
	38	+ <div>Title</div>
	39	+ </paper-toolbar>
	40	+ <div> Main content... </div>
	41	+ </paper-header-panel>
	42	+ </paper-drawer-panel>
	43	+</body>
	44	+</html>
...	...

bower_components/polymer-element-catalog/guides/assets/header-and-toolbar.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
	5	+ </script>
	6	+ <link rel="import"
	7	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	8	+ <link rel="import"
	9	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	10	+ <link rel="import"
	11	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	12	+ <link rel="import"
	13	+ href="/bower_components/font-roboto/roboto.html">
	14	+ <style>
	15	+ body {
	16	+ font-family: Roboto, 'Noto', 'Helvetica Neue',
	17	+ Helvetica, Arial, sans-serif;
	18	+ }
	19	+ </style>
	20	+</head>
	21	+<body class="fullbleed vertical layout">
	22	+ <paper-header-panel class="flex">
	23	+ <paper-toolbar>
	24	+ <div>Header</div>
	25	+ </paper-toolbar>
	26	+ <div>Content</div>
	27	+ </paper-header-panel>
	28	+</body>
	29	+</html>
...	...

bower_components/polymer-element-catalog/guides/assets/icons.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
	5	+ </script>
	6	+ <link rel="import"
	7	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	8	+ <link rel="import"
	9	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	10	+ <link rel="import"
	11	+ href="/bower_components/paper-icon-button/paper-icon-button.html">
	12	+ <link rel="import"
	13	+ href="/bower_components/iron-icons/iron-icons.html">
	14	+ <link rel="import"
	15	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	16	+ <link rel="import"
	17	+ href="/bower_components/font-roboto/roboto.html">
	18	+ <style>
	19	+ body {
	20	+ font-family: Roboto, 'Noto', 'Helvetica Neue',
	21	+ Helvetica, Arial, sans-serif;
	22	+ }
	23	+ </style>
	24	+</head>
	25	+<body class="fullbleed vertical layout">
	26	+ <paper-header-panel class="flex">
	27	+ <paper-toolbar>
	28	+ <div>Header</div>
	29	+ <span class="flex"></span>
	30	+ <paper-icon-button icon="search"></paper-button-icon>
	31	+ </paper-toolbar>
	32	+ <div>Content</div>
	33	+ </paper-header-panel>
	34	+</body>
	35	+</html>
...	...

bower_components/polymer-element-catalog/guides/assets/tabs.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
	5	+ </script>
	6	+ <link rel="import"
	7	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	8	+ <link rel="import"
	9	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	10	+ <link rel="import"
	11	+ href="/bower_components/paper-icon-button/paper-icon-button.html">
	12	+ <link rel="import"
	13	+ href="/bower_components/paper-tabs/paper-tabs.html">
	14	+ <link rel="import"
	15	+ href="/bower_components/iron-icons/iron-icons.html">
	16	+ <link rel="import"
	17	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	18	+ <link rel="import"
	19	+ href="/bower_components/font-roboto/roboto.html">
	20	+ <style>
	21	+ body {
	22	+ font-family: Roboto, 'Noto', 'Helvetica Neue',
	23	+ Helvetica, Arial, sans-serif;
	24	+ }
	25	+ </style>
	26	+</head>
	27	+<body class="fullbleed vertical layout">
	28	+ <paper-header-panel class="flex">
	29	+ <paper-toolbar class="medium-tall">
	30	+ <paper-icon-button id="navicon"
	31	+ icon="menu"></paper-icon-button>
	32	+ <!-- flex class forces span to fill space between icons -->
	33	+ <span class="flex">Title</span>
	34	+ <!-- icon displays at right because of span class above -->
	35	+ <paper-icon-button id="morebutton"
	36	+ icon="more-vert"></paper-icon-button>
	37	+ <paper-tabs class="bottom fit" selected="0">
	38	+ <paper-tab>ONE</paper-tab>
	39	+ <paper-tab>TWO</paper-tab>
	40	+ </paper-tabs>
	41	+ </paper-toolbar>
	42	+ <div>Content</div>
	43	+ </paper-header-panel>
	44	+</body>
	45	+</html>
...	...

bower_components/polymer-element-catalog/guides/assets/tall-header.html 0 → 100644

View file @07d13c9

	1	+<!doctype html>
	2	+<html>
	3	+<head>
	4	+ <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
	5	+ </script>
	6	+ <link rel="import"
	7	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	8	+ <link rel="import"
	9	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	10	+ <link rel="import"
	11	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	12	+ <link rel="import"
	13	+ href="/bower_components/font-roboto/roboto.html">
	14	+ <style>
	15	+ body {
	16	+ font-family: Roboto, 'Noto', 'Helvetica Neue',
	17	+ Helvetica, Arial, sans-serif;
	18	+ }
	19	+ </style>
	20	+</head>
	21	+<body class="fullbleed vertical layout">
	22	+ <paper-header-panel class="flex">
	23	+ <paper-toolbar id="t" class="tall">
	24	+ <div>Header</div>
	25	+ </paper-toolbar>
	26	+ <div>Content</div>
	27	+ </paper-header-panel>
	28	+</body>
	29	+</html>
...	...

bower_components/polymer-element-catalog/guides/assets/zip-file-contents.png 0 → 100644

View file @07d13c9

41.4 KB

bower_components/polymer-element-catalog/guides/flex-layout.md 0 → 100644

View file @07d13c9

	1	+---
	2	+title: Flexbox layout with iron-flex-layout
	3	+summary: "Simple flexbox layout"
	4	+tags: ['beginner']
	5	+elements: ['iron-flex-layout']
	6	+updated: 2015-05-03
	7	+---
	8	+
	9	+<style>
	10	+.demo {
	11	+ background-color: #ccc;
	12	+ padding: 4px;
	13	+ margin: 12px;
	14	+}
	15	+
	16	+.demo div {
	17	+ background-color: white;
	18	+ padding: 12px;
	19	+ margin: 4px;
	20	+}
	21	+
	22	+.tall {
	23	+ height: 124px;
	24	+}
	25	+
	26	+.demo.vertical {
	27	+ height: 250px;
	28	+}
	29	+
	30	+demo-tabs::shadow #results {
	31	+ width: 40%;
	32	+ max-width: initial;
	33	+}
	34	+
	35	+table {
	36	+ margin: 16px 20px;
	37	+}
	38	+td,th {
	39	+ padding 0px 8px;
	40	+}
	41	+</style>
	42	+
	43	+## Overview
	44	+
	45	+The `iron-flex-layout` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as _flexbox_. This component provides two different ways to use flexbox:
	46	+
	47	+* Layout classes. The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes
	48	+ let you specify layout properties directly in markup.
	49	+
	50	+* Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can be applied
	51	+ inside a CSS rule using the `@apply` function.
	52	+
	53	+Using the classes or CSS mixins is largely a matter of preference. The following sections discuss
	54	+how to use the each of the stylesheets.
	55	+
	56	+<aside><b>Note:</b> Before using either of these stylesheets, it's helpful to be familiar with the basics
	57	+of flexbox layout. Chris Coyier's [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is a
	58	+good primer.</aside>
	59	+
	60	+### Using layout classes
	61	+
	62	+To use layout classes import the `classes/iron-flex-layout` file.
	63	+
	64	+ <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
	65	+
	66	+Then simply apply the classes to any element.
	67	+
	68	+ <div class="layout horizontal wrap">
	69	+
	70	+Many of the layout rules involve combinations of multiple classes (such as `layout horizontal wrap` above).
	71	+The order in which the classes are specified doesn't matter, so `layout horizontal` and `horizontal layout`
	72	+are equivalent.
	73	+
	74	+_Currently_, the layout class stylesheet uses the `/deep/` combinator
	75	+and therefore, works across all local DOM boundaries.
	76	+
	77	+Because `/deep/` is slated to be removed from the shadow DOM spec, this
	78	+stylesheet will eventually be replaced by a set of rules that do not use
	79	+`/deep/`. When that happens, the stylesheet will need to be imported into each
	80	+scope where it's used.
	81	+
	82	+### Using layout mixins
	83	+
	84	+Custom mixins can be applied inside a Polymer
	85	+custom element's stylesheet, or inside a `custom-style` stylesheet to apply styles to the
	86	+main document. (They cannot be applied in the main document without a `custom-style` stylesheet.)
	87	+
	88	+Example: using mixins in the main document
	89	+
	90	+ <head>
	91	+
	92	+ ...
	93	+
	94	+ <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
	95	+
	96	+ ...
	97	+
	98	+ <!-- main document -- apply mixins in a custom-style element -->
	99	+ <style is="custom-style">
	100	+ .container {
	101	+ @apply(--layout-horizontal);
	102	+ @apply(--layout-wrap);
	103	+ }
	104	+ </style>
	105	+
	106	+ </head>
	107	+ <body>
	108	+
	109	+ <div class="container">
	110	+ <div>One</div>
	111	+ <div>Two</div>
	112	+ <div>Three</div>
	113	+ </div>
	114	+
	115	+ </body>
	116	+
	117	+Example: using mixins in a Polymer element
	118	+
	119	+ <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
	120	+
	121	+ ...
	122	+
	123	+ <dom-module id="mixin-demo">
	124	+
	125	+ <!-- inside an element -- apply mixins in a standard style element -->
	126	+ <style>
	127	+ .container {
	128	+ @apply(--layout-horizontal);
	129	+ @apply(--layout-wrap);
	130	+ }
	131	+ </style>
	132	+
	133	+ <template>
	134	+ <div class="container">
	135	+ <div>One</div>
	136	+ <div>Two</div>
	137	+ <div>Three</div>
	138	+ </div>
	139	+ </template>
	140	+
	141	+ <script>
	142	+ Polymer({ is: 'mixin-demo' });
	143	+ </script>
	144	+
	145	+ </dom-module>
	146	+
	147	+
	148	+In general the mixins require a little more code to use, but they can be preferable if you
	149	+don't want to use the classes, or if you want to switch layouts based on a media query.
	150	+
	151	+Custom CSS properties and mixins are features provided by the Polymer library.
	152	+See [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling)
	153	+in the Polymer developer guide.
	154	+
	155	+## Horizontal and vertical layout
	156	+
	157	+Create a flex container that lays out its children vertically or horizontally.
	158	+
	159	+Class \| Mixin \| Result
	160	+:-\|:-\|:-
	161	+<code>layout horizontal</code>\| <code>‑‑layout-horizontal</code> \| Horizontal layout container.
	162	+<code>layout vertical</code> \| <code>‑‑layout-verical</code> \| Vertical layout container.
	163	+
	164	+Example: classes
	165	+
	166	+ <div class="layout horizontal">
	167	+ <div>One</div>
	168	+ <div>Two</div>
	169	+ <div>Three</div>
	170	+ </div>
	171	+
	172	+Example: mixins
	173	+
	174	+ <dom-module id="mixin-demo">
	175	+
	176	+ <style>
	177	+ .container {
	178	+ @apply(--layout-horizontal);
	179	+ }
	180	+ </style>
	181	+
	182	+ <template>
	183	+
	184	+ <div class="container">
	185	+ <div>One</div>
	186	+ <div>Two</div>
	187	+ <div>Three</div>
	188	+ </div>
	189	+
	190	+ ...
	191	+
	192	+Example output
	193	+
	194	+<div class="layout horizontal demo">
	195	+ <div>One</div>
	196	+ <div>Two</div>
	197	+ <div>Three</div>
	198	+</div>
	199	+
	200	+### Flexible children
	201	+
	202	+Children of a flex container can use flex to control their own sizing.
	203	+
	204	+Class \| Mixin \| Result
	205	+:-\|:-\|:-
	206	+<code>flex</code>\| <code>‑‑layout-flex</code> \| Expand the child to fill available space in the main axis.
	207	+<code>flex-<var>ratio</var></code>\| <code>‑‑layout-flex-<var>ratio</var></code> \| Assign a flex ratio of 1 to 12.
	208	+<code>flex-none</code>\| <code>‑‑layout-flex-none</code> \| Don't flex the child.
	209	+<code>flex-auto</code>\| <code>‑‑layout-flex-auto</code> \| Sets flex `flex-basis` to `auto` and `flex-grow` and `flex-shrink` to 1.
	210	+
	211	+
	212	+Example: classes
	213	+
	214	+ <div class="horizontal layout">
	215	+ <div>Alpha</div>
	216	+ <div class="flex">Beta (flex)</div>
	217	+ <div>Gamma</div>
	218	+ </div>
	219	+
	220	+Example: mixins
	221	+
	222	+ <dom-module id="mixin-demo">
	223	+
	224	+ <style>
	225	+ .container {
	226	+ @apply(--layout-horizontal);
	227	+ }
	228	+ .flexchild {
	229	+ @apply(--layout-flex);
	230	+ }
	231	+ </style>
	232	+
	233	+ <template>
	234	+
	235	+ <div class="container">
	236	+ <div>One</div>
	237	+ <div class="flexchild">Two</div>
	238	+ <div>Three</div>
	239	+ </div>
	240	+
	241	+ ...
	242	+
	243	+Example output
	244	+
	245	+<div class="horizontal layout demo">
	246	+ <div>Alpha</div>
	247	+ <div class="flex">Beta (flex)</div>
	248	+ <div>Gamma</div>
	249	+</div>
	250	+
	251	+#### Flexible children in vertical layouts
	252	+
	253	+The same rules can be used for children in vertical layouts.
	254	+
	255	+Example: classes
	256	+
	257	+ <div class="vertical layout" style="height:250px">
	258	+ <div>Alpha</div>
	259	+ <div class="flex">Beta (flex)</div>
	260	+ <div>Gamma</div>
	261	+ </div>
	262	+
	263	+Example: mixins
	264	+
	265	+ <dom-module id="mixin-demo">
	266	+
	267	+ <style>
	268	+ .container {
	269	+ @apply(--layout-vertical);
	270	+ }
	271	+ .flexchild {
	272	+ @apply(--layout-flex);
	273	+ }
	274	+ </style>
	275	+
	276	+ <template>
	277	+
	278	+ <div class="container">
	279	+ <div>One</div>
	280	+ <div class="flexchild">Two</div>
	281	+ <div>Three</div>
	282	+ </div>
	283	+
	284	+ ...
	285	+
	286	+Example output
	287	+
	288	+<div class="vertical layout demo tall">
	289	+ <div>Alpha</div>
	290	+ <div class="flex">Beta (flex)</div>
	291	+ <div>Gamma</div>
	292	+</div>
	293	+
	294	+Note: for vertical layouts, the container needs to have a height for the
	295	+children to flex correctly.
	296	+
	297	+#### Flex ratios
	298	+
	299	+Children elements can be told to take up more space by including a "flex ratio"
	300	+from 1 to 12. This is equivalent to specifying the CSS `flex-grow` property.
	301	+
	302	+For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use
	303	+`flex-2` and `flex-3`, respectively.
	304	+
	305	+Example: classes
	306	+
	307	+ <div class="horizontal layout demo">
	308	+ <div class="flex-3">Alpha</div>
	309	+ <div class="flex">Beta</div>
	310	+ <div class="flex-2">Gamma</div>
	311	+ </div>
	312	+
	313	+Example: mixins
	314	+
	315	+ <dom-module id="mixin-demo">
	316	+
	317	+ <style>
	318	+ .container {
	319	+ @apply(--layout-horizontal);
	320	+ }
	321	+ .flexchild {
	322	+ @apply(--layout-flex);
	323	+ }
	324	+ .flex2child {
	325	+ @apply(--layout-flex-2);
	326	+ }
	327	+ .flex3child {
	328	+ @apply(--layout-flex-3);
	329	+ }
	330	+ </style>
	331	+
	332	+ <template>
	333	+
	334	+ <div class="container">
	335	+ <div class="flex3child">One</div>
	336	+ <div class="flexchild">Two</div>
	337	+ <div class="flex2child">Three</div>
	338	+ </div>
	339	+
	340	+ ...
	341	+
	342	+Example output
	343	+
	344	+<div class="horizontal layout demo">
	345	+ <div class="flex-3">Alpha</div>
	346	+ <div class="flex">Beta</div>
	347	+ <div class="flex-2">Gamma</div>
	348	+</div>
	349	+
	350	+<!--
	351	+### Auto-vertical
	352	+
	353	+For vertical layouts, you can use the `auto-vertical` attribute
	354	+on a child element to set an automatic flex basis on that element.
	355	+Use this attribute for responsive designs
	356	+if you want elements laid out horizontally when the display is wide
	357	+or vertically when narrow.
	358	+
	359	+The following code uses `core-media-query` to get the screen size.
	360	+If it's smaller than 640 pixels,
	361	+the layout becomes vertical and the elements layout on a flex basis.
	362	+Otherwise, the layout becomes horizontal and the elements are laid out
	363	+normally.
	364	+
	365	+{% raw %}
	366	+ <template is="auto-binding">
	367	+ <core-media-query query="max-width: 640px"
	368	+ queryMatches="{{phoneScreen}}"></core-media-query>
	369	+ <div layout vertical?="{{phoneScreen}}"
	370	+ horizontal?="{{!phoneScreen}}">
	371	+ <div auto-vertical>Alpha</div>
	372	+ <div auto-vertical>Beta</div>
	373	+ <div auto-vertical>Gamma</div>
	374	+ </div>
	375	+ </template>
	376	+{% endraw %}
	377	+
	378	+<div vertical layout class="demo" style="height:170px">
	379	+ <div auto-vertical>Alpha</div>
	380	+ <div auto-vertical>Beta</div>
	381	+ <div auto-vertical>Gamma</div>
	382	+</div>
	383	+-->
	384	+
	385	+### Cross-axis alignment
	386	+
	387	+By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching in a _horizontal_ layout).
	388	+
	389	+ <div class="horizontal layout">
	390	+ <div>Stretch Fill</div>
	391	+ </div>
	392	+
	393	+<div class="horizontal layout demo tall">
	394	+ <div>Stretch Fill</div>
	395	+</div>
	396	+
	397	+Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout)
	398	+by adding the `center` class or applying the `--layout-center` mixin.
	399	+
	400	+Example: classes, cross-axis center
	401	+
	402	+ <div class="horizontal layout center">
	403	+ <div>Center</div>
	404	+ </div>
	405	+
	406	+Example: mixins, cross-axis center
	407	+
	408	+ <dom-module id="mixin-demo">
	409	+
	410	+ <style>
	411	+ .container {
	412	+ @apply(--layout-horizontal);
	413	+ @apply(--layout-center);
	414	+ }
	415	+ </style>
	416	+
	417	+ <template>
	418	+
	419	+ <div class="container">
	420	+ <div>Center</div>
	421	+ </div>
	422	+
	423	+ ...
	424	+
	425	+Example output, cross-axis center
	426	+
	427	+<div class="horizontal layout center demo tall">
	428	+ <div>Center</div>
	429	+</div>
	430	+
	431	+You can also position at the top/bottom (or left/right in `vertical` layouts) using the `start` or `end`
	432	+classes, or by applying the `--layout-start` or `--layout-end` mixins.
	433	+
	434	+
	435	+Example: classes, cross-axis start
	436	+
	437	+ <div class="horizontal layout start">
	438	+ <div>start</div>
	439	+ </div>
	440	+
	441	+Example: mixins, cross-axis start
	442	+
	443	+ <dom-module id="mixin-demo">
	444	+
	445	+ <style>
	446	+ .container {
	447	+ @apply(--layout-horizontal);
	448	+ @apply(--layout-start);
	449	+ }
	450	+ </style>
	451	+
	452	+ <template>
	453	+
	454	+ <div class="container">
	455	+ <div>start</div>
	456	+ </div>
	457	+
	458	+ ...
	459	+
	460	+Example output, cross-axis start
	461	+
	462	+<div class="horizontal layout start demo tall">
	463	+ <div>start</div>
	464	+</div>
	465	+
	466	+
	467	+Example: classes, cross-axis end
	468	+
	469	+ <div class="horizontal layout end">
	470	+ <div>end</div>
	471	+ </div>
	472	+
	473	+Example: mixins, cross-axis end
	474	+
	475	+ <dom-module id="mixin-demo">
	476	+
	477	+ <style>
	478	+ .container {
	479	+ @apply(--layout-horizontal);
	480	+ @apply(--layout-end);
	481	+ }
	482	+ </style>
	483	+
	484	+ <template>
	485	+
	486	+ <div class="container">
	487	+ <div>end</div>
	488	+ </div>
	489	+
	490	+ ...
	491	+
	492	+Example output, cross-axis end
	493	+
	494	+<div class="horizontal layout end demo tall">
	495	+ <div>end</div>
	496	+</div>
	497	+
	498	+
	499	+### Justification
	500	+
	501	+Justifying aligns contents along the main axis. Justify the layout
	502	+by specifying one of the following.
	503	+
	504	+
	505	+Class \| Mixin \| Result
	506	+:-\|:-\|:-
	507	+`start-justified`\| <code>‑‑layout-start-justified</code> \| Aligns contents at the start of the main axis.
	508	+`center-justified` \| <code>‑‑layout-center-justified</code> \| Centers contents along the main axis.
	509	+`end-justified` \| <code>‑‑layout-end-justified</code> \| Aligns contents to the end of the main axis.
	510	+`justified` \| <code>‑‑layout-justified</code> \| Aligns contents with equal spaces between children.
	511	+`around-justified` \| <code>‑‑layout-around-justified</code> \| Aligns contents with equal spaces arround children.
	512	+
	513	+
	514	+
	515	+Example: classes, start justified
	516	+
	517	+ <div class="horizontal start-justified layout">
	518	+ <div>start-justified</div>
	519	+ </div>
	520	+
	521	+Example output, start justified
	522	+
	523	+<div class="horizontal start-justified layout demo">
	524	+ <div>start-justified</div>
	525	+</div>
	526	+
	527	+Example: mixins, center justified
	528	+
	529	+ <dom-module id="mixin-demo">
	530	+
	531	+ <style>
	532	+ .container {
	533	+ @apply(--layout-horizontal);
	534	+ @apply(--layout-center-justified);
	535	+ }
	536	+ </style>
	537	+
	538	+ <template>
	539	+
	540	+ <div class="container">
	541	+ <div>center-justified</div>
	542	+ </div>
	543	+
	544	+ ...
	545	+
	546	+Example output, center justified
	547	+
	548	+<div class="horizontal center-justified layout demo">
	549	+ <div>center-justified</div>
	550	+</div>
	551	+
	552	+Example: classes, end justified
	553	+
	554	+ <div class="horizontal end-justified layout">
	555	+ <div>end-justified</div>
	556	+ </div>
	557	+
	558	+Example output, end justified
	559	+
	560	+<div class="horizontal end-justified layout demo">
	561	+ <div>end-justified</div>
	562	+</div>
	563	+
	564	+Example: mixins, equal space between elements
	565	+
	566	+ <dom-module id="mixin-demo">
	567	+
	568	+ <style>
	569	+ .container {
	570	+ @apply(--layout-horizontal);
	571	+ @apply(--layout-justified);
	572	+ }
	573	+ </style>
	574	+
	575	+ <template>
	576	+
	577	+ <div class="container">
	578	+ <div>justified</div>
	579	+ <div>justified</div>
	580	+ <div>justified</div>
	581	+ </div>
	582	+
	583	+ ...
	584	+
	585	+Example output, equal space between elements
	586	+
	587	+<div class="horizontal justified layout demo">
	588	+ <div>justified</div>
	589	+ <div>justified</div>
	590	+ <div>justified</div>
	591	+</div>
	592	+
	593	+Example: classes, equal space around each element
	594	+
	595	+ <div class="horizontal around-justified layout">
	596	+ <div>around-justified</div>
	597	+ <div>around-justified</div>
	598	+ </div>
	599	+
	600	+<div class="horizontal around-justified layout demo">
	601	+ <div>around-justified</div>
	602	+ <div>around-justified</div>
	603	+</div>
	604	+
	605	+## Self alignment
	606	+
	607	+Alignment can also be set per-child (instead of using the layout container's rules).
	608	+
	609	+Class \| Mixin \| Result
	610	+:-\|:-\|:-
	611	+`self-start`\| <code>‑‑layout-self-start</code> \| Aligns the child at the start of the cross-axis.
	612	+`self-center` \| <code>‑‑layout-self-center</code> \| Centers the child along the cross-axis.
	613	+`self-end` \| <code>‑‑layout-self-end</code> \| Aligns the child at the end of the cross-axis.
	614	+`self-stretch` \| <code>‑‑self-stretch</code> \| Stretches the child to fit the cross-axis.
	615	+
	616	+Example: classes
	617	+
	618	+ <div class="horizontal layout" style="height: 120px;">
	619	+ <div class="flex self-start">Alpha</div>
	620	+ <div class="flex self-center">Beta</div>
	621	+ <div class="flex self-end">Gamma</div>
	622	+ <div class="flex self-stretch">Delta</div>
	623	+ </div>
	624	+
	625	+Example: mixins
	626	+
	627	+ <dom-module id="mixin-demo">
	628	+
	629	+ <style>
	630	+ .container {
	631	+ @apply(--layout-horizontal);
	632	+ @apply(--layout-justified);
	633	+ height: 120px;
	634	+ }
	635	+ .container div {
	636	+ @apply(--layout-flex);
	637	+ }
	638	+ .child1 {
	639	+ @apply(--layout-self-start);
	640	+ }
	641	+ .child2 {
	642	+ @apply(--layout-self-center);
	643	+ }
	644	+ .child3 {
	645	+ @apply(--layout-self-end);
	646	+ }
	647	+ .child4 {
	648	+ @apply(--layout-self-stretch);
	649	+ }
	650	+ </style>
	651	+
	652	+ <template>
	653	+
	654	+ <div class="container">
	655	+ <div class="child1">Alpha</div>
	656	+ <div class="child2">Beta</div>
	657	+ <div class="child3">Gamma</div>
	658	+ <div class="child4">Delta</div>
	659	+ </div>
	660	+
	661	+ ...
	662	+
	663	+Example output
	664	+
	665	+<div class="horizontal layout demo tall">
	666	+ <div class="flex self-start">Alpha</div>
	667	+ <div class="flex self-center">Beta</div>
	668	+ <div class="flex self-end">Gamma</div>
	669	+ <div class="flex self-stretch">Delta</div>
	670	+</div>
	671	+
	672	+<aside><b>Note:</b> The <code>flex</code> class
	673	+(and <code>--layout-flex</code> mixin) shown in these examples is
	674	+added for the demo and not required for self-alignment.</aside>
	675	+
	676	+
	677	+## Wrapping
	678	+
	679	+Wrapped layouts can be enabled with the `wrap` class or `--layout-wrap` mixin.
	680	+
	681	+Example: classes
	682	+
	683	+ <div class="horizontal layout wrap" style="width: 220px">
	684	+ <div>Alpha</div>
	685	+ <div>Beta</div>
	686	+ <div>Gamma</div>
	687	+ <div>Delta</div>
	688	+ </div>
	689	+
	690	+Example output
	691	+
	692	+<div class="horizontal layout wrap demo" style="width: 220px">
	693	+ <div>Alpha</div>
	694	+ <div>Beta</div>
	695	+ <div>Gamma</div>
	696	+ <div>Delta</div>
	697	+</div>
	698	+
	699	+## Reversed layouts
	700	+
	701	+Layout direction can be mirrored using the following rules:
	702	+
	703	+Class \| Mixin \| Result
	704	+:-\|:-\|:-
	705	+<code>layout horizontal‑reverse</code>\| <code>‑‑layout-horizontal-reverse</code> \| Horizontal layout with children laid out in reverse order (last-to-first).
	706	+<code>layout verical‑reverse</code> \| <code>‑‑layout-verical-reverse</code> \| Vertical layout with children laid out in reverse order.
	707	+<code>layout wrap‑reverse</code> \| <code>‑‑layout-wrap-reverse</code> \| Wrap layout with wrapped rows placed in the reverse order (for example, in a vertical layout, the second row is placed above the first row, instead of below).
	708	+
	709	+Example: mixins
	710	+
	711	+ <dom-module id="mixin-demo">
	712	+
	713	+ <style>
	714	+ .container {
	715	+ @apply(--layout-horizontal-reverse);
	716	+ }
	717	+ </style>
	718	+
	719	+ <template>
	720	+
	721	+ <div class="container">
	722	+ <div>Alpha</div>
	723	+ <div>Beta</div>
	724	+ <div>Gamma</div>
	725	+ <div>Delta</div>
	726	+ </div>
	727	+
	728	+ ...
	729	+
	730	+Example output
	731	+
	732	+<div class="horizontal-reverse layout demo">
	733	+ <div>Alpha</div>
	734	+ <div>Beta</div>
	735	+ <div>Gamma</div>
	736	+ <div>Delta</div>
	737	+</div>
	738	+
	739	+## Full bleed <body>
	740	+
	741	+It's common to want the entire `<body>` to fit to the viewport. By themselves, Polymer's layout features on
	742	+`<body>` don't achieve the result. You can make `<body>` take up the entire viewport by adding the `fullbleed` class:
	743	+
	744	+ <body class="fullbleed vertical layout">
	745	+ <div flex>Fitting a fullbleed body.</div>
	746	+ </body>
	747	+
	748	+This removes its margins and maximizes its height to the viewport. There is no equivalent mixin, but the same result can
	749	+be achieved in CSS very simply:
	750	+
	751	+ body {
	752	+ margin: 0;
	753	+ height: 100vh;
	754	+ }
	755	+
	756	+Note that the `fullbleed` class only works on the `<body>` tag. This is the only rule in the
	757	+stylesheet that is scoped to a particular tag.
	758	+
	759	+
	760	+## General purpose rules
	761	+
	762	+Polymer also includes other general purpose rules for basic positioning:
	763	+
	764	+Class \| Mixin \| Result
	765	+:-\|:-\|:-
	766	+`block`\| `--layout-block` \| Assigns `display: block`
	767	+`invisible` \| `--layout-invisible` \| Assigns `visibility: hidden`
	768	+`relative` \| `--layout-relative` \| Assigns `position: relative`
	769	+`fit` \| `--layout-fit` \| Sets `position: absolute` and sets `top:0;right:0;bottom:0;left:0;` (aka "trbl fitting").
	770	+
	771	+<aside><b>Note:</b>When using `fit` layout, the element must have an ancestor with fixed size and `position: relative` layout
	772	+to fit inside of.
	773	+</aside>
	774	+
	775	+
	776	+Example: classes
	777	+
	778	+ <div>Before <span>[A Span]</span> After</div>
	779	+
	780	+ <div>Before <span class="block">[A Block Span]</span> After</div>
	781	+ <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
	782	+ <div class="relative" style="height: 100px;">
	783	+ <div class="fit" style="background-color: #000;color: white">Fit</div>
	784	+ </div>
	785	+
	786	+Example output
	787	+
	788	+<div class="demo">Before <span>[A Span]</span> After</div>
	789	+<div class="demo">Before <span class="block">[A Block Span]</span> After</div>
	790	+<div class="demo">Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
	791	+<div class="relative" style="height: 100px;" class="demo">
	792	+ <div class="fit" style="background-color: #000;color: white">Fit</div>
	793	+</div>
...	...

bower_components/polymer-element-catalog/guides/responsive-material-design-layouts.md 0 → 100644

View file @07d13c9

	1	+---
	2	+title: Responsive Material Design layouts
	3	+summary: "How to create responsive Material Design layouts
	4	+with Paper and Iron elements."
	5	+tags: ['layout']
	6	+elements: ['paper-header-panel','paper-toolbar','paper-drawer-panel',
	7	+'paper-icon-button','paper-tabs','paper-tab','paper-drawer-panel', 'iron-icons',
	8	+'iron-flex-layout']
	9	+updated: 2015-07-23
	10	+---
	11	+
	12	+<style>
	13	+ paper-button {
	14	+ background: #81C784;
	15	+ color: white;
	16	+ }
	17	+</style>
	18	+
	19	+## Introduction
	20	+
	21	+This guide teaches you how to use Paper and Iron elements to create a
	22	+responsive layout.
	23	+
	24	+## Installation
	25	+
	26	+Below is a list of commands for installing all of the elements mentioned
	27	+in this document. You probably
	28	+do not need to install all of these elements. Read the guide and decide
	29	+how you want to implement your layout, and then install only the elements
	30	+that you need.
	31	+
	32	+```bash
	33	+bower install --save PolymerElements/paper-header-panel
	34	+bower install --save PolymerElements/paper-toolbar
	35	+bower install --save PolymerElements/paper-drawer-panel
	36	+bower install --save PolymerElements/paper-icon-button
	37	+bower install --save PolymerElements/paper-tabs
	38	+bower install --save PolymerElements/paper-tab
	39	+bower install --save PolymerElements/iron-icons
	40	+bower install --save PolymerElements/iron-flex-layout
	41	+```
	42	+
	43	+We'll assume that you can import these elements from `/bower_components/`.
	44	+
	45	+## Creating a header
	46	+
	47	+This section shows you how to:
	48	+
	49	+* Create a standard layout with `paper-header-panel` and `paper-toolbar`,
	50	+ which is probably the most common and easiest layout.
	51	+* Use a custom element for a header.
	52	+* Add icons to a header.
	53	+* Set the height of a header.
	54	+* Add tabs to a header.
	55	+* Modify the disply and behavior of a header.
	56	+
	57	+### Creating a header with `paper-toolbar`
	58	+
	59	+The code below uses a `paper-header-panel` as the container of the
	60	+page and a `paper-toolbar` as a header. When a `paper-toolbar` is a
	61	+child of `paper-header-panel`, the panel automatically displays
	62	+the toolbar as the header. All other
	63	+children are placed in the content area.
	64	+
	65	+```hmtl
	66	+...
	67	+<head>
	68	+...
	69	+ <link rel="import"
	70	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	71	+ <link rel="import"
	72	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	73	+ <link rel="import"
	74	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	75	+...
	76	+<body class="fullbleed vertical layout">
	77	+ <!-- paper-header-panel must have an explicit height -->
	78	+ <paper-header-panel class="flex">
	79	+ <paper-toolbar>
	80	+ <div>Header</div>
	81	+ </paper-toolbar>
	82	+ <div>Content</div>
	83	+ </paper-header-panel>
	84	+</body>
	85	+...
	86	+```
	87	+
	88	+<a href="assets/header-and-toolbar.html" target="_blank">
	89	+ <paper-button noink>Demonstration</paper-button>
	90	+</a>
	91	+
	92	+`paper-header-panel` must have an explicit height. See the list item
	93	+on `flex` below for an explanation of why the code above works.
	94	+
	95	+`fullbleed`, `vertical`, `layout`, and `flex` are helper classes from
	96	+`iron-flex-layout.html`. We use them in our examples as an easy way
	97	+to create a responsive design with [Flexbox](http://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/),
	98	+but the `paper` elements do not depend
	99	+on them. Below is a description of each class used in the example above:
	100	+
	101	+* `fullbleed` instructs `body` to occupy the entire viewport.
	102	+* `vertical` and `layout` instruct `body` to stack elements
	103	+ vertically (use `vertical horizontal` to stack horizontally). `layout`
	104	+ must be accompanied by `vertical` or `horizontal`. It is meaningless
	105	+ on its own.
	106	+* `flex` instructs `paper-panel-header` to stretch to the entire
	107	+ size of its parent, in this case `body` (which is set to fill the entire
	108	+ viewport, hence achieving a responsive design).
	109	+
	110	+See [Flexbox layout with iron-flex-layout](/guides/flex-layout) for more
	111	+on `iron-flex-layout`.
	112	+
	113	+### Using other elements for the header
	114	+
	115	+You can use another element as a header by adding the
	116	+`paper-header` class to the element.
	117	+
	118	+```html
	119	+<head>
	120	+ <link rel="import"
	121	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	122	+ <link rel="import"
	123	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	124	+...
	125	+<body class="fullbleed vertical layout">
	126	+ <paper-header-panel class="flex">
	127	+ <div class="paper-header">
	128	+ Header
	129	+ </div>
	130	+ <div>Content</div>
	131	+ </paper-header-panel>
	132	+</body>
	133	+```
	134	+
	135	+<a href="assets/custom-header.html" target="_blank">
	136	+ <paper-button noink>Demonstration</paper-button>
	137	+</a>
	138	+
	139	+### Adding icons
	140	+
	141	+Use `paper-icon-button` and `iron-icons` to add icons to your header:
	142	+
	143	+```html
	144	+...
	145	+<head>
	146	+...
	147	+ <link rel="import"
	148	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	149	+ <link rel="import"
	150	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	151	+ <link rel="import"
	152	+ href="/bower_components/paper-icon-button/paper-icon-button.html">
	153	+ <link rel="import"
	154	+ href="/bower_components/iron-icons/iron-icons.html">
	155	+ <link rel="import"
	156	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	157	+...
	158	+<body class="fullbleed vertical layout">
	159	+ <paper-header-panel class="flex">
	160	+ <paper-toolbar>
	161	+ <div>Header</div>
	162	+ <span class="flex"></span>
	163	+ <paper-icon-button icon="search"></paper-button-icon>
	164	+ </paper-toolbar>
	165	+ <div>Content</div>
	166	+ </paper-header-panel>
	167	+</body>
	168	+```
	169	+
	170	+<a href="assets/icons.html" target="_blank">
	171	+ <paper-button noink>Demonstration</paper-button>
	172	+</a>
	173	+
	174	+`paper-icon-button` displays the icon and handles the icon's behavior.
	175	+`iron-icons` is a collection of SVG icons which you can use for free
	176	+in your project.
	177	+
	178	+How does the search icon display on the right side? The trick
	179	+is the `span` between the `div` and the `paper-icon-button`.
	180	+The `div` containing the text `Header` only takes up as
	181	+much space as is needed to display
	182	+the text content. Same with the `paper-icon-button`; it only takes up
	183	+as much space as is needed to display the icon. The `flex`
	184	+class forces the `span` to fill the entire space between the `div` and
	185	+the `paper-icon-button`.
	186	+
	187	+### Setting the height
	188	+
	189	+Use the `medium-tall` (2x regular height) and `tall` (3x regular height) style
	190	+classes to change the height of your header.
	191	+
	192	+```hmtl
	193	+...
	194	+<head>
	195	+...
	196	+ <link rel="import"
	197	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	198	+ <link rel="import"
	199	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	200	+ <link rel="import"
	201	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	202	+...
	203	+<body class="fullbleed vertical layout">
	204	+ <paper-header-panel class="flex">
	205	+ <paper-toolbar class="tall">
	206	+ <div>Header</div>
	207	+ </paper-toolbar>
	208	+ <div>Content</div>
	209	+ </paper-header-panel>
	210	+</body>
	211	+...
	212	+```
	213	+
	214	+<a href="assets/tall-header.html" target="_blank">
	215	+ <paper-button noink>Demonstration</paper-button>
	216	+</a>
	217	+
	218	+### Adding tabs
	219	+
	220	+Use `paper-tabs` to add tabs to your header:
	221	+
	222	+```hmtl
	223	+...
	224	+<head>
	225	+...
	226	+ <link rel="import"
	227	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	228	+ <link rel="import"
	229	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	230	+ <link rel="import"
	231	+ href="/bower_components/paper-icon-button/paper-icon-button.html">
	232	+ <link rel="import"
	233	+ href="/bower_components/paper-tabs/paper-tabs.html">
	234	+ <link rel="import"
	235	+ href="/bower_components/iron-icons/iron-icons.html">
	236	+ <link rel="import"
	237	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	238	+...
	239	+<body class="fullbleed vertical layout">
	240	+ <paper-header-panel class="flex">
	241	+ <paper-toolbar class="medium-tall">
	242	+ <paper-icon-button id="navicon"
	243	+ icon="menu"></paper-icon-button>
	244	+ <!-- flex class forces span to fill space between icons -->
	245	+ <span class="flex">Title</span>
	246	+ <!-- icon displays at right because of span class above -->
	247	+ <paper-icon-button id="morebutton"
	248	+ icon="more-vert"></paper-icon-button>
	249	+ <paper-tabs class="bottom fit" selected="0">
	250	+ <paper-tab>ONE</paper-tab>
	251	+ <paper-tab>TWO</paper-tab>
	252	+ </paper-tabs>
	253	+ </paper-toolbar>
	254	+ <div>Content</div>
	255	+ </paper-header-panel>
	256	+</body>
	257	+...
	258	+```
	259	+
	260	+<a href="assets/tabs.html" target="_blank">
	261	+ <paper-button noink>Demonstration</paper-button>
	262	+</a>
	263	+
	264	+### Modifying header display and behavior
	265	+
	266	+Use the `mode` attribute of `paper-header-panel` to control how the
	267	+header displays and responds to scrolling. The list below describes
	268	+the different valid values for `mode`. See the link below for a
	269	+demonstration of all modes.
	270	+
	271	+* `standard`: The header appears at a higher level than the content area,
	272	+ with a drop shadow. Content scrolls under the header.
	273	+* `seamed`: The header appears at the same level as the content area,
	274	+ with a seam between the two (no drop shadow). Content scrolls under the header.
	275	+* `waterfall`: The header initially presents as seamed. When content scrolls
	276	+ under the header, the header raises up and casts a drop shadow (as in
	277	+ standard mode).
	278	+* `waterfall-tall`: Like waterfall, except that the toolbar starts off
	279	+ tall (3x standard height) and condenses to a standard-height
	280	+ toolbar as the user scrolls. In this mode, `paper-header-panel` controls
	281	+ the height of the toolbar, so you should not set it yourself (via
	282	+ `medium-tall` or `tall`).
	283	+* `scroll`: The header is seamed with the content and scrolls with the content.
	284	+* `cover`: The content scrolls over the header. This mode is designed to
	285	+ be used with narrow content (for example cards).
	286	+
	287	+<a href="/elements/paper-header-panel?view=demo:demo/index.html" target="_blank">
	288	+ <paper-button noink>Demonstration</paper-button>
	289	+</a>
	290	+
	291	+## Creating a responsive navigation drawer
	292	+
	293	+Use `paper-drawer-panel` to create a left-side or right-side
	294	+navigation menu.
	295	+
	296	+```html
	297	+<head>
	298	+ <link rel="import"
	299	+ href="/bower_components/paper-drawer-panel/paper-drawer-panel.html">
	300	+ <link rel="import"
	301	+ href="/bower_components/paper-header-panel/paper-header-panel.html">
	302	+ <link rel="import"
	303	+ href="/bower_components/paper-toolbar/paper-toolbar.html">
	304	+ <link rel="import"
	305	+ href="/bower_components/paper-icon-button/paper-icon-button.html">
	306	+ <link rel="import"
	307	+ href="/bower_components/iron-icons/iron-icons.html">
	308	+ <link rel="import"
	309	+ href="/bower_components/iron-flex-layout/iron-flex-layout.html">
	310	+...
	311	+<body class="fullbleed vertical layout">
	312	+ <paper-drawer-panel class="flex">
	313	+ <paper-header-panel drawer>
	314	+ <paper-toolbar>
	315	+ <div>Application</div>
	316	+ </paper-toolbar>
	317	+ <div> Drawer content... </div>
	318	+ </paper-header-panel>
	319	+ <paper-header-panel main>
	320	+ <paper-toolbar>
	321	+ <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
	322	+ <div>Title</div>
	323	+ </paper-toolbar>
	324	+ <div> Main content... </div>
	325	+ </paper-header-panel>
	326	+ </paper-drawer-panel>
	327	+</body>
	328	+```
	329	+
	330	+<a href="assets/drawer.html" target="_blank">
	331	+ <paper-button noink>Demonstration</paper-button>
	332	+</a>
	333	+
	334	+On narrow screens, the drawer is hidden by default. The user can
	335	+touch the button or swipe in order to display the drawer.
	336	+On wide screens, the drawer is always open and the button to open
	337	+the drawer is hidden.
	338	+
	339	+Use the `togglePanel` method to hide or reveal the drawer
	340	+programmatically. Or, add the `paper-drawer-toggle` attribute to an
	341	+element. This attribute makes the element act as an open / close button and
	342	+removes the need to call `togglePanel` explicitly.
	343	+
	344	+Any children with the `drawer` attribute set are placed in the navigation area.
	345	+Any children with the `main` attribute are placed in the main panel.
...	...

bower_components/polymer-element-catalog/guides/using-elements.md 0 → 100644

View file @07d13c9

	1	+---
	2	+title: Using Elements
	3	+summary: "Learn how to install and use Polymer Elements in your own projects."
	4	+tags: ['beginner']
	5	+elements: ['paper-checkbox']
	6	+updated: 2015-05-03
	7	+---
	8	+
	9	+
	10	+## Introduction
	11	+
	12	+The Polymer element sets provide elements that you can use in your web pages
	13	+and apps. These elements are built with the [Polymer library](https://www.polymer-project.org).
	14	+
	15	+You don't need to use Polymer directly to use these elements.
	16	+However, using Polymer you can take advantage of special
	17	+features such as data binding.
	18	+
	19	+## Installing Elements
	20	+
	21	+You can install elements one at a time, or install a whole collection of elements.
	22	+
	23	+Polymer contains a few primary collections of elements:
	24	+
	25	+- [Iron elements](/browse?package=iron-elements). A set of utility
	26	+ elements including generic UI elements (such as icons, input and layout
	27	+ components), as well as non-UI elements providing features like AJAX, signaling and storage.
	28	+
	29	+- [Paper elements](/browse?package=paper-elements). A set of UI elements that implement the
	30	+ [material design system](http://www.google.com/design/spec/material-design/).
	31	+
	32	+- [Gold elements](/browse?package=gold-elements). Form elements for ecommerce.
	33	+
	34	+- [Neon elements](/browse?package=neon-elements). Animation-related elements.
	35	+
	36	+- [Platinum elements](/browse?package=platinum-elements). Elements for app-like features,
	37	+ like push notifications, offline caching and bluetooth.
	38	+
	39	+
	40	+If you find a component you want while browsing the docs, simply click the
	41	+star <iron-icon class="inline-icon" icon="star-border"></iron-icon> to add it to
	42	+your collection.
	43	+
	44	+When you've selected some components, you can download either a `bower.json` file or a ZIP file.
	45	+
	46	+* `bower.json` file. Just the metadata you need to install the components using
	47	+ Bower.
	48	+
	49	+ Bower is the recommended way to manage components. Bower also handles installing
	50	+ the components' dependencies and updating installed components. For more information,
	51	+ see [Installing with Bower](#installing-with-bower).
	52	+
	53	+* ZIP file. A single file containing your selected components and all their dependencies,
	54	+ so you can unzip and start using them immediately. The ZIP file requires no extra tools,
	55	+ but doesn't provide a built-in method for updating dependencies. For more information, see
	56	+ [Installing from ZIP files](#installing-from-zip-files).
	57	+
	58	+To download the components in your collection:
	59	+
	60	+1. Click <iron-icon class="inline-icon" icon="stars"></iron-icon> and
	61	+ select the Download tab.
	62	+
	63	+2. Choose a download format and click Download.
	64	+
	65	+Pick your method and follow the instructions in the download dialog.
	66	+
	67	+If you install one or more elements, you also get the
	68	+[Polymer library](https://www.polymer-project.org), as well as the [web components polyfills](http://webcomponents.org/polyfills/),
	69	+which allow you to run Polymer on browsers that don't yet support
	70	+the web components standards.
	71	+
	72	+### Installing with Bower
	73	+
	74	+The recommended way to install Polymer elements
	75	+is through Bower. To install Bower, see the [Bower web site](http://bower.io/).
	76	+
	77	+Bower removes the hassle of dependency management when developing or consuming
	78	+elements. When you install a component, Bower makes sure any dependencies are
	79	+installed as well.
	80	+
	81	+#### Project setup
	82	+
	83	+If you haven't created a `bower.json` file for your application,
	84	+download the `bower.json` from the catalog and edit it to add your
	85	+own project name and version.
	86	+
	87	+If you already have a `bower.json` file, merge the
	88	+`dependencies` section of the downloaded file into your existing
	89	+`bower.json` file.
	90	+
	91	+The resulting file should look something like this:
	92	+
	93	+```
	94	+{
	95	+ "name": "my-project",
	96	+ "version": "0.0.0",
	97	+ "dependencies": {
	98	+ "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.0",
	99	+ "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
	100	+ "paper-button": "PolymerElements/paper-button#^1.0.0"
	101	+ }
	102	+}
	103	+```
	104	+
	105	+The next step is to install your selected components:
	106	+
	107	+ bower install
	108	+
	109	+Bower adds a `bower_components/` folder in the root of your project and
	110	+fills it with your selected elements and their dependencies.
	111	+
	112	+
	113	+#### Installing from the command line
	114	+
	115	+You can also install components from the command line using the `bower install` command.
	116	+
	117	+You can also choose one of the commonly-used packages:
	118	+
	119	+- `PolymerElements/iron-elements`
	120	+
	121	+- `PolymerElements/paper-elements`
	122	+
	123	+- `PolymerElements/gold-elements`
	124	+
	125	+For example:
	126	+
	127	+ bower install --save PolymerElements/iron-elements
	128	+
	129	+<aside>
	130	+<b>Tip:</b> <code>--save</code> adds the item as a dependency in your app's <code>bower.json</code>.
	131	+</aside>
	132	+
	133	+
	134	+#### Updating packages
	135	+
	136	+When a new version of Polymer is available, run `bower update`
	137	+in your app directory to update your copy:
	138	+
	139	+ bower update
	140	+
	141	+This updates all packages in `bower_components/`.
	142	+
	143	+### Installing from a ZIP file
	144	+
	145	+When you download a component or component set as a ZIP file, you get all of
	146	+the dependencies bundled into a single archive. It's a great way to get
	147	+started because you don't need to install any additional tools.
	148	+
	149	+Expand the ZIP file in your project directory to create a `bower_components` folder.
	150	+
	151	+![Example Zip Contents](assets/zip-file-contents.png)
	152	+
	153	+Unlike Bower, the ZIP file doesn't provide a built-in method
	154	+for updating dependencies. You can manually update components with a new ZIP
	155	+file, or you can update the files using Bower.
	156	+
	157	+#### Migrating from a ZIP file to Bower
	158	+
	159	+If you downloaded a ZIP file and subsequently install Bower, you can
	160	+use `bower init` to create a new `bower.json` file with your existing
	161	+dependencies in it:
	162	+
	163	+ bower init
	164	+
	165	+This generates a basic `bower.json` file.
	166	+
	167	+Enter Y when prompted to set currently installed components as dependencies.
	168	+
	169	+Some of the questions, like "What kind of modules do you expose," can be skipped
	170	+by pressing Enter.
	171	+
	172	+
	173	+## Using elements
	174	+
	175	+To use elements, first load the web components polyfill library, `webcomponents-lite.min.js`.
	176	+Many browsers have yet toimplement the various web components APIs. Until they do, `webcomponents-lite`
	177	+provides [polyfill support](http://webcomponents.org/polyfills/). **Be sure to include
	178	+this file before any code that touches the DOM.**
	179	+
	180	+Once you have some elements installed and you've loaded `webcomponents-lite.min.js`,
	181	+using an element is simply a matter of loading the element file using an
	182	+[HTML Import](http://webcomponents.org/articles/introduction-to-html-imports/).
	183	+
	184	+An example `index.html` file:
	185	+
	186	+ <!DOCTYPE html>
	187	+ <html>
	188	+ <head>
	189	+ <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
	190	+ <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
	191	+ </script>
	192	+
	193	+ <!-- 2. Use an HTML Import to bring in some elements. -->
	194	+ <link rel="import" href="bower_components/paper-button/paper-button.html">
	195	+ <link rel="import" href="bower_components/paper-input/paper-input.html">
	196	+ </head>
	197	+ <body>
	198	+ <!-- 3. Declare the element. Configure using its attributes. -->
	199	+ <paper-input label="Your name here"></paper-input>
	200	+ <paper-button>Say Hello</paper-button>
	201	+ <div id="greeting"></div>
	202	+
	203	+ <script>
	204	+ // To ensure that elements are ready on polyfilled browsers,
	205	+ // wait for WebComponentsReady.
	206	+ document.addEventListener('WebComponentsReady', function() {
	207	+ var input = document.querySelector('paper-input');
	208	+ var button = document.querySelector('paper-button');
	209	+ var greeting = document.getElementById("greeting");
	210	+ button.addEventListener('click', function() {
	211	+ greeting.textContent = 'Hello, ' + input.value;
	212	+ });
	213	+ });
	214	+ </script>
	215	+ </body>
	216	+ </html>
	217	+
	218	+<aside>
	219	+<b>Note:</b> You must run your app from a web server for the [HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/)
	220	+polyfill to work properly. This requirement goes away when the API is available natively.
	221	+</aside>
	222	+
	223	+
	224	+If you aren't using the polyfill, you can't rely on the `WebComponentsReady` event. Instead,
	225	+simply place script at the end of the file (after any custom elements).
	226	+
	227	+## Polymer element APIs
	228	+
	229	+To use Polymer elements effectively, it's important to be familiar with a
	230	+few of the common Polymer element APIs.
	231	+
	232	+### Attribute and properties
	233	+
	234	+The Polymer element docs list element _properties_, but not element attributes. Unless otherwise
	235	+noted, every property on a Polymer element has a corresponding _attribute_. Use the attribute name
	236	+when configuring a property from markup, or when creating a Polymer data binding to a property.
	237	+
	238	+When mapping attribute names to property names:
	239	+
	240	+* Attribute names are converted to lowercase property names. For example,
	241	+ the _attribute_ `firstName` maps to the property `firstname`.
	242	+
	243	+* Attribute names with _dashes_ are converted to _camelCase_ property names
	244	+ by capitalizing the character following each dash, then removing the dashes.
	245	+ For example, the _attribute_ `first-name` maps to the property `firstName`.
	246	+
	247	+#### Passing object and array values in attributes
	248	+
	249	+[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are string values, but sometimes you need to pass more complicated values into a custom element, such as objects or arrays. Ultimately, it's up to the element author to decide how to decode values passed in as attributes, but many Polymer elements understand attribute values that are a JSON-serialized object or array. For example:
	250	+
	251	+ <roster-list persons='[{"name": "John"}, {"name": "Bob"}]'></roster-list>
	252	+
	253	+For Polymer elements, you can find the expected type for each attribute listed in the API docs. If you pass the wrong type, it may be decoded incorrectly.
	254	+
	255	+The same mappings happen in reverse when converting property names to attribute
	256	+names (for example, if a property is defined using `reflectToAttribute: true`.)
	257	+
	258	+#### Data binding
	259	+
	260	+Polymer elements also support data binding, using a format like this:
	261	+
	262	+ <my-element property-name="{{hostProperty}}"></my-element>
	263	+
	264	+These data binding annotations are only supported in two places:
	265	+
	266	+- In the [local DOM template](https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#template-stamping) of a Polymer element.
	267	+
	268	+- Inside an [autobinding template](https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind).
	269	+
	270	+For more information see [Data binding](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html).
	271	+
	272	+### DOM manipulation
	273	+
	274	+Because not all browsers support shadow DOM natively, Polymer uses a shim called shady DOM
	275	+to achieve shadow DOM's goals of composition and style encapsulation.
	276	+
	277	+As a result, if you are manipulating a Polymer element, you need to use the `Polymer.dom`
	278	+APIs to maintain the correct DOM structure. This is particularly important when adding or removing
	279	+children from a Polymer element, for example.
	280	+
	281	+For more information, see [DOM API](https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api).
	282	+
	283	+### Custom CSS properties and mixins
	284	+
	285	+Many of the Polymer elements can be styled using custom CSS properties and mixins.
	286	+
	287	+Property and mixin values can be specified:
	288	+
	289	+- Inside a Polymer element's `<style>` tag to specify values scoped to that element.
	290	+- Inside a `custom-style` element to specify values in the document scope.
	291	+
	292	+For more information, see [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling)
	293	+and [Custom element for document styling (custom-style)](https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style).
	294	+
	295	+<!--
	296	+## Next steps
	297	+
	298	+Now that you've got the basic idea of using and installing elements, it's time to start
	299	+building something!
	300	+
	301	+In the next section we'll cover using the Core layout elements
	302	+to structure an application's layout. Continue on to:
	303	+
	304	+<p>
	305	+<a href="../elements/layout-elements.html">
	306	+ <paper-button raised><core-icon icon="arrow-forward" ></core-icon>Layout elements</paper-button>
	307	+</a>
	308	+</p>
	309	+
	310	+To learn about building your own elements using the Polymer library, see
	311	+[Polymer in 10 minutes](creatingelements.html).
	312	+
	313	+If you'd rather browse the existing elements, check out the
	314	+<a href="../elements/core-elements.html">Polymer Core elements</a>
	315	+and <a href="../elements/paper-elements.html">Paper elements</a> catalogs.
	316	+-->
	317	+
...	...

bower_components/polymer-element-catalog/guides/using-neon-animations.md 0 → 100644

View file @07d13c9

	1	+---
	2	+title: neon-animation
	3	+summary: "A short guide to neon-animation and neon-animated-pages"
	4	+tags: ['animation','intermediate']
	5	+elements: ['neon-animation','neon-animated-pages']
	6	+updated: 2015-05-26
	7	+---
	8	+
	9	+# neon-animation
	10	+
	11	+`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/).
	12	+
	13	+Warning: The API may change.
	14	+
	15	+* [A basic animatable element](#basic)
	16	+* [Animation configuration](#configuration)
	17	+ * [Animation types](#configuration-types)
	18	+ * [Configuration properties](#configuration-properties)
	19	+ * [Using multiple animations](#configuration-multiple)
	20	+ * [Running animations encapsulated in children nodes](#configuration-encapsulation)
	21	+* [Page transitions](#page-transitions)
	22	+ * [Shared element animations](#shared-element)
	23	+ * [Declarative page transitions](#declarative-page)
	24	+* [Included animations](#animations)
	25	+* [Demos](#demos)
	26	+
	27	+<a name="basic"></a>
	28	+## A basic animatable element
	29	+
	30	+Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
	31	+
	32	+```js
	33	+Polymer({
	34	+ is: 'my-animatable',
	35	+ behaviors: [
	36	+ Polymer.NeonAnimationRunnerBehavior
	37	+ ],
	38	+ properties: {
	39	+ animationConfig: {
	40	+ value: function() {
	41	+ return {
	42	+ // provided by neon-animation/animations/scale-down-animation.html
	43	+ name: 'scale-down-animation',
	44	+ node: this
	45	+ }
	46	+ }
	47	+ }
	48	+ },
	49	+ listeners: {
	50	+ // this event is fired when the animation finishes
	51	+ 'neon-animation-finish': '_onNeonAnimationFinish'
	52	+ },
	53	+ animate: function() {
	54	+ // run scale-down-animation
	55	+ this.playAnimation();
	56	+ },
	57	+ _onNeonAnimationFinish: function() {
	58	+ console.log('animation done!');
	59	+ }
	60	+});
	61	+```
	62	+
	63	+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)
	64	+
	65	+<a name="configuration"></a>
	66	+## Animation configuration
	67	+
	68	+<a name="configuration-types"></a>
	69	+### Animation types
	70	+
	71	+An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration.
	72	+
	73	+```js
	74	+Polymer({
	75	+ is: 'my-dialog',
	76	+ behaviors: [
	77	+ Polymer.NeonAnimationRunnerBehavior
	78	+ ],
	79	+ properties: {
	80	+ opened: {
	81	+ type: Boolean
	82	+ },
	83	+ animationConfig: {
	84	+ value: function() {
	85	+ return {
	86	+ 'entry': {
	87	+ // provided by neon-animation/animations/scale-up-animation.html
	88	+ name: 'scale-up-animation',
	89	+ node: this
	90	+ },
	91	+ 'exit': {
	92	+ // provided by neon-animation-animations/fade-out-animation.html
	93	+ name: 'fade-out-animation',
	94	+ node: this
	95	+ }
	96	+ }
	97	+ }
	98	+ }
	99	+ },
	100	+ listeners: {
	101	+ 'neon-animation-finish': '_onNeonAnimationFinish'
	102	+ },
	103	+ show: function() {
	104	+ this.opened = true;
	105	+ this.style.display = 'inline-block';
	106	+ // run scale-up-animation
	107	+ this.playAnimation('entry');
	108	+ },
	109	+ hide: function() {
	110	+ this.opened = false;
	111	+ // run fade-out-animation
	112	+ this.playAnimation('fade-out-animation');
	113	+ },
	114	+ _onNeonAnimationFinish: function() {
	115	+ if (!this.opened) {
	116	+ this.style.display = 'none';
	117	+ }
	118	+ }
	119	+});
	120	+```
	121	+
	122	+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)
	123	+
	124	+You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
	125	+
	126	+```js
	127	+properties: {
	128	+ entryAnimation: {
	129	+ value: 'scale-up-animation'
	130	+ },
	131	+ exitAnimation: {
	132	+ value: 'fade-out-animation'
	133	+ }
	134	+}
	135	+```
	136	+
	137	+<a name="configuration-properties"></a>
	138	+### Configuration properties
	139	+
	140	+You can pass additional parameters to configure an animation in the animation configuration object.
	141	+All animations should accept the following properties:
	142	+
	143	+ * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
	144	+ * `node`: The target node to apply the animation to. Defaults to `this`.
	145	+ * `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The
	146	+ properties include the following:
	147	+ * `duration`: The duration of the animation in milliseconds.
	148	+ * `delay`: The delay before the start of the animation in milliseconds.
	149	+ * `easing`: A timing function for the animation. Matches the CSS timing function values.
	150	+
	151	+Animations may define additional configuration properties and they are listed in their documentation.
	152	+
	153	+<a name="configuration-multiple"></a>
	154	+### Using multiple animations
	155	+
	156	+Set the animation configuration to an array to combine animations, like this:
	157	+
	158	+```js
	159	+animationConfig: {
	160	+ value: function() {
	161	+ return {
	162	+ // fade-in-animation is run with a 50ms delay from slide-down-animation
	163	+ 'entry': [{
	164	+ name: 'slide-down-animation',
	165	+ node: this
	166	+ }, {
	167	+ name: 'fade-in-animation',
	168	+ node: this,
	169	+ timing: {delay: 50}
	170	+ }]
	171	+ }
	172	+ }
	173	+}
	174	+```
	175	+
	176	+<a name="configuration-encapsulation"></a>
	177	+### Running animations encapsulated in children nodes
	178	+
	179	+You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.
	180	+
	181	+```js
	182	+animationConfig: {
	183	+ value: function() {
	184	+ return {
	185	+ // run fade-in-animation on this, and the entry animation on this.$.myAnimatable
	186	+ 'entry': [
	187	+ {name: 'fade-in-animation', node: this},
	188	+ {animatable: this.$.myAnimatable, type: 'entry'}
	189	+ ]
	190	+ }
	191	+ }
	192	+}
	193	+```
	194	+
	195	+<a name="page-transitions"></a>
	196	+## Page transitions
	197	+
	198	+The artist formerly known as `<core-animated-pages>`
	199	+
	200	+The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page.
	201	+
	202	+<a name="shared-element"></a>
	203	+### Shared element animations
	204	+
	205	+Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation.
	206	+
	207	+In the incoming page:
	208	+
	209	+```js
	210	+properties: {
	211	+ animationConfig: {
	212	+ value: function() {
	213	+ return {
	214	+ // the incoming page defines the 'entry' animation
	215	+ 'entry': {
	216	+ name: 'hero-animation',
	217	+ id: 'hero',
	218	+ toPage: this
	219	+ }
	220	+ }
	221	+ }
	222	+ },
	223	+ sharedElements: {
	224	+ value: function() {
	225	+ return {
	226	+ 'hero': this.$.hero
	227	+ }
	228	+ }
	229	+ }
	230	+}
	231	+```
	232	+
	233	+In the outgoing page:
	234	+
	235	+```js
	236	+properties: {
	237	+ animationConfig: {
	238	+ value: function() {
	239	+ return {
	240	+ // the outgoing page defines the 'exit' animation
	241	+ 'exit': {
	242	+ name: 'hero-animation',
	243	+ id: 'hero',
	244	+ fromPage: this
	245	+ }
	246	+ }
	247	+ }
	248	+ },
	249	+ sharedElements: {
	250	+ value: function() {
	251	+ return {
	252	+ 'hero': this.$.otherHero
	253	+ }
	254	+ }
	255	+ }
	256	+}
	257	+```
	258	+
	259	+<a name="declarative-page"></a>
	260	+### Declarative page transitions
	261	+
	262	+For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
	263	+
	264	+For example:
	265	+
	266	+```js
	267	+<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
	268	+ <neon-animatable>1</neon-animatable>
	269	+ <neon-animatable>2</neon-animatable>
	270	+ <neon-animatable>3</neon-animatable>
	271	+ <neon-animatable>4</neon-animatable>
	272	+ <neon-animatable>5</neon-animatable>
	273	+</neon-animated-pages>
	274	+```
	275	+
	276	+The new page will slide in from the right, and the old page slide away to the left.
	277	+
	278	+<a name="animations"></a>
	279	+## Included animations
	280	+
	281	+Single element animations:
	282	+
	283	+ * `fade-in-animation` Animates opacity from `0` to `1`.
	284	+ * `fade-out-animation` Animates opacity from `1` to `0`.
	285	+ * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`.
	286	+ * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`.
	287	+ * `slide-down-animation` Animates transform from `translateY(-100%)` to `none`.
	288	+ * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`.
	289	+ * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
	290	+ * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
	291	+ * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;
	292	+ * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
	293	+
	294	+ * `transform-animation` Animates a custom transform.
	295	+
	296	+Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties.
	297	+
	298	+Shared element animations
	299	+
	300	+ * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.
	301	+ * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
	302	+
	303	+Group animations
	304	+ * `cascaded-animation` Applys an animation to an array of elements with a delay between each.
	305	+
	306	+<a name="demos"></a>
	307	+## Demos
	308	+
	309	+ * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)
	310	+ * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)
	311	+ * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)
	312	+ * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)
	313	+ * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)
...	...

bower_components/polymer-element-catalog/gulpfile.js 0 → 100644

View file @07d13c9

	1	+'use strict';
	2	+
	3	+var path = require('path');
	4	+
	5	+// Include Gulp & Tools We'll Use
	6	+var gulp = require('gulp');
	7	+var gutil = require('gulp-util');
	8	+var $ = require('gulp-load-plugins')();
	9	+var del = require('del');
	10	+var runSequence = require('run-sequence');
	11	+var browserSync = require('browser-sync');
	12	+var pagespeed = require('psi');
	13	+var reload = browserSync.reload;
	14	+var merge = require('merge-stream');
	15	+var superstatic = require('superstatic');
	16	+var plumber = require('gulp-plumber');
	17	+var polybuild = require('./polybuild');
	18	+var inlinesource = require('gulp-inline-source');
	19	+
	20	+var stream = require('./build/catalog/utils/stream').obj;
	21	+var catalogBuilder = require('./build/catalog');
	22	+
	23	+function serve(directories, callback) {
	24	+ var port = process.env.PORT \|\| 3000;
	25	+ var dev = connect();
	26	+ directories.forEach(function (directory) {
	27	+ dev.use(superstatic({ config: { root: directory } }));
	28	+ });
	29	+ dev.listen(port, function () {
	30	+ var url = 'http://localhost:' + port;
	31	+ $.util.log('Local server started at: ', $.util.colors.cyan(url));
	32	+ if (typeof callback === 'function') {
	33	+ callback(null, url);
	34	+ }
	35	+ });
	36	+}
	37	+
	38	+var AUTOPREFIXER_BROWSERS = [
	39	+ 'ie >= 10',
	40	+ 'ie_mob >= 10',
	41	+ 'ff >= 30',
	42	+ 'chrome >= 34',
	43	+ 'safari >= 7',
	44	+ 'opera >= 23',
	45	+ 'ios >= 7',
	46	+ 'android >= 4.4',
	47	+ 'bb >= 10'
	48	+];
	49	+
	50	+var CATALOG_FILEPATH = __dirname + '/catalog.json';
	51	+
	52	+// Lint JavaScript
	53	+gulp.task('jshint', function () {
	54	+ return gulp.src([
	55	+ 'app/scripts/*/.js',
	56	+ 'app/elements/*/.js',
	57	+ 'app/elements/*/.html'
	58	+ ])
	59	+ .pipe(reload({stream: true, once: true}))
	60	+ .pipe($.jshint.extract()) // Extract JS from .html files
	61	+ .pipe($.jshint({esnext: true}))
	62	+ .pipe($.jshint.reporter('jshint-stylish'))
	63	+ .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
	64	+});
	65	+
	66	+// Optimize Images
	67	+gulp.task('images', function () {
	68	+ return gulp.src('app/images/*/')
	69	+ .pipe($.cache($.imagemin({
	70	+ progressive: true,
	71	+ interlaced: true
	72	+ })))
	73	+ .pipe(gulp.dest('dist/images'))
	74	+ .pipe($.size({title: 'images'}));
	75	+});
	76	+
	77	+// Copy All Files At The Root Level (app)
	78	+gulp.task('copy', function () {
	79	+ var app = gulp.src([
	80	+ 'app/*',
	81	+ '!app/test',
	82	+ 'node_modules/apache-server-configs/dist/.htaccess'
	83	+ ], {
	84	+ dot: true
	85	+ }).pipe(gulp.dest('dist'));
	86	+
	87	+ var bower = gulp.src([
	88	+ 'bower_components/*/'
	89	+ ]).pipe(gulp.dest('dist/bower_components'));
	90	+
	91	+ var elements = gulp.src(['app/elements/*/.html'])
	92	+ .pipe(gulp.dest('dist/elements'));
	93	+
	94	+ if (process.env.FIXTURES) {
	95	+ gulp.src(['fixtures/*/']).pipe(gulp.dest('dist'));
	96	+ }
	97	+
	98	+ return merge(app, bower, elements).pipe($.size({title: 'copy'}));
	99	+});
	100	+
	101	+// Copy Web Fonts To Dist
	102	+gulp.task('fonts', function () {
	103	+ return gulp.src(['app/fonts/**'])
	104	+ .pipe(gulp.dest('dist/fonts'))
	105	+ .pipe($.size({title: 'fonts'}));
	106	+});
	107	+
	108	+// Compile and Automatically Prefix Stylesheets
	109	+gulp.task('styles', function () {
	110	+ return gulp.src([
	111	+ 'app/styles/*/.css'
	112	+ ])
	113	+ .pipe($.changed('styles', {extension: '.css'}))
	114	+ // .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
	115	+ .pipe(gulp.dest('.tmp/styles'))
	116	+ .pipe(gulp.dest('dist/styles'))
	117	+ .pipe($.size({title: 'styles'}));
	118	+});
	119	+
	120	+gulp.task('elements', function () {
	121	+ return gulp.src([
	122	+ 'app/elements/*/.css'
	123	+ ])
	124	+ .pipe($.changed('styles', {extension: '.css'}))
	125	+ .pipe(gulp.dest('.tmp/elements'))
	126	+ .pipe(gulp.dest('dist/elements'))
	127	+ .pipe($.size({title: 'elements'}));
	128	+});
	129	+
	130	+// Scan Your HTML For Assets & Optimize Them
	131	+gulp.task('html', function () {
	132	+ var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});
	133	+
	134	+ return gulp.src(['app/*/.html', '!app/{elements,test}/*/.html'])
	135	+ .pipe(inlinesource())
	136	+ // Replace path for build assets
	137	+ .pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.build.html')))
	138	+ .pipe(assets)
	139	+ // Concatenate And Minify JavaScript
	140	+ .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
	141	+ // Concatenate And Minify Styles
	142	+ // In case you are still using useref build blocks
	143	+ .pipe($.if('*.css', $.cssmin()))
	144	+ .pipe(assets.restore())
	145	+ .pipe($.useref())
	146	+ // Minify Any HTML
	147	+ .pipe($.if('*.html', $.minifyHtml({
	148	+ quotes: true,
	149	+ empty: true,
	150	+ spare: true
	151	+ })))
	152	+ // Output Files
	153	+ .pipe(gulp.dest('dist'))
	154	+ .pipe($.size({title: 'html'}));
	155	+});
	156	+
	157	+// Polybuild imports
	158	+gulp.task('polybuild', function () {
	159	+ var DEST_DIR = 'dist/elements';
	160	+
	161	+ return gulp.src('dist/elements/elements.html')
	162	+ .pipe(polybuild())
	163	+ .pipe(gulp.dest(DEST_DIR))
	164	+ .pipe($.size({title: 'polybuild'}));
	165	+});
	166	+
	167	+// Clean Output Directory
	168	+gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
	169	+
	170	+// Clean everything
	171	+gulp.task('distclean', ['clean'], del.bind(null, ['bower_components']));
	172	+
	173	+// Watch Files For Changes & Reload
	174	+gulp.task('serve', ['styles', 'elements', 'catalog:dev'], function () {
	175	+ var dirs = ['.tmp','app'];
	176	+ var mw = [
	177	+ function(req, res, next) {
	178	+ if (req.url.indexOf('/bower_components') !== 0) return next();
	179	+ req.url = req.url.replace(/^\/bower_components/,'');
	180	+ return superstatic({config: {root: 'bower_components'}})(req,res,next);
	181	+ },
	182	+ superstatic({config: {root: '.tmp'}}),
	183	+ superstatic({config: {root: 'app'}})
	184	+ ]
	185	+ if (process.env.FIXTURES) mw.unshift(superstatic({config: {root: 'fixtures'}}));
	186	+
	187	+ browserSync({
	188	+ notify: true,
	189	+ server: {
	190	+ baseDir: dirs,
	191	+ middleware: mw
	192	+ }
	193	+ });
	194	+
	195	+ gulp.watch(['app/*/.html'], reload);
	196	+ gulp.watch(['app/styles/*/.css'], ['styles', reload]);
	197	+ gulp.watch(['app/elements/*/.css'], ['elements', reload]);
	198	+ gulp.watch(['app/scripts/*/.js'], ['jshint']);
	199	+ gulp.watch(['app/images/*/'], reload);
	200	+});
	201	+
	202	+// Build and serve the output from the dist build
	203	+gulp.task('serve:dist', ['default'], function () {
	204	+ browserSync({
	205	+ notify: false,
	206	+ // Run as an https by uncommenting 'https: true'
	207	+ // Note: this uses an unsigned certificate which on first access
	208	+ // will present a certificate warning in the browser.
	209	+ // https: true,
	210	+ server: 'dist'
	211	+ });
	212	+});
	213	+
	214	+// Build Production Files, the Default Task
	215	+gulp.task('default', ['clean'], function (cb) {
	216	+ runSequence(
	217	+ ['copy', 'styles'],
	218	+ 'elements',
	219	+ ['jshint', 'images', 'fonts', 'html'],
	220	+ 'catalog:dist',
	221	+ 'polybuild',
	222	+ cb);
	223	+});
	224	+
	225	+// Run PageSpeed Insights
	226	+// Update `url` below to the public URL for your site
	227	+gulp.task('pagespeed', function (cb) {
	228	+ // Update the below URL to the public URL of your site
	229	+ pagespeed.output('example.com', {
	230	+ strategy: 'mobile',
	231	+ // By default we use the PageSpeed Insights free (no API key) tier.
	232	+ // Use a Google Developer API key if you have one: http://goo.gl/RkN0vE
	233	+ // key: 'YOUR_API_KEY'
	234	+ }, cb);
	235	+});
	236	+
	237	+gulp.task('catalog_assets:dist', function() {
	238	+ return gulp.src('guides/assets/*/').pipe(gulp.dest('dist/guides/assets'));
	239	+});
	240	+
	241	+// Build element catalog JSON file
	242	+gulp.task('catalog:dist', ['catalog_assets:dist'], function () {
	243	+ if (process.env.FIXTURES) return;
	244	+
	245	+ return execCatalogTask({
	246	+ destDir: 'dist'
	247	+ });
	248	+});
	249	+
	250	+gulp.task('catalog_assets:dev', function() {
	251	+ return gulp.src('guides/assets/*/').pipe(gulp.dest('.tmp/guides/assets'));
	252	+});
	253	+
	254	+gulp.task('catalog:dev', ['catalog_assets:dev'], function () {
	255	+ return execCatalogTask({
	256	+ destDir: '.tmp',
	257	+ space: 2
	258	+ });
	259	+});
	260	+
	261	+function execCatalogTask (options) {
	262	+ var destDir = options.destDir;
	263	+ var space = options.space;
	264	+ var destFilepath = path.join('.', destDir, 'catalog.json');
	265	+
	266	+ return catalogBuilder({
	267	+ src: CATALOG_FILEPATH,
	268	+ destDir: destDir
	269	+ })
	270	+ .pipe(stream.stringify({space: space}))
	271	+ .pipe(stream.writeFile(destFilepath));
	272	+}
	273	+
	274	+
	275	+// Load tasks for web-component-tester
	276	+// Adds tasks for `gulp test:local` and `gulp test:remote`
	277	+try { require('web-component-tester').gulp.init(gulp); } catch (err) {}
	278	+
	279	+// Load custom tasks from the `tasks` directory
	280	+try { require('require-dir')('tasks'); } catch (err) {}
...	...

bower_components/polymer-element-catalog/package.json 0 → 100644

View file @07d13c9

	1	+{
	2	+ "name": "polymer-element-catalog",
	3	+ "version": "1.0.1",
	4	+ "description": "A catalog of Google's Web Components",
	5	+ "main": "index.js",
	6	+ "scripts": {
	7	+ "serve": "gulp serve",
	8	+ "serve:dist": "gulp serve:dist",
	9	+ "build": "gulp",
	10	+ "clean": "gulp clean",
	11	+ "deps": "npm install && bower install",
	12	+ "deploy": "firebase deploy",
	13	+ "stage": "firebase deploy -f p-catalog-staging",
	14	+ "deploy-from-scratch":"gulp distclean && bower install && gulp && firebase deploy"
	15	+ },
	16	+ "repository": {
	17	+ "type": "git",
	18	+ "url": "https://github.com/divshot/polymer-element-catalog.git"
	19	+ },
	20	+ "keywords": [
	21	+ "polymer",
	22	+ "web-components"
	23	+ ],
	24	+ "author": "Google",
	25	+ "license": "MIT",
	26	+ "bugs": {
	27	+ "url": "https://github.com/divshot/polymer-element-catalog/issues"
	28	+ },
	29	+ "homepage": "https://github.com/divshot/polymer-element-catalog",
	30	+ "devDependencies": {
	31	+ "JSONStream": "^0.10.0",
	32	+ "apache-server-configs": "^2.7.1",
	33	+ "async": "^0.9.0",
	34	+ "async-each": "^0.1.6",
	35	+ "bower": "^1.4.1",
	36	+ "browser-sync": "^1.3.0",
	37	+ "concat-stream": "^1.4.8",
	38	+ "del": "^0.1.2",
	39	+ "end-of-stream": "^1.1.0",
	40	+ "es6-promise": "^2.1.1",
	41	+ "firebase-tools": "^1.1.6",
	42	+ "from2": "^1.3.0",
	43	+ "front-matter": "^1.0.0",
	44	+ "fs-extra": "^0.18.2",
	45	+ "glob-stream": "^5.0.0",
	46	+ "graceful-fs": "^3.0.6",
	47	+ "gulp": "^3.8.5",
	48	+ "gulp-autoprefixer": "^0.0.8",
	49	+ "gulp-cache": "^0.2.2",
	50	+ "gulp-changed": "^1.0.0",
	51	+ "gulp-crisper": "0.0.4",
	52	+ "gulp-cssmin": "^0.1.6",
	53	+ "gulp-flatten": "^0.0.2",
	54	+ "gulp-if": "^1.2.1",
	55	+ "gulp-imagemin": "^1.0.0",
	56	+ "gulp-inline-source": "^2.1.0",
	57	+ "gulp-jshint": "^1.6.3",
	58	+ "gulp-load-plugins": "^0.5.3",
	59	+ "gulp-minify-html": "^0.1.4",
	60	+ "gulp-plumber": "^1.0.0",
	61	+ "gulp-rename": "^1.2.0",
	62	+ "gulp-replace": "^0.4.0",
	63	+ "gulp-size": "^1.0.0",
	64	+ "gulp-uglify": "^0.3.1",
	65	+ "gulp-uncss": "^0.4.5",
	66	+ "gulp-useref": "^0.6.0",
	67	+ "gulp-util": "^3.0.4",
	68	+ "gulp-vulcanize": "^6.0.0",
	69	+ "hydrolysis": "^1.18.2",
	70	+ "is-stream": "^1.0.1",
	71	+ "jshint-stylish": "^0.4.0",
	72	+ "lazypipe": "^0.2.3",
	73	+ "lodash": "^3.6.0",
	74	+ "marked": "^0.3.3",
	75	+ "merge-stream": "^0.1.6",
	76	+ "mkdirp": "^0.5.0",
	77	+ "nopt": "^3.0.2",
	78	+ "opn": "^1.0.0",
	79	+ "polybuild": "^1.0.3",
	80	+ "polyclean": "^1.2.0",
	81	+ "psi": "^1.0.4",
	82	+ "pumpify": "^1.3.3",
	83	+ "require-dir": "^0.1.0",
	84	+ "run-sequence": "^0.3.6",
	85	+ "split": "^0.3.3",
	86	+ "superstatic": "^2.0.2",
	87	+ "through2": "^0.6.3",
	88	+ "through2-asyncmap": "^1.1.0",
	89	+ "through2-concurrent": "^1.0.0",
	90	+ "through2-filter": "^1.4.1",
	91	+ "through2-map": "^1.4.0",
	92	+ "through2-reduce": "^0.3.0",
	93	+ "vinyl-fs": "^1.0.0",
	94	+ "web-component-tester": "^2.2.3",
	95	+ "writestreamp": "^0.1.0"
	96	+ }
	97	+}
...	...

bower_components/polymer-element-catalog/polybuild.js 0 → 100644

View file @07d13c9

	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	+//jshint node: true
	12	+'use strict';
	13	+
	14	+var crisper = require('gulp-crisper');
	15	+var lazypipe = require('lazypipe');
	16	+var polyclean = require('polyclean');
	17	+var rename = require('gulp-rename');
	18	+var vulcanize = require('gulp-vulcanize');
	19	+var gutil = require('gulp-util');
	20	+
	21	+var htmlPipe = lazypipe()
	22	+ // inline html imports, scripts and css
	23	+ // also remove html comments
	24	+ .pipe(vulcanize, {
	25	+ inlineScripts: true,
	26	+ inlineCss: true,
	27	+ stripComments: true,
	28	+ stripExcludes: ['bower_components/hydrolysis/hydrolysis-analyzer.html']
	29	+ })
	30	+ // remove whitespace from inline css
	31	+ .pipe(polyclean.cleanCss)
	32	+;
	33	+
	34	+ // remove javascript whitespace
	35	+var leftAlign = polyclean.leftAlignJs;
	36	+
	37	+// minimize javascript with uglifyjs
	38	+var uglify = polyclean.uglifyJs;
	39	+
	40	+module.exports = function(opts) {
	41	+ opts = opts \|\| {};
	42	+ var crush = opts.maximumCrush;
	43	+ var pipe = htmlPipe
	44	+ // switch between cleaning or minimizing javascript
	45	+ .pipe(crush ? uglify : leftAlign)
	46	+ // rename files with an infix '.build'
	47	+ .pipe(rename, function(path) {
	48	+ path.basename += '.build';
	49	+ })
	50	+ // split the javascript out into `.build.js` for CSP compliance
	51	+ .pipe(crisper)
	52	+ ();
	53	+
	54	+ // have to handle errors ourselves, thanks gulp >:(
	55	+ pipe.on('error', function(error) {
	56	+ gutil.log(error.toString());
	57	+ process.exit(1);
	58	+ });
	59	+
	60	+ return pipe;
	61	+};
...	...

bower_components/polymer-element-catalog/scripts/travis_deploy 0 → 100644

View file @07d13c9

	1	+#!/usr/bin/env bash
	2	+
	3	+if [[ "${TRAVIS_PULL_REQUEST}" == "false" ]] && [[ "${TRAVIS_TAG}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
	4	+ echo "Deploying release $TRAVIS_TAG to production Firebase..."
	5	+ ./node_modules/.bin/firebase deploy
	6	+ exit
	7	+fi
	8	+
	9	+if [[ "${TRAVIS_PULL_REQUEST}" == "false" ]] && [[ "${TRAVIS_BRANCH}" == "master" ]]; then
	10	+ echo "Deploying to staging Firebase..."
	11	+ ./node_modules/.bin/firebase deploy -f p-catalog-staging
	12	+ exit
	13	+fi
0	14	\ No newline at end of file
...	...