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 div.top-nav-dropdown
a(href="", title="Projects") a(href="", title="Projects")
include ../../../../svg/projects.svg include ../../../../svg/projects.svg
div.project-list div.dropdown-project-list
ul ul
- for (var x = 0; x < 5; x++) - for (var x = 0; x < 9; x++)
li li
a(href="#", title="{{ project.title }}") Project 1 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") a(href="#", title="Organizations")
include ../../../../svg/organizations.svg include ../../../../svg/organizations.svg
a.user-avatar(href="#", title="{{ user.fullname }} profile") 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; $menu: #232323;
$star-fill: #edd400; $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, &:after,
&:before { &:before {
#{$arrow-direction}: 100%; #{$arrow-direction}: 100%;
@ -89,15 +89,15 @@
pointer-events: none; pointer-events: none;
} }
&:after { &:after {
border-color: rgba(136, 183, 213, 0); border-color: rgba($background-color, 0);
border-#{$arrow-direction}-color: $background-color; border-#{$arrow-direction}-color: $background-color;
border-width: $border-size; border-width: #{$border-size}px;
margin-left: -$border-size; margin-left: -#{$border-size}px;
} }
&:before { &:before {
border-color: rgba(0, 0, 0, 0); border-color: rgba($border-color, 0);
border-#{$arrow-direction}-color: $border-color; border-#{$arrow-direction}-color: $border-color;
border-width: calc($border-size + $border-width); border-width: calc(#{$border-size}px + #{$border-width}px);
margin-left: calc(-$border-size + $border-width); margin-left: calc(-#{$border-size}px + #{$border-width}px);
} }
} }

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

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