Commit ca132825 authored by Dan Allen's avatar Dan Allen

slide nav explore panel up, over nav menu panel

parent ddd87406
......@@ -8,10 +8,6 @@
z-index: var(--z-index-nav);
}
.nav-container.is-active {
display: block;
}
@media screen and (min-width: 769px) {
.nav-container {
width: var(--nav-width);
......@@ -29,6 +25,10 @@
}
}
.nav-container.is-active {
display: block;
}
.nav {
background: var(--nav-background);
position: relative;
......@@ -62,11 +62,9 @@ html.is-clipped--nav {
}
.nav-panel-menu {
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
/* help Chrome calculate the height correctly; must match .nav value minus height of drawer */
height: var(--nav-panel-height-mobile);
}
......@@ -76,8 +74,19 @@ html.is-clipped--nav {
}
}
.nav-panel-menu:not(.is-active) {
display: none;
.nav-panel-menu:not(.is-active) .nav-menu {
opacity: 0.75;
}
.nav-panel-menu:not(.is-active)::after {
content: "";
background: rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nav-panel-menu::-webkit-scrollbar {
......@@ -98,15 +107,14 @@ html.is-clipped--nav {
}
.nav-menu h3.title {
margin: 0;
font-weight: 500;
color: var(--nav-heading-font-color);
font-size: 1em;
font-size: inherit;
font-weight: 500;
margin: 0;
padding: 0.25em 0 0.125em;
}
.nav-menu a,
.nav-menu a:visited {
.nav-menu a {
color: inherit;
}
......@@ -165,12 +173,14 @@ html.is-clipped--nav {
}
.nav-panel-explore {
background: var(--nav-background);
display: flex;
flex-direction: column;
}
.nav-panel-explore.is-active {
height: inherit;
position: absolute;
right: 0;
bottom: 0;
left: 0;
max-height: calc(50% + var(--drawer-height));
}
.nav-panel-explore .context {
......@@ -193,10 +203,6 @@ html.is-clipped--nav {
}
}
.nav-panel-explore.is-active .context {
box-shadow: 0 1px 0 var(--nav-panel-divider-color);
}
.nav-panel-explore .context .version {
background-image: url(../img/chevron.svg);
background-repeat: no-repeat;
......@@ -209,13 +215,17 @@ html.is-clipped--nav {
flex-grow: 1;
box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
background: var(--nav-secondary-background);
padding: 0.5rem;
padding: 0.5rem 0.5rem 0 0.5rem;
margin: 0;
overflow-y: auto;
max-height: 100%;
display: block;
}
.nav-panel-explore .component:last-child {
margin-bottom: 0.75rem;
}
.nav-panel-explore:not(.is-active) .components {
display: none;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment