From 5c5dac452bf345662383c2c17d5ab1cec68a8f52 Mon Sep 17 00:00:00 2001
From: Victor Häggqvist <victor@snilius.com>
Date: Mon, 9 Jun 2014 16:16:31 +0200
Subject: the stuff

---
 sass/imagelightbox.scss | 216 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 sass/imagelightbox.scss

(limited to 'sass/imagelightbox.scss')

diff --git a/sass/imagelightbox.scss b/sass/imagelightbox.scss
new file mode 100644
index 0000000..fac8a78
--- /dev/null
+++ b/sass/imagelightbox.scss
@@ -0,0 +1,216 @@
+@import 'compass/css3';
+
+@mixin touch-action($value) {
+  -ms-touch-action: $value;
+  touch-action: $value;
+}
+
+html {
+  // killing 300ms touch delay in IE
+  @include touch-action(manipulation);
+}
+
+#imagelightbox {
+  @include touch-action(none);
+  @include box-shadow(rgba(0, 0, 0, .75) 0 0 50px);
+  cursor: pointer;
+  position: fixed;
+  z-index: 10000;
+}
+
+// Loading Indication
+#imagelightbox-loading,
+#imagelightbox-loading div {
+  @include border-radius(50%);
+}
+
+#imagelightbox-loading {
+  $box-size: 20px;
+  @include box-shadow(rgba(0, 0, 0, .75) 0 0 $box-size*2); // 40
+
+  background: #444; // Fallback
+  background: rgba(0, 0, 0, .5);
+  height: $box-size;
+  left: 50%;
+  margin: -1.25em 0 0 -1.25em; // 20
+  padding: 10px;
+  position: fixed;
+  top: 50%;
+  width: $box-size;
+  z-index: 10003;
+
+  div {
+    -moz-animation: imagelightbox-loading .5s ease infinite;
+    -o-animation: imagelightbox-loading .5s ease infinite;
+    -webkit-animation: imagelightbox-loading .5s ease infinite;
+    animation: imagelightbox-loading .5s ease infinite;
+
+    background-color: #fff;
+    height: 20px;
+    width: 20px;
+  }
+}
+
+@-webkit-keyframes imagelightbox-loading {
+  from { opacity: .5; -webkit-transform: scale(.75); }
+  50%  { opacity: 1;  -webkit-transform: scale(1 ); }
+  to   { opacity: .5; -webkit-transform: scale(.75); }
+}
+
+@-moz-keyframes imagelightbox-loading {
+  from { opacity: .5; -moz-transform: scale(.75); }
+  50%  { opacity: 1;  -moz-transform: scale(1 ); }
+  to   { opacity: .5; -moz-transform: scale(.75); }
+}
+
+@-o-keyframes imagelightbox-loading {
+  from { opacity: .5; -o-transform: scale(.75); }
+  50%  { opacity: 1;  -o-transform: scale(1 ); }
+  to   { opacity: .5; -o-transform: scale(.75); }
+}
+
+@keyframes imagelightbox-loading {
+  from { opacity: .5; transform: scale(.75); }
+  50%  { opacity: 1;  transform: scale(1 ); }
+  to   { opacity: .5; transform: scale(.75); }
+}
+
+#imagelightbox-overlay {
+  background: #fff;
+  background: rgba(255, 255, 255, .9 );
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9998;
+}
+
+
+// Close button
+#imagelightbox-close {
+  $size: 40px;
+  -moz-border-radius: 50%;
+  -moz-transition: color .3s ease;
+  -ms-transition: color .3s ease;
+  -o-transition: color .3s ease;
+  -webkit-border-radius: 50%;
+  -webkit-transition: color .3s ease;
+
+  background-color: #666;
+  border-radius: 50%;
+  height: $size;
+  position: fixed;
+  right: $size;
+  text-align: left;
+  text-indent: -9999px;
+  top: $size;
+  transition: color .3s ease;
+  width: $size;
+  z-index: 10002;
+
+  &:hover {
+    background-color: #111;
+  }
+
+  &:before,
+  &:after {
+    background-color: #fff;
+    bottom: 20%;
+    content: '';
+    left: 50%;
+    margin-left: -1px;
+    position: absolute;
+    top: 20%;
+    width: 2px;
+  }
+
+  &:before {
+    @include rotate( 45deg );
+  }
+
+  &:after {
+    @include rotate( -45deg );
+  }
+}
+
+#imagelightbox-caption {
+  background-color: #666;
+  bottom: 0;
+  color: #fff;
+  left: 0;
+  padding: 10px;
+  position: fixed;
+  right: 0;
+  text-align: center;
+  z-index: 10001;
+}
+
+// The nav bubbles
+#imagelightbox-nav {
+  @include border-radius(20px);
+  @include translateX( -50% );
+
+  background-color: #444;
+  background-color: rgba(0, 0, 0, .5);
+  bottom: 60px; // 60
+  left: 50%;
+  padding: 5px 2px 1px;
+  position: fixed;
+  z-index: 10001;
+
+  a {
+    @include border-radius(50%);
+    border: 1px solid #fff;
+    display: inline-block;
+    height: 20px;
+    margin: 0 5px;
+    width: 20px;
+  }
+
+  a.active {
+    background-color: #fff;
+  }
+}
+
+#imagelightbox-loading,
+#imagelightbox-overlay,
+#imagelightbox-close,
+#imagelightbox-caption,
+#imagelightbox-nav {
+  -webkit-animation: fade-in .25s linear;
+  -moz-animation: fade-in .25s linear;
+  -o-animation: fade-in .25s linear;
+  animation: fade-in .25s linear;
+}
+
+@-webkit-keyframes fade-in {
+  from  { opacity: 0; }
+  to    { opacity: 1; }
+}
+
+@-moz-keyframes fade-in {
+  from  { opacity: 0; }
+  to    { opacity: 1; }
+}
+
+@-o-keyframes fade-in {
+  from  { opacity: 0; }
+  to    { opacity: 1; }
+}
+
+@keyframes fade-in {
+  from  { opacity: 0; }
+  to    { opacity: 1; }
+}
+
+@media only screen and (max-width: 660px) {
+  #imagelightbox-close {
+    right: 20px;
+    top: 20px;
+  }
+
+  #imagelightbox-nav {
+    bottom: 20px;
+  }
+}
-- 
cgit v1.2.3