Skip to content

Commit

Permalink
added sidenav css
Browse files Browse the repository at this point in the history
  • Loading branch information
jbenet committed Dec 8, 2012
1 parent 03563ed commit 260e9fc
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 0 deletions.
60 changes: 60 additions & 0 deletions static/sidenav.css
@@ -0,0 +1,60 @@
/* based on bootstrap's website */
.sidenav {
width: 228px;
margin: 30px 0 0;
padding: 0;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

.sidenav > li > a {
display: block;
width: 190px \9;
margin: 0 0 -1px;
padding: 8px 14px;
border: 1px solid #e5e5e5;
}
.sidenav > li:first-child > a {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.sidenav > li:last-child > a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.sidenav > .active > a {
position: relative;
z-index: 2;
padding: 9px 15px;
border: 0;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}

/* Chevrons */
.sidenav .icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
.sidenav > li > a:hover {
background-color: #f5f5f5;
}
.sidenav a:hover .icon-chevron-right {
opacity: .5;
}
.sidenav .active .icon-chevron-right,
.sidenav .active a:hover .icon-chevron-right {
background-image: url(/lib/bootstrap/glyphicons-halflings-white.png);
opacity: 1;
}
74 changes: 74 additions & 0 deletions static/spec.html
@@ -0,0 +1,74 @@
<html>
<head>

<!-- lib -->
<% _.each(lib, function(file) { %>
<script src="<%= file %>"></script>
<% }); %>

<link rel="stylesheet" href="/<%= taskPath %>/lib/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="/<%= taskPath %>/static/sidenav.css" />

<link rel="stylesheet" href="/<%= taskPath %>/lib/jasmine/jasmine.css" />
<script src="/<%= taskPath %>/lib/jasmine/jasmine.js"></script>
<script src="/<%= taskPath %>/lib/jasmine/jasmine-html.js"></script>

<!-- src -->
<% _.each(src, function(file) { %>
<script src="/<%= file %>"></script>
<% }); %>

<!-- specs to run -->
<% _.each(run, function(file) { %>
<script src="/<%= file %>"></script>
<% }); %>

<script type="text/javascript">
window.onload = function() {
var rep = new jasmine.HtmlReporter();
var env = jasmine.getEnv();
env.addReporter(rep);
env.specFilter = function(spec) { return rep.specFilter(spec); };
env.execute();
};
</script>

<style>

iframe {
border: 0px;
width: 960px;
height: 100%;
overflow: hidden;
border: none;
}

.affix {
position: fixed;
left: 10px;
}

body {
margin-left: 250px;
}

</style>
</head>
<body>

<div class="affix">
<% _.each(['special', 'specs'], function(group) { %>
<ul class="nav nav-list sidenav">
<% _.each(eval(group), function(name) { %>
<li <%= (name == title ? "class='active'" : '') %>>
<a href="/<%= group %>/<%= name %>">
<i class="icon-chevron-right"></i> <%= name %>
</a>
</li>
<% }); %>
</ul>
<% }); %>
</div>

</body>
</html>

0 comments on commit 260e9fc

Please sign in to comment.