jekyll-theme-primer 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/_layouts/default.html +1 -1
  3. data/_sass/jekyll-theme-primer.scss +0 -1
  4. data/_sass/primer-base/CHANGELOG.md +20 -0
  5. data/_sass/primer-base/README.md +1 -1
  6. data/_sass/primer-base/build/build.css +1 -2
  7. data/_sass/primer-base/build/index.js +1 -0
  8. data/_sass/primer-base/index.scss +1 -1
  9. data/_sass/primer-base/lib/base.scss +1 -0
  10. data/_sass/{normalize.css → primer-base/lib}/normalize.scss +6 -2
  11. data/_sass/primer-base/lib/typography-base.scss +1 -1
  12. data/_sass/primer-base/package.json +36 -34
  13. data/_sass/primer-layout/CHANGELOG.md +19 -0
  14. data/_sass/primer-layout/README.md +3 -7
  15. data/_sass/primer-layout/build/build.css +1 -2
  16. data/_sass/primer-layout/build/index.js +1 -0
  17. data/_sass/primer-layout/index.scss +1 -0
  18. data/_sass/primer-layout/lib/grid.scss +0 -1
  19. data/_sass/primer-layout/package.json +35 -32
  20. data/_sass/primer-markdown/CHANGELOG.md +29 -0
  21. data/_sass/primer-markdown/README.md +1 -6
  22. data/_sass/primer-markdown/build/build.css +1 -2
  23. data/_sass/primer-markdown/build/index.js +1 -0
  24. data/_sass/primer-markdown/lib/blob-csv.scss +3 -3
  25. data/_sass/primer-markdown/lib/code.scss +2 -2
  26. data/_sass/primer-markdown/lib/headings.scss +4 -4
  27. data/_sass/primer-markdown/lib/images.scss +3 -3
  28. data/_sass/primer-markdown/lib/lists.scss +1 -1
  29. data/_sass/primer-markdown/lib/markdown-body.scss +9 -9
  30. data/_sass/primer-markdown/lib/tables.scss +9 -5
  31. data/_sass/primer-markdown/package.json +34 -31
  32. data/_sass/primer-support/CHANGELOG.md +85 -0
  33. data/_sass/primer-support/README.md +1 -1
  34. data/_sass/primer-support/index.scss +5 -1
  35. data/_sass/primer-support/lib/mixins/buttons.scss +156 -0
  36. data/_sass/primer-support/lib/mixins/misc.scss +1 -1
  37. data/_sass/primer-support/lib/mixins/typography.scss +4 -4
  38. data/_sass/primer-support/lib/variables/color-system.scss +114 -0
  39. data/_sass/primer-support/lib/variables/colors.scss +64 -0
  40. data/_sass/primer-support/lib/variables/layout.scss +58 -0
  41. data/_sass/primer-support/lib/variables/misc.scss +45 -0
  42. data/_sass/primer-support/lib/variables/typography.scss +35 -0
  43. data/_sass/primer-support/package.json +33 -29
  44. data/_sass/primer-utilities/CHANGELOG.md +130 -0
  45. data/_sass/primer-utilities/README.md +2 -2
  46. data/_sass/primer-utilities/build/build.css +1 -2
  47. data/_sass/primer-utilities/build/index.js +1 -2
  48. data/_sass/primer-utilities/index.scss +5 -1
  49. data/_sass/primer-utilities/lib/animations.scss +8 -11
  50. data/_sass/primer-utilities/lib/borders.scss +61 -0
  51. data/_sass/primer-utilities/lib/box-shadow.scss +26 -0
  52. data/_sass/primer-utilities/lib/colors.scss +72 -10
  53. data/_sass/primer-utilities/lib/flexbox.scss +80 -0
  54. data/_sass/primer-utilities/lib/layout.scss +37 -50
  55. data/_sass/primer-utilities/lib/margin.scss +37 -9
  56. data/_sass/primer-utilities/lib/padding.scss +16 -3
  57. data/_sass/primer-utilities/lib/typography.scss +65 -9
  58. data/_sass/primer-utilities/lib/visibility-display.scss +95 -0
  59. data/_sass/primer-utilities/package.json +35 -35
  60. metadata +17 -10
  61. data/_sass/normalize.css/CHANGELOG.md +0 -135
  62. data/_sass/normalize.css/LICENSE.md +0 -21
  63. data/_sass/normalize.css/README.md +0 -128
  64. data/_sass/normalize.css/package.json +0 -111
  65. data/_sass/primer-support/lib/variables.scss +0 -179
  66. data/_sass/primer-utilities/lib/border.scss +0 -29
@@ -0,0 +1,61 @@
1
+ // Border utilities
2
+ // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
3
+
4
+ /* Add a gray border */
5
+ .border { border: $border !important; }
6
+ /* Add a gray border to the top */
7
+ .border-top { border-top: $border !important; }
8
+ /* Add a gray border to the right */
9
+ .border-right { border-right: $border !important; }
10
+ /* Add a gray border to the bottom */
11
+ .border-bottom { border-bottom: $border !important; }
12
+ /* Add a gray border to the left */
13
+ .border-left { border-left: $border !important; }
14
+ /* Add a gray border to the left and right */
15
+ .border-y {
16
+ border-top: $border !important;
17
+ border-bottom: $border !important;
18
+ }
19
+
20
+ .border-dashed { border-style: dashed !important; }
21
+
22
+ /* Use with .border to turn the border blue */
23
+ .border-blue { border-color: $border-blue !important; }
24
+ /* Use with .border to turn the border blue-light */
25
+ .border-blue-light { border-color: $border-blue-light !important; }
26
+ /* Use with .border to turn the border green */
27
+ .border-green { border-color: $border-green !important; }
28
+ /* Use with .border to turn the border green light */
29
+ .border-green-light { border-color: $border-green-light !important; }
30
+ /* Use with .border to turn the border red */
31
+ .border-red { border-color: $border-red !important; }
32
+ /* Use with .border to turn the border red-light */
33
+ .border-red-light { border-color: $border-red-light !important; }
34
+ /* Use with .border to turn the border yellow */
35
+ .border-yellow { border-color: $border-yellow !important; }
36
+ /* Use with .border to turn the border gray-light */
37
+ .border-gray-light { border-color: $border-gray-light !important; }
38
+ /* Use with .border to turn the border gray-dark */
39
+ .border-gray-dark { border-color: $border-gray-dark !important; }
40
+ /* Use with .border to turn the border rgba black 0.15 */
41
+ .border-black-fade { border-color: $border-black-fade !important; }
42
+
43
+ // Without borders
44
+ /* Remove all borders */
45
+ .border-0 { border: 0 !important; }
46
+ /* Remove the top border */
47
+ .border-top-0 { border-top: 0 !important; }
48
+ /* Remove the right border */
49
+ .border-right-0 { border-right: 0 !important; }
50
+ /* Remove the bottom border */
51
+ .border-bottom-0 { border-bottom: 0 !important; }
52
+ /* Remove the left border */
53
+ .border-left-0 { border-left: 0 !important; }
54
+
55
+ // Rounded corners
56
+ /* Remove the border-radius */
57
+ .rounded-0 { border-radius: 0 !important; }
58
+ /* Add a border-radius to all corners */
59
+ .rounded-1 { border-radius: $border-radius !important; }
60
+ /* Add a 2x border-radius to all corners */
61
+ .rounded-2 { border-radius: $border-radius * 2 !important; }
@@ -0,0 +1,26 @@
1
+ // Box shadow utilities
2
+ // stylelint-disable primer/selector-no-utility
3
+
4
+ // Box shadows
5
+
6
+ .box-shadow {
7
+ box-shadow: $box-shadow !important;
8
+ }
9
+
10
+ .box-shadow-medium {
11
+ box-shadow: $box-shadow-medium !important;
12
+ }
13
+
14
+ .box-shadow-large {
15
+ box-shadow: $box-shadow-large !important;
16
+ }
17
+
18
+ .box-shadow-extra-large {
19
+ box-shadow: $box-shadow-extra-large !important;
20
+ }
21
+
22
+ // Turn off box shadow
23
+
24
+ .box-shadow-none {
25
+ box-shadow: none !important;
26
+ }
@@ -1,40 +1,102 @@
1
1
  // Color utilities
