Add Comparison Sliders

3 files changed, 104 insertions, 1 deletions

diff --git a/src/carousels.less b/src/carousels.less
index a682353..8b01e94 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -55,7 +55,7 @@
     &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
     &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-      animation: carousel-slidein .75s ease-in 1;
+      animation: carousel-slidein .75s ease-in-out 1;
       opacity: 1;
       z-index: @zindex-1;
     }
diff --git a/src/comparison-slider.less b/src/comparison-slider.less
new file mode 100644
index 0000000..15c0ec3
--- /dev/null
+++ b/src/comparison-slider.less
@@ -0,0 +1,98 @@
+// Image comparison slider
+// Credit: http://jsfiddle.net/os8bj2xq/
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: none;
+      object-position: left top;
+      position: absolute;
+      width: 100%;
+      z-index: -1;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+
+    &::before {
+      background: fade(@dark-color, 35%);
+      border-radius: @border-radius;
+      color: @light-color;
+      content: "";
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1rem;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -.6rem, 0 .6rem;
+      color: @light-color;
+      content: "";
+      height: .4rem;
+      position: absolute;
+      right: .5rem;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: .4rem;
+      z-index: -@zindex-0;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: 1.5rem;
+    left: 0;
+    margin: 0;
+    max-width: 100%;
+    min-width: 1rem;
+    opacity: 0;
+    outline: 0;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: 4rem;
+  }
+  50% {
+    width: 1rem;
+  }
+  75% {
+    width: 2rem;
+  }
+  100% {
+    width: 0;
+  }
+}
diff --git a/src/component-icons.less b/src/component-icons.less
index 7551d05..2c31972 100644
--- a/src/component-icons.less
+++ b/src/component-icons.less
@@ -6,3 +6,8 @@
     vertical-align: -10%;
   }
 }
+
+// 360 Viewer
+.viewer-360 {
+  
+}