[design] improve menu on small screens

This commit is contained in:
zombieFox 2019-12-28 09:00:07 -07:00
parent f884999d09
commit 737eb22861
3 changed files with 10 additions and 15 deletions

View File

@ -151,10 +151,6 @@ button [class*=" icon-"],
width: 100%; width: 100%;
} }
.button-slim {
padding: 0;
}
button [class^="button-"], button [class^="button-"],
button [class*=" button-"], button [class*=" button-"],
.button [class^="button-"], .button [class^="button-"],

View File

@ -130,12 +130,11 @@
.menu { .menu {
width: 70vw; width: 70vw;
height: 100%; height: 100%;
overflow-y: inherit; max-height: initial;
max-height: inherit;
} }
.menu-area { .menu-area {
overflow-y: inherit; overflow-y: initial;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;

View File

@ -145,14 +145,14 @@
<div class="menu-nav"> <div class="menu-nav">
<div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled"> <div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
<button class="menu-nav-button control-menu-layout button button-slim mb-0 active" tabindex="-1">Layout</button> <button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
<button class="menu-nav-button control-menu-header button button-slim mb-0" tabindex="-1">Header</button> <button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
<button class="menu-nav-button control-menu-groups button button-slim mb-0" tabindex="-1">Groups</button> <button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
<button class="menu-nav-button control-menu-bookmarks button button-slim mb-0" tabindex="-1">Bookmarks</button> <button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
<button class="menu-nav-button control-menu-theme button button-slim mb-0" tabindex="-1">Theme</button> <button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
<button class="menu-nav-button control-menu-background button button-slim mb-0" tabindex="-1">Background</button> <button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
<button class="menu-nav-button control-menu-data button button-slim mb-0" tabindex="-1">Data</button> <button class="menu-nav-button control-menu-data button mb-0" tabindex="-1">Data</button>
<button class="menu-nav-button control-menu-nightTab button button-slim mb-0" tabindex="-1">nightTab</button> <button class="menu-nav-button control-menu-nightTab button mb-0" tabindex="-1">nightTab</button>
</div> </div>
<div class="menu-nav-area-close"> <div class="menu-nav-area-close">
<button class="menu-nav-button control-menu-close button mb-0" tabindex="-1"><span class="icon-close"></span></button> <button class="menu-nav-button control-menu-close button mb-0" tabindex="-1"><span class="icon-close"></span></button>