third_party/polymer/components-chromium/paper-ripple/demo.html

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