third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html - Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1

Patch Set: fix a merge mistake Created 5 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-header-panel/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

diff --git a/third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html b/third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

deleted file mode 100644

index 9a6ec359a206c73b179c7f0bbb0ec9564845ee80..0000000000000000000000000000000000000000

--- a/third_party/polymer/v0_8/components-chromium/paper-header-panel/paper-header-panel.html

+++ /dev/null

@@ -1,244 +0,0 @@

-<!--

-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">

-<!--

-`paper-header-panel` contains a header section and a content panel section.

-__Important:__ The `paper-header-panel` will not display if its parent does not have a height.

-Using layout classes, you can make the `paper-header-panel` fill the screen

- <body class="fullbleed layout vertical">

- <paper-header-panel class="flex">

- <paper-toolbar>

- <div>Hello World!</div>

- </paper-toolbar>

- </paper-header-panel>

- </body>

-Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the

-header section.

-Example:

- <paper-header-panel>

- <paper-toolbar>Header</paper-toolbar>

- <div>Content goes here...</div>

- </paper-header-panel>

-If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that

-element.

-Example:

- <paper-header-panel>

- <div class="paper-header">Header</div>

- <div>Content goes here...</div>

- </paper-header-panel>

-To have the content fit to the main area, use the `fit` class.

- <paper-header-panel>

- <div class="paper-header">standard</div>

- <div class="fit">content fits 100% below the header</div>

- </paper-header-panel>

-Modes

-Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

-`cover`. Default is `standard`.

-Mode | Description

-----------------|-------------

-`standard` | The header is a step above the panel. The header will consume the panel at the point of entry, preventing it from passing through to the opposite side.

-`seamed` | The header is presented as seamed with the panel.

-`waterfall` | Similar to standard mode, but header is initially presented as seamed with panel, but then separates to form the step.

-`waterfall-tall` | The header is initially taller (`tall` class is added to the header). As the user scrolls, the header separates (forming an edge) while condensing (`tall` class is removed from the header).

-`scroll` | The header keeps its seam with the panel, and is pushed off screen.

-`cover` | The panel covers the whole `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.

-Example:

- <paper-header-panel mode="waterfall">

- <div class="paper-header">standard</div>

- <div class="content fit">content fits 100% below the header</div>

- </paper-header-panel>

-Styling header panel:

-To change the shadow that shows up underneath the header:

- paper-header-panel {

- --paper-header-panel-shadow: {

- height: 6px;

- bottom: -6px;

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- };

- }

-To change the panel container in different modes:

- paper-slider {

- --paper-header-panel-standard-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-cover-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-waterfall-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-waterfall-tall-container: {

- border: 1px solid gray;

- };

- }

-@group Paper Elements

-@element paper-header-panel

-@demo demo/index.html

-@hero hero.svg

--->

-</head><body><dom-module id="paper-header-panel">

- <style>

- :host {

- @apply(--layout);

- @apply(--layout-vertical);

- display: block;

- position: relative;

- height: 100%;

- /* Create a stack context, we will need it for the shadow*/

- z-index: 0;

- }

- #mainContainer {

- @apply(--layout-flex);

- position: relative;

- overflow-y: auto;

- overflow-x: hidden;

- -webkit-overflow-scrolling: touch;

- flex-basis: 0.0001px;

- }

- /*

- * mode: scroll

- */

- :host([mode=scroll]) #mainContainer {

- @apply(--paper-header-panel-scroll-container);

- overflow: visible;

- }

- :host([mode=scroll]) {

- overflow-y: auto;

- overflow-x: hidden;

- -webkit-overflow-scrolling: touch;

- }

- /*

- * mode: cover

- */

- :host([mode=cover]) #mainContainer {

- @apply(--paper-header-panel-cover-container);

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- }

- /*

- * mode: standard

- */

- :host([mode=standard]) #mainContainer {

- @apply(--paper-header-panel-standard-container);

- }

- /*

- * mode: waterfall

- */

- :host([mode=waterfall]) #mainContainer {

- @apply(--paper-header-panel-waterfall-container);

- }

- /*

- * mode: waterfall-tall

- */

- :host([mode=waterfall-tall]) #mainContainer {

- @apply(--paper-header-panel-waterfall-tall-container);

- }

- :host ::content paper-toolbar,

- :host ::content .paper-header {

- position: relative;

- overflow: visible !important;

- }

- :host ::content paper-toolbar:after,

- :host ::content .paper-header:after {

- @apply(--paper-header-panel-shadow);

- -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;

- transition: opacity 0.5s, transform 0.5s;

- opacity: 0;

- content: "";

- width: 100%;

- position: absolute;

- left: 0px;

- right: 0px;

- z-index: 1;

- -webkit-transform: scale3d(1, 0, 1);

- -webkit-transform-origin: 0% 0%;

- transform: scale3d(1, 0, 1);

- transform-origin: 0% 0%;

- }

- :host ::content paper-toolbar.has-shadow:after,

- :host ::content .paper-header.has-shadow:after {

- opacity: 1;

- -webkit-transform: scale3d(1, 1, 1);

- transform: scale3d(1, 1, 1);

- }

- </style>

- <template>

- <content id="headerContent" select="paper-toolbar, .paper-header"></content>

- <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">

- <content id="mainContent" select="*"></content>

- </div>

- </template>

-</dom-module>

-<style is="custom-style">

- :root {

- /**

- * Default paper header panel shadow

- */

- --paper-header-panel-shadow: {

- height: 6px;

- bottom: -6px;

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- };

- }

-</style>

-<script src="paper-header-panel-extracted.js"></script></body></html>