diff --git a/bower.json b/bower.json index 51e99e8..b4385d5 100644 --- a/bower.json +++ b/bower.json @@ -8,7 +8,7 @@ "window", "popup" ], - "version": "2.3.6", + "version": "2.4.0", "dependencies": { "jquery": ">=1.5.0" }, diff --git a/changelog.txt b/changelog.txt index a8a1f68..6797cdd 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,3 +1,10 @@ +2017/04/08 - v2.4.0 +Feature: Issue #69 - Autodetect the right video format supported by the browser +Feature: Issue #96 - Allow more possibilities to define transitions +Bugfix: Issue #122 - Improve dimension handling using forceWidth and forceHeight +Bugfix: Fix fade in issue with inner content +Feature: Issue #114 - Possibility to initialize lightcase collections with different tag attribute values + 2016/12/20 - v2.3.6 Hotfix: Fix scroll position after scrolling lightcase content on mobile @@ -169,4 +176,4 @@ Added: Lightcase cache Feature: Possibility to force width and height for default content 2012/05/13 - v1.0.1 -Initial release \ No newline at end of file +Initial release diff --git a/package.json b/package.json index d602f4e..1a42fdb 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "window", "popup" ], - "version": "2.3.6", + "version": "2.4.0", "dependencies": { "jquery": ">=1.5.0" }, diff --git a/src/css/lightcase-no-breakpoint.css b/src/css/lightcase-no-breakpoint.css new file mode 100644 index 0000000..b9d45ae --- /dev/null +++ b/src/css/lightcase-no-breakpoint.css @@ -0,0 +1,557 @@ +/** + * Lightcase - jQuery Plugin + * The smart and flexible Lightbox Plugin. + * + * @author Cornel Boppart + * @copyright Author + * + * @version 2.4.0 (08/04/2017) + */ +/** + * Lightcase settings + * + * Note: Override default settings for your project without touching this source code by simply + * defining those variables within a SASS map called '$lightcase-custom'. + * + * // Example usage + * $lightcase-custom: ( + * 'breakpoint': 768px + * ); + */ +@font-face { + font-family: 'lightcase'; + src: url("../fonts/lightcase.eot?55356177"); + src: url("../fonts/lightcase.eot?55356177#iefix") format("embedded-opentype"), url("../fonts/lightcase.woff?55356177") format("woff"), url("../fonts/lightcase.ttf?55356177") format("truetype"), url("../fonts/lightcase.svg?55356177#lightcase") format("svg"); + font-weight: normal; + font-style: normal; +} +/* line 12, ../scss/components/fonts/_font-lightcase.scss */ +[class*='lightcase-icon-']:before { + font-family: 'lightcase', sans-serif; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +/* Codes */ +/* line 35, ../scss/components/fonts/_font-lightcase.scss */ +.lightcase-icon-play:before { + content: '\e800'; +} + +/* line 36, ../scss/components/fonts/_font-lightcase.scss */ +.lightcase-icon-pause:before { + content: '\e801'; +} + +/* line 37, ../scss/components/fonts/_font-lightcase.scss */ +.lightcase-icon-close:before { + content: '\e802'; +} + +/* line 38, ../scss/components/fonts/_font-lightcase.scss */ +.lightcase-icon-prev:before { + content: '\e803'; +} + +/* line 39, ../scss/components/fonts/_font-lightcase.scss */ +.lightcase-icon-next:before { + content: '\e804'; +} + +/* line 40, ../scss/components/fonts/_font-lightcase.scss */ +.lightcase-icon-spin:before { + content: '\e805'; +} + +/** + * Mixin providing icon defaults to be used on top of font-lightcase. + * + * Example usage: + * @include icon(#e9e9e9) + */ +/** + * Mixin providing icon defaults including a hover status to be used + * on top of font-lightcase. + * + * Example usage: + * @include icon-hover(#e9e9e9, #fff) + */ +/** + * Provides natural content overflow behavior and scrolling support + * even so for touch devices. + * + * Example usage: + * @include overflow() + */ +/** + * Neutralizes/resets dimensions including width, height, position as well as margins, + * paddings and styles. Used to enforce a neutral and unstyled look and behavoir! + * + * Example usage: + * @include clear(true) + * + * @param boolean $important + */ +@-webkit-keyframes lightcase-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-moz-keyframes lightcase-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-o-keyframes lightcase-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-ms-keyframes lightcase-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes lightcase-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + transform: rotate(359deg); + } +} +/* line 1, ../scss/components/modules/_case.scss */ +#lightcase-case { + display: none; + position: fixed; + z-index: 2002; + top: 50%; + left: 50%; + font-family: arial, sans-serif; + font-size: 13px; + line-height: 1.5; + text-align: left; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} +@media screen and (max-width: -1) { + /* line 16, ../scss/components/modules/_case.scss */ + html[data-lc-type=inline] #lightcase-case, html[data-lc-type=ajax] #lightcase-case { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + margin: 0 !important; + padding: 55px 0 70px 0; + width: 100% !important; + height: 100% !important; + overflow: auto !important; + } +} + +@media screen and (min-width: 0) { + /* line 4, ../scss/components/modules/_content.scss */ + html:not([data-lc-type=error]) #lightcase-content { + position: relative; + z-index: 1; + text-shadow: none; + background-color: #fff; + -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); + -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); + -webkit-backface-visibility: hidden; + } +} +@media screen and (min-width: 0) { + /* line 23, ../scss/components/modules/_content.scss */ + html[data-lc-type=image] #lightcase-content, html[data-lc-type=video] #lightcase-content { + background-color: #333; + } +} +/* line 31, ../scss/components/modules/_content.scss */ +html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { + -webkit-box-shadow: none; + -moz-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} +@media screen and (max-width: -1) { + /* line 31, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { + position: relative !important; + top: auto !important; + left: auto !important; + width: auto !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + background: none !important; + } +} +/* line 43, ../scss/components/modules/_content.scss */ +html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} +@media screen and (max-width: -1) { + /* line 43, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { + padding: 15px; + } + /* line 52, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=error] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner > * { + width: 100% !important; + max-width: none !important; + } + /* line 59, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=error] #lightcase-content .lightcase-contentInner > *:not(iframe) { + height: auto !important; + max-height: none !important; + } +} +@media screen and (max-width: -1) { + /* line 70, ../scss/components/modules/_content.scss */ + html.lightcase-isMobileDevice[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe { + overflow: auto; + -webkit-overflow-scrolling: touch; + } +} +@media screen and (max-width: -1) and (min-width: 0) { + /* line 74, ../scss/components/modules/_content.scss */ + html[data-lc-type=image] #lightcase-content .lightcase-contentInner, html[data-lc-type=video] #lightcase-content .lightcase-contentInner { + line-height: 0.75; + } +} + +/* line 82, ../scss/components/modules/_content.scss */ +html[data-lc-type=image] #lightcase-content .lightcase-contentInner { + position: relative; + overflow: hidden !important; +} +@media screen and (max-width: -1) { + /* line 91, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=error] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { + position: relative !important; + top: auto !important; + left: auto !important; + width: auto !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + background: none !important; + } +} +@media screen and (min-width: 0) { + /* line 100, ../scss/components/modules/_content.scss */ + html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { + padding: 30px; + overflow: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + } +} +@media screen and (max-width: -1) { + /* line 117, ../scss/components/modules/_content.scss */ + #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { + color: #aaa; + } +} +@media screen and (min-width: 0) { + /* line 117, ../scss/components/modules/_content.scss */ + #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { + color: #333; + } +} + +/* line 3, ../scss/components/modules/_error.scss */ +#lightcase-case p.lightcase-error { + margin: 0; + font-size: 17px; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #aaa; +} +@media screen and (max-width: -1) { + /* line 3, ../scss/components/modules/_error.scss */ + #lightcase-case p.lightcase-error { + padding: 30px 0; + } +} +@media screen and (min-width: 0) { + /* line 3, ../scss/components/modules/_error.scss */ + #lightcase-case p.lightcase-error { + padding: 0; + } +} + +/* line 4, ../scss/components/modules/_global.scss */ +.lightcase-open body { + overflow: hidden; +} +/* line 8, ../scss/components/modules/_global.scss */ +.lightcase-isMobileDevice .lightcase-open body { + max-width: 100%; + max-height: 100%; +} + +/* line 1, ../scss/components/modules/_info.scss */ +#lightcase-info { + position: absolute; + padding-top: 15px; +} +/* line 9, ../scss/components/modules/_info.scss */ +#lightcase-info #lightcase-title, +#lightcase-info #lightcase-caption { + margin: 0; + padding: 0; + line-height: 1.5; + font-weight: normal; + text-overflow: ellipsis; +} +/* line 19, ../scss/components/modules/_info.scss */ +#lightcase-info #lightcase-title { + font-size: 17px; + color: #aaa; +} +@media screen and (max-width: -1) { + /* line 19, ../scss/components/modules/_info.scss */ + #lightcase-info #lightcase-title { + position: fixed; + top: 10px; + left: 0; + max-width: 87.5%; + padding: 5px 15px; + background: #333; + } +} +/* line 33, ../scss/components/modules/_info.scss */ +#lightcase-info #lightcase-caption { + clear: both; + font-size: 13px; + color: #aaa; +} +/* line 39, ../scss/components/modules/_info.scss */ +#lightcase-info #lightcase-sequenceInfo { + font-size: 11px; + color: #aaa; +} +@media screen and (max-width: -1) { + /* line 45, ../scss/components/modules/_info.scss */ + .lightcase-fullScreenMode #lightcase-info { + padding-left: 15px; + padding-right: 15px; + } + /* line 51, ../scss/components/modules/_info.scss */ + html:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info { + position: static; + } +} + +/* line 1, ../scss/components/modules/_loading.scss */ +#lightcase-loading { + position: fixed; + z-index: 9999; + width: 1.123em; + height: auto; + font-size: 38px; + line-height: 1; + text-align: center; + text-shadow: none; + position: fixed; + z-index: 2001; + top: 50%; + left: 50%; + margin-top: -0.5em; + margin-left: -0.5em; + opacity: 1; + font-size: 32px; + text-shadow: 0 0 15px #fff; + -moz-transform-origin: 50% 53%; + -webkit-animation: lightcase-spin 0.5s infinite linear; + -moz-animation: lightcase-spin 0.5s infinite linear; + -o-animation: lightcase-spin 0.5s infinite linear; + animation: lightcase-spin 0.5s infinite linear; +} +/* line 20, ../scss/components/mixins/_presets.scss */ +#lightcase-loading, #lightcase-loading:focus { + text-decoration: none; + color: #fff; + -webkit-tap-highlight-color: transparent; + -webkit-transition: color, opacity, ease-in-out 0.25s; + -moz-transition: color, opacity, ease-in-out 0.25s; + -o-transition: color, opacity, ease-in-out 0.25s; + transition: color, opacity, ease-in-out 0.25s; +} +/* line 32, ../scss/components/mixins/_presets.scss */ +#lightcase-loading > span { + display: inline-block; + text-indent: -9999px; +} + +/* line 2, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'] { + position: fixed; + z-index: 9999; + width: 1.123em; + height: auto; + font-size: 38px; + line-height: 1; + text-align: center; + text-shadow: none; + outline: none; + cursor: pointer; +} +/* line 20, ../scss/components/mixins/_presets.scss */ +a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus { + text-decoration: none; + color: rgba(255, 255, 255, 0.6); + -webkit-tap-highlight-color: transparent; + -webkit-transition: color, opacity, ease-in-out 0.25s; + -moz-transition: color, opacity, ease-in-out 0.25s; + -o-transition: color, opacity, ease-in-out 0.25s; + transition: color, opacity, ease-in-out 0.25s; +} +/* line 32, ../scss/components/mixins/_presets.scss */ +a[class*='lightcase-icon-'] > span { + display: inline-block; + text-indent: -9999px; +} +/* line 49, ../scss/components/mixins/_presets.scss */ +a[class*='lightcase-icon-']:hover { + color: white; + text-shadow: 0 0 15px white; +} +/* line 10, ../scss/components/modules/_navigation.scss */ +.lightcase-isMobileDevice a[class*='lightcase-icon-']:hover { + color: #aaa; + text-shadow: none; +} +/* line 17, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-close { + position: fixed; + top: 15px; + right: 15px; + bottom: auto; + margin: 0; + opacity: 0; + outline: none; +} +/* line 28, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-prev { + left: 15px; +} +/* line 33, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-next { + right: 15px; +} +/* line 38, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { + left: 50%; + margin-left: -0.5em; +} +@media screen and (min-width: 0) { + /* line 38, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { + opacity: 0; + } +} +@media screen and (max-width: -1) { + /* line 2, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-'] { + bottom: 15px; + font-size: 24px; + } +} +@media screen and (min-width: 0) { + /* line 2, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-'] { + bottom: 50%; + margin-bottom: -0.5em; + } + /* line 57, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ a[class*='lightcase-icon-'] { + opacity: 1; + } +} + +/* line 1, ../scss/components/modules/_overlay.scss */ +#lightcase-overlay { + display: none; + width: 100%; + min-height: 100%; + position: fixed; + z-index: 2000; + top: -9999px; + bottom: -9999px; + left: 0; + background: #333; +} +@media screen and (max-width: -1) { + /* line 1, ../scss/components/modules/_overlay.scss */ + #lightcase-overlay { + opacity: 1 !important; + } +} diff --git a/src/css/lightcase.css b/src/css/lightcase.css index cab8dcb..80f8126 100644 --- a/src/css/lightcase.css +++ b/src/css/lightcase.css @@ -5,7 +5,7 @@ * @author Cornel Boppart * @copyright Author * - * @version 2.3.6 (20/12/2016) + * @version 2.4.0 (08/04/2017) */ /** * Lightcase settings @@ -189,25 +189,25 @@ } @media screen and (max-width: 640px) { /* line 16, ../scss/components/modules/_case.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) { - position: relative !important; - top: auto !important; - left: auto !important; - width: auto !important; - height: auto !important; + html[data-lc-type=inline] #lightcase-case, html[data-lc-type=ajax] #lightcase-case { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; margin: 0 !important; - padding: 0 !important; - border: none !important; - background: none !important; + padding: 55px 0 70px 0; + width: 100% !important; + height: 100% !important; + overflow: auto !important; } } @media screen and (min-width: 641px) { /* line 4, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=error]) #lightcase-content { + html:not([data-lc-type=error]) #lightcase-content { position: relative; z-index: 1; - overflow: hidden; text-shadow: none; background-color: #fff; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); @@ -218,21 +218,21 @@ } } @media screen and (min-width: 641px) { - /* line 24, ../scss/components/modules/_content.scss */ - #lightcase-case[data-lc-type=image] #lightcase-content, #lightcase-case[data-lc-type=video] #lightcase-content { + /* line 23, ../scss/components/modules/_content.scss */ + html[data-lc-type=image] #lightcase-content, html[data-lc-type=video] #lightcase-content { background-color: #333; } } -/* line 32, ../scss/components/modules/_content.scss */ -#lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content { +/* line 31, ../scss/components/modules/_content.scss */ +html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } @media screen and (max-width: 640px) { - /* line 32, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content { + /* line 31, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { position: relative !important; top: auto !important; left: auto !important; @@ -244,46 +244,51 @@ background: none !important; } } -/* line 42, ../scss/components/modules/_content.scss */ -#lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner { +/* line 43, ../scss/components/modules/_content.scss */ +html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 640px) { - /* line 42, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner { + /* line 43, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { padding: 15px; } - /* line 51, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner, #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner > * { + /* line 52, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=error] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner > * { width: 100% !important; max-width: none !important; } - /* line 58, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner > *:not(iframe) { + /* line 59, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=error] #lightcase-content .lightcase-contentInner > *:not(iframe) { height: auto !important; max-height: none !important; } } @media screen and (max-width: 640px) { - /* line 69, ../scss/components/modules/_content.scss */ - .lightcase-isMobileDevice #lightcase-case[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe { + /* line 70, ../scss/components/modules/_content.scss */ + html.lightcase-isMobileDevice[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe { overflow: auto; -webkit-overflow-scrolling: touch; } } @media screen and (max-width: 640px) and (min-width: 641px) { - /* line 73, ../scss/components/modules/_content.scss */ - [data-lc-type=image] #lightcase-content .lightcase-contentInner, [data-lc-type=video] #lightcase-content .lightcase-contentInner { + /* line 74, ../scss/components/modules/_content.scss */ + html[data-lc-type=image] #lightcase-content .lightcase-contentInner, html[data-lc-type=video] #lightcase-content .lightcase-contentInner { line-height: 0.75; } } +/* line 82, ../scss/components/modules/_content.scss */ +html[data-lc-type=image] #lightcase-content .lightcase-contentInner { + position: relative; + overflow: hidden !important; +} @media screen and (max-width: 640px) { - /* line 85, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { + /* line 91, ../scss/components/modules/_content.scss */ + html[data-lc-type=inline] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=error] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { position: relative !important; top: auto !important; left: auto !important; @@ -296,8 +301,8 @@ } } @media screen and (min-width: 641px) { - /* line 92, ../scss/components/modules/_content.scss */ - #lightcase-case:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { + /* line 100, ../scss/components/modules/_content.scss */ + html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { padding: 30px; overflow: auto; -webkit-box-sizing: border-box; @@ -307,13 +312,13 @@ } } @media screen and (max-width: 640px) { - /* line 109, ../scss/components/modules/_content.scss */ + /* line 117, ../scss/components/modules/_content.scss */ #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { color: #aaa; } } @media screen and (min-width: 641px) { - /* line 109, ../scss/components/modules/_content.scss */ + /* line 117, ../scss/components/modules/_content.scss */ #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { color: #333; } @@ -342,25 +347,14 @@ } } -/* line 6, ../scss/components/modules/_global.scss */ +/* line 4, ../scss/components/modules/_global.scss */ +.lightcase-open body { + overflow: hidden; +} +/* line 8, ../scss/components/modules/_global.scss */ .lightcase-isMobileDevice .lightcase-open body { max-width: 100%; max-height: 100%; - overflow: hidden; -} -@media screen and (max-width: 640px) { - /* line 4, ../scss/components/modules/_global.scss */ - .lightcase-open body { - padding: 55px 0 70px 0; - } - /* line 15, ../scss/components/modules/_global.scss */ - .lightcase-open body > *:not([id*='lightcase-']) { - position: fixed !important; - top: -9999px !important; - width: 0 !important; - height: 0 !important; - overflow: hidden !important; - } } /* line 1, ../scss/components/modules/_info.scss */ @@ -411,7 +405,7 @@ padding-right: 15px; } /* line 51, ../scss/components/modules/_info.scss */ - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info { + html:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info { position: static; } } @@ -457,8 +451,8 @@ text-indent: -9999px; } -/* line 4, ../scss/components/modules/_navigation.scss */ -#lightcase-nav a[class*='lightcase-icon-'] { +/* line 2, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'] { position: fixed; z-index: 9999; width: 1.123em; @@ -471,7 +465,7 @@ cursor: pointer; } /* line 20, ../scss/components/mixins/_presets.scss */ -#lightcase-nav a[class*='lightcase-icon-'], #lightcase-nav a[class*='lightcase-icon-']:focus { +a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus { text-decoration: none; color: rgba(255, 255, 255, 0.6); -webkit-tap-highlight-color: transparent; @@ -481,41 +475,23 @@ transition: color, opacity, ease-in-out 0.25s; } /* line 32, ../scss/components/mixins/_presets.scss */ -#lightcase-nav a[class*='lightcase-icon-'] > span { +a[class*='lightcase-icon-'] > span { display: inline-block; text-indent: -9999px; } /* line 49, ../scss/components/mixins/_presets.scss */ -#lightcase-nav a[class*='lightcase-icon-']:hover { +a[class*='lightcase-icon-']:hover { color: white; text-shadow: 0 0 15px white; } -/* line 12, ../scss/components/modules/_navigation.scss */ -.lightcase-isMobileDevice #lightcase-nav a[class*='lightcase-icon-']:hover { +/* line 10, ../scss/components/modules/_navigation.scss */ +.lightcase-isMobileDevice a[class*='lightcase-icon-']:hover { color: #aaa; text-shadow: none; } -/* line 19, ../scss/components/modules/_navigation.scss */ -#lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-prev { - left: 15px; -} -/* line 24, ../scss/components/modules/_navigation.scss */ -#lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-next { - right: 15px; -} -/* line 29, ../scss/components/modules/_navigation.scss */ -#lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-pause, #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-play { - left: 50%; - margin-left: -0.5em; -} -@media screen and (min-width: 641px) { - /* line 29, ../scss/components/modules/_navigation.scss */ - #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-pause, #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-play { - opacity: 0; - } -} -/* line 40, ../scss/components/modules/_navigation.scss */ -#lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-close { +/* line 17, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-close { + position: fixed; top: 15px; right: 15px; bottom: auto; @@ -523,33 +499,40 @@ opacity: 0; outline: none; } -@media screen and (max-width: 640px) { - /* line 40, ../scss/components/modules/_navigation.scss */ - #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-close { - position: absolute; - } +/* line 28, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-prev { + left: 15px; +} +/* line 33, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-next { + right: 15px; +} +/* line 38, ../scss/components/modules/_navigation.scss */ +a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { + left: 50%; + margin-left: -0.5em; } @media screen and (min-width: 641px) { - /* line 40, ../scss/components/modules/_navigation.scss */ - #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-close { - position: fixed; + /* line 38, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { + opacity: 0; } } @media screen and (max-width: 640px) { - /* line 4, ../scss/components/modules/_navigation.scss */ - #lightcase-nav a[class*='lightcase-icon-'] { + /* line 2, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-'] { bottom: 15px; font-size: 24px; } } @media screen and (min-width: 641px) { - /* line 4, ../scss/components/modules/_navigation.scss */ - #lightcase-nav a[class*='lightcase-icon-'] { + /* line 2, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-'] { bottom: 50%; margin-bottom: -0.5em; } - /* line 66, ../scss/components/modules/_navigation.scss */ - #lightcase-nav a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ #lightcase-nav a[class*='lightcase-icon-'] { + /* line 57, ../scss/components/modules/_navigation.scss */ + a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ a[class*='lightcase-icon-'] { opacity: 1; } } diff --git a/src/js/lightcase.js b/src/js/lightcase.js index 3867d5b..bdde9f6 100644 --- a/src/js/lightcase.js +++ b/src/js/lightcase.js @@ -5,7 +5,7 @@ * @author Cornel Boppart * @copyright Author * - * @version 2.3.6 (20/12/2016) + * @version 2.4.0 (08/04/2017) */ ;(function ($) { @@ -65,6 +65,7 @@ fullScreenModeForMobile: true, mobileMatchExpression: /(iphone|ipod|ipad|android|blackberry|symbian)/, disableShrink: false, + fixedRatio: true, shrinkFactor: .75, overlayOpacity: .9, slideshow: false, @@ -136,16 +137,16 @@ 'navigator.pause': 'Pause' }, markup: function () { - $('body').append( + _self.objects.body.append( _self.objects.overlay = $('
'), _self.objects.loading = $('
'), _self.objects.case = $('') ); _self.objects.case.after( + _self.objects.close = $('' + _self.settings.labels['close'] + ''), _self.objects.nav = $('
') ); _self.objects.nav.append( - _self.objects.close = $('' + _self.settings.labels['close'] + ''), _self.objects.prev = $('' + _self.settings.labels['navigator.prev'] + '').hide(), _self.objects.next = $('' + _self.settings.labels['navigator.next'] + '').hide(), _self.objects.play = $('' + _self.settings.labels['navigator.play'] + '').hide(), @@ -167,6 +168,7 @@ onInit: {}, onStart: {}, onFinish: {}, + onResize: {}, onClose: {}, onCleanup: {} }, @@ -174,14 +176,14 @@ // Load options from data-lc-options attribute _self.origin.data ? _self.origin.data('lc-options') : {}); + _self.objects.document = $('html'); + _self.objects.body = $('body'); + // Call onInit hook functions _self._callHooks(_self.settings.onInit); _self.objectData = _self._setObjectData(this); - _self._cacheScrollPosition(); - _self._watchScrollInteraction(); - _self._addElements(); _self._open(); @@ -613,6 +615,7 @@ // Set default dimensions var dimensions = { + ratio: 1, objectWidth: $object.attr('width') ? $object.attr('width') : $object.attr(_self._prefixAttributeName('width')), objectHeight: $object.attr('height') ? $object.attr('height') : $object.attr(_self._prefixAttributeName('height')) }; @@ -622,7 +625,7 @@ dimensions.maxWidth = parseInt(_self.dimensions.windowWidth * _self.settings.shrinkFactor); dimensions.maxHeight = parseInt(_self.dimensions.windowHeight * _self.settings.shrinkFactor); - // If the auto calculated maxWidth/maxHeight greather than the userdefined one, use that. + // If the auto calculated maxWidth/maxHeight greather than the user-defined one, use that. if (dimensions.maxWidth > _self.settings.maxWidth) { dimensions.maxWidth = _self.settings.maxWidth; } @@ -638,19 +641,24 @@ case 'image': case 'flash': case 'video': - if (dimensions.differenceWidthAsPercent > 100 && dimensions.differenceWidthAsPercent > dimensions.differenceHeightAsPercent) { - dimensions.objectWidth = dimensions.maxWidth; - dimensions.objectHeight = parseInt(dimensions.objectHeight / dimensions.differenceWidthAsPercent * 100); - } - if (dimensions.differenceHeightAsPercent > 100 && dimensions.differenceHeightAsPercent > dimensions.differenceWidthAsPercent) { - dimensions.objectWidth = parseInt(dimensions.objectWidth / dimensions.differenceHeightAsPercent * 100); - dimensions.objectHeight = dimensions.maxHeight; - } - if (dimensions.differenceHeightAsPercent > 100 && dimensions.differenceWidthAsPercent < dimensions.differenceHeightAsPercent) { - dimensions.objectWidth = parseInt(dimensions.maxWidth / dimensions.differenceHeightAsPercent * dimensions.differenceWidthAsPercent); - dimensions.objectHeight = dimensions.maxHeight; + case 'iframe': + case 'ajax': + case 'inline': + if (_self.objectData.type === 'image' || _self.settings.fixedRatio === true) { + if (dimensions.differenceWidthAsPercent > 100 && dimensions.differenceWidthAsPercent > dimensions.differenceHeightAsPercent) { + dimensions.objectWidth = dimensions.maxWidth; + dimensions.objectHeight = parseInt(dimensions.objectHeight / dimensions.differenceWidthAsPercent * 100); + } + if (dimensions.differenceHeightAsPercent > 100 && dimensions.differenceHeightAsPercent > dimensions.differenceWidthAsPercent) { + dimensions.objectWidth = parseInt(dimensions.objectWidth / dimensions.differenceHeightAsPercent * 100); + dimensions.objectHeight = dimensions.maxHeight; + } + if (dimensions.differenceHeightAsPercent > 100 && dimensions.differenceWidthAsPercent < dimensions.differenceHeightAsPercent) { + dimensions.objectWidth = parseInt(dimensions.maxWidth / dimensions.differenceHeightAsPercent * dimensions.differenceWidthAsPercent); + dimensions.objectHeight = dimensions.maxHeight; + } + break; } - break; case 'error': if (!isNaN(dimensions.objectWidth) && dimensions.objectWidth > dimensions.maxWidth) { dimensions.objectWidth = dimensions.maxWidth; @@ -844,7 +852,7 @@ */ _showContent: function ($object) { // Add data attribute with the object type - _self.objects.case.attr(_self._prefixAttributeName('type'), _self.objectData.type); + _self.objects.document.attr(_self._prefixAttributeName('type'), _self.objectData.type); _self.cache.object = $object; _self._calculateDimensions($object); @@ -886,6 +894,11 @@ _self.cache.firstOpened = _self.objectData.this; } + // Fade in the info with delay + _self.objects.info.hide(); + setTimeout(function () { + _self.transition.fade(_self.objects.info, 'in', _self.settings.speedIn); + }, _self.settings.speedIn); }, /** @@ -896,6 +909,9 @@ _processContent: function () { _self.isBusy = true; + // Fade out the info at first + _self.transition.fade(_self.objects.info, 'out', 0); + switch (_self.settings.transitionOut) { case 'scrollTop': case 'scrollRight': @@ -1227,7 +1243,7 @@ * @return {string|boolean} The transition prefix if supported, else false. */ isTransitionSupported: function () { - var body = $('body').get(0), + var body = _self.objects.body.get(0), isTransitionSupported = false, transitionMapping = { 'transition': '', @@ -1509,38 +1525,9 @@ _self.dimensions = _self.getViewportDimensions(); _self._calculateDimensions(_self.cache.object); - }, - /** - * Caches the actual scroll coordinates. - * - * @return {void} - */ - _cacheScrollPosition: function () { - var $window = $(window), - $document = $(document), - offset = { - 'top': $window.scrollTop(), - 'left': $window.scrollLeft() - }; - - _self.cache.scrollPosition = _self.cache.scrollPosition || {}; - - if (!_self._assertContentInvisible()) { - _self.cache.cacheScrollPositionSkipped = true; - } - else if (_self.cache.cacheScrollPositionSkipped) { - delete _self.cache.cacheScrollPositionSkipped; - _self._restoreScrollPosition(); - } - else { - if ($document.width() > $window.width()) { - _self.cache.scrollPosition.left = offset.left; - } - if ($document.height() > $window.height()) { - _self.cache.scrollPosition.top = offset.top; - } - } + // Call onResize hook functions + _self._callHooks(_self.settings.onResize); }, /** @@ -1561,48 +1548,6 @@ $(window).off('resize', _self.resize); }, - /** - * Watches for any scroll interaction and caches the new position. - * - * @return {void} - */ - _watchScrollInteraction: function () { - $(window).scroll(_self._cacheScrollPosition); - $(window).resize(_self._cacheScrollPosition); - }, - - /** - * Stop watching any scroll interaction related to _self. - * - * @return {void} - */ - _unwatchScrollInteraction: function () { - $(window).off('scroll', _self._cacheScrollPosition); - $(window).off('resize', _self._cacheScrollPosition); - }, - - /** - * Ensures that site content is invisible or has not height. - * - * @return {boolean} - */ - _assertContentInvisible: function () { - return $($('body').children().not('[id*=' + _self.settings.idPrefix + ']').get(0)).height() > 0; - }, - - /** - * Restores to the original scoll position before - * lightcase got initialized. - * - * @return {void} - */ - _restoreScrollPosition: function () { - $(window) - .scrollTop(parseInt(_self.cache.scrollPosition.top)) - .scrollLeft(parseInt(_self.cache.scrollPosition.left)) - .resize(); - }, - /** * Switches to the fullscreen mode * @@ -1672,7 +1617,7 @@ break; } - $('html').addClass(_self.settings.classPrefix + 'open'); + _self.objects.document.addClass(_self.settings.classPrefix + 'open'); _self.objects.case.attr('aria-hidden', 'false'); }, @@ -1695,18 +1640,19 @@ _self._unbindEvents(); _self._unwatchResizeInteraction(); - _self._unwatchScrollInteraction(); $('html').removeClass(_self.settings.classPrefix + 'open'); _self.objects.case.attr('aria-hidden', 'true'); _self.objects.nav.children().hide(); - - _self._restoreScrollPosition(); + _self.objects.close.hide(); // Call onClose hook functions _self._callHooks(_self.settings.onClose); + // Fade out the info at first + _self.transition.fade(_self.objects.info, 'out', 0); + switch (_self.settings.transitionClose || _self.settings.transitionOut) { case 'fade': case 'fadeInline': @@ -1797,7 +1743,7 @@ _self.objects.play.hide(); _self.objects.pause.hide(); - _self.objects.case.removeAttr(_self._prefixAttributeName('type')); + _self.objects.document.removeAttr(_self._prefixAttributeName('type')); _self.objects.nav.removeAttr(_self._prefixAttributeName('ispartofsequence')); _self.objects.contentInner.empty().hide(); diff --git a/src/scss/components/modules/_case.scss b/src/scss/components/modules/_case.scss index db78314..948486d 100644 --- a/src/scss/components/modules/_case.scss +++ b/src/scss/components/modules/_case.scss @@ -12,10 +12,20 @@ text-align: left; text-shadow: #{map-get($lightcase-settings, 'text-shadow')}; - // Not type: image, video, flash or error - &:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) { + // Only for type: inline, ajax + html[data-lc-type=inline] &, + html[data-lc-type=ajax] & { @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { - @include clear(true); + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + margin: 0 !important; + padding: 55px 0 70px 0; + width: 100% !important; + height: 100% !important; + overflow: auto !important; } } -} \ No newline at end of file +} diff --git a/src/scss/components/modules/_content.scss b/src/scss/components/modules/_content.scss index 8c8517f..9ea262b 100644 --- a/src/scss/components/modules/_content.scss +++ b/src/scss/components/modules/_content.scss @@ -1,11 +1,10 @@ #lightcase-content { // Not type: error - #lightcase-case:not([data-lc-type=error]) & { + html:not([data-lc-type=error]) & { @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { position: relative; z-index: 1; - overflow: hidden; text-shadow: none; @@ -21,15 +20,17 @@ } // Type: image + video - #lightcase-case[data-lc-type=image] &, - #lightcase-case[data-lc-type=video] & { + html[data-lc-type=image] &, + html[data-lc-type=video] & { @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { background-color: #{map-get($lightcase-settings, 'case-background-media')}; } } - // Not type: image, video, flash or error - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) & { + // Only for type: inline, ajax, error + html[data-lc-type=inline] &, + html[data-lc-type=ajax] &, + html[data-lc-type=error] & { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; @@ -66,30 +67,37 @@ .lightcase-contentInner { @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { // For mobile (touch) devices - .lightcase-isMobileDevice #lightcase-case[data-lc-type=iframe] & iframe { + html.lightcase-isMobileDevice[data-lc-type=iframe] & iframe { @include overflow(); } // Type: image + video - [data-lc-type=image] &, - [data-lc-type=video] & { + html[data-lc-type=image] &, + html[data-lc-type=video] & { @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { line-height: 0.75; } } } + html[data-lc-type=image] & { + position: relative; + overflow: hidden !important; + } + // Note: This is a very special wrap only added for few // types of content, type 'inline' and 'ajax'. .lightcase-inlineWrap { - // Not type: image, video, flash or error - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) & { + // Only for type: inline, ajax error + html[data-lc-type=inline] &, + html[data-lc-type=ajax] &, + html[data-lc-type=error] & { @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { @include clear(true); } } // Not type: error - #lightcase-case:not([data-lc-type=error]) & { + html:not([data-lc-type=error]) & { @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { padding: 30px; diff --git a/src/scss/components/modules/_global.scss b/src/scss/components/modules/_global.scss index 8cddc25..32c5dad 100644 --- a/src/scss/components/modules/_global.scss +++ b/src/scss/components/modules/_global.scss @@ -2,25 +2,12 @@ .lightcase-open { body { + overflow: hidden; + // For mobile (touch) devices .lightcase-isMobileDevice & { max-width: 100%; max-height: 100%; - overflow: hidden; - } - - @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { - padding: 55px 0 70px 0; - - & > *:not([id*='lightcase-']) { - position: fixed !important; - top: -9999px !important; - - width: 0 !important; - height: 0 !important; - - overflow: hidden !important; - } } } diff --git a/src/scss/components/modules/_info.scss b/src/scss/components/modules/_info.scss index 77f5749..72df653 100644 --- a/src/scss/components/modules/_info.scss +++ b/src/scss/components/modules/_info.scss @@ -48,7 +48,7 @@ } // Not type: image, video, flash or error - #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) & { + html:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) & { position: static; } } diff --git a/src/scss/components/modules/_navigation.scss b/src/scss/components/modules/_navigation.scss index 1d0ec9c..b199aef 100644 --- a/src/scss/components/modules/_navigation.scss +++ b/src/scss/components/modules/_navigation.scss @@ -1,73 +1,62 @@ -#lightcase-nav { - - // Generic styles for all navigation links - a[class*='lightcase-icon-'] { - @include icon-hover(#{map-get($lightcase-settings, 'icon-color')}, #{map-get($lightcase-settings, 'icon-color-hover')}); - - outline: none; - cursor: pointer; - - // Hover status for mobile (touch) devices - .lightcase-isMobileDevice & { - &:hover { - color: #aaa; - text-shadow: none; - } +// Generic styles for all navigation links +a[class*='lightcase-icon-'] { + @include icon-hover(#{map-get($lightcase-settings, 'icon-color')}, #{map-get($lightcase-settings, 'icon-color-hover')}); + + outline: none; + cursor: pointer; + + // Hover status for mobile (touch) devices + .lightcase-isMobileDevice & { + &:hover { + color: #aaa; + text-shadow: none; } + } - // Prev button - &.lightcase-icon-prev { - left: 15px; - } + // Close button + &.lightcase-icon-close { + position: fixed; + top: 15px; + right: 15px; + bottom: auto; + margin: 0; + opacity: 0; + outline: none; + } - // Next button - &.lightcase-icon-next { - right: 15px; - } + // Prev button + &.lightcase-icon-prev { + left: 15px; + } - // Play/Pause button - &.lightcase-icon-pause, - &.lightcase-icon-play { - left: 50%; - margin-left: -0.5em; + // Next button + &.lightcase-icon-next { + right: 15px; + } - @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { - opacity: 0; - } - } + // Play/Pause button + &.lightcase-icon-pause, + &.lightcase-icon-play { + left: 50%; + margin-left: -0.5em; - // Close button - &.lightcase-icon-close { - top: 15px; - right: 15px; - bottom: auto; - margin: 0; + @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { opacity: 0; - outline: none; - - @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { - position: absolute; - } - - @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { - position: fixed; - } } + } - @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { - bottom: 15px; - font-size: 24px; - } + @media screen and (max-width: #{map-get($lightcase-settings, 'breakpoint')-1}) { + bottom: 15px; + font-size: 24px; + } - @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { - bottom: 50%; - margin-bottom: -0.5em; + @media screen and (min-width: #{map-get($lightcase-settings, 'breakpoint')}) { + bottom: 50%; + margin-bottom: -0.5em; - &:hover, - #lightcase-case:hover ~ & { - opacity: 1; - } + &:hover, + #lightcase-case:hover ~ & { + opacity: 1; } } - } \ No newline at end of file diff --git a/src/scss/lightcase.scss b/src/scss/lightcase.scss index 18d8712..2d6fcbc 100644 --- a/src/scss/lightcase.scss +++ b/src/scss/lightcase.scss @@ -5,7 +5,7 @@ * @author Cornel Boppart * @copyright Author * - * @version 2.3.6 (20/12/2016) + * @version 2.4.0 (08/04/2017) */ // Import settings @@ -27,4 +27,4 @@ @import 'components/modules/info'; @import 'components/modules/loading'; @import 'components/modules/navigation'; -@import 'components/modules/overlay'; \ No newline at end of file +@import 'components/modules/overlay';