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.
- checksums.yaml +4 -4
- data/_layouts/default.html +1 -1
- data/_sass/jekyll-theme-primer.scss +0 -1
- data/_sass/primer-base/CHANGELOG.md +20 -0
- data/_sass/primer-base/README.md +1 -1
- data/_sass/primer-base/build/build.css +1 -2
- data/_sass/primer-base/build/index.js +1 -0
- data/_sass/primer-base/index.scss +1 -1
- data/_sass/primer-base/lib/base.scss +1 -0
- data/_sass/{normalize.css → primer-base/lib}/normalize.scss +6 -2
- data/_sass/primer-base/lib/typography-base.scss +1 -1
- data/_sass/primer-base/package.json +36 -34
- data/_sass/primer-layout/CHANGELOG.md +19 -0
- data/_sass/primer-layout/README.md +3 -7
- data/_sass/primer-layout/build/build.css +1 -2
- data/_sass/primer-layout/build/index.js +1 -0
- data/_sass/primer-layout/index.scss +1 -0
- data/_sass/primer-layout/lib/grid.scss +0 -1
- data/_sass/primer-layout/package.json +35 -32
- data/_sass/primer-markdown/CHANGELOG.md +29 -0
- data/_sass/primer-markdown/README.md +1 -6
- data/_sass/primer-markdown/build/build.css +1 -2
- data/_sass/primer-markdown/build/index.js +1 -0
- data/_sass/primer-markdown/lib/blob-csv.scss +3 -3
- data/_sass/primer-markdown/lib/code.scss +2 -2
- data/_sass/primer-markdown/lib/headings.scss +4 -4
- data/_sass/primer-markdown/lib/images.scss +3 -3
- data/_sass/primer-markdown/lib/lists.scss +1 -1
- data/_sass/primer-markdown/lib/markdown-body.scss +9 -9
- data/_sass/primer-markdown/lib/tables.scss +9 -5
- data/_sass/primer-markdown/package.json +34 -31
- data/_sass/primer-support/CHANGELOG.md +85 -0
- data/_sass/primer-support/README.md +1 -1
- data/_sass/primer-support/index.scss +5 -1
- data/_sass/primer-support/lib/mixins/buttons.scss +156 -0
- data/_sass/primer-support/lib/mixins/misc.scss +1 -1
- data/_sass/primer-support/lib/mixins/typography.scss +4 -4
- data/_sass/primer-support/lib/variables/color-system.scss +114 -0
- data/_sass/primer-support/lib/variables/colors.scss +64 -0
- data/_sass/primer-support/lib/variables/layout.scss +58 -0
- data/_sass/primer-support/lib/variables/misc.scss +45 -0
- data/_sass/primer-support/lib/variables/typography.scss +35 -0
- data/_sass/primer-support/package.json +33 -29
- data/_sass/primer-utilities/CHANGELOG.md +130 -0
- data/_sass/primer-utilities/README.md +2 -2
- data/_sass/primer-utilities/build/build.css +1 -2
- data/_sass/primer-utilities/build/index.js +1 -2
- data/_sass/primer-utilities/index.scss +5 -1
- data/_sass/primer-utilities/lib/animations.scss +8 -11
- data/_sass/primer-utilities/lib/borders.scss +61 -0
- data/_sass/primer-utilities/lib/box-shadow.scss +26 -0
- data/_sass/primer-utilities/lib/colors.scss +72 -10
- data/_sass/primer-utilities/lib/flexbox.scss +80 -0
- data/_sass/primer-utilities/lib/layout.scss +37 -50
- data/_sass/primer-utilities/lib/margin.scss +37 -9
- data/_sass/primer-utilities/lib/padding.scss +16 -3
- data/_sass/primer-utilities/lib/typography.scss +65 -9
- data/_sass/primer-utilities/lib/visibility-display.scss +95 -0
- data/_sass/primer-utilities/package.json +35 -35
- metadata +17 -10
- data/_sass/normalize.css/CHANGELOG.md +0 -135
- data/_sass/normalize.css/LICENSE.md +0 -21
- data/_sass/normalize.css/README.md +0 -128
- data/_sass/normalize.css/package.json +0 -111
- data/_sass/primer-support/lib/variables.scss +0 -179
- 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,
|
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: $
|
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
|
-
|
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
|
4
|
-
// stylelint-disable rule-non-nested-empty-line-before
|
3
|
+
// stylelint-disable comment-empty-line-before
|
5
4
|
|
6
|
-
|
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
|
-
|
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
|
-
|
80
|
+
/* Remove min-width from element */
|
56
81
|
.min-width-0 { min-width: 0 !important; }
|
57
82
|
|
58
|
-
//
|
59
|
-
.v-hidden { visibility: hidden !important; }
|
60
|
-
.v-visible { visibility: visible !important; }
|
83
|
+
// Direction utilities
|
61
84
|
|
62
|
-
|
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
|
-
.
|
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
|
-
|
77
|
-
.
|
78
|
-
|
79
|
-
.
|
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
|
-
|
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
|
-
|
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
|
-
}
|