How to style a drop-down menu (how to use mixins?)

Question

I want the style of the drop-down menu to drop out, especially, for example, the input elements of the paper element. I think I need to find out / understand how mixins work.

I probably need to combine the mixes in the paper drop-down menu with the mixins / custom paper-input-container properties, am I right about that?

https://elements.polymer-project.org/elements/paper-dropdown-menu https://elements.polymer-project.org/elements/paper-input?active=paper-input-container

I don’t even know where to start. The document offers something in curly brackets by default in mixin, so the first step is probably something like this:

paper-dropdown-menu { --paper-dropdown-menu: { something here? } } 

Answer 1

I hardly understand this, but I think that after a big struggle I can shed enough information to get you started.

You can define variables at the ": root" level that you want to use again and again. (Yes, you actually type ": root".) Consider:

 <style is="custom-style"> :root{ --main-color: rgb(244,67,54); --dark-color: rgba(0, 0, 0, 0.258824); --light-color: rgb(153, 153, 153); --app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg); --app-header-background-front-layer-height: 400px; } </style> 

Maybe you are using the Polymer application element, and you see in the docs that you can set the background with:

 app-header { --app-header-background-front-layer: { /*something or other*/ }; --app-header-background-rear-layer: { /*something or other*/ }; } 

Here, where you use the variables assigned at your root level with the var () keyword:

 app-header { --app-header-background-front-layer: { background-image: var(--app-header-background-front-layer-background-image); }; --app-header-background-rear-layer: { /* The header is blue when condensed */ background-color: var(--main-color); }; } 

Here is a sample code:

 <style is="custom-style"> :root{ --main-color: rgb(244,67,54); --dark-color: rgba(0, 0, 0, 0.258824); --light-color: rgb(153, 153, 153); --app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg); --app-header-background-front-layer-height: 400px; } app-header { --app-header-background-front-layer: { background-image: var(--app-header-background-front-layer-background-image); }; --app-header-background-rear-layer: { /* The header is blue when condensed */ background-color: var(--main-color); }; } paper-icon-button { --paper-icon-button-ink-color: white; } paper-dropdown-menu { --paper-input-container-focus:{ color: var(--main-color); }; --paper-input-container: { color: var(--dark-color); }; --paper-input-container-input: { color: var(--light-color); }; --paper-input-container-label: { color: var(--main-color); }; } </style> 

Answer 2

Here you can find some examples:

https://www.polymer-project.org/1.0/docs/devguide/styling.html