taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Dropdown menus

stable
Xavier Julián 2015-04-16 15:32:34 +02:00 committed by Juanfran
parent f4998a3c22
commit 8442cb1d0b
4 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/partials/includes/modules/navigation-bar/navbar.jade
View File

@ -10,11 +10,13 @@ nav.navbar
div.top-nav-dropdown
a(href="", title="Projects")
include ../../../../svg/projects.svg
div.project-list
div.dropdown-project-list
ul
- for (var x = 0; x < 5; x++)
- for (var x = 0; x < 9; x++)
li
a(href="#", title="{{ project.title }}") Project 1
a.see-more-projects-btn.button-gray(href="#", title="See more projects") See more
a.create-project-btn.button-green(href="#", title="Create project") Create project
a(href="#", title="Organizations")
include ../../../../svg/organizations.svg
a.user-avatar(href="#", title="{{ user.fullname }} profile")

5
app/styles/dependencies/colors.scss
View File

@ -30,3 +30,8 @@ $yellow-pear: #bbe831;
$menu: #232323;
$star-fill: #edd400;
// Top menu values
$top-icon-color: #11241f;
$dropdown-width: 500px;
$dropdown-color: rgba(darken($grayer, 20%), 1);

14
app/styles/dependencies/mixins.scss
View File

@ -76,7 +76,7 @@
}
}
@mixin arrow($arrow-direction, $background-color, $border-color, $border-width, $border-size) {
@mixin arrow($arrow-direction, $border-color, $background-color, $border-width, $border-size) {
&:after,
&:before {
#{$arrow-direction}: 100%;
@ -89,15 +89,15 @@
pointer-events: none;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-color: rgba($background-color, 0);
border-#{$arrow-direction}-color: $background-color;
border-width: $border-size;
margin-left: -$border-size;
border-width: #{$border-size}px;
margin-left: -#{$border-size}px;
}
&:before {
border-color: rgba(0, 0, 0, 0);
border-color: rgba($border-color, 0);
border-#{$arrow-direction}-color: $border-color;
border-width: calc($border-size + $border-width);
margin-left: calc(-$border-size + $border-width);
border-width: calc(#{$border-size}px + #{$border-width}px);
margin-left: calc(-#{$border-size}px + #{$border-width}px);
}
}

55
app/styles/modules/common/navbar.scss
View File

@ -1,5 +1,3 @@
$top-icon-color: #11241f;
.navbar {
background: rgba($black, .5);
display: flex;
@ -25,7 +23,7 @@ $top-icon-color: #11241f;
display: flex;
}
.nav-left {
a {
>a {
padding: .5rem 1.5rem;
&.logo {
background: rgba($black, .2);
@ -44,6 +42,11 @@ $top-icon-color: #11241f;
a {
padding: .5rem 2rem;
}
.dropdown-project-list {
a {
padding: .8rem .5rem;
}
}
}
a {
color: $white;
@ -55,9 +58,7 @@ $top-icon-color: #11241f;
svg path {
fill: $white;
}
+.project-list {
display: block;
}
}
&.user-avatar {
padding: 0;
@ -83,22 +84,52 @@ $top-icon-color: #11241f;
}
.top-nav-dropdown {
position: relative;
&:hover {
.dropdown-project-list {
display: block;
}
}
}
%dropdown {
border-radius: 2px;
display: none;
left: 0;
left: calc(50% - #{$dropdown-width}/2);
min-width: $dropdown-width;
position: absolute;
top: 2rem;
width: 20vh;
top: 2.5rem;
z-index: 99;
}
.project-list {
}
.dropdown-project-list {
@extend %dropdown;
background: rgba($blackish, .9);
background: $blackish;
border: 1px solid $black;
padding: .3rem;
ul {
@include arrow('bottom', rgba($blackish, .9), $black, 2px, 15px);
@include arrow('bottom', $blackish, $blackish, 1, 12);
margin: 0;
margin-bottom: .5rem;
padding: 0;
}
a {
color: $gray-light;
display: block;
&:hover {
background: rgba($white, .1);
color: $fresh-taiga;
}
&.see-more-projects-btn,
&.create-project-btn {
color: $white;
padding: .5rem;
text-align: center;
&:hover {
color: $white;
}
}
&.see-more-projects-btn {
margin-bottom: .3rem;
}
}
}