Add comparison labels to Comparison Sliders

1 files changed, 18 insertions, 0 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 1a9af74..6de83c6 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -360,9 +360,13 @@
 .comparison-slider .comparison-before {
   width: 100%;
 }
+.comparison-slider .comparison-before .comparison-label {
+  right: 1rem;
+}
 .comparison-slider .comparison-after {
   max-width: 100%;
   min-width: 0;
+  z-index: 1;
 }
 .comparison-slider .comparison-after::before {
   background: rgba(69, 77, 93, .35);
@@ -391,6 +395,9 @@
   width: .4rem;
   z-index: -1;
 }
+.comparison-slider .comparison-after .comparison-label {
+  left: 1rem;
+}
 .comparison-slider .comparison-resizer {
   -webkit-animation: first-run 1.5s 1 ease-in-out;
   animation: first-run 1.5s 1 ease-in-out;
@@ -410,6 +417,17 @@
   transform: translateY(-50%) scaleY(30);
   width: 0;
 }
+.comparison-slider .comparison-label {
+  background: rgba(69, 77, 93, .5);
+  bottom: 1rem;
+  color: #fff;
+  padding: .3rem .8rem;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 @-webkit-keyframes first-run {
   0% {
     width: 0;