github-docs 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/_includes/sidebar.html +66 -0
- data/_layouts/default.html +50 -0
- data/_layouts/home.html +4 -0
- data/_layouts/page.html +4 -0
- data/_layouts/post.html +4 -0
- data/_sass/github-docs.scss +215 -0
- data/_sass/primer-base/base.scss +84 -0
- data/_sass/primer-base/index.scss +3 -0
- data/_sass/primer-base/normalize.scss +421 -0
- data/_sass/primer-base/typography-base.scss +86 -0
- data/_sass/primer-layout/columns.scss +54 -0
- data/_sass/primer-layout/container.scss +30 -0
- data/_sass/primer-layout/grid-offset.scss +19 -0
- data/_sass/primer-layout/grid.scss +64 -0
- data/_sass/primer-layout/index.scss +4 -0
- data/_sass/primer-markdown/blob-csv.scss +27 -0
- data/_sass/primer-markdown/code.scss +63 -0
- data/_sass/primer-markdown/headings.scss +65 -0
- data/_sass/primer-markdown/images.scss +119 -0
- data/_sass/primer-markdown/index.scss +7 -0
- data/_sass/primer-markdown/lists.scss +76 -0
- data/_sass/primer-markdown/markdown-body.scss +106 -0
- data/_sass/primer-markdown/tables.scss +33 -0
- data/_sass/primer-support/index.scss +11 -0
- data/_sass/primer-support/mixins/buttons.scss +160 -0
- data/_sass/primer-support/mixins/layout.scss +58 -0
- data/_sass/primer-support/mixins/misc.scss +29 -0
- data/_sass/primer-support/mixins/typography.scss +84 -0
- data/_sass/primer-support/variables/color-system.scss +114 -0
- data/_sass/primer-support/variables/colors.scss +67 -0
- data/_sass/primer-support/variables/layout.scss +78 -0
- data/_sass/primer-support/variables/misc.scss +40 -0
- data/_sass/primer-support/variables/typography.scss +43 -0
- data/_sass/primer-utilities/animations.scss +184 -0
- data/_sass/primer-utilities/borders.scss +100 -0
- data/_sass/primer-utilities/box-shadow.scss +26 -0
- data/_sass/primer-utilities/colors.scss +106 -0
- data/_sass/primer-utilities/details.scss +18 -0
- data/_sass/primer-utilities/flexbox.scss +52 -0
- data/_sass/primer-utilities/index.scss +13 -0
- data/_sass/primer-utilities/layout.scss +85 -0
- data/_sass/primer-utilities/margin.scss +53 -0
- data/_sass/primer-utilities/padding.scss +54 -0
- data/_sass/primer-utilities/typography.scss +215 -0
- data/_sass/primer-utilities/visibility-display.scss +87 -0
- data/_sass/rouge.scss +209 -0
- data/assets/css/index.scss +16 -0
- data/assets/imgs/back.svg +1 -0
- data/assets/js/anchor.min.js +6 -0
- data/assets/js/index.js +52 -0
- data/readme.md +34 -0
- 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
|
+
}
|