Merge pull request #32 from sarbull/master

Update paper-tags-input.html. Move style inside of template.
cheonhyangzhang · May 30, 2019 · d2ed81e · d2ed81e
2 parents a72a31e + 7091ec2
commit d2ed81e
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 83 deletions.
diff --git a/paper-tags-input.html b/paper-tags-input.html
@@ -59,21 +59,20 @@
 @demo
 -->
 <dom-module id="paper-tags-input">
-  <style>
-    :host {
-      display: block;
-      box-sizing: border-box;
-      font-family: 'Roboto', 'Noto', sans-serif;
-    }
-    .clearfix:after {
-     content: " ";
-     display: block;
-     height: 0;
-     clear: both;
-    }
-  </style>
-
   <template>
+    <style>
+      :host {
+        display: block;
+        box-sizing: border-box;
+        font-family: 'Roboto', 'Noto', sans-serif;
+      }
+      .clearfix:after {
+        content: " ";
+        display: block;
+        height: 0;
+        clear: both;
+      }
+    </style>
   <h3>{{label}}</h3>
     <div class="clearfix" >
     <template is="dom-repeat" items="{{tags}}">

diff --git a/tag-item.html b/tag-item.html
@@ -21,75 +21,72 @@
 @demo
 -->
 <dom-module id="tag-item">
-
-  <style>
-    :host {
-      display: block;
-      box-sizing: border-box;
-      font-family: 'Roboto', 'Noto', sans-serif;
-    }
-    .tag-value{
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .tag-item-container{
-      background-color: var(--light-primary-color);
-      float: left;
-      margin-left: 6px;
-      margin-bottom: 3px;
-    }
-    .large.tag-item-container{
-      border-radius: 20px;
-      padding-left:14px;
-    }
-    .medium.tag-item-container{
-      border-radius: 17px;
-      padding-left: 11px;
-    }
-    .small.tag-item-container{
-      border-radius: 14px;
-      padding-left: 9px;
-    }
-
-    .large{
-      font-size:18px;
-    }
-    .large paper-icon-button{
-        height: 40px;
-        width: 40px;
-    }
-    .large paper-icon-button::shadow #icon{
-        width: 22px;
-        height: 22px;
-    }
-
-    .medium paper-icon-button{
-        height: 34px;
-        width: 34px;
-    }
-    .medium{
-      font-size:14px;
-    }
-    .medium paper-icon-button::shadow #icon{
-        width: 18px;
-        height: 18px;
-    }
-    .small paper-icon-button{
-        height: 30px;
-        width: 30px;
-    }
-    .small{
-      font-size:12px;
-    }
-    .small paper-icon-button::shadow #icon{
-        width: 14px;
-        height: 14px;
-    }
-
-
-  </style>
-
   <template>
+    <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          font-family: 'Roboto', 'Noto', sans-serif;
+        }
+        .tag-value{
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .tag-item-container{
+          background-color: var(--light-primary-color);
+          float: left;
+          margin-left: 6px;
+          margin-bottom: 3px;
+        }
+        .large.tag-item-container{
+          border-radius: 20px;
+          padding-left:14px;
+        }
+        .medium.tag-item-container{
+          border-radius: 17px;
+          padding-left: 11px;
+        }
+        .small.tag-item-container{
+          border-radius: 14px;
+          padding-left: 9px;
+        }
+
+        .large{
+          font-size:18px;
+        }
+        .large paper-icon-button{
+            height: 40px;
+            width: 40px;
+        }
+        .large paper-icon-button::shadow #icon{
+            width: 22px;
+            height: 22px;
+        }
+
+        .medium paper-icon-button{
+            height: 34px;
+            width: 34px;
+        }
+        .medium{
+          font-size:14px;
+        }
+        .medium paper-icon-button::shadow #icon{
+            width: 18px;
+            height: 18px;
+        }
+        .small paper-icon-button{
+            height: 30px;
+            width: 30px;
+        }
+        .small{
+          font-size:12px;
+        }
+        .small paper-icon-button::shadow #icon{
+            width: 14px;
+            height: 14px;
+        }
+      </style>
+
       <div style$="{{_containerColor(tagColor, fontColor)}}" class$="{{_containerClass(size)}}">
         <span class="tag-value">{{value}}</span>
         <template is="dom-if" if="{{enableRemove}}">
@@ -100,7 +97,6 @@
         </template>
       </div>
   </template>
-
 </dom-module>
 
 <script>