Estoy usando el polímero 3 y el elemento iluminado (2.2.1). La versión de mwc-textfield es 0.13.0. He leído las documentaciones relacionadas con esta versión. En esta documentación , he descubierto que podemos agregar mixin para la altura. Lo había intentado de varias maneras pero no lo logré. Puede que la sintaxis que estoy usando esté mal. Quiero disminuir la altura de mi campo de texto. Este es mi campo de texto
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
y mi css
#textBox{
text-transform: none;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: #fff;
--mdc-text-field-hover-line-color: #f5f5f5;
--mwc-text-width: 100%;
width:100%;
}
El css predeterminado aplicado es
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
background-color: rgb(245, 245, 245);
}
.mdc-text-field {
display: flex;
width: 100%;
}
.mdc-text-field {
height: 56px;
display: inline-flex;
position: relative;
box-sizing: border-box;
will-change: opacity, transform, color;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.mdc-text-field {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
label {
cursor: default;
}
<style>
#textfield {
width: var(--text-field-width,80%);
height: 100%;
position: absolute;
left: 0;
top: -12px;
text-transform: capitalize;
--mwc-text-width: 100%;
}
<style>
mwc-textfield {
--mdc-theme-primary: transparent;
--mdc-text-field-ink-color: black;
--mdc-text-field-fill-color: transparent;
--mdc-text-field-disabled-fill-color: transparent;
}
La altura predeterminada aplicada al campo de texto es 56px. Lo que he intentado es
#textbox.mdc-text-field--height{
height:45px;
}
y
#textbox.mdc-text-field--height('45px');
y también agregó mixin en el archivo de módulos de nodo como height: var (- mdc-text-field-height, 56px); y usado en css como
#textBox{
--mdc-text-field-height:45px;
}
Cualquier ayuda sería muy apreciada! Gracias por adelantado.