diff options
| author | kimdahey <claire_kim1@brown.edu> | 2019-12-03 16:32:13 -0500 |
|---|---|---|
| committer | kimdahey <claire_kim1@brown.edu> | 2019-12-03 16:32:13 -0500 |
| commit | 70583fa47bd9920d1823d381708c81283534d6ce (patch) | |
| tree | 5c81976813436852403ea352797efe1d518dbb1a /src/client/views/nodes/ImageBox.scss | |
| parent | 56b83d89f37a5523ab319977e3385f539ecaf996 (diff) | |
| parent | 213962406327cc2f7267064f3016fabf0fd16872 (diff) | |
merged w master
Diffstat (limited to 'src/client/views/nodes/ImageBox.scss')
| -rw-r--r-- | src/client/views/nodes/ImageBox.scss | 63 |
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 |
