aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ComparisonBox.scss
diff options
context:
space:
mode:
authorAndy Rickert <andrew_rickert@brown.edu>2020-06-03 16:40:09 -0400
committerAndy Rickert <andrew_rickert@brown.edu>2020-06-03 16:40:09 -0400
commit954948ddd511578af4ca2c50c960765a5a7bc637 (patch)
tree16fafd254a5db95d5c39838d4313d7ddf59753af /src/client/views/nodes/ComparisonBox.scss
parent6d8d3c00587c43ae61392db4fe6915ee492c2e4a (diff)
parent9588e56079f7e4ab98da1849f44996656649bc06 (diff)
merge
Diffstat (limited to 'src/client/views/nodes/ComparisonBox.scss')
-rw-r--r--src/client/views/nodes/ComparisonBox.scss93
1 files changed, 93 insertions, 0 deletions
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
new file mode 100644
index 000000000..810a824cf
--- /dev/null
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -0,0 +1,93 @@
+.comparisonBox-interactive,
+.comparisonBox {
+ border-radius: inherit;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 0;
+ pointer-events: none;
+
+ .clip-div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ overflow: hidden;
+
+ .beforeBox-cont {
+ height: 100%;
+ overflow: hidden;
+ }
+ }
+
+ .slide-bar {
+ position: absolute;
+ height: 100%;
+ width: 3px;
+ display: inline-block;
+ background: white;
+
+ .slide-handle {
+ position: absolute;
+ display: none;
+ height: 20px;
+ width: 30px;
+ bottom: 0px;
+ left: -10.5px;
+
+ .left-handle,
+ .right-handle {
+ width: 15px;
+ }
+ }
+ }
+
+ .afterBox-cont {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ .clear-button {
+ position: absolute;
+ top: 3px;
+ opacity: 0.8;
+ pointer-events: all;
+ cursor: pointer;
+ }
+
+ .clear-button.before {
+ left: 3px;
+ }
+
+ .clear-button.after {
+ right: 3px;
+ }
+
+ .placeholder {
+ width: 50%;
+ height: 50%;
+ margin-top: 25%;
+ margin-left: 25%;
+
+ .upload-icon {
+ width: 100%;
+ height: 100%;
+ opacity: 0.5;
+ }
+ }
+}
+
+.comparisonBox-interactive {
+ pointer-events: unset;
+ cursor: ew-resize;
+
+ .slide-bar {
+ .slide-handle {
+ display: flex;
+ }
+ }
+} \ No newline at end of file