m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 09:56:51 +01:00
Code

navigation item fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-03-10 21:39:32 +01:00
parent e24ee87f16
commit 89c53dc374
1 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
_src/assets/less/navigation.less
View File

@ -29,6 +29,7 @@
} }
.search-btn { right: 50px } .search-btn { right: 50px }
// //
// Main Navigation // Main Navigation
// //
@ -41,53 +42,57 @@
} }
li { display: inline-block; } li { display: inline-block; }
}
.nav-popover {
padding: @line-height-computed*1.5 0; .nav-popover {
width: 100%; padding: @line-height-computed*1.5 0;
background: @body-bg; width: 100%;
.clearfix; background: @body-bg;
.clearfix;
.nav-link {
width: 50%;
@media @breakpoint2 {
width: 33.3%
}
float: left;
text-align: center;
padding: 1em;
.h6;
color: @link-color;
line-height: @line-height-computed;
text-transform: uppercase;
font-size: .8em;
// the icons
&:before {
display: block;
width: 100%;
text-align: center;
font-size: 32px;
height: 32px;
color: fade(@text-color-dimmed, 70%);
.transition;
}
&:hover,
&:hover:before {
color: @link-color;
border-bottom-color: @link-color
}
}
}
} }
.nav-link { .nav-link {
.h6;
display: block; display: block;
padding: .5em 1em; padding: .5em 1em;
width: 50%;
@media @breakpoint2 { width: 33.3% }
&:hover { float: left;
background: rgba(255,255,255,.5); text-align: center;
padding: 1em;
color: @link-color;
line-height: @line-height-computed;
text-transform: uppercase;
font-size: .8em;
// the icons
&:before {
display: block;
width: 100%;
text-align: center;
font-size: 32px;
height: 32px;
color: fade(@text-color-dimmed, 70%);
.transition;
}
&:hover,
&:hover:before {
color: @link-color;
border-bottom-color: @link-color
}
&:hover { background: rgba(255,255,255,.5); }
&:active {
background: @link-color;
top: 0;
}
&:active:before {
color: #fff;
.transition(none)
} }
} }