improve nav design
This commit is contained in:
parent
cf867bbc14
commit
26047fb0e1
7 changed files with 37 additions and 88 deletions
|
|
@ -1,7 +1,16 @@
|
|||
/* ================= PANELS ================= */
|
||||
#desktop-nav {
|
||||
#nav-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: #000;
|
||||
opacity: 0.7;
|
||||
z-index: 2;
|
||||
cursor: w-resize;
|
||||
}
|
||||
#nav-overlay:not(.nav-overlay--visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
|
@ -136,7 +145,11 @@ button.search__icon {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-item-content__texts {
|
||||
button.see-more {
|
||||
margin-bottom: var(--unit--vertical);
|
||||
}
|
||||
|
||||
.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) {
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
}
|
||||
|
||||
|
|
@ -146,21 +159,9 @@ button.search__icon {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
#desktop-nav {
|
||||
display: block;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--padding-body);
|
||||
height: 29vh;
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
nav.panel {
|
||||
width: 40rem;
|
||||
}
|
||||
#desktop-nav .empty {
|
||||
height: calc(3 * var(--unit--vertical));
|
||||
}
|
||||
|
||||
#subscribe-btn-wrapper {
|
||||
height: 2.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
|
@ -194,7 +195,6 @@ button.search__icon {
|
|||
.panel {
|
||||
z-index: 4;
|
||||
width: var(--padding-body);
|
||||
padding-top: var(--unit--vertical);
|
||||
}
|
||||
|
||||
.panel-close {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue