How to style paper-input with certain mixins (polymer 2)? - css

Question

I'm trying to style a paper-input based on a design I got. I used some of the custom proprieties described here , but not all of them work.
I have problems using --paper-input-container-label and --paper-input-container-input-focus.
Maybe I try to use them the wrong way or it requires some extra steps.
Here is my code
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<dom-module id="first-element">
<template>
<style>
paper-input {
--paper-input-container-color: rgb(64, 64, 64);
--paper-input-container-focus-color: rgb(64, 64, 64);
--paper-input-container: {
border: none;
padding: 0px;
}
--paper-font-subhead: {
font-size: 100%;
}
--paper-input-container-underline-focus: {
display: none;
}
--paper-input-container-underline: {
display: none;
}
--paper-input-container-input: {
height: 24px;
line-height: 20px;
padding: 0 4px;
border: 1px solid rgb(194, 198, 199);
}
--paper-input-container-input-focus: {
border-color:red;
}
--paper-input-container-label {
font-weight: bold;
}
--paper-input-container-invalid-color: red;
}
:host {
display: block;
}
</style>
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="icons:accessible" slot="prefix"></iron-icon>
<div slot="suffix">#email.com</div>
</paper-input>
</template>
<script>
class FirstElement extends Polymer.Element {
static get is() { return 'first-element'; }
static get properties() {
return {
prop1: {
type: String,
value: 'first-element'
}
};
}
}
window.customElements.define(FirstElement.is, FirstElement);
</script>
</dom-module>

Answer 1

I am not sure what result you are expecting so it is hard to help you, but one thing I am sure it's your style tag is so messy. And you need to write a semi-colon after mixins because they are like css properties and every css properties are semi-colon separated.
Try your code like that :
<style>
:host {
display: block;
}
paper-input {
--paper-input-container-color: rgb(64, 64, 64);
--paper-input-container-focus-color: rgb(64, 64, 64);
--paper-input-container: {
border: none;
padding: 0px;
};
--paper-font-subhead: {
font-size: 100%;
};
--paper-input-container-underline-focus: {
display: none;
};
--paper-input-container-underline: {
display: none;
};
--paper-input-container-input: {
height: 24px;
line-height: 20px;
padding: 0 4px;
border: 1px solid rgb(194, 198, 199);
};
--paper-input-container-input-focus: {
border-color: red;
};
--paper-input-container-label: {
font-weight: bold;
};
--paper-input-container-invalid-color: red;
}
</style>
Another thing, you are trying to style the border color of the input on focus but also you are setting display to none which doesn't make sense. You have to remove display: none and add border-color: red; to --paper-input-container-underline-focus if you want to style the color.