| 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
|
| deleted file mode 100644
|
| index 8b9314b31bc7eaffc175098c87c387bfe0527885..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box.html
|
| +++ /dev/null
|
| @@ -1,114 +0,0 @@
|
| -<!--
|
| -@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>
|
|
|