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/CACGqRCAex41_sOj3zBeTpaGb0U4g2GjUG7nSc%3DmDg0C_95-FUA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
