third_party/polymer/components/core-animated-pages/demos/news.html - Issue 592603004: Revert "Polymer elements added to third_party/polymer."

Side by Side Diff: third_party/polymer/components/core-animated-pages/demos/news.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 6 years, 2 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 | « third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html ('k') | third_party/polymer/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 <!doctype html>

2 <html>

3 <head>

4

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

6

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

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

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

10

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

12

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

14

15 <style shim-shadowdom>

16 body {

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

18 margin: 0;

19 }

20

21 .fit {

22 position: absolute;

23 top: 0;

24 right: 0;

25 bottom: 0;

26 left: 0;

27 width: 420px;

28 }

29

30 .toolbar {

31 background: #8d3efc;

32 /* FIXME */

33 color: #fff !important;

34 fill: #fff;

35 }

36

37 .toolbar-2 {

38 position: absolute;

39 top: 0;

40 left: 0;

41 background: #000;

42 color: #fff;

43 text-align: center;

44 font-size: 48px;

45 }

46

47 body /deep/ .toolbar-2 {

48 position: absolute;

49 top: 0;

50 left: 0;

51 margin: 0;

52 width: 420px;

53 background: #000;

54 color: #fff;

55 text-align: center;

56 font-size: 48px;

57 }

58

59 .container {

60 background-color: #e7e7e7;

61 padding: 16px;

62 }

63

64 .card {

65 position: relative;

66 background-color: #fff;

67 border-radius: 2px;

68 }

69

70 .card-top {

71 background: #f2da2f;

72 height: 240px;

73 }

74

75 .card-top-2 {

76 background: #99f8b7;

77 height: 240px;

78 }

79

80 .card-bottom {

81 padding: 24px;

82 }

83

84 .headline {

85 font-size: 24px;

86 overflow: hidden;

87 text-overflow: ellipsis;

88 white-space: nowrap;

89 }

90

91 .icon {

92 position: relative;

93 background: #000;

94 color: #fff;

95 width: 40px;

96 height: 40px;

97 border-radius: 50%;

98 }

99

100 .icon::after {

101 content: 'T';

102 font-size: 24px;

103 position: absolute;

104 top: 7px;

105 left: 13px;

106 }

107

108 .source-container {

109 margin-top: 16px;

110 }

111

112 .two-lines {

113 margin-left: 16px;

114 }

115

116 .source {

117 font-size: 14px;

118 }

119

120 .time {

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

122 font-size: 12px;

123 }

124

125 .tiles-container {

126 margin-top: 16px;

127 }

128

129 .tile {

130 position: relative;

131 display: inline-block;

132 width: 85px;

133 height: 85px;

134 background: #fff;

135 border-radius: 2px;

136 }

137

138 </style>

139

140 </head>

141 <body unresolved>

142

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

144 <template>

145 <style>

146 :host {

147 display: block;

148 }

149 </style>

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

151 <content></content>

152 </template>

153 </polymer-element>

154

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

156

157 <section id="first">

158

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

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

161 <div flex>Highlights</div>

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

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

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

165 </core-toolbar>

166

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

168

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

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

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

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

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

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

175 <div class="two-lines">

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

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

178 </div>

179 </div>

180 </div>

181 </shadow-div>

182

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

184

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

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

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

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

189

190 </div>

191

192 </div>

193

194 </section>

195

196 <section id="second">

197

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

199

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

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

202 </core-toolbar>

203 </core-toolbar>

204

205 <div class="container">

206

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

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

209 <div class="card-bottom">

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

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

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

213 <div class="two-lines">

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

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

216 </div>

217 </div>

218 </div>

219 </shadow-div>

220

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

222

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

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

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

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

227

228 </div>

229

230 </div>

231

232 </section>

233

234 </core-animated-pages>

235

236 <script>

237

238 function stuff(e) {

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

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

241 }

242

243 </script>

244

245 </body>

246 </html>

OLD	NEW