IMPR: allow to load js and css independatally to custoize _variables
This commit is contained in:
Tony Air
parent
c8451c56fe
commit
4542f586ac
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>@a2nt/meta-lightbox-react [24 Feb 2021 at 20:22]</title>
|
||||
<title>@a2nt/meta-lightbox-react [24 Feb 2021 at 20:24]</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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import styles from '../scss/_window.scss';
|
||||
import './app';
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
import Events from './_events';
|
||||
import { Component } from 'react';
|
||||
import styles from '../scss/_window.scss';
|
||||
|
||||
import Embed, { defaultProviders } from 'react-tiny-oembed';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $body-color: $clr-black !default;
|
|||
$grid-gutter-width: 2rem !default;
|
||||
$grid-gutter-height: 2rem !default;
|
||||
|
||||
$meta-overlay-bg: transparentize($clr-grey-600, 0.2) !default;
|
||||
$meta-overlay-bg: transparentize($clr-black, 0.2) !default;
|
||||
|
||||
$meta-text-wrapper-bg: $body-bg !default;
|
||||
$meta-text-wrapper-color: $body-color !default;
|
||||
|
|
@ -15,10 +15,12 @@ $meta-text-wrapper-padding-height: $grid-gutter-height/2 !default;
|
|||
|
||||
$meta-nav-size: 2rem !default;
|
||||
$meta-nav-arrows-size: 2.5rem !default;
|
||||
$meta-nav-color: $clr-grey-900 !default;
|
||||
$meta-nav-color: $clr-white !default;
|
||||
$meta-nav-hover-color: $clr-blue-grey-50 !default;
|
||||
$meta-nav-hover-bg: $clr-blue !default;
|
||||
$meta-nav-hover-shadow: $clr-white !default;
|
||||
$meta-nav-hover-bg: none !default;
|
||||
$meta-nav-hover-shadow: $clr-black !default;
|
||||
$meta-nav-hover-transform: scale(1.5) !default;
|
||||
$meta-nav-close-hover-transform: rotate(-180deg) !default;
|
||||
|
||||
$meta-nav-padding: 0.25rem 0.5rem !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,207 +3,245 @@
|
|||
$module_name: 'meta-MetaWindow';
|
||||
|
||||
.sr-only {
|
||||
@include sr-only();
|
||||
@include sr-only();
|
||||
}
|
||||
|
||||
.#{$module_name} {
|
||||
position: fixed;
|
||||
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;
|
||||
}
|
||||
// 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();
|
||||
.meta-spinner_embed,
|
||||
.meta-spinner {
|
||||
@include spinner_style();
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.meta-spinner_embed {
|
||||
display: flex;
|
||||
}
|
||||
.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;
|
||||
&-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;
|
||||
}
|
||||
// meta states
|
||||
&__open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
.meta-spinner {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&__error {
|
||||
.meta-content {
|
||||
justify-content: center;
|
||||
}
|
||||
.meta-error {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__loading {
|
||||
.meta-spinner {
|
||||
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;
|
||||
&__error {
|
||||
.meta-content {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include hover-focus() {
|
||||
color: $meta-nav-hover-color;
|
||||
background: $meta-nav-hover-bg;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.meta-error {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
// 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;
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include hover-focus() {
|
||||
color: $meta-nav-color;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $meta-nav-hover-color;
|
||||
background: $meta-nav-hover-bg;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
// Lightbox types
|
||||
@include hover-focus() {
|
||||
|
||||
&__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);
|
||||
.fa,
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
transform: $meta-nav-hover-transform;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
@media (min-width: map-get($grid-breakpoints, 'lg')) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: 'Unable to load. Please follow the provided link: ';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&__next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&__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;
|
||||
|
||||
img {
|
||||
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 {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue