use a single stylesheet for all paper-items

googlearchive · Jul 22, 2014 · 716b57b · 716b57b
1 parent e97101b
commit 716b57b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 26 deletions.
diff --git a/paper-item.css b/paper-item.css
@@ -1,4 +1,4 @@
-:host {
+html /deep/ paper-item {
   display: block;
   position: relative;
   -webkit-user-select: none;
@@ -8,18 +8,14 @@
   padding: 0 12px;
 }
 
-#ripple {
+html /deep/ paper-item::shadow #ripple {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }
 
-#icon {
+html /deep/ paper-item::shadow #icon {
   margin-right: 8px;
 }
-
-#icon[hidden] {
-  display: none;
-}
diff --git a/paper-item.html b/paper-item.html
@@ -28,11 +28,11 @@
 <link href="../core-icon/core-icon.html" rel="import">
 <link href="../paper-ripple/paper-ripple.html" rel="import">
 
-<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout>
+<link href="paper-item.css" rel="stylesheet" shim-shadowdom>
 
-  <template>
+<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout on-click="{{clickAction}}">
 
-    <link href="paper-item.css" rel="stylesheet">
+  <template>
 
     <paper-ripple id="ripple"></paper-ripple>
 
@@ -55,29 +55,29 @@
          */
         label: '',
 
-       /**
+        /**
          * (optional) The URL of an image for an icon to use in the button.
          * Should not use `icon` property if you are using this property.
          *
          * @attribute iconSrc
          * @type string
          * @default ''
          */
-         iconSrc: {value: ''},
-
-         /**
-          * (optional) Specifies the icon name or index in the set of icons
-          * available in the icon set. If using this property, load the icon
-          * set separately where the icon is used. Should not use `src`
-          * if you are using this property.
-          *
-          * @attribute icon
-          * @type string
-          * @default ''
-          */
-         icon: {value: ''}
-
-      }
+        iconSrc: {value: ''},
+
+        /**
+         * (optional) Specifies the icon name or index in the set of icons
+         * available in the icon set. If using this property, load the icon
+         * set separately where the icon is used. Should not use `src`
+         * if you are using this property.
+         *
+         * @attribute icon
+         * @type string
+         * @default ''
+         */
+        icon: {value: ''}
+
+     }
     });
   </script>
 </polymer-element>