react-codes-input
Version:
A react component for PIN, verify code and passcode entering.
1 lines • 2.63 kB
Source Map (JSON)
{"version":3,"file":"react-codes-input.min.css","mappings":"AAAA,8BAEE,WAAY,CADZ,UAEF,CAEA,mFAEE,wBAAyB,CADzB,kBAEF,CAEA,4BAEE,kBAAmB,CAEnB,wBAAyB,CAHzB,YAAa,CAKb,mBAAoB,CADpB,WAAY,CAFZ,UAIF,CAEA,iCAYE,2CAA4C,CAR5C,UAAW,CASX,wBAAyB,CAHzB,YAAa,CACb,WAAY,CAFZ,gBAAiB,CANjB,YAAa,CAGb,iBAAkB,CAClB,iBAAkB,CALlB,SAAU,CADV,iBAAkB,CAIlB,kBAAmB,CAGnB,iBAMF,CAEA,mEAGE,aAAc,CAEd,QAAS,CAJT,iBAAkB,CAClB,iBAAkB,CAElB,OAAQ,CAER,8BACF,CAEA,2FAGE,qBAAsB,CACtB,iBAAkB,CAFlB,WAAY,CADZ,UAIF,CAEA,mGAKE,UAAW,CAFX,QAAS,CAFT,iBAAkB,CAGlB,SAAU,CAFV,OAIF,CAEA,yBAGE,6BAA8B,CAF9B,cAAe,CACf,WAEF,CAEA,sEACE,iCACF,CAEA,oDACE,YACF,CAEA,kGASE,4DAAkC,CAAlC,oDAAkC,CAClC,4BAA6B,CAR7B,UAAW,CACX,aAAc,CAId,WAAY,CAFZ,QAAS,CAJT,iBAAkB,CAGlB,OAAQ,CAER,8BAAgC,CAEhC,SAGF,CAEA,4JACE,YACF,CAEA,kDACE,IACE,qBACF,CACF,CAJA,0CACE,IACE,qBACF,CACF,C","sources":["webpack://react-codes-input/./src/js/Input/react-codes-input.css"],"sourcesContent":[".component {\n width: 100%;\n height: 50px;\n}\n\n.component.disabled .code {\n cursor: not-allowed;\n background-color: #f5f5f5;\n}\n\n.wrapper {\n display: flex;\n align-items: center;\n width: 100%;\n border: 1px solid #e5e5e5;\n height: 100%;\n display: table\\0/IE9;\n}\n\n.code-wrapper {\n position: relative;\n padding: 0;\n outline: none;\n color: #000;\n white-space: nowrap;\n overflow-x: hidden;\n overflow-y: hidden;\n word-break: normal;\n line-height: 50px;\n flex: 1 1 0px;\n height: 100%;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n display: table-cell\\0/IE9;\n}\n\n.code-wrapper .entered-value {\n position: absolute;\n text-align: center;\n display: block;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.code-wrapper .entered-value.hide {\n width: 10px;\n height: 10px;\n background-color: #000;\n border-radius: 50%;\n}\n\n.code-wrapper.active .code-wrapper--focus {\n position: absolute;\n top: 1px;\n left: 1px;\n right: 1px;\n bottom: 1px;\n}\n\n.code {\n cursor: pointer;\n height: 100%;\n border-left: 1px solid #e5e5e5;\n}\n\n.code-wrapper:first-child .code {\n border-left: 1px solid transparent;\n}\n\n.code-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.code-wrapper.active:not(.entered):after {\n position: absolute;\n content: '';\n display: block;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 20px;\n width: 1px;\n animation: blink-empty 1s infinite;\n background-color: transparent;\n}\n\n.component.disabled .code-wrapper.active:not(.entered):after {\n display: none;\n}\n\n@keyframes blink-empty {\n 50% {\n background-color: #333;\n }\n}\n"],"names":[],"sourceRoot":""}