diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-ripple/demo/index.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-ripple/demo/index.html | 415 |
1 files changed, 415 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-ripple/demo/index.html b/catapult/third_party/polymer/components/paper-ripple/demo/index.html new file mode 100644 index 00000000..e12cde5c --- /dev/null +++ b/catapult/third_party/polymer/components/paper-ripple/demo/index.html @@ -0,0 +1,415 @@ +<!-- +@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/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 tabindex="1">SUBMIT</div> + <paper-ripple></paper-ripple> + </div> + + <div class="button raised" noink> + <div class="center" fit tabindex="1">NO INK</div> + <paper-ripple noink></paper-ripple> + </div> + + <div class="button raised grey"> + <div class="center" fit tabindex="1">CANCEL</div> + <paper-ripple></paper-ripple> + </div> + + <div class="button raised blue"> + <div class="center" fit tabindex="1">COMPOSE</div> + <paper-ripple></paper-ripple> + </div> + + <div class="button raised green"> + <div class="center" fit tabindex="1">OK</div> + <paper-ripple></paper-ripple> + </div> + + </section> + + <section> + + <div class="button raised grey narrow"> + <div class="center" fit tabindex="1">+1</div> + <paper-ripple></paper-ripple> + </div> + + <div class="button raised grey narrow label-blue"> + <div class="center" fit tabindex="1">+1</div> + <paper-ripple></paper-ripple> + </div> + + <div class="button raised grey narrow label-red"> + <div class="center" fit tabindex="1">+1</div> + <paper-ripple></paper-ripple> + </div> + + </section> + + <section> + + <div class="icon-button"> + <iron-icon icon="menu" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + <div class="icon-button"> + <iron-icon icon="more-vert" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + <div class="icon-button red"> + <iron-icon icon="delete" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + <div class="icon-button blue"> + <iron-icon icon="account-box" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + </section> + + <section> + + <div class="fab red"> + <iron-icon icon="add" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + <div class="fab blue"> + <iron-icon icon="mail" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + <div class="fab green"> + <iron-icon icon="create" tabindex="1"></iron-icon> + <paper-ripple class="circle" recenters></paper-ripple> + </div> + + </section> + + <section> + + <div class="menu"> + + <div class="item"> + <div class="label" fit tabindex="1">Mark as unread</div> + <paper-ripple></paper-ripple> + </div> + <div class="item"> + <div class="label" fit tabindex="1">Mark as important</div> + <paper-ripple></paper-ripple> + </div> + <div class="item"> + <div class="label" fit tabindex="1">Add to Tasks</div> + <paper-ripple></paper-ripple> + </div> + <div class="item"> + <div class="label" fit tabindex="1">Create event</div> + <paper-ripple></paper-ripple> + </div> + + </div> + + <div class="menu blue"> + + <div class="item"> + <div class="label" fit tabindex="1">Import</div> + <paper-ripple></paper-ripple> + </div> + <div class="item"> + <div class="label" fit tabindex="1">Export</div> + <paper-ripple></paper-ripple> + </div> + <div class="item"> + <div class="label" fit tabindex="1">Print</div> + <paper-ripple></paper-ripple> + </div> + <div class="item"> + <div class="label" fit tabindex="1">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 tabindex="1">ACCEPT</div> + <paper-ripple></paper-ripple> + </div> + + <div class="button"> + <div class="center" fit tabindex="1">DECLINE</div> + <paper-ripple></paper-ripple> + </div> + + </div> + + <div class="card" tabindex="1"> + <paper-ripple recenters></paper-ripple> + </div> + + <div class="card image" tabindex="1"> + <paper-ripple recenters></paper-ripple> + </div> + + </section> + +</body> +</html> |