From 633c62652ad7cef151c68d0cf6e2c420ed07de87 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Thu, 4 Jun 2020 22:34:59 -0700
Subject: show autoscroll button on arrow click, then fade away after a while
 if it's not clicked

---
 .../collections/CollectionCarousel3DView.scss      | 40 ++++++++++++++++------
 1 file changed, 29 insertions(+), 11 deletions(-)

(limited to 'src/client/views/collections/CollectionCarousel3DView.scss')

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index ff63f4116..5f8895c1f 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -32,8 +32,8 @@
 
     .dot,
     .dot-active {
-        height: 15px;
-        width: 15px;
+        height: 10px;
+        width: 10px;
         border-radius: 50%;
         margin: 3px;
         display: inline-block;
@@ -49,7 +49,9 @@
 .carousel3DView-back,
 .carousel3DView-fwd,
 .carousel3DView-back-scroll,
-.carousel3DView-fwd-scroll {
+.carousel3DView-fwd-scroll,
+.carousel3DView-back-scroll-hidden,
+.carousel3DView-fwd-scroll-hidden {
     position: absolute;
     display: flex;
     width: 30;
@@ -61,24 +63,40 @@
     cursor: pointer;
 }
 
-.carousel3DView-fwd {
+.carousel3DView-fwd,
+.carousel3DView-back {
     top: 50%;
+}
+
+.carousel3DView-fwd-scroll,
+.carousel3DView-back-scroll,
+.carousel3DView-fwd-scroll-hidden,
+.carousel3DView-back-scroll-hidden {
+    top: calc(50% - 30px);
+}
+
+.carousel3DView-fwd,
+.carousel3DView-fwd-scroll,
+.carousel3DView-fwd-scroll-hidden {
     right: 0;
 }
 
-.carousel3DView-back {
-    top: 50%;
+.carousel3DView-back,
+.carousel3DView-back-scroll,
+.carousel3DView-back-scroll-hidden {
     left: 0;
 }
 
-.carousel3DView-fwd-scroll {
-    top: calc(50% - 30px);
-    right: 0;
+.carousel3DView-fwd-scroll-hidden,
+.carousel3DView-back-scroll-hidden {
+    opacity: 0;
+    transition: opacity 0.5s linear;
+    pointer-events: none;
 }
 
+.carousel3DView-fwd-scroll,
 .carousel3DView-back-scroll {
-    top: calc(50% - 30px);
-    left: 0;
+    opacity: 1;
 }
 
 .carousel3DView-back:hover,
-- 
cgit v1.2.3-70-g09d2