First dropdown draft

stable
Xavier Julián 2015-04-15 16:38:32 +02:00 committed by Juanfran
parent c521974f6c
commit 55120a6e44
2 changed files with 39 additions and 15 deletions

View File

@ -1,16 +1,21 @@
nav.navbar
div.nav-left
a.logo(href="#", title="Dashboard")
include ../../../../svg/logo.svg
a(href="#", title="Discover trending projects") Discover
a(href="#", title="Taiga Support Page") Help
div.nav-right
a(href="", title="Dashboard")
include ../../../../svg/dashboard.svg
div.nav-left
a.logo(href="#", title="Dashboard")
include ../../../../svg/logo.svg
a(href="#", title="Discover trending projects") Discover
a(href="#", title="Taiga Support Page") Help
div.nav-right
a(href="", title="Dashboard")
include ../../../../svg/dashboard.svg
div.top-nav-dropdown
a(href="", title="Projects")
include ../../../../svg/projects.svg
a(href="#", title="Organizations")
include ../../../../svg/organizations.svg
a.user-avatar(href="#", title="{{ user.fullname }} profile")
span Sebastián Sanchís
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")
include ../../../../svg/projects.svg
ul.project-list
- for (var x = 0; x < 5; x++)
li
a(href="#", title="{{ project.title }}") Project 1
a(href="#", title="Organizations")
include ../../../../svg/organizations.svg
a.user-avatar(href="#", title="{{ user.fullname }} profile")
span Sebastián Sanchís
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")

View File

@ -4,7 +4,6 @@ $top-icon-color: #11241f;
background: rgba($black, .5);
display: flex;
justify-content: space-between;
overflow: hidden;
position: relative;
&:after {
background: url('../images/menu-vert.png') repeat top left;
@ -56,6 +55,9 @@ $top-icon-color: #11241f;
svg path {
fill: $white;
}
+.dropdown {
display: block;
}
}
&.user-avatar {
padding: 0;
@ -79,4 +81,21 @@ $top-icon-color: #11241f;
transition: all .2s;
}
}
.top-nav-dropdown {
position: relative;
}
%dropdown {
background: rgba($black, .85);
border: 1px solid $grayer;
border-radius: 2px;
display: none;
left: 0;
position: absolute;
top: 2rem;
width: 20vh;
z-index: 99;
}
.project-list {
@extend %dropdown;
}
}