onfido-sdk-ui/dist/onfido.vendors~crossDevice.css.map

JavaScript SDK view layer for Onfido identity verification

{"version":3,"sources":["webpack://Onfido/../node_modules/react-phone-number-input/rrui.css","webpack://Onfido/../node_modules/react-phone-number-input/style.css"],"names":[],"mappings":"AAIA,yCAGC,YACA,gCACA,oDAGD,gHAIC,4BAOD,aAIC,kBAGD,6DAGC,sBAAS,CAIV,sBAEC,0BAAa,CAGd,mBAEC,uBACA,cAOD,mBAEC,aACA,gBAEA,UACA,6DAGD,8DAGC,qBAGD,6BAEC,eAQD,iEAIC,SACA,UACA,mBACA,aACA,6DACA,YACA,gBACA,eACA,kBACA,oBACA,oBACA,mBAOD,kBAEC,UACA,oBAEA,gDACA,kEAGA,4HAIA,4BACA,oCAGD,4BAEC,UACA,oBAEA,gDACA,kEAEA,mHAAuB,CAGxB,2BAEC,kBACA,UAGD,2BAQC,UAGA,4EAGD,qCAEC,UAGD,cAEC,oJAGD,cAEC,qFAGD,oBAEC,kBAGD,uBAEC,SACA,eACA,4BACA,+BACA,gBACA,uBACA,qBACA,kBACA,oDAGD,gCAEC,OAGD,iCAEC,QAGD,qCAEC,yBAAO,CAGR,sCAEC,0BAAQ,CAGT,yDAEC,gCAAQ,CAGT,iCAKC,kBAGD,+BAEC,YAKA,eAGD,sBAEC,cACA,WAEA,6BACA,8BAEA,4BACA,+BAEA,oDACA,gBACA,mBAGD,4BAEC,yBAGD,gEAGC,eAGD,2BAEC,4BAAe,CAGhB,+BAEC,wEAGD,+BAEC,yBAGD,qCAEC,yBAGD,6BAEC,yBACA,YAGD,2BAEC,kBAGD,yEAIC,YACA,oDAGD,sBAEC,gCACA,oDAGA,gBAGD,uFAGC,4BAGD,6BAEC,cAGD,gCAEC,cAGD,6BAEC,cAGD,4CAGC,cAMD,sBAEC,sEAGD,gCAEC,sDACA,uEAGD,8BAEC,uDACA,gBACA,uBAGD,qBAEC,QACA,SAEA,kBACA,gBACA,mBAEA,WAEA,4EAGA,+BAEA,mBACA,8BACA,+BAEA,cAGD,+BAEC,WAGD,+BAEC,kBACA,OACA,UACA,UACA,eAGD,qBAMC,aACA,eACA,MACA,QACA,UAGD,0BAEC,iCACA,mCACA,sBACA,sBAAe,C;ACjZhB,+BAIC,kBAGA,sDACA,uEAID,mCAEC,WAID,2FAIC,yCAGD,iCAEC,kBAGD,2DAEC,kBAGD,+DAEC,WAGD,4IAaC,gBAGD,+CAEC,gBACA,iBAGD,gDAEC,sDACA,uEAGD,qDAEC,mBAGD,gCAGC,aACA,aAEA,kCAEA,sDAGD,+CAIC,wBACA,yBAIA,oBACA,qBAEA,YAGD,iCAEC,6BAAc,C","file":"onfido.vendors~crossDevice.css","sourcesContent":["/*===========================================================\n= Inputs                                                    =\n===========================================================*/\n\n.rrui__input-field,\n.rrui__select__button\n{\n\tborder        : none;\n\tborder-bottom : 1px solid #C5D2E0;\n\ttransition    : border 0.1s;\n}\n\n.rrui__input-field:focus,\n.rrui__select__button:focus,\n.rrui__select__native-expanded:focus + .rrui__select__button\n{\n\tborder-bottom-color: #03B2CB;\n}\n\n/*===========================================================\n= Input                                                     =\n===========================================================*/\n\n.rrui__input\n{\n\t/* `position: relative` is for the floating label absolute positioning\n\t   and also for `.rrui__select__options width` sizing */\n\tposition : relative;\n}\n\n.rrui__input:not(.rrui__input--multiline),\n.rrui__input-label\n{\n\theight : calc(0.3rem * 6);\n}\n\n/* For native `<select/>` in Safari */\n.rrui__select__native\n{\n\tmin-height : calc(0.3rem * 6);\n}\n\n.rrui__input-error\n{\n\tmargin-top : calc(0.3rem);\n\tcolor      : #D30F00;\n}\n\n/*===========================================================\n= Input field                                               =\n===========================================================*/\n\n.rrui__input-field\n{\n\toutline       : none;\n\tborder-radius : 0;\n\t/* Some web browsers add <input/> padding by default */\n\tpadding       : 0;\n\tappearance    : none;\n}\n\n.rrui__input-field--invalid,\n.rrui__input-field--invalid:focus\n{\n\tborder-color: #EB2010;\n}\n\n.rrui__input-field--disabled\n{\n\tcursor: default;\n}\n\n/*===========================================================\n= Buttons                                                   =\n===========================================================*/\n\n/* Reset the default `<button/>` styles */\n.rrui__select__button,\n.rrui__select__option,\n.rrui__select__close\n{\n\tmargin      : 0;\n\tpadding     : 0;\n\twhite-space : nowrap;\n\toutline     : none;\n\tappearance  : none;\n\tborder      : none;\n\tbackground  : none;\n\tcursor      : pointer;\n\tfont-size   : inherit;\n\tfont-family : inherit;\n\tfont-weight : inherit;\n\tfont-style  : inherit;\n}\n\n/*===========================================================\n= Select                                                    =\n===========================================================*/\n\n.rrui__expandable\n{\n\topacity : 0;\n\tpointer-events : none;\n\n\ttransform        : scaleY(0);\n\ttransform-origin : 50% top 0px;\n\n\t/* 250ms - too slow for short lists */\n\ttransition : all 150ms cubic-bezier(.76,.04,.46,.75) 0ms;\n\n\t/* prevent white background showing through the transparent border */\n\t/* http://stackoverflow.com/questions/7473200/transparent-border-expands-background-color-image */\n\tbackground-clip         : padding-box;\n\t-webkit-background-clip : padding-box;\n}\n\n.rrui__expandable--expanded\n{\n\topacity        : 1;\n\tpointer-events : auto;\n\n\ttransform        : scaleY(1);\n\ttransform-origin : 50% top 0px;\n\n\ttransition : all 150ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n}\n\n.rrui__expandable--overlay\n{\n\tposition : absolute;\n\tz-index  : 1;\n}\n\n.rrui__expandable__content\n{\n\t/*\n\tThe inner block's `opacity` is animated too\n\t(it fades in and out by itself too).\n\tThis is done to fade out the inner block when the dropdown is collapsed\n\ttherefore hiding an otherwise bizarre and unwanted visual clutter\n\t*/\n\topacity: 0;\n\n\t/* Mitigates inner content overlapping with itself creating a feeling of a mess */\n\ttransition: opacity 150ms ease-out;\n}\n\n.rrui__expandable__content--expanded\n{\n\topacity: 1;\n}\n\n.rrui__shadow\n{\n\tbox-shadow : 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n}\n\n.rrui__select\n{\n\tuser-select : none;\n}\n\n.rrui__select--menu\n{\n\tposition : relative;\n}\n\n.rrui__select__options\n{\n\tmargin           : 0;\n\tpadding-left     : 0;\n\tpadding-top      : calc(2 * 0.3rem);\n\tpadding-bottom   : calc(2 * 0.3rem);\n\toverflow-y       : auto;\n\tbackground-color : white;\n\tlist-style-type  : none;\n\toverflow-x       : hidden;\n\tbox-sizing       : border-box;\n}\n\n.rrui__expandable--left-aligned\n{\n\tleft : 0;\n}\n\n.rrui__expandable--right-aligned\n{\n\tright : 0;\n}\n\n.rrui__select__options--left-aligned\n{\n\tleft : calc(0.3rem * 4 * -1);\n}\n\n.rrui__select__options--right-aligned\n{\n\tright : calc(0.3rem * 4 * -1);\n}\n\n.rrui__select__options:not(.rrui__select__options--menu)\n{\n\twidth : calc(100% + 0.3rem * 4 * 2);\n}\n\n.rrui__select__options--downward\n{\n\t/* When an html page is overflown by a long list\n\t   then this bottom margin helps to see that\n\t   there's no more options left out being clipped or something */\n\tmargin-bottom : 1em;\n}\n\n.rrui__select__options--upward\n{\n\tbottom : 100%;\n\n\t/* When an html page is overflown by a long list\n\t   then this bottom margin helps to see that\n\t   there's no more options left out being clipped or something */\n\tmargin-top : 1em;\n}\n\n.rrui__select__option\n{\n\tdisplay : block;\n\twidth   : 100%;\n\n\tpadding-left  : calc(0.3rem * 4);\n\tpadding-right : calc(0.3rem * 4);\n\n\tpadding-top    : calc(0.3rem * 1);\n\tpadding-bottom : calc(0.3rem * 1);\n\n\tbox-sizing  : border-box;\n\ttext-align  : left;\n\twhite-space : nowrap;\n}\n\n.rrui__select__option:hover\n{\n\tbackground-color : #FBFDFD;\n}\n\n.rrui__select__button--disabled,\n.rrui__select__option--disabled\n{\n\tcursor : default;\n}\n\n.rrui__select__option-icon\n{\n\tmargin-right : calc(0.3rem * 3);\n}\n\n.rrui__select__options--upward\n{\n\ttransform-origin: 50% bottom 0px;\n}\n\n.rrui__select__option--focused\n{\n\tbackground-color: #ECF1F6;\n}\n\n.rrui__select__option--focused:hover\n{\n\tbackground-color: #EFF3F8;\n}\n\n.rrui__select__option:active\n{\n\tbackground-color : #3678D1;\n\tcolor            : white;\n}\n\n.rrui__select__option-icon\n{\n\tmargin-right: 0.5em\n}\n\n.rrui__select__toggler,\n.rrui__select__button,\n.rrui__select__autocomplete\n{\n\theight     : 100%;\n\tbox-sizing : border-box;\n}\n\n.rrui__select__button\n{\n\tborder-bottom : 1px solid #C5D2E0;\n\ttransition    : border 0.1s;\n\n\t/* Because Chrome adds `text-align: center` for all buttons */\n\ttext-align : left;\n}\n\n.rrui__select__button:focus,\n.rrui__select__native-expanded:focus + .rrui__select__button\n{\n\tborder-bottom-color: #03B2CB;\n}\n\n.rrui__select__button:active\n{\n\tcolor: #03B2CB;\n}\n\n.rrui__select__button--expanded\n{\n\tcolor: #3678D1;\n}\n\n.rrui__select__button--empty\n{\n\tcolor: #888C91;\n}\n\n.rrui__select__button,\n.rrui__select__option\n{\n\tcolor : inherit;\n}\n\n/* Not introducing an animation on `.rrui__select__option`\n   because it would introduce a little clutter due to\n   focused option animation in autocomplete mode */\n.rrui__select__button\n{\n\ttransition : color 30ms ease-out;\n}\n\n.rrui__select__selected-content\n{\n\tdisplay     : flex;\n\talign-items : center;\n}\n\n.rrui__select__selected-label\n{\n\tflex          : 1 0 auto;\n\toverflow      : hidden;\n\ttext-overflow : ellipsis;\n}\n\n.rrui__select__arrow\n{\n\twidth  : 0;\n\theight : 0;\n\n\tmargin-left   : 0.35em;\n\tmargin-top    : 0.1em;\n\tmargin-bottom : 0.1em;\n\n\topacity: 0.7;\n\n\ttransition: opacity 100ms ease-out;\n\n\t/* border-width: arrow_height arrow_width/2 0 arrow_width/2 */\n\tborder-width : 0.35em 0.2em 0 0.2em;\n\n\tborder-style       : solid;\n\tborder-left-color  : transparent;\n\tborder-right-color : transparent;\n\n\tcolor: #B8BDC4;\n}\n\n.rrui__select__arrow--expanded\n{\n\topacity: 0.3;\n}\n\n.rrui__select__native-expanded\n{\n\tposition : absolute;\n\tleft     : 0;\n\tz-index  : 1;\n\topacity  : 0;\n\tcursor   : pointer;\n}\n\n.rrui__select__close\n{\n\t/*\n\tSet `display` to `block` for fullscreen `.rrui__expandable` design.\n\tdisplay      : block;\n\t*/\n\tdisplay      : none;\n\tposition     : fixed;\n\ttop          : 0;\n\tright        : 0;\n\tz-index      : 1;\n}\n\n.rrui__select__close-icon\n{\n\tmargin-top   : calc(0.3rem * 2 + 4px);\n\tmargin-right : calc(0.3rem * 2 + 4px);\n\twidth        : calc(0.3rem * 5);\n\theight       : calc(0.3rem * 5);\n}",".react-phone-number-input__row\n{\n\t/* This is done to stretch `.rrui__select__options` */\n\t/* to the full width of `.react-phone-number-input__phone` */\n\tposition    : relative;\n\n\t/* This is done to stretch the contents of this component */\n\tdisplay     : flex;\n\talign-items : center;\n}\n\n/* Overrides `width: 100%` setting from `react-resonsive-ui` */\n.react-phone-number-input__country\n{\n\twidth : auto;\n}\n\n/* The phone number input stretches to fill all empty space */\n.react-phone-number-input__phone,\n/* The country select, when expanded, stretches to fill all empty space */\n.react-phone-number-input__country.rrui__select--expanded\n{\n\tflex : 1;\n}\n\n.react-phone-number-input__phone\n{\n\tfont-size : inherit;\n}\n\n.react-phone-number-input__country.rrui__select--collapsed\n{\n\tmargin-right : 0.5em;\n}\n\n.react-phone-number-input__country .rrui__select__autocomplete\n{\n\twidth : 100%;\n}\n\n.react-phone-number-input__country,\n.react-phone-number-input__country:not(.react-phone-number-input__country--native-expanded) .rrui__input\n{\n\t/* This is done to stretch `.rrui__select__options` */\n\t/* to the full width of `.react-phone-number-input__phone` */\n\t/* rather than to the full width of `.rrui__select` */\n\t/* because the `.rrui__select` is contracted */\n\t/* as soon as a user selects a country which caused */\n\t/* the `.rrui__select__options` to contract too */\n\t/* while the list collapse animation is still in progress. */\n\t/* The `position: relative` container is now `.react-phone-number-input`. */\n\t/* The `:not(.react-phone-number-input__country--native-expanded)` selector */\n\t/* is required because native `<select/>` is positioned absolutely. */\n\tposition : static;\n}\n\n.react-phone-number-input .rrui__select__arrow\n{\n\tmargin-top  : 0.3em;\n\tmargin-left : 0.3em;\n}\n\n.react-phone-number-input .rrui__select__option\n{\n\tdisplay     : flex;\n\talign-items : center;\n}\n\n.react-phone-number-input .rrui__select__option-icon\n{\n\tmargin-bottom : 0.1em;\n}\n\n.react-phone-number-input__icon\n{\n\t/* The flag icon size is 4x3 hence the exact `width` and `height` values */\n\twidth      : 1.24em;\n\theight     : 0.93em;\n\n\tborder     : 1px solid rgba(0, 0, 0, 0.25);\n\t/* Makes sure `width`x`height` is exactly `4x3` and `border` width is not included in it */\n\tbox-sizing : content-box;\n}\n\n.react-phone-number-input__icon--international\n{\n\t/* The international icon size is square */\n\t/* and also has no border hence the `2 * 1px` `width` and `height` compensation */\n\twidth         : calc(0.93em + 2px);\n\theight        : calc(0.93em + 2px);\n\n\t/* The international icon size is square hence the exact `padding` value */\n\t/* for precise alignment with `4x3` sized country flags. */\n\tpadding-left  : 0.155em;\n\tpadding-right : 0.155em;\n\n\tborder : none;\n}\n\n.react-phone-number-input__error\n{\n\tmargin-left : calc(0.93em + 2px);\n}"],"sourceRoot":""}