diff --git a/src/js/index.js b/src/js/index.js index d2ee000..4a418d5 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,5 +1,5 @@ /* - * MetaLightbox v0.7 + * MetaLightbox * https://tony.twma.pro * */ diff --git a/src/scss/meta-lightbox-theme.scss b/src/scss/meta-lightbox-theme.scss index 32c23c7..be64fea 100755 --- a/src/scss/meta-lightbox-theme.scss +++ b/src/scss/meta-lightbox-theme.scss @@ -85,4 +85,4 @@ $lightbox-breakpoint: 576px !default; .meta-lightbox-theme-default .meta-lightbox-close { opacity: 1; } -} \ No newline at end of file +} diff --git a/src/scss/meta-lightbox.scss b/src/scss/meta-lightbox.scss index 4334fb6..d8bf66e 100755 --- a/src/scss/meta-lightbox.scss +++ b/src/scss/meta-lightbox.scss @@ -1,36 +1,41 @@ .meta-lightbox-overlay { - position: fixed; - top: 0; - left: 0; - z-index: 99998; - width: 100%; - height: 100%; - overflow: hidden; - visibility: hidden; - opacity: 0; - box-sizing: border-box; + position: fixed; + top: 0; + left: 0; + z-index: 99998; + width: 100%; + height: 100%; + overflow: hidden; + visibility: hidden; + opacity: 0; + box-sizing: border-box; + + &.meta-lightbox-open { + visibility: visible; + opacity: 1; + } } -.meta-lightbox-overlay.meta-lightbox-open { - visibility: visible; - opacity: 1; -} -.meta-lightbox-wrap { - position: absolute; - top: 10%; - bottom: 10%; - left: 10%; - right: 10%; + +.meta-lightbox-wrap { + position: absolute; + top: 10%; + bottom: 10%; + left: 10%; + right: 10%; } + .meta-lightbox-content { - width: 100%; - height: 100%; + width: 100%; + height: 100%; + .meta-lightbox-zoom-wrapper { - display:block; + display: block; height: 100%; width: 100%; + &:after { - color:#fff; - font:normal normal normal 14px/1 FontAwesome; + color: #fff; + font: normal normal normal 14px/1 FontAwesome; content: "\f00e"; position: absolute; right: 1em; @@ -40,62 +45,73 @@ } } } + .meta-lightbox-title-wrap { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: 99999; - text-align: center; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 99999; + text-align: center; } -.meta-lightbox-nav { display: none; } + +.meta-lightbox-nav { + display: none; +} + .meta-lightbox-prev { - position: absolute; - top: 50%; - left: 0; + position: absolute; + top: 50%; + left: 0; } + .meta-lightbox-next { - position: absolute; - top: 50%; - right: 0; + position: absolute; + top: 50%; + right: 0; } + .meta-lightbox-close { - position: absolute; - top: 2%; - right: 2%; + position: absolute; + top: 2%; + right: 2%; } .meta-lightbox-image { text-align: center; + img { - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; - vertical-align: middle; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + vertical-align: middle; } } .meta-lightbox-content iframe { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } + .meta-lightbox-inline, .meta-lightbox-ajax { - max-height: 100%; - overflow: auto; + max-height: 100%; + overflow: auto; } + .meta-lightbox-error { - display: table; - text-align: center; - width: 100%; - height: 100%; - color: #fff; - text-shadow: 0 1px 1px #000; + display: table; + text-align: center; + width: 100%; + height: 100%; + color: #fff; + text-shadow: 0 1px 1px #000; } + .meta-lightbox-error p { - display: table-cell; - vertical-align: middle; + display: table-cell; + vertical-align: middle; } /* Effects @@ -107,16 +123,17 @@ .meta-lightbox-notouch .meta-lightbox-effect-slideUp, .meta-lightbox-notouch .meta-lightbox-effect-slideDown, .meta-lightbox-notouch .meta-lightbox-effect-fall { - transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } /* fadeScale */ .meta-lightbox-effect-fadeScale .meta-lightbox-wrap { - transition: all 0.3s; - transform: scale(0.7); + transition: all 0.3s; + transform: scale(0.7); } + .meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap { - transform: scale(1); + transform: scale(1); } /* slideLeft / slideRight / slideUp / slideDown */ @@ -124,39 +141,47 @@ .meta-lightbox-effect-slideRight .meta-lightbox-wrap, .meta-lightbox-effect-slideUp .meta-lightbox-wrap, .meta-lightbox-effect-slideDown .meta-lightbox-wrap { - transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); + transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } + .meta-lightbox-effect-slideLeft .meta-lightbox-wrap { - transform: translateX(-10%); + transform: translateX(-10%); } + .meta-lightbox-effect-slideRight .meta-lightbox-wrap { - transform: translateX(10%); + transform: translateX(10%); } + .meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap, .meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap { - transform: translateX(0); + transform: translateX(0); } + .meta-lightbox-effect-slideDown .meta-lightbox-wrap { - transform: translateY(-10%); + transform: translateY(-10%); } + .meta-lightbox-effect-slideUp .meta-lightbox-wrap { - transform: translateY(10%); + transform: translateY(10%); } + .meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap, .meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap { - transform: translateY(0); + transform: translateY(0); } /* fall */ .meta-lightbox-body-effect-fall .meta-lightbox-effect-fall { - perspective: 1000px; -} -.meta-lightbox-effect-fall .meta-lightbox-wrap { - transition: all 0.3s ease-out; - transform: translateZ(300px); -} -.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap { - transform: translateZ(0); + perspective: 1000px; } -@import "meta-lightbox-theme"; \ No newline at end of file +.meta-lightbox-effect-fall .meta-lightbox-wrap { + transition: all 0.3s ease-out; + transform: translateZ(300px); +} + +.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap { + transform: translateZ(0); +} + +@import "meta-lightbox-theme";