react-html5-camera-photo
Version:
React.js HTML5 Camera Photo
1 lines • 3.09 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./src/lib/components/CircleButton/styles/circleButton.css","webpack:///./src/lib/components/WhiteFlash/styles/whiteFlash.css","webpack:///./src/lib/components/DisplayError/styles/displayError.css","webpack:///./src/lib/components/Camera/styles/camera.css"],"names":[],"mappings":"AAAA,mBACE,kBACA,SACA,WAAa,CAGf,cAEE,WAEA,YACA,WAKA,oCAGA,SAAW,CAGb,4BAfE,kBAUA,iBAAmB,CA0BpB,cAnBC,SACA,SAEA,YACA,WAEA,gBAOA,uBAKA,SAAW,CAGb,yBACE,YACA,WACA,sBAA4B,CChD9B,oBACE,kBACA,YACA,WACA,UACA,wCACA,mCACA,+BAAgC,CAGlC,2BACE,UACA,eAAkB,CCZpB,eACE,WACA,qBAAwB,CCF1B,0BACE,kBACA,iBAAmB,CAOrB,8DACE,WAAa,CAGf,yCACE,YACA,aAAe,CAGjB,wBAIE,uGACE,UAAY,CACb,CAIH,oFACE,YACA,YAAa,CAEf,2CACE,mBACG,eAAiB,CAEtB,oDACE,YACA,YAAa","file":"css/index.css","sourcesContent":["#container-circles {\n position: absolute;\n left: 50%;\n bottom: 90px;\n}\n\n#outer-circle {\n position: absolute;\n left: -37px;\n\n height: 75px;\n width: 75px;\n\n /*\n opacity of 0.4\n */\n background-color: rgba(255, 255, 255, 0.4);\n border-radius: 50%;\n\n z-index: 1;\n}\n\n#inner-circle {\n position: absolute;\n left: 50%;\n top: 38px;\n\n height: 44px;\n width: 44px;\n\n background: white;\n border-radius: 50%;\n\n /*\n Offset the position correctly with\n minus half of the width and minus half of the height\n */\n margin: -22px 0px 0px -22px;\n\n /*\n On the top of outer-circle\n */\n z-index: 2;\n}\n\n#inner-circle.is-clicked {\n height: 38px;\n width: 38px;\n margin: -19px 0px 0px -19px;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/CircleButton/styles/circleButton.css","#white-flash.normal {\n position: absolute;\n height: 100%;\n width: 100%;\n opacity :1;\n -webkit-transition:opacity .9s ease-out;\n -o-transition:opacity .9s ease-out;\n transition:opacity .9s ease-out;\n}\n\n#white-flash.do-transition {\n opacity: 0;\n background: white;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/WhiteFlash/styles/whiteFlash.css","#display-error {\n color: black;\n background-color: white;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/DisplayError/styles/displayError.css",".react-html5-camera-photo {\n position: relative;\n text-align: center;\n}\n\n.react-html5-camera-photo > video {\n width: 768px;\n}\n\n.react-html5-camera-photo > img {\n width: 768px;\n}\n\n.react-html5-camera-photo > .display-error {\n width: 768px;\n margin: 0 auto;\n}\n\n@media(max-width:768px){\n .react-html5-camera-photo > video, .react-html5-camera-photo > img {\n width: 100%;\n }\n .react-html5-camera-photo > .display-error {\n width: 100%;\n }\n}\n\n/* fullscreen enable by props */\n.react-html5-camera-photo-fullscreen > video, .react-html5-camera-photo-fullscreen > img {\n width: 100vw;\n height:100vh;\n}\n.react-html5-camera-photo-fullscreen > video {\n -o-object-fit: fill;\n object-fit: fill;\n}\n.react-html5-camera-photo-fullscreen > .display-error {\n width: 100vw;\n height:100vh;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Camera/styles/camera.css"],"sourceRoot":""}