UNPKG

@2e32/react-input

Version:

A React input component

github.com/2e32/react-input

2e32/react-input

8 lines (7 loc) • 7.6 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../src/assets/css/variables.css", "../../src/assets/css/styles.css"], "sourcesContent": [":root {\n --e-colors-blue: #0070f2;\n --e-colors-darkgray-lighten-80: #d9d9d9;\n --e-colors-darkgray-lighten-70: #b3b3b3;\n --e-colors-darkgray-lighten-20: #676767;\n --e-colors-darkgray: #424242;\n\n --e-radius: 4px;\n}\n", "/* \u041A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0432\u0435\u0440\u0445\u043D\u0435\u0433\u043E \u0443\u0440\u043E\u0432\u043D\u044F */\n\n.e-input {\n /* \u041E\u0442\u0441\u0442\u0443\u043F\u044B box \u0438 icon \u0434\u043E\u043B\u0436\u043D\u044B \u0431\u044B\u0442\u044C \u0440\u0430\u0432\u043D\u044B \u0434\u043B\u044F \u043E\u0434\u0438\u043D\u0430\u043A\u043E\u0432\u043E\u0433\u043E \u0431\u043E\u043A\u043E\u0432\u043E\u0433\u043E \u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0441\u0442\u0432\u0430 \u0432\u043E\u043A\u0440\u0443\u0433 \u0438\u043A\u043E\u043D\u043A\u0438 */\n --box-offset: 10px;\n --icon-offset: 10px;\n --asterisk-offset: 4px;\n --addon-offset: 10px;\n\n display: inline-flex;\n color: var(--e-colors-darkgray);\n}\n\n.e-input--disabled {\n color: var(--e-colors-darkgray-lighten-70);\n pointer-events: none;\n cursor: default;\n}\n\n.e-input--block {\n display: flex;\n width: 100%;\n}\n\n/* \u0421\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442 - label, input, hint */\n\n.e-input__content {\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* label, input, hint */\n\n.e-input__label {\n display: inline-flex;\n align-items: center;\n align-self: flex-start; /* label \u043F\u043E \u0448\u0438\u0440\u0438\u043D\u0435 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E, \u0430 \u043D\u0435 \u043D\u0430 \u0432\u0441\u044E \u0448\u0438\u0440\u0438\u043D\u0443 */\n margin-bottom: 4px;\n color: var(--e-colors-darkgray-lighten-20);\n font-size: 14px;\n line-height: 16px;\n word-break: break-word;\n}\n\n/* \u041E\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u043A\u0443 \u0444\u043E\u043D\u0430 \u0438 \u0433\u0440\u0430\u043D\u0438\u0446 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 */\n.e-input__box {\n display: flex;\n align-items: center;\n padding: 0 var(--box-offset);\n border: 1px solid var(--e-colors-darkgray-lighten-70);\n border-radius: var(--e-radius);\n box-sizing: border-box;\n}\n\n.e-input__box:has(.e-input__control:disabled) {\n border-color: var(--e-colors-darkgray-lighten-80);\n}\n\n.e-input__box:has(.e-input__control:enabled):hover {\n border-color: var(--e-colors-darkgray-lighten-20);\n}\n\n.e-input__box:has(.e-input__control:focus),\n.e-input__box:has(.e-input__control:focus):hover {\n border-color: var(--e-colors-blue);\n}\n\n.e-input__hint {\n display: block;\n margin-top: 6px;\n color: var(--e-colors-darkgray-lighten-20);\n font-size: 12px;\n}\n\n/* \u0421\u0442\u0438\u043B\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 <input> */\n\n.e-input__control {\n flex: 1;\n width: 100%;\n min-height: 24px;\n padding: 12px 0;\n color: inherit;\n font-size: 16px;\n background: none;\n border: none;\n}\n\n.e-input__control:focus {\n outline: none;\n}\n\n/* \u0418\u043A\u043E\u043D\u043A\u0438 */\n\n.e-input__icon {\n display: inline-flex;\n}\n\n.e-input__icon--clear {\n fill: var(--e-colors-darkgray-lighten-70);\n}\n\n.e-input__icon--clear:hover {\n fill: var(--e-colors-darkgray-lighten-20);\n}\n\n.e-input__icon--loading {\n margin-left: var(--icon-offset);\n}\n\n/* \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0447\u0438\u0441\u0442\u043A\u0438 */\n\n.e-input__clear-button {\n display: inline-flex;\n padding: 0;\n margin-left: var(--icon-offset);\n background-color: transparent;\n border: none;\n cursor: pointer;\n}\n\n.e-input__clear-button:disabled {\n cursor: default;\n pointer-events: none;\n}\n\n.e-input__clear-button--hidden {\n visibility: hidden;\n}\n\n/* \u0418\u043D\u0434\u0438\u043A\u0430\u0442\u043E\u0440 \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u0438 */\n\n.e-input__asterisk {\n display: inline-flex;\n color: #ff0000;\n font-family: monospace;\n user-select: none;\n}\n\n.e-input__asterisk--position-left {\n margin-right: var(--asterisk-offset);\n}\n\n.e-input__asterisk--position-right {\n margin-left: var(--asterisk-offset);\n}\n\n/* \u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442 \u0441\u043D\u0430\u0440\u0443\u0436\u0438 \u0438 \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u0440\u043E\u0431\u043A\u0438 - \u0442\u0435\u043A\u0441\u0442, \u0438\u043A\u043E\u043D\u043A\u0438 \u0438 \u0442.\u043F. */\n\n.e-input__addon {\n display: inline-flex;\n /* addon \u0440\u0430\u0441\u0442\u044F\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043D\u0435 \u043D\u0430 \u0432\u0441\u044E \u0432\u044B\u0441\u043E\u0442\u0443 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0430, \u0430 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442 \u0440\u0430\u0437\u043C\u0435\u0440 \u043F\u043E \u0432\u044B\u0441\u043E\u0442\u0435 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 */\n height: fit-content;\n line-height: 24px;\n}\n\n.e-input__addon--prepend {\n margin-right: var(--addon-offset);\n}\n\n.e-input__addon--append {\n margin-left: var(--addon-offset);\n}\n\n/* \u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u0432\u0435\u0440\u0442\u0438\u043A\u0430\u043B\u0438 \u0432\u043D\u0435\u0448\u043D\u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 (\u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 \u043A\u043E\u0440\u043E\u0431\u043A\u0438) */\n.e-input__addon--align-by-label {\n margin-top: 34px;\n}\n\n.e-input__addon--align-by-input {\n margin-top: 14px;\n}\n"], "mappings": "AAAA,MACE,iBAAiB,QACjB,gCAAgC,QAChC,gCAAgC,QAChC,gCAAgC,QAChC,qBAAqB,QAErB,YAAY,GACd,CCNA,CAAC,QAEC,cAAc,KACd,eAAe,KACf,mBAAmB,IACnB,gBAAgB,KAEhB,QAAS,YACT,MAAO,IAAI,oBACb,CAEA,CAAC,kBACC,MAAO,IAAI,gCACX,eAAgB,KAChB,OAAQ,OACV,CAEA,CAAC,eACC,QAAS,KACT,MAAO,IACT,CAIA,CAAC,iBACC,QAAS,KACT,eAAgB,OAChB,KAAM,CACR,CAIA,CAAC,eACC,QAAS,YACT,YAAa,OACb,WAAY,WACZ,cAAe,IACf,MAAO,IAAI,gCACX,UAAW,KACX,YAAa,KACb,WAAY,UACd,CAGA,CAAC,aACC,QAAS,KACT,YAAa,OACb,QAAS,EAAE,IAAI,cACf,OAAQ,IAAI,MAAM,IAAI,gCACtB,cAAe,IAAI,YACnB,WAAY,UACd,CAEA,CATC,YASY,KAAK,CAAC,gBAAgB,WACjC,aAAc,IAAI,+BACpB,CAEA,CAbC,YAaY,KAAK,CAJC,gBAIgB,SAAS,OAC1C,aAAc,IAAI,+BACpB,CAEA,CAjBC,YAiBY,KAAK,CARC,gBAQgB,QACnC,CAlBC,YAkBY,KAAK,CATC,gBASgB,OAAO,OACxC,aAAc,IAAI,gBACpB,CAEA,CAAC,cACC,QAAS,MACT,WAAY,IACZ,MAAO,IAAI,gCACX,UAAW,IACb,CAIA,CAtBmB,iBAuBjB,KAAM,EACN,MAAO,KACP,WAAY,KAhFd,QAiFW,KAAK,EACd,MAAO,QACP,UAAW,KACX,WAAY,KACZ,OAAQ,IACV,CAEA,CAjCmB,gBAiCF,OACf,QAAS,IACX,CAIA,CAAC,cACC,QAAS,WACX,CAEA,CAAC,qBACC,KAAM,IAAI,+BACZ,CAEA,CAJC,oBAIoB,OACnB,KAAM,IAAI,+BACZ,CAEA,CAAC,uBACC,YAAa,IAAI,cACnB,CAIA,CAAC,sBACC,QAAS,YAjHX,QAkHW,EACT,YAAa,IAAI,eACjB,iBAAkB,YAClB,OAAQ,KACR,OAAQ,OACV,CAEA,CATC,qBASqB,UACpB,OAAQ,QACR,eAAgB,IAClB,CAEA,CAAC,8BACC,WAAY,MACd,CAIA,CAAC,kBACC,QAAS,YACT,MAAO,IACP,YAAa,UACb,YAAa,IACf,CAEA,CAAC,iCACC,aAAc,IAAI,kBACpB,CAEA,CAAC,kCACC,YAAa,IAAI,kBACnB,CAIA,CAAC,eACC,QAAS,YAET,OAAQ,YACR,YAAa,IACf,CAEA,CAAC,wBACC,aAAc,IAAI,eACpB,CAEA,CAAC,uBACC,YAAa,IAAI,eACnB,CAGA,CAAC,+BACC,WAAY,IACd,CAEA,CAAC,+BACC,WAAY,IACd", "names": [] }