src/third_party/polymer/components/paper-button/demo2.html

   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>