Home | History | Annotate | Download | only in paper-button 
      1 <!doctype html>
      2 <!--
      3 Copyright 2013 The Polymer Authors. All rights reserved.
      4 Use of this source code is governed by a BSD-style
      5 license that can be found in the LICENSE file.
      6 -->
      7 <html>
      8 <head>
      9   <title>paper-button</title>
     10   <meta charset="utf-8">
     11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     12   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     13   <script src="../platform/platform.js"></script>
     14   <link href="../font-roboto/roboto.html" rel="import">
     15   <link href="../core-icons/core-icons.html" rel="import">
     16   <link href="paper-button.html" rel="import">
     17   <style shim-shadowdom>
     18     body {
     19       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
     20       font-size: 14px;
     21       text-align: center;
     22       padding: 1em 2em;
     23       transform: translateZ(0);
     24       -webkit-transform: translateZ(0);
     25       transform: translateZ(0);
     26     }
     27     h1 {
     28       margin-bottom: 2em;
     29     }
     30 
     31     section {
     32       display: inline-block;
     33       background: #f7f7f7;
     34       border-radius: 3px;
     35       width: 25%;
     36       text-align: center;
     37       margin: 1%;
     38       padding: 1em;
     39     }
     40 
     41     paper-button {
     42       margin: 1em;
     43       width: 10em;
     44     }
     45 
     46     paper-button.colored {
     47       color: #4285f4;
     48       fill: #4285f4;
     49     }
     50 
     51     paper-button[raisedButton].colored {
     52       background: #4285f4;
     53       color: #fff;
     54     }
     55     paper-button[raisedButton].colored.hover:hover {
     56       background: #3367d6;
     57     }
     58     paper-button[raisedButton].colored::shadow #ripple {
     59       color: #2a56c6;
     60     }
     61     paper-button[raisedButton].colored::shadow #focusBg {
     62       background: #3367d6;
     63     }
     64 
     65     .label {
     66       text-align: left;
     67       color: #bbb;
     68       font-size: 12px;
     69       margin-top: 2em;
     70     }
     71   </style>
     72 </head>
     73 <body unresolved>
     74 
     75   <h1>&lt;paper-button&gt;</h1>
     76 
     77   <section>
     78     <paper-button label="button"></paper-button>
     79     <br>
     80     <paper-button class="colored" label="colored"></paper-button>
     81     <br>
     82     <paper-button disabled label="disabled"></paper-button>
     83     <br>
     84     <div class="label">flat</div>
     85   </section>
     86 
     87   <section>
     88     <paper-button raisedButton label="button"></paper-button>
     89     <br>
     90     <paper-button raisedButton class="colored" label="colored"></paper-button>
     91     <br>
     92     <paper-button raisedButton disabled label="disabled"></paper-button>
     93     <br>
     94     <div class="label">raised</div>
     95   </section>
     96 
     97   <br>
     98   <br>
     99 
    100   <section>
    101     <paper-button class="hover" label="button"></paper-button>
    102     <br>
    103     <paper-button class="colored hover" label="colored"></paper-button>
    104     <br>
    105     <div class="label">flat + hover state</div>
    106   </section>
    107 
    108   <section>
    109     <paper-button raisedButton class="hover" label="button"></paper-button>
    110     <br>
    111     <paper-button raisedButton class="colored hover" label="colored"></paper-button>
    112     <br>
    113     <div class="label">raised + hover state</div>
    114   </section>
    115 
    116   <br>
    117   <br>
    118 
    119   <section>
    120     <paper-button focused label="button"></paper-button>
    121     <br>
    122     <paper-button focused class="colored" label="colored"></paper-button>
    123     <br>
    124     <div class="label">flat + focused</div>
    125   </section>
    126 
    127   <section>
    128     <paper-button raisedButton focused label="button"></paper-button>
    129     <br>
    130     <paper-button raisedButton focused class="colored" label="colored"></paper-button>
    131     <br>
    132     <div class="label">raised + focused</div>
    133   </section>
    134 
    135 </body>
    136 </html>
    137