Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(334)

Side by Side Diff: polymer_0.5.0/bower_components/paper-button/paper-button.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 --> 8 -->
9 9
10 <!-- 10 <!--
11 @group Paper Elements 11 @group Paper Elements
12 12
13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a> 13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>
14 14
15 `paper-button` is a button. When the user touches the button, a ripple effect em anates 15 `paper-button` is a button. When the user touches the button, a ripple effect em anates
16 from the point of contact. It may be flat or raised. A raised button is styled w ith a 16 from the point of contact. It may be flat or raised. A raised button is styled w ith a
17 shadow. 17 shadow.
18 18
19 Example: 19 Example:
20 20
21 <paper-button>flat button</paper-button> 21 <paper-button>flat button</paper-button>
22 <paper-button raised>raised button</paper-button> 22 <paper-button raised>raised button</paper-button>
23 <paper-button noink>No ripple effect</paper-button>
23 24
24 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to 25 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to
25 create a button with an icon and some text: 26 create a button with an icon and some text:
26 27
27 <paper-button> 28 <paper-button>
28 <core-icon icon="favorite"> 29 <core-icon icon="favorite"></core-icon>
29 custom button content 30 custom button content
30 </paper-button> 31 </paper-button>
31 32
32 Styling 33 Styling
33 ------- 34 -------
34 35
35 Style the button with CSS as you would a normal DOM element. 36 Style the button with CSS as you would a normal DOM element.
36 37
37 /* make #my-button green with yellow text */ 38 /* make #my-button green with yellow text */
38 #my-button { 39 #my-button {
(...skipping 10 matching lines...) Expand all
49 } 50 }
50 51
51 The opacity of the ripple is not customizable via CSS. 52 The opacity of the ripple is not customizable via CSS.
52 53
53 @element paper-button 54 @element paper-button
54 @extends paper-button-base 55 @extends paper-button-base
55 @status unstable 56 @status unstable
56 --> 57 -->
57 58
58 <link href="../polymer/polymer.html" rel="import"> 59 <link href="../polymer/polymer.html" rel="import">
59 <link href="../core-icon/core-icon.html" rel="import">
60 <link href="../paper-ripple/paper-ripple.html" rel="import">
61 <link href="../paper-shadow/paper-shadow.html" rel="import"> 60 <link href="../paper-shadow/paper-shadow.html" rel="import">
62 61
63 <link href="paper-button-base.html" rel="import"> 62 <link href="paper-button-base.html" rel="import">
64 63
65 <polymer-element name="paper-button" extends="paper-button-base" attributes="rai sed recenteringTouch fill" 64 <polymer-element name="paper-button" extends="paper-button-base" attributes="rai sed recenteringTouch fill"
66 role="button"> 65 role="button">
67 66
68 <template> 67 <template>
69 68
70 <style> 69 <style>
71 70
72 :host { 71 :host {
73 display: inline-block; 72 display: inline-block;
74 position: relative; 73 position: relative;
75 box-sizing: border-box; 74 box-sizing: border-box;
76 min-width: 5.14em; 75 min-width: 5.14em;
77 padding: 0.7em 0.57em;
78 margin: 0 0.29em; 76 margin: 0 0.29em;
79 background: transparent; 77 background: transparent;
80 text-align: center; 78 text-align: center;
81 font: inherit; 79 font: inherit;
82 text-transform: uppercase; 80 text-transform: uppercase;
83 outline: none; 81 outline: none;
84 border-radius: 3px; 82 border-radius: 3px;
83 -moz-user-select: none;
84 -ms-user-select: none;
85 -webkit-user-select: none; 85 -webkit-user-select: none;
86 user-select: none; 86 user-select: none;
87 cursor: pointer; 87 cursor: pointer;
88 z-index: 0; 88 z-index: 0;
89 } 89 }
90 90
91 :host([disabled]) { 91 :host([disabled]) {
92 background: #eaeaea !important; 92 background: #eaeaea;
93 color: #a8a8a8 !important; 93 color: #a8a8a8;
94 cursor: auto; 94 cursor: auto;
95 pointer-events: none; 95 pointer-events: none;
96 } 96 }
97 97
98 ::content * { 98 ::content * {
99 text-transform: inherit; 99 text-transform: inherit;
100 } 100 }
101 101
102 #shadow {
103 border-radius: inherit;
104 }
105
102 #ripple { 106 #ripple {
103 pointer-events: none; 107 pointer-events: none;
104 z-index: -1; 108 z-index: -1;
105 } 109 }
106 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 /* flex */
120 -ms-flex: 1 1 0.000000001px;
121 -webkit-flex: 1;
122 flex: 1;
123 -webkit-flex-basis: 0.000000001px;
124 flex-basis: 0.000000001px;
125 }
126
107 </style> 127 </style>
108 128
109 <template if="{{raisedButton || raised}}"> 129 <template if="{{raised}}">
110 <paper-shadow id="shadow" z="{{z}}" animated></paper-shadow> 130 <paper-shadow id="shadow" fit animated></paper-shadow>
111 </template> 131 </template>
112 132
113 <!-- this div is needed to position the ripple behind text content --> 133 <!-- this div is needed to position the ripple behind text content -->
114 <div relative> 134 <div class="button-content" relative layout horizontal center-center>
115 <content></content> 135 <content></content>
116 {{label}}
117 </div> 136 </div>
118 137
119 </template> 138 </template>
120 139
121 <script> 140 <script>
122 Polymer({ 141 Polymer({
123 142
124 publish: { 143 publish: {
125 144
126 label: '',
127
128 /** 145 /**
129 * If true, the button will be styled with a shadow. 146 * If true, the button will be styled with a shadow.
130 * 147 *
131 * @attribute raised 148 * @attribute raised
132 * @type boolean 149 * @type boolean
133 * @default false 150 * @default false
134 */ 151 */
135 raised: false, 152 raised: false,
136 raisedButton: false,
137 153
138 /** 154 /**
139 * By default the ripple emanates from where the user touched the button . 155 * By default the ripple emanates from where the user touched the button .
140 * Set this to true to always center the ripple. 156 * Set this to true to always center the ripple.
141 * 157 *
142 * @attribute recenteringTouch 158 * @attribute recenteringTouch
143 * @type boolean 159 * @type boolean
144 * @default false 160 * @default false
145 */ 161 */
146 recenteringTouch: false, 162 recenteringTouch: false,
147 163
148 /** 164 /**
149 * By default the ripple expands to fill the button. Set this to true to 165 * By default the ripple expands to fill the button. Set this to true to
150 * constrain the ripple to a circle within the button. 166 * constrain the ripple to a circle within the button.
151 * 167 *
152 * @attribute fill 168 * @attribute fill
153 * @type boolean 169 * @type boolean
154 * @default true 170 * @default true
155 */ 171 */
156 fill: true 172 fill: true
157 173
158 },
159
160 labelChanged: function() {
161 if (this.label) {
162 console.warn('The "label" property is deprecated.');
163 }
164 },
165
166 raisedButtonChanged: function() {
167 if (this.raisedButton) {
168 console.warn('The "raisedButton" property is deprecated.');
169 }
170 } 174 }
171 175
172 }); 176 });
173 </script> 177 </script>
174 </polymer-element> 178 </polymer-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698