diff --git a/app/views/base/topnav.scala b/app/views/base/topnav.scala index fbf4f459df..6562f40211 100644 --- a/app/views/base/topnav.scala +++ b/app/views/base/topnav.scala @@ -11,7 +11,7 @@ object topnav { private def linkTitle(url: String, name: Frag)(implicit ctx: Context) = if (ctx.blind) h3(name) else a(href := url)(name) - def apply()(implicit ctx: Context) = st.nav(id := "topnav", role := "navigation")( + def apply()(implicit ctx: Context) = st.nav(id := "topnav", role := "navigation", cls := "hover")( st.section( linkTitle("/", frag( span(cls := "play")(trans.play()), diff --git a/ui/common/css/header/_topnav-visible.scss b/ui/common/css/header/_topnav-visible.scss index b9e46ff4f1..fc15eee6bb 100644 --- a/ui/common/css/header/_topnav-visible.scss +++ b/ui/common/css/header/_topnav-visible.scss @@ -1,6 +1,3 @@ -$menu-transition: .1s linear .1s; -$menu-transition-immediate: .1s linear; - @include breakpoint($mq-topnav-visible) { .hamburger, @@ -34,21 +31,6 @@ $menu-transition-immediate: .1s linear; } } .home { display: none } - &:hover, - &:active { - > a { - transition: $menu-transition-immediate; - height: var(--nav-section-hover); - background: $c-bg-header-dropdown; - color: $c-header-dropdown; - border-color: $c-primary; - } - div { - transition: $menu-transition; - visibility: visible; - max-height: auto; - } - } } div { visibility: hidden; @@ -80,5 +62,18 @@ $menu-transition-immediate: .1s linear; display: block; margin-left: -9000px; } + &.hover section:hover, + section:active { + > a { + height: var(--nav-section-hover); + background: $c-bg-header-dropdown; + color: $c-header-dropdown; + border-color: $c-primary; + } + div { + visibility: visible; + max-height: auto; + } + } } } diff --git a/ui/round/src/main.ts b/ui/round/src/main.ts index 53128973fc..ced864ca0f 100644 --- a/ui/round/src/main.ts +++ b/ui/round/src/main.ts @@ -10,6 +10,7 @@ import MoveOn from './moveOn'; import { main as view } from './view/main'; import * as chat from 'chat'; import boot from './boot'; +import { menuHover } from 'common/menuHover'; export interface RoundApi { socketReceive(typ: string, data: any): boolean; @@ -20,6 +21,8 @@ export interface RoundMain { app: (opts: RoundOpts) => RoundApi; } +menuHover(); + export function app(opts: RoundOpts): RoundApi { const patch = init([klass, attributes]);