Menu
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>
624
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
: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>.
68
--paper-item-focused-before: { background: transparent; };
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
