CODEWITHSUNDEEP
csspolymershadow-dom
Silom
Silom

Reputation: 746

How to customize predefined elements

I want to change the color values of the polymer paper-input.

I read the guide, but it didn't made sense for me. I never worked with CSS variables, but this is what should be done according to the Mozilla CSS specs

// For 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 to execute the CSS variables, but the styles don't apply.

I'm running in circles here, would be awesome if someone with polymer experience could help me.

Upvotes: 0

Views: 268

Answers (1)

Silom
Silom

Reputation: 746

Well, the only thing that is missing here is the fact that you need the is="custom-style" attribute on your styles.

  <style is="custom-style">..</style>

Also body /deep/ .gold-cc-cvc-input::shadow doesn't work for some reason, I ended up 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 someone from the Polymer team reads this: PS: You documentation needs complete code examples, it is very hard to guess anything there. Less Text More Code !

Upvotes: 1

Related Questions