primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-20 13:17:29 +03:00
Code Issues Projects Releases Wiki Activity

Add support for all container classes; add support for right + actions

Browse Source
This commit is contained in:
Amanda Pinsker 2017-11-02 17:35:39 -07:00
parent 936a8fe83e
commit f85d54cb14
2 changed files with 90 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/primer-navigation/lib/underline-nav.scss
View File

@ -57,6 +57,10 @@
margin-right: 0;
margin-left: $spacer-3;
}
.UnderlineNav-actions {
flex: 1 1 auto;
}
}
.UnderlineNav-actions {
@ -66,7 +70,10 @@
.UnderlineNav--full {
display: block;
.container-lg {
.container-lg,
.container-md,
.container-xl
{
display: flex;
justify-content: space-between;
}

82
modules/primer-navigation/stories.js
View File

@ -207,3 +207,85 @@ storiesOf('Navigation', module)
</nav>
</div>
))
.add('UnderlineNav--right with action', () => (
<nav className="UnderlineNav UnderlineNav--right" data-pjax role="navigation">
<div className="UnderlineNav-actions">
<a className="btn">Link</a>
</div>
<div className="UnderlineNav-items">
<a href="#"
className="UnderlineNav-item selected"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
<a href="#"
className="UnderlineNav-item"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
<a href="#"
className="UnderlineNav-item"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
<a href="#"
className="UnderlineNav-item"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
</div>
</nav>
))
.add('UnderlineNav--right with action and container', () => (
<nav className="UnderlineNav UnderlineNav--right UnderlineNav--full" data-pjax role="navigation">
<div className="container-lg">
<div className="UnderlineNav-actions">
<a className="btn">Link</a>
</div>
<div className="UnderlineNav-items">
<a href="#"
className="UnderlineNav-item selected"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
<a href="#"
className="UnderlineNav-item"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
<a href="#"
className="UnderlineNav-item"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
<a href="#"
className="UnderlineNav-item"
role="tab"
title="Overview">
<svg className="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
Overview
</a>
</div>
</div>
</nav>
))