Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 96137ef

Browse files
alexwolfealexwolfe
committed
Merge pull request #1137 from ericjim/feat-sidenav-restyle
docs(sidenav): Restylize sidenav
2 parents c932eec + b130056 commit 96137ef

File tree

3 files changed

+126
-73
lines changed

3 files changed

+126
-73
lines changed

‎public/docs/_includes/_side-nav.jade

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,18 @@
3838
- var guide = sections('guide', function(item) { return !item.basics; });
3939
- var qs = sections('', function(item) { return item.slug === 'quickstart'; })[0] || {};
4040
- var reference = sections('', function(item) { return item.reference; });
41+
- var anyItemSelected = function(items) {
42+
- var selectedCount = items.filter(function(item) { return !!item.class; }).length;
43+
- return selectedCount > 0 ? 'is-nav-title-selected' : '';
44+
- }
45+
- var isQuickstartSelected = function(_cur) {
46+
- var splitted = cur.split('/');
47+
- var bit = splitted[splitted.length - 1].replace('.html', '');
48+
- return bit === 'quickstart' ? 'is-nav-title-selected' : '';
49+
-}
50+
- var isCollapsed = function(titleStyle) {
51+
- return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden';
52+
- }
4153

4254
nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
4355
// SEARCH BAR
@@ -49,42 +61,51 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
4961

5062
div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
5163
.nav-blocks
52-
.nav-title Tutorial
53-
.nav-primary-link(class="#{qs.class}")
54-
a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle}
55-
.nav-sub-title Case Study: Tour of Heroes
56-
.nav-ordered-lists
57-
ol
58-
each item in tutorial
59-
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
64+
a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
6065

6166
.nav-blocks
62-
.nav-title Basics
63-
.nav-ordered-lists
64-
ol
65-
each item in basics
66-
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
67+
a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
68+
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
69+
.nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
70+
ul
71+
each item, index in tutorial
72+
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
6773

6874
.nav-blocks
69-
.nav-title Developer Guide
70-
.nav-unordered-lists
75+
a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics
76+
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
77+
78+
.nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}")
79+
ul
80+
each item, index in basics
81+
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
82+
83+
.nav-blocks
84+
a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide
85+
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
86+
87+
.nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}")
7188
ul
7289
each item in guide
73-
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
90+
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
7491

7592
.nav-blocks
76-
.nav-title Cookbook
77-
.nav-unordered-lists
93+
a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
94+
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
95+
96+
.nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}")
7897
ul
7998
each item in cookbook
80-
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
99+
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
81100

82101
.nav-blocks
83-
.nav-title Reference
84-
.nav-unordered-lists
102+
a(class="nav-title #{anyItemSelected(reference)}" href="#{reference[0].href}" title="#{reference[0].tooltip}") Reference
103+
img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
104+
105+
.nav-unordered-lists(class="#{isCollapsed(anyItemSelected(reference))}")
85106
ul
86107
each item in reference
87-
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
108+
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
88109

89110
script.
90111
// Could put in appCtrl but only needed here and clear here

‎public/resources/css/module/_side-nav.scss

Lines changed: 79 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
bottom: auto;
2121
}
2222

23+
.is-hidden {
24+
display: none;
25+
}
2326

2427
// SEARCH BOX
2528
.side-nav-search {
@@ -77,6 +80,10 @@
7780
}
7881
}
7982

83+
.is-nav-title-selected {
84+
color: $regal !important;
85+
background-color: #DCE2E5 !important;
86+
}
8087

