@zeit-ui/vue/lib/input.css

A popular UI framework for Vue

.expand-enter-active,.expand-leave-active{transition:height .2s ease;overflow:hidden}.expand-enter,.expand-leave-to{height:0}.zi-input{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Avenir,PingFang SC,Helvetica Neue,Helvetica;padding:0 .6875rem;display:inline-flex;vertical-align:middle;align-items:center;border-radius:5px;background-color:transparent;font-size:.875rem;height:2.3125rem;line-height:1.6875rem;width:auto;outline:0;box-sizing:border-box;margin:4px 10px;-webkit-appearance:none;transition:border .2s ease,color .2s ease}.zi-input.disabled{background:var(--accents-1);color:var(--accents-3);cursor:not-allowed}.zi-input.primary{border:1px solid var(--accents-2)}.zi-input.primary:focus{border-color:var(--accents-4)}.zi-input.danger{border:1px solid rgba(255,0,0,.4);color:var(--geist-error)}.zi-input.danger:focus{border-color:var(--geist-error)}.zi-input.warning{border:1px solid rgba(245,166,35,.4)}.zi-input.warning:focus{border-color:var(--geist-warning)}.zi-input.success{border:1px solid rgba(0,112,243,.4)}.zi-input.success:focus{border-color:var(--geist-success)}.zi-input-group>.zi-label.small,.zi-input.small{font-size:.75rem;height:2rem;line-height:1.375rem}.zi-input-group>.zi-label.mini,.zi-input.mini{font-size:.75rem;height:1.75rem;line-height:1.25rem}.zi-input-group>.zi-label.big,.zi-input-group>.zi-label.huge,.zi-input.big,.zi-input.huge{font-size:1rem;height:2.625rem;line-height:2.375rem}.zi-input-group-empty{display:inline-flex;border-radius:5px;background-color:transparent}.zi-input-group-empty input{flex:1;margin:0}.zi-input-group{display:inline-flex;border-radius:5px;background-color:transparent}.zi-input-group input{flex:1;margin:0}.zi-input-group .zi-label{display:inline-flex;justify-content:center;align-items:center;background-color:var(--accents-1);border-radius:5px;border-bottom:1px solid var(--accents-2);border-top:1px solid var(--accents-2);color:var(--accents-3);font-size:.875rem;line-height:1;width:auto;padding:0 .625rem;user-select:none}.zi-input-group .zi-label svg{margin:0 .25rem;width:1em;height:1em}.zi-input-group.suffix input{border-top-right-radius:0;border-bottom-right-radius:0}.zi-input-group.suffix>.zi-label.suffix{border-left:none;border-right:1px solid var(--accents-2)}.zi-input-group.prefix input,.zi-input-group.suffix>.zi-label.suffix{border-top-left-radius:0;border-bottom-left-radius:0}.zi-input-group.prefix>.zi-label.prefix{border-right:none;border-left:1px solid var(--accents-2);border-top-right-radius:0;border-bottom-right-radius:0}.zi-input-group-empty.clearable,.zi-input-group.clearable{position:relative}.zi-input-group-empty.clearable input,.zi-input-group.clearable input{padding-right:1.75rem}.zi-input-group-empty.clearable .close,.zi-input-group.clearable .close{color:var(--accents-3);width:.8125rem;height:.8125rem;position:absolute;top:50%;right:.625rem;transform:translateY(-50%);z-index:1;background-color:transparent;cursor:pointer;transition:all .15s ease}