spacify, factor out CSS

Polymer · Apr 4, 2014 · a7d5a7e · a7d5a7e
1 parent 67e4140
commit a7d5a7e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 55 deletions.
diff --git a/elements/x-palette/x-palette.css b/elements/x-palette/x-palette.css
@@ -0,0 +1,60 @@
+:host {
+  position: relative;
+}
+
+#title {
+  height: 54px;
+  line-height: 54px;
+  font-size: 1.5px;
+  padding-left: 22px;
+  background-color: #E0E0E0;
+  border-bottom: 1px solid #E1E1E1;
+}
+
+#list {
+  background-color: #F2F2F2;
+  position: absolute;
+  top: 0;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.item {
+  font-weight: bold;
+  cursor: pointer;
+  padding: 12px;
+  margin: 4px 0;
+  background-color: white;
+  border: 1px solid #D3D2D2;
+  border-radius: 5px;
+  -webkit-transition: border 0.5s;
+}
+
+.group-item {
+  font-weight: 500;
+}
+
+.group-item.palette-selected {
+  color: #4285f4;
+}
+
+.simple-item {
+  height: 40px;
+  line-height: 40px;
+  opacity: 0.7;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  color: #000;
+  white-space: nowrap;
+}
+
+[ishidden] {
+  display: none;
+}
diff --git a/elements/x-palette/x-palette.html b/elements/x-palette/x-palette.html
@@ -8,61 +8,7 @@
 
   <template>
 
-    <style>
-      :host {
-        position: relative;
-      }
-      #title {
-        height: 54px;
-        line-height: 54px;
-        font-size: 1.5px;
-        padding-left: 22px;
-        background-color: #E0E0E0;
-        border-bottom: 1px solid #E1E1E1;
-      }
-      #list {
-        background-color: #F2F2F2;
-        position: absolute;
-        top: 0;
-        right: 0px;
-        left: 0px;
-        bottom: 0px;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-      }
-      .item {
-        font-weight: bold;
-        cursor: pointer;
-        padding: 12px;
-        margin: 4px 0;
-        background-color: white;
-        border: 1px solid #D3D2D2;
-        border-radius: 5px;
-        -webkit-transition: border 0.5s;
-      }
-      .group-item {
-        font-weight: 500;
-      }
-      .group-item.palette-selected {
-        color: #4285f4;
-      }
-      .simple-item {
-        height: 40px;
-        line-height: 40px;
-        opacity: 0.7;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        color: #000;
-        white-space: nowrap;
-      }
-      [ishidden] {
-        display: none;
-      }
-    </style>
+    <link rel="stylesheet" href="x-palette.css">
 
     <x-meta id="meta" categories="{{categories}}"></x-meta>
 
@@ -90,9 +36,12 @@
 
   <script>
     Polymer('x-palette', {
+
       categories: null,
+
       ready: function() {
       },
+
       trackStart: function(event) {
         event.stopPropagation();
         var tag = event.target.getAttribute('tag');
@@ -107,6 +56,7 @@
           this.drag.drag(event);
         }
       },
+
       trackEnd: function(event) {
         event.stopPropagation();
         if (this.drag) {
@@ -120,6 +70,7 @@
         // dropping here sends the item to the bitbucket
         drag.element.parentNode.removeChild(drag.element);
       },
+
       createDragObject: function(tag, event) {
         var meta = this.$.meta.byId(tag);
         var e = event || {};
@@ -130,6 +81,7 @@
           element: elt
         };
       }
+
     });
   </script>