1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11@group Paper Elements
12
13Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
14
15`paper-button` is a button. When the user touches the button, a ripple effect emanates
16from the point of contact. It may be flat or raised. A raised button is styled with a
17shadow.
18
19Example:
20
21    <paper-button>flat button</paper-button>
22    <paper-button raised>raised button</paper-button>
23    <paper-button noink>No ripple effect</paper-button>
24
25You may use custom DOM in the button body to create a variety of buttons. For example, to
26create a button with an icon and some text:
27
28    <paper-button>
29      <core-icon icon="favorite"></core-icon>
30      custom button content
31    </paper-button>
32
33## Styling
34
35Style the button with CSS as you would a normal DOM element.
36
37    /* make #my-button green with yellow text */
38    #my-button {
39        background: green;
40        color: yellow;
41    }
42
43By default, the ripple is the same color as the foreground at 25% opacity. You may
44customize the color using this selector:
45
46    /* make #my-button use a blue ripple instead of foreground color */
47    #my-button::shadow #ripple {
48      color: blue;
49    }
50
51The opacity of the ripple is not customizable via CSS.
52
53@element paper-button
54@extends paper-button-base
55@status unstable
56-->
57
58<link href="../polymer/polymer.html" rel="import">
59<link href="../paper-shadow/paper-shadow.html" rel="import">
60<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
61
62<link href="paper-button-base.html" rel="import">
63
64<polymer-element name="paper-button" extends="paper-button-base" attributes="raised recenteringTouch fill"
65role="button">
66
67  <template>
68
69    <style>
70
71      :host {
72        display: inline-block;
73        position: relative;
74        box-sizing: border-box;
75        min-width: 5.14em;
76        margin: 0 0.29em;
77        background: transparent;
78        text-align: center;
79        font: inherit;
80        text-transform: uppercase;
81        outline: none;
82        border-radius: 3px;
83        -moz-user-select: none;
84        -ms-user-select: none;
85        -webkit-user-select: none;
86        user-select: none;
87        cursor: pointer;
88        z-index: 0;
89      }
90
91      :host([disabled]) {
92        background: #eaeaea;
93        color: #a8a8a8;
94        cursor: auto;
95        pointer-events: none;
96      }
97
98      ::content * {
99        text-transform: inherit;
100      }
101
102      #bg, #shadow {
103        border-radius: inherit;
104      }
105
106      #ripple {
107        pointer-events: none;
108        z-index: -1;
109      }
110
111      .button-content {
112        padding: 0.7em 0.57em
113      }
114
115      polyfill-next-selector { content: '.button-content > a'; }
116      ::content > a {
117        height: 100%;
118        padding: 0.7em 0.57em;
119        margin: -0.7em -0.57em;
120        /* flex */
121        -ms-flex: 1 1 0.000000001px;
122        -webkit-flex: 1;
123        flex: 1;
124        -webkit-flex-basis: 0.000000001px;
125        flex-basis: 0.000000001px;
126      }
127
128    </style>
129
130    <template if="{{raised}}">
131      <paper-shadow id="shadow" fit animated></paper-shadow>
132    </template>
133
134    <!-- this div is needed to position the ripple behind text content -->
135    <div class="button-content" relative layout horizontal center-center>
136      <content></content>
137    </div>
138
139    <core-a11y-keys keys="space enter" target="{{}}" on-keys-pressed="{{_activate}}"></core-a11y-keys>
140
141  </template>
142
143  <script>
144    Polymer({
145
146      publish: {
147
148        /**
149         * If true, the button will be styled with a shadow.
150         *
151         * @attribute raised
152         * @type boolean
153         * @default false
154         */
155        raised: false,
156
157        /**
158         * By default the ripple emanates from where the user touched the button.
159         * Set this to true to always center the ripple.
160         *
161         * @attribute recenteringTouch
162         * @type boolean
163         * @default false
164         */
165        recenteringTouch: false,
166
167        /**
168         * By default the ripple expands to fill the button. Set this to true to
169         * constrain the ripple to a circle within the button.
170         *
171         * @attribute fill
172         * @type boolean
173         * @default true
174         */
175        fill: true
176
177      },
178
179      _activate: function() {
180        this.click();
181        this.fire('tap');
182        if (!this.pressed) {
183          var bcr = this.getBoundingClientRect();
184          var x = bcr.left + (bcr.width / 2);
185          var y = bcr.top + (bcr.height / 2);
186          this.downAction({x: x, y: y});
187          var fn = function fn() {
188            this.upAction();
189            this.removeEventListener('keyup', fn);
190          }.bind(this);
191          this.addEventListener('keyup', fn);
192        }
193      }
194
195    });
196  </script>
197</polymer-element>
198