| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> |
| 10 <!doctype html> |
| 11 <html> |
| 12 <head> |
| 13 <title>paper-ripple demo</title> |
| 14 |
| 15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0"> |
| 16 <meta name="mobile-web-app-capable" content="yes"> |
| 17 <meta name="apple-mobile-web-app-capable" content="yes"> |
| 18 |
| 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 20 |
| 21 <link rel="import" href="../../iron-icons/iron-icons.html"> |
| 22 <link rel="import" href="../paper-ripple.html"> |
| 23 <link rel="import" href="../../paper-styles/classes/typography.html"> |
| 24 <link rel="import" href="../../iron-icon/iron-icon.html"> |
| 25 |
| 26 <style> |
| 27 |
| 28 body { |
| 29 background-color: #f9f9f9; |
| 30 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; |
| 31 -webkit-tap-highlight-color: rgba(0,0,0,0); |
| 32 -webkit-touch-callout: none; |
| 33 } |
| 34 |
| 35 section { |
| 36 padding: 30px 25px; |
| 37 } |
| 38 |
| 39 section > * { |
| 40 margin: 10px |
| 41 } |
| 42 |
| 43 /* Button */ |
| 44 .button { |
| 45 display: inline-block; |
| 46 position: relative; |
| 47 width: 120px; |
| 48 height: 32px; |
| 49 line-height: 32px; |
| 50 border-radius: 2px; |
| 51 font-size: 0.9em; |
| 52 background-color: #fff; |
| 53 color: #646464; |
| 54 } |
| 55 |
| 56 .button > paper-ripple { |
| 57 border-radius: 2px; |
| 58 overflow: hidden; |
| 59 } |
| 60 |
| 61 .button.narrow { |
| 62 width: 60px; |
| 63 } |
| 64 |
| 65 .button.grey { |
| 66 background-color: #eee; |
| 67 } |
| 68 |
| 69 .button.blue { |
| 70 background-color: #4285f4; |
| 71 color: #fff; |
| 72 } |
| 73 |
| 74 .button.green { |
| 75 background-color: #0f9d58; |
| 76 color: #fff; |
| 77 } |
| 78 |
| 79 .button.raised { |
| 80 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| 81 transition-delay: 0.2s; |
| 82 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| 83 } |
| 84 |
| 85 .button.raised:active { |
| 86 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); |
| 87 transition-delay: 0s; |
| 88 } |
| 89 |
| 90 /* Icon Button */ |
| 91 .icon-button { |
| 92 position: relative; |
| 93 display: inline-block; |
| 94 width: 56px; |
| 95 height: 56px; |
| 96 } |
| 97 |
| 98 .icon-button > iron-icon { |
| 99 margin: 16px; |
| 100 transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| 101 transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| 102 } |
| 103 |
| 104 .icon-button:hover > iron-icon { |
| 105 -webkit-transform: scale(1.2); |
| 106 transform: scale(1.2); |
| 107 } |
| 108 |
| 109 .icon-button > paper-ripple { |
| 110 overflow: hidden; |
| 111 color: #646464; |
| 112 } |
| 113 |
| 114 .icon-button.red > iron-icon::shadow path { |
| 115 fill: #db4437; |
| 116 } |
| 117 |
| 118 .icon-button.red > paper-ripple { |
| 119 color: #db4437; |
| 120 } |
| 121 |
| 122 .icon-button.blue > iron-icon::shadow path { |
| 123 fill: #4285f4; |
| 124 } |
| 125 |
| 126 .icon-button.blue > paper-ripple { |
| 127 color: #4285f4; |
| 128 } |
| 129 |
| 130 /* FAB */ |
| 131 .fab { |
| 132 position: relative; |
| 133 display: inline-block; |
| 134 width: 56px; |
| 135 height: 56px; |
| 136 border-radius: 50%; |
| 137 color: #fff; |
| 138 overflow: hidden; |
| 139 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| 140 transition-delay: 0.2s; |
| 141 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| 142 } |
| 143 |
| 144 .fab.red { |
| 145 background-color: #d23f31; |
| 146 } |
| 147 |
| 148 .fab.blue { |
| 149 background-color: #4285f4; |
| 150 } |
| 151 |
| 152 .fab.green { |
| 153 background-color: #0f9d58; |
| 154 } |
| 155 |
| 156 .fab:active { |
| 157 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); |
| 158 transition-delay: 0s; |
| 159 } |
| 160 |
| 161 .fab > iron-icon { |
| 162 margin: 16px; |
| 163 } |
| 164 |
| 165 .fab > iron-icon::shadow path { |
| 166 fill: #fff; |
| 167 } |
| 168 |
| 169 /* Menu */ |
| 170 .menu { |
| 171 display: inline-block; |
| 172 width: 180px; |
| 173 background-color: #fff; |
| 174 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); |
| 175 } |
| 176 |
| 177 .item { |
| 178 position: relative; |
| 179 height: 48px; |
| 180 line-height: 48px; |
| 181 color: #646464; |
| 182 font-size: 0.9em; |
| 183 } |
| 184 |
| 185 .menu.blue > .item { |
| 186 color: #4285f4; |
| 187 } |
| 188 |
| 189 /* Card, Dialog */ |
| 190 .card, .dialog { |
| 191 position: relative; |
| 192 display: inline-block; |
| 193 width: 300px; |
| 194 height: 240px; |
| 195 vertical-align: top; |
| 196 background-color: #fff; |
| 197 box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); |
| 198 } |
| 199 |
| 200 .dialog { |
| 201 box-sizing: border-box; |
| 202 padding: 16px; |
| 203 } |
| 204 |
| 205 .dialog > .content { |
| 206 height: 170px; |
| 207 font-size: 0.9em; |
| 208 } |
| 209 |
| 210 .dialog > .content > .title { |
| 211 font-size: 1.3em; |
| 212 } |
| 213 |
| 214 .dialog > .button { |
| 215 width: 90px; |
| 216 float: right; |
| 217 } |
| 218 |
| 219 .card.image { |
| 220 background: url(http://lorempixel.com/300/240/nature/); |
| 221 color: #fff; |
| 222 } |
| 223 |
| 224 /* Misc */ |
| 225 .center { |
| 226 text-align: center; |
| 227 } |
| 228 |
| 229 .label { |
| 230 padding: 0 16px; |
| 231 } |
| 232 |
| 233 .label-blue { |
| 234 color: #4285f4; |
| 235 } |
| 236 |
| 237 .label-red { |
| 238 color: #d23f31; |
| 239 } |
| 240 |
| 241 </style> |
| 242 |
| 243 </head> |
| 244 <body> |
| 245 |
| 246 <section> |
| 247 |
| 248 <div class="button raised"> |
| 249 <div class="center" fit>SUBMIT</div> |
| 250 <paper-ripple></paper-ripple> |
| 251 </div> |
| 252 |
| 253 <div class="button raised grey"> |
| 254 <div class="center" fit>CANCEL</div> |
| 255 <paper-ripple></paper-ripple> |
| 256 </div> |
| 257 |
| 258 <div class="button raised blue"> |
| 259 <div class="center" fit>COMPOSE</div> |
| 260 <paper-ripple></paper-ripple> |
| 261 </div> |
| 262 |
| 263 <div class="button raised green"> |
| 264 <div class="center" fit>OK</div> |
| 265 <paper-ripple></paper-ripple> |
| 266 </div> |
| 267 |
| 268 </section> |
| 269 |
| 270 <section> |
| 271 |
| 272 <div class="button raised grey narrow"> |
| 273 <div class="center" fit>+1</div> |
| 274 <paper-ripple></paper-ripple> |
| 275 </div> |
| 276 |
| 277 <div class="button raised grey narrow label-blue"> |
| 278 <div class="center" fit>+1</div> |
| 279 <paper-ripple></paper-ripple> |
| 280 </div> |
| 281 |
| 282 <div class="button raised grey narrow label-red"> |
| 283 <div class="center" fit>+1</div> |
| 284 <paper-ripple></paper-ripple> |
| 285 </div> |
| 286 |
| 287 </section> |
| 288 |
| 289 <section> |
| 290 |
| 291 <div class="icon-button"> |
| 292 <iron-icon icon="menu"></iron-icon> |
| 293 <paper-ripple class="circle" recenters></paper-ripple> |
| 294 </div> |
| 295 |
| 296 <div class="icon-button"> |
| 297 <iron-icon icon="more-vert"></iron-icon> |
| 298 <paper-ripple class="circle" recenters></paper-ripple> |
| 299 </div> |
| 300 |
| 301 <div class="icon-button red"> |
| 302 <iron-icon icon="delete"></iron-icon> |
| 303 <paper-ripple class="circle" recenters></paper-ripple> |
| 304 </div> |
| 305 |
| 306 <div class="icon-button blue"> |
| 307 <iron-icon icon="account-box"></iron-icon> |
| 308 <paper-ripple class="circle" recenters></paper-ripple> |
| 309 </div> |
| 310 |
| 311 </section> |
| 312 |
| 313 <section> |
| 314 |
| 315 <div class="fab red"> |
| 316 <iron-icon icon="add"></iron-icon> |
| 317 <paper-ripple class="circle" recenters></paper-ripple> |
| 318 </div> |
| 319 |
| 320 <div class="fab blue"> |
| 321 <iron-icon icon="mail"></iron-icon> |
| 322 <paper-ripple class="circle" recenters></paper-ripple> |
| 323 </div> |
| 324 |
| 325 <div class="fab green"> |
| 326 <iron-icon icon="create"></iron-icon> |
| 327 <paper-ripple class="circle" recenters></paper-ripple> |
| 328 </div> |
| 329 |
| 330 </section> |
| 331 |
| 332 <section> |
| 333 |
| 334 <div class="menu"> |
| 335 |
| 336 <div class="item"> |
| 337 <div class="label" fit>Mark as unread</div> |
| 338 <paper-ripple></paper-ripple> |
| 339 </div> |
| 340 <div class="item"> |
| 341 <div class="label" fit>Mark as important</div> |
| 342 <paper-ripple></paper-ripple> |
| 343 </div> |
| 344 <div class="item"> |
| 345 <div class="label" fit>Add to Tasks</div> |
| 346 <paper-ripple></paper-ripple> |
| 347 </div> |
| 348 <div class="item"> |
| 349 <div class="label" fit>Create event</div> |
| 350 <paper-ripple></paper-ripple> |
| 351 </div> |
| 352 |
| 353 </div> |
| 354 |
| 355 <div class="menu blue"> |
| 356 |
| 357 <div class="item"> |
| 358 <div class="label" fit>Import</div> |
| 359 <paper-ripple></paper-ripple> |
| 360 </div> |
| 361 <div class="item"> |
| 362 <div class="label" fit>Export</div> |
| 363 <paper-ripple></paper-ripple> |
| 364 </div> |
| 365 <div class="item"> |
| 366 <div class="label" fit>Print</div> |
| 367 <paper-ripple></paper-ripple> |
| 368 </div> |
| 369 <div class="item"> |
| 370 <div class="label" fit>Restore contacts</div> |
| 371 <paper-ripple></paper-ripple> |
| 372 </div> |
| 373 |
| 374 </div> |
| 375 |
| 376 </section> |
| 377 |
| 378 <section> |
| 379 |
| 380 <div class="dialog"> |
| 381 |
| 382 <div class="content"> |
| 383 <div class="title">Permission</div><br> |
| 384 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia
m.</div> |
| 385 </div> |
| 386 |
| 387 <div class="button label-blue"> |
| 388 <div class="center" fit>ACCEPT</div> |
| 389 <paper-ripple></paper-ripple> |
| 390 </div> |
| 391 |
| 392 <div class="button"> |
| 393 <div class="center" fit>DECLINE</div> |
| 394 <paper-rippl></paper-ripple> |
| 395 </div> |
| 396 |
| 397 </div> |
| 398 |
| 399 <div class="card"> |
| 400 <paper-ripple recenters></paper-ripple> |
| 401 </div> |
| 402 |
| 403 <div class="card image"> |
| 404 |
| 405 <paper-ripple recenters></paper-ripple> |
| 406 |
| 407 </div> |
| 408 |
| 409 </section> |
| 410 |
| 411 </body> |
| 412 </html> |
| 413 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1082403004:
Import Polymer 0.8 and several key elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master