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

docs(sidenav): Restylize sidenav

This commit is contained in:
Eric Jimenez 2016-04-21 14:29:39 -04:00
parent c932eec801
commit b130056613
3 changed files with 126 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/docs/_includes/_side-nav.jade
View File

@ -38,6 +38,18 @@
- var guide = sections('guide', function(item) { return !item.basics; });
- var qs = sections('', function(item) { return item.slug === 'quickstart'; })[0] || {};
- var reference = sections('', function(item) { return item.reference; });
- var anyItemSelected = function(items) {
- var selectedCount = items.filter(function(item) { return !!item.class; }).length;
- return selectedCount > 0 ? 'is-nav-title-selected' : '';
- }
- var isQuickstartSelected = function(_cur) {
- var splitted = cur.split('/');
- var bit = splitted[splitted.length - 1].replace('.html', '');
- return bit === 'quickstart' ? 'is-nav-title-selected' : '';
-}
- var isCollapsed = function(titleStyle) {
- return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden';
- }
nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
// SEARCH BAR
@ -49,42 +61,51 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
.nav-blocks
.nav-title Tutorial
.nav-primary-link(class="#{qs.class}")
a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle}
.nav-sub-title Case Study: Tour of Heroes
.nav-ordered-lists
ol
each item in tutorial
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
.nav-blocks
.nav-title Basics
.nav-ordered-lists
ol
each item in basics
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
.nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
ul
each item, index in tutorial
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
.nav-blocks
.nav-title Developer Guide
.nav-unordered-lists
a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
.nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}")
ul
each item, index in basics
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
.nav-blocks
a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
.nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}")
ul
each item in guide
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
.nav-blocks
.nav-title Cookbook
.nav-unordered-lists
a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
.nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}")
ul
each item in cookbook
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
.nav-blocks
.nav-title Reference
.nav-unordered-lists
a(class="nav-title #{anyItemSelected(reference)}" href="#{reference[0].href}" title="#{reference[0].tooltip}") Reference
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
.nav-unordered-lists(class="#{isCollapsed(anyItemSelected(reference))}")
ul
each item in reference
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
script.
// Could put in appCtrl but only needed here and clear here

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

@ -20,6 +20,9 @@
bottom: auto;
}
.is-hidden {
display: none;
}
// SEARCH BOX
.side-nav-search {
@ -77,6 +80,10 @@
}
}
.is-nav-title-selected {
color: $regal !important;
background-color: #DCE2E5 !important;
}
// PRIMARY SIDENAV BUTTON
.side-nav-primary {
@ -135,8 +142,7 @@
// SECONDARY SIDENAV
.side-nav-secondary {
@extend .side-nav-primary;
background: $mist;
box-shadow: inset 0px 2px 2px rgba($coal, .24);
background-color: #DCE2E5;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
@ -144,40 +150,35 @@
display: none;
max-height: ($phone-breakpoint * 0.60);
}
// FLAT NAV (.nav)
.nav-blocks {
margin: 0 ($unit * 1.5);
padding: ($unit * 2) 0;
margin: 0;
padding: 0;
border-bottom: 1px solid $fog;
color: $heather;
a {
text-decoration: none;
color: $metal;
display: block;
}
ol {
padding-left: ($unit * 2);
margin: 0
}
ul {
list-style: none;
padding: 0;
margin: 0
}
div, li {
&.is-selected {
> a {
background: white;
color: $regal;
background: #CDD5DA;
color: #1E88E5;
}
}
}
li {
min-height: ($unit * 2);
position: relative;
@ -191,17 +192,35 @@
.nav-title,
.nav-sub-title {
text-transform: uppercase;
font-weight: bold;
font-weight: 500; //medium
color: #78909C;
}
.nav-title {
font-size: ($unit * 2);
padding: ($unit * 0.5) 0 ($unit * 1) 0;
font-size: 14px;
padding: ($unit * 2) ($unit * 2);
margin: 0;
background-color: #ECEFF1;
.inline-arrow-down-svg {
float: right;
opacity: 0.56;
}
a {
display: inline;
}
}
.nav-primary-link {
margin-bottom: ($unit * 1);
position: relative;
a {
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
}
}
.nav-sub-title {
@ -212,42 +231,51 @@
.nav-active a {
color: $regal;
background: $lightgrey;
font-weight: bold;
font-weight: 500; //medium
}
.nav-ordered-lists li a,
.nav-unordered-lists li a,
.nav-primary-link a {
margin-left: ($unit * -3);
padding-left: ($unit * 3);
padding-top: ($unit * 0.5);
padding-bottom: ($unit * 0.5);
.nav-unordered-lists, .nav-ordered-lists {
// Apply inset shadows to the list under the title
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08);
// -- First Child
// Apply inset shadows on the first child when hovering, since the background color will cover the shadow
.nav-list-item:first-child {
&:hover {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
}
}
// Apply inset shadows on the first child when selected, since the background color will cover the shadow
.is-selected:first-child a {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
}
// -- Last Child
// Apply inset shadows on the last child when hovering, since the background color will cover the shadow
.nav-list-item:last-child {
&:hover {
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
}
}
// Apply inset shadows on the last child when selected, since the background color will cover the shadow
.is-selected:last-child a {
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
}
}
.nav-blocks li a:hover,
.nav-primary-link a:hover {
background: $fog;
}
.nav-list-item {
a {
font-size: 13px;
font-weight: 400; //medium
padding-left: $unit * 2;
line-height: 32px;
}
.nav-primary-link a:hover {
padding-top: ($unit * 0.5);
padding-bottom: ($unit * 0.5);
&:hover {
background-color: #CFD8DC;
}
}
.nav-blocks li a:hover:before,
.nav-primary-link a:hover:before {
position: absolute;
top: 50%;
content: "";
display: inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid $tin;
border-top: 0.2em solid $tin;
transform: rotate(45deg);
right: -5px;
margin-top: -3px;
margin-right: 14px;
}
}
}

4
public/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg fill="#8FA4AE" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 213 B