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

Side by Side Diff: third_party/polymer/v0_8/components/paper-button/paper-button.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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.g ithub.io/LICENSE 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS 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/CONTRI BUTORS 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-material/paper-material.html">
13 <link rel="import" href="../paper-ripple/paper-ripple.html">
14 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
15
11 <!-- 16 <!--
12 17
13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a> 18 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>
14 19
15 `paper-button` is a button. When the user touches the button, a ripple effect em anates 20 `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 21 from the point of contact. It may be flat or raised. A raised button is styled w ith a
17 shadow. 22 shadow.
18 23
19 Example: 24 Example:
20 25
21 <paper-button>flat button</paper-button> 26 <paper-button>flat button</paper-button>
22 <paper-button raised>raised button</paper-button> 27 <paper-button raised>raised button</paper-button>
23 <paper-button noink>No ripple effect</paper-button> 28 <paper-button noink>No ripple effect</paper-button>
24 29
25 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to 30 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to
26 create a button with an icon and some text: 31 create a button with an icon and some text:
27 32
28 <paper-button> 33 <paper-button>
29 <core-icon icon="favorite"></core-icon> 34 <core-icon icon="favorite"></core-icon>
30 custom button content 35 custom button content
31 </paper-button> 36 </paper-button>
32 37
33 ## Styling 38 ### Styling
34 39
35 Style the button with CSS as you would a normal DOM element. 40 Style the button with CSS as you would a normal DOM element.
36 41
37 /* make #my-button green with yellow text */ 42 /* make #my-button green with yellow text */
38 #my-button { 43 #my-button {
39 background: green; 44 background: green;
40 color: yellow; 45 color: yellow;
41 } 46 }
42 47
43 By default, the ripple is the same color as the foreground at 25% opacity. You m ay 48 By default, the ripple is the same color as the foreground at 25% opacity. You m ay
44 customize the color using this selector: 49 customize the color using this selector:
45 50
46 /* make #my-button use a blue ripple instead of foreground color */ 51 /* make #my-button use a blue ripple instead of foreground color */
47 #my-button::shadow paper-ripple { 52 #my-button::shadow paper-ripple {
48 color: blue; 53 color: blue;
49 } 54 }
50 55
51 The opacity of the ripple is not customizable via CSS. 56 The opacity of the ripple is not customizable via CSS.
52 57
58 The following custom properties and mixins are also available for styling:
59
60 Custom property | Description | Default
61 ----------------|-------------|----------
62 `--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
63 `--paper-button` | Mixin applied to the button | `{}`
64 `--paper-button-disabled` | Mixin applied to the disabled button | `{}`
65
66 @demo demo/index.html
53 --> 67 -->
54 68
55 <link rel="import" href="../polymer/polymer.html">
56 <link rel="import" href="../paper-material/paper-material.html">
57 <link rel="import" href="../paper-ripple/paper-ripple.html">
58
59 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
60
61 <dom-module id="paper-button"> 69 <dom-module id="paper-button">
62 70
63 <style> 71 <style>
64 72
65 :host { 73 :host {
66 display: inline-block; 74 display: inline-block;
67 position: relative; 75 position: relative;
68 box-sizing: border-box; 76 box-sizing: border-box;
69 min-width: 5.14em; 77 min-width: 5.14em;
70 margin: 0 0.29em; 78 margin: 0 0.29em;
71 background: transparent; 79 background: transparent;
72 text-align: center; 80 text-align: center;
73 font: inherit; 81 font: inherit;
74 text-transform: uppercase; 82 text-transform: uppercase;
75 outline: none; 83 outline: none;
76 border-radius: 3px; 84 border-radius: 3px;
77 -moz-user-select: none; 85 -moz-user-select: none;
78 -ms-user-select: none; 86 -ms-user-select: none;
79 -webkit-user-select: none; 87 -webkit-user-select: none;
80 user-select: none; 88 user-select: none;
81 cursor: pointer; 89 cursor: pointer;
82 z-index: 0; 90 z-index: 0;
91
92 @apply(--paper-button);
93 }
94
95 .keyboard-focus {
96 font-weight: bold;
83 } 97 }
84 98
85 :host([disabled]) { 99 :host([disabled]) {
86 background: #eaeaea; 100 background: #eaeaea;
87 color: #a8a8a8; 101 color: #a8a8a8;
88 cursor: auto; 102 cursor: auto;
89 pointer-events: none; 103 pointer-events: none;
104
105 @apply(--paper-button-disabled);
90 } 106 }
91 107
92 :host([noink]) paper-ripple { 108 :host([noink]) paper-ripple {
93 display: none; 109 display: none;
94 } 110 }
95 111
96 paper-material { 112 paper-material {
97 border-radius: inherit; 113 border-radius: inherit;
98 } 114 }
99 115
100 .content > ::content * { 116 .content > ::content * {
101 text-transform: inherit; 117 text-transform: inherit;
102 } 118 }
103 119
104 .content { 120 .content {
105 padding: 0.7em 0.57em 121 padding: 0.7em 0.57em
106 } 122 }
107 </style> 123 </style>
108 124
109 <template> 125 <template>
110 126
111 <paper-ripple></paper-ripple> 127 <paper-ripple></paper-ripple>
112 128
113 <paper-material class="content" elevation="[[_elevation]]" animated> 129 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
114 <content></content> 130 <content></content>
115 </paper-material> 131 </paper-material>
116 132
117 </template> 133 </template>
118 134
119 </dom-module> 135 </dom-module>
120 136
121 <script> 137 <script>
122 138
123 Polymer({ 139 Polymer({
124 140
125 is: 'paper-button', 141 is: 'paper-button',
126 142
127 behaviors: [ 143 behaviors: [
128 Polymer.PaperButtonBehavior 144 Polymer.PaperButtonBehavior
129 ], 145 ],
130 146
131 properties: { 147 properties: {
132 148
133 /** 149 /**
134 * If true, the button should be styled with a shadow. 150 * If true, the button should be styled with a shadow.
135 *
136 * @attribute raised
137 * @type boolean
138 * @default false
139 */ 151 */
140 raised: { 152 raised: {
141 type: Boolean, 153 type: Boolean,
142 reflectToAttribute: true, 154 reflectToAttribute: true,
143 value: false, 155 value: false,
144 observer: '_buttonStateChanged' 156 observer: '_calculateElevation'
145 }
146
147 },
148
149 ready: function() {
150 if (!this.hasAttribute('role')) {
151 this.setAttribute('role', 'button');
152 } 157 }
153 }, 158 },
154 159
155 _buttonStateChanged: function() { 160 _calculateElevation: function() {
156 this._calculateElevation(); 161 if (!this.raised) {
162 this._elevation = 0;
163 } else {
164 Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
165 }
166 },
167
168 _computeContentClass: function(receivedFocusFromKeyboard) {
169 var className = 'content ';
170 if (receivedFocusFromKeyboard) {
171 className += ' keyboard-focus';
172 }
173 return className;
157 } 174 }
158
159 }); 175 });
160 176
161 </script> 177 </script>
162
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698