create plugin architecture

3 files changed, 121 insertions, 0 deletions

diff --git a/style/plugins/activity-indicator.scss b/style/plugins/activity-indicator.scss
new file mode 100644
index 0000000..d5df8c0
--- /dev/null
+++ b/style/plugins/activity-indicator.scss
@@ -0,0 +1,50 @@
+$loadingbox-size: 20px;
+
+#imagelightbox-loading,
+#imagelightbox-loading div {
+    border-radius: 50%;
+}
+
+#imagelightbox-loading {
+    box-shadow: rgba(0, 0, 0, .75) 0 0 $loadingbox-size*2;
+
+    background: #444; // Fallback
+    background: rgba(0, 0, 0, .5);
+    height: $loadingbox-size;
+    left: 50%;
+    margin: -20px 0 0 -20px;
+    padding: 10px;
+    position: fixed;
+    top: 50%;
+    width: $loadingbox-size;
+    z-index: 10003;
+    animation: fade-in .25s linear;
+
+    div {
+        animation: imagelightbox-loading .5s ease infinite;
+
+        background-color: #fff;
+        height: 20px;
+        width: 20px;
+    }
+}
+
+@keyframes imagelightbox-loading {
+    0% {
+        opacity: .5;
+        transform: scale(.75);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: .5;
+        transform: scale(.75);
+    }
+}
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
diff --git a/style/plugins/closebutton.scss b/style/plugins/closebutton.scss
new file mode 100644
index 0000000..68b813b
--- /dev/null
+++ b/style/plugins/closebutton.scss
@@ -0,0 +1,54 @@
+$closebutton-size: 40px;
+
+#imagelightbox-close {
+    border-radius: 50%;
+
+    background-color: #666;
+    height: $closebutton-size;
+    position: fixed;
+    right: $closebutton-size;
+    text-align: left;
+    text-indent: -9999px;
+    top: $closebutton-size;
+    transition: color .3s ease;
+    width: $closebutton-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 {
+        rotate: 45deg;
+    }
+
+    &:after {
+        rotate: -45deg;
+    }
+
+    animation: fade-in .25s linear;
+}
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@media only screen and (max-width: 660px) {
+    #imagelightbox-close {
+        right: 20px;
+        top: 20px;
+    }
+}
diff --git a/style/plugins/overlay.scss b/style/plugins/overlay.scss
new file mode 100644
index 0000000..edbc05a
--- /dev/null
+++ b/style/plugins/overlay.scss
@@ -0,0 +1,17 @@
+
+#imagelightbox-overlay {
+    background: #fff;
+    background: rgba(255, 255, 255, .9);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 9998;
+    animation: fade-in .25s linear;
+}
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}