aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ImageBox.scss
diff options
context:
space:
mode:
authorkimdahey <claire_kim1@brown.edu>2019-12-03 16:32:13 -0500
committerkimdahey <claire_kim1@brown.edu>2019-12-03 16:32:13 -0500
commit70583fa47bd9920d1823d381708c81283534d6ce (patch)
tree5c81976813436852403ea352797efe1d518dbb1a /src/client/views/nodes/ImageBox.scss
parent56b83d89f37a5523ab319977e3385f539ecaf996 (diff)
parent213962406327cc2f7267064f3016fabf0fd16872 (diff)
merged w master
Diffstat (limited to 'src/client/views/nodes/ImageBox.scss')
-rw-r--r--src/client/views/nodes/ImageBox.scss63
1 files changed, 33 insertions, 30 deletions
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index ba4ef8879..3b42c2352 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,4 +1,13 @@
-.imageBox-cont, .imageBox-cont-interactive {
+.imageBox {
+ pointer-events: all;
+ border-radius: inherit;
+ width:100%;
+ height:100%;
+ position: absolute;
+ transform-origin: top left;
+}
+
+.imageBox-cont, .imageBox-cont-dragging {
padding: 0vw;
position: absolute;
text-align: center;
@@ -8,19 +17,20 @@
max-height: 100%;
pointer-events: none;
background:transparent;
+ img {
+ height: auto;
+ width: 100%;
+ pointer-events: all;
+ }
+ .imageBox-fader {
+ pointer-events: all;
+ }
}
-.imageBox-container {
- pointer-events: all;
- border-radius: inherit;
- width:100%;
- height:100%;
- position: absolute;
- transform-origin: top left;
-}
-
-.imageBox-cont-interactive {
- pointer-events: all;
+.imageBox-cont-dragging {
+ .imageBox-fader {
+ pointer-events: none;
+ }
}
.imageBox-dot {
@@ -33,15 +43,6 @@
background: gray;
}
-.imageBox-cont img {
- height: auto;
- width: 100%;
-}
-
-.imageBox-cont-interactive img {
- height: auto;
- width: 100%;
-}
#google-photos {
transition: all 0.5s ease 0s;
@@ -100,18 +101,18 @@
}
}
-#cf {
+.imageBox-fader {
position: relative;
width: 100%;
margin: 0 auto;
display: flex;
- align-items: center;
height: 100%;
overflow: hidden;
.imageBox-fadeBlocker {
width: 100%;
height: 100%;
+ position: absolute;
background: black;
display: flex;
flex-direction: row;
@@ -126,7 +127,7 @@
}
}
-#cf img {
+.imageBox-fader img {
position: absolute;
left: 0;
}
@@ -138,10 +139,12 @@
transition: opacity 1s ease-in-out;
}
-.imageBox-fadeBlocker:hover {
- -webkit-transition: opacity 1s ease-in-out;
- -moz-transition: opacity 1s ease-in-out;
- -o-transition: opacity 1s ease-in-out;
- transition: opacity 1s ease-in-out;
- opacity: 0;
+.imageBox:hover {
+ .imageBox-fadeBlocker {
+ -webkit-transition: opacity 1s ease-in-out;
+ -moz-transition: opacity 1s ease-in-out;
+ -o-transition: opacity 1s ease-in-out;
+ transition: opacity 1s ease-in-out;
+ opacity: 0;
+ }
} \ No newline at end of file