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

Side by Side Diff: lib/src/paper-button/paper-button.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month 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"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-material/paper-material.html"> 12 <link rel="import" href="../paper-material/paper-material.html">
13 <link rel="import" href="../paper-ripple/paper-ripple.html"> 13 <link rel="import" href="../paper-ripple/paper-ripple.html">
14 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> 14 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
15 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 15 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
16 16
17 <!-- 17 <!--
18 18 Material design: [Buttons](https://www.google.com/design/spec/components/buttons .html)
19 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>
20 19
21 `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
22 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
23 shadow. 22 shadow.
24 23
25 Example: 24 Example:
26 25
27 <paper-button>Flat button</paper-button> 26 <paper-button>Flat button</paper-button>
28 <paper-button raised>Raised button</paper-button> 27 <paper-button raised>Raised button</paper-button>
29 <paper-button noink>No ripple effect</paper-button> 28 <paper-button noink>No ripple effect</paper-button>
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
69 `--paper-button-ink-color` | Background color of the ripple | `Based on the butt on's color` 68 `--paper-button-ink-color` | Background color of the ripple | `Based on the butt on's color`
70 `--paper-button` | Mixin applied to the button | `{}` 69 `--paper-button` | Mixin applied to the button | `{}`
71 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}` 70 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}`
72 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}` 71 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}`
73 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}` 72 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}`
74 73
75 @demo demo/index.html 74 @demo demo/index.html
76 --> 75 -->
77 76
78 <dom-module id="paper-button"> 77 <dom-module id="paper-button">
79 <template> 78 <template strip-whitespace>
80 79
81 <style> 80 <style include="paper-material">
82 :host { 81 :host {
83 display: inline-block; 82 display: inline-block;
84 position: relative; 83 position: relative;
85 box-sizing: border-box; 84 box-sizing: border-box;
86 min-width: 5.14em; 85 min-width: 5.14em;
87 margin: 0 0.29em; 86 margin: 0 0.29em;
88 background: transparent; 87 background: transparent;
89 text-align: center; 88 text-align: center;
90 font: inherit; 89 font: inherit;
91 text-transform: uppercase; 90 text-transform: uppercase;
92 outline-width: 0; 91 outline-width: 0;
93 border-radius: 3px; 92 border-radius: 3px;
94 -moz-user-select: none; 93 -moz-user-select: none;
95 -ms-user-select: none; 94 -ms-user-select: none;
96 -webkit-user-select: none; 95 -webkit-user-select: none;
97 user-select: none; 96 user-select: none;
98 cursor: pointer; 97 cursor: pointer;
99 z-index: 0; 98 z-index: 0;
100 padding: 0.7em 0.57em; 99 padding: 0.7em 0.57em;
101 100
102 @apply(--paper-button); 101 @apply(--paper-button);
103 } 102 }
104 103
105 :host([raised]) .keyboard-focus { 104 :host([raised].keyboard-focus) {
106 font-weight: bold; 105 font-weight: bold;
107 @apply(--paper-button-raised-keyboard-focus); 106 @apply(--paper-button-raised-keyboard-focus);
108 } 107 }
109 108
110 :host(:not([raised])) .keyboard-focus { 109 :host(:not([raised]).keyboard-focus) {
111 font-weight: bold; 110 font-weight: bold;
112 @apply(--paper-button-flat-keyboard-focus); 111 @apply(--paper-button-flat-keyboard-focus);
113 } 112 }
114 113
115 :host([disabled]) { 114 :host([disabled]) {
116 background: #eaeaea; 115 background: #eaeaea;
117 color: #a8a8a8; 116 color: #a8a8a8;
118 cursor: auto; 117 cursor: auto;
119 pointer-events: none; 118 pointer-events: none;
120 119
121 @apply(--paper-button-disabled); 120 @apply(--paper-button-disabled);
122 } 121 }
123 122
124 :host([noink]) paper-ripple {
125 display: none;
126 }
127
128 paper-ripple { 123 paper-ripple {
129 color: var(--paper-button-ink-color); 124 color: var(--paper-button-ink-color);
130 } 125 }
131 126
132 paper-material { 127 :host > ::content * {
133 border-radius: inherit;
134 @apply(--layout-fit);
135 }
136
137 .content > ::content * {
138 text-transform: inherit; 128 text-transform: inherit;
139 } 129 }
140 </style> 130 </style>
141
142 <paper-ripple></paper-ripple>
143
144 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated></paper-material>
145
146 <content></content> 131 <content></content>
147
148 </template> 132 </template>
149 </dom-module> 133 </dom-module>
150 134
151 <script> 135 <script>
152 Polymer({ 136 Polymer({
153 is: 'paper-button', 137 is: 'paper-button',
154 138
155 behaviors: [ 139 behaviors: [
156 Polymer.PaperButtonBehavior 140 Polymer.PaperButtonBehavior
157 ], 141 ],
158 142
159 properties: { 143 properties: {
160 /** 144 /**
161 * If true, the button should be styled with a shadow. 145 * If true, the button should be styled with a shadow.
162 */ 146 */
163 raised: { 147 raised: {
164 type: Boolean, 148 type: Boolean,
165 reflectToAttribute: true, 149 reflectToAttribute: true,
166 value: false, 150 value: false,
167 observer: '_calculateElevation' 151 observer: '_calculateElevation'
168 } 152 }
169 }, 153 },
170 154
171 _calculateElevation: function() { 155 _calculateElevation: function() {
172 if (!this.raised) { 156 if (!this.raised) {
173 this._elevation = 0; 157 this.elevation = 0;
174 } else { 158 } else {
175 Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this); 159 Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
176 } 160 }
177 },
178
179 _computeContentClass: function(receivedFocusFromKeyboard) {
180 var className = 'content ';
181 if (receivedFocusFromKeyboard) {
182 className += ' keyboard-focus';
183 }
184 return className;
185 } 161 }
186 }); 162 });
187 </script> 163 </script>
OLDNEW
« no previous file with comments | « lib/src/paper-behaviors/test/test-radio-button.html ('k') | lib/src/paper-button/test/paper-button.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698