extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-09 06:49:16 +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 { .button.active {
border-bottom-color: rgb(var(--accent)); border-bottom-color: rgb(var(--accent));
color: var(--white);
} }
.button-small { .button-small {

11
css/menu.css
View File

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

2
index.html
View File

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

2
js/menu.js
View File

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