This works for me: http://jsbin.com/hefasekiqu/edit?html,output
On Fri, Sep 18, 2015 at 10:42 AM <[email protected]> wrote: > Hi Eric, > > > > I set it as the default here background-color: > var(--edit-label-title-color,blue); > > I also tried to set it up using > > :root { > > --edit-label-title-color:blue; > > } > > Or > > :host { > > --edit-label-title-color:blue; > > } > > > > But this didin’t work neither and I prefer the sortest syntax provided by > var(prop,default) > > > > *From:* Eric Bidelman [mailto:[email protected]] > *Sent:* vendredi 18 septembre 2015 10:38 > *To:* Lepinay, Laurent (Financial&Risk); [email protected] > *Subject:* Re: [polymer-dev] custom css property not working > > > > I don't see where you're defining --edit-label-title-color to be blue. > > > > On Fri, Sep 18, 2015 at 10:27 AM <[email protected]> > wrote: > > Hi there, > > > > I’ve been battling with this for a while now and I can’t figure it out. > > I’m unable to get even a simple custom css property working using polymer. > > > > Here ismy component definition have: > > > > <!-- Import Polymer --> > > <link rel="import" href="bower_components/polymer/polymer.html"> > > > > <!-- Define your custom element --> > > <dom-module id="edit-label"> > > > > <template> > > <style > > > > > .someLabel { > > background-color: var(--edit-label-title-color,blue); > > } > > > > </style> > > > > > > <div hidden$="{{inEditMode}}"> > > <label class=" someLabel ">{{label}}</label> > > <span id="editLabel" class="icon-compose"></span> > > </div> > > <div hidden$="{{!inEditMode}}"> > > <input id="labelInput" value="{{label::input}}"></input> > > <span id="saveLabel" class="edit icon-compose"></span> > > </div> > > > > </template> > > > > > > <script src="bower_components/jquery/dist/jquery.min.js"></script> > > <script src="bower_components/rxjs/dist/rx.all.js"></script> > > <script> > > Polymer({ > > is:'edit-label', > > properties: { > > label:{ > > type:String, > > notify:true > > } > > }, > > ready: function() { > > var $this = this; > > this.inEditMode = false; > > > > Rx.Observable.fromEvent(this.$.editLabel, > 'click').subscribe(function (){ > > $this.inEditMode = true; > > }); > > > > Rx.Observable.fromEvent(this.$.saveLabel, > 'click').subscribe(function (){ > > $this.inEditMode = false; > > }); > > }, > > attached: function() { > > } > > }); > > </script> > > > > </dom-module> > > > > When I run this in Chrome without setting the property I expect the > label to be blue, but instead it keeps it’s default user agent color > (black). > > When I open the chrome dev tool, and I inspect the CSS, I get a warning > “Invalid property value”. > > > > So something is not happening. > > > > Any ideas ? > > > > > > > ------------------------------ > > > This e-mail is for the sole use of the intended recipient and contains > information that may be privileged and/or confidential. If you are not an > intended recipient, please notify the sender by return e-mail and delete > this e-mail and any attachments. Certain required legal entity disclosures > can be accessed on our website. > <http://site.thomsonreuters.com/site/disclosures/> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/F9270B849A6A7C478D3C26FDFA973DE9236AAFBE%40C111SMZLMBX01.ERF.thomson.com > <https://groups.google.com/d/msgid/polymer-dev/F9270B849A6A7C478D3C26FDFA973DE9236AAFBE%40C111SMZLMBX01.ERF.thomson.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCCNstRXEayT44sjAAV_7b6UtZzO-1C6mkTcLW%2BhmwGFmg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
