Hi,
In a top-level 'custom-style' element, I've defined something like this:
:root {
--app-theme: {
--paper-toolbar-background: var(--paper-blue-grey-500);
}
}
Later, in a component which contains another component which contains
another component that contains a toolbar:
:host {
@apply(--app-theme);
}
That doesn't do anything, however. The toolbar background remains the
default indigo-500. If I do this instead:
:host {
--paper-toolbar-background: var(--paper-blue-grey-500);
}
the toolbar's color changes accordingly.
With the mixin, even though the variables defined in it seem to be ignored,
the contents of it are known to the component itself, since doing the
following returns the textual contents of the mixin:
myComponent.getComputedStyleValue('--app-theme')
So what exactly is the problem here? Also, the docs imply that you can have
different mixins with the same name, as long as the selectors are
different, but they don't go into details. If I want to switch between
different app-theme mixins, how would the top-level style selectors looks
like? Would it be something like : ':root { ... }' for the default, then
':root.theme-1 { ... } ' for the first variant, and so on? Or something
like ':root { ... }' and '.theme-1 { ... }'?
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/f5f6ec50-3321-45cc-a63e-0eebc6c8bea8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
