diff options
Diffstat (limited to 'assets/compare.css')
-rw-r--r-- | assets/compare.css | 165 |
1 files changed, 0 insertions, 165 deletions
diff --git a/assets/compare.css b/assets/compare.css deleted file mode 100644 index fcc509b..0000000 --- a/assets/compare.css +++ /dev/null @@ -1,165 +0,0 @@ -/* -------------------------------- - -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; -} - |