implement menuHover in round
This commit is contained in:
parent
96175f779e
commit
12af0102c1
|
@ -11,7 +11,7 @@ object topnav {
|
||||||
private def linkTitle(url: String, name: Frag)(implicit ctx: Context) =
|
private def linkTitle(url: String, name: Frag)(implicit ctx: Context) =
|
||||||
if (ctx.blind) h3(name) else a(href := url)(name)
|
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(
|
st.section(
|
||||||
linkTitle("/", frag(
|
linkTitle("/", frag(
|
||||||
span(cls := "play")(trans.play()),
|
span(cls := "play")(trans.play()),
|
||||||
|
|
|
@ -1,6 +1,3 @@
|
||||||
$menu-transition: .1s linear .1s;
|
|
||||||
$menu-transition-immediate: .1s linear;
|
|
||||||
|
|
||||||
@include breakpoint($mq-topnav-visible) {
|
@include breakpoint($mq-topnav-visible) {
|
||||||
|
|
||||||
.hamburger,
|
.hamburger,
|
||||||
|
@ -34,21 +31,6 @@ $menu-transition-immediate: .1s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.home { display: none }
|
.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 {
|
div {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
@ -80,5 +62,18 @@ $menu-transition-immediate: .1s linear;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: -9000px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@ import MoveOn from './moveOn';
|
||||||
import { main as view } from './view/main';
|
import { main as view } from './view/main';
|
||||||
import * as chat from 'chat';
|
import * as chat from 'chat';
|
||||||
import boot from './boot';
|
import boot from './boot';
|
||||||
|
import { menuHover } from 'common/menuHover';
|
||||||
|
|
||||||
export interface RoundApi {
|
export interface RoundApi {
|
||||||
socketReceive(typ: string, data: any): boolean;
|
socketReceive(typ: string, data: any): boolean;
|
||||||
|
@ -20,6 +21,8 @@ export interface RoundMain {
|
||||||
app: (opts: RoundOpts) => RoundApi;
|
app: (opts: RoundOpts) => RoundApi;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
menuHover();
|
||||||
|
|
||||||
export function app(opts: RoundOpts): RoundApi {
|
export function app(opts: RoundOpts): RoundApi {
|
||||||
|
|
||||||
const patch = init([klass, attributes]);
|
const patch = init([klass, attributes]);
|
||||||
|
|
Loading…
Reference in a new issue