-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor underline nav #377
Merged
Merged
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
ce1a6f8
Add underline nav styles and import file
ampinsk 67fe320
Add octicon styles to prototype
ampinsk 346992a
Add prototyping cases
ampinsk ca5a104
Add docs
ampinsk 936a8fe
Move underline nav section in docs
ampinsk ad5fa52
Merge branch 'release-10.0.0' into underline-nav
jonrohan 36565dc
Linting fixes
jonrohan f6dde1e
Using storiesfrommarkdown
jonrohan 43b8b8e
Publish alpha release any time we're not on a release branch or master
jonrohan f85d54c
Add support for all container classes; add support for right + actions
ampinsk 84efc60
Merge branch 'underline-nav' of https://github.com/primer/primer-css …
ampinsk 573b961
Fix spacing
ampinsk 921fef6
Update docs
ampinsk 80f0616
Update naming and docs
ampinsk 751b999
Remove mr-1 from octicon component style
ampinsk 8336983
Update docs
ampinsk d7d54d5
Merge branch 'release-10.0.0' into underline-nav
jonrohan f270f97
Update docs
ampinsk 0ffc472
Merge branch 'underline-nav' of https://github.com/primer/primer-css …
ampinsk File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
.UnderlineNav { | ||
display: flex; | ||
justify-content: space-between; | ||
border-bottom: 1px solid $gray-200; | ||
} | ||
|
||
.UnderlineNav-body { | ||
display: flex; | ||
margin-bottom: -1px; | ||
} | ||
|
||
.UnderlineNav-item { | ||
padding: $spacer-3 $spacer-2; | ||
margin-right: $spacer-3; | ||
font-size: $body-font-size; | ||
line-height: $lh-default; | ||
color: $text-gray; | ||
text-align: center; | ||
border-bottom: 2px solid transparent; | ||
|
||
&:hover, | ||
&:focus { | ||
color: $text-gray-dark; | ||
text-decoration: none; | ||
border-bottom-color: $gray-300; | ||
transition: 0.2s ease; | ||
|
||
.UnderlineNav-octicon { | ||
color: $gray-500; | ||
} | ||
} | ||
|
||
&.selected { | ||
font-weight: $font-weight-bold; | ||
color: $text-gray-dark; | ||
border-bottom-color: $orange-600; | ||
|
||
.UnderlineNav-octicon { | ||
color: $gray-500; | ||
} | ||
} | ||
} | ||
|
||
.UnderlineNav--right { | ||
justify-content: flex-end; | ||
|
||
.UnderlineNav-item { | ||
margin-right: 0; | ||
margin-left: $spacer-3; | ||
} | ||
|
||
.UnderlineNav-actions { | ||
flex: 1 1 auto; | ||
} | ||
} | ||
|
||
.UnderlineNav-actions { | ||
align-self: center; | ||
} | ||
|
||
.UnderlineNav--full { | ||
display: block; | ||
} | ||
|
||
.UnderlineNav-octicon { | ||
color: $gray-400; | ||
} | ||
|
||
.UnderlineNav-container { | ||
display: flex; | ||
justify-content: space-between; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
import { storiesOf } from '@storybook/react' | ||
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' | ||
|
||
const stories = storiesOf('Navigation', module) | ||
|
||
storiesFromMarkdown(require.context('.', true, /\.md$/)) | ||
.forEach(({title, story}) => { | ||
stories.add(title, story) | ||
}) |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just realized we need to remove that it accommodates counters becaase of the Sass changes 😬
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I changed it to:
It's a little wordy, so let me know if you have suggestions!