Add comparison labels to Comparison Sliders

1 files changed, 18 insertions, 0 deletions

diff --git a/src/comparison-slider.less b/src/comparison-sliders.less
index 15c0ec3..1991816 100644
--- a/src/comparison-slider.less
+++ b/src/comparison-sliders.less
@@ -27,11 +27,16 @@
 
   .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%);
@@ -59,6 +64,10 @@
       width: .4rem;
       z-index: -@zindex-0;
     }
+
+    .comparison-label {
+      left: 1rem;
+    }
   }
 
   .comparison-resizer {
@@ -77,6 +86,15 @@
     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 {