third_party/polymer/components-chromium/paper-icon-button/demo.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components-chromium/paper-icon-button/demo.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 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:

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

OLD	NEW
	(Empty)
1 <!doctype html>

2 <!--

3 Copyright 2013 The Polymer Authors. All rights reserved.

4 Use of this source code is governed by a BSD-style

5 license that can be found in the LICENSE file.

6 -->

7 <html>

8 <head>

9 <title>paper-icon-button</title>

10 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia l-scale=1, user-scalable=yes">

11 <script src="../webcomponentsjs/webcomponents.js"></script>

12

13 <link rel="import" href="../core-icons/core-icons.html">

14 <link rel="import" href="paper-icon-button.html">

15

16 <style shim-shadowdom>

17 body {

18 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;

19 font-size: 14px;

20 margin: 0;

21 padding: 24px;

22 -webkit-user-select: none;

23 -moz-user-select: none;

24 -ms-user-select: none;

25 user-select: none;

26 -webkit-tap-highlight-color: rgba(0,0,0,0);

27 -webkit-touch-callout: none;

28 }

29

30 section {

31 padding: 20px 0;

32 }

33

34 section > div {

35 padding: 14px;

36 font-size: 16px;

37 }

38

39 paper-icon-button {

40 vertical-align: middle;

41 }

42

43 paper-icon-button.hover:hover {

44 background: #eee;

45 border-radius: 50%;

46 }

47

48 paper-icon-button.red {

49 color: #fe774d;

50 }

51

52 paper-icon-button.blueRipple::shadow #ripple {

53 color: #4285f4;

54 }

55

56 paper-icon-button.huge::shadow #icon {

57 width: 100px;

58 height: 100px;

59 }

60

61 /* core-selector paper-icon-button:not([active])::shadow core-icon {

62 color: #c9c9c9;

63 }

64 */

65 paper-icon-button.custom {

66 color: #a9edff;

67 }

68 </style>

69

70 </head>

71

72 <body unresolved onclick="clickAction(event);">

73

74 <column>

75

76 <section>

77

78 <div>Icon buttons</div>

79

80 <paper-icon-button icon="menu" title="menu"></paper-icon-button>

81 <paper-icon-button icon="arrow-back" title="arrow-back"></paper-icon-but ton>

82 <paper-icon-button icon="arrow-forward" title="arrow-forward"></paper-ic on-button>

83 <paper-icon-button disabled icon="clear" title="clear"></paper-icon-butt on>

84

85 </section>

86

87 <br>

88

89 <section>

90

91 <div>Styled</div>

92

93 <paper-icon-button class="hover" icon="favorite" title="with :hover styl e"></paper-icon-button>

94 <paper-icon-button class="red" icon="favorite" title="red icon"></paper- icon-button>

95 <paper-icon-button class="red blueRipple" icon="favorite" title="red ico n, blue ripple"></paper-icon-button>

96

97 <br>

98

99 <paper-icon-button class="huge" icon="favorite" title="huge"></paper-ico n-button>

100

101 </section>

102

103 <section>

104

105 <div>Link</div>

106

107 <a href="https://www.polymer-project.org" target="_blank">

108 <paper-icon-button icon="polymer" title="polymer"></paper-icon-button>

109 </a>

110

111 </section>

112

113 <!-- <section>

114 <span>focused</span>

115 <paper-icon-button focused icon="social:cake"></paper-icon-button>

116 <paper-icon-button focused icon="social:plus-one"></paper-icon-button>

117 </section>

118 -->

119 <!-- <section>

120 <span>segmented</span>

121 <core-selector selected="1">

122 <paper-icon-button fill isToggle icon="maps:directionswalk"></paper-ic on-button>

123 <paper-icon-button fill isToggle icon="maps:directions-bike"></paper-i con-button>

124 <paper-icon-button fill isToggle icon="maps:directions-transit"></pape r-icon-button>

125 <paper-icon-button fill isToggle icon="maps:directions-car"></paper-ic on-button>

126 </core-selector>

127 </section>

128 -->

129 <section>

130

131 <div>Custom icon src</div>

132

133 <paper-icon-button class="custom" src="https://assets-cdn.github.com/ima ges/modules/logos_page/Octocat.png" aria-label="octocat" title="octocat"></paper -icon-button>

134

135 </section>

136 </column>

137

138 <script>

139

140 function clickAction(e) {

141 var t = e.target;

142 if (t.localName === 'paper-icon-button') {

143 if (t.hasAttribute('disabled')) {

144 console.error('should not be able to click disabled button', t);

145 } else {

146 console.log('click', t);

147 }

148 }

149 }

150

151 </script>

152

153 </body>

154 </html>

OLD	NEW