| <!doctype html> |
| <!-- |
| Copyright 2013 The Polymer Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style |
| license that can be found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <title>paper-button</title> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <script src="../platform/platform.js"></script> |
| <link href="../font-roboto/roboto.html" rel="import"> |
| <link href="../core-icons/core-icons.html" rel="import"> |
| <link href="paper-button.html" rel="import"> |
| <style shim-shadowdom> |
| body { |
| font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; |
| font-size: 14px; |
| text-align: center; |
| padding: 1em 2em; |
| transform: translateZ(0); |
| -webkit-transform: translateZ(0); |
| transform: translateZ(0); |
| } |
| h1 { |
| margin-bottom: 2em; |
| } |
| |
| section { |
| display: inline-block; |
| background: #f7f7f7; |
| border-radius: 3px; |
| width: 25%; |
| text-align: center; |
| margin: 1%; |
| padding: 1em; |
| } |
| |
| paper-button { |
| margin: 1em; |
| width: 10em; |
| } |
| |
| paper-button.colored { |
| color: #4285f4; |
| fill: #4285f4; |
| } |
| |
| paper-button[raisedButton].colored { |
| background: #4285f4; |
| color: #fff; |
| } |
| paper-button[raisedButton].colored.hover:hover { |
| background: #3367d6; |
| } |
| paper-button[raisedButton].colored::shadow #ripple { |
| color: #2a56c6; |
| } |
| paper-button[raisedButton].colored::shadow #focusBg { |
| background: #3367d6; |
| } |
| |
| .label { |
| text-align: left; |
| color: #bbb; |
| font-size: 12px; |
| margin-top: 2em; |
| } |
| </style> |
| </head> |
| <body unresolved> |
| |
| <h1><paper-button></h1> |
| |
| <section> |
| <paper-button label="button"></paper-button> |
| <br> |
| <paper-button class="colored" label="colored"></paper-button> |
| <br> |
| <paper-button disabled label="disabled"></paper-button> |
| <br> |
| <div class="label">flat</div> |
| </section> |
| |
| <section> |
| <paper-button raisedButton label="button"></paper-button> |
| <br> |
| <paper-button raisedButton class="colored" label="colored"></paper-button> |
| <br> |
| <paper-button raisedButton disabled label="disabled"></paper-button> |
| <br> |
| <div class="label">raised</div> |
| </section> |
| |
| <br> |
| <br> |
| |
| <section> |
| <paper-button class="hover" label="button"></paper-button> |
| <br> |
| <paper-button class="colored hover" label="colored"></paper-button> |
| <br> |
| <div class="label">flat + hover state</div> |
| </section> |
| |
| <section> |
| <paper-button raisedButton class="hover" label="button"></paper-button> |
| <br> |
| <paper-button raisedButton class="colored hover" label="colored"></paper-button> |
| <br> |
| <div class="label">raised + hover state</div> |
| </section> |
| |
| <br> |
| <br> |
| |
| <section> |
| <paper-button focused label="button"></paper-button> |
| <br> |
| <paper-button focused class="colored" label="colored"></paper-button> |
| <br> |
| <div class="label">flat + focused</div> |
| </section> |
| |
| <section> |
| <paper-button raisedButton focused label="button"></paper-button> |
| <br> |
| <paper-button raisedButton focused class="colored" label="colored"></paper-button> |
| <br> |
| <div class="label">raised + focused</div> |
| </section> |
| |
| </body> |
| </html> |
