UNPKG

@2e32/react-radio

Version:

A React radio component

github.com/2e32/react-radio

2e32/react-radio

8 lines (7 loc) • 6.52 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../src/assets/css/variables.css", "../../src/assets/css/radio.css", "../../src/assets/css/radio-group.css"], "sourcesContent": [":root {\n --e-colors-darkgray-lighten-20: #676767;\n}\n", ".e-radio {\n --label-offset: 8px;\n\n display: inline-flex;\n align-items: center;\n}\n\n.e-radio--disabled {\n pointer-events: none;\n cursor: default;\n}\n\n.e-radio--block {\n display: flex;\n width: 100%;\n}\n\n/* \u041E\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0440\u0430\u0434\u0438\u043E\u043A\u043D\u043E\u043F\u043A\u0438 \u043E\u0442\u043D\u043E\u0441\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 */\n\n.e-radio--orientation-left {\n flex-direction: row;\n}\n\n.e-radio--orientation-right {\n flex-direction: row-reverse;\n}\n\n.e-radio--orientation-top {\n flex-direction: column;\n}\n\n.e-radio--orientation-bottom {\n flex-direction: column-reverse;\n}\n\n/* \u041A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440, \u0432 \u043A\u043E\u0442\u043E\u0440\u043E\u043C \u0440\u0430\u0441\u043F\u043E\u043B\u0430\u0433\u0430\u0435\u0442\u0441\u044F \u0440\u0430\u0434\u0438\u043E\u043A\u043D\u043E\u043F\u043A\u0430 */\n\n.e-radio__box {\n display: inline-flex;\n position: relative; /* \u0414\u043B\u044F \u0440\u0430\u0441\u0442\u044F\u0433\u0438\u0432\u0430\u043D\u0438\u044F input \u043F\u043E\u0432\u0435\u0440\u0445 \u043A\u043E\u0440\u043E\u0431\u043A\u0438 */\n color: #666;\n}\n\n.e-radio__box--checked {\n color: #1976d2;\n}\n\n.e-radio__box--disabled {\n color: #bdbdbd;\n}\n\n.e-radio__box--readonly {\n opacity: 0.6;\n}\n\n.e-radio__box--position-left {\n margin-right: var(--label-offset);\n}\n\n.e-radio__box--position-right {\n margin-left: var(--label-offset);\n}\n\n.e-radio__box--position-top {\n margin-bottom: var(--label-offset);\n}\n\n.e-radio__box--position-bottom {\n margin-top: var(--label-offset);\n}\n\n.e-radio__box--align-start {\n align-self: flex-start;\n}\n\n.e-radio__box--align-center {\n align-self: center;\n}\n\n.e-radio__box--align-end {\n align-self: flex-end;\n}\n\n.e-radio__icon {\n height: 24px;\n width: 24px;\n fill: currentColor;\n border-radius: 50%;\n}\n\n/* label, input, hint */\n\n.e-radio__label {\n font-size: 16px;\n line-height: 24px;\n cursor: pointer;\n}\n\n.e-radio__input {\n /* \u0420\u0430\u0441\u0442\u044F\u0433\u0438\u0432\u0430\u0435\u043C \u0440\u0430\u0434\u0438\u043E\u043A\u043D\u043E\u043F\u043A\u0443 \u043D\u0430 \u0432\u0441\u0451 \u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0441\u0442\u0432\u043E \u0434\u043B\u044F \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u0449\u0435\u043B\u0447\u043A\u043E\u043C \u043F\u043E \u0438\u043A\u043E\u043D\u043A\u0435 */\n position: absolute;\n inset: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.e-radio__input:focus-visible + .e-radio__icon {\n outline: 1px solid currentColor;\n}\n\n.e-radio__hint {\n display: block;\n margin-top: 6px;\n color: var(--e-colors-darkgray-lighten-20);\n font-size: 12px;\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-radio-group {\n --asterisk-offset: 4px;\n\n display: inline-flex;\n flex-direction: column;\n}\n\n.e-radio-group--disabled {\n pointer-events: none;\n cursor: default;\n}\n\n.e-radio-group--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 - \u0440\u0430\u0434\u0438\u043E\u043A\u043D\u043E\u043F\u043A\u0438 */\n\n.e-radio-group__content {\n display: flex;\n flex: 1;\n gap: 10px;\n min-height: 24px;\n}\n\n.e-radio-group__content--vertical {\n flex-direction: column;\n}\n\n/* label, hint */\n\n.e-radio-group__label {\n display: 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.e-radio-group__hint {\n display: block;\n margin-top: 6px;\n color: var(--e-colors-darkgray-lighten-20);\n font-size: 12px;\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-radio-group__asterisk {\n display: inline-flex;\n color: #ff0000;\n font-family: monospace;\n user-select: none;\n}\n\n.e-radio-group__asterisk--position-left {\n margin-right: var(--asterisk-offset);\n}\n\n.e-radio-group__asterisk--position-right {\n margin-left: var(--asterisk-offset);\n}\n"], "mappings": "AAAA,MACE,gCAAgC,OAClC,CCFA,CAAC,QACC,gBAAgB,IAEhB,QAAS,YACT,YAAa,MACf,CAEA,CAAC,kBACC,eAAgB,KAChB,OAAQ,OACV,CAEA,CAAC,eACC,QAAS,KACT,MAAO,IACT,CAIA,CAAC,0BACC,eAAgB,GAClB,CAEA,CAAC,2BACC,eAAgB,WAClB,CAEA,CAAC,yBACC,eAAgB,MAClB,CAEA,CAAC,4BACC,eAAgB,cAClB,CAIA,CAAC,aACC,QAAS,YACT,SAAU,SACV,MAAO,IACT,CAEA,CAAC,sBACC,MAAO,OACT,CAEA,CAAC,uBACC,MAAO,OACT,CAEA,CAAC,uBACC,QAAS,EACX,CAEA,CAAC,4BACC,aAAc,IAAI,eACpB,CAEA,CAAC,6BACC,YAAa,IAAI,eACnB,CAEA,CAAC,2BACC,cAAe,IAAI,eACrB,CAEA,CAAC,8BACC,WAAY,IAAI,eAClB,CAEA,CAAC,0BACC,WAAY,UACd,CAEA,CAAC,2BACC,WAAY,MACd,CAEA,CAAC,wBACC,WAAY,QACd,CAEA,CAAC,cACC,OAAQ,KACR,MAAO,KACP,KAAM,aAtFR,cAuFiB,GACjB,CAIA,CAAC,eACC,UAAW,KACX,YAAa,KACb,OAAQ,OACV,CAEA,CAAC,eAEC,SAAU,SApGZ,MAqGS,EArGT,OAsGU,EACR,QAAS,EACT,OAAQ,OACV,CAEA,CATC,cASc,cAAe,CAAE,CAxB/B,cAyBC,QAAS,IAAI,MAAM,YACrB,CAEA,CAAC,cACC,QAAS,MACT,WAAY,IACZ,MAAO,IAAI,gCACX,UAAW,IACb,CClHA,CAAC,cACC,mBAAmB,IAEnB,QAAS,YACT,eAAgB,MAClB,CAEA,CAAC,wBACC,eAAgB,KAChB,OAAQ,OACV,CAEA,CAAC,qBACC,QAAS,KACT,MAAO,IACT,CAIA,CAAC,uBACC,QAAS,KACT,KAAM,EACN,IAAK,KACL,WAAY,IACd,CAEA,CAAC,iCACC,eAAgB,MAClB,CAIA,CAAC,qBACC,QAAS,KACT,YAAa,OACb,WAAY,WACZ,cAAe,IACf,MAAO,IAAI,gCACX,UAAW,KACX,YAAa,KACb,WAAY,UACd,CAEA,CAAC,oBACC,QAAS,MACT,WAAY,IACZ,MAAO,IAAI,gCACX,UAAW,IACb,CAIA,CAAC,wBACC,QAAS,YACT,MAAO,IACP,YAAa,UACb,YAAa,IACf,CAEA,CAAC,uCACC,aAAc,IAAI,kBACpB,CAEA,CAAC,wCACC,YAAa,IAAI,kBACnB", "names": [] }