Index: third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html |
diff --git a/third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html b/third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html |
deleted file mode 100644 |
index eb18b0dd3f05ba66f376d06ede55a893a735402d..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/v0_8/components-chromium/paper-scroll-header-panel/paper-scroll-header-panel.html |
+++ /dev/null |
@@ -1,150 +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-resizable-behavior/iron-resizable-behavior.html"> |
- |
-<!-- |
-`paper-scroll-header-panel` contains a header section and a content section. The |
-header is initially on the top part of the view but it scrolls away with the |
-rest of the scrollable content. Upon scrolling slightly up at any point, the |
-header scrolls back into view. This saves screen space and allows users to |
-access important controls by easily moving them back to the view. |
- |
-__Important:__ The `paper-scroll-header-panel` will not display if its parent does not have a height. |
- |
-Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `paper-scroll-header-panel` fill the screen |
- |
- <body class="fullbleed layout vertical"> |
- <paper-scroll-header-panel class="flex"> |
- <paper-toolbar> |
- <div>Hello World!</div> |
- </paper-toolbar> |
- </paper-scroll-header-panel> |
- </body> |
- |
-or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%: |
- |
- html, body { |
- height: 100%; |
- margin: 0; |
- } |
- paper-scroll-header-panel { |
- height: 100%; |
- } |
- |
-`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element |
-that represents a header by adding a `core-header` class to it. |
- |
- <paper-scroll-header-panel> |
- <paper-toolbar>Header</paper-toolbar> |
- <div>Content goes here...</div> |
- </paper-scroll-header-panel> |
- |
-Styling scroll-header-panel: |
- |
- To change background for toolbar when it is at its full size: |
- |
- paper-scroll-header-panel { |
- --paper-scroll-header-panel-full-header: { |
- background-color: red; |
- }; |
- } |
- |
- To change the background for toolbar when it is condensed: |
- |
- paper-scroll-header-panel { |
- --paper-scroll-header-panel-condensed-header: { |
- background-color: #f4b400; |
- }; |
- } |
- |
-@group Paper Element |
-@element paper-scrollheader-panel |
-@demo demo/index.html |
-@hero hero.svg |
---> |
- |
-</head><body><dom-module id="paper-scroll-header-panel"> |
- |
- <style> |
- :host { |
- display: block; |
- position: relative; |
- overflow: hidden; |
- } |
- |
- #mainContainer { |
- position: absolute; |
- top: 0; |
- right: 0; |
- bottom: 0; |
- left: 0; |
- box-sizing: border-box; |
- -moz-box-sizing: border-box; |
- -webkit-overflow-scrolling: touch; |
- overflow-x: hidden; |
- overflow-_y: auto; |
- -webkit-transform: translateZ(0); |
- transform: translateZ(0); |
- } |
- |
- #headerContainer { |
- position: absolute; |
- top: 0; |
- right: 0; |
- left: 0; |
- } |
- |
- .bg-container { |
- position: absolute; |
- top: 0; |
- left: 0; |
- width: 100%; |
- height: 100%; |
- overflow: hidden; |
- } |
- |
- #headerBg { |
- @apply(--paper-scroll-header-panel-full-header); |
- } |
- |
- #condensedHeaderBg { |
- @apply(--paper-scroll-header-panel-condensed-header); |
- } |
- |
- #headerBg, #condensedHeaderBg { |
- position: absolute; |
- top: 0; |
- left: 0; |
- width: 100%; |
- height: 100%; |
- background-repeat: no-repeat; |
- background-size: cover; |
- background-position: center center; |
- } |
- |
- #condensedHeaderBg { |
- opacity: 0; |
- } |
- </style> |
- <template> |
- <div id="mainContainer"> |
- <content id="mainContent" select=":not(paper-toolbar):not(.paper-header)"></content> |
- </div> |
- <div id="headerContainer"> |
- <div class="bg-container"> |
- <div id="condensedHeaderBg"></div> |
- <div id="headerBg"></div> |
- </div> |
- <content id="headerContent" select="paper-toolbar, .paper-header"></content> |
- </div> |
- </template> |
-</dom-module> |
- |
-<script src="paper-scroll-header-panel-extracted.js"></script></body></html> |