Summary Files Commits Branches @commit @diff @stats
path: root / src / comparison-sliders.less
diff options
context:
space:
mode:
1 files changed, 17 insertions, 18 deletions
-rw-r--r--src/comparison-sliders.less35
diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
index 84a7a31..169caf4 100644
--- a/src/comparison-sliders.less
+++ b/src/comparison-sliders.less
@@ -18,25 +18,25 @@
img {
height: 100%;
object-fit: none;
- object-position: left top;
+ object-position: left center;
position: absolute;
width: 100%;
- z-index: -1;
}
}
.comparison-before {
width: 100%;
+ z-index: 1;
.comparison-label {
- right: 1.6rem;
+ right: @unit-4;
}
}
.comparison-after {
max-width: 100%;
min-width: 0;
- z-index: @zindex-0;
+ z-index: 2;
&::before {
background: transparent;
@@ -45,7 +45,7 @@
height: 100%;
left: 0;
position: absolute;
- right: 1.6rem;
+ right: @unit-4;
top: 0;
z-index: @zindex-0;
}
@@ -53,30 +53,29 @@
&::after {
background: currentColor;
border-radius: 50%;
- box-shadow: 0 -.5rem, 0 .5rem;
+ box-shadow: 0 -5px, 0 5px;
color: @light-color;
content: "";
- height: .3rem;
+ height: 3px;
position: absolute;
- right: .8rem;
+ right: @unit-2;
top: 50%;
transform: translate(50%, -50%);
- width: .3rem;
- z-index: -@zindex-0;
+ width: 3px;
}
.comparison-label {
- left: 1.6rem;
+ left: @unit-4;
}
}
.comparison-resizer {
animation: first-run 1.5s 1 ease-in-out;
cursor: ew-resize;
- height: 1.5rem;
+ height: @unit-4;
left: 0;
max-width: 100%;
- min-width: 1.6rem;
+ min-width: @unit-4;
opacity: 0;
outline: none;
position: relative;
@@ -88,9 +87,9 @@
.comparison-label {
background: fade(@dark-color, 50%);
- bottom: 1.6rem;
+ bottom: @unit-4;
color: @light-color;
- padding: .3rem .8rem;
+ padding: @unit-1 @unit-2;
position: absolute;
user-select: none;
}
@@ -101,13 +100,13 @@
width: 0;
}
25% {
- width: 4.8rem;
+ width: @unit-12;
}
50% {
- width: 1.6rem;
+ width: @unit-4;
}
75% {
- width: 2.4rem;
+ width: @unit-6;
}
100% {
width: 0;