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
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index b2c5448..95e7404 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 @@
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>