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

add new variables explicitly, remove x directional spacing from loop

Browse Source
This commit is contained in:
Catherine Bui 2017-11-01 14:42:00 -07:00
parent cb8ef3a633
commit f802e428d9
5 changed files with 23 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
modules/primer-marketing-support/index.scss
View File

@ -1,2 +1 @@
@import "./lib/variables.scss";
@import "./lib/layout.scss";

24
modules/primer-marketing-support/lib/layout.scss
View File

@ -1,24 +0,0 @@
// Overrides $spacers variable from primer-support
// Increases standard spacing scale by 16px step increments after 40px
// i.e. After 40px, we have 72, 88, 104 and 120px
$spacers: (
0,
round($spacer / 2),
$spacer,
$spacer * 2,
$spacer * 3,
$spacer * 4,
$spacer * 5,
$spacer * 7,
$spacer * 9,
$spacer * 11,
$spacer * 13,
$spacer * 15
) !default;
// Adds aliases
$spacer-7: nth($spacers, 8) !default; // 56px
$spacer-8: nth($spacers, 9) !default; // 72px
$spacer-9: nth($spacers, 10) !default; // 88px
$spacer-10: nth($spacers, 11) !default; // 104px
$spacer-11: nth($spacers, 12) !default; // 120px

11
modules/primer-marketing-support/lib/variables.scss
View File

@ -1,3 +1,14 @@
// Type
$alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
$alt-mono-font: $mono-font;
// Increases standard spacing scale by 16px step increments after 40px
// i.e. After 40px, we have 56, 72, 88, etc.
$spacer-7: $spacer * 7; // 56px
$spacer-8: $spacer * 9; // 72px
$spacer-9: $spacer * 11; // 88px
$spacer-10: $spacer * 13; // 104px
$spacer-11: $spacer * 15; // 120px
$marketingSpacers: $spacer7, $spacer-8, $spacer-9, $spacer-10, $spacer-11;

53
modules/primer-marketing-utilities/lib/margin.scss
View File

@ -1,33 +1,14 @@
// Margin spacer utilities
// Margin spacer utilities for marketing
// Utilities only added for y-direction margin (i.e. top & bottom)
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
@for $i from 1 through length($spacers) {
$size: #{nth($spacers, $i)};
@for $i from 1 through length($marketingSpacers) {
$size: #{nth($marketingSpacers, $i)};
$scale: #{$i - 1};
/* Set a #{$size} margin to all sides */
.m-#{$scale} { margin : #{$size} !important; }
/* Set a #{$size} margin on the top */
.mt-#{$scale} { margin-top : #{$size} !important; }
/* Set a #{$size} margin on the right */
.mr-#{$scale} { margin-right : #{$size} !important; }
/* Set a #{$size} margin on the bottom */
.mb-#{$scale} { margin-bottom: #{$size} !important; }
/* Set a #{$size} margin on the left */
.ml-#{$scale} { margin-left : #{$size} !important; }
/* Set a negative #{$size} margin on top */
.mt-n#{$scale} { margin-top : -#{$size} !important; }
/* Set a negative #{$size} margin on the right */
.mr-n#{$scale} { margin-right : -#{$size} !important; }
/* Set a negative #{$size} margin on the bottom */
.mb-n#{$scale} { margin-bottom: -#{$size} !important; }
/* Set a negative #{$size} margin on the left */
.ml-n#{$scale} { margin-left : -#{$size} !important; }
/* Set a #{$size} margin on the left & right */
.mx-#{$scale} {
margin-right: #{$size} !important;
margin-left : #{$size} !important;
}
/* Set a #{$size} margin on the top & bottom */
.my-#{$scale} {
@ -40,35 +21,15 @@
@each $breakpoint in map-keys($breakpoints) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
@for $i from 1 through length($marketingSpacers) {
@include breakpoint($breakpoint) {
$size: #{nth($spacers, $i)}; // sm, md, lg, xl
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
$size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
/* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
.m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
/* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
/* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
.ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
/* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
.mt-#{$breakpoint}-n#{$scale} { margin-top : -#{$size} !important; }
/* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; }
/* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
.mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; }
/* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
.ml-#{$breakpoint}-n#{$scale} { margin-left : -#{$size} !important; }
/* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
.mx-#{$breakpoint}-#{$scale} {
margin-right: #{$size} !important;
margin-left: #{$size} !important;
}
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
.my-#{$breakpoint}-#{$scale} {

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

@ -1,26 +1,14 @@
// Padding spacer utilities for marketing
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
// stylelint-disable comment-empty-line-before
@for $i from 1 through length($spacers) {
$size: #{nth($spacers, $i)};
@for $i from 1 through length($marketingSpacers) {
$size: #{nth($marketingSpacers, $i)};
$scale: #{$i - 1};
/* Set a #{$size} padding to all sides */
.p-#{$scale} { padding : #{$size} !important; }
/* Set a #{$size} padding to the top */
.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 left & right */
.px-#{$scale} {
padding-right: #{$size} !important;
padding-left: #{$size} !important;
}
/* Set a #{$size} padding to the top & bottom */
.py-#{$scale} {
@ -35,27 +23,15 @@
@each $breakpoint in map-keys($breakpoints) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
@for $i from 1 through length($marketingSpacers) {
@include breakpoint($breakpoint) {
$size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
$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 left & right at the #{$breakpoint} breakpoint */
.px-#{$breakpoint}-#{$scale} {
padding-right: #{$size} !important;
padding-left: #{$size} !important;
}
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
.py-#{$breakpoint}-#{$scale} {