From 86e11ad343d31a7f54df38aa188bee7dd450cdbf Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Mon, 4 Jan 2021 11:19:08 -0600
Subject: Update class name and improve transition

The class name showBtn uses a camelCase naming convention and CSS
selector names use the kebab-case naming convention. The z-index
solution is not needed if we hide the element with visibility. Using
both opacity and visibility allows the transition to be elegant.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie555f958daaadd2bc3a3777b6c2bc7d5e83a0cc5
---
 src/components/Global/ButtonBackToTop.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index b2c5448c..95e74045 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -2,7 +2,7 @@
   <b-button
     id="scrollToTopBtn"
     class="btn-top btn-icon-only"
-    :class="{ showBtn: showButton }"
+    :class="{ 'show-btn': showButton }"
     variant="secondary"
     :title="$t('global.ariaLabel.scrollToTop')"
     :aria-label="$t('global.ariaLabel.scrollToTop')"
@@ -49,17 +49,20 @@ export default {
   position: fixed;
   bottom: 24px;
   right: 24px;
-  z-index: -1;
+
   box-shadow: $box-shadow;
+  visibility: hidden;
   opacity: 0;
   transition: $transition-base;
+  z-index: $zindex-fixed;
+
   @media (min-width: 1600px) {
     left: 1485px;
     right: auto;
   }
 }
-.showBtn {
+.show-btn {
+  visibility: visible;
   opacity: 1;
-  z-index: $zindex-fixed;
 }
 </style>
-- 
cgit v1.2.3