tonyair
/
meta-lightbox
mirror of https://github.com/a2nt/meta-lightbox.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

FIX: minor updates

This commit is contained in:
Tony Air 2021-08-10 01:20:02 +02:00
parent bf7c55795d
commit b31e2ec497
3 changed files with 265 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/app.css vendored Normal file
View File

@ -0,0 +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__loading .meta-spinner,.meta-MetaWindow-overlay__open{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;height:80%;position:relative;width:100%;z-index:1}@media(min-width:992px){.meta-MetaWindow .meta-content{height:90%;height:calc(90% - 3rem);width:90%;width:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{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;display:flex;flex-direction:column;justify-content:center;max-height:100%;max-width:100%;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}

12
src/scss/test-build.scss Executable file
View File

@ -0,0 +1,12 @@
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

252
src/scss/window.scss Executable file
View File

@ -0,0 +1,252 @@
@import '_variables';
$module_name: 'meta-MetaWindow';
.#{$module_name} {
position: fixed;
// lightbox inner elements
.meta-spinner_embed,
.meta-spinner,
.meta-error {
display: none;
align-items: center;
justify-content: center;
z-index: 2;
text-align: center;
}
.meta-spinner_embed,
.meta-spinner {
@include spinner_style();
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.meta-error {
color: $clr-red;
font-weight: bold;
font-size: 1.5em;
}
.meta-spinner_embed {
display: flex;
}
&-overlay {
background: $meta-overlay-bg;
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
align-items: center;
justify-content: center;
z-index: 98;
// meta states
&__open {
display: flex;
}
&__loading {
.meta-spinner {
display: flex;
}
}
&__error {
.meta-content {
justify-content: center;
}
.meta-error {
display: flex;
}
}
}
// navs
.meta-nav {
font-size: $meta-nav-size;
color: $meta-nav-color;
text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
border: 0;
background: none;
z-index: 2;
@include hover-focus() {
color: $meta-nav-color;
}
&:hover {
color: $meta-nav-hover-color;
background: $meta-nav-hover-bg;
text-shadow: none;
text-decoration: none;
}
}
.meta-nav-arrow {
position: absolute;
bottom: 0;
top: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: $meta-nav-arrows-size;
padding: $meta-nav-padding;
z-index: 2;
@include hover-focus() {
.fa,
.fas,
.far,
.fab {
transform: $meta-nav-hover-transform;
}
}
@media (min-width: map-get($grid-breakpoints, 'lg')) {
top: 0;
bottom: 0;
}
&__next {
right: 0;
}
&__prev {
left: 0;
}
@media (min-width: map-get($grid-breakpoints, 'lg')) {
&__next {
right: -($meta-nav-arrows-size + 0.5);
}
&__prev {
left: -($meta-nav-arrows-size + 0.5);
}
}
}
.meta-close {
position: absolute;
top: -3rem;
right: 0;
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 + 0.5);
right: -($meta-nav-arrows-size + 0.5);
}
}
.meta-content {
position: relative;
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
z-index: 1;
@media (min-width: map-get($grid-breakpoints, 'lg')) {
width: 90%;
height: 90%;
width: calc(90% - 3rem);
height: calc(90% - 3rem);
}
}
.meta-wrap {
max-height: 100%;
max-width: 100%;
width: 100%;
overflow: auto;
word-break: break-word;
margin: 0 auto;
img {
object-fit: cover;
max-width: 100%;
max-height: 100%;
}
}
// Lightbox types
&__text {
.meta-content {
background: $meta-text-wrapper-bg;
color: $meta-text-wrapper-color;
padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
padding-right: 0;
}
.meta-wrap {
padding-right: $meta-text-wrapper-padding-width;
}
}
&__image,
&__video {
.typography,
.meta-wrap {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100%;
max-width: 100%;
min-height: 100%;
img {
margin: 0;
}
}
}
&__video,
&__embed {
@include responsive-ratio($meta-video-width, $meta-video-height, true);
a[rel='nofollow noreferrer noopener'] {
color: $meta-embed-loading-failed-color;
font-size: $meta-embed-loading-failed-size;
font-weight: $meta-embed-loading-failed-weight;
&:before {
content: 'Unable to load. Please follow the provided link: ';
display: block;
}
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}