bower_components/paper-icon-button/demo.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: bower_components/paper-icon-button/demo.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

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="../platform/platform.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 /* core-selector paper-icon-button:not([active])::shadow core-icon {

57 color: #c9c9c9;

58 }

59 */

60 paper-icon-button.custom {

61 color: #a9edff;

62 }

63 </style>

64

65 </head>

66

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

68

69 <column>

70

71 <section>

72

73 <div>Icon buttons</div>

74

75 <paper-icon-button icon="menu"></paper-icon-button>

76 <paper-icon-button icon="arrow-back"></paper-icon-button>

77 <paper-icon-button icon="arrow-forward"></paper-icon-button>

78 <paper-icon-button disabled icon="clear"></paper-icon-button>

79

80 </section>

81

82 <br>

83

84 <section>

85

86 <div>Styled</div>

87

88 <paper-icon-button icon="favorite"></paper-icon-button>

89 <paper-icon-button class="hover" icon="favorite"></paper-icon-button>

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

91 <paper-icon-button class="red blueRipple" icon="favorite"></paper-icon-b utton>

92

93 </section>

94

95 <!-- <section>

96 <span>focused</span>

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

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

99 </section>

100 -->

101 <!-- <section>

102 <span>segmented</span>

103 <core-selector selected="1">

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

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

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

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

108 </core-selector>

109 </section>

110 -->

111 <section>

112

113 <div>Custom icon src</div>

114

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

116

117 </section>

118 </column>

119

120 <script>

121

122 function clickAction(e) {

123 var t = e.target;

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

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

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

127 } else {

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

129 }

130 }

131 }

132

133 </script>

134

135 </body>

136 </html>

OLD	NEW

« no previous file with comments | « bower_components/paper-icon-button/bower.json ('k') | bower_components/paper-icon-button/index.html » ('j') | no next file with comments »