project nav list
parent
6178327f90
commit
c4afd6d6ac
|
@ -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';
|
||||
|
|
|
@ -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
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue