@betaweb/lightbox
Version:
A simple JavaScript class to generate images Lightbox
1 lines • 6.25 kB
Source Map (JSON)
{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,MACI,0BAA2B,CAC3B,gCAAiC,CACjC,+CAAgD,CAClD,+CAAgD,CAChD,kDACF,CAEA,sBACI,qBACJ,CAEA,UACI,YAAa,CACb,cAAe,CACf,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,WAAY,CACZ,sBAAuB,CACvB,kBAAmB,CACnB,YAAa,CACb,mDAAqD,CACrD,SAAU,CACV,iBAAkB,CAClB,cAAe,CACf,gBACJ,CACA,kBACI,sBAAuB,CACvB,kBAAmB,CACnB,SACJ,CACA,4CACI,yDAA6D,CAC7D,kBAAmB,CACnB,SACJ,CAEA,4BACK,iBAAkB,CAClB,UAAW,CACX,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,mDAAqD,CACrD,wCAAyC,CACzC,kBAAmB,CACnB,2BACL,CAEA,iBACI,iBAAkB,CAClB,aAAc,CACd,UAAW,CACX,WAAY,CACZ,4BAA6B,CAC7B,qBAAsB,CACtB,2BAA4B,CAC5B,uBAA2B,CAC3B,kBAAmB,CACnB,SAAU,CACV,qBAAsB,CACtB,cACJ,CAEA,4DAEI,YACJ,CAEA,wCAEI,cAAe,CACf,KAAM,CACN,QAAS,CACT,4BAA6B,CAC7B,SAAU,CACV,YAAa,CACb,SAAU,CACV,cAAe,CACjB,sBACF,CAEA,sDAEC,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,8BAAgC,CAGhC,8CAAyB,CAAzB,kBAAyB,CAAzB,wBAAyB,CACzB,UAAW,CACX,WAAY,CACZ,YACD,CAEA,oDAEC,iBAAkB,CAClB,UAAW,CACX,OAAQ,CACR,QAAS,CACT,8BAAgC,CAChC,2BAA4B,CAC5B,cAAe,CACf,eAAiB,CACjB,mDAAqD,CACrD,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,gBACD,CAEA,oBACI,UAAW,CACX,MACJ,CACA,2BACC,oBAAqB,CACrB,yBACD,CAEA,oBACI,OAAQ,CACR,SACJ,CACA,2BACC,qBAAsB,CACtB,uBACD,CAEA,oDAEI,SACJ,CAEA,oBACI,YAAa,CACb,iBAAkB,CAClB,sBAAuB,CACvB,kBAAmB,CACnB,oBAAqB,CACrB,QAAS,CACT,WAAY,CACZ,QAAS,CACT,0BACJ,CACA,uBACI,SAAU,CACV,UAAW,CACX,iBAAkB,CAClB,mDAAqD,CACrD,eAAgB,CAChB,cAAe,CACf,kBAAmB,CACnB,uBAAwB,CACxB,6CAGJ,CACA,2DAEI,oBAAqB,CACrB,mDACJ,CAEA,kBACI,iBAAkB,CAClB,WAAY,CACZ,UAAW,CACX,cAAe,CACf,mDAAqD,CACrD,+BAAgC,CAChC,YAAa,CACb,sBAAuB,CACvB,kBAAmB,CACnB,eACJ,CAEA,eACI,cACJ,CAEA,iBACI,GACI,oBAAqB,CACrB,qDACJ,CAEA,IACI,kBAAmB,CACnB,uDACJ,CAEA,GACI,oBAAqB,CACrB,oDACJ,CACJ","file":"lightbox.min.css","sourceRoot":"../src","sourcesContent":[":root {\n --lightbox-black-rgb: 0,0,0;\n --lightbox-white-rgb: 255,255,255;\n --lightbox-black: rgb(var(--lightbox-black-rgb));\n\t\t--lightbox-white: rgb(var(--lightbox-white-rgb));\n\t\t--lightbox-nav-chevron-color: var(--lightbox-black);\n}\n\n.lightbox, .lightbox * {\n box-sizing: border-box;\n}\n\n.lightbox {\n display: flex;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n background-color: rgba(var(--lightbox-white-rgb), .8);\n opacity: 0;\n visibility: hidden;\n cursor: pointer;\n user-select: none;\n}\n.lightbox.visible {\n transition: opacity .3s;\n visibility: visible;\n opacity: 1;\n}\n.lightbox:not(.is-loading) .lightbox--inner {\n transition: width .3s, height .3s, transform .3s, opacity .3s;\n transform: scale(1);\n opacity: 1;\n}\n\n.lightbox.is-loading::before {\n position: absolute;\n content: '';\n width: 50px;\n height: 50px;\n border-radius: 50px;\n background-color: rgba(var(--lightbox-black-rgb), .5);\n box-shadow: 0 0 0 0 var(--lightbox-black);\n transform: scale(1);\n animation: pulse 2s infinite;\n}\n\n.lightbox--inner {\n position: relative;\n display: block;\n width: auto;\n height: auto;\n background-color: transparent;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 10px;\n opacity: 0;\n transform: scale(1.05);\n cursor: default;\n}\n\n.lightbox--nav-prev.is-hidden,\n.lightbox--nav-next.is-hidden {\n display: none;\n}\n\n.lightbox--nav-prev,\n.lightbox--nav-next {\n position: fixed;\n top: 0;\n bottom: 0;\n background-color: transparent;\n width: 20%;\n z-index: 1001;\n opacity: 0;\n cursor: pointer;\n\t\ttransition: opacity .3s;\n}\n\n.lightbox--nav-prev::before,\n.lightbox--nav-next::before {\n\tposition: absolute;\n\tcontent: '';\n\ttop: calc(50% - 10px);\n\ttransform: translate(-50%, -50%);\n\tborder-color: var(--lightbox-nav-chevron-color);\n\tborder-style: solid;\n\tborder-width: 5px 5px 0 0;\n\twidth: 20px;\n\theight: 20px;\n\tz-index: 1002;\n}\n\n.lightbox--nav-prev::after,\n.lightbox--nav-next::after {\n\tposition: absolute;\n\tcontent: '';\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tcolor: var(--lightbox-black);\n\tfont-size: 3rem;\n\tfont-weight: bold;\n\tbackground-color: rgba(var(--lightbox-white-rgb), .4);\n\tborder-radius: 50%;\n\twidth: 70px;\n\theight: 70px;\n\ttext-align: center;\n\tline-height: 70px;\n}\n\n.lightbox--nav-prev {\n right: auto;\n left: 0;\n}\n.lightbox--nav-prev::before {\n\tleft: calc(50% - 8px);\n\ttransform: rotate(-135deg);\n}\n\n.lightbox--nav-next {\n right: 0;\n left: auto;\n}\n.lightbox--nav-next::before {\n\tleft: calc(50% - 15px);\n\ttransform: rotate(45deg);\n}\n\n.lightbox--nav-prev:hover,\n.lightbox--nav-next:hover {\n opacity: 1;\n}\n\n.lightbox--nav-dots {\n display: flex;\n position: absolute;\n justify-content: center;\n align-items: center;\n list-style-type: none;\n margin: 0;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n}\n.lightbox--nav-dots li {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: rgba(var(--lightbox-black-rgb), .2);\n margin: 0 .25rem;\n cursor: pointer;\n transform: scale(1);\n transform-origin: center;\n transition:\n transform .3s,\n background-color .3s;\n}\n.lightbox--nav-dots li:hover,\n.lightbox--nav-dots li.active {\n transform: scale(1.6);\n background-color: rgba(var(--lightbox-black-rgb), .6);\n}\n\n.lightbox--legend {\n position: absolute;\n bottom: 2rem;\n width: 100%;\n padding: 2rem 0;\n background-color: rgba(var(--lightbox-white-rgb), .7);\n color: var(--lightbox-black-rgb);\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: bold;\n}\n\n.lightbox-link {\n cursor: pointer;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(.95);\n box-shadow: 0 0 0 0 rgba(var(--lightbox-black-rgb), .7);\n }\n\n 70% {\n transform: scale(1);\n box-shadow: 0 0 0 10px rgba(var(--lightbox-black-rgb), 0);\n }\n\n 100% {\n transform: scale(.95);\n box-shadow: 0 0 0 0 rgba(var(--lightbox-black-rgb), 0);\n }\n}"]}