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%; + } + } }