Estou usando o polímero 3 e o elemento lit (2.2.1). A versão do mwc-textfield é 0.13.0. Eu li as documentações relacionadas a esta versão. Nesta documentação , descobri que podemos adicionar mixin para altura. Eu tentei de várias maneiras, mas não tive sucesso. Pode ser que a sintaxe que estou usando esteja errada. Quero diminuir a altura do meu campo de texto. Este é o meu campo de texto
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
e meu 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%;
}
O css padrão aplicado é
: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;
}
A altura padrão aplicada ao campo de texto é 56px. O que eu tentei é
#textbox.mdc-text-field--height{
height:45px;
}
e
#textbox.mdc-text-field--height('45px');
e também adicionou mixin no arquivo de módulos do nó como height: var (- mdc-text-field-height, 56px); e usado em css como
#textBox{
--mdc-text-field-height:45px;
}
Qualquer ajuda seria muito apreciada! Desde já, obrigado.