mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-06 20:21:22 -06:00
53 lines
2.6 KiB
SCSS
53 lines
2.6 KiB
SCSS
// Flex utility classes
|
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
|
|
// stylelint-disable comment-empty-line-before
|
|
|
|
@each $breakpoint, $variant in $responsive-variants {
|
|
@include breakpoint($breakpoint) {
|
|
// Flexbox classes
|
|
// Container
|
|
.flex#{$variant}-row { flex-direction: row !important; }
|
|
.flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
|
|
.flex#{$variant}-column { flex-direction: column !important; }
|
|
|
|
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
|
|
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
|
|
|
|
.flex#{$variant}-justify-start { justify-content: flex-start !important; }
|
|
.flex#{$variant}-justify-end { justify-content: flex-end !important; }
|
|
.flex#{$variant}-justify-center { justify-content: center !important; }
|
|
.flex#{$variant}-justify-between { justify-content: space-between !important; }
|
|
.flex#{$variant}-justify-around { justify-content: space-around !important; }
|
|
|
|
.flex#{$variant}-items-start { align-items: flex-start !important; }
|
|
.flex#{$variant}-items-end { align-items: flex-end !important; }
|
|
.flex#{$variant}-items-center { align-items: center !important; }
|
|
.flex#{$variant}-items-baseline { align-items: baseline !important; }
|
|
.flex#{$variant}-items-stretch { align-items: stretch !important; }
|
|
|
|
.flex#{$variant}-content-start { align-content: flex-start !important; }
|
|
.flex#{$variant}-content-end { align-content: flex-end !important; }
|
|
.flex#{$variant}-content-center { align-content: center !important; }
|
|
.flex#{$variant}-content-between { align-content: space-between !important; }
|
|
.flex#{$variant}-content-around { align-content: space-around !important; }
|
|
.flex#{$variant}-content-stretch { align-content: stretch !important; }
|
|
|
|
// Item
|
|
.flex#{$variant}-auto { flex: 1 1 auto !important; }
|
|
.flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
|
|
|
|
.flex#{$variant}-self-auto { align-self: auto !important; }
|
|
.flex#{$variant}-self-start { align-self: flex-start !important; }
|
|
.flex#{$variant}-self-end { align-self: flex-end !important; }
|
|
.flex#{$variant}-self-center { align-self: center !important; }
|
|
.flex#{$variant}-self-baseline { align-self: baseline !important; }
|
|
.flex#{$variant}-self-stretch { align-self: stretch !important; }
|
|
|
|
// Shorthand for equal width and height cols
|
|
.flex#{$variant}-item-equal {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
}
|
|
}
|
|
}
|