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

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

Browse Source
This commit is contained in:
Tobias Ahlin 2021-05-03 16:38:41 +02:00
commit 9a8b16f467
4 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/smooth-eagles-tie.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": major
---
Remove redundant marketing layout selectors

17
deprecations.js
View File

@ -13,6 +13,23 @@ const versionDeprecations = {
],
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
},
{
selectors: [
'.top-n0',
'.right-n0',
'.bottom-n0',
'.left-n0',
'.top-md-n0',
'.right-md-n0',
'.bottom-md-n0',
'.left-md-n0',
'.top-lg-n0',
'.right-lg-n0',
'.bottom-lg-n0',
'.left-lg-n0'
],
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'],
message: `This selector is deprecated, please use "color-bg-secondary" instead of "bg-shade-gradient".`

2
docs/content/support/v16-migration.mdx
View File

@ -24,7 +24,7 @@ Most components don't need to be updated and should work without making changes.
| `.Counter--gray` | `.Counter--primary` |
| `.Counter--gray-light` | `.Counter--secondary` |
### Dropdwon
### Dropdown
| [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
| ---------------------------------------------------------- | ----- |

20
src/marketing/utilities/layout.scss
View File

@ -6,15 +6,19 @@
@each $breakpoint, $variant in $marketing-position-variants {
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-all-spacers {
.top#{$variant}-#{$scale} { top: $size !important; }
.right#{$variant}-#{$scale} { right: $size !important; }
.bottom#{$variant}-#{$scale} { bottom: $size !important; }
.left#{$variant}-#{$scale} { left: $size !important; }
@if ($size != 0 or $variant != "") {
.top#{$variant}-#{$scale} { top: $size !important; }
.right#{$variant}-#{$scale} { right: $size !important; }
.bottom#{$variant}-#{$scale} { bottom: $size !important; }
.left#{$variant}-#{$scale} { left: $size !important; }
}
.top#{$variant}-n#{$scale} { top: -$size !important; }
.right#{$variant}-n#{$scale} { right: -$size !important; }
.bottom#{$variant}-n#{$scale} { bottom: -$size !important; }
.left#{$variant}-n#{$scale} { left: -$size !important; }
@if ($size != 0) {
.top#{$variant}-n#{$scale} { top: -$size !important; }
.right#{$variant}-n#{$scale} { right: -$size !important; }
.bottom#{$variant}-n#{$scale} { bottom: -$size !important; }
.left#{$variant}-n#{$scale} { left: -$size !important; }
}
}
}
}