diff options
| author | Derick Montague <derick.montague@ibm.com> | 2021-01-04 20:19:08 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2021-01-05 22:31:23 +0300 |
| commit | 86e11ad343d31a7f54df38aa188bee7dd450cdbf (patch) | |
| tree | c6dd6e649ce0b9946de47e14964d8e65083d5782 /src/components/Global | |
| parent | 27e250d14d2539523b1e44cfcc55aed3467c4040 (diff) | |
| download | webui-vue-86e11ad343d31a7f54df38aa188bee7dd450cdbf.tar.xz | |
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
Diffstat (limited to 'src/components/Global')
| -rw-r--r-- | src/components/Global/ButtonBackToTop.vue | 11 |
1 files changed, 7 insertions, 4 deletions
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> |