PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

--paper-icon-button-disabled Mixin not working anymore? #74

Closed Compufreak345 closed 8 years ago

Compufreak345 commented 8 years ago

I think this might be related to issue #16 : It seems like the --paper-icon-button-disabled Mixin does not work anymore - not sure when my last update was, but it worked before the bower update I did 2 days ago.

I also tried --paper-icon-button-disabled-text that is described as "The color of the disabled button" in the docs, but it also does not seem to work.

http://jsbin.com/terufid/edit?html,output

Just as a workaround for anyone having similar issues :

paper-icon-button {
                color: #03a9f4;
                /* Does not work any more */
                --paper-icon-button-disabled : {
                    color:#bdbdbd;
                }
            }
            /* Workaround for issue : https://github.com/PolymerElements/paper-icon-button/issues/74 */
            paper-icon-button[disabled] {
                color:#bdbdbd;
            }
bicknellr commented 8 years ago

This is a result of Polymer/polymer#3205 - the styles used to implement Shady DOM's CSS scoping for elements that are in the main document's 'light' tree (rather than in a shadow root) are fairly specific (tag:not([style-scope]):not(.style-scope)) and can override internal styles pretty easily. If you enable Shadow DOM, you'll see that the styles are working as intended: http://jsbin.com/qumobi/1/edit?html,output. One way around this is to wrap your element so it's not being styled by a stylesheet in the main document: http://jsbin.com/baquve/1/edit?html,output. Unfortunately, there's not a lot that can be done from within paper-icon-button itself. :/ Keep an eye on the Polymer bug I mentioned above!