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

   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 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</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>