summaryrefslogtreecommitdiff
path: root/assets/compare.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/compare.css')
-rw-r--r--assets/compare.css165
1 files changed, 165 insertions, 0 deletions
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;
+}
+