designkit-header
v1.0.0
Published
Sass module for the rightscale nav bar
Downloads
10
Readme
Designkit Header
Install
npm install designkit-header --save
Usage
<header class="header-default header-skin sans">
<div class="header-brand"><a href="/"><img src="https://cdn.rawgit.com/rightscale/design-kit/master/media/logos/gov-logo.svg" alt="RightScale Governance"/></a></div>
<div class="header-nav">
<nav><a href="/">Mark one</a><a href="/">Mark two</a><a href="/">Mark three</a></nav>
</div>
</header>
The CSS
.header-default {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
background-color: #0069CC;
}
.header-default.header-skin {
background-color: #076CCA;
background-image: linear-gradient(#076CCA, #065BAC);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.header-default .header-brand {
float: left;
padding: 0 15px;
overflow: hidden;
color: #fff;
}
.header-default .header-brand a {
display: block;
float: left;
height: 100%;
padding: 12px 0 9px;
}
.header-default .header-brand img {
height: 100%;
}
.header-default .header-nav {
float: right;
font-size: 13px;
}
.header-default .header-nav a {
display: block;
float: left;
height: 100%;
padding: .8rem .8rem .8rem;
font-weight: 700;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all .1s;
}
.header-default .header-nav a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
Author
Jason Melgoza
License
MIT