2
- // stylelint-disable block-opening-brace-space-before, block-closing-brace-newline-before, block-opening-brace-newline-after, selector-list-comma-newline-after, block-opening-brace-space-after, primer/selector-no-utility, rule-non-nested-empty-line-before
2
+ // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
3
+ // stylelint-disable comment-empty-line-before
3
4
 
4
5
  // background colors
6
+ /* Set the background to $bg-white */
5
7
  .bg-white { background-color: $bg-white !important; }
8
+ /* Set the background to $bg-blue */
6
9
  .bg-blue { background-color: $bg-blue !important; }
10
+ /* Set the background to $bg-blue-light */
7
11
  .bg-blue-light { background-color: $bg-blue-light !important; }
12
+ /* Set the background to $bg-gray-dark */
8
13
  .bg-gray-dark { background-color: $bg-gray-dark !important; }
14
+ /* Set the background to $bg-gray */
9
15
  .bg-gray { background-color: $bg-gray !important; }
16
+ /* Set the background to $bg-gray-light */
10
17
  .bg-gray-light { background-color: $bg-gray-light !important; }
18
+ /* Set the background to $bg-green */
11
19
  .bg-green { background-color: $bg-green !important; }
20
+ /* Set the background to $bg-green-light */
21
+ .bg-green-light { background-color: $bg-green-light !important; }
22
+ /* Set the background to $bg-red */
12
23
  .bg-red { background-color: $bg-red !important; }
24
+ /* Set the background to $bg-red-light */
25
+ .bg-red-light { background-color: $bg-red-light !important; }
26
+ /* Set the background to $bg-yellow */
27
+ .bg-yellow { background-color: $bg-yellow !important; }
28
+ /* Set the background to $bg-yellow-light */
29
+ .bg-yellow-light { background-color: $bg-yellow-light !important; }
30
+ /* Set the background to $bg-purple */
31
+ .bg-purple { background-color: $bg-purple !important; }
32
+ /* Set the background to $bg-purple-light */
33
+ .bg-purple-light { background-color: $bg-purple-light !important; }
34
+
35
+ .bg-shade-gradient {
36
+ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.065), rgba(0, 0, 0, 0)) !important;
37
+ background-repeat: no-repeat !important;
38
+ background-size: 100% 200px !important;
39
+ }
13
40
 
14
41
  // text colors
42
+ /* Set the text color to $text-blue */
15
43
  .text-blue { color: $text-blue !important; }
44
+ /* Set the text color to $text-red */
16
45
  .text-red { color: $text-red !important; }
46
+ /* Set the text color to $text-gray-light */
17
47
  .text-gray-light { color: $text-gray-light !important; }
48
+ /* Set the text color to $text-gray */
18
49
  .text-gray { color: $text-gray !important; }
50
+ /* Set the text color to $text-gray-dark */
19
51
  .text-gray-dark { color: $text-gray-dark !important; }
52
+ /* Set the text color to $text-green */
20
53
  .text-green { color: $text-green !important; }
54
+ /* Set the text color to $text-orange */
21
55
  .text-orange { color: $text-orange !important; }
56
+ /* Set the text color to $text-orange-light */
57
+ .text-orange-light { color: $text-orange-light !important; }
58
+ /* Set the text color to $text-purple */
22
59
  .text-purple { color: $text-purple !important; }
60
+ /* Set the text color to $text-white */
23
61
  .text-white { color: $text-white !important; }
62
+ /* Set the text color to inherit */
24
63
  .text-inherit { color: inherit !important; }
25
64
 
26
- // link colors
27
- .link-blue { color: $text-blue !important; }
28
- .link-gray-dark { color: $text-gray-dark !important; }
29
- .link-gray { color: $text-gray !important; }
30
-
31
65
  // Text states
66
+ // These can probably all be regular utilities
32
67
  .text-renamed { color: $status-renamed !important; }
33
- .text-pending { color: $status-pending !important; }
68
+ .text-pending { color: $yellow-800 !important; }
69
+ // Separate text and background colors in future to improve a11y
70
+ .bg-pending { color: $yellow-700 !important; }
71
+
72
+ // Link colors
73
+ // Sets the links color to $text-gray and $text-blue on hover
74
+ .link-gray {
75
+ color: $text-gray !important;
76
+
77
+ &:hover {
78
+ color: $text-blue !important;
79
+ }
80
+ }
81
+
82
+ // Sets the links color to $text-gray-dark and $text-blue on hover
83
+ .link-gray-dark {
84
+ color: $text-gray-dark !important;
85
+
86
+ &:hover {
87
+ color: $text-blue !important;
88
+ }
89
+ }
90
+
91
+ /* Set the link color to $text-blue on hover
92
+ Useful when you want only part of a link to turn blue on hover */
93
+ .link-hover-blue {
94
+ &:hover {
95
+ color: $text-blue !important;
96
+ }
97
+ }
34
98
 
35
- // Muted link
36
- //
37
- // Have a link you need to be gray to start, and blue on hover? Use this.
99
+ /* Make a link $text-gray, then $text-blue on hover and removes the underline */
38
100
  .muted-link {
39
101
  color: $text-gray !important;
40
102
 
@@ -0,0 +1,80 @@
1
+ // Flex utility classes
2
+
3
+ // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
4
+ // stylelint-disable comment-empty-line-before
5
+
6
+ // - - - - - - - - - - - - - - - - - - - - - - -
7
+ // This is a template for generating the flex utility classes.
8
+ // A version of each class will be generated without a breakpoint,
9
+ // along with a variant for each breakpoint.
10
+ // - - - - - - - - - - - - - - - - - - - - - - -
11
+
12
+ @mixin flexUtility($breakpoint: 0) {
13
+
14
+ // This is the breakpoint that will be inserted into class names
15
+ $breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
16
+
17
+ // If there's no breakpoint, the $breakstring value will be blank.
18
+ @if $breakpoint == 0 {
19
+ $breakstring: ""; // example: `.d-flex`
20
+ }
21
+
22
+ // Flexbox classes
23
+ // Container
24
+
25
+ .flex#{$breakstring}-row { flex-direction: row !important; }
26
+ .flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; }
27
+ .flex#{$breakstring}-column { flex-direction: column !important; }
28
+
29
+ .flex#{$breakstring}-wrap { flex-wrap: wrap !important; }
30
+ .flex#{$breakstring}-nowrap { flex-wrap: nowrap !important; }
31
+
32
+ .flex#{$breakstring}-justify-start { justify-content: flex-start !important; }
33
+ .flex#{$breakstring}-justify-end { justify-content: flex-end !important; }
34
+ .flex#{$breakstring}-justify-center { justify-content: center !important; }
35
+ .flex#{$breakstring}-justify-between { justify-content: space-between !important; }
36
+ .flex#{$breakstring}-justify-around { justify-content: space-around !important; }
37
+
38
+ .flex#{$breakstring}-items-start { align-items: flex-start !important; }
39
+ .flex#{$breakstring}-items-end { align-items: flex-end !important; }
40
+ .flex#{$breakstring}-items-center { align-items: center !important; }
41
+ .flex#{$breakstring}-items-baseline { align-items: baseline !important; }
42
+ .flex#{$breakstring}-items-stretch { align-items: stretch !important; }
43
+
44
+ .flex#{$breakstring}-content-start { align-content: flex-start !important; }
45
+ .flex#{$breakstring}-content-end { align-content: flex-end !important; }
46
+ .flex#{$breakstring}-content-center { align-content: center !important; }
47
+ .flex#{$breakstring}-content-between { align-content: space-between !important; }
48
+ .flex#{$breakstring}-content-around { align-content: space-around !important; }
49
+ .flex#{$breakstring}-content-stretch { align-content: stretch !important; }
50
+
51
+ // Item
52
+ .flex#{$breakstring}-auto { flex: 1 1 auto !important; }
53
+ .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
54
+
55
+ .flex#{$breakstring}-self-auto { align-self: auto !important; }
56
+ .flex#{$breakstring}-self-start { align-self: flex-start !important; }
57
+ .flex#{$breakstring}-self-end { align-self: flex-end !important; }
58
+ .flex#{$breakstring}-self-center { align-self: center !important; }
59
+ .flex#{$breakstring}-self-baseline { align-self: baseline !important; }
60
+ .flex#{$breakstring}-self-stretch { align-self: stretch !important; }
61
+
62
+ // Shorthand for equal width and height cols
63
+ .flex#{$breakstring}-item-equal {
64
+ flex-grow: 1;
65
+ flex-basis: 0;
66
+ }
67
+ }
68
+
69
+ // Generate basic flexbox classes
70
+ @include flexUtility();
71
+
72
+ // Loop through the breakpoint values to create responsive classes
73
+ @each $breakpoint in map-keys($breakpoints) {
74
+
75
+ // Loop through the spacer values
76
+ @include breakpoint($breakpoint) {
77
+ @include flexUtility($breakpoint);
78
+ }
79
+
80
+ }
@@ -1,109 +1,96 @@
1
1
  // Layout
