:root { --text-input-font-size: 16px; --text-input-height: 31px; --text-input-border-color: var(--input-border-color); --material-text-input-font-size: 16px; --material-text-input-color: var(--material-text-input-text-color); --text-input: { @apply(--input); @apply(--transparent); letter-spacing: 0; box-shadow: none; color: var(--input-text-color); padding: 0; margin: 0; width: auto; font-size: var(--text-input-font-size); height: var(--text-input-height); font-weight: var(--font-weight); box-sizing: border-box; } --text-input--disabled: { @apply(--disabled); } --text-input--focus: { } --input-placeholder: { @apply(--transparent); color: var(--input-placeholder-color); } --text-input--invalid: { @apply(--transparent); color: var(--input-invalid-text-color); } --text-input-underbar-disabled: { @apply(--input-placeholder); border: none; background-color: transparent; } --text-input--material-placeholder: { color: var(--material-text-input-inactive-color); line-height: 20px; } } /*~ name: Text Input category: Text Input elements: ons-input markup: |
*/ .text-input { @apply(--text-input); } .text-input::-ms-clear { display: none; } .text-input:disabled { @apply(--text-input--disabled); } .text-input::placeholder { color: var(--input-placeholder-color); } .text-input:disabled::placeholder { @apply(--input-placeholder); } .text-input:invalid { @apply(--text-input--invalid); } /*~ name: Underbar Text Input category: Text Input elements: ons-input markup: | */ .text-input--underbar { @apply(--text-input); border: none; background-color: transparent; border-bottom: 1px solid var(--text-input-border-color); border-radius: 0; } .text-input--underbar:disabled { @apply(--text-input--disabled); border: none; background-color: transparent; border-bottom: 1px solid var(--text-input-border-color); } .text-input--underbar:disabled::placeholder { @apply(--text-input-underbar-disabled); } .text-input--underbar:invalid { @apply(--text-input--invalid); border: none; background-color: transparent; border-bottom: 1px solid var(--input-invalid-border-color); } /*~ name: Material Input category: Text Input elements: ons-input markup: |