jekyll-theme-primer 0.5.3 → 0.5.4
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/README.md +3 -1
- data/_layouts/home.html +4 -0
- data/_layouts/page.html +4 -0
- data/_layouts/post.html +4 -0
- data/_sass/primer-base/lib/base.scss +6 -0
- data/_sass/primer-base/lib/normalize.scss +1 -1
- data/_sass/primer-layout/lib/grid-offset.scss +12 -23
- data/_sass/primer-support/lib/mixins/layout.scss +18 -12
- data/_sass/primer-support/lib/variables/layout.scss +7 -1
- data/_sass/primer-utilities/index.scss +1 -0
- data/_sass/primer-utilities/lib/animations.scss +1 -0
- data/_sass/primer-utilities/lib/borders.scss +71 -36
- data/_sass/primer-utilities/lib/details.scss +18 -0
- data/_sass/primer-utilities/lib/flexbox.scss +45 -73
- data/_sass/primer-utilities/lib/layout.scss +12 -27
- data/_sass/primer-utilities/lib/margin.scss +42 -75
- data/_sass/primer-utilities/lib/padding.scss +26 -56
- data/_sass/primer-utilities/lib/typography.scss +22 -23
- data/_sass/primer-utilities/lib/visibility-display.scss +21 -45
- metadata +15 -43
- data/_sass/primer-base/LICENSE +0 -21
- data/_sass/primer-base/README.md +0 -48
- data/_sass/primer-base/build/build.css +0 -1
- data/_sass/primer-base/build/index.js +0 -1
- data/_sass/primer-base/package.json +0 -73
- data/_sass/primer-layout/LICENSE +0 -21
- data/_sass/primer-layout/README.md +0 -137
- data/_sass/primer-layout/build/build.css +0 -1
- data/_sass/primer-layout/build/index.js +0 -1
- data/_sass/primer-layout/docs/grid.md +0 -392
- data/_sass/primer-layout/package.json +0 -71
- data/_sass/primer-markdown/LICENSE +0 -21
- data/_sass/primer-markdown/README.md +0 -218
- data/_sass/primer-markdown/build/build.css +0 -1
- data/_sass/primer-markdown/build/index.js +0 -1
- data/_sass/primer-markdown/package.json +0 -74
- data/_sass/primer-support/LICENSE +0 -21
- data/_sass/primer-support/README.md +0 -56
- data/_sass/primer-support/docs/breakpoints.md +0 -60
- data/_sass/primer-support/docs/color-system.md +0 -392
- data/_sass/primer-support/docs/spacing.md +0 -40
- data/_sass/primer-support/docs/typography.md +0 -90
- data/_sass/primer-support/package.json +0 -73
- data/_sass/primer-utilities/LICENSE +0 -21
- data/_sass/primer-utilities/README.md +0 -48
- data/_sass/primer-utilities/build/build.css +0 -1
- data/_sass/primer-utilities/build/index.js +0 -1
- data/_sass/primer-utilities/docs/animations.md +0 -75
- data/_sass/primer-utilities/docs/borders.md +0 -127
- data/_sass/primer-utilities/docs/box-shadow.md +0 -107
- data/_sass/primer-utilities/docs/colors.md +0 -232
- data/_sass/primer-utilities/docs/flexbox.md +0 -665
- data/_sass/primer-utilities/docs/layout.md +0 -300
- data/_sass/primer-utilities/docs/margin.md +0 -126
- data/_sass/primer-utilities/docs/padding.md +0 -110
- data/_sass/primer-utilities/docs/typography.md +0 -138
- data/_sass/primer-utilities/package.json +0 -71
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 16e730cf781c1ca7e6207cf9997e7208244de27b37c0e603e4e4309fa3db0be0
|
4
|
+
data.tar.gz: 25ca151cf575a9bf828f7db9f1edbab4f7a8183432b36b99bdc2b4a3e2899efe
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 796102aa486c59b5dd67dc5a72128785de7ab45bf56c9075db425fd3504ff5bb8b7efa3c7096265999302b7d166813ba731fe7c92b0ff52ffda6f35db2ca623c
|
7
|
+
data.tar.gz: daa0adf9f486eda1bff2007ff39d03b23d87d940b6cb8ec8761bdb48355246d2131d0edb983a0df88f49a21ad4947fcda8c27f4adba1c2a429206c293c5c9240
|
data/README.md
CHANGED
@@ -6,6 +6,8 @@
|
|
6
6
|
|
7
7
|
## Usage
|
8
8
|
|
9
|
+
> **_NOTE:_** Primer is now the default theme for GitHub Pages, but you can still specify the theme you're using as below.
|
10
|
+
|
9
11
|
To use the Primer theme:
|
10
12
|
|
11
13
|
1. Add the following to your site's `_config.yml`:
|
@@ -72,7 +74,7 @@ The Primer theme is intended to make it quick and easy for GitHub Pages users to
|
|
72
74
|
|
73
75
|
## Contributing
|
74
76
|
|
75
|
-
Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](CONTRIBUTING.md) for instructions on how to contribute.
|
77
|
+
Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](docs/CONTRIBUTING.md) for instructions on how to contribute.
|
76
78
|
|
77
79
|
### Previewing the theme locally
|
78
80
|
|
data/_layouts/home.html
ADDED
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
@@ -68,6 +68,12 @@ button {
|
|
68
68
|
border-radius: 0;
|
69
69
|
}
|
70
70
|
|
71
|
+
// increase the selector specificity for [hidden]
|
72
|
+
// so that it always overrides utility classes (.d-block, etc.)
|
73
|
+
[hidden][hidden] {
|
74
|
+
display: none !important;
|
75
|
+
}
|
76
|
+
|
71
77
|
details {
|
72
78
|
summary { cursor: pointer; }
|
73
79
|
|
@@ -1,30 +1,19 @@
|
|
1
1
|
// Optional offset options to work with grid.scss
|
2
2
|
|
3
3
|
// Offset Columns
|
4
|
-
.offset-1 { margin-left: (1 / 12 * 100%); }
|
5
|
-
.offset-2 { margin-left: (2 / 12 * 100%); }
|
6
|
-
.offset-3 { margin-left: (3 / 12 * 100%); }
|
7
|
-
.offset-4 { margin-left: (4 / 12 * 100%); }
|
8
|
-
.offset-5 { margin-left: (5 / 12 * 100%); }
|
9
|
-
.offset-6 { margin-left: (6 / 12 * 100%); }
|
10
|
-
.offset-7 { margin-left: (7 / 12 * 100%); }
|
11
|
-
.offset-8 { margin-left: (8 / 12 * 100%); }
|
12
|
-
.offset-9 { margin-left: (9 / 12 * 100%); }
|
13
|
-
.offset-10 { margin-left: (10 / 12 * 100%); }
|
14
|
-
.offset-11 { margin-left: (11 / 12 * 100%); }
|
15
4
|
|
16
|
-
@each $breakpoint in
|
5
|
+
@each $breakpoint, $variant in $responsive-variants {
|
17
6
|
@include breakpoint($breakpoint) {
|
18
|
-
.offset
|
19
|
-
.offset
|
20
|
-
.offset
|
21
|
-
.offset
|
22
|
-
.offset
|
23
|
-
.offset
|
24
|
-
.offset
|
25
|
-
.offset
|
26
|
-
.offset
|
27
|
-
.offset
|
28
|
-
.offset
|
7
|
+
.offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
|
8
|
+
.offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
|
9
|
+
.offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
|
10
|
+
.offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
|
11
|
+
.offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
|
12
|
+
.offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
|
13
|
+
.offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
|
14
|
+
.offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
|
15
|
+
.offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
|
16
|
+
.offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
|
17
|
+
.offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
|
29
18
|
}
|
30
19
|
}
|
@@ -1,21 +1,27 @@
|
|
1
1
|
// Responsive media queries
|
2
2
|
|
3
3
|
@mixin breakpoint($breakpoint) {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
// If the key exists in the map
|
8
|
-
@if $value != null {
|
9
|
-
// Prints a media query based on the value
|
10
|
-
@media (min-width: $value) {
|
11
|
-
@content;
|
12
|
-
}
|
4
|
+
@if $breakpoint == "" {
|
5
|
+
@content;
|
13
6
|
}
|
14
7
|
|
15
|
-
// If the key doesn't exist in the map
|
16
8
|
@else {
|
17
|
-
|
18
|
-
|
9
|
+
// Retrieves the value from the key
|
10
|
+
$value: map-get($breakpoints, $breakpoint);
|
11
|
+
|
12
|
+
// If the key exists in the map
|
13
|
+
@if $value != null {
|
14
|
+
// Prints a media query based on the value
|
15
|
+
@media (min-width: $value) {
|
16
|
+
@content;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
// If the key doesn't exist in the map
|
21
|
+
@else {
|
22
|
+
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
23
|
+
+ "Please make sure it is defined in `$breakpoints` map.";
|
24
|
+
}
|
19
25
|
}
|
20
26
|
}
|
21
27
|
|
@@ -22,6 +22,7 @@ $spacers: (
|
|
22
22
|
) !default;
|
23
23
|
|
24
24
|
// Aliases for easy use
|
25
|
+
$spacer-0: nth($spacers, 1) !default; // 0
|
25
26
|
$spacer-1: nth($spacers, 2) !default; // 4px
|
26
27
|
$spacer-2: nth($spacers, 3) !default; // 8px
|
27
28
|
$spacer-3: nth($spacers, 4) !default; // 16px
|
@@ -59,8 +60,13 @@ $breakpoints: (
|
|
59
60
|
sm: $width-sm,
|
60
61
|
// Medium screen / tablet
|
61
62
|
md: $width-md,
|
62
|
-
// Large screen / desktop (980 + (
|
63
|
+
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
63
64
|
lg: $width-lg,
|
64
65
|
// Extra large screen / wide desktop
|
65
66
|
xl: $width-xl
|
66
67
|
) !default;
|
68
|
+
|
69
|
+
$responsive-variants: ("": "");
|
70
|
+
@each $key in map-keys($breakpoints) {
|
71
|
+
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
|
72
|
+
}
|
@@ -1,65 +1,100 @@
|
|
1
1
|
// Border utilities
|
2
2
|
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
|
3
3
|
|
4
|
-
/* Add a gray border */
|
5
|
-
.border
|
6
|
-
|
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; }
|
4
|
+
/* Add a gray border on all sides */
|
5
|
+
.border { border: $border !important; }
|
6
|
+
|
14
7
|
/* Add a gray border to the left and right */
|
15
8
|
.border-y {
|
16
9
|
border-top: $border !important;
|
17
10
|
border-bottom: $border !important;
|
18
11
|
}
|
19
12
|
|
13
|
+
/* Remove borders from all sides */
|
14
|
+
.border-0 { border: 0 !important; }
|
15
|
+
|
20
16
|
.border-dashed { border-style: dashed !important; }
|
21
17
|
|
22
18
|
/* Use with .border to turn the border blue */
|
23
|
-
.border-blue
|
19
|
+
.border-blue { border-color: $border-blue !important; }
|
24
20
|
/* Use with .border to turn the border blue-light */
|
25
21
|
.border-blue-light { border-color: $border-blue-light !important; }
|
26
22
|
/* Use with .border to turn the border green */
|
27
|
-
.border-green
|
23
|
+
.border-green { border-color: $border-green !important; }
|
28
24
|
/* Use with .border to turn the border green light */
|
29
25
|
.border-green-light { border-color: $border-green-light !important; }
|
30
26
|
/* Use with .border to turn the border red */
|
31
|
-
.border-red
|
27
|
+
.border-red { border-color: $border-red !important; }
|
32
28
|
/* Use with .border to turn the border red-light */
|
33
29
|
.border-red-light { border-color: $border-red-light !important; }
|
34
30
|
/* Use with .border to turn the border purple */
|
35
|
-
.border-purple
|
31
|
+
.border-purple { border-color: $border-purple !important; }
|
36
32
|
/* Use with .border to turn the border yellow */
|
37
|
-
.border-yellow
|
33
|
+
.border-yellow { border-color: $border-yellow !important; }
|
38
34
|
/* Use with .border to turn the border gray-light */
|
39
|
-
.border-gray-light
|
35
|
+
.border-gray-light { border-color: $border-gray-light !important; }
|
40
36
|
/* Use with .border to turn the border gray-dark */
|
41
|
-
.border-gray-dark
|
37
|
+
.border-gray-dark { border-color: $border-gray-dark !important; }
|
42
38
|
/* Use with .border to turn the border rgba black 0.15 */
|
43
|
-
.border-black-fade
|
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; }
|
44
68
|
|
45
|
-
//
|
46
|
-
/* Remove
|
47
|
-
.
|
48
|
-
/*
|
49
|
-
.
|
50
|
-
/*
|
51
|
-
.
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
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
|
+
}
|
56
98
|
|
57
|
-
// Rounded corners
|
58
|
-
/* Remove the border-radius */
|
59
|
-
.rounded-0 { border-radius: 0 !important; }
|
60
|
-
/* Add a border-radius to all corners */
|
61
|
-
.rounded-1 { border-radius: $border-radius !important; }
|
62
|
-
/* Add a 2x border-radius to all corners */
|
63
|
-
.rounded-2 { border-radius: $border-radius * 2 !important; }
|
64
99
|
/* Add a 50% border-radius to make something into a circle */
|
65
100
|
.circle { border-radius: 50% !important; }
|
@@ -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
|
+
}
|
@@ -1,80 +1,52 @@
|
|
1
1
|
// Flex utility classes
|
2
|
-
|
3
2
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
|
4
3
|
// stylelint-disable comment-empty-line-before
|
5
4
|
|
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
|
5
|
+
@each $breakpoint, $variant in $responsive-variants {
|
76
6
|
@include breakpoint($breakpoint) {
|
77
|
-
|
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
|
+
}
|
78
51
|
}
|
79
|
-
|
80
52
|
}
|