New css var name

Breaking change for css vars.
Koada-os · Mar 6, 2017 · 96e5353 · 96e5353
1 parent 1387738
commit 96e5353
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-share-button",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "A Material Design sharing button (Polymer 1.x)",
   "authors": [
     "Zaccharie Jacquat"

diff --git a/paper-share-button.html b/paper-share-button.html
@@ -38,11 +38,12 @@
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--paper-share-button-icon-height` | Height of social media icons | 40px
-`--paper-share-button-icon-width` | Width of social media icons | 40px
-`--paper-share-button-share-icon-height` | Height of social share icon | 40px
-`--paper-share-button-share-icon-width` | Width of social share icon | 40px
-`--paper-share-button-monochrome-color` | The monochrome color | #000000
+`--paper-share-button-icon-color` | The share icon color | black
+`--paper-share-button-icon-height` | Height of share icon | 40px
+`--paper-share-button-icon-width` | Width of share icon | 40px
+`--paper-share-button-brand-icon-monochrome-color` | The monochrome color | black
+`--paper-share-button-brand-icon-height` | Height of social media icons | 40px
+`--paper-share-button-brand-icon-width` | Width of social media icons | 40px
 
 @demo demo/index.html
 -->
@@ -71,7 +72,7 @@
         display: inline-block;
       }
       :host([monochrome]) .social-icon {
-        color: var(--paper-share-button-monochrome-color, #000000) !important;
+        color: var(--paper-share-button-brand-icon-monochrome-color, black) !important;
       }
       #container:hover > #cube { background-color: yellow; }
       .social-list {
@@ -80,17 +81,18 @@
       paper-menu-button {
         padding: 0px;
       }
-      .social-icon {
+      paper-icon-button {
         height: var(--paper-share-button-icon-height, 40px);
         width: var(--paper-share-button-icon-width, 40px);
+        color: var(--paper-share-button-icon-color, black);
       }
-      .dropdown-trigger {
-        height: var(--paper-share-button-share-icon-height, 40px);
-        width: var(--paper-share-button-share-icon-width, 40px);
+      .social-icon {
+        height: var(--paper-share-button-brand-icon-height, 40px);
+        width: var(--paper-share-button-brand-icon-width, 40px);
       }
     </style>
     <paper-menu-button id="shareMenu">
-      <paper-icon-button icon="custom:share" class="dropdown-trigger"></paper-icon-button>
+      <paper-icon-button icon="[[buttonIcon]]" class="dropdown-trigger"></paper-icon-button>
       <paper-material class="dropdown-content">
         <div class="social-list">
           <div>
@@ -134,6 +136,11 @@
                 url: {
                     type: String
                 },
+                /** The icon for the button (share icon by default)*/
+                buttonIcon: {
+                    type: String,
+                    value: 'custom:share'
+                },
                 /** text to share with the URL. (Compatible w/ Twitter / Reddit / Blogger) */
                 sharingText: {
                     type: String,