@import "variables"; .vn-field { display: inline-block; box-sizing: border-box; width: 100%; & > .container { display: flex; align-items: stretch; position: relative; outline: none; & > .infix { position: relative; display: flex; flex: auto; width: 100%; min-width: 0; & > label { position: absolute; left: 0; top: 18px; line-height: 20px; pointer-events: none; color: $color-font-bg-marginal; transition-property: top, color, font-size; transition-duration: 400ms; transition-timing-function: cubic-bezier(.4, 0, .2, 1); & > .required { display: none; } } & > .fix { padding-top: 24px; line-height: 24px; font-size: 1rem; opacity: 0; transition: opacity 200ms ease-in-out; &.prefix { padding-right: 5px; } &.suffix { padding-left: 5px; } } & > .control { height: 100%; flex: auto; & > * { padding-top: 24px; padding-bottom: 8px; height: inherit; outline: none; border: none; font-family: Arial, sans-serif; display: block; font-size: 1rem; width: 100%; background: 0; color: inherit; box-sizing: border-box; min-height: 56px; } & > input { position: relative; color: $color-font; &::placeholder { color: $color-font-bg; } &[type=time], &[type=date], &[type=password] { opacity: 0; transition: opacity 200ms ease-in-out; cursor: pointer; } &[type=time], &[type=date] { clip-path: inset(0 20px 0 0); &::-webkit-inner-spin-button, &::-webkit-clear-button { display: none; -webkit-appearance: none; } &::-webkit-calendar-picker-indicator { position: absolute; height: 100%; width: 100%; opacity: 0; cursor: pointer; } } &[type=number] { -moz-appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } &:invalid { box-shadow: none; } &:-internal-autofill-selected { &, &:hover, &:focus, &:active, &:valid { box-shadow: 0 0 0 40px $color-bg-panel inset; } } } } } & > .prepend, & > .append, & > .icons { display: flex; align-items: center; color: $color-font-bg-marginal; } & > .prepend > prepend, & > .append > append, & > .icons { display: flex; align-items: center; & > vn-icon { font-size: 24px; } } & > .prepend > prepend { padding-right: 12px; } & > .icons { &.pre { padding-left: 12px; } & > vn-icon { cursor: pointer; } & > vn-icon[icon=clear] { display: none; } } & > .underline { position: absolute; bottom: 0; content: ' '; pointer-events: none; width: 100%; &.blur { border-bottom: 1px solid $color-input-underline; transition: border-color 200ms ease-in-out; } &.focus { height: 2px; background-color: $color-primary; left: 50%; width: 0; transition-property: width, left, background-color; transition-duration: 300ms; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } } } &.dense { & > .hint { display: none; } & > .container > .infix { & > label { top: 8px; } & > .control > * { padding-top: 8px; min-height: 40px; } } &.not-empty, &.focused, &.invalid { & > .container > .infix > label { top: 0; line-height: 8px; } } } &.standout { border-radius: .1em; background-color: rgba(255, 255, 255, .1); padding: 0 12px; transition-property: background-color, color; transition-duration: 200ms; transition-timing-function: ease-in-out; & > .container { & > .underline { display: none; } & > .infix > .control > * { color: $color-font-dark; &::placeholder { color: $color-font-bg-dark; } } & > .prepend, & > .append, & > .icons { color: $color-font-bg-dark-marginal; } } &.focused { background-color: $color-bg-panel; & > .container { & > .infix > .control > * { color: $color-font; &::placeholder { color: $color-font-bg; } } & > .prepend, & > .append, & > .icons { color: $color-font-bg-marginal; } } } } &.not-empty, &.focused, &.invalid { & > .container > .infix { & > label { top: 5px; color: $color-primary; padding: 0; font-size: 12px; } & > .control > * { &[type=time], &[type=date], &[type=password] { opacity: 1; } } } } &.has-icons, &.not-empty:hover, &.not-empty.focused { & > .container { & > .append > append { padding-left: 0; } & > .icons.pre { padding-left: 12px; } } } &:not(.disabled):not(.readonly) { &.focused > .container > .underline.focus { left: 0; width: 100%; } & > .container:hover > .underline.blur { border-color: $color-input-underline-hover; } &.not-empty:hover, &.not-empty.focused { & > .container > .icons > vn-icon[icon=clear] { display: initial; } } } &.readonly > .container { & > .infix > .control > * { caret-color: transparent; } & > .underline.blur { border-bottom-style: dashed; } } & > .hint { padding: 4px 0; height: 12px; color: rgba(0, 0, 0, .4); font-size: 12px; transform: translateY(-12px); transition-property: opacity, transform, color; transition-duration: 200ms; transition-timing-function: ease-in-out; opacity: 0; visibility: hidden; &.filled { opacity: 1; transform: translateY(0); visibility: visible; } } &.invalid { & > .container { & > .infix > label { color: $color-alert; } & > .underline.focus { background-color: $color-alert; } & > .underline.blur { border-bottom-color: $color-alert; opacity: 1; } } & > .hint { color: $color-alert; } } }