8188
// PRIMARY SIDENAV BUTTON
8289
.side-nav-primary {
@@ -135,49 +142,43 @@
135142
// SECONDARY SIDENAV
136143
.side-nav-secondary {
137144
@extend .side-nav-primary;
138-
background: $mist;
139-
box-shadow: inset 0px 2px 2px rgba($coal, .24);
145+
background-color: #DCE2E5;
140146

141147
@media handheld and (max-width: $phone-breakpoint),
142148
screen and (max-device-width: $phone-breakpoint),
143149
screen and (max-width: $tablet-breakpoint) {
144150
display: none;
145151
max-height: ($phone-breakpoint * 0.60);
146152
}
147-
153+
148154
// FLAT NAV (.nav)
149155
.nav-blocks {
150-
margin: 0 ($unit * 1.5);
151-
padding: ($unit * 2) 0;
156+
margin: 0;
157+
padding: 0;
152158
border-bottom: 1px solid $fog;
153159
color: $heather;
154-
160+
155161
a {
156162
text-decoration: none;
157163
color: $metal;
158164
display: block;
159165
}
160-
161-
ol {
162-
padding-left: ($unit * 2);
163-
margin: 0
164-
}
165-
166+
166167
ul {
167168
list-style: none;
168169
padding: 0;
169170
margin: 0
170171
}
171-
172+
172173
div, li {
173174
&.is-selected {
174175
> a {
175-
background: white;
176-
color: $regal;
176+
background: #CDD5DA;
177+
color: #1E88E5;
177178
}
178179
}
179180
}
180-
181+
181182
li {
182183
min-height: ($unit * 2);
183184
position: relative;
@@ -191,17 +192,35 @@
191192
.nav-title,
192193
.nav-sub-title {
193194
text-transform: uppercase;
194-
font-weight: bold;
195+
font-weight: 500; //medium
196+
color: #78909C;
195197
}
196198

197199
.nav-title {
198-
font-size: ($unit * 2);
199-
padding: ($unit * 0.5) 0 ($unit * 1) 0;
200+
font-size: 14px;
201+
202+
padding: ($unit * 2) ($unit * 2);
203+
margin: 0;
204+
background-color: #ECEFF1;
205+
206+
.inline-arrow-down-svg {
207+
float: right;
208+
opacity: 0.56;
209+
}
210+
211+
a {
212+
display: inline;
213+
}
200214
}
201215

202216
.nav-primary-link {
203-
margin-bottom: ($unit * 1);
204217
position: relative;
218+
219+
a {
220+
padding-left: 16px;
221+
padding-top: 16px;
222+
padding-bottom: 16px;
223+
}
205224
}
206225

207226
.nav-sub-title {
@@ -212,42 +231,51 @@
212231
.nav-active a {
213232
color: $regal;
214233
background: $lightgrey;
215-
font-weight: bold;
234+
font-weight: 500; //medium
216235
}
217236

218-
.nav-ordered-lists li a,
219-
.nav-unordered-lists li a,
220-
.nav-primary-link a {
221-
margin-left: ($unit * -3);
222-
padding-left: ($unit * 3);
223-
padding-top: ($unit * 0.5);
224-
padding-bottom: ($unit * 0.5);
225-
}
237+
.nav-unordered-lists, .nav-ordered-lists {
238+
// Apply inset shadows to the list under the title
239+
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08);
226240

227-
.nav-blocks li a:hover,
228-
.nav-primary-link a:hover {
229-
background: $fog;
230-
}
241+
// -- First Child
242+
// Apply inset shadows on the first child when hovering, since the background color will cover the shadow
243+
.nav-list-item:first-child {
244+
&:hover {
245+
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
246+
}
247+
}
248+
249+
// Apply inset shadows on the first child when selected, since the background color will cover the shadow
250+
.is-selected:first-child a {
251+
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
252+
}
253+
254+
// -- Last Child
255+
// Apply inset shadows on the last child when hovering, since the background color will cover the shadow
256+
.nav-list-item:last-child {
257+
&:hover {
258+
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
259+
}
260+
}
231261

232-
.nav-primary-link a:hover {
233-
padding-top: ($unit * 0.5);
234-
padding-bottom: ($unit * 0.5);
262+
// Apply inset shadows on the last child when selected, since the background color will cover the shadow
263+
.is-selected:last-child a {
264+
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
265+
}
235266
}
236267

237-
.nav-blocks li a:hover:before,
238-
.nav-primary-link a:hover:before {
239-
position: absolute;
240-
top: 50%;
241-
content: "";
242-
display: inline-block;
243-
width: 0.4em;
244-
height: 0.4em;
245-
border-right: 0.2em solid $tin;
246-
border-top: 0.2em solid $tin;
247-
transform: rotate(45deg);
248-
right: -5px;
249-
margin-top: -3px;
250-
margin-right: 14px;
251-
}
268+
.nav-list-item {
269+
a {
270+
font-size: 13px;
271+
font-weight: 400; //medium
272+
padding-left: $unit * 2;
273+
line-height: 32px;
274+
}
275+
276+
&:hover {
277+
background-color: #CFD8DC;
278+
}
279+
}
252280
}
253281
}

‎public/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)