@import "variables"; vn-textfield { margin: 20px 0!important; display: inline-block; width: 100%; & > .container { width: 100%; position: relative; padding-bottom: 2px; display: flex; & > .textField { width: 100%; display: flex; align-items: center; position: relative; padding-top: 4px; } } .leftIcons, .rightIcons, .suffix { display: flex; color: $color-font-secondary; .material-icons { font-size: 20px !important } } t-left-icons { padding-right: 0.5em } t-right-icons { padding-left: 0.5em } .infix { position: relative; display: block; flex: auto; width: 100%; min-width: 0; } i.clear { visibility: hidden; cursor: pointer; &:hover { color: #222; } } &:hover i.clear { visibility: visible; } i.visible { visibility: visible; } label { position: absolute; bottom: 0; left: 0; padding: 4px 0!important; pointer-events: none; color: $color-font-secondary; transition-duration: .2s; transition-timing-function: cubic-bezier(.4,0,.2,1); } &.not-empty label{ bottom: 24px; color: $color-main; padding: 0; font-size: 12px; } input { outline: none; border: none; font-family: "Helvetica", "Arial", sans-serif; display: block; font-size: 16px; width: 100%; background: 0 0; color: inherit; padding: 4px; box-sizing: border-box; border-bottom: 0!important; &[type=number] { -moz-appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } &:invalid { box-shadow: none; } } .underline { position: absolute; bottom: 0; height: 1px; content: ' '; pointer-events: none; width: 100%; background-color: $color-input-underline; } .selected.underline { background-color: $color-main; height: 2px; left: 50%; width: 0px !important; transition-duration: 0.2s; transition-timing-function: cubic-bezier(.4,0,.2,1); } div.selected { &.container{ border-bottom: 0px; } label { bottom: 24px; color: $color-main; font-size: 12px; } .selected.underline{ left: 0; width: 100%!important; } } & > div.container > div.textField > div.infix.invalid { @extend div.selected; & > span.mdl-textfield__error { visibility: visible; } & > label { color: #d50000; } } .infix.invalid + .underline { background-color: #d50000; } }