primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-10 16:07:25 +03:00
Code Issues Projects Releases Wiki Activity

Fix color utilities for margin documentation

Browse Source
This commit is contained in:
Tobias Ahlin 2021-05-03 17:06:57 +02:00
parent efdbac4378
commit 1cf63fea39
1 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,13 +43,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
```html live
<div class="d-flex flex-items-baseline flex-justify-around">
<div class="bg-yellow"><div class="m-0 p-1 bg-gray">.m-0</div></div>
<div class="bg-yellow"><div class="m-1 p-1 bg-gray">.m-1</div></div>
<div class="bg-yellow"><div class="m-2 p-1 bg-gray">.m-2</div></div>
<div class="bg-yellow"><div class="m-3 p-1 bg-gray">.m-3</div></div>
<div class="bg-yellow"><div class="m-4 p-1 bg-gray">.m-4</div></div>
<div class="bg-yellow"><div class="m-5 p-1 bg-gray">.m-5</div></div>
<div class="bg-yellow"><div class="m-6 p-1 bg-gray">.m-6</div></div>
<div class="bg-yellow"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div>
<div class="bg-yellow"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div>
<div class="bg-yellow"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div>
<div class="bg-yellow"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div>
<div class="bg-yellow"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div>
<div class="bg-yellow"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div>
<div class="bg-yellow"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div>
</div>
```
@ -59,12 +59,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
```html live
<div class="d-flex flex-items-baseline flex-justify-around">
<div class="bg-yellow"><div class="mt-3 p-1 bg-gray">.mt-3</div></div>
<div class="bg-yellow"><div class="mr-3 p-1 bg-gray">.mr-3</div></div>
<div class="bg-yellow"><div class="mb-3 p-1 bg-gray">.mb-3</div></div>
<div class="bg-yellow"><div class="ml-3 p-1 bg-gray">.ml-3</div></div>
<div class="bg-yellow"><div class="mx-3 p-1 bg-gray">.mx-3</div></div>
<div class="bg-yellow"><div class="my-3 p-1 bg-gray">.my-3</div></div>
<div class="bg-yellow"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div>
<div class="bg-yellow"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div>
<div class="bg-yellow"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div>
<div class="bg-yellow"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div>
<div class="bg-yellow"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div>
<div class="bg-yellow"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div>
</div>
```
@ -73,12 +73,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
```html live
<div class="bg-yellow d-inline-block"><div class="mt-7 p-1 bg-gray">.mb-7</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-8 p-1 bg-gray">.mb-8</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-9 p-1 bg-gray">.mb-9</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 bg-gray">.mb-10</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 bg-gray">.mb-11</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 bg-gray">.mb-12</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-7 p-1 color-bg-secondary">.mb-7</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-8 p-1 color-bg-secondary">.mb-8</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-9 p-1 color-bg-secondary">.mb-9</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div>
```
## Center elements
@ -87,7 +87,7 @@ Use `mx-auto`to center block elements with a set width.
```html live
<div class="bg-yellow">
<div class="mx-auto bg-gray text-center" style="max-width: 500px;">.mx-auto</div>
<div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div>
</div>
```
@ -95,8 +95,8 @@ Use `mx-auto`to center block elements with a set width.
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`.
```html live
<div class="bg-yellow border">
<p class="mb-0 bg-gray p-1">No bottom margin on this paragraph.</p>
<div class="color-bg-warning border">
<p class="mb-0 color-bg-secondary p-1">No bottom margin on this paragraph.</p>
</div>
```
@ -105,8 +105,8 @@ Reset margins built into typography elements or other components with `m-0`, `mt
All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html live
<div class="bg-yellow d-inline-block">
<div class="mx-sm-2 mx-md-4 bg-gray p-1">
<div class="color-bg-warning d-inline-block">
<div class="mx-sm-2 mx-md-4 color-bg-secondary p-1">
.mx-sm-2 .mx-md-4
</div>
</div>
@ -114,12 +114,12 @@ All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints)
## Negative margins
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`, where `spacer` runs from `1` to `6`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
```html live
<div class="d-flex flex-justify-center">
<div class="bg-yellow">
<div class="m-3 ml-n4 ml-md-n6 border-left border-red bg-gray p-2">
<div class="color-bg-warning">
<div class="m-3 ml-n4 ml-md-n6 border-left border-red color-bg-secondary p-2">
.m-3 .ml-n4 .ml-md-n6
</div>
</div>