vexip-ui/css/input.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-input-vars{--vxp-input-bg-color:var(--vxp-fill-color-base);--vxp-input-bg-color-disabled:var(--vxp-fill-color-humble);--vxp-input-b-color:var(--vxp-border-color-base);--vxp-input-b-color-hover:var(--vxp-color-primary-light-1);--vxp-input-b-color-focus:var(--vxp-input-b-color-hover);--vxp-input-s-color-focus:var(--vxp-color-primary-opacity-6);--vxp-input-placeholder-color:var(--vxp-content-color-placeholder);--vxp-input-control-color:var(--vxp-content-color-base);--vxp-input-control-color-disabled:var(--vxp-content-color-disabled);--vxp-input-icon-color:var(--vxp-content-color-secondary);--vxp-input-icon-color-hover:var(--vxp-color-primary-base);--vxp-input-icon-color-disabled:var(--vxp-input-control-color-disabled);--vxp-input-before-bg-color:var(--vxp-fill-color-background);--vxp-input-after-bg-color:var(--vxp-fill-color-background);--vxp-input-line-height:var(--vxp-line-height-base);--vxp-input-border:var(--vxp-border-shape) var(--vxp-input-b-color);--vxp-input-radius:var(--vxp-radius-base);--vxp-input-count-color:var(--vxp-content-color-secondary);--vxp-input-count-color-disabled:var(--vxp-input-control-color-disabled);--vxp-input-count-font-size:var(--vxp-font-size-secondary);--vxp-input-count-line-height:var(--vxp-line-height-secondary);--vxp-input-height:32px;--vxp-input-v-padding:4px;--vxp-input-h-padding:8px;--vxp-input-padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);--vxp-input-prefix-width:32px;--vxp-input-suffix-width:32px}.vxp-input-wrapper{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;background-color:var(--vxp-input-bg-color);border-radius:var(--vxp-input-radius)}.vxp-input-wrapper,.vxp-input-wrapper *,.vxp-input-wrapper ::after,.vxp-input-wrapper ::before{box-sizing:border-box}.vxp-input-wrapper--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-input{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base)}.vxp-input,.vxp-input *,.vxp-input ::after,.vxp-input ::before{box-sizing:border-box}.vxp-input--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-input{position:relative;display:inline-flex;align-items:center;width:100%;height:var(--vxp-input-height);padding:var(--vxp-input-v-padding) var(--vxp-input-h-padding);cursor:text;background-color:var(--vxp-input-bg-color);border:var(--vxp-border-shape) var(--vxp-input-b-color);border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-input:hover{border-color:var(--vxp-input-b-color-hover)}.vxp-input--focused,.vxp-input:focus,.vxp-input:focus-within{z-index:2;border-color:var(--vxp-input-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-input-s-color-focus)}.vxp-input--small{--vxp-input-height:24px;--vxp-input-v-padding:1px}.vxp-input--large{--vxp-input-height:40px;--vxp-input-v-padding:7px}.vxp-input.vxp-input--success{--vxp-input-b-color:var(--vxp-color-success-light-1);--vxp-input-b-color-hover:var(--vxp-color-success-light-1);--vxp-input-s-color-focus:var(--vxp-color-success-opacity-6)}.vxp-input.vxp-input--error{--vxp-input-b-color:var(--vxp-color-error-light-1);--vxp-input-b-color-hover:var(--vxp-color-error-light-1);--vxp-input-s-color-focus:var(--vxp-color-error-opacity-6)}.vxp-input.vxp-input--warning{--vxp-input-b-color:var(--vxp-color-warning-light-1);--vxp-input-b-color-hover:var(--vxp-color-warning-light-1);--vxp-input-s-color-focus:var(--vxp-color-warning-opacity-6)}.vxp-input--readonly{cursor:auto}.vxp-input--transparent{background-color:transparent}.vxp-input--transparent,.vxp-input--transparent--focused,.vxp-input--transparent:focus,.vxp-input--transparent:focus-within,.vxp-input--transparent:hover{border-color:transparent;box-shadow:unset}.vxp-input--disabled{cursor:not-allowed;background-color:var(--vxp-input-bg-color-disabled)}.vxp-input--disabled,.vxp-input--disabled:focus,.vxp-input--disabled:focus-within,.vxp-input--disabled:hover{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-input--disabled .vxp-input__control,.vxp-input--disabled .vxp-input__icon{color:var(--vxp-input-control-color-disabled);pointer-events:none;cursor:not-allowed}.vxp-input--disabled.vxp-input--focused{border-color:var(--vxp-border-color-base);box-shadow:none}.vxp-input__control{flex:1 0 0;min-width:0;height:100%;padding:0;font-size:inherit;line-height:var(--vxp-input-line-height);color:var(--vxp-input-control-color);background-color:transparent;border:0;border-radius:var(--vxp-input-radius);outline:0;transition:var(--vxp-transition-color)}.vxp-input__control:disabled{cursor:not-allowed}.vxp-input__control::-moz-placeholder{color:var(--vxp-input-placeholder-color)}.vxp-input__control::placeholder{color:var(--vxp-input-placeholder-color)}.vxp-input__control::-ms-clear,.vxp-input__control::-ms-reveal{display:none}.vxp-input--readonly .vxp-input__control{cursor:auto}.vxp-input__icon{display:flex;align-items:center;justify-content:center;height:100%;color:var(--vxp-input-icon-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-input__icon--placeholder{min-width:14px;min-height:1px;margin-inline-start:4px;visibility:hidden;opacity:0}.vxp-input__prefix{margin-inline-end:4px}.vxp-input__suffix{margin-inline-start:4px;transition:var(--vxp-transition-opacity)}.vxp-input__clear{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0}.vxp-input__clear,.vxp-input__loading{position:absolute;inset-inline-end:var(--vxp-input-h-padding);min-width:14px;margin-inline-start:4px;cursor:pointer}.vxp-input__loading{pointer-events:none}.vxp-input-wrapper .vxp-input{flex:1 0 0;width:auto;min-width:0;background-color:transparent;border-radius:0}.vxp-input-wrapper--before-only .vxp-input{border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input-wrapper--after-only .vxp-input{border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input--before{z-index:1;border-inline-start-color:transparent}.vxp-input--after{z-index:1;border-inline-end-color:transparent}.vxp-input__suffix-wrapper{position:relative;display:flex;align-items:center}.vxp-input__clear,.vxp-input__loading{inset-inline-end:0}.vxp-input__password{margin-inline-start:4px;cursor:pointer}.vxp-input__count{margin:0 4px;font-size:var(--vxp-input-count-font-size);line-height:var(--vxp-input-count-line-height);color:var(--vxp-input-count-color);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--vxp-transition-color)}.vxp-input--disabled .vxp-input__count{color:var(--vxp-input-count-color-disabled)}.vxp-input__after,.vxp-input__before{position:relative;display:flex;align-items:center;height:calc(var(--vxp-input-height));padding:0 var(--vxp-input-h-padding);border:var(--vxp-input-border)}.vxp-input__after--action,.vxp-input__before--action{padding:0;border:0}.vxp-input__before{background-color:var(--vxp-input-before-bg-color);border-inline-end:0;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action{margin-inline-end:-1px;background-color:transparent}.vxp-input__before--action>.vxp-button{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-button--icon-only{width:calc(var(--vxp-button-height) + 2 * var(--vxp-input-h-padding))}.vxp-input__before--action>.vxp-input-wrapper,.vxp-input__before--action>.vxp-number-input{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-cascader{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-cascader .vxp-cascader__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-color-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-color-picker .vxp-color-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-date-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-date-picker .vxp-date-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-select{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-select .vxp-select__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__before--action>.vxp-time-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__before--action>.vxp-time-picker .vxp-time-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:var(--vxp-input-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-input-radius)}.vxp-input__after{background-color:var(--vxp-input-after-bg-color);border-inline-start:0;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action{margin-inline-start:-1px;background-color:transparent}.vxp-input__after--action>.vxp-button{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-button--icon-only{width:calc(var(--vxp-button-height) + 2 * var(--vxp-input-h-padding))}.vxp-input__after--action>.vxp-input-wrapper,.vxp-input__after--action>.vxp-number-input{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-cascader{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-cascader .vxp-cascader__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-color-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-color-picker .vxp-color-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-date-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-date-picker .vxp-date-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-select{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-select .vxp-select__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input__after--action>.vxp-time-picker{width:calc(100% + 2 * var(--vxp-input-h-padding));height:100%}.vxp-input__after--action>.vxp-time-picker .vxp-time-picker__selector{min-width:60px;height:100%;background-color:transparent;box-shadow:unset;border-start-start-radius:0;border-start-end-radius:var(--vxp-input-radius);border-end-end-radius:var(--vxp-input-radius);border-end-start-radius:0}.vxp-input--transparent .vxp-input__after,.vxp-input--transparent .vxp-input__before{background-color:transparent}