Polymer 1.2: Change paper-item selected background colour

Asked 28/12, 2015 at 11:53 Answered 6/3, 2018 at 10:3

I searched for my problem and found this

However, the accepted solution does not work for me BUT I can't comment, since I have only 6 Reputation yet -.-

So Situation is, I want to use the paper-item from the Polymer framework inside the paper-listbox That works, but when you select an item by clicking on it, the background changes to grey... Docs and the answer to the question I linked abvoe suggest to overwrite --paper-item-selected / --paper-item-focus mixin, but this does not work for me

My code:

<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">


<dom-module id="cit-literal-item">

<template>
    <!-- scoped CSS for this element -->
    <style is="custom-style">
        .spacer {
            @apply(--layout-flex);
        }
        paper-item {
            --paper-item-selected: {
                background-color: #FFFFFF;
            };

            --paper-item-focused: {
                background-color: #FFFFFF;
            };
        }
    </style>
    <paper-item>Test</paper-item>
</template>
</dom-module>

Main Document Code:

...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
    <paper-listbox>
        <cit-literal-item></cit-literal-item>
        <cit-literal-item></cit-literal-item>
    </paper-listbox>
</body>

Produce answered 28/12, 2015 at 11:53 Comment(3)

You don't need is="custom-style" in a Polymer element, this is only necessary if you add the style tag outside of a Polymer elements template, for example in head. – Palocz 28/12, 2015 at 12:12

Thanks for pointing that out! It did not fix my problem, unfortunately :/ – Produce 28/12, 2015 at 12:44

That was expected, otherwise I had added it as answer instead as comment. I don't know why it's not working as expected. – Palocz 28/12, 2015 at 12:45

I found the "solution"! The property I had to overwrite is called --paper-item-focused-before

I looked at the source code of the <paper-item> and found this in the shared-styles.html

shared-styles.html

:host(.iron-selected) {
    font-weight: var(--paper-item-selected-weight, bold);
    @apply(--paper-item-selected);
  }
  :host([disabled]) {
    color: var(--paper-item-disabled-color, --disabled-text-color);
    @apply(--paper-item-disabled);
  }
  :host(:focus) {
    position: relative;
    outline: 0;
    @apply(--paper-item-focused);
  }
  :host(:focus):before {
    @apply(--layout-fit);
    background: currentColor;
    content: '';
    opacity: var(--dark-divider-opacity);
    pointer-events: none;
    @apply(--paper-item-focused-before);
  }

One can see, that the only mixin applying a color by default is --paper-item-focused-before, which applies a style to the :before pseudoelement of the <paper-item>.

Produce answered 28/12, 2015 at 12:59 Comment(2)

I know this is an older thread but I'm having this same issue and the suggestion above is not working for me. Anyone know if there is a way to fix this in the Polymer 1.x versions? – Benkley 7/9, 2017 at 4:20

Hey @EvanCaldwell, if the provided solution is not working for you, I think it is the best to post a new question including your code! Post the link here in the comment! I'll check it out – Produce 7/9, 2017 at 20:15

--paper-item-focused-before: { background: transparent; };

Frisse answered 6/3, 2018 at 10:3 Comment(0)

Recommended topics

Hot tags