@2e32/react-input
Version:
A React input component
3 lines (2 loc) • 2.52 kB
CSS
:root{--e-colors-blue: #0070f2;--e-colors-darkgray-lighten-80: #d9d9d9;--e-colors-darkgray-lighten-70: #b3b3b3;--e-colors-darkgray-lighten-20: #676767;--e-colors-darkgray: #424242;--e-radius: 4px}.e-input{--box-offset: 10px;--icon-offset: 10px;--asterisk-offset: 4px;--addon-offset: 10px;display:inline-flex;color:var(--e-colors-darkgray)}.e-input--disabled{color:var(--e-colors-darkgray-lighten-70);pointer-events:none;cursor:default}.e-input--block{display:flex;width:100%}.e-input__content{display:flex;flex-direction:column;flex:1}.e-input__label{display:inline-flex;align-items:center;align-self:flex-start;margin-bottom:4px;color:var(--e-colors-darkgray-lighten-20);font-size:14px;line-height:16px;word-break:break-word}.e-input__box{display:flex;align-items:center;padding:0 var(--box-offset);border:1px solid var(--e-colors-darkgray-lighten-70);border-radius:var(--e-radius);box-sizing:border-box}.e-input__box:has(.e-input__control:disabled){border-color:var(--e-colors-darkgray-lighten-80)}.e-input__box:has(.e-input__control:enabled):hover{border-color:var(--e-colors-darkgray-lighten-20)}.e-input__box:has(.e-input__control:focus),.e-input__box:has(.e-input__control:focus):hover{border-color:var(--e-colors-blue)}.e-input__hint{display:block;margin-top:6px;color:var(--e-colors-darkgray-lighten-20);font-size:12px}.e-input__control{flex:1;width:100%;min-height:24px;padding:12px 0;color:inherit;font-size:16px;background:none;border:none}.e-input__control:focus{outline:none}.e-input__icon{display:inline-flex}.e-input__icon--clear{fill:var(--e-colors-darkgray-lighten-70)}.e-input__icon--clear:hover{fill:var(--e-colors-darkgray-lighten-20)}.e-input__icon--loading{margin-left:var(--icon-offset)}.e-input__clear-button{display:inline-flex;padding:0;margin-left:var(--icon-offset);background-color:transparent;border:none;cursor:pointer}.e-input__clear-button:disabled{cursor:default;pointer-events:none}.e-input__clear-button--hidden{visibility:hidden}.e-input__asterisk{display:inline-flex;color:red;font-family:monospace;user-select:none}.e-input__asterisk--position-left{margin-right:var(--asterisk-offset)}.e-input__asterisk--position-right{margin-left:var(--asterisk-offset)}.e-input__addon{display:inline-flex;height:fit-content;line-height:24px}.e-input__addon--prepend{margin-right:var(--addon-offset)}.e-input__addon--append{margin-left:var(--addon-offset)}.e-input__addon--align-by-label{margin-top:34px}.e-input__addon--align-by-input{margin-top:14px}
/*# sourceMappingURL=index.css.map */