Initial commit

client/scss/plugins/_lightbox.scss

@@ -0,0 +1,244 @@
+/* Lightbox v2.10.0 Copyright 2007, 2018 Lokesh Dhakar Released under the MIT license */
+
+.lb-loader, .lightbox {
+  position: fixed;
+  text-align: center;
+  line-height: 0;
+  left: 0;
+}
+
+.lb-dataContainer:after, .lb-outerContainer:after {
+  content: "";
+  clear: both;
+}
+
+html.lb-disable-scrolling {
+  overflow: hidden;
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+}
+
+.lightboxOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0 !important;
+  left: 0;
+  z-index: 9999;
+  height: 100% !important;
+  width: 100% !important;
+  background-color: #000;
+  filter: alpha(Opacity = 80);
+  opacity: 1;
+  display: none;
+  overflow: hidden;
+}
+
+.lightbox {
+  right: 0;
+  bottom: 0;
+  top: 50% !important;
+  transform: translateY(-50%);
+  width: 100%;
+  z-index: 10000;
+  font-weight: 400;
+
+  .lb-image {
+    display: block;
+    height: auto;
+    max-width: inherit;
+    max-height: none;
+    border-radius: 3px;
+  }
+
+  a img {
+    border: none;
+  }
+}
+
+.lb-outerContainer {
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0);
+
+  &:after {
+    display: table;
+  }
+}
+
+.lb-loader {
+  top: 50%;
+  height: 25%;
+  width: 100%;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url(../images/loading.gif) no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: 0;
+  background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
+}
+
+.lb-next, .lb-prev {
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+
+.lb-nav a {
+  &.lb-prev {
+    width: 34%;
+    left: 0;
+    float: left;
+    background: url(../images/prev.png) left 48% no-repeat;
+    filter: alpha(Opacity = 0);
+    opacity: 0;
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    transition: opacity .6s;
+
+    &:hover {
+      filter: alpha(Opacity = 100);
+      opacity: 1;
+    }
+  }
+
+  &.lb-next {
+    width: 64%;
+    right: 0;
+    float: right;
+    background: url(../images/next.png) right 48% no-repeat;
+    filter: alpha(Opacity = 0);
+    opacity: 0;
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    transition: opacity .6s;
+
+    &:hover {
+      filter: alpha(Opacity = 100);
+      opacity: 1;
+    }
+  }
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+
+  &:after {
+    display: table;
+  }
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #ccc;
+
+  .lb-details {
+    width: 85%;
+    float: left;
+    text-align: left;
+    line-height: 1.1em;
+  }
+
+  .lb-caption a {
+    color: #4ae;
+  }
+
+  .lb-number {
+    display: block;
+    clear: left;
+    padding-bottom: 1em;
+    font-size: 12px;
+    color: #999;
+  }
+
+  .lb-close {
+    display: block;
+    float: right;
+    width: 30px;
+    height: 30px;
+    background: url(../images/close.png) top right no-repeat;
+    text-align: right;
+    outline: 0;
+    filter: alpha(Opacity = 70);
+    opacity: .7;
+    -webkit-transition: opacity .2s;
+    -moz-transition: opacity .2s;
+    -o-transition: opacity .2s;
+    transition: opacity .2s;
+  }
+}
+
+.lb-dataContainer, .lb-details {
+  width: 100% !important;
+  position: fixed;
+}
+
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: alpha(Opacity = 100);
+  opacity: 1;
+}
+
+.lb-outerContainer {
+  position: fixed !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) !important;
+}
+
+.lb-dataContainer {
+  bottom: -50%;
+  left: 0;
+  right: 0;
+}
+
+.lb-closeContainer {
+  position: fixed;
+  left: 50%;
+  bottom: -50%;
+  padding-bottom: 70px;
+  transform: scale(0.8, 0.8);
+  margin-left: -15px;
+}
+
+.lb-details {
+  padding-top: 30px;
+  top: -50%;
+  left: 0;
+  right: 0;
+  text-align: center !important;
+}
+
+.lb-data .lb-caption {
+  font-weight: 700;
+  line-height: 1em;
+  font-size: 16px;
+  padding-bottom: 5px;
+}