Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(40)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/components/paper-ripple/demo.html

Issue 582873003: Polymer elements added to third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/polymer/components/paper-ripple/bower.json ('k') | third_party/polymer/components/paper-ripple/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/components/paper-ripple/demo.html
diff --git a/third_party/polymer/components/paper-ripple/demo.html b/third_party/polymer/components/paper-ripple/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..baef84fc84555f35ab10110b3d7c40c511d764f1
--- /dev/null
+++ b/third_party/polymer/components/paper-ripple/demo.html
@@ -0,0 +1,409 @@
+<!doctype html>
+<html>
+<head>
+ <title>paper-ripple</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="../platform/platform.js"></script>
+
+ <link rel="import" href="../core-icons/core-icons.html">
+ <link rel="import" href="paper-ripple.html">
+ <link rel="import" href="../font-roboto/roboto.html">
+ <link rel="import" href="../core-icon/core-icon.html">
+
+ <style shim-shadowdom>
+
+ body {
+ background-color: #f9f9f9;
+ font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -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 > core-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 > core-icon {
+ -webkit-transform: scale(1.2);
+ transform: scale(1.2);
+ }
+
+ .icon-button > paper-ripple {
+ overflow: hidden;
+ color: #646464;
+ }
+
+ .icon-button.red > core-icon::shadow path {
+ fill: #db4437;
+ }
+
+ .icon-button.red > paper-ripple {
+ color: #db4437;
+ }
+
+ .icon-button.blue > core-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 > core-icon {
+ margin: 16px;
+ }
+
+ .fab > core-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 unresolved>
+
+ <section>
+
+ <div class="button raised">
+ <div class="center" fit>SUBMIT</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ <div class="button raised grey">
+ <div class="center" fit>CANCEL</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ <div class="button raised blue">
+ <div class="center" fit>COMPOSE</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ <div class="button raised green">
+ <div class="center" fit>OK</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ </section>
+
+ <section>
+
+ <div class="button raised grey narrow">
+ <div class="center" fit>+1</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ <div class="button raised grey narrow label-blue">
+ <div class="center" fit>+1</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ <div class="button raised grey narrow label-red">
+ <div class="center" fit>+1</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ </section>
+
+ <section>
+
+ <div class="icon-button">
+ <core-icon icon="menu"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ <div class="icon-button">
+ <core-icon icon="more-vert"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ <div class="icon-button red">
+ <core-icon icon="delete"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ <div class="icon-button blue">
+ <core-icon icon="account-box"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ </section>
+
+ <section>
+
+ <div class="fab red">
+ <core-icon icon="add"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ <div class="fab blue">
+ <core-icon icon="mail"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ <div class="fab green">
+ <core-icon icon="create"></core-icon>
+ <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
+ </div>
+
+ </section>
+
+ <section>
+
+ <div class="menu">
+
+ <div class="item">
+ <div class="label" fit>Mark as unread</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+ <div class="item">
+ <div class="label" fit>Mark as important</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+ <div class="item">
+ <div class="label" fit>Add to Tasks</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+ <div class="item">
+ <div class="label" fit>Create event</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ </div>
+
+ <div class="menu blue">
+
+ <div class="item">
+ <div class="label" fit>Import</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+ <div class="item">
+ <div class="label" fit>Export</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+ <div class="item">
+ <div class="label" fit>Print</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+ <div class="item">
+ <div class="label" fit>Restore contacts</div>
+ <paper-ripple fit></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 fit></paper-ripple>
+ </div>
+
+ <div class="button">
+ <div class="center" fit>DECLINE</div>
+ <paper-ripple fit></paper-ripple>
+ </div>
+
+ </div>
+
+ <div class="card">
+
+ <paper-ripple class="recenteringTouch" fit></paper-ripple>
+
+ </div>
+
+ <div class="card image">
+
+ <paper-ripple class="recenteringTouch" fit></paper-ripple>
+
+ </div>
+
+ </section>
+
+</body>
+</html>
« no previous file with comments | « third_party/polymer/components/paper-ripple/bower.json ('k') | third_party/polymer/components/paper-ripple/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698