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.
Files changed (58) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -1
  3. data/_layouts/home.html +4 -0
  4. data/_layouts/page.html +4 -0
  5. data/_layouts/post.html +4 -0
  6. data/_sass/primer-base/lib/base.scss +6 -0
  7. data/_sass/primer-base/lib/normalize.scss +1 -1
  8. data/_sass/primer-layout/lib/grid-offset.scss +12 -23
  9. data/_sass/primer-support/lib/mixins/layout.scss +18 -12
  10. data/_sass/primer-support/lib/variables/layout.scss +7 -1
  11. data/_sass/primer-utilities/index.scss +1 -0
  12. data/_sass/primer-utilities/lib/animations.scss +1 -0
  13. data/_sass/primer-utilities/lib/borders.scss +71 -36
  14. data/_sass/primer-utilities/lib/details.scss +18 -0
  15. data/_sass/primer-utilities/lib/flexbox.scss +45 -73
  16. data/_sass/primer-utilities/lib/layout.scss +12 -27
  17. data/_sass/primer-utilities/lib/margin.scss +42 -75
  18. data/_sass/primer-utilities/lib/padding.scss +26 -56
  19. data/_sass/primer-utilities/lib/typography.scss +22 -23
  20. data/_sass/primer-utilities/lib/visibility-display.scss +21 -45
  21. metadata +15 -43
  22. data/_sass/primer-base/LICENSE +0 -21
  23. data/_sass/primer-base/README.md +0 -48
  24. data/_sass/primer-base/build/build.css +0 -1
  25. data/_sass/primer-base/build/index.js +0 -1
  26. data/_sass/primer-base/package.json +0 -73
  27. data/_sass/primer-layout/LICENSE +0 -21
  28. data/_sass/primer-layout/README.md +0 -137
  29. data/_sass/primer-layout/build/build.css +0 -1
  30. data/_sass/primer-layout/build/index.js +0 -1
  31. data/_sass/primer-layout/docs/grid.md +0 -392
  32. data/_sass/primer-layout/package.json +0 -71
  33. data/_sass/primer-markdown/LICENSE +0 -21
  34. data/_sass/primer-markdown/README.md +0 -218
  35. data/_sass/primer-markdown/build/build.css +0 -1
  36. data/_sass/primer-markdown/build/index.js +0 -1
  37. data/_sass/primer-markdown/package.json +0 -74
  38. data/_sass/primer-support/LICENSE +0 -21
  39. data/_sass/primer-support/README.md +0 -56
  40. data/_sass/primer-support/docs/breakpoints.md +0 -60
  41. data/_sass/primer-support/docs/color-system.md +0 -392
  42. data/_sass/primer-support/docs/spacing.md +0 -40
  43. data/_sass/primer-support/docs/typography.md +0 -90
  44. data/_sass/primer-support/package.json +0 -73
  45. data/_sass/primer-utilities/LICENSE +0 -21
  46. data/_sass/primer-utilities/README.md +0 -48
  47. data/_sass/primer-utilities/build/build.css +0 -1
  48. data/_sass/primer-utilities/build/index.js +0 -1
  49. data/_sass/primer-utilities/docs/animations.md +0 -75
  50. data/_sass/primer-utilities/docs/borders.md +0 -127
  51. data/_sass/primer-utilities/docs/box-shadow.md +0 -107
  52. data/_sass/primer-utilities/docs/colors.md +0 -232
  53. data/_sass/primer-utilities/docs/flexbox.md +0 -665
  54. data/_sass/primer-utilities/docs/layout.md +0 -300
  55. data/_sass/primer-utilities/docs/margin.md +0 -126
  56. data/_sass/primer-utilities/docs/padding.md +0 -110
  57. data/_sass/primer-utilities/docs/typography.md +0 -138
  58. data/_sass/primer-utilities/package.json +0 -71
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ec5a67e45b9e2b321b41ef5dd227b9c377a0146810029fabd0a3e484d1071a30
4
- data.tar.gz: 289173407e1deedb5a1fdfe42cad3699f988d110a26d0e12fcbcd3c4bb34f741
3
+ metadata.gz: 16e730cf781c1ca7e6207cf9997e7208244de27b37c0e603e4e4309fa3db0be0
4
+ data.tar.gz: 25ca151cf575a9bf828f7db9f1edbab4f7a8183432b36b99bdc2b4a3e2899efe
5
5
  SHA512:
6
- metadata.gz: 077e5dd00dec2db8a39ae2e905ecc7bf02a9d24bcff13756870be85ea46b63fc4e991359c2ade2323fb2de96cd04e75d532cc1fa2de0556d08fbaee93332e331
7
- data.tar.gz: 5034d1ede97ed04a2b39ffeb2adbefafe5fe1fd948c47255e71b08f75d405b532f9da9904f8c8d90d8571c0ee964ae0e29e1743eaad427846d9ec62283baf67e
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
 
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -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
 
@@ -82,7 +82,7 @@ progress {
82
82
 
83
83
  template, /* 1 */
84
84
  [hidden] {
85
- display: none;
85
+ display: none !important;
86
86
  }
87
87
 
88
88
  /* Links
@@ -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 map-keys($breakpoints) {
5
+ @each $breakpoint, $variant in $responsive-variants {
17
6
  @include breakpoint($breakpoint) {
18
- .offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
19
- .offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
20
- .offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
21
- .offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
22
- .offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
23
- .offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
24
- .offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
25
- .offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
26
- .offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
27
- .offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
28
- .offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
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
- // Retrieves the value from the key
5
- $value: map-get($breakpoints, $breakpoint);
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
- @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
18
- + "Please make sure it is defined in `$breakpoints` map.";
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 + (12 * 2)) <= container + gutters
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
+ }
@@ -4,6 +4,7 @@
4
4
  @import "./lib/borders.scss";
5
5
  @import "./lib/box-shadow.scss";
6
6
  @import "./lib/colors.scss";
7
+ @import "./lib/details.scss";
7
8
  @import "./lib/flexbox.scss";
8
9
  @import "./lib/layout.scss";
9
10
  @import "./lib/margin.scss";
@@ -176,6 +176,7 @@
176
176
  /* Increase scale of an element on hover */
177
177
  .hover-grow {
178
178
  transition: transform 0.3s;
179
+ backface-visibility: hidden;
179
180
 
180
181
  &:hover {
181
182
  transform: scale(1.025);
@@ -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 { 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; }
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 { border-color: $border-blue !important; }
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 { border-color: $border-green !important; }
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 { border-color: $border-red !important; }
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 { border-color: $border-purple !important; }
31
+ .border-purple { border-color: $border-purple !important; }
36
32
  /* Use with .border to turn the border yellow */
37
- .border-yellow { border-color: $border-yellow !important; }
33
+ .border-yellow { border-color: $border-yellow !important; }
38
34
  /* Use with .border to turn the border gray-light */
39
- .border-gray-light { border-color: $border-gray-light !important; }
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 { border-color: $border-gray-dark !important; }
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 { border-color: $border-black-fade !important; }
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
- // Without borders
46
- /* Remove all borders */
47
- .border-0 { border: 0 !important; }
48
- /* Remove the top border */
49
- .border-top-0 { border-top: 0 !important; }
50
- /* Remove the right border */
51
- .border-right-0 { border-right: 0 !important; }
52
- /* Remove the bottom border */
53
- .border-bottom-0 { border-bottom: 0 !important; }
54
- /* Remove the left border */
55
- .border-left-0 { border-left: 0 !important; }
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
- @include flexUtility($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
+ }
78
51
  }
79
-
80
52
  }