third_party/polymer/v0_8/components-chromium/paper-button/paper-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-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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-button/bower.json ('k') | third_party/polymer/v0_8/components-chromium/paper-button/paper-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 <link rel="import" href="../paper-material/paper-material.html">

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

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

	13

	14 <!--

10	15

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

12	17

13 `paper-button` is a button. When the user touches the button, a ripple effect em anates	18 `paper-button` is a button. When the user touches the button, a ripple effect em anates

14 from the point of contact. It may be flat or raised. A raised button is styled w ith a	19 from the point of contact. It may be flat or raised. A raised button is styled w ith a

15 shadow.	20 shadow.

16	21

17 Example:	22 Example:

18	23

19 <paper-button>flat button</paper-button>	24 <paper-button>flat button</paper-button>

20 <paper-button raised>raised button</paper-button>	25 <paper-button raised>raised button</paper-button>

21 <paper-button noink>No ripple effect</paper-button>	26 <paper-button noink>No ripple effect</paper-button>

22	27

23 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to	28 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to

24 create a button with an icon and some text:	29 create a button with an icon and some text:

25	30

26 <paper-button>	31 <paper-button>

27 <core-icon icon="favorite"></core-icon>	32 <core-icon icon="favorite"></core-icon>

28 custom button content	33 custom button content

29 </paper-button>	34 </paper-button>

30	35

31 ## Styling	36 ### Styling

32	37

33 Style the button with CSS as you would a normal DOM element.	38 Style the button with CSS as you would a normal DOM element.

34	39

35 /* make #my-button green with yellow text */	40 /* make #my-button green with yellow text */

36 #my-button {	41 #my-button {

37 background: green;	42 background: green;

38 color: yellow;	43 color: yellow;

39 }	44 }

40	45

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

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

43	48

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

45 #my-button::shadow paper-ripple {	50 #my-button::shadow paper-ripple {

46 color: blue;	51 color: blue;

47 }	52 }

48	53

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

50	55

51 --><html><head><link rel="import" href="../polymer/polymer.html">	56 The following custom properties and mixins are also available for styling:

52 <link rel="import" href="../paper-material/paper-material.html">

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

54	57

55 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">	58 Custom property \| Description \| Default

	59 ----------------\|-------------\|----------

	60 `--paper-button-flat-focus-color` \| Background color of a focused flat button \| `--paper-grey-200`

	61 `--paper-button` \| Mixin applied to the button \| `{}`

	62 `--paper-button-disabled` \| Mixin applied to the disabled button \| `{}`

	63

	64 @demo demo/index.html

	65 -->

56	66

57 </head><body><dom-module id="paper-button">	67 </head><body><dom-module id="paper-button">

58	68

59 <style>	69 <style>

60	70

61 :host {	71 :host {

62 display: inline-block;	72 display: inline-block;

63 position: relative;	73 position: relative;

64 box-sizing: border-box;	74 box-sizing: border-box;

65 min-width: 5.14em;	75 min-width: 5.14em;

66 margin: 0 0.29em;	76 margin: 0 0.29em;

67 background: transparent;	77 background: transparent;

68 text-align: center;	78 text-align: center;

69 font: inherit;	79 font: inherit;

70 text-transform: uppercase;	80 text-transform: uppercase;

71 outline: none;	81 outline: none;

72 border-radius: 3px;	82 border-radius: 3px;

73 -moz-user-select: none;	83 -moz-user-select: none;

74 -ms-user-select: none;	84 -ms-user-select: none;

75 -webkit-user-select: none;	85 -webkit-user-select: none;

76 user-select: none;	86 user-select: none;

77 cursor: pointer;	87 cursor: pointer;

78 z-index: 0;	88 z-index: 0;

	89

	90 @apply(--paper-button);

	91 }

	92

	93 .keyboard-focus {

	94 font-weight: bold;

79 }	95 }

80	96

81 :host([disabled]) {	97 :host([disabled]) {

82 background: #eaeaea;	98 background: #eaeaea;

83 color: #a8a8a8;	99 color: #a8a8a8;

84 cursor: auto;	100 cursor: auto;

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

	102

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

86 }	104 }

87	105

88 :host([noink]) paper-ripple {	106 :host([noink]) paper-ripple {

89 display: none;	107 display: none;

90 }	108 }

91	109

92 paper-material {	110 paper-material {

93 border-radius: inherit;	111 border-radius: inherit;

94 }	112 }

95	113

96 .content > ::content * {	114 .content > ::content * {

97 text-transform: inherit;	115 text-transform: inherit;

98 }	116 }

99	117

100 .content {	118 .content {

101 padding: 0.7em 0.57em	119 padding: 0.7em 0.57em

102 }	120 }

103 </style>	121 </style>

104	122

105 <template>	123 <template>

106	124

107 <paper-ripple></paper-ripple>	125 <paper-ripple></paper-ripple>

108	126

109 <paper-material class="content" elevation="[[_elevation]]" animated="">	127 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated="">

110 <content></content>	128 <content></content>

111 </paper-material>	129 </paper-material>

112	130

113 </template>	131 </template>

114	132

115 </dom-module>	133 </dom-module>

116	134

117 <script src="paper-button-extracted.js"></script></body></html>	135 <script src="paper-button-extracted.js"></script></body></html>

OLD	NEW