github-docs 0.0.1

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 (53) hide show
  1. checksums.yaml +7 -0
  2. data/_includes/sidebar.html +66 -0
  3. data/_layouts/default.html +50 -0
  4. data/_layouts/home.html +4 -0
  5. data/_layouts/page.html +4 -0
  6. data/_layouts/post.html +4 -0
  7. data/_sass/github-docs.scss +215 -0
  8. data/_sass/primer-base/base.scss +84 -0
  9. data/_sass/primer-base/index.scss +3 -0
  10. data/_sass/primer-base/normalize.scss +421 -0
  11. data/_sass/primer-base/typography-base.scss +86 -0
  12. data/_sass/primer-layout/columns.scss +54 -0
  13. data/_sass/primer-layout/container.scss +30 -0
  14. data/_sass/primer-layout/grid-offset.scss +19 -0
  15. data/_sass/primer-layout/grid.scss +64 -0
  16. data/_sass/primer-layout/index.scss +4 -0
  17. data/_sass/primer-markdown/blob-csv.scss +27 -0
  18. data/_sass/primer-markdown/code.scss +63 -0
  19. data/_sass/primer-markdown/headings.scss +65 -0
  20. data/_sass/primer-markdown/images.scss +119 -0
  21. data/_sass/primer-markdown/index.scss +7 -0
  22. data/_sass/primer-markdown/lists.scss +76 -0
  23. data/_sass/primer-markdown/markdown-body.scss +106 -0
  24. data/_sass/primer-markdown/tables.scss +33 -0
  25. data/_sass/primer-support/index.scss +11 -0
  26. data/_sass/primer-support/mixins/buttons.scss +160 -0
  27. data/_sass/primer-support/mixins/layout.scss +58 -0
  28. data/_sass/primer-support/mixins/misc.scss +29 -0
  29. data/_sass/primer-support/mixins/typography.scss +84 -0
  30. data/_sass/primer-support/variables/color-system.scss +114 -0
  31. data/_sass/primer-support/variables/colors.scss +67 -0
  32. data/_sass/primer-support/variables/layout.scss +78 -0
  33. data/_sass/primer-support/variables/misc.scss +40 -0
  34. data/_sass/primer-support/variables/typography.scss +43 -0
  35. data/_sass/primer-utilities/animations.scss +184 -0
  36. data/_sass/primer-utilities/borders.scss +100 -0
  37. data/_sass/primer-utilities/box-shadow.scss +26 -0
  38. data/_sass/primer-utilities/colors.scss +106 -0
  39. data/_sass/primer-utilities/details.scss +18 -0
  40. data/_sass/primer-utilities/flexbox.scss +52 -0
  41. data/_sass/primer-utilities/index.scss +13 -0
  42. data/_sass/primer-utilities/layout.scss +85 -0
  43. data/_sass/primer-utilities/margin.scss +53 -0
  44. data/_sass/primer-utilities/padding.scss +54 -0
  45. data/_sass/primer-utilities/typography.scss +215 -0
  46. data/_sass/primer-utilities/visibility-display.scss +87 -0
  47. data/_sass/rouge.scss +209 -0
  48. data/assets/css/index.scss +16 -0
  49. data/assets/imgs/back.svg +1 -0
  50. data/assets/js/anchor.min.js +6 -0
  51. data/assets/js/index.js +52 -0
  52. data/readme.md +34 -0
  53. metadata +156 -0
