mirror of
https://github.com/primer/css.git
synced 2024-09-19 20:57:37 +03:00
Adding directional margin classes to the utilities (#1595)
* 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:
parent
4a1f09a75e
commit
5fb831cf50
7
.changeset/sixty-masks-matter.md
Normal file
7
.changeset/sixty-masks-matter.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
"@primer/css": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Adding directional margin classes to the margin utilities.
|
||||||
|
|
||||||
|
Adding: `ml-auto, mb-auto, mr-auto`
|
@ -91,6 +91,20 @@ Use `mx-auto`to center block elements with a set width.
|
|||||||
</div>
|
</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
|
||||||
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`.
|
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`.
|
||||||
|
|
||||||
|
@ -63,3 +63,6 @@
|
|||||||
.m-auto { margin: auto !important; }
|
.m-auto { margin: auto !important; }
|
||||||
|
|
||||||
.mt-auto { margin-top: 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; }
|
||||||
|
Loading…
Reference in New Issue
Block a user