Skip to content

Instantly share code, notes, and snippets.

@jklm313
Created December 8, 2012 22:06
Show Gist options
  • Select an option

  • Save jklm313/4242186 to your computer and use it in GitHub Desktop.

Select an option

Save jklm313/4242186 to your computer and use it in GitHub Desktop.
Untitled
*, *:before, *:after {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
a {
text-decoration: none;
}
body {
background-color: rgb(250,244,241);
font-size: 16px;
}
.level-2, input#search-docs, .doc-sidenav-head,
.level-3 a {
display: block;
}
.sidebar {
width: 220px;
height: 100%;
background: url('https://dl.dropbox.com/u/32750720/works/emberjs/sidebar-bg.jpg') top left repeat-x; /* <IE 8 */
background: -moz-linear-gradient(top, rgba(244,236,233,1) 85%, rgba(244,236,233,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(85%,rgba(244,236,233,1)), color-stop(100%,rgba(244,236,233,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(244,236,233,1) 85%,rgba(244,236,233,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(244,236,233,1) 85%,rgba(244,236,233,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(244,236,233,1) 85%,rgba(244,236,233,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(244,236,233,1) 85%,rgba(244,236,233,0) 100%); /* W3C */
}
.sidebar:before, .sidebar:after {
content: '';
position: absolute;
top: 0;
z-index: -1;
width: 1px;
height: 100%;
background: url('https://dl.dropbox.com/u/32750720/works/emberjs/sidebar-border.jpg') top left repeat-x; /* <IE 8 */
background: -moz-linear-gradient(top, rgba(213,204,200,1) 85%, rgba(213,204,200,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(85%,rgba(213,204,200,1)), color-stop(100%,rgba(213,204,200,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(213,204,200,1) 85%,rgba(213,204,200,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(213,204,200,1) 85%,rgba(213,204,200,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(213,204,200,1) 85%,rgba(213,204,200,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(213,204,200,1) 85%,rgba(213,204,200,0) 100%); /* W3C */
}
.sidebar:before {
right: -1px;
}
.sidebar:after {
left: -1px;
}
.sidebar a {
transition: .6s;
}
.sidebar ul {
list-style: none;
}
.level-2 {
min-height: 40px;
border: 1px solid #d5ccc8;
border-left: 0;
border-right: 0;
}
.level-2 + .level-2 {
border-top: 0;
}
input#search-docs {
background: url('https://dl.dropbox.com/u/32750720/works/emberjs/search-ico.jpg') left center no-repeat white;
font-style: italic;
color: #423432;
line-height: 40px;
width: 100%;
*width: 178px;
height: 40px;
padding-left: 42px;
border: 0;
}
input#search-docs:focus {
font-style: normal;
}
.doc-sidenav-head {
font-family: 'mavenprobold', helvetica, arial, sans-serif;
font-size: .788em;
text-transform: uppercase;
color: #443331;
line-height: 40px;
height: 40px;
padding-left: 21px;
}
.doc-sidenav-head:hover,
.doc-sidenav-head:hover:not(.doc-sidenav-head:active) {
border-top: 1px solid rgba(255,255,255,.4);
background-color: #fce9e2;
line-height: 39px; /* because border-top causes a 1px displacement */
}
.doc-sidenav-head:active {
background-color: #eeded9;
background: url('https://dl.dropbox.com/u/32750720/works/emberjs/selected-bg.jpg') top left repeat-x; /* <IE 8 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 2%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(2%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 2%); /* W3C */
}
.doc-sidenav-head:hover, .doc-sidenav-head:active {
-moz-box-shadow: 0 0 0 1px #ddc6bb;
-webkit-box-shadow: 0 0 0 1px #ddc6bb;
-o-box-shadow: 0 0 0 1px #ddc6bb;
-ms-box-shadow: 0 0 0 1px #ddc6bb;
box-shadow: 0 0 0 1px #ddc6bb;
}
.doc-sidenav-head.selected {
background: url('https://dl.dropbox.com/u/32750720/works/emberjs/selected-bg.jpg') top left repeat-x rgb(246,120,98); /* <IE 8 */
background: -moz-linear-gradient(top, rgba(246,120,98,1) 0%, rgba(231,98,75,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,120,98,1)), color-stop(100%,rgba(231,98,75,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,120,98,1) 0%,rgba(231,98,75,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,120,98,1) 0%,rgba(231,98,75,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,120,98,1) 0%,rgba(231,98,75,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,120,98,1) 0%,rgba(231,98,75,1) 100%); /* W3C */
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px #b23e2a;
color: white;
}
.level-3 a {
background-color: #f9e7e4;
font-family: 'helvetica-neue', helvetica, arial, sans-serif;
font-weight: bold;
color: #d84a32;
text-transform: uppercase;
font-size: .71em;
padding: 12px 0 0 21px;
}
.level-3 + .level-2 {
margin-top: 12px;
}
.level-3 + .level-2:before {
content: '';
background: #f9e7e4;
height: 12px;
width: 100%;
position: absolute;
top: -13px;
left: 0;
}
<div class="sidebar">
<ul>
<li class="level-2">
<input type="text" id="search-docs" name="search-docs" placeholder="search ember docs..." />
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Introduction</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Getting Started</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Ember Object Model</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Creating a Namespace</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head selected">Intro to Handlebars</a>
</li>
<li class="level-3">
<a href="">getting started</a>
</li>
<li class="level-3">
<a href="">the ember object model</a>
</li>
<li class="level-3">
<a href="">creating a namespace</a>
</li>
<li class="level-3">
<a href="">building a view heirarchy</a>
</li>
<li class="level-3">
<a href="">writing custom helpers</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Understanding Views</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Views In-depth</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">The Ember Enumerable API</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Ember MVC</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Ember App Structure</a>
</li>
<li class="level-2">
<a href="" class="doc-sidenav-head">Asynchronous Behaviour</a>
</li>
</ul>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment