| Index: third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box.html b/third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..8b9314b31bc7eaffc175098c87c387bfe0527885
|
| --- /dev/null
|
| +++ b/third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box.html
|
| @@ -0,0 +1,114 @@
|
| +<!--
|
| +@license
|
| +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +--><html><head><link rel="import" href="../../polymer/polymer.html">
|
| +<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
| +<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
|
| +<link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html">
|
| +
|
| +<!--
|
| +app-box is a container element that can have scroll effects - visual effects based on
|
| +scroll position. For example, the parallax effect can be used to move an image at a slower
|
| +rate than the foreground.
|
| +
|
| +```html
|
| +<app-box style="height: 100px;" effects="parallax-background">
|
| + <img background src="picture.png" style="width: 100%; height: 600px;">
|
| +</app-box>
|
| +```
|
| +
|
| +Notice the `background` attribute in the `img` element; this attribute specifies that that image is used as the background.
|
| +By adding the background to the light dom, you can compose backgrounds that can change dynamically.
|
| +Alternatively, the mixin `--app-box-background-front-layer` allows to style the background. For example:
|
| +
|
| +```css
|
| + .parallaxAppBox {
|
| + --app-box-background-front-layer: {
|
| + background-image: url(picture.png);
|
| + };
|
| + }
|
| +```
|
| +
|
| +Finally, app-box can have content inside. For example:
|
| +
|
| +```html
|
| +<app-box effects="parallax-background">
|
| + <h2>Sub title</h2>
|
| +</app-box>
|
| +```
|
| +
|
| +## Scroll effects
|
| +
|
| +Effect name | Description
|
| +----------------|-------------
|
| +`parallax-background` | A parallax effect
|
| +
|
| +## Styling
|
| +
|
| +Mixin | Description | Default
|
| +----------------|-------------|----------
|
| +`--app-box-background-front-layer` | Applies to the front layer of the background | {}
|
| +
|
| +@group App Elements
|
| +@element app-box
|
| +@demo app-box/demo/document-scroll.html Document Scroll
|
| +@demo app-box/demo/scrolling-region.html Scrolling Region
|
| +-->
|
| +
|
| +</head><body><dom-module id="app-box">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + position: relative;
|
| +
|
| + display: block;
|
| + }
|
| +
|
| + #background {
|
| + @apply(--layout-fit);
|
| +
|
| + overflow: hidden;
|
| +
|
| + height: 100%;
|
| + }
|
| +
|
| + #backgroundFrontLayer {
|
| + min-height: 100%;
|
| +
|
| + pointer-events: none;
|
| +
|
| + background-size: cover;
|
| +
|
| + @apply(--app-box-background-front-layer);
|
| + }
|
| +
|
| + #contentContainer {
|
| + position: relative;
|
| +
|
| + width: 100%;
|
| + height: 100%;
|
| + }
|
| +
|
| + :host([disabled]),
|
| + :host([disabled]) #backgroundFrontLayer {
|
| + transition: none !important;
|
| + }
|
| + </style>
|
| +
|
| + <div id="background">
|
| + <div id="backgroundFrontLayer">
|
| + <content select="[background]"></content>
|
| + </div>
|
| + </div>
|
| + <div id="contentContainer">
|
| + <content id="content"></content>
|
| + </div>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<script src="app-box-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1984963002:
Roll Polymer elements (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master