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