Merge branch 'main' into tobiasahlin/marketing-new-typescale

pull/1379/head
Tobias Ahlin 3 years ago
commit 7d00fab4a6

@ -0,0 +1,5 @@
---
"@primer/css": major
---
Merge overlapping marketing spacing utilities into primer core

@ -13,6 +13,41 @@ const versionDeprecations = {
],
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
},
{
selectors: [
'.p-7',
'.p-8',
'.p-9',
'.p-10',
'.p-11',
'.p-12',
'.p-sm-7',
'.p-sm-8',
'.p-sm-9',
'.p-sm-10',
'.p-sm-11',
'.p-sm-12',
'.p-md-7',
'.p-md-8',
'.p-md-9',
'.p-md-10',
'.p-md-11',
'.p-md-12',
'.p-lg-7',
'.p-lg-8',
'.p-lg-9',
'.p-lg-10',
'.p-lg-11',
'.p-lg-12',
'.p-xl-7',
'.p-xl-8',
'.p-xl-9',
'.p-xl-10',
'.p-xl-11',
'.p-xl-12'
],
message: `This selector is deprecated, please use pt-X, pr-X, pb-X, and pl-X to set paddings on all sides above spacing level 6.`
},
{
selectors: [
'.top-n0',
@ -26,9 +61,19 @@ const versionDeprecations = {
'.top-lg-n0',
'.right-lg-n0',
'.bottom-lg-n0',
'.left-lg-n0'
'.left-lg-n0',
'.mt-n0',
'.mb-n0',
'.mt-sm-n0',
'.mb-sm-n0',
'.mt-md-n0',
'.mb-md-n0',
'.mt-lg-n0',
'.mb-lg-n0',
'.mt-xl-n0',
'.mb-xl-n0'
],
message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0)".`
message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0).`
},
{
selectors: ['.bg-shade-gradient'],

@ -1,24 +0,0 @@
---
title: Marketing support
path: support/marketing-variables
status: Stable
source: 'https://github.com/primer/css/tree/main/src/marketing/support'
bundle: marketing-support
---
### Extended spacing scale
This module extends the `primer-core` spacing scale for marketing site needs. These are useful for achieving bigger vertical spacing between sections on marketing sites.
Starting where the `primer-core` spacing scale ends at spacer 6, the marketing scale first steps up with `8px` for spacer 7 then steps in increments of `16px` from spacer 8 up to 12.
| Scale | Value |
|-------|-------|
| 7 | 48 |
| 8 | 64 |
| 9 | 80 |
| 10 | 96 |
| 11 | 112 |
| 12 | 128 |
See [primer-marketing-support](https://npm.im/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).

@ -24,7 +24,20 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities.
See [primer-marketing-support](/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).
### Extended spacing scale
These are primarily useful for achieving bigger vertical spacing between sections. This scale first steps up with `8px` for spacer 7, then steps in increments of `16px` from spacer 8 up to 12.
| Variable | Scale | Value |
| ------------ |-------|-------|
| `$spacer-7` | 7 | 48px |
| `$spacer-8` | 8 | 64px |
| `$spacer-9` | 9 | 80px |
| `$spacer-10` | 10 | 96px |
| `$spacer-11` | 11 | 112px |
| `$spacer-12` | 12 | 128px |
The extended spacing scale is used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities along the Y-axis, as well as for single side spacing utilities (top, right, bottom, left).
## Em-based spacing

@ -9,7 +9,6 @@ bundle: utilities
Margin utilities are based on a global [spacing scale](/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
## Naming convention
Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
@ -17,21 +16,26 @@ Since margin utilities have many variations and will be used in many places, we
| Shorthand | Description |
| --- | --- |
| m | margin |
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | horizontal, left & right |
| y | vertical, top & bottom |
| 0 | 0 |
| 1 | 4px |
| 2 | 8px |
| 3 | 16px |
| 4 | 24px |
| 5 | 32px |
| 6 | 40px |
| m | margin |
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | horizontal, left & right |
| y | vertical, top & bottom |
| 0 | 0 |
| 1 | 4px |
| 2 | 8px |
| 3 | 16px |
| 4 | 24px |
| 5 | 32px |
| 6 | 40px |
| 7 | 48px |
| 8 | 64px |
| 9 | 80px |
| 10 | 96px |
| 11 | 112px |
| 12 | 128px |
## Uniform margins
@ -39,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>
```
@ -55,22 +59,35 @@ 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>
```
## Extended vertical margins
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 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
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>
```
@ -78,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>
```
@ -88,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>
@ -97,14 +114,28 @@ 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>
</div>
```
## Extended negative margins
You can use the extended spacing scale for `top` and `bottom` margins, ranging from `1` to `12`.
```html live
<div class="d-flex flex-justify-center">
<div class="py-6 px-3 color-bg-warning">
<div class="mt-n8 border-left border-red color-bg-tertiary p-2">
.mt-n8
</div>
</div>
</div>
```

@ -29,7 +29,7 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
## Negative offset columns
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/spacing/#extended-spacing-scale).
```html live
<div class="mx-auto border" style="width: 300px">

@ -1,22 +0,0 @@
---
title: Marketing margin
sort_title: Margin Marketing
path: utilities/marketing-margin
status: Stable
status_issue: 'https://github.com/github/design-systems/issues/378'
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/margin.scss'
bundle: marketing-utilities
---
Marketing margin utilities extend [core margin utilities](/utilities/margin). The [marketing scale](/support/marketing-variables#extended-spacing-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>
```

@ -1,20 +0,0 @@
---
title: Marketing padding
sort_title: Padding Marketing
path: utilities/marketing-padding
status: Stable
status_issue: 'https://github.com/github/design-systems/issues/378'
source: 'https://github.com/primer/css/tree/main/src/marketing/utilities/padding.scss'
bundle: marketing-utilities
---
Marketing padding utilities extend [core padding utilities](/utilities/padding). The [marketing scale](/support/marketing-variables#extended-spacing-scale) starts from spacer `7` up to `12`. All directions and their responsive variants are supported, except for `px`.
```html live
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
```

@ -30,6 +30,12 @@ Since padding utilities have many variations and will be used in many places, we
| 4 | 24px |
| 5 | 32px |
| 6 | 40px |
| 7 | 48px |
| 8 | 64px |
| 9 | 80px |
| 10 | 96px |
| 11 | 112px |
| 12 | 128px |
_**Note:** The blue in the examples below represents the element, and the green represents the padding._
@ -60,6 +66,20 @@ Use directional utilities to apply padding to an individual side, or the X and Y
<div class="px-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.px-3</div></div>
```
## Extended directional padding
The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`.
```html live
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
```
## Responsive padding
All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.

@ -16,8 +16,6 @@
url: /support/spacing
- title: Typography
url: /support/typography
- title: Marketing support
url: /support/marketing-variables
- title: Variables
url: /support/variables
- title: Utilities
@ -41,14 +39,10 @@
url: /utilities/marketing-layout
- title: Margin
url: /utilities/margin
- title: Marketing margin
url: /utilities/marketing-margin
- title: Marketing filters
url: /utilities/marketing-filters
- title: Padding
url: /utilities/padding
- title: Marketing padding
url: /utilities/marketing-padding
- title: Typography
url: /utilities/typography
- title: Marketing typography

@ -48,7 +48,7 @@
"globby": "11.0.3",
"jest": "26.6.3",
"js-yaml": "4.1.0",
"postcss": "8.2.12",
"postcss": "8.2.13",
"postcss-import": "14.0.1",
"postcss-load-config": "3.0.1",
"postcss-node-sass": "3.1.0",
@ -56,10 +56,10 @@
"postcss-simple-vars": "6.0.3",
"prettier": "2.2.1",
"semver": "7.3.5",
"stylelint": "13.13.0",
"stylelint": "13.13.1",
"stylelint-config-primer": "11.0.1",
"stylelint-scss": "3.19.0",
"table": "6.5.1"
"table": "6.6.0"
},
"jest": {
"testEnvironment": "node",

@ -107,38 +107,6 @@ $mktg-bodies: (
$transition-time: 0.4s !default;
$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;
// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
// 80, 96, etc.
$spacer-7: $spacer * 6 !default; // 48px
$spacer-8: $spacer * 8 !default; // 64px
$spacer-9: $spacer * 10 !default; // 80px
$spacer-10: $spacer * 12 !default; // 96px
$spacer-11: $spacer * 14 !default; // 112px
$spacer-12: $spacer * 16 !default; // 128px
$marketing-spacers: (
7: $spacer-7,
8: $spacer-8,
9: $spacer-9,
10: $spacer-10,
11: $spacer-11,
12: $spacer-12,
) !default;
$marketing-all-spacers: map-merge(
(
0: 0,
1: $spacer-1,
2: $spacer-2,
3: $spacer-3,
4: $spacer-4,
5: $spacer-5,
6: $spacer-6,
),
$marketing-spacers,
) !default;
$marketing-position-variants: (
"": "",
md: "-md",

@ -4,5 +4,3 @@
@import "./borders.scss";
@import "./filters.scss";
@import "./layout.scss";
@import "./margin.scss";
@import "./padding.scss";

@ -5,7 +5,7 @@
// No utilities for sm and xl breakpoints
@each $breakpoint, $variant in $marketing-position-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-all-spacers {
@each $scale, $size in $spacer-map-extended {
@if ($size != 0 or $variant != "") {
.top#{$variant}-#{$scale} { top: $size !important; }
.right#{$variant}-#{$scale} { right: $size !important; }

@ -1,26 +0,0 @@
// Margin spacer utilities for marketing
// Utilities only added for y-direction margin (i.e. top & bottom)
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-all-spacers {
.mt#{$variant}-#{$scale} { margin-top: $size !important; }
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
.mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
.mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
.my#{$variant}-#{$scale} {
margin-top: $size !important;
margin-bottom: $size !important;
}
}
}
}
.mt-auto {
margin-top: auto !important;
}
.m-auto { margin: auto !important; }

@ -1,24 +0,0 @@
// Padding spacer utilities for marketing
// stylelint-disable block-opening-brace-space-before
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-all-spacers {
// Set a #{$size} padding for all sides
.p#{$variant}-#{$scale} { padding: #{$size} !important; }
// Set a #{$size} padding to the top
.pt#{$variant}-#{$scale} { padding-top: #{$size} !important; }
// Set a #{$size} padding to the right
.pr#{$variant}-#{$scale} { padding-right: #{$size} !important; }
// Set a #{$size} padding to the bottom
.pb#{$variant}-#{$scale} { padding-bottom: #{$size} !important; }
// Set a #{$size} padding to the left
.pl#{$variant}-#{$scale} { padding-left: #{$size} !important; }
// Set a #{$size} padding to the top & bottom
.py#{$variant}-#{$scale} {
padding-top: #{$size} !important;
padding-bottom: #{$size} !important;
}
}
}
}

