diff --git a/demo/demo.scss b/demo/demo.scss new file mode 100644 index 0000000..48835e0 --- /dev/null +++ b/demo/demo.scss @@ -0,0 +1,67 @@ +html, body { + font-family: 'Slabo 27px', serif; + padding: 0; + margin: 0; + background: #ffffff; +} + +* { + box-sizing: border-box; +} + +a { + color: #4ab19a; +} + +.clear { + clear: both; + float: none; + width: 100%; +} + +.container { + max-width: 1170px; + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + + .gallery { + a { + img { + float: left; + width: 20%; + height: auto; + border: 2px solid #fff; + -webkit-transition: -webkit-transform .15s ease; + -moz-transition: -moz-transform .15s ease; + -o-transition: -o-transform .15s ease; + -ms-transition: -ms-transform .15s ease; + transition: transform .15s ease; + position:relative; + } + + &:hover { + img { + -webkit-transform: scale(1.05); + -moz-transform: scale(1.05); + -o-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + z-index: 5; + } + } + + &.big { + img { + width: 40%; + } + } + } + } +} + +.align-center { + text-align: center; +} diff --git a/dist/simplelightbox.css b/dist/simplelightbox.css index 1886b18..18aad89 100644 --- a/dist/simplelightbox.css +++ b/dist/simplelightbox.css @@ -115,7 +115,7 @@ position: fixed; top: 50%; width: 40px; - z-index: 1000; + z-index: 1007; -webkit-animation: pulsate 1s ease-out infinite; -moz-animation: pulsate 1s ease-out infinite; -ms-animation: pulsate 1s ease-out infinite; diff --git a/dist/simplelightbox.min.css b/dist/simplelightbox.min.css index cdd9636..a51e380 100644 --- a/dist/simplelightbox.min.css +++ b/dist/simplelightbox.min.css @@ -1 +1 @@ -.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1006}.sl-wrapper{z-index:1000}.sl-wrapper button{border:0;background:0 0;font-size:24px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:1015}.sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:1015}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-10px;height:30px;width:30px;line-height:30px;text-algin:center;display:block;z-index:1015}.sl-wrapper .sl-navigation button.sl-next{right:40px}.sl-wrapper .sl-navigation button.sl-prev{left:40px}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:#000;opacity:.8;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#fff;z-index:1005}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1000;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}} \ No newline at end of file +.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1006}.sl-wrapper{z-index:1000}.sl-wrapper button{border:0;background:0 0;font-size:24px;padding:0;cursor:pointer}.sl-wrapper button:hover{opacity:.7}.sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:1015}.sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:1015}.sl-wrapper .sl-navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-10px;height:30px;width:30px;line-height:30px;text-algin:center;display:block;z-index:1015}.sl-wrapper .sl-navigation button.sl-next{right:40px}.sl-wrapper .sl-navigation button.sl-prev{left:40px}.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image img{margin:0;padding:0;display:block}.sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:#000;opacity:.8;position:absolute;bottom:0;left:0;right:0}.sl-wrapper .sl-image .sl-download{display:none;position:absolute;bottom:5px;right:5px;color:#fff;z-index:1005}.sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite}@-webkit-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}} \ No newline at end of file diff --git a/dist/simplelightbox.scss b/dist/simplelightbox.scss new file mode 100644 index 0000000..36d65dd --- /dev/null +++ b/dist/simplelightbox.scss @@ -0,0 +1,183 @@ +.sl-overlay { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: #fff; + opacity: 0.7; + display: none; + z-index: 1006; +} +.sl-wrapper { + z-index: 1000; + button { + border: 0 none; + background: transparent; + font-size: 24px; + padding: 0; + cursor: pointer; + &:hover { + opacity: 0.7; + } + } + + .sl-close { + display: none; + position: fixed; + right: 30px; + top: 30px; + z-index: 1015; + } + + .sl-counter { + display: none; + position: fixed; + top: 30px; + left: 30px; + z-index: 1015; + } + + .sl-navigation { + width: 100%; + display: none; + button { + position: fixed; + top: 50%; + margin-top: - 10px; + height: 30px; + width: 30px; + line-height: 30px; + text-algin: center; + display: block; + z-index: 1015; + &.sl-next { + right: 40px; + } + + &.sl-prev { + left: 40px; + } + } + } + + .sl-image { + position: fixed; + -ms-touch-action: none; + touch-action: none; + z-index: 10000; + img { + margin: 0; + padding: 0; + display: block; + } + .sl-caption { + display: none; + padding: 10px; + color: #fff; + background: #000; + opacity: 0.8; + position: absolute; + bottom: 0; + left: 0; + right: 0; + } + + .sl-download { + display: none; + position: absolute; + bottom: 5px; + right: 5px; + color: #fff; + z-index: 1005; + } + } +} + +.sl-spinner { + display: none; + border: 5px solid #333; + border-radius: 40px; + height: 40px; + left: 50%; + margin: -20px 0 0 -20px; + opacity: 0; + position: fixed; + top: 50%; + width: 40px; + z-index: 1007; + -webkit-animation: pulsate 1s ease-out infinite; + -moz-animation: pulsate 1s ease-out infinite; + -ms-animation: pulsate 1s ease-out infinite; + -o-animation: pulsate 1s ease-out infinite; + animation: pulsate 1s ease-out infinite; +} + +@-webkit-keyframes pulsate{ + 0% { + transform: scale(.1); + opacity: 0.0; + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1.2); + opacity: 0; + } +} +@keyframes pulsate { + 0% { + transform: scale(.1); + opacity: 0.0; + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1.2); + opacity: 0; + } +} + +@-moz-keyframes pulsate{ + 0% { + transform: scale(.1); + opacity: 0.0; + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1.2); + opacity: 0; + } +} + +@-o-keyframes pulsate{ + 0% { + transform: scale(.1); + opacity: 0.0; + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1.2); + opacity: 0; + } +} + +@-ms-keyframes pulsate{ + 0% { + transform: scale(.1); + opacity: 0.0; + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1.2); + opacity: 0; + } +} \ No newline at end of file