src/third_party/polymer/components-chromium/paper-button/demo.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
  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
  14   <title>paper-button</title>
  15
  16   <script src="../platform/platform.js"></script>
  17
  18   <link href="../font-roboto/roboto.html" rel="import">
  19   <link href="../core-icons/core-icons.html" rel="import">
  20   <link href="paper-button.html" rel="import">
  21
  22   <style shim-shadowdom>
  23     body {
  24       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  25       margin: 0;
  26       padding: 24px;
  27       -webkit-user-select: none;
  28       -moz-user-select: none;
  29       -ms-user-select: none;
  30       user-select: none;
  31       -webkit-tap-highlight-color: rgba(0,0,0,0);
  32       -webkit-touch-callout: none;
  33       transform: translateZ(0);
  34       -webkit-transform: translateZ(0);
  35     }
  36
  37     section {
  38       padding: 20px 0;
  39     }
  40
  41     section > div {
  42       padding: 14px;:width;
  43     }
  44
  45     paper-button {
  46       margin: 1em;
  47       width: 10em;
  48     }
  49
  50     paper-button.colored {
  51       color: #4285f4;
  52       fill: #4285f4;
  53     }
  54
  55     paper-button[raisedButton].colored {
  56       background: #4285f4;
  57       color: #fff;
  58     }
  59
  60     paper-button[raisedButton].colored #ripple,
  61     paper-button[raisedButton].colored::shadow #ripple {
  62       color: #2a56c6;
  63     }
  64
  65     paper-button[raisedButton].colored #focusBg,
  66     paper-button[raisedButton].colored::shadow #focusBg {
  67       background: #3367d6;
  68     }
  69
  70   </style>
  71 </head>
  72 <body unresolved>
  73
  74   <section>
  75
  76     <div>Flat buttons</div>
  77
  78     <paper-button label="button"></paper-button>
  79     <paper-button class="colored" label="colored"></paper-button>
  80     <!-- <paper-button focused label="focused"></paper-button> -->
  81     <paper-button disabled label="disabled" onclick="alert('should not be clickable');"></paper-button>
  82
  83   </section>
  84
  85   <br>
  86
  87   <section>
  88
  89     <div>Raised buttons</div>
  90
  91     <paper-button raisedButton label="button"></paper-button>
  92     <paper-button raisedButton class="colored" label="colored"></paper-button>
  93     <!-- <paper-button raisedButton focused label="focused"></paper-button> -->
  94     <paper-button raisedButton disabled label="disabled" onclick="alert('should not be clickable');"></paper-button>
  95
  96   </section>
  97
  98 </body>
  99 </html>