extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-23 00:23:28 +01: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 {
margin-left: calc(var(--form-wrap-space) * 3);
margin-left: calc(var(--form-wrap-space) * 2.25);
}
.form-inline {

63
src/css/menu.css
View File

@ -110,25 +110,22 @@
}
.menu-content {
padding-left: calc(var(--menu-space) * 3);
padding-right: calc(var(--menu-space) * 3);
grid-column-start: 1;
grid-column-end: 3;
}
.menu-content-item {
padding-top: calc(var(--menu-space) * 3);
padding-bottom: calc(var(--menu-space) * 3);
padding: calc(var(--menu-space) * 3);
position: relative;
z-index: 1;
}
.menu-content-item:not(:last-child) {
border-bottom: var(--horizontal-rule);
border-bottom: var(--horizontal-rule-large);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 3);
margin-bottom: calc(var(--menu-space) * 2);
}
.menu-item-header-text {
@ -136,7 +133,7 @@
}
.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;
}
@ -156,7 +153,7 @@
.menu-area {
max-height: 100%;
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;
position: relative;
}
@ -171,6 +168,17 @@
align-items: stretch;
flex-wrap: nowrap;
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 {
@ -180,17 +188,7 @@
grid-row-end: 2;
align-self: start;
position: absolute;
}
.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;
z-index: 3;
}
.menu-content-overscroll {
@ -198,8 +196,11 @@
}
.menu-content-item {
padding-top: calc(var(--menu-space) * 4);
padding-bottom: calc(var(--menu-space) * 4);
padding: calc(var(--menu-space) * 4);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 3);
}
.menu-nav-item {
@ -257,7 +258,7 @@
}
.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 {
grid-template-columns: 15em 1fr calc(var(--menu-space) * 5);
}
.menu-content {
padding-left: calc(var(--menu-space) * 5);
padding-right: calc(var(--menu-space) * 5);
grid-template-columns: calc(var(--menu-space) * 20) 1fr calc(var(--menu-space) * 5);
}
.menu-content-item {
padding-top: calc(var(--menu-space) * 5);
padding-bottom: calc(var(--menu-space) * 5);
padding: calc(var(--menu-space) * 5);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 4);
}
.menu-close-tab {
height: 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) {

4
src/css/typography.css
View File

@ -66,9 +66,9 @@ p:not(:last-child) {
hr {
border: 0;
border-top: var(--horizontal-rule);
border-top: var(--horizontal-rule-small);
border-radius: var(--theme-radius);
margin: 1em 0;
margin: var(--form-wrap-space) 0;
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-slow: var(--layout-duration-08) 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-color-theme: var(--theme-color-01);
--background-color-custom: rgb(0, 0, 0);