tonyair/meta-lightbox
1
0
Fork 0
mirror of https://github.com/a2nt/meta-lightbox.git synced 2024-10-22 17:05:53 +02:00
Code Issues Projects Releases Wiki Activity

FIX: Close btn animation

Browse Source
This commit is contained in:
Tony Air 2023-08-10 19:02:11 +02:00
parent 24be03fde6
commit afdd302ffa
4 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/app.css vendored
View File

@ -1 +1 @@
@keyframes fade{0%{filter:grayscale(0);opacity:1}50%{filter:grayscale(1);opacity:.5}to{filter:grayscale(0);opacity:1}}.meta-MetaWindow{position:fixed}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner--embed{align-items:center;display:none;justify-content:center;text-align:center;z-index:2}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner--embed{bottom:0;color:#fff;font-size:2rem;font-weight:700;left:0;position:absolute;right:0;text-transform:uppercase;top:0}.meta-MetaWindow .meta-error{color:#f44336;font-size:1.5em;font-weight:700}.meta-MetaWindow .meta-spinner--embed{display:flex}.meta-MetaWindow-overlay{align-items:center;background:rgba(0,0,0,.8);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:98}.meta-MetaWindow-overlay--open{display:flex}.meta-MetaWindow-overlay--loading{animation-duration:5s;animation-iteration-count:infinite;animation-name:fade}.meta-MetaWindow-overlay--loading .meta-spinner{display:flex}.meta-MetaWindow-overlay--error .meta-content{justify-content:center}.meta-MetaWindow-overlay--error .meta-error{display:flex}.meta-MetaWindow .meta-nav{background:none;border:0;color:#fff;font-size:2rem;text-shadow:#000 0 0 .25em;z-index:2}.meta-MetaWindow .meta-nav:focus,.meta-MetaWindow .meta-nav:hover{color:#fff}.meta-MetaWindow .meta-nav:hover{background:none;color:#eceff1;text-decoration:none;text-shadow:none}.meta-MetaWindow .meta-nav-arrow{align-items:center;bottom:0;display:flex;font-size:2.5rem;justify-content:center;padding:.25rem .5rem;position:absolute;top:auto;z-index:2}.meta-MetaWindow .meta-nav-arrow:focus .fa,.meta-MetaWindow .meta-nav-arrow:focus .fab,.meta-MetaWindow .meta-nav-arrow:focus .far,.meta-MetaWindow .meta-nav-arrow:focus .fas,.meta-MetaWindow .meta-nav-arrow:hover .fa,.meta-MetaWindow .meta-nav-arrow:hover .fab,.meta-MetaWindow .meta-nav-arrow:hover .far,.meta-MetaWindow .meta-nav-arrow:hover .fas{transform:scale(1.5)}@media(min-width:992px){.meta-MetaWindow .meta-nav-arrow{bottom:0;top:0}}.meta-MetaWindow .meta-nav-arrow__next{right:0}.meta-MetaWindow .meta-nav-arrow__prev{left:0}@media(min-width:992px){.meta-MetaWindow .meta-nav-arrow__next{right:-3rem}.meta-MetaWindow .meta-nav-arrow__prev{left:-3rem}}.meta-MetaWindow .meta-close{position:absolute;right:0;top:-3rem;width:1.25em}.meta-MetaWindow .meta-close:hover .fa,.meta-MetaWindow .meta-close:hover .fab,.meta-MetaWindow .meta-close:hover .far,.meta-MetaWindow .meta-close:hover .fas{transform:rotate(-180deg)}@media(min-width:992px){.meta-MetaWindow .meta-close{right:-3rem;top:-3rem}}.meta-MetaWindow .meta-content{display:flex;flex-direction:column;position:relative;width:100%;z-index:1}@media(min-width:768px){.meta-MetaWindow .meta-content{height:80%}}@media(min-width:992px){.meta-MetaWindow .meta-content{height:90%;height:calc(90% - 3rem);width:90%;width:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{display:flex;height:100%;margin:0 auto;max-height:100%;max-width:100%;overflow:auto;width:100%;word-break:break-word}.meta-MetaWindow .meta-wrap img{max-height:100%;max-width:100%;object-fit:cover}.meta-MetaWindow--text .meta-content{background:#fff;color:#000;padding:1rem 0 1rem 1rem}.meta-MetaWindow--text .meta-wrap{padding-right:1rem}.meta-MetaWindow--image .meta-wrap,.meta-MetaWindow--image .typography,.meta-MetaWindow--video .meta-wrap,.meta-MetaWindow--video .typography{align-items:center;justify-content:center;min-height:100%;overflow:hidden}.meta-MetaWindow--image .meta-wrap img,.meta-MetaWindow--image .typography img,.meta-MetaWindow--video .meta-wrap img,.meta-MetaWindow--video .typography img{margin:0}.meta-MetaWindow--embed:before,.meta-MetaWindow--video:before{content:"";display:block;padding-top:56.25%;position:relative;width:100%}.meta-MetaWindow--embed a[rel="nofollow noreferrer noopener"],.meta-MetaWindow--video a[rel="nofollow noreferrer noopener"]{color:#fff;font-size:1.2rem;font-weight:700}.meta-MetaWindow--embed a[rel="nofollow noreferrer noopener"]:before,.meta-MetaWindow--video a[rel="nofollow noreferrer noopener"]:before{content:"Unable to load. Please follow the provided link: ";display:block}.meta-MetaWindow--embed iframe,.meta-MetaWindow--video iframe{height:100%;left:0;position:absolute;top:0;width:100%}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
@keyframes fade{0%{filter:grayscale(0);opacity:1}50%{filter:grayscale(1);opacity:.5}to{filter:grayscale(0);opacity:1}}.meta-MetaWindow{position:fixed}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner--embed{align-items:center;display:none;justify-content:center;text-align:center;z-index:2}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner--embed{bottom:0;color:#fff;font-size:2rem;font-weight:700;left:0;position:absolute;right:0;text-transform:uppercase;top:0}.meta-MetaWindow .meta-error{color:#f44336;font-size:1.5em;font-weight:700}.meta-MetaWindow .meta-spinner--embed{display:flex}.meta-MetaWindow-overlay{align-items:center;background:rgba(0,0,0,.8);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:98}.meta-MetaWindow-overlay--open{display:flex}.meta-MetaWindow-overlay--loading{animation-duration:5s;animation-iteration-count:infinite;animation-name:fade}.meta-MetaWindow-overlay--loading .meta-spinner{display:flex}.meta-MetaWindow-overlay--error .meta-content{justify-content:center}.meta-MetaWindow-overlay--error .meta-error{display:flex}.meta-MetaWindow .meta-nav{background:none;border:0;color:#fff;font-size:2rem;text-shadow:#000 0 0 .25em;z-index:2}.meta-MetaWindow .meta-nav:focus,.meta-MetaWindow .meta-nav:hover{color:#fff}.meta-MetaWindow .meta-nav:hover{background:none;color:#eceff1;text-decoration:none;text-shadow:none}.meta-MetaWindow .meta-nav-arrow{align-items:center;bottom:0;display:flex;font-size:2.5rem;justify-content:center;padding:.25rem .5rem;position:absolute;top:auto;z-index:2}.meta-MetaWindow .meta-nav-arrow:focus .fa,.meta-MetaWindow .meta-nav-arrow:focus .fab,.meta-MetaWindow .meta-nav-arrow:focus .far,.meta-MetaWindow .meta-nav-arrow:focus .fas,.meta-MetaWindow .meta-nav-arrow:hover .fa,.meta-MetaWindow .meta-nav-arrow:hover .fab,.meta-MetaWindow .meta-nav-arrow:hover .far,.meta-MetaWindow .meta-nav-arrow:hover .fas{transform:scale(1.5)}@media(min-width:992px){.meta-MetaWindow .meta-nav-arrow{bottom:0;top:0}}.meta-MetaWindow .meta-nav-arrow__next{right:0}.meta-MetaWindow .meta-nav-arrow__prev{left:0}@media(min-width:992px){.meta-MetaWindow .meta-nav-arrow__next{right:-3rem}.meta-MetaWindow .meta-nav-arrow__prev{left:-3rem}}.meta-MetaWindow .meta-close{position:absolute;right:0;top:-3rem;width:1.25em}.meta-MetaWindow .meta-close:hover{transform:rotate(-180deg)}@media(min-width:992px){.meta-MetaWindow .meta-close{right:-3rem;top:-3rem}}.meta-MetaWindow .meta-content{display:flex;flex-direction:column;position:relative;width:100%;z-index:1}@media(min-width:768px){.meta-MetaWindow .meta-content{height:80%}}@media(min-width:992px){.meta-MetaWindow .meta-content{height:90%;height:calc(90% - 3rem);width:90%;width:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{display:flex;height:100%;margin:0 auto;max-height:100%;max-width:100%;overflow:auto;width:100%;word-break:break-word}.meta-MetaWindow .meta-wrap img{max-height:100%;max-width:100%;object-fit:cover}.meta-MetaWindow--text .meta-content{background:#fff;color:#000;padding:1rem 0 1rem 1rem}.meta-MetaWindow--text .meta-wrap{padding-right:1rem}.meta-MetaWindow--image .meta-wrap,.meta-MetaWindow--image .typography,.meta-MetaWindow--video .meta-wrap,.meta-MetaWindow--video .typography{align-items:center;justify-content:center;min-height:100%;overflow:hidden}.meta-MetaWindow--image .meta-wrap img,.meta-MetaWindow--image .typography img,.meta-MetaWindow--video .meta-wrap img,.meta-MetaWindow--video .typography img{margin:0}.meta-MetaWindow--embed:before,.meta-MetaWindow--video:before{content:"";display:block;padding-top:56.25%;position:relative;width:100%}.meta-MetaWindow--embed a[rel="nofollow noreferrer noopener"],.meta-MetaWindow--video a[rel="nofollow noreferrer noopener"]{color:#fff;font-size:1.2rem;font-weight:700}.meta-MetaWindow--embed a[rel="nofollow noreferrer noopener"]:before,.meta-MetaWindow--video a[rel="nofollow noreferrer noopener"]:before{content:"Unable to load. Please follow the provided link: ";display:block}.meta-MetaWindow--embed iframe,.meta-MetaWindow--video iframe{height:100%;left:0;position:absolute;top:0;width:100%}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}

4
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>@a2nt/meta-lightbox-js [10 Aug 2023 at 16:04]</title>
<title>@a2nt/meta-lightbox-js [10 Aug 2023 at 19:01]</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script>
@ -31,7 +31,7 @@
<body>
<div id="app"></div>
<script>
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":24191,"parsedSize":11449,"gzipSize":3620,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":573,"groups":[{"id":627,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":573,"parsedSize":265,"gzipSize":217}],"parsedSize":265,"gzipSize":217},{"label":"src","path":"./src","statSize":23618,"groups":[{"label":"js","path":"./src/js","statSize":19310,"groups":[{"id":820,"label":"test-build.js + 3 modules (concatenated)","path":"./src/js/test-build.js + 3 modules (concatenated)","statSize":19310,"parsedSize":11184,"gzipSize":3489,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js","statSize":19310,"groups":[{"id":null,"label":"test-build.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/test-build.js","statSize":304,"parsedSize":176,"gzipSize":54,"inaccurateSizes":true},{"id":null,"label":"app.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/app.js","statSize":980,"parsedSize":567,"gzipSize":177,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/_events.js","statSize":1367,"parsedSize":791,"gzipSize":246,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/window.js","statSize":16659,"parsedSize":9648,"gzipSize":3010,"inaccurateSizes":true}],"parsedSize":11184,"gzipSize":3489,"inaccurateSizes":true}]}],"parsedSize":11184,"gzipSize":3489},{"label":"scss","path":"./src/scss","statSize":4308,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":4308}],"parsedSize":0,"gzipSize":0}],"parsedSize":11184,"gzipSize":3489}],"isInitialByEntrypoint":{"app":true}}];
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":24067,"parsedSize":11449,"gzipSize":3620,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":573,"groups":[{"id":627,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":573,"parsedSize":265,"gzipSize":217}],"parsedSize":265,"gzipSize":217},{"label":"src","path":"./src","statSize":23494,"groups":[{"label":"js","path":"./src/js","statSize":19310,"groups":[{"id":820,"label":"test-build.js + 3 modules (concatenated)","path":"./src/js/test-build.js + 3 modules (concatenated)","statSize":19310,"parsedSize":11184,"gzipSize":3489,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js","statSize":19310,"groups":[{"id":null,"label":"test-build.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/test-build.js","statSize":304,"parsedSize":176,"gzipSize":54,"inaccurateSizes":true},{"id":null,"label":"app.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/app.js","statSize":980,"parsedSize":567,"gzipSize":177,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/_events.js","statSize":1367,"parsedSize":791,"gzipSize":246,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/test-build.js + 3 modules (concatenated)/src/js/window.js","statSize":16659,"parsedSize":9648,"gzipSize":3010,"inaccurateSizes":true}],"parsedSize":11184,"gzipSize":3489,"inaccurateSizes":true}]}],"parsedSize":11184,"gzipSize":3489},{"label":"scss","path":"./src/scss","statSize":4184,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":4184}],"parsedSize":0,"gzipSize":0}],"parsedSize":11184,"gzipSize":3489}],"isInitialByEntrypoint":{"app":true}}];
window.entrypoints = ["app"];
window.defaultSizes = "parsed";
</script>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@a2nt/meta-lightbox-js",
"version": "4.2.6",
"version": "4.2.7",
"description": "Universal lightbox",
"author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause",

5
src/scss/window.scss
View File

@ -168,13 +168,8 @@ $module-name: "meta-MetaWindow";
width: 1.25em;
&:hover {
.fa,
.fas,
.far,
.fab {
transform: $meta-nav-close-hover-transform;
}
}
@media (min-width: map-get($grid-breakpoints, "lg")) {
top: -($meta-nav-arrows-size + .5);