primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-19 04:37:38 +03:00
Code Issues Projects Releases Wiki Activity

Adding directional margin classes to the utilities (#1595)

Browse Source 
* Adding directional margin classes to the utilities

Co-Authored-By: Katie Langerman <langermank@gmail.com>

* Create sixty-masks-matter.md

* Pushes the box to the top

Co-authored-by: Katie Langerman <langermank@gmail.com>
This commit is contained in:
Jon Rohan 2021-09-15 16:33:47 -07:00 committed by GitHub
parent 4a1f09a75e
commit 5fb831cf50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/sixty-masks-matter.md Normal file
View File

@ -0,0 +1,7 @@
---
"@primer/css": minor
---
Adding directional margin classes to the margin utilities.
Adding: `ml-auto, mb-auto, mr-auto`

14
docs/content/utilities/margin.md
View File

@ -91,6 +91,20 @@ Use `mx-auto`to center block elements with a set width.
</div>
```
We also provide directional margin auto. `mt-auto, mr-auto, mb-auto, ml-auto`
```html live
<div class="d-flex border mb-4">
<div style="height:100px;"></div>
<div class="border mt-auto">`mt-auto` will push this box to the bottom.</div>
<div class="border mb-auto">`mb-auto` will push this box to the top.</div>
</div>
<div class="d-flex flex-column border">
<div class="border ml-auto">`ml-auto` will push this box to the right.</div>
<div class="border mr-auto">`mr-auto` will push this box to the left.</div>
</div>
```
## Reset margins
Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.

3
src/utilities/margin.scss
View File

@ -63,3 +63,6 @@
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }