+
@@ -45,35 +45,36 @@
.nav-indicator-wrapper {
width: 100%;
height: var(--nav-indicator-height);
- background: var(--nav-a-border);
display: flex;
}
.nav-indicator {
flex: 1;
- background: var(--nav-a-border);
transform-origin: left;
}
- .nav-indicator.animate {
+ .nav-indicator {
+ background: var(--nav-indicator-bg);
+ }
+
+ .nav-indicator-wrapper.animating > .nav-indicator {
transition: transform 333ms ease-in-out;
will-change: transform;
}
.main-nav-link:hover .nav-indicator {
- background: var(--nav-a-border-hover);
- }
-
- .main-nav-link.selected .nav-indicator-wrapper {
- background: var(--nav-a-border-hover);
+ background: var(--nav-indicator-bg-hover);
}
.main-nav-link.selected .nav-indicator {
- background: var(--nav-indicator-bg);
+ background: var(--nav-indicator-bg-active);
}
- .main-nav-link.selected:hover .nav-indicator {
- background: var(--nav-indicator-bg-hover);
+ /* Desktop/mouse only https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c */
+ @media(hover: hover) and (pointer: fine) {
+ .main-nav-link:hover .nav-indicator-wrapper.pre-animating {
+ background: var(--nav-indicator-bg-hover);
+ }
}
.main-nav-link:hover {
@@ -129,6 +130,7 @@
import { scrollToTop } from '../_utils/scrollToTop.js'
import { normalizePageName } from '../_utils/normalizePageName.js'
import { formatIntl } from '../_utils/formatIntl.js'
+ import { classname } from '../_utils/classname.js'
export default {
oncreate () {
@@ -148,6 +150,10 @@
})
},
store: () => store,
+ data: () => ({
+ preAnimating: false,
+ animating: false
+ }),
computed: {
selected: ({ page, name }) => name === normalizePageName(page),
ariaLabel: ({ selected, name, label, $numberOfNotifications, $numberOfFollowRequests }) => {
@@ -166,6 +172,10 @@
),
badgeNumber: ({ name, $numberOfNotifications, $numberOfFollowRequests }) => (
(name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0
+ ),
+ animationClasses: ({ animating, preAnimating }) => classname(
+ animating && 'animating',
+ preAnimating && 'pre-animating'
)
},
methods: {
@@ -187,7 +197,7 @@
emit('animateNavPart2', { fromRect, toPage })
},
animatePart2 ({ fromRect }) {
- const indicator = this.refs.indicator
+ const { indicator } = this.refs
mark('animateNavPart2 gBCR')
const toRect = indicator.getBoundingClientRect()
stop('animateNavPart2 gBCR')
@@ -196,11 +206,12 @@
indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`
const onTransitionEnd = () => {
indicator.removeEventListener('transitionend', onTransitionEnd)
- indicator.classList.remove('animate')
+ this.set({ animating: false, preAnimating: false })
}
indicator.addEventListener('transitionend', onTransitionEnd)
+ this.set({ preAnimating: true }) // avoids a flicker before the doubleRAF
doubleRAF(() => {
- indicator.classList.add('animate')
+ this.set({ animating: true })
indicator.style.transform = ''
})
}
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index cb166f45..a3a8c603 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -28,19 +28,17 @@
--nav-bg: #{$main-theme-color};
--nav-active-bg: #{lighten($main-theme-color, 3%)};
--nav-border: #{darken($main-theme-color, 10%)};
- --nav-a-border: #{$main-theme-color};
- --nav-a-selected-border: #{$secondary-text-color};
--nav-a-selected-bg: #{lighten($main-theme-color, 3%)};
--nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
--nav-svg-fill: #{$secondary-text-color};
--nav-text-color: #{$secondary-text-color};
- --nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
- --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.6)};
+ --nav-indicator-bg: #{$main-theme-color};
+ --nav-indicator-bg-active: #{mix($secondary-text-color, $main-theme-color, 90%)};
+ --nav-indicator-bg-hover: #{mix($secondary-text-color, $main-theme-color, 60%)};
--nav-a-selected-border-hover: #{$secondary-text-color};
--nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)};
--nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)};
- --nav-a-border-hover: #{rgba($secondary-text-color, 0.6)};
--nav-svg-fill-hover: #{$secondary-text-color};
--nav-text-color-hover: #{$secondary-text-color};
diff --git a/src/scss/themes/cobalt.scss b/src/scss/themes/cobalt.scss
index 5fe375a6..62b1bc95 100644
--- a/src/scss/themes/cobalt.scss
+++ b/src/scss/themes/cobalt.scss
@@ -32,7 +32,6 @@ $compose-background: lighten($main-theme-color, 32%);
--nav-text-color: #{$main-text-color};
--nav-svg-fill-hover: #{$main-text-color};
--nav-text-color-hover: #{$main-text-color};
- --nav-a-selected-border: #{$anchor-color};
--nav-a-selected-border-hover: #{$anchor-color};
accent-color: #{lighten($main-theme-color, 15%)};
diff --git a/src/scss/themes/dark-grayscale.scss b/src/scss/themes/dark-grayscale.scss
index 22644881..eebbd81a 100644
--- a/src/scss/themes/dark-grayscale.scss
+++ b/src/scss/themes/dark-grayscale.scss
@@ -24,4 +24,6 @@ $compose-background: lighten($main-theme-color, 52%);
--action-button-fill-color-pressed: #{darken($anchor-color, 7%)};
--action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
--action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};
+
+ --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
}
diff --git a/src/scss/themes/hacker.scss b/src/scss/themes/hacker.scss
index 79fb4297..3619ec28 100644
--- a/src/scss/themes/hacker.scss
+++ b/src/scss/themes/hacker.scss
@@ -15,3 +15,7 @@ $compose-background: lighten($main-theme-color, 52%);
@import "_dark.scss";
@import "_dark_navbar.scss";
@import "_dark_scrollbars.scss";
+
+:root {
+ --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
+}
diff --git a/src/scss/themes/punk.scss b/src/scss/themes/punk.scss
index 44e6fb9f..49420679 100644
--- a/src/scss/themes/punk.scss
+++ b/src/scss/themes/punk.scss
@@ -15,3 +15,7 @@ $compose-background: lighten($main-theme-color, 52%);
@import "_dark.scss";
@import "_dark_navbar.scss";
@import "_dark_scrollbars.scss";
+
+:root {
+ --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
+}
diff --git a/src/scss/themes/riot.scss b/src/scss/themes/riot.scss
index 8c4ed459..70900ccc 100644
--- a/src/scss/themes/riot.scss
+++ b/src/scss/themes/riot.scss
@@ -18,4 +18,5 @@ $compose-background: lighten($main-theme-color, 52%);
:root {
accent-color: #{darken($main-theme-color, 5%)};
+ --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
}