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

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

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

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.txt

9 -->

10

11 <html>

12 <head>

13

14 <meta charset="utf-8">

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

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

17

18 <title>paper-dropdown-menu</title>

19

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

21

22 <link href="../core-collapse/core-collapse.html" rel="import">

23 <link href="../core-menu/core-menu.html" rel="import">

24 <link href="../paper-dropdown/paper-dropdown.html" rel="import">

25 <link href="../paper-item/paper-item.html" rel="import">

26

27 <link href="paper-dropdown-menu.html" rel="import">

28

29 <style shim-shadowdom>

30 body {

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

32 font-size: 14px;

33 margin: 0;

34 padding: 24px;

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

36 -webkit-touch-callout: none;

37 }

38

39 section {

40 padding: 20px 0;

41 }

42

43 section > div {

44 padding: 14px;

45 font-size: 16px;

46 }

47

48 html /deep/ paper-dropdown-menu {

49 box-sizing: border-box;

50 width: 170px;

51 }

52

53 html /deep/ core-menu {

54 box-sizing: border-box;

55 width: 170px;

56 }

57

58 paper-item {

59 overflow: hidden;

60 white-space: nowrap;

61 text-overflow: ellipsis;

62 }

63

64 html /deep/ core-collapse {

65 border: 1px solid #ccc;

66 padding: 8px;

67 }

68

69 html /deep/ core-overlay {

70 border: 1px solid #ccc;

71 padding: 8px;

72 background: #fff;

73 }

74

75 .constrained-height {

76 height: 150px;

77 }

78

79 .colored {

80 color: #0f9d58;

81 }

82

83 .dropdown.colored::shadow #ripple,

84 .dropdown.colored::shadow #background {

85 border: 1px solid #0f9d58;

86 background-color: #b7e1cd;

87 }

88

89 </style>

90

91 </head>

92 <body>

93

94 <template is="auto-binding">

95

96 <section>

97

98 <div>Absolutely positioned dropdowns</div>

99

100 <paper-dropdown-menu label="Your favorite pastry">

101 <paper-dropdown class="dropdown">

102 <core-menu class="menu">

103 <template repeat="{{pastries}}">

104 <paper-item>{{}}</paper-item>

105 </template>

106 </core-menu>

107 </paper-dropdown>

108 </paper-dropdown-menu>

109

110 <br><br>

111

112 <paper-dropdown-menu label="Disabled" disabled>

113 <paper-dropdown class="dropdown">

114 <core-menu class="menu">

115 <paper-item>Should not see this</paper-item>

116 </core-menu>

117 </paper-dropdown>

118 </paper-dropdown-menu>

119

120 </section>

121

122 <section>

123

124 <div>Layered dropdowns</div>

125

126 <button onclick="document.getElementById('overlay').toggle()">toggle core- overlay</button>

127

128 <core-overlay id="overlay">

129

130 <paper-dropdown-menu label="Your favorite pastry">

131 <paper-dropdown layered class="dropdown">

132 <core-menu class="menu">

133 <template repeat="{{pastries}}">

134 <paper-item>{{}}</paper-item>

135 </template>

136 </core-menu>

137 </paper-dropdown>

138 </paper-dropdown-menu>

139

140 </core-overlay>

141

142 <button onclick="document.getElementById('collapse').toggle()">toggle core -collapse</button>

143

144 <br>

145

146 <core-collapse id="collapse">

147

148 <paper-dropdown-menu label="Your favorite pastry">

149 <paper-dropdown layered class="dropdown">

150 <core-menu class="menu">

151 <template repeat="{{pastries}}">

152 <paper-item>{{}}</paper-item>

153 </template>

154 </core-menu>

155 </paper-dropdown>

156 </paper-dropdown-menu>

157

158 </core-collapse>

159

160 </section>

161

162 <section>

163

164 <div>Custom styling</div>

165

166 <paper-dropdown-menu label="Constrained height">

167 <paper-dropdown class="dropdown constrained-height">

168 <core-menu class="menu">

169 <template repeat="{{pastries}}">

170 <paper-item>{{}}</paper-item>

171 </template>

172 </core-menu>

173 </paper-dropdown>

174 </paper-dropdown-menu>

175

176 <br><br>

177

178 <paper-dropdown-menu label="Colored">

179 <paper-dropdown class="dropdown colored">

180 <core-menu class="menu">

181 <template repeat="{{pastries}}">

182 <paper-item>{{}}</paper-item>

183 </template>

184 </core-menu>

185 </paper-dropdown>

186 </paper-dropdown-menu>

187

188 </section>

189

190 </template>

191

192 <script>

193

194 scope = document.querySelector('template[is=auto-binding]');

195

196 scope.pastries = [

197 'Apple fritter',

198 'Croissant',

199 'Donut',

200 'Financier',

201 'Jello',

202 'Madeleine',

203 'Pound cake',

204 'Pretzel',

205 'Sfogliatelle'

206 ];

207

208 </script>

209

210 </body>

211 </html>

OLD	NEW