third_party/polymer/v1_0/components-chromium/paper-button/paper-button.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-material/paper-material.html">
  11 <link rel="import" href="../paper-ripple/paper-ripple.html">
  12 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
  13
  14 <!--
  15
  16 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
  17
  18 `paper-button` is a button. When the user touches the button, a ripple effect emanates
  19 from the point of contact. It may be flat or raised. A raised button is styled with a
  20 shadow.
  21
  22 Example:
  23
  24     <paper-button>flat button</paper-button>
  25     <paper-button raised>raised button</paper-button>
  26     <paper-button noink>No ripple effect</paper-button>
  27     <paper-button toggles>toggle-able button</paper-button>
  28
  29 A button that has `toggles` true will remain `active` after being clicked (and
  30 will have an `active` attribute set). For more information, see the `Polymer.IronButtonState`
  31 behavior.
  32
  33 You may use custom DOM in the button body to create a variety of buttons. For example, to
  34 create a button with an icon and some text:
  35
  36     <paper-button>
  37       <iron-icon icon="favorite"></iron-icon>
  38       custom button content
  39     </paper-button>
  40
  41 ### Styling
  42
  43 Style the button with CSS as you would a normal DOM element.
  44
  45     /* make #my-button green with yellow text */
  46     #my-button {
  47         background: green;
  48         color: yellow;
  49     }
  50
  51 By default, the ripple is the same color as the foreground at 25% opacity. You may
  52 customize the color using this selector:
  53
  54     /* make #my-button use a blue ripple instead of foreground color */
  55     #my-button::shadow paper-ripple {
  56       color: blue;
  57     }
  58
  59 The opacity of the ripple is not customizable via CSS.
  60
  61 The following custom properties and mixins are also available for styling:
  62
  63 Custom property | Description | Default
  64 ----------------|-------------|----------
  65 `--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
  66 `--paper-button` | Mixin applied to the button | `{}`
  67 `--paper-button-disabled` | Mixin applied to the disabled button | `{}`
  68
  69 @demo demo/index.html
  70 -->
  71
  72 </head><body><dom-module id="paper-button">
  73
  74   <style>
  75
  76     :host {
  77       display: inline-block;
  78       position: relative;
  79       box-sizing: border-box;
  80       min-width: 5.14em;
  81       margin: 0 0.29em;
  82       background: transparent;
  83       text-align: center;
  84       font: inherit;
  85       text-transform: uppercase;
  86       outline: none;
  87       border-radius: 3px;
  88       -moz-user-select: none;
  89       -ms-user-select: none;
  90       -webkit-user-select: none;
  91       user-select: none;
  92       cursor: pointer;
  93       z-index: 0;
  94
  95       @apply(--paper-button);
  96     }
  97
  98     .keyboard-focus {
  99       font-weight: bold;
 100     }
 101
 102     :host([disabled]) {
 103       background: #eaeaea;
 104       color: #a8a8a8;
 105       cursor: auto;
 106       pointer-events: none;
 107
 108       @apply(--paper-button-disabled);
 109     }
 110
 111     :host([noink]) paper-ripple {
 112       display: none;
 113     }
 114
 115     paper-material {
 116       border-radius: inherit;
 117     }
 118
 119     .content > ::content * {
 120       text-transform: inherit;
 121     }
 122
 123     .content {
 124       padding: 0.7em 0.57em
 125     }
 126   </style>
 127
 128   <template>
 129
 130     <paper-ripple></paper-ripple>
 131
 132     <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated="">
 133       <content></content>
 134     </paper-material>
 135
 136   </template>
 137
 138 </dom-module>
 139
 140 <script src="paper-button-extracted.js"></script></body></html>