@vuesax-alpha/nightly/theme-chalk/vs-input.css

A Component Library for Vue 3

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.clearable-transition-enter-active{animation:clearable-transition .22s ease-out}.clearable-transition-leave-active{animation:clearable-transition .22s ease-in reverse}@keyframes clearable-transition{0%{right:var(--vs-input-default-icon-init-right);opacity:.2}30%{opacity:.7}100%{right:var(--vs-input-default-icon-right)}}input[class*=vs][type=search]::-ms-clear,input[class*=vs][type=search]::-ms-reveal{display:none;width:0;height:0}input[class*=vs][type=search]::-webkit-search-cancel-button,input[class*=vs][type=search]::-webkit-search-decoration,input[class*=vs][type=search]::-webkit-search-results-button,input[class*=vs][type=search]::-webkit-search-results-decoration{display:none}.vs-input{--vs-color:var(--vs-primary)}.vs-input{display:flex;justify-content:center;align-items:flex-start;flex-direction:column;position:relative}.vs-input--state-success .vs-input__original{background:rgba(var(--vs-success),.1)!important;color:rgba(var(--vs-success),1)}.vs-input--state-success .vs-input__label{color:rgba(var(--vs-success),1)}.vs-input--state-success .vs-input__placeholder--float{color:rgba(var(--vs-success),1)}.vs-input--state-success .vs-input__icon{color:rgba(var(--vs-success),1);background:rgba(var(--vs-success),.1);box-shadow:-15px 10px 10px -10px rgba(var(--vs-success),.1)}.vs-input--state-danger .vs-input__original{background:rgba(var(--vs-danger),.1)!important;color:rgba(var(--vs-danger),1)}.vs-input--state-danger .vs-input__label{color:rgba(var(--vs-danger),1)}.vs-input--state-danger .vs-input__placeholder--float{color:rgba(var(--vs-danger),1)}.vs-input--state-danger .vs-input__icon{color:rgba(var(--vs-danger),1);background:rgba(var(--vs-danger),.1);box-shadow:-15px 10px 10px -10px rgba(var(--vs-danger),.1)}.vs-input--state-dark .vs-input__original{background:rgba(var(--vs-dark),.1)!important;color:rgba(var(--vs-dark),1)}.vs-input--state-dark .vs-input__label{color:rgba(var(--vs-dark),1)}.vs-input--state-dark .vs-input__placeholder--float{color:rgba(var(--vs-dark),1)}.vs-input--state-dark .vs-input__icon{color:rgba(var(--vs-dark),1);background:rgba(var(--vs-dark),.1);box-shadow:-15px 10px 10px -10px rgba(var(--vs-dark),.1)}.vs-input--state-primary .vs-input__original{background:rgba(var(--vs-primary),.1)!important;color:rgba(var(--vs-primary),1)}.vs-input--state-primary .vs-input__label{color:rgba(var(--vs-primary),1)}.vs-input--state-primary .vs-input__placeholder--float{color:rgba(var(--vs-primary),1)}.vs-input--state-primary .vs-input__icon{color:rgba(var(--vs-primary),1);background:rgba(var(--vs-primary),.1);box-shadow:-15px 10px 10px -10px rgba(var(--vs-primary),.1)}.vs-input--state-warn .vs-input__original{background:rgba(var(--vs-warn),.1)!important;color:rgba(var(--vs-warn),1)}.vs-input--state-warn .vs-input__label{color:rgba(var(--vs-warn),1)}.vs-input--state-warn .vs-input__placeholder--float{color:rgba(var(--vs-warn),1)}.vs-input--state-warn .vs-input__icon{color:rgba(var(--vs-warn),1);background:rgba(var(--vs-warn),.1);box-shadow:-15px 10px 10px -10px rgba(var(--vs-warn),.1)}.vs-input.is-square .vs-input__wrapper{border-radius:0!important}.vs-input.is-text-white .vs-input__original{color:#fff}.vs-input.is-transparent .vs-input__original{background-color:transparent!important}.vs-input.is-block{width:100%}.vs-input.is-block .vs-input__original{width:100%}.vs-input.is-focus.vs-input--has-icon:not(.vs-input--icon-after) .vs-input__original{padding-left:40px}.vs-input.is-focus.vs-input--has-icon:not(.vs-input--icon-after) .vs-input__icon{box-shadow:15px 10px 10px -10px rgba(0,0,0,var(--vs-shadow-opacity))}.vs-input.is-focus.vs-input--has-icon:not(.vs-input--icon-after) .vs-input__placeholder:not(.vs-input__placeholder-float){left:48px}.vs-input.is-focus.vs-input--has-icon.vs-input--icon-after .vs-input__label{left:44px}.vs-input.is-focus.vs-input--has-icon.vs-input--icon-after .vs-input__label--placeholder{transform:translate(-25px,-80%)!important}.vs-input.is-focus.vs-input--has-color .vs-input__original{border-bottom:2px solid rgba(var(--vs-color),1)}.vs-input.is-focus.vs-input--has-color .vs-input__icon{color:rgba(var(--vs-color),1)}.vs-input.is-focus.vs-input--has-color .vs-input__label{color:rgba(var(--vs-color),1)}.vs-input.is-focus.vs-input--has-color .vs-input__label--placeholder{color:rgba(var(--vs-color),1)}.vs-input.is-focus.vs-input--icon-after .vs-input__icon{transform:translate(6px,-6px)}.vs-input.is-focus .vs-input__original{background:rgba(var(--vs-gray-3),1);padding-left:15px}.vs-input.is-focus .vs-input__icon{box-shadow:-15px 10px 10px -10px rgba(0,0,0,var(--vs-shadow-opacity));transform:translate(-6px,-6px);background:rgba(var(--vs-gray-1),1)}.vs-input.is-focus .vs-input__clearable{right:var(--vs-input-default-icon-right)}.vs-input.is-focus .vs-input__placeholder:not(.vs-input__placeholder--float){opacity:0;left:20px}.vs-input.is-focus .vs-input__placeholder--float{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-3%,-80%);font-size:.75rem}.vs-input.is-hovering .vs-input__clearable{right:var(--vs-input-default-icon-right)}.vs-input.is-hovering.vs-input--icon-clearable.vs-input--icon-eye .vs-input__original{padding-right:53px}.vs-input.is-border .vs-input__icon{background:0 0!important;box-shadow:none!important}.vs-input.is-border .vs-input__wrapper{border-radius:0}.vs-input.is-border .vs-input__affects{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}.vs-input.is-border .vs-input__affects--1{border-bottom:2px solid rgba(var(--vs-gray-3),1);width:100%;height:2px;position:absolute;bottom:0;transition:var(--vs-transition-ease);border-radius:4px}.vs-input.is-border .vs-input__affects--2{border-bottom:2px solid rgba(var(--vs-color),1);width:0%;height:2px;position:absolute;bottom:0;transition:var(--vs-transition-ease);left:50%;transform:translate(-50%);border-radius:4px}.vs-input.is-border .vs-input__original{background:0 0;border-radius:0}.vs-input.is-border.is-focus .vs-input__affects--2{width:100%}.vs-input.is-shadow .vs-input__icon{background:0 0;z-index:100}.vs-input.is-shadow .vs-input__affects{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:inherit;pointer-events:none;z-index:10}.vs-input.is-shadow .vs-input__affects--1{box-shadow:0 6px 25px -6px rgba(0,0,0,var(--vs-shadow-opacity));width:100%;height:100%;position:absolute;top:0;transition:var(--vs-transition-ease);z-index:200;border-radius:inherit}.vs-input.is-shadow .vs-input__original{background:0 0;border-radius:0;border:2px solid transparent}.vs-input.is-shadow.is-focus .vs-input__icon{background:rgba(var(--vs-background),1)!important;opacity:1;box-shadow:0 10px 20px -5px rgba(0,0,0,var(--vs-shadow-opacity))!important}.vs-input.is-shadow.is-focus .vs-input__affects--1{transform:translate(0,3px);box-shadow:0 0 3px 0 rgba(0,0,0,var(--vs-shadow-opacity))}.vs-input--has-label{margin-top:24px!important}.vs-input--has-icon .vs-input__original{padding-left:38px}.vs-input--has-icon .vs-input__placeholder{left:44px}.vs-input--has-icon .vs-input__label{left:44px}.vs-input--has-icon .vs-input__icon{pointer-events:auto!important;cursor:pointer}.vs-input--has-icon .vs-input__icon:hover{box-shadow:15px 10px 10px -10px rgba(0,0,0,var(--vs-shadow-opacity));transform:translate(-6px,-6px);background:rgba(var(--vs-gray-1),1)}.vs-input--has-icon.vs-input--icon-after .vs-input__label{transform:translate(-33px,-80%)}.vs-input--has-icon.vs-input--icon-after .vs-input__icon{box-shadow:-15px 10px 10px -10px rgba(0,0,0,var(--vs-shadow-opacity))}.vs-input--has-icon.vs-input--icon-after .vs-input__icon:hover{transform:translate(6px,-6px)}.vs-input--icon-after .vs-input__clearable{--vs-input-default-icon-init-right:30px;--vs-input-default-icon-right:40px}.vs-input--icon-after .vs-input__icon--password{--vs-input-default-icon-init-right:30px;--vs-input-default-icon-right:40px}.vs-input--icon-after .vs-input__original{padding-left:7px;padding-right:38px}.vs-input--icon-after.vs-input--icon-clearable.vs-input--icon-eye{padding-right:90px}.vs-input--icon-after .vs-input__placeholder{left:13px}.vs-input--icon-after .vs-input__icon{left:auto;right:2px;box-shadow:-12px 0 10px -10px rgba(0,0,0,var(--vs-shadow-opacity))}.vs-input--icon-eye .vs-input__original{padding-right:33px}.vs-input--icon-eye.vs-input--icon-after .vs-input__original{padding-right:60px}.vs-input--icon-eye.vs-input--icon-clearable .vs-input__original{padding-right:56px}.vs-input--icon-eye .vs-input__clearable{--vs-input-default-icon-right:30px}.vs-input--icon-clearable .vs-input__original{padding-right:34px}.vs-input--icon-clearable.vs-input--icon-eye .vs-input__original{padding-right:56px}.vs-input--icon-clearable.vs-input--icon-after .vs-input__original{padding-right:62px}.vs-input__wrapper{--vs-input-default-icon-init-right:2px;--vs-input-default-icon-right:8px;display:flex;justify-content:flex-start;align-items:center;position:relative;border-radius:12px;width:100%}.vs-input__wrapper.is-disabled>*{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-input__clearable{--vs-color:var(--vs-text);position:absolute;right:var(--vs-input-default-icon-init-right);top:50%;transform:translateY(-50%);z-index:9998;width:22px;height:22px;display:flex;justify-content:center;align-items:center;border-radius:var(--vs-border-radius-full);cursor:pointer;background-color:rgba(var(--vs-gray-2),1)}.vs-input__clearable .vs-icon-close{transform:scale(.7)}.vs-input__original{border:2px solid transparent;background:rgba(var(--vs-gray-2),1);color:rgba(var(--vs-text),1);padding:7px 13px;border-radius:inherit;transition:var(--vs-transition-ease);padding-left:10px;width:200px}.vs-input__icon{position:absolute;right:auto;width:36px;height:36px;display:flex;justify-content:center;align-items:center;box-shadow:12px 0 10px -10px rgba(0,0,0,var(--vs-shadow-opacity));transition:var(--vs-transition-ease);border-radius:inherit;background:rgba(var(--vs-gray-2),1);pointer-events:none;left:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-input__icon--password{position:absolute;right:var(--vs-input-default-icon-right);top:50%;transform:translateY(-50%);z-index:var(--vs-z-index-popper);width:22px;height:22px;display:flex;justify-content:center;align-items:center;border-radius:var(--vs-border-radius-full);cursor:pointer}.vs-input__placeholder{position:absolute;left:13px;font-size:.8rem;transition:var(--vs-transition-ease);cursor:text;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;height:100%;display:flex;justify-content:flex-start;align-items:center;opacity:.4}.vs-input__placeholder--hidden{opacity:0;visibility:hidden}.vs-input__placeholder--hidden.vs-input__placeholder--float{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-3%,-80%);font-size:.75rem}.vs-input__label{position:absolute;left:13px;transition:var(--vs-transition-ease);cursor:text;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:100%;display:flex;justify-content:flex-start;align-items:center;pointer-events:auto;transform:translate(-2px,-77%);font-size:.75rem}.vs-input__progress{width:95%;position:relative;height:2px;background:rgba(var(--vs-gray-2),1);margin-top:5px;overflow:hidden;border-radius:5px}.vs-input__progress--danger .vs-input__progress--bar{background:rgba(var(--vs-danger),1)}.vs-input__progress--warn .vs-input__progress--bar{background:rgba(var(--vs-warn),1)}.vs-input__progress--success .vs-input__progress--bar{background:rgba(var(--vs-success),1)}.vs-input__progress--bar{width:32%;height:2px;max-width:100%;transition:var(--vs-transition-ease);border-radius:5px}.vs-input__message{font-size:.7rem;padding:0 7px;padding-top:2px;transition:var(--vs-transition-ease);overflow:hidden}.vs-input__message--success{color:rgba(var(--vs-success),1)}.vs-input__message--danger{color:rgba(var(--vs-danger),1)}.vs-input__message--warn{color:rgba(var(--vs-warn),1)}.vs-input__message--dark{color:rgba(var(--vs-dark),1)}.vs-input__message--primary{color:rgba(var(--vs-primary),1)}.vs-input__loading{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;display:flex;justify-content:center;align-items:center;background-color:rgba(var(--vs-gray-2),.3);z-index:var(--vs-transition-ease);cursor:default}.vs-input__loading .vs-icon-loading{transform:scale(.5)}