secondary list
This commit is contained in:
parent
43651ba8c1
commit
334d5e2edb
|
@ -11,18 +11,18 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
||||||
name = page.menuTitle || page.title
|
name = page.menuTitle || page.title
|
||||||
selected = current.path[3] == slug ? 'is-selected':''
|
selected = current.path[3] == slug ? 'is-selected':''
|
||||||
|
|
||||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
|
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
|
||||||
|
|
||||||
if selected
|
if selected
|
||||||
ul
|
ul.side-nav-secondary
|
||||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data
|
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data
|
||||||
name = page.menuTitle || page.title
|
name = page.menuTitle || page.title
|
||||||
selected = current.path[4] == slug ? 'is-selected':''
|
selected = current.path[4] == slug ? 'is-selected':''
|
||||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button> #{slug}</a>
|
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button> #{slug}</a>
|
||||||
|
|
||||||
if selected
|
if selected
|
||||||
ul
|
ul.side-nav-tertiary
|
||||||
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
|
||||||
name = page.menuTitle || page.title
|
name = page.menuTitle || page.title
|
||||||
selected = current.path[4] == slug ? 'is-selected':''
|
selected = current.path[4] == slug ? 'is-selected':''
|
||||||
li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
|
li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{name}</a>
|
||||||
|
|
|
@ -91,6 +91,17 @@
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border-bottom: 1px solid $fog;
|
border-bottom: 1px solid $fog;
|
||||||
|
|
||||||
|
&.is-selected {
|
||||||
|
> a {
|
||||||
|
background: $fog;
|
||||||
|
color: $regal;
|
||||||
|
|
||||||
|
.side-nav-icon {
|
||||||
|
color: $regal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
line-height: ($unit * 6) - 1;
|
line-height: ($unit * 6) - 1;
|
||||||
padding: 0px ($unit * 2) 0px ($unit * 6);
|
padding: 0px ($unit * 2) 0px ($unit * 6);
|
||||||
|
@ -102,15 +113,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
&.is-selected {
|
|
||||||
background: $fog;
|
|
||||||
color: $regal;
|
|
||||||
|
|
||||||
.side-nav-icon {
|
|
||||||
color: $regal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-nav-icon {
|
.side-nav-icon {
|
||||||
|
@ -124,4 +126,68 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// SECONDARY SIDENAV BUTTON
|
||||||
|
.side-nav-secondary {
|
||||||
|
@extend .side-nav-primary;
|
||||||
|
background: $fog;
|
||||||
|
box-shadow: inset 0px 2px 2px rgba($coal, .24);
|
||||||
|
|
||||||
|
@media handheld and (max-width: $phone-breakpoint),
|
||||||
|
screen and (max-device-width: $phone-breakpoint),
|
||||||
|
screen and (max-width: $tablet-breakpoint) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
|
||||||
|
&.is-selected {
|
||||||
|
> a {
|
||||||
|
background: transparent;
|
||||||
|
color: $regal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
line-height: ($unit * 5) - 1;
|
||||||
|
padding: 0px ($unit * 2) 0px ($unit * 5);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-nav-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 16px;
|
||||||
|
z-index: $layer-1;
|
||||||
|
font-size: 19px;
|
||||||
|
color: $cloud;
|
||||||
|
line-height: 47px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// SECONDARY SIDENAV BUTTON
|
||||||
|
.side-nav-tertiary {
|
||||||
|
padding-bottom: ($unit * 1);
|
||||||
|
margin: 0px 0px 0px ($unit * 2);
|
||||||
|
list-style-type: disc;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
&.is-selected {
|
||||||
|
> a {
|
||||||
|
background: transparent;
|
||||||
|
color: $coal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
line-height: ($unit * 3) - 1;
|
||||||
|
font-size: 13px;
|
||||||
|
text-transform: none;
|
||||||
|
text-align: left;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue