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

Side by Side Diff: third_party/polymer/v0_8/components/paper-icon-button/paper-icon-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="../iron-icon/iron-icon.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
14 <link rel="import" href="../paper-styles/default-theme.html">
15 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
16 <link rel="import" href="../paper-behaviors/paper-radio-button-behavior.html">
17 <link rel="import" href="../paper-ripple/paper-ripple.html">
18
19 <style is="custom-style">
20 :root {
21 --paper-icon-button-disabled-text: var(--disabled-text-color);
22 }
23 </style>
24
11 <!-- 25 <!--
12 @group Paper Elements
13
14 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a> 26 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>
15 27
16 `paper-icon-button` is a button with an image placed at the center. When the use r touches 28 `paper-icon-button` is a button with an image placed at the center. When the use r touches
17 the button, a ripple effect emanates from the center of the button. 29 the button, a ripple effect emanates from the center of the button.
18 30
19 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on 31 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on
20 from the icon set to use. 32 from the icon set to use.
21 33
22 <paper-icon-button icon="menu"></paper-icon-button> 34 <paper-icon-button icon="menu"></paper-icon-button>
23 35
24 See [`iron-iconset`](#iron-iconset) for more information about 36 See [`iron-iconset`](#iron-iconset) for more information about
25 how to use a custom icon set. 37 how to use a custom icon set.
26 38
27 Example: 39 Example:
28 40
29 <link href="path/to/iron-icons/iron-icons.html" rel="import"> 41 <link href="path/to/iron-icons/iron-icons.html" rel="import">
30 42
31 <paper-icon-button icon="favorite"></paper-icon-button> 43 <paper-icon-button icon="favorite"></paper-icon-button>
32 <paper-icon-button src="star.png"></paper-icon-button> 44 <paper-icon-button src="star.png"></paper-icon-button>
33 45
34 Styling 46 ###Styling
35 -------
36 47
37 Style the button with CSS as you would a normal DOM element. If you are using th e icons 48 Style the button with CSS as you would a normal DOM element. If you are using th e icons
38 provided by `iron-icons`, they will inherit the foreground color of the button. 49 provided by `iron-icons`, they will inherit the foreground color of the button.
39 50
40 /* make a red "favorite" button */ 51 /* make a red "favorite" button */
41 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button> 52 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
42 53
43 By default, the ripple is the same color as the foreground at 25% opacity. You m ay 54 By default, the ripple is the same color as the foreground at 25% opacity. You m ay
44 customize the color using this selector: 55 customize the color using this selector:
45 56
46 /* make #my-button use a blue ripple instead of foreground color */ 57 /* make #my-button use a blue ripple instead of foreground color */
47 #my-button::shadow #ripple { 58 #my-button::shadow #ripple {
48 color: blue; 59 color: blue;
49 } 60 }
50 61
51 The opacity of the ripple is not customizable via CSS. 62 The opacity of the ripple is not customizable via CSS.
52 63
64 The following custom properties and mixins are available for styling:
65
66 Custom property | Description | Default
67 ----------------|-------------|----------
68 `--paper-icon-button-disabled-text` | The color of the disabled button | `--prim ary-text-color`
69 `--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-prima ry-color`
70 `--paper-icon-button` | Mixin for a button | `{}`
71 `--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
72
73 @group Paper Elements
53 @element paper-icon-button 74 @element paper-icon-button
54 @homepage github.io 75 @demo demo/index.html
55 --> 76 -->
56 77
57 <link rel="import" href="../polymer/polymer.html">
58 <link rel="import" href="../iron-icon/iron-icon.html">
59 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
60 <link rel="import" href="../paper-styles/default-theme.html">
61 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
62 <link rel="import" href="../paper-ripple/paper-ripple.html">
63
64 <style is="x-style">
65 * {
66 --paper-icon-button-disabled-text: var(--disabled-text-color);
67 }
68 </style>
69
70 <dom-module id="paper-icon-button"> 78 <dom-module id="paper-icon-button">
71 <style> 79 <style>
80
72 :host { 81 :host {
73 display: inline-block; 82 display: inline-block;
74 position: relative; 83 position: relative;
75 padding: 8px; 84 padding: 8px;
76 outline: none; 85 outline: none;
77 -webkit-user-select: none; 86 -webkit-user-select: none;
78 -moz-user-select: none; 87 -moz-user-select: none;
79 -ms-user-select: none; 88 -ms-user-select: none;
80 user-select: none; 89 user-select: none;
81 cursor: pointer; 90 cursor: pointer;
82 z-index: 0; 91 z-index: 0;
83 92
84 mixin(--paper-icon-button); 93 @apply(--paper-icon-button);
94 }
95
96 :host #ink {
97 color: var(--paper-icon-button-ink-color, --primary-text-color);
98 opacity: 0.6;
85 } 99 }
86 100
87 :host([disabled]) { 101 :host([disabled]) {
88 color: var(--paper-icon-button-disabled-text); 102 color: var(--paper-icon-button-disabled-text, #fff);
89 pointer-events: none; 103 pointer-events: none;
90 cursor: auto; 104 cursor: auto;
91 105 @apply(--paper-icon-button-disabled);
92 mixin(--paper-icon-button-disabled);
93 } 106 }
94 </style> 107 </style>
95 <template> 108 <template>
96 <paper-ripple class="circle" recenters></paper-ripple> 109 <paper-ripple id="ink" class="circle" center></paper-ripple>
97 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon> 110 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
98 </template> 111 </template>
99 </dom-module> 112 </dom-module>
100 <script> 113 <script>
101 Polymer({ 114 Polymer({
102 is: 'paper-icon-button', 115 is: 'paper-icon-button',
103 116
104 behaviors: [ 117 behaviors: [
105 Polymer.PaperButtonBehavior 118 Polymer.PaperButtonBehavior,
119 Polymer.PaperRadioButtonBehavior
106 ], 120 ],
107 121
108 enableCustomStyleProperties: true,
109
110 properties: { 122 properties: {
111 /** 123 /**
112 * The URL of an image for the icon. If the src property is specified, 124 * The URL of an image for the icon. If the src property is specified,
113 * the icon property should not be. 125 * the icon property should not be.
114 */ 126 */
115 src: { 127 src: {
116 type: String 128 type: String
117 }, 129 },
118 130
119 /** 131 /**
120 * Specifies the icon name or index in the set of icons available in 132 * Specifies the icon name or index in the set of icons available in
121 * the icon's icon set. If the icon property is specified, 133 * the icon's icon set. If the icon property is specified,
122 * the src property should not be. 134 * the src property should not be.
123 */ 135 */
124 icon: { 136 icon: {
125 type: String 137 type: String
126 } 138 }
127 } 139 }
128 }); 140 });
129 </script> 141 </script>
130
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698