Try this:

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



On Friday, June 19, 2015 at 6:03:57 AM UTC-7, [email protected] wrote:
>
> Hi,
>
> My name is Petar and I have some problems with the custom css properties.
> This is a simple example:
>
> <link rel="import" href="/bower_components/polymer/polymer.html">
> <link rel="import" href="/bower_components/iron-icon/iron-icon.html">
> <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
>
> <dom-model id="cg-alert">
>    <style>
>       :host {
>       }
>
>       #alert {
>          padding: 15px;
>          border: 1px solid transparent;
>          border-radius: 4px;
>       }
>
>       #alert[type=success] {
>          color: var(--cg-alert-success-color, #3c763d);
>          background-color: var(--cg-alert-success-background-color, #dff0d8);
>          border-color: var(--cg-alert-success-border-color, #d6e9c6);
>       }
>
>       #alert[type=error] {
>          color: var(--cg-alert-error-color, #a94442);
>          background-color: var(--cg-alert-error-background-color, #f2dede);
>          border-color: var(--cg-alert-error-border-color, #ebccd1);
>       }
>    </style>
>
>    <template>
>       <template is="dom-if" if="{{ isAlertVisible(message) }}">
>          <div id="alert" type$="{{ type }}">
>             <iron-icon icon="{{ alertIconType(type) }}"></iron-icon>
>             <span>{{ message }}</span>
>          </div>
>       </template>
>    </template>
>
>    <script>
>       Polymer({
>          is: 'cg-alert',
>          types: {
>             success: {
>                icon: 'done'
>             },
>             error: {
>                icon: 'error'
>             }
>          },
>          properties: {
>             type: {
>                type: String,
>                value: ''
>             },
>             message: {
>                type: String,
>                value: 'asdgasdg'
>             }
>          },
>          isAlertVisible: function(message) {
>             return message && message != '' ? true : false;
>          },
>          alertIconType: function(type) {
>             return this.types[type] && this.types[type].icon;
>          }
>       });
>    </script>
> </dom-model>
>
>
> This styling works on Firefox 38, but it doesn't seems to work on Chrome 
> 43 and Opera 27. The problem is'n in the default values, I tried to 
> override them and there is no deference.
> Am I missing something?
>
> Greetings,
> Petar
>

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/fc0d33ad-7896-4b89-9826-ec749f27a062%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to