project nav list

stable
Juanfran 2014-06-24 15:53:40 +02:00
parent 6178327f90
commit c4afd6d6ac
3 changed files with 63 additions and 2 deletions

View File

@ -16,7 +16,7 @@ block content
script.
setTimeout(function () {
document.body.className = 'open-project-nav';
}, 2000);
}, 1000);
setTimeout(function () {
document.body.className = 'closed-project-nav';

View File

@ -4,3 +4,20 @@ nav.project-nav
fieldset
input(type="text" placeholder="Search in...")
a.icon.icon-search
ul.projects-list
li
a(href="") Decathlon
span.icon.icon-arrow-right
li
a.active(href="") Yump
span.icon.icon-arrow-right
li
a(href="") Taiga
span.icon.icon-arrow-right
li
a(href="") Wine and people
span.icon.icon-arrow-right

View File

@ -1,14 +1,58 @@
.project-nav {
@include transform(translate3d(-300px, 0, 0));
background-color: $blackish;
background-color: #232323;
height: 100%;
left: 0;
overflow: hidden;
padding: 2rem 1rem;
position: fixed;
top: 0;
width: 300px;
z-index: 99;
h1 {
color: $white;
margin-bottom: 2rem;
text-align: center;
}
input {
background-color: $gray;
color: $whitish;
}
.icon-search {
position: absolute;
right: 10px;
top: 6px;
}
ul {
margin-top: 1rem;
}
}
.projects-list {
a {
@extend %large;
color: $whitish;
display: block;
font-family: 'ostrichSans';
padding: 1rem;
text-transform: uppercase;
width: 100%;
&.active,
&:hover {
@include transition (background-color .3s linear);
background-color: $gray;
.icon {
@include transition (opacity .3s linear);
opacity: 1;
}
}
}
.icon {
color: $whitish;
float: right;
opacity: 0;
}
li {
border-bottom: 2px solid $gray;
}
}