From 1c0fd0bd85ba36bd454f641e32caf6b19ad2d069 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 1 Apr 2017 16:56:48 +0800
Subject: Add comparison labels to Comparison Sliders

---
 src/comparison-slider.less  |  98 -------------------------------------
 src/comparison-sliders.less | 116 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+), 98 deletions(-)
 delete mode 100644 src/comparison-slider.less
 create mode 100644 src/comparison-sliders.less

(limited to 'src')

diff --git a/src/comparison-slider.less b/src/comparison-slider.less
deleted file mode 100644
index 15c0ec3..0000000
--- a/src/comparison-slider.less
+++ /dev/null
@@ -1,98 +0,0 @@
-// 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/comparison-sliders.less b/src/comparison-sliders.less
new file mode 100644
index 0000000..1991816
--- /dev/null
+++ b/src/comparison-sliders.less
@@ -0,0 +1,116 @@
+// 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-label {
+      right: 1rem;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: @zindex-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-label {
+      left: 1rem;
+    }
+  }
+
+  .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;
+  }
+
+  .comparison-label {
+    background: fade(@dark-color,50%);
+    bottom: 1rem;
+    color: @light-color;
+    padding: .3rem .8rem;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: 4rem;
+  }
+  50% {
+    width: 1rem;
+  }
+  75% {
+    width: 2rem;
+  }
+  100% {
+    width: 0;
+  }
+}
-- 
cgit v1.3.1-23-gd82d