1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
13<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
14<link rel="import" href="../paper-material/paper-material-shared-styles.html">
15
16<!--
17Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
18
19`paper-button` is a button. When the user touches the button, a ripple effect emanates
20from the point of contact. It may be flat or raised. A raised button is styled with a
21shadow.
22
23Example:
24
25    <paper-button>Flat button</paper-button>
26    <paper-button raised>Raised button</paper-button>
27    <paper-button noink>No ripple effect</paper-button>
28    <paper-button toggles>Toggle-able button</paper-button>
29
30A button that has `toggles` true will remain `active` after being clicked (and
31will have an `active` attribute set). For more information, see the `Polymer.IronButtonState`
32behavior.
33
34You may use custom DOM in the button body to create a variety of buttons. For example, to
35create a button with an icon and some text:
36
37    <paper-button>
38      <iron-icon icon="favorite"></iron-icon>
39      custom button content
40    </paper-button>
41
42To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button` will already
43receive focus, you may want to prevent the anchor tag from receiving focus as well by setting
44its tabindex to -1.
45
46    <a href="https://www.polymer-project.org/" tabindex="-1">
47      <paper-button raised>Polymer Project</paper-button>
48    </a>
49
50### Styling
51
52Style the button with CSS as you would a normal DOM element.
53
54    paper-button.fancy {
55      background: green;
56      color: yellow;
57    }
58
59    paper-button.fancy:hover {
60      background: lime;
61    }
62
63    paper-button[disabled],
64    paper-button[toggles][active] {
65      background: red;
66    }
67
68By default, the ripple is the same color as the foreground at 25% opacity. You may
69customize the color using the `--paper-button-ink-color` custom property.
70
71The following custom properties and mixins are also available for styling:
72
73Custom property | Description | Default
74----------------|-------------|----------
75`--paper-button-ink-color` | Background color of the ripple | `Based on the button's color`
76`--paper-button` | Mixin applied to the button | `{}`
77`--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}`
78`--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}`
79`--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}`
80
81@demo demo/index.html
82-->
83
84<dom-module id="paper-button">
85  <template strip-whitespace>
86    <style include="paper-material-shared-styles">
87      :host {
88        @apply(--layout-inline);
89        @apply(--layout-center-center);
90        position: relative;
91        box-sizing: border-box;
92        min-width: 5.14em;
93        margin: 0 0.29em;
94        background: transparent;
95        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
96        -webkit-tap-highlight-color: transparent;
97        font: inherit;
98        text-transform: uppercase;
99        outline-width: 0;
100        border-radius: 3px;
101        -moz-user-select: none;
102        -ms-user-select: none;
103        -webkit-user-select: none;
104        user-select: none;
105        cursor: pointer;
106        z-index: 0;
107        padding: 0.7em 0.57em;
108
109        @apply(--paper-font-common-base);
110        @apply(--paper-button);
111      }
112
113      :host([hidden]) {
114        display: none !important;
115      }
116
117      :host([raised].keyboard-focus) {
118        font-weight: bold;
119        @apply(--paper-button-raised-keyboard-focus);
120      }
121
122      :host(:not([raised]).keyboard-focus) {
123        font-weight: bold;
124        @apply(--paper-button-flat-keyboard-focus);
125      }
126
127      :host([disabled]) {
128        background: #eaeaea;
129        color: #a8a8a8;
130        cursor: auto;
131        pointer-events: none;
132
133        @apply(--paper-button-disabled);
134      }
135
136      :host([animated]) {
137        @apply(--shadow-transition);
138      }
139
140      paper-ripple {
141        color: var(--paper-button-ink-color);
142      }
143    </style>
144
145    <content></content>
146  </template>
147
148</dom-module>
149<script>
150Polymer({
151  is: 'paper-button',
152
153  behaviors: [
154    Polymer.PaperButtonBehavior
155  ],
156
157  properties: {
158    /**
159      * If true, the button should be styled with a shadow.
160      */
161    raised: {
162      type: Boolean,
163      reflectToAttribute: true,
164      value: false,
165      observer: '_calculateElevation'
166    }
167  },
168
169  _calculateElevation: function() {
170    if (!this.raised) {
171      this._setElevation(0);
172    } else {
173      Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
174    }
175  }
176
177  /**
178  Fired when the animation finishes.
179  This is useful if you want to wait until
180  the ripple animation finishes to perform some action.
181
182  @event transitionend
183  Event param: {{node: Object}} detail Contains the animated node.
184  */
185});
186</script>
187