wip

generator/components/card-front.html

@@ -1,96 +0,0 @@
-<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-
-<template id="card-front">
-    <style type='text/css'>
-        :host {
-            /* Fill the whole area of the shadow root */
-            width: 100%;
-            height: 100%;
-            /* Border */
-            padding: 6px;
-            border-radius: 4px;
-            box-sizing: border-box;
-            /* Flex display of children */
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            /* Font */
-            font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
-            font-size: 8pt;
-        }
-
-        ::content > card-title:first-child {
-            margin-top: -2px;
-            margin-bottom: 4px;
-        }
-
-        ::content > card-title:last-child {
-            margin-top: 4px;
-            margin-bottom: -2px;
-        }
-    </style>
-
-    <style type='text/css' id="color-style">
-        :host {
-            color: blue;
-            background-color: blue;
-            border-color: blue;
-        }
-        ::content card-rule /deep/ svg {
-            fill: blue;
-        }
-
-    </style>
-
-
-    <content></content>
-
-</template>
-
-<script>
-    (function (window, document) {
-        var elemName = 'card-front';
-        var mainDoc = document;
-        var importDoc = document.currentScript.ownerDocument;
-
-        var proto = Object.create(HTMLElement.prototype);
-        Object.defineProperty(proto, "color", {
-            get: function () {
-                return "";
-            },
-            set: function (value) {
-                var root = this.shadowRoot;
-                var style = root.getElementById("color-style");
-                style.innerHTML = "\
-                :host {\
-                    color: "+value+";\
-                    background-color: " + value + ";\
-                    border-color: " + value + ";\
-                }\
-                ::content card-rule /deep/ svg {\
-                    fill: " + value + ";\
-                }\
-                ::content card-boxes /deep/ svg rect {\
-                    stroke: " + value + ";\
-                }\
-                ";
-            }
-        });
-        proto.createdCallback = function () {
-            var template = importDoc.getElementById(elemName);
-            var clone = mainDoc.importNode(template.content, true);
-            var root = this.createShadowRoot();
-            root.appendChild(clone);
-
-            this.color = this.getAttribute('color') || "black";
-        }
-        proto.attributeChangedCallback = function (name, oldValue, newValue) {
-            switch (name) {
-                case "color": this.color = newValue; break;
-            }
-        }
-
-        mainDoc.registerElement(elemName, { prototype: proto });
-
-    })(window, document);
-</script>