2

I am learning Polymer. The app I'm building to learn Polymer uses the paper-item element. I've chosen the paper-item for its look. However, when I click the paper-item, the background changes to a dark gray. How do I remove this behavior? I want the background of the paper-item to always be white. Yet, cannot figure out how to set the background color when the paper-item is clicked or selected.

Thank you for your help and have a great holiday season!

xam developer
  • 1,923
  • 5
  • 27
  • 39

2 Answers2

2

I think it's the focused behavior that needs to be changed by redefining the mixin:

<template>
  <style>
    :root /* or paper-item */ {
      --paper-item-focused: {
        background-color: white;
      }
    }
  </style>
  <paper-item></paper-item>
</template>

If this doesn't work try --paper-item-selected instead of --paper-item-focused.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
2

I think you looking for this :

paper-item:focus::before,
paper-item:focus::after {
    color: white;
    opacity: 0;
}

This rule override rules from "bower_components/paper-item/paper-item-shared-styles.html" :

:host(:focus):before, .paper-item:focus:before {
    @apply(--layout-fit);

    background: currentColor;
    content: '';
    opacity: var(--dark-divider-opacity);
    pointer-events: none;

    @apply(--paper-item-focused-before);
}

I don't know where is import the rule on "paper-item:focus::after" but in my Chrome Developper Console I see this and I need to override it to get the behavior you want.

Regards

Thomas Bianconi
  • 21
  • 3