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

Side by Side Diff: third_party/polymer/components-chromium/paper-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-button/bower.json ('k') | third_party/polymer/components-chromium/paper-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

10 <meta charset="utf-8">

11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

12 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">

13

14 <title>paper-button</title>

15

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

17

18 <link href="../font-roboto/roboto.html" rel="import">

19 <link href="../core-icon/core-icon.html" rel="import">

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

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

22

23 <style shim-shadowdom>

24 body {

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

26 font-size: 14px;

27 margin: 0;

28 padding: 24px;

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

30 -webkit-touch-callout: none;

31 }

32

33 section {

34 padding: 20px 0;

35 }

36

37 section > div {

38 padding: 14px;

39 font-size: 16px;

40 }

41

42 paper-button.colored {

43 color: #4285f4;

44 }

45

46 paper-button[raised].colored {

47 background: #4285f4;

48 color: #fff;

49 }

50

51 paper-button.custom > core-icon {

52 margin-right: 4px;

53 }

54

55 paper-button.hover:hover {

56 background: #eee;

57 }

58

59 paper-button.blue-ripple::shadow #ripple {

60 color: #4285f4;

61 }

62

63 </style>

64 </head>

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

66

67 <section>

68

69 <div>Flat buttons</div>

70

71 <paper-button>button</paper-button>

72 <paper-button class="colored">colored</paper-button>

73 <paper-button disabled>disabled</paper-button>

74 <paper-button noink>noink</paper-button>

75

76 </section>

77

78 <br>

79

80 <section>

81

82 <div>Raised buttons</div>

83

84 <paper-button raised>button</paper-button>

85 <paper-button raised class="colored">colored</paper-button>

86 <paper-button raised disabled>disabled</paper-button>

87 <paper-button raised noink>noink</paper-button>

88

89 </section>

90

91 <section>

92

93 <div>Custom button content</div>

94

95 <paper-button class="colored custom">

96 <core-icon icon="check"></core-icon>

97 ok

98 </paper-button>

99 <paper-button class="custom">

100 <core-icon icon="clear"></core-icon>

101 cancel

102 </paper-button>

103 <br>

104 <paper-button>

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

106 </paper-button>

107

108 </section>

109

110 <section>

111

112 <div>Styling options</div>

113

114 <paper-button class="hover">hover</paper-button>

115 <paper-button class="blue-ripple">custom ripple</paper-button>

116

117 </section>

118

119 <script>

120

121 function clickAction(e) {

122 var t = e.target;

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

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

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

126 } else {

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

128 }

129 }

130 }

131

132 </script>

133

134 </body>

135 </html>

OLD	NEW