diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
commit | e78b3c34348f26d40a813612c5a3786f1c56607a (patch) | |
tree | f857491026c5f728fe95fe1564ec30c931a1b30a /src/_comparison-sliders.scss | |
parent | 66c492fd05c2d720c81e2be8d6845560b868e7ff (diff) |
Initial SASS build
Diffstat (limited to 'src/_comparison-sliders.scss')
-rw-r--r-- | src/_comparison-sliders.scss | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/src/_comparison-sliders.scss b/src/_comparison-sliders.scss new file mode 100644 index 0000000..153bb0a --- /dev/null +++ b/src/_comparison-sliders.scss @@ -0,0 +1,114 @@ +// Image comparison slider +// Credit: http://codepen.io/solipsistacp/pen/Gpmaq +.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 center; + position: absolute; + width: 100%; + } + } + + .comparison-before { + width: 100%; + z-index: 1; + + .comparison-label { + right: $unit-4; + } + } + + .comparison-after { + max-width: 100%; + min-width: 0; + z-index: 2; + + &::before { + background: transparent; + content: ""; + cursor: default; + height: 100%; + left: 0; + position: absolute; + right: $unit-4; + top: 0; + z-index: $zindex-0; + } + + &::after { + background: currentColor; + border-radius: 50%; + box-shadow: 0 -5px, 0 5px; + color: $light-color; + content: ""; + height: 3px; + position: absolute; + right: $unit-2; + top: 50%; + transform: translate(50%, -50%); + width: 3px; + } + + .comparison-label { + left: $unit-4; + } + } + + .comparison-resizer { + animation: first-run 1.5s 1 ease-in-out; + cursor: ew-resize; + height: $unit-4; + left: 0; + max-width: 100%; + min-width: $unit-4; + opacity: 0; + outline: none; + position: relative; + resize: horizontal; + top: 50%; + transform: translateY(-50%) scaleY(30); + width: 0; + } + + .comparison-label { + background: fade($dark-color, 50%); + bottom: $unit-4; + color: $light-color; + padding: $unit-1 $unit-2; + position: absolute; + user-select: none; + } +} + +@keyframes first-run { + 0% { + width: 0; + } + 25% { + width: $unit-12; + } + 50% { + width: $unit-4; + } + 75% { + width: $unit-6; + } + 100% { + width: 0; + } +} |