| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <!-- |
| 3 Copyright 2013 The Polymer Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style |
| 5 license that can be found in the LICENSE file. |
| 6 --> |
| 7 <html> |
| 8 <head> |
| 9 <title>paper-shadow</title> |
| 10 <meta charset="utf-8"> |
| 11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 12 <meta name="viewport" content="width=device-width, initial-scale=1, user-scala
ble=no"> |
| 13 <script src="../platform/platform.js"></script> |
| 14 <link href="paper-shadow.html" rel="import"> |
| 15 <style> |
| 16 body { |
| 17 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; |
| 18 transform: translateZ(0); |
| 19 -webkit-transform: translateZ(0); |
| 20 transform: translateZ(0); |
| 21 padding: 16px; |
| 22 user-select: none; |
| 23 -webkit-user-select: none; |
| 24 } |
| 25 |
| 26 section { |
| 27 display: flex; |
| 28 display: -webkit-flex; |
| 29 width: 80%; |
| 30 margin: 16px; |
| 31 } |
| 32 |
| 33 aside { |
| 34 flex: 1 1 auto; |
| 35 -webkit-flex: 1 1 auto; |
| 36 padding: 48px 16px; |
| 37 user-select: text; |
| 38 -webkit-user-select: text; |
| 39 } |
| 40 |
| 41 .card { |
| 42 background: white; |
| 43 width: 300px; |
| 44 height: 300px; |
| 45 position: relative; |
| 46 margin: 16px; |
| 47 border-radius: 2px; |
| 48 } |
| 49 |
| 50 .card-inner { |
| 51 position: absolute; |
| 52 left: 0; |
| 53 top: 0; |
| 54 right: 0; |
| 55 bottom: 0; |
| 56 border-radius: 2px; |
| 57 } |
| 58 |
| 59 </style> |
| 60 </head> |
| 61 <body unresolved> |
| 62 |
| 63 <paper-shadow></paper-shadow> |
| 64 |
| 65 <section> |
| 66 <div> |
| 67 <div class="card"> |
| 68 </div> |
| 69 </div> |
| 70 <aside> |
| 71 z-depth = 0 |
| 72 </aside> |
| 73 </section> |
| 74 |
| 75 <section> |
| 76 <!-- Example of using paper-shadow to add a shadow to an element --> |
| 77 <div> |
| 78 <div class="card"> |
| 79 <paper-shadow z="1"></paper-shadow> |
| 80 </div> |
| 81 </div> |
| 82 <aside> |
| 83 z-depth = 1 |
| 84 </aside> |
| 85 </section> |
| 86 |
| 87 <section> |
| 88 <!-- Example of using paper-shadow as part of a Polymer element --> |
| 89 <polymer-element name="x-card" attributes="z"> |
| 90 <template> |
| 91 <style> |
| 92 :host { |
| 93 display: block; |
| 94 } |
| 95 </style> |
| 96 <paper-shadow z="{{z}}"></paper-shadow> |
| 97 </template> |
| 98 <script> |
| 99 Polymer('x-card', { |
| 100 publish: { |
| 101 z: {value: 1, reflect: true} |
| 102 } |
| 103 }); |
| 104 </script> |
| 105 </polymer-element> |
| 106 <div> |
| 107 <x-card class="card" z="2"></x-card> |
| 108 </div> |
| 109 <aside> |
| 110 z-depth = 2 |
| 111 </aside> |
| 112 </section> |
| 113 |
| 114 <section> |
| 115 <!-- Example of using paper-shadow by adding a class directly --> |
| 116 <div> |
| 117 <div class="card paper-shadow-top-z-3"> |
| 118 <div class="card-inner paper-shadow-bottom-z-3"> |
| 119 </div> |
| 120 </div> |
| 121 </div> |
| 122 <aside> |
| 123 z-depth = 3 |
| 124 </aside> |
| 125 </section> |
| 126 |
| 127 <section> |
| 128 <div> |
| 129 <div class="card paper-shadow-top-z-4"> |
| 130 <div class="card-inner paper-shadow-bottom-z-4"> |
| 131 </div> |
| 132 </div> |
| 133 </div> |
| 134 <aside> |
| 135 z-depth = 4 |
| 136 </aside> |
| 137 </section> |
| 138 |
| 139 <section> |
| 140 <div> |
| 141 <div class="card paper-shadow-top-z-5"> |
| 142 <div class="card-inner paper-shadow-bottom-z-5"> |
| 143 </div> |
| 144 </div> |
| 145 </div> |
| 146 <aside> |
| 147 z-depth = 5 |
| 148 </aside> |
| 149 </section> |
| 150 |
| 151 <br> |
| 152 <br> |
| 153 <br> |
| 154 <br> |
| 155 |
| 156 <polymer-element name="x-shadow" attributes="z" on-tap="{{tapAction}}"> |
| 157 <template> |
| 158 <style> |
| 159 :host, |
| 160 .paper-shadow-bottom { |
| 161 display: block; |
| 162 background: white; |
| 163 color: #ccc; |
| 164 } |
| 165 |
| 166 :host(.fab), |
| 167 :host(.fab) .paper-shadow-bottom { |
| 168 width: 48px; |
| 169 height: 48px; |
| 170 border-radius: 24px; |
| 171 } |
| 172 </style> |
| 173 <paper-shadow z="{{z}}" animated></paper-shadow> |
| 174 </template> |
| 175 <script> |
| 176 Polymer('x-shadow', { |
| 177 publish: { |
| 178 z: {value: 0, reflect: true} |
| 179 }, |
| 180 up: true, |
| 181 zChanged: function() { |
| 182 this.fire('shadow-z-changed'); |
| 183 }, |
| 184 tapAction: function() { |
| 185 if (this.up) { |
| 186 if (this.z < 5) { |
| 187 this.z += 1; |
| 188 } else { |
| 189 this.z -= 1; |
| 190 this.up = false; |
| 191 } |
| 192 } else { |
| 193 if (this.z > 0) { |
| 194 this.z -= 1; |
| 195 } else { |
| 196 this.z += 1; |
| 197 this.up = true; |
| 198 } |
| 199 } |
| 200 } |
| 201 }); |
| 202 </script> |
| 203 </polymer-element> |
| 204 |
| 205 <section> |
| 206 <div> |
| 207 <x-shadow id="card" z="0" class="card"></x-shadow> |
| 208 </div> |
| 209 <aside> |
| 210 Tap to lift/drop the card. |
| 211 <br> |
| 212 Current z-index = <span id="card-z">0</span> |
| 213 </aside> |
| 214 <script> |
| 215 document.addEventListener('polymer-ready', function() { |
| 216 var fab = document.getElementById('card'); |
| 217 fab.addEventListener('shadow-z-changed', function() { |
| 218 document.getElementById('card-z').textContent = fab.z; |
| 219 }); |
| 220 }); |
| 221 </script> |
| 222 </section> |
| 223 |
| 224 <section> |
| 225 <div> |
| 226 <style> |
| 227 x-shadow.fab { |
| 228 margin: 48px 142px; |
| 229 } |
| 230 </style> |
| 231 <x-shadow id="fab" z="0" class="fab"></x-shadow> |
| 232 </div> |
| 233 <aside> |
| 234 Tap to lift/drop the button. |
| 235 <br> |
| 236 Current z-index = <span id="fab-z">0</span> |
| 237 </aside> |
| 238 <script> |
| 239 document.addEventListener('polymer-ready', function() { |
| 240 var fab = document.getElementById('fab'); |
| 241 fab.addEventListener('shadow-z-changed', function() { |
| 242 document.getElementById('fab-z').textContent = fab.z; |
| 243 }); |
| 244 }); |
| 245 </script> |
| 246 </section> |
| 247 |
| 248 </body> |
| 249 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master