react-lightbox-component
Version:
An image lightbox component for ReactJS
1 lines • 10.4 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./src/lib/components/Button.css","webpack:///./src/lib/components/Image.css","webpack:///./src/lib/components/Container.css","webpack:///./src/lib/components/Lightbox.css"],"names":[],"mappings":"AAAA,cACE,8BACI,0BACJ,eACA,yBACG,sBACC,qBACI,iBACR,sBACA,gBACA,6BACA,UACA,WACA,aACA,WACA,UACA,qCAAuC,CAGzC,oBACE,UACA,oCACA,+BACA,2BAA+B,CAGjC,6BACE,SAAW,CAGb,mCACE,2BACI,uBACI,mBACR,iCACI,6BACI,yBACR,eACA,8CACA,sCACA,iCACA,8BACA,wDAA+D,CC1CjE,yBACE,WACA,YACA,iBAAmB,CAGrB,wBACE,gCACA,kBACA,gBACA,kBACA,WACA,SAAW,CAGb,0BACE,wBACE,4BAA8B,CAC/B,CAGH,yBACE,0BACE,YAAc,CACf,CAGH,0BACE,gBACA,0BACA,eAAiB,CAGnB,gBACE,YACA,2BAA6B,CAG/B,uBACE,wBACA,mBACA,eAAiB,CAGnB,iBACE,oBACA,aACA,sBACI,mBACJ,qBACI,uBACJ,YACA,UACA,8CACQ,qCAAuC,CAGjD,4BACE,GACE,+BACQ,sBAAwB,CAElC,GACE,iCACQ,wBAA2B,CACpC,CAGH,oBACE,GACE,+BACQ,sBAAwB,CAElC,GACE,iCACQ,wBAA2B,CACpC,CC5EH,mBACE,gBACA,eACA,UAAY,CAGd,mBACE,eACA,WACA,YACA,gCACA,MACA,OACA,WAAa,CAGf,2GAKE,oCACA,+BACA,2BAA+B,CAGjC,yBACE,qEAEE,UACA,mBAAqB,CACtB,CAGH,0BACE,iHAGE,UACA,mBAAqB,CACtB,CAGH,oBACE,eACA,OACA,SAAW,CAGb,oBAIE,OAAW,CAGb,uCANE,kBACA,QACA,iBAAmB,CASpB,mBADC,MAAU,CAGZ,yBACE,oBACE,kBAAoB,CAGtB,mBACE,iBAAmB,CACpB,CAGH,wBACE,gCACA,+GACQ,uGACR,kBACA,WACA,UACA,SACA,kBACA,aACA,sDACA,sBAAwB,CAG1B,gBACE,WACA,gBACA,cAAgB,CAGlB,sBACE,cACA,cAAgB,CAGlB,kCACE,UAAa,CAGf,0EACE,UACA,uCACA,kCACA,8BAAgC,CAGlC,uCACE,kCACI,8BACI,yBAA2B,CAGrC,oFACE,+BACI,2BACI,uBACR,qDACA,6CACA,wCACA,qCACA,sEAA6E,CAG/E,uCACE,+BACI,2BACI,sBAAyB,CAGnC,oFAIE,qDACA,6CACA,wCACA,qCACA,sEAA6E,CAG/E,0HAVE,mCACI,+BACI,0BAA4B,CActC,kFACE,+BACI,2BACI,uBACR,qDACA,6CACA,wCACA,qCACA,sEAA6E,CAG/E,sCACE,+BACI,2BACI,sBAAyB,CAGnC,kFACE,kCACI,8BACI,0BACR,qDACA,6CACA,wCACA,qCACA,sEAA6E,CC9K/E,wBACE,yGACQ,iGACR,kBACA,YACA,cAAgB,CAGlB,yBACE,8BACE,+GACQ,uGACR,0DACA,qDACA,iDAAyD,CAC1D","file":"css/index.css","sourcesContent":[".lightbox-btn {\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n background: none;\n border: 1px solid transparent;\n fill: white;\n opacity: 0.8;\n outline: none;\n margin: 2px 2px;\n padding: 0 0;\n -webkit-tap-highlight-color: #ffffff00;\n}\n\n.lightbox-btn:hover {\n opacity: 1;\n -webkit-transition: opacity 200ms ease;\n -o-transition: opacity 200ms ease;\n transition: opacity 200ms ease;\n}\n\n.lightbox-btn--ripple circle {\n fill: none;\n}\n\n.lightbox-btn--ripple:hover circle {\n -webkit-transform: scale(3);\n -ms-transform: scale(3);\n transform: scale(3);\n -webkit-transform-origin: 33% 33%;\n -ms-transform-origin: 33% 33%;\n transform-origin: 33% 33%;\n fill: #64646480;\n -webkit-transition: -webkit-transform 200ms ease;\n transition: -webkit-transform 200ms ease;\n -o-transition: transform 200ms ease;\n transition: transform 200ms ease;\n transition: transform 200ms ease, -webkit-transform 200ms ease;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Button.css",".lightbox-content-center {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.lightbox-modifiers-box {\n background-color: rgba(0, 0, 0, 0.2);\n text-align: center;\n font-size: 1.2em;\n position: absolute;\n width: 100%;\n z-index: 1;\n}\n\n@media (min-height: 600px) {\n .lightbox-modifiers-box {\n background-color: transparent;\n }\n}\n\n@media (min-width: 768px) {\n .lightbox-image-container {\n margin: 0 5em;\n }\n}\n\n.lightbox-image-container {\n overflow: hidden;\n height: calc(100% - 102px);\n margin-top: 40px;\n}\n\n.lightbox-image {\n height: 100%;\n background-repeat: no-repeat;\n}\n\n.lightbox-image.moving {\n -webkit-transition: none;\n -o-transition: none;\n transition: none;\n}\n\n.lightbox-loader {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n fill: white;\n -webkit-animation: rotating 2s linear infinite;\n animation: rotating 2s linear infinite;\n}\n\n@-webkit-keyframes rotating {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg);\n }\n}\n\n@keyframes rotating {\n from {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg);\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Image.css","html.lightbox-open {\n overflow: hidden;\n position: fixed;\n width: 100%;\n}\n\n.lightbox-backdrop {\n position: fixed;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n top: 0px;\n left: 0px;\n z-index: 100;\n}\n\n.lightbox-btn-left,\n.lightbox-btn-right,\n.lightbox-btn-close,\n.lightbox-title-content,\n.lightbox-modifiers-box {\n -webkit-transition: opacity 200ms ease;\n -o-transition: opacity 200ms ease;\n transition: opacity 200ms ease;\n}\n\n@media (max-width: 767px) {\n .hide-controls .lightbox-btn-left,\n .hide-controls .lightbox-btn-right {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n@media (max-height: 599px) {\n .hide-controls .lightbox-btn-close,\n .hide-controls .lightbox-title-content,\n .hide-controls .lightbox-modifiers-box {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.lightbox-btn-close {\n position: fixed;\n left: 0px;\n z-index: 2;\n}\n\n.lightbox-btn-right {\n position: absolute;\n top: 50%;\n margin-top: -1.5em;\n right: 0px;\n}\n\n.lightbox-btn-left {\n position: absolute;\n top: 50%;\n margin-top: -1.5em;\n left: 0px;\n}\n\n@media (min-width: 768px) {\n .lightbox-btn-right {\n padding-right: 10px;\n }\n\n .lightbox-btn-left {\n padding-left: 10px;\n }\n}\n\n.lightbox-title-content {\n background-color: rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n position: absolute;\n width: 100%;\n z-index: 1;\n bottom: 0;\n text-align: center;\n padding: 10px;\n font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif;\n line-height: 1.42857143;\n}\n\n.lightbox-title {\n color: white;\n font-weight: 600;\n font-size: 16px;\n}\n\n.lightbox-description {\n color: #C5C5C5;\n font-size: 14px;\n}\n\n.lightbox-transition-image-appear {\n opacity: 0.1;\n}\n\n.lightbox-transition-image-appear.lightbox-transition-image-appear-active {\n opacity: 1;\n -webkit-transition: opacity .3s ease-in;\n -o-transition: opacity .3s ease-in;\n transition: opacity .3s ease-in;\n}\n\n.lightbox-transition-image-enter-right {\n -webkit-transform: translate(100%);\n -ms-transform: translate(100%);\n transform: translate(100%);\n}\n\n.lightbox-transition-image-enter-right.lightbox-transition-image-enter-right-active {\n -webkit-transform: translate(0%);\n -ms-transform: translate(0%);\n transform: translate(0%);\n -webkit-transition: -webkit-transform 300ms ease-in-out;\n transition: -webkit-transform 300ms ease-in-out;\n -o-transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;\n}\n\n.lightbox-transition-image-leave-right {\n -webkit-transform: translate(0%);\n -ms-transform: translate(0%);\n transform: translate(0%);\n}\n\n.lightbox-transition-image-leave-right.lightbox-transition-image-leave-right-active {\n -webkit-transform: translate(-100%);\n -ms-transform: translate(-100%);\n transform: translate(-100%);\n -webkit-transition: -webkit-transform 300ms ease-in-out;\n transition: -webkit-transform 300ms ease-in-out;\n -o-transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;\n}\n\n.lightbox-transition-image-enter-left {\n -webkit-transform: translate(-100%);\n -ms-transform: translate(-100%);\n transform: translate(-100%);\n}\n\n.lightbox-transition-image-enter-left.lightbox-transition-image-enter-left-active {\n -webkit-transform: translate(0%);\n -ms-transform: translate(0%);\n transform: translate(0%);\n -webkit-transition: -webkit-transform 300ms ease-in-out;\n transition: -webkit-transform 300ms ease-in-out;\n -o-transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;\n}\n\n.lightbox-transition-image-leave-left {\n -webkit-transform: translate(0%);\n -ms-transform: translate(0%);\n transform: translate(0%);\n}\n\n.lightbox-transition-image-leave-left.lightbox-transition-image-leave-left-active {\n -webkit-transform: translate(100%);\n -ms-transform: translate(100%);\n transform: translate(100%);\n -webkit-transition: -webkit-transform 300ms ease-in-out;\n transition: -webkit-transform 300ms ease-in-out;\n -o-transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out;\n transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Container.css",".lightbox-img-thumbnail {\n -webkit-box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n border-radius: 2px;\n margin: 10px;\n cursor: pointer;\n}\n\n@media (min-width: 768px) {\n .lightbox-img-thumbnail:hover {\n -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);\n -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Lightbox.css"],"sourceRoot":""}