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

Side by Side Diff: polymer_0.5.0/bower_components/paper-icon-button/paper-icon-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 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
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 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS
8 --> 8 -->
9 9
10 <!-- 10 <!--
11 @group Paper Elements 11 @group Paper Elements
12 12
13 Material Design: <a href="https://spec.googleplex.com/quantum/components/buttons .html">Buttons</a> 13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>
14 14
15 `paper-icon-button` is a button with an image placed at the center. When the use r touches 15 `paper-icon-button` is a button with an image placed at the center. When the use r touches
16 the button, a ripple effect emanates from the center of the button. 16 the button, a ripple effect emanates from the center of the button.
17 17
18 You may import `core-icons` to use with this element, or provide an URL to a cus tom icon. 18 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on
19 See `core-iconset` for more information about how to use a custom icon set. 19 from the icon set to use.
20
21 <paper-icon-button icon="menu"></paper-icon-button>
22
23 See [`core-iconset`](#core-iconset) for more information about
24 how to use a custom icon set.
20 25
21 Example: 26 Example:
22 27
23 <link href="path/to/core-icons/core-icons.html" rel="import"> 28 <link href="path/to/core-icons/core-icons.html" rel="import">
24 29
25 <paper-icon-button icon="favorite"></paper-icon-button> 30 <paper-icon-button icon="favorite"></paper-icon-button>
26 <paper-icon-button src="star.png"></paper-icon-button> 31 <paper-icon-button src="star.png"></paper-icon-button>
27 32
28 Styling 33 Styling
29 ------- 34 -------
(...skipping 23 matching lines...) Expand all
53 58
54 <paper-icon-button src="star.png" aria-label="star"></paper-icon-button> 59 <paper-icon-button src="star.png" aria-label="star"></paper-icon-button>
55 60
56 @element paper-icon-button 61 @element paper-icon-button
57 @extends paper-button-base 62 @extends paper-button-base
58 @homepage github.io 63 @homepage github.io
59 --> 64 -->
60 65
61 <link href="../polymer/polymer.html" rel="import"> 66 <link href="../polymer/polymer.html" rel="import">
62 <link href="../core-icon/core-icon.html" rel="import"> 67 <link href="../core-icon/core-icon.html" rel="import">
68 <link href="../core-icons/core-icons.html" rel="import">
63 <link href="../paper-button/paper-button-base.html" rel="import"> 69 <link href="../paper-button/paper-button-base.html" rel="import">
64 <link href="../paper-ripple/paper-ripple.html" rel="import"> 70 <link href="../paper-ripple/paper-ripple.html" rel="import">
65 71
66 <polymer-element name="paper-icon-button" extends="paper-button-base" attributes ="src icon" role="button"> 72 <polymer-element name="paper-icon-button" extends="paper-button-base" attributes ="src icon" role="button">
67 73
68 <template> 74 <template>
69 75
70 <style> 76 <style>
71 :host { 77 :host {
72 display: inline-block; 78 display: inline-block;
73 position: relative; 79 position: relative;
74 padding: 8px; 80 padding: 8px;
75 outline: none; 81 outline: none;
76 -webkit-user-select: none; 82 -webkit-user-select: none;
83 -moz-user-select: none;
84 -ms-user-select: none;
77 user-select: none; 85 user-select: none;
78 cursor: pointer; 86 cursor: pointer;
79 z-index: 0; 87 z-index: 0;
80 } 88 }
81 89
82 :host([disabled]) { 90 :host([disabled]) {
83 color: #c9c9c9; 91 color: #c9c9c9;
84 pointer-events: none; 92 pointer-events: none;
85 cursor: auto; 93 cursor: auto;
86 } 94 }
87 95
88 #ripple { 96 #ripple {
89 pointer-events: none; 97 pointer-events: none;
90 z-index: -1; 98 z-index: -1;
91 } 99 }
100
101 #icon {
102 display: block;
103 pointer-events: none;
104 }
92 </style> 105 </style>
93 106
94 <!-- to position to ripple behind the icon --> 107 <!-- to position to ripple behind the icon -->
95 <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon> 108 <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
96 109
97 </template> 110 </template>
98 111
99 <script> 112 <script>
100 Polymer({ 113 Polymer({
101 114
(...skipping 19 matching lines...) Expand all
121 * @default '' 134 * @default ''
122 */ 135 */
123 icon: '', 136 icon: '',
124 137
125 recenteringTouch: true, 138 recenteringTouch: true,
126 fill: false 139 fill: false
127 140
128 }, 141 },
129 142
130 iconChanged: function(oldIcon) { 143 iconChanged: function(oldIcon) {
131 this.setAttribute('aria-label', this.icon); 144 var label = this.getAttribute('aria-label');
145 if (!label || label === oldIcon) {
146 this.setAttribute('aria-label', this.icon);
147 }
132 } 148 }
133 149
134 }); 150 });
135 151
136 </script> 152 </script>
137 153
138 </polymer-element> 154 </polymer-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698