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

Top Navigation Bar Advanced styles

stable
Xavier Julián 2015-04-15 16:16:06 +02:00 committed by Juanfran
parent e958137f56
commit 49b994b531
3 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/images/menu-vert.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 10 KiB

14
app/styles/modules/common/nav.scss
View File

@ -5,9 +5,8 @@ $label-arrow-wh: 12px;
background-position: center center; background-position: center center;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
padding: 1rem .3rem; padding: 1rem 0;
text-transform: uppercase; text-transform: uppercase;
width: 50px;
} }
.main-nav { .main-nav {
@ -15,17 +14,15 @@ $label-arrow-wh: 12px;
padding: 0; padding: 0;
position: relative; position: relative;
text-align: center; text-align: center;
li {
margin-bottom: .75rem;
}
a { a {
color: $white; color: $white;
display: block; display: block;
padding: .75rem .8rem;
position: relative; position: relative;
text-align: center;
} }
a:hover { a:hover {
color: $fresh-taiga; //color: $fresh-taiga;
background: rgba($black, .2);
transition: color .3s linear; transition: color .3s linear;
.helper { .helper {
@extend %small; @extend %small;
@ -33,7 +30,7 @@ $label-arrow-wh: 12px;
background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 100%);
color: $white; color: $white;
display: block; display: block;
left: 45px; left: 50px;
opacity: 1; opacity: 1;
padding: .4rem 1rem; padding: .4rem 1rem;
position: absolute; position: absolute;
@ -67,6 +64,7 @@ $label-arrow-wh: 12px;
@extend %large; @extend %large;
} }
.active { .active {
background: rgba($black, .2);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear; transition: color .3s linear;
} }

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

@ -1,12 +1,14 @@
$top-icon-color: #11241f;
.navbar { .navbar {
background: rgba($black, .2); background: rgba($black, .5);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&:after { &:after {
background: url('../images/menu-vert.png') center center repeat; background: url('../images/menu-vert.png') repeat top left;
background-size: cover; background-size: 100%;
bottom: 0; bottom: 0;
content: ''; content: '';
height: 100%; height: 100%;
@ -23,33 +25,47 @@
align-items: center; align-items: center;
display: flex; display: flex;
} }
.nav-left {
a { a {
color: $gray-light; padding: .5rem 1.5rem;
display: inline-block; &.logo {
padding: .5rem 2rem; background: rgba($black, .2);
&:hover { padding: .4rem .75rem;
background: rgba($gray, .3);
color: $fresh-taiga;
svg path {
fill: $gray-light;
} }
}
&.user-avatar {
padding: 0;
padding-left: 2rem;
}
}
.logo {
padding: 0 2rem;
svg { svg {
height: 2rem; height: 1.6rem;
max-width: 2rem; max-width: 2rem;
} }
path { path {
fill: $white; fill: $white;
} }
} }
}
.nav-right {
a {
padding: .5rem 2rem;
}
}
a {
color: $white;
display: inline-block;
transition: all .2s linear;
&:hover {
background: rgba($black, .2);
color: $fresh-taiga;
svg path {
fill: $white;
}
}
&.user-avatar {
padding: 0;
padding-left: 2rem;
span {
padding-right: 1rem;
}
}
}
img { img {
height: 2.5rem; height: 2.5rem;
padding-left: .3rem; padding-left: .3rem;
@ -59,7 +75,7 @@
height: 1.2rem; height: 1.2rem;
max-width: 1.2rem; max-width: 1.2rem;
path { path {
fill: $gray; fill: $dark-taiga;
transition: all .2s; transition: all .2s;
} }
} }