.cmi-text-input, .cmi-select-input
position: relative margin: 1.25rem 0 1.5rem 0 font-size: 14px font-size: 0.875rem .cmi-label position: absolute left: 0 font-size: 1em color: color("grey", "lighten-1") pointer-events: none cursor: text +transition(.2s ease-out all) .cmi-input font-size: 1em height: 2em padding: 0 + label, + .cmi-label top: 0.3em .cmi-input, .cmi-textarea background-color: transparent border: none border-bottom: 1px solid $input-color-border outline: none width: 100% margin: 0 +cmi-box-shadow(none) +box-sizing(content-box) +transition(border-bottom .3s ease) &:focus border-bottom: 1px solid $input-color-focus +cmi-box-shadow(0 1px 0 0 $input-color-focus) &.cmi-active, .cmi-input:focus, .cmi-textarea:focus .cmi-label top: 0 font-size: 0.8125em font-weight: 300 +transform(translateY(-80%)) &.cmi-active .cmi-label color: color("grey", "base") .cmi-input:focus, .cmi-textarea:focus + .cmi-label color: $input-color-focus &.cmi-valid .cmi-label color: $input-color-valid .cmi-input, .cmi-textarea border-bottom: 1px solid $input-color-valid +cmi-box-shadow(0 1px 0 0 $input-color-valid) &.cmi-invalid .cmi-label color: $input-color-invalid .cmi-input, .cmi-textarea border-bottom: 1px solid $input-color-invalid +cmi-box-shadow(0 1px 0 0 $input-color-invalid) // hints .cmi-p.cmi-hint margin: 3px 0 0 0 font-size: 0.85em font-weight: 300 text-align: right color: color("grey", "lighten-1") .cmi-p.cmi-hint.cmi-valid color: $input-color-valid .cmi-p.cmi-hint.cmi-invalid color: $input-color-invalid