third_party/polymer/components/paper-shadow/demo.html - Issue 592603004: Revert "Polymer elements added to third_party/polymer."

Side by Side Diff: third_party/polymer/components/paper-shadow/demo.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, 3 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

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 <title>paper-shadow</title>

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, initial-scale=1, user-scala ble=no">

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

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

15 <style>

16 body {

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

18 transform: translateZ(0);

19 -webkit-transform: translateZ(0);

20 transform: translateZ(0);

21 padding: 16px;

22 user-select: none;

23 -webkit-user-select: none;

24 }

25

26 section {

27 display: flex;

28 display: -webkit-flex;

29 width: 80%;

30 margin: 16px;

31 }

32

33 aside {

34 flex: 1 1 auto;

35 -webkit-flex: 1 1 auto;

36 padding: 48px 16px;

37 user-select: text;

38 -webkit-user-select: text;

39 }

40

41 .card {

42 background: white;

43 width: 300px;

44 height: 300px;

45 position: relative;

46 margin: 16px;

47 border-radius: 2px;

48 }

49

50 .card-inner {

51 position: absolute;

52 left: 0;

53 top: 0;

54 right: 0;

55 bottom: 0;

56 border-radius: 2px;

57 }

58

59 </style>

60 </head>

61 <body unresolved>

62

63 <paper-shadow></paper-shadow>

64

65 <section>

66 <div>

67 <div class="card">

68 </div>

69 </div>

70 <aside>

71 z-depth = 0

72 </aside>

73 </section>

74

75 <section>

76 <!-- Example of using paper-shadow to add a shadow to an element -->

77 <div>

78 <div class="card">

79 <paper-shadow z="1"></paper-shadow>

80 </div>

81 </div>

82 <aside>

83 z-depth = 1

84 </aside>

85 </section>

86

87 <section>

88 <!-- Example of using paper-shadow as part of a Polymer element -->

89 <polymer-element name="x-card" attributes="z">

90 <template>

91 <style>

92 :host {

93 display: block;

94 }

95 </style>

96 <paper-shadow z="{{z}}"></paper-shadow>

97 </template>

98 <script>

99 Polymer('x-card', {

100 publish: {

101 z: {value: 1, reflect: true}

102 }

103 });

104 </script>

105 </polymer-element>

106 <div>

107 <x-card class="card" z="2"></x-card>

108 </div>

109 <aside>

110 z-depth = 2

111 </aside>

112 </section>

113

114 <section>

115 <!-- Example of using paper-shadow by adding a class directly -->

116 <div>

117 <div class="card paper-shadow-top-z-3">

118 <div class="card-inner paper-shadow-bottom-z-3">

119 </div>

120 </div>

121 </div>

122 <aside>

123 z-depth = 3

124 </aside>

125 </section>

126

127 <section>

128 <div>

129 <div class="card paper-shadow-top-z-4">

130 <div class="card-inner paper-shadow-bottom-z-4">

131 </div>

132 </div>

133 </div>

134 <aside>

135 z-depth = 4

136 </aside>

137 </section>

138

139 <section>

140 <div>

141 <div class="card paper-shadow-top-z-5">

142 <div class="card-inner paper-shadow-bottom-z-5">

143 </div>

144 </div>

145 </div>

146 <aside>

147 z-depth = 5

148 </aside>

149 </section>

150

151 <br>

152 <br>

153 <br>

154 <br>

155

156 <polymer-element name="x-shadow" attributes="z" on-tap="{{tapAction}}">

157 <template>

158 <style>

159 :host,

160 .paper-shadow-bottom {

161 display: block;

162 background: white;

163 color: #ccc;

164 }

165

166 :host(.fab),

167 :host(.fab) .paper-shadow-bottom {

168 width: 48px;

169 height: 48px;

170 border-radius: 24px;

171 }

172 </style>

173 <paper-shadow z="{{z}}" animated></paper-shadow>

174 </template>

175 <script>

176 Polymer('x-shadow', {

177 publish: {

178 z: {value: 0, reflect: true}

179 },

180 up: true,

181 zChanged: function() {

182 this.fire('shadow-z-changed');

183 },

184 tapAction: function() {

185 if (this.up) {

186 if (this.z < 5) {

187 this.z += 1;

188 } else {

189 this.z -= 1;

190 this.up = false;

191 }

192 } else {

193 if (this.z > 0) {

194 this.z -= 1;

195 } else {

196 this.z += 1;

197 this.up = true;

198 }

199 }

200 }

201 });

202 </script>

203 </polymer-element>

204

205 <section>

206 <div>

207 <x-shadow id="card" z="0" class="card"></x-shadow>

208 </div>

209 <aside>

210 Tap to lift/drop the card.

211 <br>

212 Current z-index = <span id="card-z">0</span>

213 </aside>

214 <script>

215 document.addEventListener('polymer-ready', function() {

216 var fab = document.getElementById('card');

217 fab.addEventListener('shadow-z-changed', function() {

218 document.getElementById('card-z').textContent = fab.z;

219 });

220 });

221 </script>

222 </section>

223

224 <section>

225 <div>

226 <style>

227 x-shadow.fab {

228 margin: 48px 142px;

229 }

230 </style>

231 <x-shadow id="fab" z="0" class="fab"></x-shadow>

232 </div>

233 <aside>

234 Tap to lift/drop the button.

235 <br>

236 Current z-index = <span id="fab-z">0</span>

237 </aside>

238 <script>

239 document.addEventListener('polymer-ready', function() {

240 var fab = document.getElementById('fab');

241 fab.addEventListener('shadow-z-changed', function() {

242 document.getElementById('fab-z').textContent = fab.z;

243 });

244 });

245 </script>

246 </section>

247

248 </body>

249 </html>

OLD	NEW

« no previous file with comments | « third_party/polymer/components/paper-shadow/bower.json ('k') | third_party/polymer/components/paper-shadow/index.html » ('j') | no next file with comments »