onfido-sdk-ui
Version:
JavaScript SDK view layer for Onfido identity verification
1 lines • 6.6 kB
Source Map (JSON)
{"version":3,"file":"onfido.crossDevice.css","mappings":";AAAA,mBAAmB;AACnB;CACC,kCAAkC;CAClC,+CAA+C;CAC/C,gDAAgD;CAChD,6CAA6C;CAC7C,2CAA2C;CAC3C,qFAAqF;CACrF,+CAA+C;CAC/C,4CAA4C;CAC5C,6CAA6C;CAC7C,2EAA2E;CAC3E,uDAAuD;CACvD,wCAAwC;CACxC,mCAAmC;CACnC,wCAAwC;CACxC,oDAAoD;CACpD,0EAA0E;CAC1E,iEAAiE;AAClE;;AAEA;CACC,4DAA4D;CAC5D,aAAa;CACb,mBAAmB;AACpB;;AAEA;CACC,6DAA6D;CAC7D,OAAO;CACP;0CACyC;CACzC,YAAY;AACb;;AAEA;CACC,2FAA2F;CAC3F,2CAA2C;AAC5C;;AAEA;CACC,0CAA0C;AAC3C;;AAEA;CACC;0CACyC;CACzC;sFACqF;CACrF,uEAAuE;CACvE,wFAAwF;CACxF;;+CAE8C;CAC9C;+FAC8F;AAC/F;;AAEA;CACC,oDAAoD;CACpD,yFAAyF;CACzF,cAAc;CACd;gFAC+E;CAC/E,WAAW;CACX,YAAY;AACb;;AAEA;CACC,wDAAwD;AACzD;;AAEA;CACC,wDAAwD;AACzD;;AAEA,wCAAwC;;AAExC;CACC,kBAAkB;CAClB,mBAAmB;CACnB,aAAa;CACb,mBAAmB;CACnB,wDAAwD;AACzD;;AAEA;CACC,kBAAkB;CAClB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,eAAe;AAChB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,cAAc;CACd,WAAW;CACX,gDAAgD;CAChD,iDAAiD;CACjD,2DAA2D;CAC3D,mBAAmB;CACnB,uDAAuD;CACvD,mBAAmB;CACnB,oEAAoE;CACpE,oBAAoB;CACpB,mEAAmE;CACnE,wDAAwD;CACxD,oDAAoD;AACrD;;AAEA;CACC,UAAU;CACV,uDAAuD;AACxD;;AAEA;CACC;sGACqG;AACtG;;AAEA;CACC,UAAU;CACV,uDAAuD;AACxD;ACnIA,yCACE,qBACA,4BACA","sources":["webpack://Onfido/../node_modules/react-phone-number-input/style.css","webpack://Onfido/./components/PhoneNumberInput/flag.scss"],"sourcesContent":["/* CSS variables. */\r\n:root {\r\n\t--PhoneInput-color--focus: #03b2cb;\r\n\t--PhoneInputInternationalIconPhone-opacity: 0.8;\r\n\t--PhoneInputInternationalIconGlobe-opacity: 0.65;\r\n\t--PhoneInputCountrySelect-marginRight: 0.35em;\r\n\t--PhoneInputCountrySelectArrow-width: 0.3em;\r\n\t--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\r\n\t--PhoneInputCountrySelectArrow-borderWidth: 1px;\r\n\t--PhoneInputCountrySelectArrow-opacity: 0.45;\r\n\t--PhoneInputCountrySelectArrow-color: inherit;\r\n\t--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountrySelectArrow-transform: rotate(45deg);\r\n\t--PhoneInputCountryFlag-aspectRatio: 1.5;\r\n\t--PhoneInputCountryFlag-height: 1em;\r\n\t--PhoneInputCountryFlag-borderWidth: 1px;\r\n\t--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\r\n\t--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\r\n}\r\n\r\n.PhoneInput {\r\n\t/* This is done to stretch the contents of this component. */\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.PhoneInputInput {\r\n\t/* The phone number input stretches to fill all empty space */\r\n\tflex: 1;\r\n\t/* The phone number input should shrink\r\n\t to make room for the extension input */\r\n\tmin-width: 0;\r\n}\r\n\r\n.PhoneInputCountryIcon {\r\n\twidth: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\r\n\theight: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--square {\r\n\twidth: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--border {\r\n\t/* Removed `background-color` because when an `<img/>` was still loading\r\n\t it would show a dark gray rectangle. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom. */\r\n\tbackground-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\r\n\t/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom,\r\n\t so an additional \"inset\" border is added. */\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\r\n}\r\n\r\n.PhoneInputCountryIconImg {\r\n\t/* Fixes weird vertical space above the flag icon. */\r\n\t/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */\r\n\tdisplay: block;\r\n\t/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.\r\n\t Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.PhoneInputInternationalIconPhone {\r\n\topacity: var(--PhoneInputInternationalIconPhone-opacity);\r\n}\r\n\r\n.PhoneInputInternationalIconGlobe {\r\n\topacity: var(--PhoneInputInternationalIconGlobe-opacity);\r\n}\r\n\r\n/* Styling native country `<select/>`. */\r\n\r\n.PhoneInputCountry {\r\n\tposition: relative;\r\n\talign-self: stretch;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tmargin-right: var(--PhoneInputCountrySelect-marginRight);\r\n}\r\n\r\n.PhoneInputCountrySelect {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\tborder: 0;\r\n\topacity: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.PhoneInputCountrySelect[disabled] {\r\n\tcursor: default;\r\n}\r\n\r\n.PhoneInputCountrySelectArrow {\r\n\tdisplay: block;\r\n\tcontent: '';\r\n\twidth: var(--PhoneInputCountrySelectArrow-width);\r\n\theight: var(--PhoneInputCountrySelectArrow-width);\r\n\tmargin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\r\n\tborder-style: solid;\r\n\tborder-color: var(--PhoneInputCountrySelectArrow-color);\r\n\tborder-top-width: 0;\r\n\tborder-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\tborder-left-width: 0;\r\n\tborder-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\ttransform: var(--PhoneInputCountrySelectArrow-transform);\r\n\topacity: var(--PhoneInputCountrySelectArrow-opacity);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}",".flagIcon {\n background-size: 100%;\n background-repeat: no-repeat;\n background-position: center;\n}\n"],"names":[],"sourceRoot":""}