extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 12:31:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve menu nav spacing

Browse Source
This commit is contained in:
zombieFox 2020-02-19 10:14:19 +00:00
parent f1db06b5dc
commit 15f99a4ff6
4 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/form.css
View File

@ -29,7 +29,7 @@
} }
.form-indent { .form-indent {
margin-left: calc(var(--form-wrap-space) * 3); margin-left: calc(var(--form-wrap-space) * 2.25);
} }
.form-inline { .form-inline {

63
src/css/menu.css
View File

@ -110,25 +110,22 @@
} }
.menu-content { .menu-content {
padding-left: calc(var(--menu-space) * 3);
padding-right: calc(var(--menu-space) * 3);
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
} }
.menu-content-item { .menu-content-item {
padding-top: calc(var(--menu-space) * 3); padding: calc(var(--menu-space) * 3);
padding-bottom: calc(var(--menu-space) * 3);
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.menu-content-item:not(:last-child) { .menu-content-item:not(:last-child) {
border-bottom: var(--horizontal-rule); border-bottom: var(--horizontal-rule-large);
} }
.menu-item-header { .menu-item-header {
margin-bottom: calc(var(--menu-space) * 3); margin-bottom: calc(var(--menu-space) * 2);
} }
.menu-item-header-text { .menu-item-header-text {
@ -136,7 +133,7 @@
} }
.menu-item-form { .menu-item-form {
margin: 0 0 calc(var(--menu-space) * 3) calc(var(--menu-space) * 3); padding-left: calc(var(--menu-space) * 3);
z-index: 1; z-index: 1;
} }
@ -156,7 +153,7 @@
.menu-area { .menu-area {
max-height: 100%; max-height: 100%;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: 15em 1fr calc(var(--menu-space) * 4); grid-template-columns: calc(var(--menu-space) * 20) 1fr calc(var(--menu-space) * 4);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -171,6 +168,17 @@
align-items: stretch; align-items: stretch;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-y: auto; overflow-y: auto;
z-index: 1;
}
.menu-content {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
scroll-behavior: smooth;
overflow-y: auto;
z-index: 2;
} }
.menu-close { .menu-close {
@ -180,17 +188,7 @@
grid-row-end: 2; grid-row-end: 2;
align-self: start; align-self: start;
position: absolute; position: absolute;
} z-index: 3;
.menu-content {
padding-left: calc(var(--menu-space) * 4);
padding-right: calc(var(--menu-space) * 4);
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
scroll-behavior: smooth;
overflow-y: auto;
} }
.menu-content-overscroll { .menu-content-overscroll {
@ -198,8 +196,11 @@
} }
.menu-content-item { .menu-content-item {
padding-top: calc(var(--menu-space) * 4); padding: calc(var(--menu-space) * 4);
padding-bottom: calc(var(--menu-space) * 4); }
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 3);
} }
.menu-nav-item { .menu-nav-item {
@ -257,7 +258,7 @@
} }
.menu-item-form { .menu-item-form {
margin: 0 0 0 calc(var(--menu-space) * 3); padding-left: calc(var(--menu-space) * 4);
} }
} }
@ -267,23 +268,25 @@
} }
.menu-area { .menu-area {
grid-template-columns: 15em 1fr calc(var(--menu-space) * 5); grid-template-columns: calc(var(--menu-space) * 20) 1fr calc(var(--menu-space) * 5);
}
.menu-content {
padding-left: calc(var(--menu-space) * 5);
padding-right: calc(var(--menu-space) * 5);
} }
.menu-content-item { .menu-content-item {
padding-top: calc(var(--menu-space) * 5); padding: calc(var(--menu-space) * 5);
padding-bottom: calc(var(--menu-space) * 5); }
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 4);
} }
.menu-close-tab { .menu-close-tab {
height: calc(var(--menu-space) * 5); height: calc(var(--menu-space) * 5);
width: calc(var(--menu-space) * 5); width: calc(var(--menu-space) * 5);
} }
.menu-item-form {
padding-left: calc(var(--menu-space) * 5);
}
} }
@media (min-width: 1100px) { @media (min-width: 1100px) {

4
src/css/typography.css
View File

@ -66,9 +66,9 @@ p:not(:last-child) {
hr { hr {
border: 0; border: 0;
border-top: var(--horizontal-rule); border-top: var(--horizontal-rule-small);
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
margin: 1em 0; margin: var(--form-wrap-space) 0;
clear: both; clear: both;
} }

3
src/css/variables.css
View File

@ -127,7 +127,8 @@
--layout-timing-medium: var(--layout-duration-06) ease-in-out; --layout-timing-medium: var(--layout-duration-06) ease-in-out;
--layout-timing-slow: var(--layout-duration-08) ease-in-out; --layout-timing-slow: var(--layout-duration-08) ease-in-out;
--layout-timing-extra-slow: var(--layout-duration-10) ease-in-out; --layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
--horizontal-rule: var(--layout-line-width) solid rgb(var(--theme-color-02)); --horizontal-rule-small: 1px solid rgb(var(--theme-color-02));
--horizontal-rule-large: 2px solid rgb(var(--theme-color-02));
/* background */ /* background */
--background-color-theme: var(--theme-color-01); --background-color-theme: var(--theme-color-01);
--background-color-custom: rgb(0, 0, 0); --background-color-custom: rgb(0, 0, 0);