@ -63,6 +63,38 @@ $spacer-map: (
6: $spacer-6,
) !default;
// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
// 80, 96, etc.
$spacer-7: $spacer * 6 !default; // 48px
$spacer-8: $spacer * 8 !default; // 64px
$spacer-9: $spacer * 10 !default; // 80px
$spacer-10: $spacer * 12 !default; // 96px
$spacer-11: $spacer * 14 !default; // 112px
$spacer-12: $spacer * 16 !default; // 128px
$spacers-large: (
7: $spacer-7,
8: $spacer-8,
9: $spacer-9,
10: $spacer-10,
11: $spacer-11,
12: $spacer-12,
) !default;
$spacer-map-extended: map-merge(
(
0: 0,
1: $spacer-1,
2: $spacer-2,
3: $spacer-3,
4: $spacer-4,
5: $spacer-5,
6: $spacer-6,
),
$spacers-large,
) !default;
// Em spacer variables
$em-spacer-1: 0.0625em !default; // 1/16
$em-spacer-2: 0.125em !default; // 1/8

@ -5,33 +5,44 @@
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@each $scale, $size in $spacer-map {
/* Set a $size margin to all sides at $breakpoint */
.m#{$variant}-#{$scale} { margin: $size !important; }
@each $scale, $size in $spacer-map-extended {
@if ($scale < length($spacer-map)) {
/* Set a $size margin to all sides at $breakpoint */
.m#{$variant}-#{$scale} { margin: $size !important; }
}
/* Set a $size margin on the top at $breakpoint */
.mt#{$variant}-#{$scale} { margin-top: $size !important; }
/* Set a $size margin on the right at $breakpoint */
.mr#{$variant}-#{$scale} { margin-right: $size !important; }
/* Set a $size margin on the bottom at $breakpoint */
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
/* Set a $size margin on the left at $breakpoint */
.ml#{$variant}-#{$scale} { margin-left: $size !important; }
@if ($scale < length($spacer-map)) {
/* Set a $size margin on the right at $breakpoint */
.mr#{$variant}-#{$scale} { margin-right: $size !important; }
/* Set a $size margin on the left at $breakpoint */
.ml#{$variant}-#{$scale} { margin-left: $size !important; }
}
@if ($size != 0) {
/* Set a negative $size margin on top at $breakpoint */
.mt#{$variant}-n#{$scale} { margin-top : -$size !important; }
/* Set a negative $size margin on the right at $breakpoint */
.mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
.mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
/* Set a negative $size margin on the bottom at $breakpoint */
.mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
/* Set a negative $size margin on the left at $breakpoint */
.ml#{$variant}-n#{$scale} { margin-left : -$size !important; }
@if ($scale < length($spacer-map)) {
/* Set a negative $size margin on the right at $breakpoint */
.mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
/* Set a negative $size margin on the left at $breakpoint */
.ml#{$variant}-n#{$scale} { margin-left : -$size !important; }
}
}
/* Set a $size margin on the left & right at $breakpoint */
.mx#{$variant}-#{$scale} {
margin-right: $size !important;
margin-left: $size !important;
@if ($scale < length($spacer-map)) {
/* Set a $size margin on the left & right at $breakpoint */
.mx#{$variant}-#{$scale} {
margin-right: $size !important;
margin-left: $size !important;
}
}
/* Set a $size margin on the top & bottom at $breakpoint */
@ -48,3 +59,7 @@
}
}
}
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }

@ -5,9 +5,12 @@
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@each $scale, $size in $spacer-map {
/* Set a $size padding to all sides at $breakpoint */
.p#{$variant}-#{$scale} { padding: $size !important; }
@each $scale, $size in $spacer-map-extended {
@if ($scale < length($spacer-map)) {
/* Set a $size padding to all sides at $breakpoint */
.p#{$variant}-#{$scale} { padding: $size !important; }
}
/* Set a $size padding to the top at $breakpoint */
.pt#{$variant}-#{$scale} { padding-top: $size !important; }
/* Set a $size padding to the right at $breakpoint */
@ -17,10 +20,12 @@
/* Set a $size padding to the left at $breakpoint */
.pl#{$variant}-#{$scale} { padding-left: $size !important; }
/* Set a $size padding to the left & right at $breakpoint */
.px#{$variant}-#{$scale} {
padding-right: $size !important;
padding-left: $size !important;
@if ($scale < length($spacer-map)) {
/* Set a $size padding to the left & right at $breakpoint */
.px#{$variant}-#{$scale} {
padding-right: $size !important;
padding-left: $size !important;
}
}
/* Set a $size padding to the top & bottom at $breakpoint */

@ -1610,10 +1610,10 @@ chalk@^3.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chalk@^4.0.0, chalk@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
dependencies:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
@ -5469,10 +5469,10 @@ postcss-values-parser@^4.0.0:
is-url-superb "^4.0.0"
postcss "^7.0.5"
postcss@8.2.12, postcss@^8.1.0, postcss@^8.1.4, postcss@^8.2.4, postcss@^8.2.7:
version "8.2.12"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.12.tgz#81248a1a87e0f575cc594a99a08207fd1c4addc4"
integrity sha512-BJnGT5+0q2tzvs6oQfnY2NpEJ7rIXNfBnZtQOKCIsweeWXBXeDd5k31UgTdS3d/c02ouspufn37mTaHWkJyzMQ==
postcss@8.2.13, postcss@^8.1.0, postcss@^8.1.4, postcss@^8.2.4, postcss@^8.2.7:
version "8.2.13"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.13.tgz#dbe043e26e3c068e45113b1ed6375d2d37e2129f"
integrity sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==
dependencies:
colorette "^1.2.2"
nanoid "^3.1.22"
@ -6505,16 +6505,16 @@ stylelint-scss@3.19.0, stylelint-scss@^3.19.0:
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.1.0"
stylelint@13.13.0:
version "13.13.0"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.13.0.tgz#1a33bffde765920ac985f16ae6250ff914b27804"
integrity sha512-jvkM1iuH88vAvjdKPwPm6abiMP2/D/1chbfb+4GVONddOOskHuCXc0loyrLdxO1AwwH6jdnjYskkTKHQD7cXwQ==
stylelint@13.13.1:
version "13.13.1"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.13.1.tgz#fca9c9f5de7990ab26a00f167b8978f083a18f3c"
integrity sha512-Mv+BQr5XTUrKqAXmpqm6Ddli6Ief+AiPZkRsIrAoUKFuq/ElkUh9ZMYxXD0iQNZ5ADghZKLOWz1h7hTClB7zgQ==
dependencies:
"@stylelint/postcss-css-in-js" "^0.37.2"
"@stylelint/postcss-markdown" "^0.36.2"
autoprefixer "^9.8.6"
balanced-match "^2.0.0"
chalk "^4.1.0"
chalk "^4.1.1"
cosmiconfig "^7.0.0"
debug "^4.3.1"
execall "^2.0.0"
@ -6555,7 +6555,7 @@ stylelint@13.13.0:
style-search "^0.1.0"
sugarss "^2.0.0"
svg-tags "^1.0.0"
table "^6.5.1"
table "^6.6.0"
v8-compile-cache "^2.3.0"
write-file-atomic "^3.0.3"
@ -6615,10 +6615,10 @@ symbol-tree@^3.2.4:
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
table@6.5.1, table@^6.0.4, table@^6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/table/-/table-6.5.1.tgz#930885a7430f15f8766b35cd1e36de40793db523"
integrity sha512-xGDXWTBJxahkzPQCsn1S9ESHEenU7TbMD5Iv4FeopXv/XwJyWatFjfbor+6ipI10/MNPXBYUamYukOrbPZ9L/w==
table@6.6.0, table@^6.0.4, table@^6.6.0:
version "6.6.0"
resolved "https://registry.yarnpkg.com/table/-/table-6.6.0.tgz#905654b79df98d9e9a973de1dd58682532c40e8e"
integrity sha512-iZMtp5tUvcnAdtHpZTWLPF0M7AgiQsURR2DwmxnJwSy8I3+cY+ozzVvYha3BOLG2TB+L0CqjIz+91htuj6yCXg==
dependencies:
ajv "^8.0.1"
lodash.clonedeep "^4.5.0"

Loading…
Cancel
Save