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

refactor(primer-support): make $responsive-variants easier to grok

Browse Source
This commit is contained in:
Shawn Allen 2019-01-24 14:42:10 -08:00
parent 9fe577c02a
commit 289604605f
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
modules/primer-support/lib/variables/layout.scss
View File

@ -80,10 +80,24 @@ $breakpoints: (
xl: $width-xl xl: $width-xl
) !default; ) !default;
$responsive-variants: ("": ""); // This map in the form (breakpoint: variant) is used to iterate over
@each $key in map-keys($breakpoints) { // breakpoints and create both responsive and non-responsive classes in one
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}")); // loop:
} //
// ```scss
// @each $breakpoint, $variant of $responsive-variants {
// @include breakpoint($breakpoint) {
// .foo#{$variant}-bar { foo: bar !important; }
// }
// }
// ```
$responsive-variants: (
"": "",
sm: "-sm",
md: "-md",
lg: "-lg",
xl: "-xl",
) !default;
// responive utility position values // responive utility position values
$responsive-positions: ( $responsive-positions: (