third_party/polymer/v0_8/components-chromium/paper-icon-button/paper-icon-button.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Side by Side Diff: third_party/polymer/v0_8/components-chromium/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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-icon-button/bower.json ('k') | third_party/polymer/v0_8/components-chromium/paper-icon-button/paper-icon-button-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
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 --><html><head><link rel="import" href="../polymer/polymer.html">

10 @group Paper Elements	10 <link rel="import" href="../iron-icon/iron-icon.html">

	11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

	12 <link rel="import" href="../paper-styles/default-theme.html">

	13 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">

	14 <link rel="import" href="../paper-behaviors/paper-radio-button-behavior.html">

	15 <link rel="import" href="../paper-ripple/paper-ripple.html">

11	16

	17 <style is="custom-style">

	18 :root {

	19 --paper-icon-button-disabled-text: var(--disabled-text-color);

	20 }

	21 </style>

	22

	23 <!--

12 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>	24 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>

13	25

14 `paper-icon-button` is a button with an image placed at the center. When the use r touches	26 `paper-icon-button` is a button with an image placed at the center. When the use r touches

15 the button, a ripple effect emanates from the center of the button.	27 the button, a ripple effect emanates from the center of the button.

16	28

17 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on	29 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on

18 from the icon set to use.	30 from the icon set to use.

19	31

20 <paper-icon-button icon="menu"></paper-icon-button>	32 <paper-icon-button icon="menu"></paper-icon-button>

21	33

22 See [`iron-iconset`](#iron-iconset) for more information about	34 See [`iron-iconset`](#iron-iconset) for more information about

23 how to use a custom icon set.	35 how to use a custom icon set.

24	36

25 Example:	37 Example:

26	38

27 <link href="path/to/iron-icons/iron-icons.html" rel="import">	39 <link href="path/to/iron-icons/iron-icons.html" rel="import">

28	40

29 <paper-icon-button icon="favorite"></paper-icon-button>	41 <paper-icon-button icon="favorite"></paper-icon-button>

30 <paper-icon-button src="star.png"></paper-icon-button>	42 <paper-icon-button src="star.png"></paper-icon-button>

31	43

32 Styling	44 ###Styling

33 -------

34	45

35 Style the button with CSS as you would a normal DOM element. If you are using th e icons	46 Style the button with CSS as you would a normal DOM element. If you are using th e icons

36 provided by `iron-icons`, they will inherit the foreground color of the button.	47 provided by `iron-icons`, they will inherit the foreground color of the button.

37	48

38 /* make a red "favorite" button */	49 /* make a red "favorite" button */

39 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>	50 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>

40	51

41 By default, the ripple is the same color as the foreground at 25% opacity. You m ay	52 By default, the ripple is the same color as the foreground at 25% opacity. You m ay

42 customize the color using this selector:	53 customize the color using this selector:

43	54

44 /* make #my-button use a blue ripple instead of foreground color */	55 /* make #my-button use a blue ripple instead of foreground color */

45 #my-button::shadow #ripple {	56 #my-button::shadow #ripple {

46 color: blue;	57 color: blue;

47 }	58 }

48	59

49 The opacity of the ripple is not customizable via CSS.	60 The opacity of the ripple is not customizable via CSS.

50	61

	62 The following custom properties and mixins are available for styling:

	63

	64 Custom property \| Description \| Default

	65 ----------------\|-------------\|----------

	66 `--paper-icon-button-disabled-text` \| The color of the disabled button \| `--prim ary-text-color`

	67 `--paper-icon-button-ink-color` \| Selected/focus ripple color \| `--default-prima ry-color`

	68 `--paper-icon-button` \| Mixin for a button \| `{}`

	69 `--paper-icon-button-disabled` \| Mixin for a disabled button \| `{}`

	70

	71 @group Paper Elements

51 @element paper-icon-button	72 @element paper-icon-button

52 @homepage github.io	73 @demo demo/index.html

53 --><html><head><link rel="import" href="../polymer/polymer.html">	74 -->

54 <link rel="import" href="../iron-icon/iron-icon.html">

55 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

56 <link rel="import" href="../paper-styles/default-theme.html">

57 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">

58 <link rel="import" href="../paper-ripple/paper-ripple.html">

59

60 <style is="x-style">

61 * {

62 --paper-icon-button-disabled-text: var(--disabled-text-color);

63 }

64 </style>

65	75

66 </head><body><dom-module id="paper-icon-button">	76 </head><body><dom-module id="paper-icon-button">

67 <style>	77 <style>

	78

68 :host {	79 :host {

69 display: inline-block;	80 display: inline-block;

70 position: relative;	81 position: relative;

71 padding: 8px;	82 padding: 8px;

72 outline: none;	83 outline: none;

73 -webkit-user-select: none;	84 -webkit-user-select: none;

74 -moz-user-select: none;	85 -moz-user-select: none;

75 -ms-user-select: none;	86 -ms-user-select: none;

76 user-select: none;	87 user-select: none;

77 cursor: pointer;	88 cursor: pointer;

78 z-index: 0;	89 z-index: 0;

79	90

80 mixin(--paper-icon-button);	91 @apply(--paper-icon-button);

	92 }

	93

	94 :host #ink {

	95 color: var(--paper-icon-button-ink-color, --primary-text-color);

	96 opacity: 0.6;

81 }	97 }

82	98

83 :host([disabled]) {	99 :host([disabled]) {

84 color: var(--paper-icon-button-disabled-text);	100 color: var(--paper-icon-button-disabled-text, #fff);

85 pointer-events: none;	101 pointer-events: none;

86 cursor: auto;	102 cursor: auto;

87	103 @apply(--paper-icon-button-disabled);

88 mixin(--paper-icon-button-disabled);

89 }	104 }

90 </style>	105 </style>

91 <template>	106 <template>

92 <paper-ripple class="circle" recenters=""></paper-ripple>	107 <paper-ripple id="ink" class="circle" center=""></paper-ripple>

93 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>	108 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>

94 </template>	109 </template>

95 </dom-module>	110 </dom-module>

96 <script src="paper-icon-button-extracted.js"></script></body></html>	111 <script src="paper-icon-button-extracted.js"></script></body></html>

OLD	NEW