forked from webcomponents/polymer-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 9
/
shape-shifter.html
366 lines (322 loc) · 16.5 KB
/
shape-shifter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<link rel="import" href="../polymer/polymer.html">
<dom-module id="shape-shifter">
<style>
:host {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
line-height: 0;
}
svg {
width: 100%;
height: 100%;
stroke: var(--shape-shifter-primary-color, currentColor);
}
line {
stroke-width: 6;
-webkit-transition: -webkit-transform 0.5s, stroke 0.5s;
-moz-transition: -moz-transform 0.5s, stroke 0.5s;
-ms-transition: -ms-transform 0.5s, stroke 0.5s;
-o-transition: -o-transform 0.5s, stroke 0.5s;
transition: transform 0.5s, stroke 0.5s;
-webkit-transform: translate(0, 0) scale(0.01);
-moz-transform: translate(0, 0) scale(0.01);
-ms-transform: translate(0, 0) scale(0.01);
-o-transform: translate(0, 0) scale(0.01);
transform: translate(0, 0) scale(0.01);
}
:host([springy]) line {
-webkit-transition: -webkit-transform 0.5s cubic-bezier(1, -0.3, 0, 1.3), stroke 0.5s;
-moz-transition: -moz-transform 0.5s cubic-bezier(1, -0.3, 0, 1.3), stroke 0.5s;
-ms-transition: -ms-transform 0.5s cubic-bezier(1, -0.3, 0, 1.3), stroke 0.5s;
-o-transition: -o-transform 0.5s cubic-bezier(1, -0.3, 0, 1.3), stroke 0.5s;
transition: transform 0.5s cubic-bezier(1, -0.3, 0, 1.3), stroke 0.5s;
}
:host[shape="plus"] line:nth-child(2),
:host[shape="cancel"] line:nth-child(2),
:host[shape="check"] line:nth-child(2),
:host[shape="left"] line:nth-child(2),
:host[shape="right"] line:nth-child(2),
:host[shape="up"] line:nth-child(2),
:host[shape="down"] line:nth-child(2)
{
stroke: var(--shape-shifter-secondary-color, #ffffff);
}
:host[shape="plus"] line:nth-child(1) {
-webkit-transform: translate(0, 0) scale(12, 1);
-moz-transform: translate(0, 0) scale(12, 1);
-ms-transform: translate(0, 0) scale(12, 1);
-o-transform: translate(0, 0) scale(12, 1);
transform: translate(0, 0) scale(12, 1);
}
:host[shape="plus"] line:nth-child(3) {
-webkit-transform: translate(0, 0) rotate(90deg) scale(12, 1);
-moz-transform: translate(0, 0) rotate(90deg) scale(12, 1);
-ms-transform: translate(0, 0) rotate(90deg) scale(12, 1);
-o-transform: translate(0, 0) rotate(90deg) scale(12, 1);
transform: translate(0, 0) rotate(90deg) scale(12, 1);
}
:host([shape="cancel"]) line:nth-child(1) {
-webkit-transform: translate(0, 0) rotate(135deg) scale(12, 1);
-moz-transform: translate(0, 0) rotate(135deg) scale(12, 1);
-ms-transform: translate(0, 0) rotate(135deg) scale(12, 1);
-o-transform: translate(0, 0) rotate(135deg) scale(12, 1);
transform: translate(0, 0) rotate(135deg) scale(12, 1);
}
:host([shape="cancel"]) line:nth-child(3) {
-webkit-transform: translate(0, 0) rotate(-135deg) scale(12, 1);
-moz-transform: translate(0, 0) rotate(-135deg) scale(12, 1);
-ms-transform: translate(0, 0) rotate(-135deg) scale(12, 1);
-o-transform: translate(0, 0) rotate(-135deg) scale(12, 1);
transform: translate(0, 0) rotate(-135deg) scale(12, 1);
}
:host([shape="check"]) line:nth-child(1) {
-webkit-transform: translate(-24.7px, 10.5px) rotate(45deg) scale(6, 1);
-moz-transform: translate(-24.7px, 10.5px) rotate(45deg) scale(6, 1);
-ms-transform: translate(-24.7px, 10.5px) rotate(45deg) scale(6, 1);
-o-transform: translate(-24.7px, 10.5px) rotate(45deg) scale(6, 1);
transform: translate(-24.7px, 10.5px) rotate(45deg) scale(6, 1);
}
:host([shape="check"]) line:nth-child(3) {
-webkit-transform: translate(11.5px, 0) rotate(-45deg) scale(12, 1);
-moz-transform: translate(11.5px, 0) rotate(-45deg) scale(12, 1);
-ms-transform: translate(11.5px, 0) rotate(-45deg) scale(12, 1);
-o-transform: translate(11.5px, 0) rotate(-45deg) scale(12, 1);
transform: translate(11.5px, 0) rotate(-45deg) scale(12, 1);
}
:host([shape="menu"]) line:nth-child(1) {
-webkit-transform: translate(0, -23px) scale(12, 1);
-moz-transform: translate(0, -23px) scale(12, 1);
-ms-transform: translate(0, -23px) scale(12, 1);
-o-transform: translate(0, -23px) scale(12, 1);
transform: translate(0, -23px) scale(12, 1);
}
:host([shape="menu"]) line:nth-child(2) {
-webkit-transform: translate(0, 0) scale(12, 1);
-moz-transform: translate(0, 0) scale(12, 1);
-ms-transform: translate(0, 0) scale(12, 1);
-o-transform: translate(0, 0) scale(12, 1);
transform: translate(0, 0) scale(12, 1);
}
:host([shape="menu"]) line:nth-child(3) {
-webkit-transform: translate(0, 23px) scale(12, 1);
-moz-transform: translate(0, 23px) scale(12, 1);
-ms-transform: translate(0, 23px) scale(12, 1);
-o-transform: translate(0, 23px) scale(12, 1);
transform: translate(0, 23px) scale(12, 1);
}
:host([shape="more"]) line:nth-child(1) {
-webkit-transform: translate(-26px, 0) scale(2, 2);
-moz-transform: translate(-26px, 0) scale(2, 2);
-ms-transform: translate(-26px, 0) scale(2, 2);
-o-transform: translate(-26px, 0) scale(2, 2);
transform: translate(-26px, 0) scale(2, 2);
}
:host([shape="more"]) line:nth-child(2) {
-webkit-transform: translate(0, 0) scale(2, 2);
-moz-transform: translate(0, 0) scale(2, 2);
-ms-transform: translate(0, 0) scale(2, 2);
-o-transform: translate(0, 0) scale(2, 2);
transform: translate(0, 0) scale(2, 2);
}
:host([shape="more"]) line:nth-child(3) {
-webkit-transform: translate(26px, 0) scale(2, 2);
-moz-transform: translate(26px, 0) scale(2, 2);
-ms-transform: translate(26px, 0) scale(2, 2);
-o-transform: translate(26px, 0) scale(2, 2);
transform: translate(26px, 0) scale(2, 2);
}
:host([shape="right"]) line:nth-child(1) {
-webkit-transform: translate(0, -17px) rotate(45deg) scale(9, 1);
-moz-transform: translate(0, -17px) rotate(45deg) scale(9, 1);
-ms-transform: translate(0, -17px) rotate(45deg) scale(9, 1);
-o-transform: translate(0, -17px) rotate(45deg) scale(9, 1);
transform: translate(0, -17px) rotate(45deg) scale(9, 1);
}
:host([shape="right"]) line:nth-child(3) {
-webkit-transform: translate(0, 17px) rotate(-45deg) scale(9, 1);
-moz-transform: translate(0, 17px) rotate(-45deg) scale(9, 1);
-ms-transform: translate(0, 17px) rotate(-45deg) scale(9, 1);
-o-transform: translate(0, 17px) rotate(-45deg) scale(9, 1);
transform: translate(0, 17px) rotate(-45deg) scale(9, 1);
}
:host([shape="left"]) line:nth-child(1) {
-webkit-transform: translate(0, -17px) rotate(-45deg) scale(9, 1);
-moz-transform: translate(0, -17px) rotate(-45deg) scale(9, 1);
-ms-transform: translate(0, -17px) rotate(-45deg) scale(9, 1);
-o-transform: translate(0, -17px) rotate(-45deg) scale(9, 1);
transform: translate(0, -17px) rotate(-45deg) scale(9, 1);
}
:host([shape="left"]) line:nth-child(3) {
-webkit-transform: translate(0, 17px) rotate(45deg) scale(9, 1);
-moz-transform: translate(0, 17px) rotate(45deg) scale(9, 1);
-ms-transform: translate(0, 17px) rotate(45deg) scale(9, 1);
-o-transform: translate(0, 17px) rotate(45deg) scale(9, 1);
transform: translate(0, 17px) rotate(45deg) scale(9, 1);
}
:host([shape="up"]) line:nth-child(1) {
-webkit-transform: translate(-17px, 0) rotate(-45deg) scale(9, 1);
-moz-transform: translate(-17px, 0) rotate(-45deg) scale(9, 1);
-ms-transform: translate(-17px, 0) rotate(-45deg) scale(9, 1);
-o-transform: translate(-17px, 0) rotate(-45deg) scale(9, 1);
transform: translate(-17px, 0) rotate(-45deg) scale(9, 1);
}
:host([shape="up"]) line:nth-child(3) {
-webkit-transform: translate(17px, 0) rotate(45deg) scale(9, 1);
-moz-transform: translate(17px, 0) rotate(45deg) scale(9, 1);
-ms-transform: translate(17px, 0) rotate(45deg) scale(9, 1);
-o-transform: translate(17px, 0) rotate(45deg) scale(9, 1);
transform: translate(17px, 0) rotate(45deg) scale(9, 1);
}
:host([shape="down"]) line:nth-child(1) {
-webkit-transform: translate(-17px, 0) rotate(45deg) scale(9, 1);
-moz-transform: translate(-17px, 0) rotate(45deg) scale(9, 1);
-ms-transform: translate(-17px, 0) rotate(45deg) scale(9, 1);
-o-transform: translate(-17px, 0) rotate(45deg) scale(9, 1);
transform: translate(-17px, 0) rotate(45deg) scale(9, 1);
}
:host([shape="down"]) line:nth-child(3) {
-webkit-transform: translate(17px, 0) rotate(-45deg) scale(9, 1);
-moz-transform: translate(17px, 0) rotate(-45deg) scale(9, 1);
-ms-transform: translate(17px, 0) rotate(-45deg) scale(9, 1);
-o-transform: translate(17px, 0) rotate(-45deg) scale(9, 1);
transform: translate(17px, 0) rotate(-45deg) scale(9, 1);
}
:host([shape="copy"]) line:nth-child(1) {
-webkit-transform: translate(-9px, -10px) scale(9, 10);
-moz-transform: translate(-9px, -10px) scale(9, 10);
-ms-transform: translate(-9px, -10px) scale(9, 10);
-o-transform: translate(-9px, -10px) scale(9, 10);
transform: translate(-9px, -10px) scale(9, 10);
}
:host([shape="copy"]) line:nth-child(2) {
-webkit-transform: translate(0, 0) scale(9, 10);
-moz-transform: translate(0, 0) scale(9, 10);
-ms-transform: translate(0, 0) scale(9, 10);
-o-transform: translate(0, 0) scale(9, 10);
transform: translate(0, 0) scale(9, 10);
stroke: var(--shape-shifter-secondary-color, #ffffff);
}
:host([shape="copy"]) line:nth-child(3) {
-webkit-transform: translate(9px, 10px) scale(9, 10);
-moz-transform: translate(9px, 10px) scale(9, 10);
-ms-transform: translate(9px, 10px) scale(9, 10);
-o-transform: translate(9px, 10px) scale(9, 10);
transform: translate(9px, 10px) scale(9, 10);
}
:host([shape="edit"]) line:nth-child(1) {
-webkit-transform: translate(-19.5px, 20.5px) scale(2.8, 2.8);
-moz-transform: translate(-19.5px, 20.5px) scale(2.8, 2.8);
-ms-transform: translate(-19.5px, 20.5px) scale(2.8, 2.8);
-o-transform: translate(-19.5px, 20.5px) scale(2.8, 2.8);
transform: translate(-19.5px, 20.5px) scale(2.8, 2.8);
}
:host([shape="edit"]) line:nth-child(2) {
-webkit-transform: translate(-17.3px, 18.3px) rotate(45deg) scale(4, 1);
-moz-transform: translate(-17.3px, 18.3px) rotate(45deg) scale(4, 1);
-ms-transform: translate(-17.3px, 18.3px) rotate(45deg) scale(4, 1);
-o-transform: translate(-17.3px, 18.3px) rotate(45deg) scale(4, 1);
transform: translate(-17.3px, 18.3px) rotate(45deg) scale(4, 1);
stroke: var(--shape-shifter-secondary-color, #ffffff);
}
:host([shape="edit"]) line:nth-child(3) {
-webkit-transform: translate(2px, -1px) rotate(45deg) scale(4, 9);
-moz-transform: translate(2px, -1px) rotate(45deg) scale(4, 9);
-ms-transform: translate(2px, -1px) rotate(45deg) scale(4, 9);
-o-transform: translate(2px, -1px) rotate(45deg) scale(4, 9);
transform: translate(2px, -1px) rotate(45deg) scale(4, 9);
}
:host([shape="trash"]) line:nth-child(1) {
-webkit-transform: translate(0, 13px) scale(10, 8);
-moz-transform: translate(0, 13px) scale(10, 8);
-ms-transform: translate(0, 13px) scale(10, 8);
-o-transform: translate(0, 13px) scale(10, 8);
transform: translate(0, 13px) scale(10, 8);
}
:host([shape="trash"]) line:nth-child(2) {
-webkit-transform: translate(0, -22px) scale(11.5, 2);
-moz-transform: translate(0, -22px) scale(11.5, 2);
-ms-transform: translate(0, -22px) scale(11.5, 2);
-o-transform: translate(0, -22px) scale(11.5, 2);
transform: translate(0, -22px) scale(11.5, 2);
}
:host([shape="trash"]) line:nth-child(3) {
-webkit-transform: translate(0, -29px) scale(2.5, 2.5);
-moz-transform: translate(0, -29px) scale(2.5, 2.5);
-ms-transform: translate(0, -29px) scale(2.5, 2.5);
-o-transform: translate(0, -29px) scale(2.5, 2.5);
transform: translate(0, -29px) scale(2.5, 2.5);
}
:host([shape="home"]) line:nth-child(1) {
-webkit-transform: translate(0, 2px) rotate(45deg) scale(10, 10);
-moz-transform: translate(0, 2px) rotate(45deg) scale(10, 10);
-ms-transform: translate(0, 2px) rotate(45deg) scale(10, 10);
-o-transform: translate(0, 2px) rotate(45deg) scale(10, 10);
transform: translate(0, 2px) rotate(45deg) scale(10, 10);
}
:host([shape="home"]) line:nth-child(2) {
-webkit-transform: translate(0, 21px) scale(15, 9);
-moz-transform: translate(0, 21px) scale(15, 9);
-ms-transform: translate(0, 21px) scale(15, 9);
-o-transform: translate(0, 21px) scale(15, 9);
transform: translate(0, 21px) scale(15, 9);
stroke: var(--shape-shifter-secondary-color, #ffffff);
}
:host([shape="home"]) line:nth-child(3) {
-webkit-transform: translate(0, 19px) scale(10, 6.5);
-moz-transform: translate(0, 19px) scale(10, 6.5);
-ms-transform: translate(0, 19px) scale(10, 6.5);
-o-transform: translate(0, 19px) scale(10, 6.5);
transform: translate(0, 20px) scale(10, 7);
}
:host([shape="save"]) line:nth-child(1) {
-webkit-transform: translate(0, 0) scale(13, 13);
-moz-transform: translate(0, 0) scale(13, 13);
-ms-transform: translate(0, 0) scale(13, 13);
-o-transform: translate(0, 0) scale(13, 13);
transform: translate(0, 0) scale(13, 13);
}
:host([shape="save"]) line:nth-child(2) {
-webkit-transform: translate(0, 18px) scale(8, 5);
-moz-transform: translate(0, 18px) scale(8, 5);
-ms-transform: translate(0, 18px) scale(8, 5);
-o-transform: translate(0, 18px) scale(8, 5);
transform: translate(0, 18px) scale(8, 5);
stroke: var(--shape-shifter-secondary-color, #ffffff);
}
:host([shape="save"]) line:nth-child(3) {
-webkit-transform: translate(12px, 18px) scale(1.8, 3.5);
-moz-transform: translate(12px, 18px) scale(1.8, 3.5);
-ms-transform: translate(12px, 18px) scale(1.8, 3.5);
-o-transform: translate(12px, 18px) scale(1.8, 3.5);
transform: translate(12px, 18px) scale(1.8, 3.5);
}
</style>
<template>
<svg viewBox="0 0 100 100" stroke$="{{ color }}">
<g transform="translate(50, 50)">
<line x1="-3" y1="0" x2="3" y2="0" />
<line x1="-3" y1="0" x2="3" y2="0" />
<line x1="-3" y1="0" x2="3" y2="0" />
</g>
</svg>
</template>
<script>
Polymer({
is: "shape-shifter",
properties: {
shape: {
type: String,
reflectToAttribute: true
},
color: String,
springy: {
type: Boolean,
value: false,
reflectToAttribute: true
}
}
});
</script>
</dom-module>