From 32df66afceaeb8f558096c5676fd626cfe7358fd Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 29 Jan 2020 11:14:30 +0530 Subject: Publish deploy 2020-01-29 11:14 --- assets/compare.css | 165 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 assets/compare.css (limited to 'assets/compare.css') diff --git a/assets/compare.css b/assets/compare.css new file mode 100644 index 0000000..fcc509b --- /dev/null +++ b/assets/compare.css @@ -0,0 +1,165 @@ +/* -------------------------------- + +Primary style + +-------------------------------- */ +*, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + + + +img { + max-width: 100%; +} + +/* -------------------------------- + +Main components + +-------------------------------- */ + +.cd-image-container { + position: relative; + width: 90%; + max-width: 768px; + margin: 2em auto; +} +.cd-image-container img { + display: block; +} +@media only screen and (min-width: 768px) { + .cd-image-container { + margin: 4em auto; + } +} + +.cd-image-label { + position: absolute; + bottom: 0; + right: 0; + color: #ffffff; + padding: 1em; + opacity: 0; + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -ms-transform: translateY(20px); + -o-transform: translateY(20px); + transform: translateY(20px); + -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; + -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; + transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; +} +.cd-image-label.is-hidden { + visibility: hidden; +} +.is-visible .cd-image-label { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.cd-resize-img { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + overflow: hidden; + background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/img-modified.jpg") no-repeat left top; + background-size: auto 100%; + /* Force Hardware Acceleration in WebKit */ + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.cd-resize-img .cd-image-label { + right: auto; + left: 0; +} +.is-visible .cd-resize-img { + width: 50%; + /* bounce in animation of the modified image */ + -webkit-animation: cd-bounce-in 0.7s; + -moz-animation: cd-bounce-in 0.7s; + animation: cd-bounce-in 0.7s; +} + +@-webkit-keyframes cd-bounce-in { + 0% { + width: 0; + } + 60% { + width: 55%; + } + 100% { + width: 50%; + } +} +@-moz-keyframes cd-bounce-in { + 0% { + width: 0; + } + 60% { + width: 55%; + } + 100% { + width: 50%; + } +} +@keyframes cd-bounce-in { + 0% { + width: 0; + } + 60% { + width: 55%; + } + 100% { + width: 50%; + } +} +.cd-handle { + position: absolute; + height: 44px; + width: 44px; + /* center the element */ + left: 50%; + top: 50%; + margin-left: -22px; + margin-top: -22px; + border-radius: 50%; + background: #dc717d url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-arrows.svg") no-repeat center center; + cursor: move; + box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); + opacity: 0; + -webkit-transform: translate3d(0, 0, 0) scale(0); + -moz-transform: translate3d(0, 0, 0) scale(0); + -ms-transform: translate3d(0, 0, 0) scale(0); + -o-transform: translate3d(0, 0, 0) scale(0); + transform: translate3d(0, 0, 0) scale(0); +} +.cd-handle.draggable { + /* change background color when element is active */ + background-color: #445b7c; +} +.is-visible .cd-handle { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0) scale(1); + -moz-transform: translate3d(0, 0, 0) scale(1); + -ms-transform: translate3d(0, 0, 0) scale(1); + -o-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); + -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; + -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; + transition: transform 0.3s 0.7s, opacity 0s 0.7s; +} + -- cgit v1.2.3