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]<mailto:[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<http://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]<mailto:[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/F9270B849A6A7C478D3C26FDFA973DE9236AAFDA%40C111SMZLMBX01.ERF.thomson.com.
For more options, visit https://groups.google.com/d/optout.
