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

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

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