Skip to content

Commit 0bd7179

Browse files
CITguyCITguy
authored
Merge pull request #33 from rackerlabs/SURF-85-left-navigation
feat(navigation): left nav styles and behavior
2 parents 686ae5e + b866eff commit 0bd7179

File tree

11 files changed

+265
-93
lines changed

11 files changed

+265
-93
lines changed

‎source/components/grid/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@
33
assets:
44
- helix-ui.css
55
---
6+
<div class="alert alert-info">
7+
<ul>
8+
<li>
9+
Avoid using <code>.container</code> within a Helix grid. It will cause a
10+
<code>.hxRow</code> to expand beyond what is expected.
11+
</li>
12+
<li>
13+
If you have strange layout issues, try wrapping in a <code>&lt;p&gt;</code>.
14+
</li>
15+
</ul>
16+
</div>
17+
618
<h2>12-column Grid</h2>
719
<p>
820
The grid system requires loading <code>helix-ui.css</code> into your application.

‎source/components/navigation/_navigation.less‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.hx-app-nav {
2+
@vpad: 0.5rem;
3+
@rpad: 0.75rem;
4+
5+
@indent-by: 1.25rem;
6+
@l1-indent: 1 * @indent-by;
7+
@l2-indent: 2 * @indent-by;
8+
@l3-indent: 3 * @indent-by;
9+
@l4-indent: 4 * @indent-by;
10+
11+
background-color: @gray-975;
12+
color: @gray-400;
13+
font-size: 0.875rem; /* ~14px */
14+
height: 100%; // full height of container
15+
letter-spacing: 0.75px;
16+
padding-top: 2rem;
17+
width: 15rem; /* ~240px */
18+
19+
header {
20+
color: inherit;
21+
padding: @vpad @rpad @vpad 0; // left set below
22+
text-transform: uppercase;
23+
24+
&:hover {
25+
background-color: @gray-800;
26+
color: @gray-0;
27+
cursor: pointer;
28+
}
29+
30+
.toggle-icon {
31+
float: right;
32+
pointer-events: none;
33+
}
34+
}
35+
36+
a {
37+
color: inherit;
38+
display: block;
39+
font-weight: 300;
40+
padding: @vpad @rpad @vpad @l1-indent;
41+
text-decoration: none;
42+
text-transform: capitalize;
43+
44+
&.current {
45+
background-color: @gray-900;
46+
color: @gray-0;
47+
}
48+
49+
&:hover {
50+
background-color: @gray-800;
51+
color: @gray-0;
52+
}
53+
}
54+
55+
section {
56+
& > div {
57+
display: none;
58+
}
59+
60+
&.open {
61+
& > header {
62+
.toggle-icon {
63+
transform: scaleY(-1);
64+
}
65+
}
66+
67+
& > div {
68+
display: block;
69+
}
70+
}
71+
72+
/* Indentation */
73+
// Level 1
74+
header {
75+
padding-left: @l1-indent;
76+
}
77+
78+
a {
79+
padding-left: @l2-indent;
80+
}
81+
82+
// Level 2
83+
section {
84+
header {
85+
padding-left: @l2-indent;
86+
}
87+
88+
a {
89+
padding-left: @l3-indent;
90+
}
91+
92+
// Level 3
93+
section {
94+
header {
95+
padding-left: @l3-indent;
96+
}
97+
98+
a {
99+
padding-left: @l4-indent;
100+
}
101+
}
102+
}
103+
}//section
104+
}
105+

