├── .github
├── CODEOWNERS
└── ISSUE_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .travis.yml
├── CONTRIBUTING.md
├── README.md
├── app-box
├── README.md
├── app-box.js
└── demo
│ ├── document-scroll.html
│ ├── index.html
│ └── scrolling-region.html
├── app-drawer-layout
├── README.md
├── app-drawer-layout.js
├── demo
│ └── index.html
└── test
│ ├── app-drawer-layout.html
│ └── index.html
├── app-drawer
├── README.md
├── app-drawer.js
├── demo
│ ├── index.html
│ ├── left-drawer.html
│ └── right-drawer.html
└── test
│ ├── app-drawer.html
│ └── index.html
├── app-grid
├── README.md
├── app-grid-style.js
├── demo
│ ├── aspect-ratio.html
│ ├── flickr-grid-layout.html
│ ├── index.html
│ ├── md-grid-layout.html
│ └── simple-responsive-grid.html
└── test
│ ├── app-grid-1.html
│ ├── app-grid-2.html
│ ├── app-grid-3.html
│ └── index.html
├── app-header-layout
├── README.md
├── app-header-layout.js
├── demo
│ ├── footer.html
│ ├── index.html
│ ├── music.html
│ ├── scrolling-region.html
│ └── simple.html
└── test
│ ├── app-header-layout.html
│ └── index.html
├── app-header
├── README.md
├── app-header.js
├── demo
│ ├── blend-background-1.html
│ ├── blend-background-2.html
│ ├── blend-background-3.html
│ ├── contacts.html
│ ├── custom-sticky-element-1.html
│ ├── custom-sticky-element-2.html
│ ├── give.html
│ ├── index.html
│ ├── music.html
│ ├── no-effects.html
│ └── notes.html
└── test
│ ├── app-header.html
│ └── index.html
├── app-layout-behavior
└── app-layout-behavior.js
├── app-layout.js
├── app-scroll-effects
├── README.md
├── app-scroll-effects-behavior.js
├── app-scroll-effects.js
├── effects
│ ├── blend-background.js
│ ├── fade-background.js
│ ├── material.js
│ ├── parallax-background.js
│ ├── resize-snapped-title.js
│ ├── resize-title.js
│ └── waterfall.js
└── test
│ ├── app-scroll-effects-behavior.html
│ ├── blend-background.html
│ ├── fade-background.html
│ ├── index.html
│ ├── parallax-background.html
│ ├── resize-snapped-title.html
│ ├── resize-title.html
│ ├── utils.js
│ ├── waterfall.html
│ └── x-container.js
├── app-toolbar
├── README.md
├── app-toolbar.js
├── demo
│ └── index.html
└── test
│ ├── app-toolbar.html
│ └── index.html
├── bower.json
├── demo
├── contacts.json
├── demo1.html
├── demo2.html
├── demo3.html
├── demo4.html
├── demo5.html
├── demo6.html
├── demo7.html
├── index.html
└── sample-content.js
├── formatconfig.json
├── gen-tsd.json
├── helpers
├── helpers.js
└── test
│ ├── index.html
│ ├── register-effect.html
│ └── scroll.html
├── manifest.json
├── package-lock.json
├── package.json
├── patterns
├── expand-card
│ └── index.html
├── md-responsive-toolbar
│ └── index.html
└── transform-navigation
│ ├── index.html
│ └── x-app.js
├── templates
├── getting-started
│ ├── index.html
│ ├── package.json
│ └── x-app.js
├── landing-page
│ ├── index.html
│ ├── package.json
│ └── x-app.js
├── pesto
│ ├── data
│ │ └── recipes.json
│ ├── index.html
│ ├── manifest.json
│ ├── package.json
│ └── src
│ │ ├── app-icons.js
│ │ ├── recipe-app.js
│ │ ├── recipe-detail.js
│ │ └── recipe-list.js
├── publishing
│ ├── data
│ │ └── articles.json
│ ├── index.html
│ ├── manifest.json
│ ├── package.json
│ └── src
│ │ ├── app-icons.js
│ │ ├── article-detail.js
│ │ ├── article-headline.js
│ │ ├── blog-app.js
│ │ └── two-columns-grid.js
├── shrine
│ ├── data
│ │ ├── featured.json
│ │ └── items.json
│ ├── index.html
│ ├── manifest.json
│ ├── package.json
│ └── src
│ │ ├── shrine-app.js
│ │ ├── shrine-detail.js
│ │ ├── shrine-featured-item.js
│ │ ├── shrine-item.js
│ │ ├── shrine-list.js
│ │ └── shrine-simple-item.js
└── test-drive
│ ├── index.html
│ ├── package.json
│ └── test-app.js
├── test
└── index.html
└── wct.conf.json
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @keanulee @frankiefu
2 | /.travis.yml @azakus
3 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 | ### Description
3 |
4 |
5 | ### Expected outcome
6 |
7 |
8 |
9 | ### Actual outcome
10 |
11 |
12 |
13 | ### Live Demo
14 |
15 |
16 | ### Steps to reproduce
17 |
18 |
23 |
24 | ### Browsers Affected
25 |
26 | - [ ] Chrome
27 | - [ ] Firefox
28 | - [ ] Safari 9
29 | - [ ] Safari 8
30 | - [ ] Safari 7
31 | - [ ] Edge
32 | - [ ] IE 11
33 | - [ ] IE 10
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components*
2 | bower-*.json
3 | node_modules
4 | *.d.ts
5 | *.tgz
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.tgz
2 | .github
3 | .travis.yml
4 | formatconfig.json
5 | gen-tsd.json
6 | test/
7 | wct.conf.json
8 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: 'false'
3 | dist: trusty
4 | node_js: node
5 | addons:
6 | firefox: latest
7 | chrome: stable
8 | before_script:
9 | - npm install -g polymer-cli
10 | - git checkout package-lock.json
11 | - >-
12 | npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
13 | Project is not formatted. Please run "npm run format".' && false)
14 | script:
15 | - xvfb-run polymer test --module-resolution=node --npm
16 | - >-
17 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test
18 | --module-resolution=node --npm -s 'default'; fi
19 | env:
20 | global:
21 | - secure: >-
22 | UFbrYeLJe/Z54rZ+WFw9R6BnkkSYwBM6RMUEcVRJmZpEErkXxna9mbIStFJgqPTBcRbEkU5CINj0NbHgQ/OOJZY8Dx1jozNPG6tHOxH9XGQKE6S78hOh4r6WlHiq4yUye0XJgYeZwfOaQDsPTbnL2IsNzTM5wuJr8OPHAylxkHbTzemyiXnrd9co6EGhe+ucwZ6eR+q84agdFxF2T+FbcA5V5a04KKbwrfVdTnUa1nb3wkfjMYNQMigp378HXUtMjaJkq4q16OGzORkmwheWGlPV1Paw/lh7ED6HtfkriTWOONKcrGSeW4XH4u3onyL8gKDjk1cAjcHsz3YD+b2+3Yh2r6tsSoHQk/Tk0z20qUpJ02VOB8PHYRXpHKBUVQjsvamPNx//UFoA95HOy3jix2GBfaf+cC9gElFd6IzBRZd80+WDQ2pdwYv+BJYG1Peyn+5UdqBkK7UzStWHVrqdLGMEC//c9aBLnvvguG7PGiu7ecQRrNgUib1zOgCE5IBHtqOIaxCIB9po29NYZmydpfPcuNsZyvBH+kjJQwJ0sp37mJ20B/nBwQ1m9I2b64BatkeHpnlhuAGtvGxTW1yg62OUAy5kYamWZo+rLEkcHBR98Jg6lh1kMRJWgd5pBxRs05JL28NXN+ITr0njCFxOhaJbcmhpcd/WQcS1Sar+lK4=
23 | - secure: >-
24 | g6vl6SKb0pwi5z5YUtwg5oI5Yg2oT7PQAfkS7Sl83oiL6uXWQGzpxIrzp92BLeZJbBJ/niwh1bPPZUe8ct08VD6o+6grESvxfia3wf11UQ21xGVt0y6koQPa9aZLgsfURpVUZCLDhf8zWyFAs4jN6nBdkv8VFxaIW7eRnouuQOQyiDRQYlnZv3nP6nK+D0ItOzNCIXoI27LuEGW5TgeJNm7rfE9GuGNS5ZwLgq/BeVxq17fo/3g43TwRwFXdGah1uDnhy4b7WaCzZcXyiNdN3A0TmWnWROI9s+BhAkG5fQsT0JuKpCgZwPdPn+MK3JCykcGxSot3TdnxwelvVAwxMy18BFkA+CdG7H6X0Qd8d/VeighU8AXq1qLLi5rwB+AWylQ6nWFIsAvuroZOHPeKCpq9l3MDwa4D+t5aXVrkfpi5ZtaooZF4mPKB/U4BKU2+pprCun/9qP//cwiMnJrJkP+ObgxTzl9Z6OfzbjLAE01kHzi4B8Ju/jcLkxk08Q/AyOQANpC4H1hCl+P77RJjkNN9+F4qjiz0kJftpj6hlbwmsRqTHXVBkrItTuIQ6aBLHgw415WCYrpRWVfCOL3fhe/doZnIr1KLcGm3Ht8TwOVUXxFCFapaax80rlzSrmV3eKw8ybIkOuLHjDn3vg6xc+O6O4unWmDhs0admkoRjIM=
25 | cache:
26 | directories:
27 | - node_modules
28 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
13 |
14 | # Polymer Elements
15 | ## Guide for Contributors
16 |
17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
18 |
19 | ### Filing Issues
20 |
21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
22 |
23 | 1. **Who will use the feature?** _“As someone filling out a form…”_
24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_
25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
26 |
27 | **If you are filing an issue to report a bug**, please provide:
28 |
29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
30 |
31 | ```markdown
32 | The `paper-foo` element causes the page to turn pink when clicked.
33 |
34 | ## Expected outcome
35 |
36 | The page stays the same color.
37 |
38 | ## Actual outcome
39 |
40 | The page turns pink.
41 |
42 | ## Steps to reproduce
43 |
44 | 1. Put a `paper-foo` element in the page.
45 | 2. Open the page in a web browser.
46 | 3. Click the `paper-foo` element.
47 | ```
48 |
49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
50 |
51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
52 |
53 | ### Submitting Pull Requests
54 |
55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
56 |
57 | When submitting pull requests, please provide:
58 |
59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
60 |
61 | ```markdown
62 | (For a single issue)
63 | Fixes #20
64 |
65 | (For multiple issues)
66 | Fixes #32, fixes #40
67 | ```
68 |
69 | 2. **A succinct description of the design** used to fix any related issues. For example:
70 |
71 | ```markdown
72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
73 | ```
74 |
75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
76 |
77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
78 |
--------------------------------------------------------------------------------
/app-box/README.md:
--------------------------------------------------------------------------------
1 | ## <app-box>
2 |
3 | app-box is a container element that can have scroll effects - visual effects based on
4 | scroll position. For example, the parallax effect can be used to move an image at a slower
5 | rate than the foreground.
6 |
7 | ```html
8 |
9 |
10 |
11 | ```
12 |
13 | Notice the `background` attribute in the `img` element; this attribute specifies that that
14 | image is used as the background. By adding the background to the light dom, you can compose
15 | backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer`
16 | allows to style the background. For example:
17 |
18 | ```css
19 | .parallaxAppBox {
20 | --app-box-background-front-layer: {
21 | background-image: url(picture.png);
22 | };
23 | }
24 | ```
25 |
26 | Finally, app-box can have content inside. For example:
27 |
28 | ```html
29 |
30 |
Sub title
31 |
32 | ```
33 |
34 | #### Importing the effects
35 |
36 | To use the scroll effects, you must explicitly import them in addition to `app-box`:
37 |
38 | ```js
39 | import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js';
40 | ```
41 |
42 | #### List of effects
43 |
44 | * **parallax-background**
45 | A simple parallax effect that vertically translates the backgrounds based on a fraction
46 | of the scroll position. For example:
47 |
48 | ```css
49 | app-header {
50 | --app-header-background-front-layer: {
51 | background-image: url(...);
52 | };
53 | }
54 | ```
55 | ```html
56 |
57 | App name
58 |
59 | ```
60 |
61 | The fraction determines how far the background moves relative to the scroll position.
62 | This value can be assigned via the `scalar` config value and it is typically a value
63 | between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
64 |
65 | ## Styling
66 |
67 | Mixin | Description | Default
68 | ----------------|-------------|----------
69 | `--app-box-background-front-layer` | Applies to the front layer of the background | {}
70 |
--------------------------------------------------------------------------------
/app-box/demo/index.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/app-drawer-layout/README.md:
--------------------------------------------------------------------------------
1 | ## <app-drawer-layout>
2 |
3 | app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
4 | the viewport width is smaller than `responsiveWidth`, this element changes to narrow layout.
5 | In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
6 | in/out to hide/reveal the main content.
7 |
8 |
9 | By default the drawer is aligned to the start, which is left in LTR layouts:
10 |
11 | ```html
12 |
13 |
14 | drawer content
15 |
16 |
46 |
47 |
48 |
49 | main content
50 |
51 |
52 |
53 | ```
54 |
55 | Add the `drawer-toggle` attribute to elements inside `app-drawer-layout` that toggle the drawer on click events:
56 |
57 | ```html
58 |
59 |
60 | drawer-content
61 |
62 |
63 |
64 |
65 |
66 |
App name
67 |
68 |
69 |
70 | main content
71 |
72 |
73 |
74 | ```
75 |
76 | **NOTE:** With app-layout 2.0, the `drawer-toggle` element needs to be manually hidden
77 | when app-drawer-layout is not in narrow layout. To add this, add the following CSS rule where
78 | app-drawer-layout is used:
79 |
80 | ```css
81 | app-drawer-layout:not([narrow]) [drawer-toggle] {
82 | display: none;
83 | }
84 | ```
85 |
86 | Add the `fullbleed` attribute to app-drawer-layout to make it fit the size of its container:
87 |
88 | ```html
89 |
90 |
91 | drawer content
92 |
93 |
94 | main content
95 |
96 |
97 | ```
98 |
99 | ### Styling
100 |
101 | Custom property | Description | Default
102 | -----------------------------------------|--------------------------------------|---------
103 | `--app-drawer-width` | Width of the drawer | 256px
104 | `--app-drawer-layout-content-transition` | Transition for the content container | none
105 |
106 | **NOTE:** If you use with and specify a value for
107 | `--app-drawer-width`, that value must be accessible by both elements. This can be done by
108 | defining the value on the `:host` that contains (or `html` if outside
109 | a shadow root):
110 |
111 | ```css
112 | :host {
113 | --app-drawer-width: 300px;
114 | }
115 | ```
116 |
--------------------------------------------------------------------------------
/app-drawer-layout/demo/index.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | app-drawer-layout demo
18 |
19 |
20 |
21 |
30 |
31 |
32 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/app-drawer-layout/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 | app-drawer-layout tests
15 |
16 |
17 |
18 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/app-drawer/README.md:
--------------------------------------------------------------------------------
1 | ## <app-drawer>
2 |
3 | 
4 |
5 | app-drawer is a navigation drawer that can slide in from the left or right.
6 |
7 | Example:
8 |
9 | Align the drawer at the start, which is left in LTR layouts (default):
10 |
11 | ```html
12 |
13 | ```
14 |
15 | Align the drawer at the end:
16 |
17 | ```html
18 |
19 | ```
20 |
21 | To make the contents of the drawer scrollable, create a wrapper for the scroll
22 | content, and apply height and overflow styles to it.
23 |
24 | ```html
25 |
26 |
27 |
28 | ```
29 |
30 | ### Styling
31 |
32 | Custom property | Description | Default
33 | ---------------------------------|----------------------------------------|--------------------
34 | `--app-drawer-width` | Width of the drawer | 256px
35 | `--app-drawer-content-container` | Mixin for the drawer content container | {}
36 | `--app-drawer-content-padding` | Padding of the drawer content container| 120px 0
37 | `--app-drawer-scrim-background` | Background for the scrim | rgba(0, 0, 0, 0.5)
38 |
39 | **NOTE:** If you use `` with `` and specify a value for
40 | `--app-drawer-width`, that value must be accessible by both elements. This can be done by
41 | defining the value on the `:host` that contains `` (or `html` if outside
42 | a shadow root):
43 |
44 | ```css
45 | :host {
46 | --app-drawer-width: 300px;
47 | }
48 | ```
49 |
--------------------------------------------------------------------------------
/app-drawer/demo/index.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 | app-drawer demos
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
31 |
32 |
104 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/app-drawer/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 | app-drawer tests
15 |
16 |
17 |
18 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/app-grid/README.md:
--------------------------------------------------------------------------------
1 | ## <app-grid>
2 |
3 | app-grid is a helper class useful for creating responsive, fluid grid layouts using custom properties.
4 | Because custom properties can be defined inside a `@media` rule, you can customize the grid layout
5 | for different responsive breakpoints.
6 |
7 | Example:
8 |
9 | Import `app-grid-style.html` and include `app-grid-style` in the style of an element's definition.
10 | Then, add the class `app-grid` to a container such as `ul` or `div`:
11 |
12 | ```html
13 |
14 |
37 |
38 |
1
39 |
2
40 |
3
41 |
42 |
43 | ```
44 |
45 | In this example, the grid will take 3 columns per row and only 1 column if the viewport width is
46 | smaller than 640px.
47 |
48 | ### Expandible items
49 |
50 | In many cases, it's useful to expand an item more than 1 column. To achieve this type of layout,
51 | you can specify the number of columns the item should expand to by setting the custom property
52 | `--app-grid-expandible-item-columns`. To indicate which item should expand, apply the mixin
53 | `--app-grid-expandible-item` to a rule with a selector to the item. For example:
54 |
55 | ```html
56 |
57 |
74 |
75 | ```
76 |
77 | ### Preserving the aspect ratio
78 |
79 | When the size of a grid item should preserve the aspect ratio, you can add the `has-aspect-ratio`
80 | attribute to the element with the class `app-grid`. Now, every item element becomes a wrapper around
81 | the item content. For example:
82 |
83 | ```html
84 |
85 |
103 |
104 |
105 |
item 1
106 |
107 |
108 |
item 2
109 |
110 |
111 |
item 3
112 |
113 |
114 |
115 | ```
116 |
117 | ### Styling
118 |
119 | Custom property | Description | Default
120 | ----------------------------------------------|------------------------------------------------------------|------------------
121 | `--app-grid-columns` | The number of columns per row. | 1
122 | `--app-grid-gutter` | The space between two items. | 0px
123 | `--app-grid-item-height` | The height of the items. | auto
124 | `--app-grid-expandible-item-columns` | The number of columns an expandible item should expand to. | 1
125 |
126 | ### CSS grid layout
127 |
128 | [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) is a new layout system for CSS that lets you create complex grids. It's richer than app-grid in many cases, but it's only supported in a [few browsers](http://caniuse.com/#search=css%20grid%20layout).
129 |
--------------------------------------------------------------------------------
/app-grid/demo/aspect-ratio.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Preserving aspect ratio using app-grid-style
18 |
19 |
20 |
21 |
27 |
28 |
29 |
30 |
31 |
68 |
69 |
Aspect ratio: items have an aspect ratio of 1:1 on large screens and 2:1 on small ones.