bower_components/core-animated-pages/demos/news.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: bower_components/core-animated-pages/demos/news.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

« no previous file with comments | « bower_components/core-animated-pages/demos/nested-animated-pages.html ('k') | bower_components/core-animated-pages/demos/quiz1.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 <!--

2 @license

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://polym er.github.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/CO NTRIBUTORS.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/P ATENTS.txt

9 -->

10 <!doctype html>

11 <html>

12 <head>

13

14 <script src="../../platform/platform.js"></script>

15

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

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

18 <link href="../../core-toolbar/core-toolbar.html" rel="import">

19

20 <link href="../../paper-shadow/paper-shadow.html" rel="import">

21

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

23

24 <style shim-shadowdom>

25 body {

26 font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;

27 margin: 0;

28 }

29

30 .fit {

31 position: absolute;

32 top: 0;

33 right: 0;

34 bottom: 0;

35 left: 0;

36 width: 420px;

37 }

38

39 .toolbar {

40 background: #8d3efc;

41 /* FIXME */

42 color: #fff !important;

43 fill: #fff;

44 }

45

46 .toolbar-2 {

47 position: absolute;

48 top: 0;

49 left: 0;

50 background: #000;

51 color: #fff;

52 text-align: center;

53 font-size: 48px;

54 }

55

56 body /deep/ .toolbar-2 {

57 position: absolute;

58 top: 0;

59 left: 0;

60 margin: 0;

61 width: 420px;

62 background: #000;

63 color: #fff;

64 text-align: center;

65 font-size: 48px;

66 }

67

68 .container {

69 background-color: #e7e7e7;

70 padding: 16px;

71 }

72

73 .card {

74 position: relative;

75 background-color: #fff;

76 border-radius: 2px;

77 }

78

79 .card-top {

80 background: #f2da2f;

81 height: 240px;

82 }

83

84 .card-top-2 {

85 background: #99f8b7;

86 height: 240px;

87 }

88

89 .card-bottom {

90 padding: 24px;

91 }

92

93 .headline {

94 font-size: 24px;

95 overflow: hidden;

96 text-overflow: ellipsis;

97 white-space: nowrap;

98 }

99

100 .icon {

101 position: relative;

102 background: #000;

103 color: #fff;

104 width: 40px;

105 height: 40px;

106 border-radius: 50%;

107 }

108

109 .icon::after {

110 content: 'T';

111 font-size: 24px;

112 position: absolute;

113 top: 7px;

114 left: 13px;

115 }

116

117 .source-container {

118 margin-top: 16px;

119 }

120

121 .two-lines {

122 margin-left: 16px;

123 }

124

125 .source {

126 font-size: 14px;

127 }

128

129 .time {

130 color: rgba(0, 0, 0, 0.54);

131 font-size: 12px;

132 }

133

134 .tiles-container {

135 margin-top: 16px;

136 }

137

138 .tile {

139 position: relative;

140 display: inline-block;

141 width: 85px;

142 height: 85px;

143 background: #fff;

144 border-radius: 2px;

145 }

146

147 </style>

148

149 </head>

150 <body unresolved>

151

152 <polymer-element name="shadow-div" noscript>

153 <template>

154 <style>

155 :host {

156 display: block;

157 }

158 </style>

159 <paper-shadow target="{{}}" z="1"></paper-shadow>

160 <content></content>

161 </template>

162 </polymer-element>

163

164 <core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero -transition">

165

166 <section id="first">

167

168 <core-toolbar class="tall toolbar">

169 <core-icon icon="menu"></core-icon>

170 <div flex>Highlights</div>

171 <core-icon icon="social:share"></core-icon>

172 <core-icon icon="bookmark"></core-icon>

173 <core-icon icon="more-vert"></core-icon>

174 </core-toolbar>

175

176 <div class="container" hero-p>

177

178 <shadow-div class="card" hero-p onclick="stuff()">

179 <div class="card-top"></div>

180 <div class="card-bottom" hero-p>

181 <div class="headline">Google's Craziest Offices</div>

182 <div class="source-container" hero-p layout horizontal center>

183 <div class="icon" hero-id="icon-header" hero></div>

184 <div class="two-lines">

185 <div class="source">The New York Times</div>

186 <div class="time">36 minutes ago</div>

187 </div>

188 </div>

189 </div>

190 </shadow-div>

191

192 <div class="tiles-container" layout horizontal justified>

193

194 <shadow-div class="tile"></shadow-div>

195 <shadow-div class="tile"></shadow-div>

196 <shadow-div class="tile"></shadow-div>

197 <shadow-div class="tile"></shadow-div>

198

199 </div>

200

201 </div>

202

203 </section>

204

205 <section id="second">

206

207 <core-toolbar class="tall" hero-p>

208

209 <core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>

210 <div flex class="middle">T</div>

211 </core-toolbar>

212 </core-toolbar>

213

214 <div class="container">

215

216 <shadow-div class="card" onclick="stuff()">

217 <div class="card-top-2"></div>

218 <div class="card-bottom">

219 <div class="headline">Some long overflowing headline</div>

220 <div class="source-container" layout horizontal center>

221 <div class="icon" style="background:red;"></div>

222 <div class="two-lines">

223 <div class="source">The New York Times</div>

224 <div class="time">36 minutes ago</div>

225 </div>

226 </div>

227 </div>

228 </shadow-div>

229

230 <div class="tiles-container" layout horizontal justified>

231

232 <shadow-div class="tile"></shadow-div>

233 <shadow-div class="tile"></shadow-div>

234 <shadow-div class="tile"></shadow-div>

235 <shadow-div class="tile"></shadow-div>

236

237 </div>

238

239 </div>

240

241 </section>

242

243 </core-animated-pages>

244

245 <script>

246

247 function stuff(e) {

248 var p = document.querySelector('core-animated-pages');

249 p.selected = p.selected ? 0 : 1;

250 }

251

252 </script>

253

254 </body>

255 </html>

OLD	NEW