‎source/components/navigation/index.html‎

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,14 @@
22
title: Navigation
33
assets:
44
- bootstrap.helix.css
5+
- helix-ui.css
6+
- helix-ui.js
57
---
6-
<div class="alert alert-info">
7-
<ul>
8-
<li>
9-
Avoid using <code>.container</code> within a Helix grid. It will cause a
10-
<code>.hxRow</code> to expand beyond what is expected.
11-
</li>
12-
<li>
13-
If you have strange layout issues, try wrapping in a <code>&lt;p&gt;</code>.
14-
</li>
15-
</ul>
16-
</div>
17-
188
<section>
19-
<header>
20-
<h2 id="global-nav">Global Navigation</h2>
21-
</header>
9+
<h2 id="global-nav">Global Navigation</h2>
2210
<p>
11+
(<em>a.k.a. "Eyebrow"</em>)
2312
Styles the <a href="http://getbootstrap.com/components/#navbar">Navbar Component</a> from Bootstrap.
24-
<ul>
25-
<li>Eyebrow:
26-
<ul>
27-
<li>CSS Class: <code>.navbar-eyebrow</code></li>
28-
<li>Rackspace Logo:
29-
<ul>
30-
<li>
31-
HTTP: (
32-
<a href="http://c1ee333499ed5f44e56a-fa12562cfe810d69bedcc36a0ac289ef.r55.cf1.rackcdn.com/img/rs-logo-white.svg" target="_blank">SVG</a> /
33-
<a href="http://c1ee333499ed5f44e56a-fa12562cfe810d69bedcc36a0ac289ef.r55.cf1.rackcdn.com/img/rs-logo-white.png" target="_blank">PNG</a>
34-
)
35-
</li>
36-
<li>
37-
HTTPS: (
38-
<a href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/img/rs-logo-white.svg" target="_blank">SVG</a> /
39-
<a href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/img/rs-logo-white.png" target="_blank">PNG</a>
40-
)
41-
</li>
42-
</ul>
43-
</li>
44-
</ul>
45-
</li>
46-
<li>Top Nav:
47-
<ul>
48-
<li>CSS Class: <code>.navbar-inverse</code></li>
49-
</ul>
50-
</li>
51-
</ul>
5213
</p>
5314

5415
<div class="demo">
@@ -96,16 +57,71 @@ <h2 id="global-nav">Global Navigation</h2>
9657
</ul>
9758
</div><!--/.nav-collapse -->
9859
</nav>
99-
<nav class="navbar navbar-inverse">
100-
<div id="topnav-collapse" class="navbar-collapse">
101-
<ul class="nav navbar-nav">
102-
<li class="active"><a href="#">Dashboard</a></li>
103-
<li><a href="#">Servers</a></li>
104-
<li><a href="#">Networking</a></li>
105-
<li><a href="#">Storage</a></li>
106-
<li><a href="#">Databases</a></li>
107-
</ul>
108-
</div><!--/.nav-collapse -->
60+
</div>
61+
</section>
62+
63+
<section>
64+
<h2 id="app-nav">Application Navigation</h2>
65+
<p>
66+
Custom HelixUI classes for styling a left-hand, application layer, navigation list.
67+
</p>
68+
69+
<div class="demo">
70+
<nav class="hx-app-nav">
71+
<a href="#">Link 1-1</a>
72+
<a href="#">Link 1-2</a>
73+
<a href="#">Link 1-3</a>
74+
<section class="open">
75+
<header>
76+
L1 Section
77+
<span class="toggle-icon fa fa-fw fa-angle-down"></span>
78+
</header>
79+
<div>
80+
<a href="#">Link 2-1</a>
81+
<a href="#">Link 2-2</a>
82+
<a href="#">Link 2-3</a>
83+
<section class="open">
84+
<header>
85+
L2 Section
86+
<span class="toggle-icon fa fa-fw fa-angle-down"></span>
87+
</header>
88+
<div>
89+
<a href="#">Link 3-1</a>
90+
<a href="#">Link 3-2</a>
91+
<a href="#">Link 3-3</a>
92+
</div>
93+
</section>
94+
</div>
95+
</section>
10996
</nav>
11097
</div>
98+
```html
99+
<nav class="hx-app-nav">
100+
<a href="#">Link 1-1</a>
101+
<a href="#">Link 1-2</a>
102+
<a href="#">Link 1-3</a>
103+
<section class="open">
104+
<header>
105+
L1 Section
106+
<span class="toggle-icon fa fa-fw fa-angle-down"></span>
107+
</header>
108+
<div>
109+
<a href="#">Link 2-1</a>
110+
<a href="#">Link 2-2</a>
111+
<a href="#">Link 2-3</a>
112+
<section class="open">
113+
<header>
114+
L2 Section
115+
<span class="toggle-icon fa fa-fw fa-angle-down"></span>
116+
</header>
117+
<div>
118+
<a href="#">Link 3-1</a>
119+
<a href="#">Link 3-2</a>
120+
<a href="#">Link 3-3</a>
121+
</div>
122+
</section>
123+
</div>
124+
</section>
125+
</nav>
126+
```
111127
</section>

