From bf2f9856946299a85fb15a84bca19040a8899773 Mon Sep 17 00:00:00 2001
From: root <root@j104664.servers.jiffybox.net>
Date: Thu, 15 Oct 2015 13:41:20 +0200
Subject: [PATCH] Bugfix z-index for spinner to low, added sass files

---
 demo/demo.scss              |  67 +++++++++++++
 dist/simplelightbox.css     |   2 +-
 dist/simplelightbox.min.css |   2 +-
 dist/simplelightbox.scss    | 183 ++++++++++++++++++++++++++++++++++++
 4 files changed, 252 insertions(+), 2 deletions(-)
 create mode 100644 demo/demo.scss
 create mode 100644 dist/simplelightbox.scss

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