css - How to customize predefined elements -
i want change color values of polymer paper-input.
i read guide, didn't made sense me. never worked css variables, should done according mozilla css specs
// shadow dom body /deep/ .gold-cc-cvc-input::shadow { --paper-input-container-focus-color: $color; --paper-input-container-color: $color; --paper-input-container-invalid-color: $color; --paper-input-container-input-color: $color; text-align: left; margin: auto; }
i tried execute css variables, styles don't apply.
i'm running in circles here, awesome if polymer experience me.
well, thing missing here fact need is="custom-style"
attribute on styles.
<style is="custom-style">..</style>
also body /deep/ .gold-cc-cvc-input::shadow
doesn't work reason, ended using :root .gold-cc-cvc-input
instead.
final code:
:root .forms-input { --paper-input-container-focus-color: $color; --paper-input-container-color: $color; --paper-input-container-invalid-color: $color; --paper-input-container-input-color: $color; }
if polymer team reads this: ps: documentation needs complete code examples, hard guess there. less text more code !
Comments
Post a Comment