diff --git a/dist/css/app.css b/dist/css/app.css
index 720f2b6..8cbe15b 100644
--- a/dist/css/app.css
+++ b/dist/css/app.css
@@ -1 +1 @@
-.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{display:none;align-items:center;justify-content:center;z-index:2;text-align:center}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{font-size:2rem;color:#fff;font-weight:700;text-transform:uppercase;position:absolute;left:0;right:0;top:0;bottom:0}.meta-MetaWindow .meta-spinner_embed{display:flex}.meta-MetaWindow-overlay{background:rgba(96,125,139,.8);display:none;position:fixed;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;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{font-size:2rem;color:#212121;text-shadow:#fff 0 0 .25em;border:0;background:none;z-index:2}.meta-MetaWindow .meta-nav:focus,.meta-MetaWindow .meta-nav:hover{color:#eceff1;background:#2196f3;text-shadow:none;text-decoration:none}.meta-MetaWindow .meta-nav-arrow{position:absolute;bottom:0;top:auto;display:flex;justify-content:center;align-items:center;font-size:2.5rem;padding:.25rem .5rem;z-index:2}@media (min-width:992px){.meta-MetaWindow .meta-nav-arrow{top:0;bottom: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;top:-3rem;right:0;width:1.25em}@media (min-width:992px){.meta-MetaWindow .meta-close{top:-3rem;right:-3rem}}.meta-MetaWindow .meta-content{position:relative;width:100%;height:80%;display:flex;flex-direction:column;z-index:1}@media (min-width:992px){.meta-MetaWindow .meta-content{width:90%;height:90%;width:calc(90% - 3rem);height:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{width:100%;overflow:auto;word-break:break-word}.meta-MetaWindow .meta-wrap,.meta-MetaWindow .meta-wrap img{max-height:100%;max-width:100%}.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{display:flex;justify-content:center;align-items:center;flex-direction:column;max-height:100%;max-width:100%;min-height:100%}.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;position:relative;width:100%;padding-top:56.25%}.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{position:absolute;top:0;left:0;width:100%;height:100%}
\ No newline at end of file
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.meta-MetaWindow{position:fixed}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{display:none;align-items:center;justify-content:center;z-index:2;text-align:center}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{font-size:2rem;color:#fff;font-weight:700;text-transform:uppercase;position:absolute;left:0;right:0;top:0;bottom:0}.meta-MetaWindow .meta-spinner_embed{display:flex}.meta-MetaWindow-overlay{background:rgba(96,125,139,.8);display:none;position:fixed;left:0;right:0;top:0;bottom:0;align-items:center;justify-content:center;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{font-size:2rem;color:#212121;text-shadow:#fff 0 0 .25em;border:0;background:none;z-index:2}.meta-MetaWindow .meta-nav:focus,.meta-MetaWindow .meta-nav:hover{color:#eceff1;background:#2196f3;text-shadow:none;text-decoration:none}.meta-MetaWindow .meta-nav-arrow{position:absolute;bottom:0;top:auto;display:flex;justify-content:center;align-items:center;font-size:2.5rem;padding:.25rem .5rem;z-index:2}@media (min-width:992px){.meta-MetaWindow .meta-nav-arrow{top:0;bottom: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;top:-3rem;right:0;width:1.25em}@media (min-width:992px){.meta-MetaWindow .meta-close{top:-3rem;right:-3rem}}.meta-MetaWindow .meta-content{position:relative;width:100%;height:80%;display:flex;flex-direction:column;z-index:1}@media (min-width:992px){.meta-MetaWindow .meta-content{width:90%;height:90%;width:calc(90% - 3rem);height:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{width:100%;overflow:auto;word-break:break-word}.meta-MetaWindow .meta-wrap,.meta-MetaWindow .meta-wrap img{max-height:100%;max-width:100%}.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{display:flex;justify-content:center;align-items:center;flex-direction:column;max-height:100%;max-width:100%;min-height:100%}.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;position:relative;width:100%;padding-top:56.25%}.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{position:absolute;top:0;left:0;width:100%;height:100%}
\ No newline at end of file
diff --git a/dist/report.html b/dist/report.html
index 3fc99cb..12c15aa 100644
--- a/dist/report.html
+++ b/dist/report.html
@@ -3,7 +3,7 @@
- @a2nt/meta-lightbox-react [31 Jan 2021 at 20:21]
+ @a2nt/meta-lightbox-react [31 Jan 2021 at 20:54]
diff --git a/package.json b/package.json
index 8557bc9..7743501 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@a2nt/meta-lightbox-react",
- "version": "3.0.2",
+ "version": "3.0.3",
"description": "ReactJS: Universal Lightbox window",
"author": "Tony Air ",
"license": "BSD-2-Clause",
diff --git a/src/scss/_window.scss b/src/scss/_window.scss
index 20aaa68..61f3d19 100755
--- a/src/scss/_window.scss
+++ b/src/scss/_window.scss
@@ -3,205 +3,207 @@
$module_name: 'meta-MetaWindow';
.sr-only {
- @include sr-only();
+ @include sr-only();
}
.#{$module_name} {
- // lightbox inner elements
- .meta-spinner_embed,
- .meta-spinner,
- .meta-error {
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 2;
- text-align: center;
- }
+ position: fixed;
- .meta-spinner_embed,
- .meta-spinner {
- @include spinner_style();
+ // lightbox inner elements
+ .meta-spinner_embed,
+ .meta-spinner,
+ .meta-error {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 2;
+ text-align: center;
+ }
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- }
+ .meta-spinner_embed,
+ .meta-spinner {
+ @include spinner_style();
- .meta-spinner_embed {
- display: flex;
- }
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ }
- &-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-spinner_embed {
+ display: flex;
+ }
- // meta states
- &__open {
- 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;
- &__loading {
- .meta-spinner {
- display: flex;
- }
- }
- &__error {
- .meta-content {
- justify-content: center;
- }
- .meta-error {
- display: flex;
- }
- }
- }
+ // meta states
+ &__open {
+ 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;
+ &__loading {
+ .meta-spinner {
+ display: flex;
+ }
+ }
+ &__error {
+ .meta-content {
+ justify-content: center;
+ }
+ .meta-error {
+ display: flex;
+ }
+ }
+ }
- @include hover-focus() {
- color: $meta-nav-hover-color;
- background: $meta-nav-hover-bg;
- text-shadow: none;
- text-decoration: none;
- }
- }
+ // 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;
- .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() {
+ color: $meta-nav-hover-color;
+ background: $meta-nav-hover-bg;
+ text-shadow: none;
+ text-decoration: none;
+ }
+ }
- @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-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;
- .meta-close {
- position: absolute;
- top: -3rem;
- right: 0;
- width: 1.25em;
- @media (min-width: map-get($grid-breakpoints, 'lg')) {
- top: -($meta-nav-arrows-size + 0.5);
- right: -($meta-nav-arrows-size + 0.5);
- }
- }
+ @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-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-close {
+ position: absolute;
+ top: -3rem;
+ right: 0;
+ width: 1.25em;
+ @media (min-width: map-get($grid-breakpoints, 'lg')) {
+ top: -($meta-nav-arrows-size + 0.5);
+ right: -($meta-nav-arrows-size + 0.5);
+ }
+ }
- .meta-wrap {
- max-height: 100%;
- max-width: 100%;
- width: 100%;
- overflow: auto;
- word-break: break-word;
- img {
- max-width: 100%;
- max-height: 100%;
- }
- }
+ .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);
+ }
+ }
- // Lightbox types
+ .meta-wrap {
+ max-height: 100%;
+ max-width: 100%;
+ width: 100%;
+ overflow: auto;
+ word-break: break-word;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ }
+ }
- &__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 {
- 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);
+ // Lightbox types
- 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;
+ &__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 {
+ 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);
- &:before {
- content: 'Unable to load. Please follow the provided link: ';
- display: block;
- }
- }
+ 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;
- iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
+ &:before {
+ content: 'Unable to load. Please follow the provided link: ';
+ display: block;
+ }
+ }
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
}