primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-03 03:33:40 +03:00
Code Issues Projects Releases Wiki Activity

feat(marketing-utilities): add more padding utility classes

Browse Source
This commit is contained in:
Shawn Allen 2019-01-23 11:35:52 -08:00 committed by GitHub
commit 2682bd3ada
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
modules/primer-marketing-utilities/docs/padding.md
View File

@ -6,25 +6,34 @@ status: Stable
status_issue: https://github.com/github/design-systems/issues/378
---
Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the x and y axis. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
## Y-axis padding utilities
## Padding utilities
Use marketing padding utilities to apply padding to top, bottom, or both y-axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
Use marketing padding utilities to apply padding to top, right, bottom, left, x-axis, or y axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
```html
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pt-7">.pt-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pr-7">.pr-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pb-7">.pb-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pl-7">.pl-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue px-7">.px-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue py-7">.py-7</div>
</div>
```
## Responsive y-axis padding utilities
## Responsive padding utilities
All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.

16
modules/primer-marketing-utilities/lib/padding.scss
View File

@ -5,10 +5,17 @@
$size: #{nth($marketingSpacers, $i)};
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
/* Set a #{$size} padding for all sides */
.p-#{$scale} { padding: #{$size} !important; }
/* Set a #{$size} padding to the top */
.pt-#{$scale} { padding-top : #{$size} !important; }
.pt-#{$scale} { padding-top: #{$size} !important; }
/* Set a #{$size} padding to the right */
.pr-#{$scale} { padding-right: #{$size} !important; }
/* Set a #{$size} padding to the bottom */
.pb-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding to the left */
.pl-#{$scale} { padding-left: #{$size} !important; }
/* Set a #{$size} padding to the top & bottom */
.py-#{$scale} {
@ -28,10 +35,17 @@
$size: #{nth($marketingSpacers, $i)}; // xs, sm, md, lg, xl
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
/* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */
.p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
/* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
.pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
/* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */
.pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
.py-#{$breakpoint}-#{$scale} {