@@ -0,0 +1,100 @@
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 on all sides */
5
+ .border { border: $border !important; }
6
+
7
+ /* Add a gray border to the left and right */
8
+ .border-y {
9
+ border-top: $border !important;
10
+ border-bottom: $border !important;
11
+ }
12
+
13
+ /* Remove borders from all sides */
14
+ .border-0 { border: 0 !important; }
15
+
16
+ .border-dashed { border-style: dashed !important; }
17
+
18
+ /* Use with .border to turn the border blue */
19
+ .border-blue { border-color: $border-blue !important; }
20
+ /* Use with .border to turn the border blue-light */
21
+ .border-blue-light { border-color: $border-blue-light !important; }
22
+ /* Use with .border to turn the border green */
23
+ .border-green { border-color: $border-green !important; }
24
+ /* Use with .border to turn the border green light */
25
+ .border-green-light { border-color: $border-green-light !important; }
26
+ /* Use with .border to turn the border red */
27
+ .border-red { border-color: $border-red !important; }
28
+ /* Use with .border to turn the border red-light */
29
+ .border-red-light { border-color: $border-red-light !important; }
30
+ /* Use with .border to turn the border purple */
31
+ .border-purple { border-color: $border-purple !important; }
32
+ /* Use with .border to turn the border yellow */
33
+ .border-yellow { border-color: $border-yellow !important; }
34
+ /* Use with .border to turn the border gray-light */
35
+ .border-gray-light { border-color: $border-gray-light !important; }
36
+ /* Use with .border to turn the border gray-dark */
37
+ .border-gray-dark { border-color: $border-gray-dark !important; }
38
+ /* Use with .border to turn the border rgba black 0.15 */
39
+ .border-black-fade { border-color: $border-black-fade !important; }
40
+
41
+ $edges: (
42
+ top: (top-left, top-right),
43
+ right: (top-right, bottom-right),
44
+ bottom: (bottom-right, bottom-left),
45
+ left: (bottom-left, top-left)
46
+ );
47
+
48
+ @each $breakpoint, $variant in $responsive-variants {
49
+ @include breakpoint($breakpoint) {
50
+ /* Add a gray border */
51
+ /* Add a gray border to the top */
52
+ .border#{$variant}-top { border-top: $border !important; }
53
+ /* Add a gray border to the right */
54
+ .border#{$variant}-right { border-right: $border !important; }
55
+ /* Add a gray border to the bottom */
56
+ .border#{$variant}-bottom { border-bottom: $border !important; }
57
+ /* Add a gray border to the left */
58
+ .border#{$variant}-left { border-left: $border !important; }
59
+
60
+ /* Remove the top border */
61
+ .border#{$variant}-top-0 { border-top: 0 !important; }
62
+ /* Remove the right border */
63
+ .border#{$variant}-right-0 { border-right: 0 !important; }
64
+ /* Remove the bottom border */
65
+ .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
66
+ /* Remove the left border */
67
+ .border#{$variant}-left-0 { border-left: 0 !important; }
68
+
69
+ // Rounded corners
70
+ /* Remove the border-radius */
71
+ .rounded#{$variant}-0 { border-radius: 0 !important; }
72
+ /* Add a border-radius to all corners */
73
+ .rounded#{$variant}-1 { border-radius: $border-radius !important; }
74
+ /* Add a 2x border-radius to all corners */
75
+ .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
76
+
77
+ @each $edge, $corners in $edges {
78
+ .rounded#{$variant}-#{$edge}-0 {
79
+ @each $corner in $corners {
80
+ border-#{$corner}-radius: 0 !important;
81
+ }
82
+ }
83
+
84
+ .rounded#{$variant}-#{$edge}-1 {
85
+ @each $corner in $corners {
86
+ border-#{$corner}-radius: $border-radius !important;
87
+ }
88
+ }
89
+
90
+ .rounded#{$variant}-#{$edge}-2 {
91
+ @each $corner in $corners {
92
+ border-#{$corner}-radius: $border-radius * 2 !important;
93
+ }
94
+ }
95
+ }
96
+ }
97
+ }
98
+
99
+ /* Add a 50% border-radius to make something into a circle */
100
+ .circle { border-radius: 50% !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
+ }
@@ -0,0 +1,106 @@
1
+ // Color utilities
2
+ // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
3
+ // stylelint-disable comment-empty-line-before
4
+
5
+ // background colors
6
+ /* Set the background to $bg-white */
7
+ .bg-white { background-color: $bg-white !important; }
8
+ /* Set the background to $bg-blue */
9
+ .bg-blue { background-color: $bg-blue !important; }
10
+ /* Set the background to $bg-blue-light */
11
+ .bg-blue-light { background-color: $bg-blue-light !important; }
12
+ /* Set the background to $bg-gray-dark */
13
+ .bg-gray-dark { background-color: $bg-gray-dark !important; }
14
+ /* Set the background to $bg-gray */
15
+ .bg-gray { background-color: $bg-gray !important; }
16
+ /* Set the background to $bg-gray-light */
17
+ .bg-gray-light { background-color: $bg-gray-light !important; }
18
+ /* Set the background to $bg-green */
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 */
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($black, 0.065), rgba($black, 0)) !important;
37
+ background-repeat: no-repeat !important;
38
+ background-size: 100% 200px !important;
39
+ }
40
+
41
+ // text colors
42
+ /* Set the text color to $text-blue */
43
+ .text-blue { color: $text-blue !important; }
44
+ /* Set the text color to $text-red */
45
+ .text-red { color: $text-red !important; }
46
+ /* Set the text color to $text-gray-light */
47
+ .text-gray-light { color: $text-gray-light !important; }
48
+ /* Set the text color to $text-gray */
49
+ .text-gray { color: $text-gray !important; }
50
+ /* Set the text color to $text-gray-dark */
51
+ .text-gray-dark { color: $text-gray-dark !important; }
52
+ /* Set the text color to $text-green */
53
+ .text-green { color: $text-green !important; }
54
+ /* Set the text color to $text-orange */
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 */
59
+ .text-purple { color: $text-purple !important; }
60
+ /* Set the text color to $text-white */
61
+ .text-white { color: $text-white !important; }
62
+ /* Set the text color to inherit */
63
+ .text-inherit { color: inherit !important; }
64
+
65
+ // Text states
66
+ // These can probably all be regular utilities
67
+ .text-pending { color: $yellow-800 !important; }
68
+ // Separate text and background colors in future to improve a11y
69
+ .bg-pending { color: $yellow-700 !important; }
70
+
71
+ // Link colors
72
+ // Sets the links color to $text-gray and $text-blue on hover
73
+ .link-gray {
74
+ color: $text-gray !important;
75
+
76
+ &:hover {
77
+ color: $text-blue !important;
78
+ }
79
+ }
80
+
81
+ // Sets the links color to $text-gray-dark and $text-blue on hover
82
+ .link-gray-dark {
83
+ color: $text-gray-dark !important;
84
+
85
+ &:hover {
86
+ color: $text-blue !important;
87
+ }
88
+ }
89
+
90
+ /* Set the link color to $text-blue on hover
91
+ Useful when you want only part of a link to turn blue on hover */
92
+ .link-hover-blue {
93
+ &:hover {
94
+ color: $text-blue !important;
95
+ }
96
+ }
97
+
98
+ /* Make a link $text-gray, then $text-blue on hover and removes the underline */
99
+ .muted-link {
100
+ color: $text-gray !important;
101
+
102
+ &:hover {
103
+ color: $text-blue !important;
104
+ text-decoration: none;
105
+ }
106
+ }
@@ -0,0 +1,18 @@
1
+ // stylelint-disable selector-max-type
2
+ .details-overlay[open] > summary::before {
3
+ position: fixed;
4
+ top: 0;
5
+ right: 0;
6
+ bottom: 0;
7
+ left: 0;
8
+ z-index: 80;
9
+ display: block;
10
+ cursor: default;
11
+ content: " ";
12
+ background: transparent;
13
+ }
14
+
15
+ .details-overlay-dark[open] > summary::before {
16
+ z-index: 99;
17
+ background: $black-fade-50;
18
+ }
@@ -0,0 +1,52 @@
1
+ // Flex utility classes
2
+ // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
3
+ // stylelint-disable comment-empty-line-before
4
+
5
+ @each $breakpoint, $variant in $responsive-variants {
6
+ @include breakpoint($breakpoint) {
7
+ // Flexbox classes
8
+ // Container
9
+ .flex#{$variant}-row { flex-direction: row !important; }
10
+ .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
11
+ .flex#{$variant}-column { flex-direction: column !important; }
12
+
13
+ .flex#{$variant}-wrap { flex-wrap: wrap !important; }
14
+ .flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
15
+
16
+ .flex#{$variant}-justify-start { justify-content: flex-start !important; }
17
+ .flex#{$variant}-justify-end { justify-content: flex-end !important; }
18
+ .flex#{$variant}-justify-center { justify-content: center !important; }
19
+ .flex#{$variant}-justify-between { justify-content: space-between !important; }
20
+ .flex#{$variant}-justify-around { justify-content: space-around !important; }
21
+
22
+ .flex#{$variant}-items-start { align-items: flex-start !important; }
23
+ .flex#{$variant}-items-end { align-items: flex-end !important; }
24
+ .flex#{$variant}-items-center { align-items: center !important; }
25
+ .flex#{$variant}-items-baseline { align-items: baseline !important; }
26
+ .flex#{$variant}-items-stretch { align-items: stretch !important; }
27
+
28
+ .flex#{$variant}-content-start { align-content: flex-start !important; }
29
+ .flex#{$variant}-content-end { align-content: flex-end !important; }
30
+ .flex#{$variant}-content-center { align-content: center !important; }
31
+ .flex#{$variant}-content-between { align-content: space-between !important; }
32
+ .flex#{$variant}-content-around { align-content: space-around !important; }
33
+ .flex#{$variant}-content-stretch { align-content: stretch !important; }
34
+
35
+ // Item
36
+ .flex#{$variant}-auto { flex: 1 1 auto !important; }
37
+ .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
38
+
39
+ .flex#{$variant}-self-auto { align-self: auto !important; }
40
+ .flex#{$variant}-self-start { align-self: flex-start !important; }
41
+ .flex#{$variant}-self-end { align-self: flex-end !important; }
42
+ .flex#{$variant}-self-center { align-self: center !important; }
43
+ .flex#{$variant}-self-baseline { align-self: baseline !important; }
44
+ .flex#{$variant}-self-stretch { align-self: stretch !important; }
45
+
46
+ // Shorthand for equal width and height cols
47
+ .flex#{$variant}-item-equal {
48
+ flex-grow: 1;
49
+ flex-basis: 0;
50
+ }
51
+ }
52
+ }
@@ -0,0 +1,13 @@
1
+ // utilities
2
+ @import "./animations.scss";
3
+ @import "./borders.scss";
4
+ @import "./box-shadow.scss";
5
+ @import "./colors.scss";
6
+ @import "./details.scss";
7
+ @import "./flexbox.scss";
8
+ @import "./layout.scss";
9
+ @import "./margin.scss";
10
+ @import "./padding.scss";
11
+ @import "./typography.scss";
12
+ // Visibility and display should always come last in the imports so that they override other utilities with !important
13
+ @import "./visibility-display.scss";
@@ -0,0 +1,85 @@
1
+ // Layout
2
+ // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
3
+ // stylelint-disable comment-empty-line-before
4
+
5
+ /* Set position to static */
6
+ .position-static { position: static !important; }
7
+ /* Set position to relative */
8
+ .position-relative { position: relative !important; }
9
+ /* Set position to absolute */
10
+ .position-absolute { position: absolute !important; }
11
+ /* Set position to fixed */
12
+ .position-fixed { position: fixed !important; }
13
+
14
+ /* Set top 0 */
15
+ .top-0 { top: 0 !important; }
16
+ /* Set right 0 */
17
+ .right-0 { right: 0 !important; }
18
+ /* Set bottom 0 */
19
+ .bottom-0 { bottom: 0 !important; }
20
+ /* Set left 0 */
21
+ .left-0 { left: 0 !important; }
22
+
23
+ /* Vertical align middle */
24
+ .v-align-middle { vertical-align: middle !important; }
25
+ /* Vertical align top */
26
+ .v-align-top { vertical-align: top !important; }
27
+ /* Vertical align bottom */
28
+ .v-align-bottom { vertical-align: bottom !important; }
29
+ /* Vertical align to the top of the text */
30
+ .v-align-text-top { vertical-align: text-top !important; }
31
+ /* Vertical align to the bottom of the text */
32
+ .v-align-text-bottom { vertical-align: text-bottom !important; }
33
+ /* Vertical align to the parent's baseline */
34
+ .v-align-baseline { vertical-align: baseline !important; }
35
+
36
+ // Overflow utilities
37
+ // overflow-hidden can also be used to create a new
38
+ // block formatting context or clear floats.
39
+ /* Set the overflow hidden */
40
+ .overflow-hidden { overflow: hidden !important; }
41
+ /* Set the overflow scroll */
42
+ .overflow-scroll { overflow: scroll !important; }
43
+ /* Set the overflow auto */
44
+ .overflow-auto { overflow: auto !important; }
45
+
46
+ // Clear floats
47
+ /* Clear floats around the element */
48
+ .clearfix {
49
+ @include clearfix;
50
+ }
51
+
52
+ // Floats
53
+ @each $breakpoint, $variant in $responsive-variants {
54
+ @include breakpoint($breakpoint) {
55
+ /* Float to the left */
56
+ .float#{$variant}-left { float: left !important; }
57
+ /* Float to the right */
58
+ .float#{$variant}-right { float: right !important; }
59
+ /* No float */
60
+ .float#{$variant}-none { float: none !important; }
61
+ }
62
+ }
63
+
64
+ // Width and height utilities, helpful in combination
65
+ // with display-table utilities and images
66
+ /* Max width 100% */
67
+ .width-fit { max-width: 100% !important; }
68
+ /* Set the width to 100% */
69
+ .width-full { width: 100% !important; }
70
+ /* Max height 100% */
71
+ .height-fit { max-height: 100% !important; }
72
+ /* Set the height to 100% */
73
+ .height-full { height: 100% !important; }
74
+
75
+ /* Remove min-width from element */
76
+ .min-width-0 { min-width: 0 !important; }
77
+
78
+ @each $breakpoint, $variant in $responsive-variants {
79
+ @include breakpoint($breakpoint) {
80
+ /* Set the direction to rtl */
81
+ .direction#{$variant}-rtl { direction: rtl !important; }
82
+ /* Set the direction to ltr */
83
+ .direction#{$variant}-ltr { direction: ltr !important; }
84
+ }
85
+ }
@@ -0,0 +1,53 @@
1
+ // Margin spacer utilities
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
3
+
4
+ // Loop through the breakpoint values
5
+ @each $breakpoint, $variant in $responsive-variants {
6
+ @include breakpoint($breakpoint) {
7
+ // Loop through the spacer values
8
+ @for $i from 1 through length($spacers) {
9
+ $size: nth($spacers, $i); // sm, md, lg, xl
10
+ $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
11
+
12
+ /* Set a $size margin to all sides at $breakpoint */
13
+ .m#{$variant}-#{$scale} { margin: $size !important; }
14
+ /* Set a $size margin on the top at $breakpoint */
15
+ .mt#{$variant}-#{$scale} { margin-top: $size !important; }
16
+ /* Set a $size margin on the right at $breakpoint */
17
+ .mr#{$variant}-#{$scale} { margin-right: $size !important; }
18
+ /* Set a $size margin on the bottom at $breakpoint */
19
+ .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
20
+ /* Set a $size margin on the left at $breakpoint */
21
+ .ml#{$variant}-#{$scale} { margin-left: $size !important; }
22
+
23
+ @if ($size != 0) {
24
+ /* Set a negative $size margin on top at $breakpoint */
25
+ .mt#{$variant}-n#{$scale} { margin-top : -$size !important; }
26
+ /* Set a negative $size margin on the right at $breakpoint */
27
+ .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
28
+ /* Set a negative $size margin on the bottom at $breakpoint */
29
+ .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
30
+ /* Set a negative $size margin on the left at $breakpoint */
31
+ .ml#{$variant}-n#{$scale} { margin-left : -$size !important; }
32
+ }
33
+
34
+ /* Set a $size margin on the left & right at $breakpoint */
35
+ .mx#{$variant}-#{$scale} {
36
+ margin-right: $size !important;
37
+ margin-left: $size !important;
38
+ }
39
+
40
+ /* Set a $size margin on the top & bottom at $breakpoint */
41
+ .my#{$variant}-#{$scale} {
42
+ margin-top: $size !important;
43
+ margin-bottom: $size !important;
44
+ }
45
+ }
46
+
47
+ /* responsive horizontal auto margins */
48
+ .mx#{$variant}-auto {
49
+ margin-right: auto !important;
50
+ margin-left: auto !important;
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,54 @@
1
+ // Padding spacer utilities
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
3
+ // stylelint-disable comment-empty-line-before
4
+
5
+ // Responsive padding spacer utilities
6
+ @each $breakpoint, $variant in $responsive-variants {
7
+ @include breakpoint($breakpoint) {
8
+ // Loop through the spacer values
9
+ @for $i from 1 through length($spacers) {
10
+ $size: nth($spacers, $i); // xs, sm, md, lg, xl
11
+ $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
12
+
13
+ /* Set a $size padding to all sides at $breakpoint */
14
+ .p#{$variant}-#{$scale} { padding: $size !important; }
15
+ /* Set a $size padding to the top at $breakpoint */
16
+ .pt#{$variant}-#{$scale} { padding-top: $size !important; }
17
+ /* Set a $size padding to the right at $breakpoint */
18
+ .pr#{$variant}-#{$scale} { padding-right: $size !important; }
19
+ /* Set a $size padding to the bottom at $breakpoint */
20
+ .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
21
+ /* Set a $size padding to the left at $breakpoint */
22
+ .pl#{$variant}-#{$scale} { padding-left: $size !important; }
23
+
24
+ /* Set a $size padding to the left & right at $breakpoint */
25
+ .px#{$variant}-#{$scale} {
26
+ padding-right: $size !important;
27
+ padding-left: $size !important;
28
+ }
29
+
30
+ /* Set a $size padding to the top & bottom at $breakpoint */
31
+ .py#{$variant}-#{$scale} {
32
+ padding-top: $size !important;
33
+ padding-bottom: $size !important;
34
+ }
35
+ }
36
+ }
37
+ }
38
+
39
+ // responsive padding for containers
40
+ // stylelint-disable-next-line primer/selector-no-utility
41
+ .p-responsive {
42
+ padding-right: $spacer-3 !important;
43
+ padding-left: $spacer-3 !important;
44
+
45
+ @include breakpoint(sm) {
46
+ padding-right: $spacer-6 !important;
47
+ padding-left: $spacer-6 !important;
48
+ }
49
+
50
+ @include breakpoint(lg) {
51
+ padding-right: $spacer-3 !important;
52
+ padding-left: $spacer-3 !important;
53
+ }
54
+ }