2
2
  // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
3
- // stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after
4
- // stylelint-disable rule-non-nested-empty-line-before
3
+ // stylelint-disable comment-empty-line-before
5
4
 
6
- // position utilites
5
+ /* Set position to static */
7
6
  .position-static { position: static !important; }
7
+ /* Set position to relative */
8
8
  .position-relative { position: relative !important; }
9
+ /* Set position to absolute */
9
10
  .position-absolute { position: absolute !important; }
11
+ /* Set position to fixed */
10
12
  .position-fixed { position: fixed !important; }
11
13
 
14
+ /* Set top 0 */
12
15
  .top-0 { top: 0 !important; }
16
+ /* Set right 0 */
13
17
  .right-0 { right: 0 !important; }
18
+ /* Set bottom 0 */
14
19
  .bottom-0 { bottom: 0 !important; }
20
+ /* Set left 0 */
15
21
  .left-0 { left: 0 !important; }
16
22
 
17
- // Vertical alignment
23
+ /* Vertical align middle */
18
24
  .v-align-middle { vertical-align: middle !important; }
25
+ /* Vertical align top */
19
26
  .v-align-top { vertical-align: top !important; }
27
+ /* Vertical align bottom */
20
28
  .v-align-bottom { vertical-align: bottom !important; }
29
+ /* Vertical align to the top of the text */
21
30
  .v-align-text-top { vertical-align: text-top !important; }
31
+ /* Vertical align to the bottom of the text */
22
32
  .v-align-text-bottom { vertical-align: text-bottom !important; }
23
33
 
24
34
  // Overflow utilities
25
35
  // overflow-hidden can also be used to create a new
26
36
  // block formatting context or clear floats.
37
+ /* Set the overflow hidden */
27
38
  .overflow-hidden { overflow: hidden !important; }
39
+ /* Set the overflow scroll */
28
40
  .overflow-scroll { overflow: scroll !important; }
41
+ /* Set the overflow auto */
29
42
  .overflow-auto { overflow: auto !important; }
