extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-02 19:39:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve menu UX and UI

Browse Source
This commit is contained in:
Kuldeep M 2019-01-15 12:33:15 +00:00
parent 17ed4e7bd5
commit 577d52afc9
4 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/button.css
View File

@ -84,6 +84,7 @@ button [class*=" icon-"],
.button.active {
border-bottom-color: rgb(var(--accent));
color: var(--white);
}
.button-small {

11
css/menu.css
View File

@ -12,6 +12,10 @@
z-index: var(--z-index-menu);
}
.menu:focus {
outline: 0;
}
.is-menu-open .menu {
transform: translateY(0);
}
@ -89,11 +93,6 @@
padding-bottom: 1.5em;
}
.menu-nav-button.active {
background-color: var(--gray-04);
color: var(--white);
}
@media (min-width: 550px) {
.menu {
max-height: calc(90vh - 2em);
@ -116,11 +115,13 @@
.menu {
width: calc(60vw - 2em);
max-height: calc(100vh - 2em);
max-width: 40em;
}
}
@media (min-width: 1100px) {
.menu {
width: calc(50vw - 2em);
max-width: 50em;
}
}

2
index.html
View File

@ -85,7 +85,7 @@
</div>
</section>
<section class="menu">
<section class="menu" tabindex="1">
<div class="menu-area">
<div class="menu-nav">

2
js/menu.js
View File

@ -51,7 +51,7 @@ var menu = (function() {
var html = helper.e("html");
if (state.get().menu.active) {
helper.addClass(html, "is-menu-open");
helper.e(".menu-nav-button.active").focus();
helper.e(".menu").focus();
shade.render({
action: function() {
close();