Added parantheses to [checked] selector and moved style tag into temp…

…late, fixed #7 (hopefully)
fxedel · Jun 27, 2016 · 09dd7d9 · 09dd7d9
1 parent c9d3361
commit 09dd7d9
Showing 1 changed file with 30 additions and 30 deletions.
diff --git a/toggle-icon.html b/toggle-icon.html
@@ -64,38 +64,38 @@
 
 <dom-module id="toggle-icon">
 
-  <style>
-    :host {
-      display: inline-block;
-      position: relative;
-      transition: all .3s;
-      @apply(--toggle-icon);
-    }
-
-    :host[checked] {
-      @apply(--toggle-icon-checked);
-      @apply(--toggle-icon-active);
-    };
-
-    #unchecked, #checked {
-      transition: opacity .3s;
-    }
-
-    #checked {
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-
-    :host:not([checked]) #checked,
-    :host[checked] #unchecked {
-      opacity: 0;
-      pointer-events: none;
-    }
-  </style>
-
   <template>
 
+    <style>
+      :host {
+        display: inline-block;
+        position: relative;
+        transition: all .3s;
+        @apply(--toggle-icon);
+      }
+
+      :host([checked]) {
+        @apply(--toggle-icon-checked);
+        @apply(--toggle-icon-active);
+      };
+
+      #unchecked, #checked {
+        transition: opacity .3s;
+      }
+
+      #checked {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      :host(:not([checked])) #checked,
+      :host([checked]) #unchecked {
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+
     <paper-icon-button
       id="unchecked"
       icon="{{icon}}"