30
43
 
31
44
  // Clear floats
45
+ /* Clear floats around the element */
32
46
  .clearfix {
33
47
  @include clearfix;
34
48
  }
35
49
 
36
50
  // Floats
51
+ /* Float to the right */
37
52
  .float-right { float: right !important; }
53
+ /* Float to the left */
38
54
  .float-left { float: left !important; }
55
+ /* Don't float left or right */
56
+ .float-none { float: none !important; }
39
57
 
40
58
  // Responsive float utlities
41
59
  // .float-md-left, .float-lg-right, ...
42
60
  @each $breakpoint in map-keys($breakpoints) {
43
61
  @include breakpoint($breakpoint) {
62
+ /* Float to the left at the #{$breakpoint} breakpoint */
44
63
  .float-#{$breakpoint}-left { float: left !important; }
64
+ /* Float to the right at the #{$breakpoint} breakpoint */
45
65
  .float-#{$breakpoint}-right { float: right !important; }
66
+ /* No float at the #{$breakpoint} breakpoint */
67
+ .float-#{$breakpoint}-none { float: none !important; }
46
68
  }
47
69
  }
48
70
 
49
71
  // Width and height utilities, helpful in combination
50
72
  // with display-table utilities and images
73
+ /* Max width 100% */
51
74
  .width-fit { max-width: 100% !important; }
75
+ /* Set the width to 100% */
52
76
  .width-full { width: 100% !important; }
77
+ /* Set the height to 100% */
53
78
  .height-full { height: 100% !important; }
54
79
 
55
- // Remove min-width from element
80
+ /* Remove min-width from element */
56
81
  .min-width-0 { min-width: 0 !important; }
57
82
 
58
- // Visibility utilities
59
- .v-hidden { visibility: hidden !important; }
60
- .v-visible { visibility: visible !important; }
83
+ // Direction utilities
61
84
 
62
- // Display utilites
63
- .d-table { display: table !important; }
64
- .d-table-cell { display: table-cell !important; }
65
- .table-fixed { table-layout: fixed !important; }
85
+ .direction-rtl { direction: rtl !important; }
66
86
 
67
- .d-block { display: block !important; }
68
- .d-inline { display: inline !important; }
69
- .d-inline-block { display: inline-block !important; }
70
- .d-none { display: none !important; }
87
+ .direction-ltr { direction: ltr !important; }
71
88
 
72
- // Responsive display utlities
73
- // .d-sm-none, .d-lg-inline, ...
74
89
  @each $breakpoint in map-keys($breakpoints) {
75
90
  @include breakpoint($breakpoint) {
76
- .d-#{$breakpoint}-table { display: table !important; }
77
- .d-#{$breakpoint}-table-cell { display: table-cell !important; }
78
- .d-#{$breakpoint}-block { display: block !important; }
79
- .d-#{$breakpoint}-inline { display: inline !important; }
80
- .d-#{$breakpoint}-inline-block { display: inline-block !important; }
81
- .d-#{$breakpoint}-none { display: none !important; }
82
- }
83
- }
84
-
85
- // Hide utilities for each breakpoint
86
- // Each hide utility only applies to one breakpoint range.
87
- @media (max-width: $width-sm) {
88
- .hide-sm {
89
- display: none !important;
90
- }
91
- }
92
-
93
- @media (min-width: $width-sm) and (max-width: $width-md) {
94
- .hide-md {
95
- display: none !important;
96
- }
97
- }
98
-
99
- @media (min-width: $width-md) and (max-width: $width-lg) {
100
- .hide-lg {
101
- display: none !important;
102
- }
103
- }
104
-
105
- @media (min-width: $width-lg) {
106
- .hide-xl {
107
- display: none !important;
91
+ /* Set the direction to ltr at the #{$breakpoint} breakpoint */
92
+ .direction-#{$breakpoint}-rtl { direction: rtl !important; }
93
+ /* Set the direction to ltr at the #{$breakpoint} breakpoint */
94
+ .direction-#{$breakpoint}-ltr { direction: ltr !important; }
108
95
  }
109
96
  }
