⬆️ upgrade baguetteBox.min.js to v1.13.0

sass/baguetteBox.scss

@@ -1,10 +1,9 @@
 /*!
  * baguetteBox.js
  * @author  feimosi
- * @version %%INJECT_VERSION%%
+ * @version 1.13.0
  * @url https://github.com/feimosi/baguetteBox.js
  */
-
 #baguetteBox-overlay {
   display: none;
   opacity: 0;
@@ -16,39 +15,37 @@
   height: 100%;
   z-index: 1000000;
   background-color: #222;
-    background-color: rgba(0,0,0,.8);
+  background-color: rgba(0, 0, 0, 0.8);
-    transition: opacity .5s ease;
+  -webkit-transition: opacity 0.5s ease;
-
+  transition: opacity 0.5s ease;
-    &.visible {
+}
+#baguetteBox-overlay.visible {
   opacity: 1;
 }
-
+#baguetteBox-overlay .full-image {
-    .full-image {
   display: inline-block;
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
-
-        figure {
-            display: inline;
-            margin: 0;      // needed for mobile
-            height: 100%;   // Opera 12 image stretching fix
 }
-
+#baguetteBox-overlay .full-image figure {
-        img {
+  display: inline;
-            // IE8 fix
+  margin: 0;
+  height: 100%;
+}
+#baguetteBox-overlay .full-image img {
   display: inline-block;
   width: auto;
   height: auto;
-
   max-height: 100%;
   max-width: 100%;
   vertical-align: middle;
-            box-shadow: 0 0 8px rgba(0,0,0,.6);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
-
+#baguetteBox-overlay .full-image figcaption {
-        figcaption {
   display: block;
   position: absolute;
   bottom: 0;
@@ -58,19 +55,16 @@
   white-space: normal;
   color: #ccc;
   background-color: #000;
-            background-color: rgba(0,0,0,.6);
+  background-color: rgba(0, 0, 0, 0.6);
   font-family: sans-serif;
 }
-
+#baguetteBox-overlay .full-image:before {
-        &:before {
   content: "";
   display: inline-block;
   height: 50%;
   width: 1px;
   margin-right: -1px;
 }
-    }
-}
 
 #baguetteBox-slider {
   position: absolute;
@@ -79,30 +73,66 @@
   height: 100%;
   width: 100%;
   white-space: nowrap;
-    transition: left .4s ease, transform .4s ease;
+  -webkit-transition: left 0.4s ease, -webkit-transform 0.4s ease;
-
+  transition: left 0.4s ease, -webkit-transform 0.4s ease;
-    &.bounce-from-right {
+  transition: left 0.4s ease, transform 0.4s ease;
-        animation: bounceFromRight .4s ease-out;
+  transition: left 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease;
+}
+#baguetteBox-slider.bounce-from-right {
+  -webkit-animation: bounceFromRight 0.4s ease-out;
+          animation: bounceFromRight 0.4s ease-out;
+}
+#baguetteBox-slider.bounce-from-left {
+  -webkit-animation: bounceFromLeft 0.4s ease-out;
+          animation: bounceFromLeft 0.4s ease-out;
 }
 
-    &.bounce-from-left {
+@-webkit-keyframes bounceFromRight {
-        animation: bounceFromLeft .4s ease-out;
+  0% {
+    margin-left: 0;
+  }
+  50% {
+    margin-left: -30px;
+  }
+  100% {
+    margin-left: 0;
   }
 }
 
 @keyframes bounceFromRight {
-    0% { margin-left: 0; }
+  0% {
-    50% { margin-left: -30px; }
+    margin-left: 0;
-    100% { margin-left: 0; }
+  }
+  50% {
+    margin-left: -30px;
+  }
+  100% {
+    margin-left: 0;
+  }
+}
+@-webkit-keyframes bounceFromLeft {
+  0% {
+    margin-left: 0;
+  }
+  50% {
+    margin-left: 30px;
+  }
+  100% {
+    margin-left: 0;
+  }
 }
-
 @keyframes bounceFromLeft {
-    0% { margin-left: 0; }
+  0% {
-    50% { margin-left: 30px; }
+    margin-left: 0;
-    100% { margin-left: 0; }
   }
-
+  50% {
-%arrow-button {
+    margin-left: 30px;
+  }
+  100% {
+    margin-left: 0;
+  }
+}
+.baguetteBox-button#previous-button, .baguetteBox-button#next-button {
   top: 50%;
   top: calc(50% - 30px);
   width: 44px;
@@ -116,49 +146,41 @@
   padding: 0;
   margin: 0;
   border: 0;
+  -moz-border-radius: 15%;
        border-radius: 15%;
   background-color: #323232;
-    background-color: rgba(50,50,50,.5);
+  background-color: rgba(50, 50, 50, 0.5);
   color: #ddd;
   font: 1.6em sans-serif;
-    transition: background-color .4s ease;
+  -webkit-transition: background-color 0.4s ease;
-
+  transition: background-color 0.4s ease;
-    &:focus,
-    &:hover {
-        background-color: rgba(50,50,50,.9);
 }
-
+.baguetteBox-button:focus, .baguetteBox-button:hover {
-    &#next-button {
+  background-color: rgba(50, 50, 50, 0.9);
-        @extend %arrow-button;
+}
+.baguetteBox-button#next-button {
   right: 2%;
 }
-
+.baguetteBox-button#previous-button {
-    &#previous-button {
-        @extend %arrow-button;
   left: 2%;
 }
-
+.baguetteBox-button#close-button {
-    &#close-button {
   top: 20px;
   right: 2%;
   right: calc(2% + 6px);
   width: 30px;
   height: 30px;
 }
-
+.baguetteBox-button svg {
-    // Firefox fix
-    svg {
   position: absolute;
   left: 0;
   top: 0;
 }
-}
 
 /*
     Preloader
     Borrowed from http://tobiasahlin.com/spinkit/
 */
-
 .baguetteBox-spinner {
   width: 40px;
   height: 40px;
@@ -174,23 +196,42 @@
 .baguetteBox-double-bounce2 {
   width: 100%;
   height: 100%;
+  -moz-border-radius: 50%;
        border-radius: 50%;
   background-color: #fff;
-    opacity: .6;
+  opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
+  -webkit-animation: bounce 2s infinite ease-in-out;
           animation: bounce 2s infinite ease-in-out;
 }
 
 .baguetteBox-double-bounce2 {
+  -webkit-animation-delay: -1s;
           animation-delay: -1s;
 }
 
+@-webkit-keyframes bounce {
+  0%, 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
 @keyframes bounce {
   0%, 100% {
+    -webkit-transform: scale(0);
+       -moz-transform: scale(0);
             transform: scale(0);
-    } 50% {
+  }
+  50% {
+    -webkit-transform: scale(1);
+       -moz-transform: scale(1);
             transform: scale(1);
   }
 }