third_party/polymer/components/core-menu-button/demo.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components/core-menu-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/core-menu-button/core-menu-button.html ('k') | third_party/polymer/components/core-menu-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 (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>core-menu-button</title>

19

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

21

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

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

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

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

26 <link href="../core-item/core-item.html" rel="import">

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

28

29 <link href="core-menu-button.html" rel="import">

30

31 <style shim-shadowdom>

32 body {

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

34 font-size: 14px;

35 margin: 0;

36 padding: 24px;

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

38 -webkit-touch-callout: none;

39 }

40

41 section {

42 padding: 20px 0;

43 }

44

45 section > div {

46 padding: 14px;

47 font-size: 16px;

48 }

49

50 html /deep/ core-dropdown {

51 background-color: #eee;

52 color: #000;

53 border: 1px solid #ccc;

54 border-radius: 3px;

55 }

56

57 core-item {

58 overflow: hidden;

59 white-space: nowrap;

60 text-overflow: ellipsis;

61 }

62

63 html /deep/ core-collapse {

64 border: 1px solid #ccc;

65 padding: 8px;

66 }

67

68 .constrained-height {

69 height: 150px;

70 }

71

72 .colored {

73 color: #0f9d58;

74 }

75

76 .colored:active,

77 .dropdown.colored {

78 border: 1px solid #0f9d58;

79 background-color: #b7e1cd;

80 }

81

82 </style>

83

84 </head>

85 <body>

86

87 <template is="auto-binding">

88

89 <section>

90

91 <div>Absolutely positioned menu buttons</div>

92

93 <core-menu-button>

94 <core-icon-button icon="menu"></core-icon-button>

95 <core-dropdown class="dropdown">

96 <core-menu>

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

98 <core-item>{{}}</core-item>

99 </template>

100 </core-menu>

101 </core-dropdown>

102 </core-menu-button>

103

104 <core-menu-button disabled>

105 <core-icon-button icon="menu"></core-icon-button>

106 <core-dropdown class="dropdown">

107 <core-menu>

108 <core-item>Should not see this</core-item>

109 </core-menu>

110 </core-dropdown>

111 </core-menu-button>

112

113 <core-menu-button>

114 <core-icon-button icon="add"><span style="vertical-align:middle;">add</spa n></core-icon-button>

115 <core-dropdown class="dropdown">

116 <core-menu>

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

118 <core-item>{{}}</core-item>

119 </template>

120 </core-menu>

121 </core-dropdown>

122 </core-menu-button>

123

124 </section>

125

126 <section>

127

128 <div>Layered menu buttons</div>

129

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

131

132 <br>

133

134 <core-collapse id="collapse">

135

136 <core-menu-button>

137 <core-icon-button icon="menu"></core-icon-button>

138 <core-dropdown layered class="dropdown">

139 <core-menu>

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

141 <core-item>{{}}</core-item>

142 </template>

143 </core-menu>

144 </core-dropdown>

145 </core-menu-button>

146

147 </core-collapse>

148

149 </section>

150

151 <section>

152

153 <div>Custom styling</div>

154

155 <core-menu-button label="Constrained height">

156 <core-icon-button icon="menu"></core-icon-button>

157 <core-dropdown class="dropdown constrained-height">

158 <core-menu>

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

160 <core-item>{{}}</core-item>

161 </template>

162 </core-menu>

163 </core-dropdown>

164 </core-menu-button>

165

166 <core-menu-button label="Colored">

167 <core-icon-button icon="menu" class="colored"></core-icon-button>

168 <core-dropdown class="dropdown colored">

169 <core-menu>

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

171 <core-item>{{}}</core-item>

172 </template>

173 </core-menu>

174 </core-dropdown>

175 </core-menu-button>

176

177 </section>

178

179 </template>

180

181 <script>

182

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

184

185 scope.pastries = [

186 'Apple fritter',

187 'Croissant',

188 'Donut',

189 'Financier',

190 'Jello',

191 'Madeleine',

192 'Pound cake',

193 'Pretzel',

194 'Sfogliatelle'

195 ];

196

197 </script>

198

199 </body>

200 </html>

OLD	NEW