<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <!doctype html> <html> <head> <title>paper-ripple demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="../../iron-icons/iron-icons.html"> <link rel="import" href="../paper-ripple.html"> <link rel="import" href="../../paper-styles/classes/typography.html"> <link rel="import" href="../../iron-icon/iron-icon.html"> <style> body { background-color: #f9f9f9; font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; } section { padding: 30px 25px; } section > * { margin: 10px } /* Button */ .button { display: inline-block; position: relative; width: 120px; height: 32px; line-height: 32px; border-radius: 2px; font-size: 0.9em; background-color: #fff; color: #646464; } .button > paper-ripple { border-radius: 2px; overflow: hidden; } .button.narrow { width: 60px; } .button.grey { background-color: #eee; } .button.blue { background-color: #4285f4; color: #fff; } .button.green { background-color: #0f9d58; color: #fff; } .button.raised { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .button.raised:active { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); transition-delay: 0s; } /* Icon Button */ .icon-button { position: relative; display: inline-block; width: 56px; height: 56px; } .icon-button > iron-icon { margin: 16px; transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .icon-button:hover > iron-icon { -webkit-transform: scale(1.2); transform: scale(1.2); } .icon-button > paper-ripple { overflow: hidden; color: #646464; } .icon-button.red > iron-icon::shadow path { fill: #db4437; } .icon-button.red > paper-ripple { color: #db4437; } .icon-button.blue > iron-icon::shadow path { fill: #4285f4; } .icon-button.blue > paper-ripple { color: #4285f4; } /* FAB */ .fab { position: relative; display: inline-block; width: 56px; height: 56px; border-radius: 50%; color: #fff; overflow: hidden; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .fab.red { background-color: #d23f31; } .fab.blue { background-color: #4285f4; } .fab.green { background-color: #0f9d58; } .fab:active { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); transition-delay: 0s; } .fab > iron-icon { margin: 16px; } .fab > iron-icon::shadow path { fill: #fff; } /* Menu */ .menu { display: inline-block; width: 180px; background-color: #fff; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); } .item { position: relative; height: 48px; line-height: 48px; color: #646464; font-size: 0.9em; } .menu.blue > .item { color: #4285f4; } /* Card, Dialog */ .card, .dialog { position: relative; display: inline-block; width: 300px; height: 240px; vertical-align: top; background-color: #fff; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); } .dialog { box-sizing: border-box; padding: 16px; } .dialog > .content { height: 170px; font-size: 0.9em; } .dialog > .content > .title { font-size: 1.3em; } .dialog > .button { width: 90px; float: right; } .card.image { background: url(http://lorempixel.com/300/240/nature/); color: #fff; } /* Misc */ .center { text-align: center; } .label { padding: 0 16px; } .label-blue { color: #4285f4; } .label-red { color: #d23f31; } </style> </head> <body> <section> <div class="button raised"> <div class="center" fit>SUBMIT</div> <paper-ripple></paper-ripple> </div> <div class="button raised" noink> <div class="center" fit>NO INK</div> <paper-ripple noink></paper-ripple> </div> <div class="button raised grey"> <div class="center" fit>CANCEL</div> <paper-ripple></paper-ripple> </div> <div class="button raised blue"> <div class="center" fit>COMPOSE</div> <paper-ripple></paper-ripple> </div> <div class="button raised green"> <div class="center" fit>OK</div> <paper-ripple></paper-ripple> </div> </section> <section> <div class="button raised grey narrow"> <div class="center" fit>+1</div> <paper-ripple></paper-ripple> </div> <div class="button raised grey narrow label-blue"> <div class="center" fit>+1</div> <paper-ripple></paper-ripple> </div> <div class="button raised grey narrow label-red"> <div class="center" fit>+1</div> <paper-ripple></paper-ripple> </div> </section> <section> <div class="icon-button"> <iron-icon icon="menu"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> <div class="icon-button"> <iron-icon icon="more-vert"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> <div class="icon-button red"> <iron-icon icon="delete"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> <div class="icon-button blue"> <iron-icon icon="account-box"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> </section> <section> <div class="fab red"> <iron-icon icon="add"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> <div class="fab blue"> <iron-icon icon="mail"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> <div class="fab green"> <iron-icon icon="create"></iron-icon> <paper-ripple class="circle" recenters></paper-ripple> </div> </section> <section> <div class="menu"> <div class="item"> <div class="label" fit>Mark as unread</div> <paper-ripple></paper-ripple> </div> <div class="item"> <div class="label" fit>Mark as important</div> <paper-ripple></paper-ripple> </div> <div class="item"> <div class="label" fit>Add to Tasks</div> <paper-ripple></paper-ripple> </div> <div class="item"> <div class="label" fit>Create event</div> <paper-ripple></paper-ripple> </div> </div> <div class="menu blue"> <div class="item"> <div class="label" fit>Import</div> <paper-ripple></paper-ripple> </div> <div class="item"> <div class="label" fit>Export</div> <paper-ripple></paper-ripple> </div> <div class="item"> <div class="label" fit>Print</div> <paper-ripple></paper-ripple> </div> <div class="item"> <div class="label" fit>Restore contacts</div> <paper-ripple></paper-ripple> </div> </div> </section> <section> <div class="dialog"> <div class="content"> <div class="title">Permission</div><br> <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> </div> <div class="button label-blue"> <div class="center" fit>ACCEPT</div> <paper-ripple></paper-ripple> </div> <div class="button"> <div class="center" fit>DECLINE</div> <paper-ripple></paper-ripple> </div> </div> <div class="card"> <paper-ripple recenters></paper-ripple> </div> <div class="card image"> <paper-ripple recenters></paper-ripple> </div> </section> </body> </html>