Geek Answers Handbook

Polymer 1.2: change the selected background color

I was looking for my problem and found this

However, the decision made does not work for me, but I can’t comment, since I have only 6 Reputations -.-

So, the Situation, I want to use a paper-item from the Polymer frame inside the paper list. It works, but when you select an item by clicking on it, the background changes to gray ... Documents and the answer to the question that I connected with abvoe, suggest overwriting - mix-item-selected / -paper-item-focus mixin, but this does not work for me.

My code is:

<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>

Code of the main document:

 ... <!-- 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>
+6
source share
2 answers

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

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

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); }

You can see that the only mixin using the default color is --paper-item-focused-before , which applies the style to the pseudo-element :before <paper-item> .

+5
source

- document-oriented-before: {background: transparent; };

0
source

More articles:


All Articles