honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

secondary list

This commit is contained in:
Alex Wolfe 2015-04-14 05:22:14 -07:00
parent 43651ba8c1
commit 334d5e2edb
2 changed files with 80 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/_includes/_docs-nav.jade
View File

@ -11,18 +11,18 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
name = page.menuTitle || page.title
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
ul
ul.side-nav-secondary
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data
name = page.menuTitle || page.title
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
ul
ul.side-nav-tertiary
for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
name = page.menuTitle || page.title
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>

84
public/resources/css/module/_side-nav.scss
View File

@ -91,6 +91,17 @@
padding: 0px;
border-bottom: 1px solid $fog;
&.is-selected {
> a {
background: $fog;
color: $regal;
.side-nav-icon {
color: $regal;
}
}
}
> a {
line-height: ($unit * 6) - 1;
padding: 0px ($unit * 2) 0px ($unit * 6);
@ -102,15 +113,6 @@
position: relative;
text-decoration: none;
display: block;
&.is-selected {
background: $fog;
color: $regal;
.side-nav-icon {
color: $regal;
}
}
}
.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;
}
}
}
}