https://github.com/rightscale-design/designkit-header

Sass module for the RightScale nav bar
https://github.com/rightscale-design/designkit-header

Last synced: 10 days ago
JSON representation

Sass module for the RightScale nav bar

• Host: GitHub
• URL: https://github.com/rightscale-design/designkit-header
• Owner: rightscale-design
• License: mit
• Created: 2017-08-04T18:47:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-04T18:52:48.000Z (over 7 years ago)
• Last Synced: 2024-11-06T01:05:08.535Z (15 days ago)
• Language: CSS
• Size: 29.3 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Designkit Header

## Install

```bash

npm install designkit-header --save

```

## Usage

```html

  


  


    Mark oneMark twoMark three

  


```

## The CSS

```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