: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: |

*/ .text-input--material { @apply(--input); @apply(--material-font); color: var(--material-text-input-color); background-image: linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px); background-size: 100% 2px; background-repeat: no-repeat; background-position: center bottom; background-color: transparent; font-size: var(--material-text-input-font-size); font-weight: 400; border: none; padding-bottom: 2px; border-radius: 0; height: 24px; vertical-align: middle; -webkit-transform: translate3d(0, 0, 0); /* FIXME: prevent ios flicker */ } .text-input--material__label { @apply(--material-font); color: var(--material-text-input-inactive-color); position: absolute; left: 0; top: 2px; font-size: 16px; font-weight: 400; pointer-events: none; } .text-input--material__label--active { color: var(--material-text-input-active-color); transform: translate(0, -75%) scale(0.75); transform-origin: left top; transition: transform 0.1s ease-in, color 0.1s ease-in; } .text-input--material:focus { background-image: linear-gradient(var(--material-text-input-active-color), var(--material-text-input-active-color)), linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px); animation: material-text-input-animate 0.3s forwards; } .text-input--material::placeholder { @apply(--text-input--material-placeholder); } @keyframes material-text-input-animate { 0% { background-size: 0% 2px, 100% 2px; } 100% { background-size: 100% 2px, 100% 2px; } }