@@ -1,27 +1,47 @@
1
1
  // Margin spacer utilities
2
- // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
3
3
  @for $i from 1 through length($spacers) {
4
4
  $size: #{nth($spacers, $i)};
5
5
  $scale: #{$i - 1};
6
6
 
7
- // .m-0, .m-1, .m-2...
7
+ /* Set a #{$size} margin to all sides */
8
8
  .m-#{$scale} { margin : #{$size} !important; }
9
+ /* Set a #{$size} margin on the top */
9
10
  .mt-#{$scale} { margin-top : #{$size} !important; }
11
+ /* Set a #{$size} margin on the right */
10
12
  .mr-#{$scale} { margin-right : #{$size} !important; }
13
+ /* Set a #{$size} margin on the bottom */
11
14
  .mb-#{$scale} { margin-bottom: #{$size} !important; }
15
+ /* Set a #{$size} margin on the left */
12
16
  .ml-#{$scale} { margin-left : #{$size} !important; }
17
+ /* Set a negative #{$size} margin on top */
18
+ .mt-n#{$scale} { margin-top : -#{$size} !important; }
19
+ /* Set a negative #{$size} margin on the right */
20
+ .mr-n#{$scale} { margin-right : -#{$size} !important; }
21
+ /* Set a negative #{$size} margin on the bottom */
22
+ .mb-n#{$scale} { margin-bottom: -#{$size} !important; }
23
+ /* Set a negative #{$size} margin on the left */
24
+ .ml-n#{$scale} { margin-left : -#{$size} !important; }
13
25
 
26
+ /* Set a #{$size} margin on the left & right */
14
27
  .mx-#{$scale} {
15
28
  margin-right: #{$size} !important;
16
29
  margin-left : #{$size} !important;
17
30
  }
18
31
 
32
+ /* Set a #{$size} margin on the top & bottom */
19
33
  .my-#{$scale} {
20
34
  margin-top : #{$size} !important;
21
35
  margin-bottom: #{$size} !important;
22
36
  }
23
37
  }
24
38
 
39
+ /* Set an auto margin on left & right */
40
+ .mx-auto {
41
+ margin-right: auto !important;
42
+ margin-left: auto !important;
43
+ }
44
+
25
45
  // Loop through the breakpoint values
26
46
  @each $breakpoint in map-keys($breakpoints) {
27
47
 
@@ -31,18 +51,32 @@
31
51
  $size: #{nth($spacers, $i)}; // sm, md, lg, xl
32
52
  $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
33
53
 
34
- // .m-sm-0, .m-md-1, .m-lg-2...
54
+ /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
35
55
  .m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
56
+ /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
36
57
  .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
58
+ /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
37
59
  .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
60
+ /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
38
61
  .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
62
+ /* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
39
63
  .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
64
+ /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
65
+ .mt-#{$breakpoint}-n#{$scale} { margin-top : -#{$size} !important; }
66
+ /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
67
+ .mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; }
68
+ /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
69
+ .mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; }
70
+ /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
71
+ .ml-#{$breakpoint}-n#{$scale} { margin-left : -#{$size} !important; }
40
72
 
73
+ /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
41
74
  .mx-#{$breakpoint}-#{$scale} {
42
75
  margin-right: #{$size} !important;
43
76
  margin-left: #{$size} !important;
44
77
  }
45
78
 
79
+ /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
46
80
  .my-#{$breakpoint}-#{$scale} {
47
81
  margin-top: #{$size} !important;
48
82
  margin-bottom: #{$size} !important;
@@ -50,9 +84,3 @@
50
84
  }
51
85
  }
52
86
  }
53
-
54
- // Auto
55
- .mx-auto {
56
- margin-right: auto !important;
57
- margin-left: auto !important;
58
- }