Skip to content

Instantly share code, notes, and snippets.

@jayfallon
Created November 27, 2010 18:15
Show Gist options
  • Select an option

  • Save jayfallon/718133 to your computer and use it in GitHub Desktop.

Select an option

Save jayfallon/718133 to your computer and use it in GitHub Desktop.
Basic navbar with full-size buttons
//scss mixins
//mixins
@mixin globalWidth{
margin: 0 auto;
width:720px;
}
@mixin logoSize{
width: 184px;
height: 50px;
}
@mixin fourSmallRoundedCorners{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
//scss
header{
background-color:#4c4c4c;
background-image: -moz-linear-gradient(100% 100% 90deg, #282828, #4c4c4c);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4c4c), to(#282828));
border-top:1px solid #282828;
border-bottom:1px solid #282828;
overflow:auto;
.headerWrap{
@include globalWidth;
overflow:auto;
h1{
background:url(/images/logo.png) no-repeat;
margin-top:0px;
float:left;
@include logoSize;
a{
position:absolute;
@include logoSize;
span{
display:none;
}
}
}
ul.nav{
border-right:1px solid #4c4c4c;
float:right;
li{
height:50px;
font-size:13px;
text-transform:uppercase;
float:left;
a{
padding:17px 18px;
display:block;
border-left:1px solid #4c4c4c;
border-right:1px solid #282828;
color:#bababa;
text-decoration:none;
&:hover{
background-color:#282828;
color:#fff;
}
}
}
li.search{
border-right:1px solid #282828;
float:left;
input.text{
background-color:#777;
margin:11px 18px 0 0;
width:175px;
color:#fefefe;
@include standardTextInput;
@include fourSmallRoundedCorners;
}
}
}
}
}
//haml
header
.headerWrap
h1
a(href='/', title='Example.com')
span Example.com
ul.nav
li.search
input(type='text', id='searchtext', class='text', value='Search')
li
a(href='/', title='Settings') Settings
li
a(href='/', title='Account') Account
li
a(href='/', title='Sign Out') Sign Out
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment