| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> | 9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 10 | 10 |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 105 } | 105 } |
| 106 | 106 |
| 107 @group Paper Elements | 107 @group Paper Elements |
| 108 @element paper-header-panel | 108 @element paper-header-panel |
| 109 @demo demo/index.html | 109 @demo demo/index.html |
| 110 @hero hero.svg | 110 @hero hero.svg |
| 111 --> | 111 --> |
| 112 | 112 |
| 113 </head><body><dom-module id="paper-header-panel"> | 113 </head><body><dom-module id="paper-header-panel"> |
| 114 | 114 |
| 115 <style> | 115 <link rel="import" type="css" href="paper-header-panel.css"> |
| 116 :host { | |
| 117 @apply(--layout); | |
| 118 @apply(--layout-vertical); | |
| 119 | |
| 120 display: block; | |
| 121 position: relative; | |
| 122 height: 100%; | |
| 123 | |
| 124 /* Create a stack context, we will need it for the shadow*/ | |
| 125 z-index: 0; | |
| 126 } | |
| 127 | |
| 128 :root { | |
| 129 /** | |
| 130 * Default paper header panel shadow | |
| 131 */ | |
| 132 --paper-header-panel-shadow: { | |
| 133 height: 6px; | |
| 134 bottom: -6px; | |
| 135 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); | |
| 136 }; | |
| 137 } | |
| 138 | |
| 139 #mainContainer { | |
| 140 @apply(--layout-flex); | |
| 141 | |
| 142 position: relative; | |
| 143 overflow-y: auto; | |
| 144 overflow-x: hidden; | |
| 145 -webkit-overflow-scrolling: touch; | |
| 146 flex-basis: 0.0001px; | |
| 147 } | |
| 148 | |
| 149 /* | |
| 150 * mode: scroll | |
| 151 */ | |
| 152 :host([mode=scroll]) #mainContainer { | |
| 153 @apply(--paper-header-panel-scroll-container); | |
| 154 overflow: visible; | |
| 155 } | |
| 156 | |
| 157 :host([mode=scroll]) { | |
| 158 overflow-y: auto; | |
| 159 overflow-x: hidden; | |
| 160 -webkit-overflow-scrolling: touch; | |
| 161 } | |
| 162 | |
| 163 /* | |
| 164 * mode: cover | |
| 165 */ | |
| 166 :host([mode=cover]) #mainContainer { | |
| 167 @apply(--paper-header-panel-cover-container); | |
| 168 position: absolute; | |
| 169 top: 0; | |
| 170 right: 0; | |
| 171 bottom: 0; | |
| 172 left: 0; | |
| 173 } | |
| 174 | |
| 175 /* | |
| 176 * mode: standard | |
| 177 */ | |
| 178 :host([mode=standard]) #mainContainer { | |
| 179 @apply(--paper-header-panel-standard-container); | |
| 180 } | |
| 181 | |
| 182 /* | |
| 183 * mode: waterfall | |
| 184 */ | |
| 185 :host([mode=waterfall]) #mainContainer { | |
| 186 @apply(--paper-header-panel-waterfall-container); | |
| 187 } | |
| 188 | |
| 189 /* | |
| 190 * mode: waterfall-tall | |
| 191 */ | |
| 192 :host([mode=waterfall-tall]) #mainContainer { | |
| 193 @apply(--paper-header-panel-waterfall-tall-container); | |
| 194 } | |
| 195 | |
| 196 :host ::content paper-toolbar, | |
| 197 :host ::content .paper-header { | |
| 198 position: relative; | |
| 199 overflow: visible !important; | |
| 200 } | |
| 201 | |
| 202 :host ::content paper-toolbar:after, | |
| 203 :host ::content .paper-header:after { | |
| 204 @apply(--paper-header-panel-shadow); | |
| 205 | |
| 206 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; | |
| 207 transition: opacity 0.5s, transform 0.5s; | |
| 208 | |
| 209 opacity: 0; | |
| 210 content: ""; | |
| 211 | |
| 212 width: 100%; | |
| 213 position: absolute; | |
| 214 left: 0px; | |
| 215 right: 0px; | |
| 216 z-index: 1; | |
| 217 | |
| 218 -webkit-transform: scale3d(1, 0, 1); | |
| 219 -webkit-transform-origin: 0% 0%; | |
| 220 | |
| 221 transform: scale3d(1, 0, 1); | |
| 222 transform-origin: 0% 0%; | |
| 223 } | |
| 224 | |
| 225 :host ::content paper-toolbar.has-shadow:after, | |
| 226 :host ::content .paper-header.has-shadow:after { | |
| 227 opacity: 1; | |
| 228 -webkit-transform: scale3d(1, 1, 1); | |
| 229 transform: scale3d(1, 1, 1); | |
| 230 } | |
| 231 </style> | |
| 232 | 116 |
| 233 <template> | 117 <template> |
| 234 <content id="headerContent" select="paper-toolbar, .paper-header"></content> | 118 <content id="headerContent" select="paper-toolbar, .paper-header"></content> |
| 235 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]"> | 119 |
| 236 <content id="mainContent" select="*"></content> | 120 <div id="mainPanel"> |
| 121 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]"> |
| 122 <content id="mainContent" select="*"></content> |
| 123 </div> |
| 124 <div id="dropShadow"></div> |
| 237 </div> | 125 </div> |
| 238 </template> | 126 </template> |
| 239 | 127 |
| 240 </dom-module> | 128 </dom-module> |
| 241 | 129 |
| 242 <script src="paper-header-panel-extracted.js"></script></body></html> | 130 <script src="paper-header-panel-extracted.js"></script></body></html> |
| OLD | NEW |