From 0b4cf71c6737cc135c1a58004b5474c841972f75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 15 Apr 2015 12:41:20 +0200 Subject: [PATCH] Vertical Navigation bar styles --- app/images/menu-vert.png | Bin 0 -> 6729 bytes .../modules/navigation-bar/navbar.jade | 36 ++++------ app/styles/modules/common/navbar.scss | 64 +++++++++++++++++- app/svg/dashboard.svg | 5 ++ app/svg/organizations.svg | 5 ++ app/svg/projects.svg | 7 ++ 6 files changed, 94 insertions(+), 23 deletions(-) create mode 100644 app/images/menu-vert.png create mode 100644 app/svg/dashboard.svg create mode 100644 app/svg/organizations.svg create mode 100644 app/svg/projects.svg diff --git a/app/images/menu-vert.png b/app/images/menu-vert.png new file mode 100644 index 0000000000000000000000000000000000000000..e7d8425dcacdd0d439c720171cc2fda15350b982 GIT binary patch literal 6729 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 literal 0 HcmV?d00001 diff --git a/app/partials/includes/modules/navigation-bar/navbar.jade b/app/partials/includes/modules/navigation-bar/navbar.jade index 2a38732b..fa10a591 100644 --- a/app/partials/includes/modules/navigation-bar/navbar.jade +++ b/app/partials/includes/modules/navigation-bar/navbar.jade @@ -1,22 +1,16 @@ nav.navbar - div.nav-left - img.logo(src="svg/logo-nav.svg", alt="Taiga") - a(href="#", title="Discover trending projects") Discover - a(href="#", title="Taiga Support Page") Help - div.nav-right - a(href="", title="Dashboard") Dashboard - a(href="", title="Projects") Projects - //ul.dropdown.projects-list - // li - // a(href="#", title="{{ project-name }}") Project Name - // li - // a(href="#", title="{{ project-name }}") Project Name - // li - // a(href="#", title="{{ project-name }}") Project Name - // li - // a(href="#", title="{{ project-name }}") Project Name - - a(href="#", title="Organizations") Organizations - a(href="#", title="{{ user.fullname }} profile") - span Sebastián Sanchís - img(src="#", alt="{{ user.fullname }} picture") + 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 + 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") diff --git a/app/styles/modules/common/navbar.scss b/app/styles/modules/common/navbar.scss index 64672e1c..add48ee0 100644 --- a/app/styles/modules/common/navbar.scss +++ b/app/styles/modules/common/navbar.scss @@ -1,6 +1,66 @@ .navbar { - background: $black; + background: rgba($black, .2); + display: flex; + justify-content: space-between; + overflow: hidden; + position: relative; + &:after { + background: url('../images/menu-vert.png') center center repeat; + background-size: cover; + bottom: 0; + content: ''; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 200%; + z-index: -1; + } + .nav-left, + .nav-right { + align-content: center; + align-items: center; + display: flex; + } + a { + color: $gray-light; + display: inline-block; + padding: .5rem .75rem; + &:hover { + background: rgba($gray, .3); + color: $fresh-taiga; + svg path { + fill: $gray-light; + } + } + &.user-avatar { + padding: 0; + padding-left: .75rem; + } + + } .logo { - max-width: 35px; + padding: 0 2rem; + svg { + height: 2rem; + max-width: 2rem; + } + path { + fill: $white; + } + } + img { + height: 2.5rem; + padding-left: .3rem; + vertical-align: middle; + } + svg { + height: 1.2rem; + max-width: 1.2rem; + path { + fill: $gray; + transition: all .2s; + } } } diff --git a/app/svg/dashboard.svg b/app/svg/dashboard.svg new file mode 100644 index 00000000..1b2061a2 --- /dev/null +++ b/app/svg/dashboard.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/svg/organizations.svg b/app/svg/organizations.svg new file mode 100644 index 00000000..4dca4867 --- /dev/null +++ b/app/svg/organizations.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/svg/projects.svg b/app/svg/projects.svg new file mode 100644 index 00000000..e8c66014 --- /dev/null +++ b/app/svg/projects.svg @@ -0,0 +1,7 @@ + + + + + + +