-
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
Adding flex utilities for grow, order, and width #763
Conversation
This stuff currently lives in |
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.
Awesome, thanks! I'll kick off a new minor release for this to merge into.
We agreed this morning that this needs docs before being merged.
So it's grouped with the other flex properties
This pull request is automatically deployed with Now. |
|
||
.flex#{$variant}-order-1 { order: 1 !important; } | ||
.flex#{$variant}-order-2 { order: 2 !important; } | ||
.flex#{$variant}-order-none { order: inherit !important; } |
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 guess we could also use order: 0
instead of inherit
to "remove" the order since 0
is the default value?
Added some documentation for...
/cc @jonrohan @shawnbot needs review/approval in case we want to make it part of 12.5.0. |
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.
This looks great to me. Thanks for wrapping up the docs, @simurai!
❤️ Thanks @simurai ! |
This pull adds some flex utilities that I've been using to do some complex responsive stuff with the header.
What's added:
.flex-grow-0
This was used in the blob header to get content to grow the columns. cc @emilybrick.flex-order-[1,2,none]
this is useful for reordering columns at smaller sizes..width-auto
we needed a way to turn off width: 100% at other breakpoints.TODO
After release:
components/flexbox.scss
in .com./cc @primer/ds-core