mirror of
https://github.com/primer/css.git
synced 2024-12-22 13:41:34 +03:00
81 lines
3.4 KiB
SCSS
81 lines
3.4 KiB
SCSS
|
// Flex utility classes
|
||
|
|
|
||
|
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
|
||
|
|
// stylelint-disable comment-empty-line-before
|
||
|
|
|
||
|
|
// - - - - - - - - - - - - - - - - - - - - - - -
|
||
|
|
// This is a template for generating the flex utility classes.
|
||
|
|
// A version of each class will be generated without a breakpoint,
|
||
|
|
// along with a variant for each breakpoint.
|
||
|
|
// - - - - - - - - - - - - - - - - - - - - - - -
|
||
|
|
|
||
|
|
@mixin flexUtility($breakpoint: 0) {
|
||
|
|
|
||
|
|
// This is the breakpoint that will be inserted into class names
|
||
|
|
$breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
|
||
|
|
|
||
|
|
// If there's no breakpoint, the $breakstring value will be blank.
|
||
|
|
@if $breakpoint == 0 {
|
||
|
|
$breakstring: ""; // example: `.d-flex`
|
||
|
|
}
|
||
|
|
|
||
|
|
// Flexbox classes
|
||
|
|
// Container
|
||
|
|
|
||
|
|
.flex#{$breakstring}-row { flex-direction: row !important; }
|
||
|
|
.flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; }
|
||
|
|
.flex#{$breakstring}-column { flex-direction: column !important; }
|
||
|
|
|
||
|
|
.flex#{$breakstring}-wrap { flex-wrap: wrap !important; }
|
||
|
|
.flex#{$breakstring}-nowrap { flex-wrap: nowrap !important; }
|
||
|
|
|
||
|
|
.flex#{$breakstring}-justify-start { justify-content: flex-start !important; }
|
||
|
|
.flex#{$breakstring}-justify-end { justify-content: flex-end !important; }
|
||
|
|
.flex#{$breakstring}-justify-center { justify-content: center !important; }
|
||
|
|
.flex#{$breakstring}-justify-between { justify-content: space-between !important; }
|
||
|
|
.flex#{$breakstring}-justify-around { justify-content: space-around !important; }
|
||
|
|
|
||
|
|
.flex#{$breakstring}-items-start { align-items: flex-start !important; }
|
||
|
|
.flex#{$breakstring}-items-end { align-items: flex-end !important; }
|
||
|
|
.flex#{$breakstring}-items-center { align-items: center !important; }
|
||
|
|
.flex#{$breakstring}-items-baseline { align-items: baseline !important; }
|
||
|
|
.flex#{$breakstring}-items-stretch { align-items: stretch !important; }
|
||
|
|
|
||
|
|
.flex#{$breakstring}-content-start { align-content: flex-start !important; }
|
||
|
|
.flex#{$breakstring}-content-end { align-content: flex-end !important; }
|
||
|
|
.flex#{$breakstring}-content-center { align-content: center !important; }
|
||
|
|
.flex#{$breakstring}-content-between { align-content: space-between !important; }
|
||
|
|
.flex#{$breakstring}-content-around { align-content: space-around !important; }
|
||
|
|
.flex#{$breakstring}-content-stretch { align-content: stretch !important; }
|
||
|
|
|
||
|
|
// Item
|
||
|
|
.flex#{$breakstring}-auto { flex: 1 1 auto !important; }
|
||
|
|
.flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
|
||
|
|
|
||
|
|
.flex#{$breakstring}-self-auto { align-self: auto !important; }
|
||
|
|
.flex#{$breakstring}-self-start { align-self: flex-start !important; }
|
||
|
|
.flex#{$breakstring}-self-end { align-self: flex-end !important; }
|
||
|
|
.flex#{$breakstring}-self-center { align-self: center !important; }
|
||
|
|
.flex#{$breakstring}-self-baseline { align-self: baseline !important; }
|
||
|
|
.flex#{$breakstring}-self-stretch { align-self: stretch !important; }
|
||
|
|
|
||
|
|
// Shorthand for equal width and height cols
|
||
|
|
.flex#{$breakstring}-item-equal {
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-basis: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Generate basic flexbox classes
|
||
|
|
@include flexUtility();
|
||
|
|
|
||
|
|
// Loop through the breakpoint values to create responsive classes
|
||
|
|
@each $breakpoint in map-keys($breakpoints) {
|
||
|
|
|
||
|
|
// Loop through the spacer values
|
||
|
|
@include breakpoint($breakpoint) {
|
||
|
|
@include flexUtility($breakpoint);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|