‎source/guides/install/index.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ <h2 id="assets">Assets</h2>
1717
<a href="/helix-ui/styles/bootstrap.helix.css" target="_blank">bootstrap.helix.css</a>
1818
</td>
1919
<td>
20-
<a href="http://c1ee333499ed5f44e56a-fa12562cfe810d69bedcc36a0ac289ef.r55.cf1.rackcdn.com/css/bootstrap.helix.css">HTTP</a>
21-
/
2220
<a href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/css/bootstrap.helix.css">HTTPS</a>
2321
</td>
2422
</tr>
@@ -28,10 +26,17 @@ <h2 id="assets">Assets</h2>
2826
<a href="/helix-ui/styles/helix-ui.css" target="_blank">helix-ui.css</a>
2927
</td>
3028
<td>
31-
<a href="http://c1ee333499ed5f44e56a-fa12562cfe810d69bedcc36a0ac289ef.r55.cf1.rackcdn.com/css/helix-ui.css">HTTP</a>
32-
/
3329
<a href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/css/helix-ui.css">HTTPS</a>
3430
</td>
3531
</tr>
32+
<tr>
33+
<th>Rackspace Logo</th>
34+
<td>N/A</td>
35+
<td>
36+
<a href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/img/rs-logo-white.svg" target="_blank">SVG</a>
37+
/
38+
<a href="https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com/img/rs-logo-white.png" target="_blank">PNG</a>
39+
</td>
40+
</tr>
3641
</tbody>
3742
</table>

‎source/scripts/helix-ui.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,14 @@
33
/*
44
* Entrypoint to build HelixUI web components
55
*/
6+
7+
/* Left Nav Toggle Behavior */
8+
(function () {
9+
var _headers = document.querySelectorAll('.hx-app-nav header');
10+
11+
_headers.forEach(function (header) {
12+
header.addEventListener('click', function (evt) {
13+
evt.target.parentElement.classList.toggle('open');
14+
});
15+
});
16+
})();

‎source/styles/_less/imports.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/* ===== CSS Imports ===== */
22
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic");
33
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic");
4+
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

‎source/styles/explorer.less‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,20 @@ body {
133133
}
134134

135135
// Code Highlighting
136-
.highlight {
136+
.demo + .highlight {
137137
margin-top: 1rem;
138+
}
139+
140+
.highlight {
141+
border: 1px solid rgba(0, 0, 0, 0.2);
142+
box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, 0.2);
143+
overflow-x: auto;
144+
overflow-y: hidden;
138145

139146
pre {
140-
border-radius: 0;
141-
box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, 0.2);
142147
background-color: rgba(0, 0, 0, 0.05);
148+
border-radius: 0;
149+
margin: 0;
143150
}
144151

145152
& > table {

‎source/styles/helix-ui.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,5 @@
1414
// Core CSS
1515
@import 'scaffold';
1616
@import 'grid/_grid';
17+
18+
@import 'navigation/_navigation';

‎themes/helix-ui/layout/_partials/after_footer.ejs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
2+
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
3+
crossorigin="anonymous"></script>
14

2-
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
3-
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
4-
crossorigin="anonymous"></script>
5-
6-
<%- js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js') %>
7-
<%- js('scripts/explorer.js') %>
5+
<%- js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js') %>
6+
<%- js('scripts/helix-ui.js') %>
7+
<%- js('scripts/explorer.js') %>

0 commit comments

Comments
 (0)