Implement element for awesome shape shifting icons!

2013-11-17 21:12:06 +01:00 · 2013-11-17 21:12:06 +01:00 · e8ba28b5b2
parent 07552ceadb
commit e8ba28b5b2
1 changed files with 98 additions and 0 deletions
--- a/src/components/shapeshifter.html
+++ b/src/components/shapeshifter.html
@ -0,0 +1,98 @@
+<polymer-element name="safe-shapeshifter" attributes="shape">
+    <template>
+        <style>
+            :host {
+                display: inline-block;
+                min-width: 30px;
+                min-height: 30px;
+                position: relative;
+                border: solid 1px;
+            };
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+
+            line {
+                stroke: #333;
+                stroke-width: 2;
+                -webkit-transform-origin: center center;
+                -webkit-transition: -webkit-transform 0.5s;
+                -webkit-transform: translate(0, 0) scale(0);
+            }
+
+            .plus line:nth-child(1) {
+                -webkit-transform: translate(0, 0) scale(10, 1);
+            }
+
+            .plus line:nth-child(3) {
+                -webkit-transform: translate(0, 0) rotate(90deg) scale(10, 1);
+            }
+
+            .cancel line:nth-child(1) {
+                -webkit-transform: translate(0, 0) rotate(135deg) scale(10, 1);
+            }
+
+            .cancel line:nth-child(3) {
+                -webkit-transform: translate(0, 0) rotate(-135deg) scale(10, 1);
+            }
+
+            .check line:nth-child(1) {
+                -webkit-transform: translate(-7px, 4px) rotate(45deg) scale(5, 1);
+            }
+
+            .check line:nth-child(3) {
+                -webkit-transform: translate(3px, 0) rotate(-45deg) scale(10, 1);
+            }
+
+            .menu line:nth-child(1) {
+                -webkit-transform: translate(0, -7px) scale(10, 1);
+            }
+
+            .menu line:nth-child(2) {
+                -webkit-transform: translate(0, 0) scale(10, 1);
+            }
+
+            .menu line:nth-child(3) {
+                -webkit-transform: translate(0, 7px) scale(10, 1);
+            }
+
+            .more line:nth-child(1) {
+                -webkit-transform: translate(-7px, 0) scale(2, 2);
+            }
+
+            .more line:nth-child(2) {
+                -webkit-transform: translate(0, 0) scale(2, 2);
+            }
+
+            .more line:nth-child(3) {
+                -webkit-transform: translate(7px, 0) scale(2, 2);
+            }
+
+            .arrow-right line:nth-child(1) {
+                -webkit-transform: translate(0, -5px) rotate(45deg) scale(8, 1);
+            }
+
+            .arrow-right line:nth-child(3) {
+                -webkit-transform: translate(0, 5px) rotate(-45deg) scale(8, 1);
+            }
+
+            .arrow-left line:nth-child(1) {
+                -webkit-transform: translate(0, -5px) rotate(-45deg) scale(8, 1);
+            }
+
+            .arrow-left line:nth-child(3) {
+                -webkit-transform: translate(0, 5px) rotate(45deg) scale(8, 1);
+            }
+        </style>
+        <svg class="{{ shape }}" viewBox="0 0 30 30">
+            <line x1="14" y1="15" x2="16" y2="15" />
+            <line x1="14" y1="15" x2="16" y2="15" />
+            <line x1="14" y1="15" x2="16" y2="15" />
+        </svg>
+    </template>
+    <script>
+        Polymer("safe-shapeshifter");
+    </script>
+</polymer-element>