91 lines
2.8 KiB
SCSS
91 lines
2.8 KiB
SCSS
|
@function -zf-flex-justify($text-direction){
|
||
|
|
$-zf-flex-justify: (
|
||
|
|
'left': if($text-direction == rtl, flex-end, flex-start),
|
||
|
|
'right': if($text-direction == rtl, flex-start, flex-end),
|
||
|
|
'center': center,
|
||
|
|
'justify': space-between,
|
||
|
|
'spaced': space-around,
|
||
|
|
);
|
||
|
|
|
||
|
|
@return $-zf-flex-justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$-zf-flex-align: (
|
||
|
|
'top': flex-start,
|
||
|
|
'bottom': flex-end,
|
||
|
|
'middle': center,
|
||
|
|
'stretch': stretch,
|
||
|
|
);
|
||
|
|
|
||
|
|
$-zf-flex-direction: (
|
||
|
|
'row': row,
|
||
|
|
'row-reverse': row-reverse,
|
||
|
|
'column': column,
|
||
|
|
'column-reverse': column-reverse,
|
||
|
|
);
|
||
|
|
|
||
|
|
/// Enables flexbox by adding `display: flex` to the element.
|
||
|
|
@mixin flex {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Horizontally or vertically aligns the items within a flex container.
|
||
|
|
///
|
||
|
|
/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
|
||
|
|
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
|
||
|
|
@mixin flex-align($x: null, $y: null) {
|
||
|
|
@if $x {
|
||
|
|
@if map-has-key($-zf-flex-justify, $x) {
|
||
|
|
$x: map-get($-zf-flex-justify, $x);
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $y {
|
||
|
|
@if map-has-key($-zf-flex-align, $y) {
|
||
|
|
$y: map-get($-zf-flex-align, $y);
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
justify-content: $x;
|
||
|
|
align-items: $y;
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
|
||
|
|
///
|
||
|
|
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
|
||
|
|
@mixin flex-align-self($y: null) {
|
||
|
|
@if $y {
|
||
|
|
@if map-has-key($-zf-flex-align, $y) {
|
||
|
|
$y: map-get($-zf-flex-align, $y);
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
align-self: $y;
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
|
||
|
|
/// @param {Number} $order [0] - Order number to apply.
|
||
|
|
@mixin flex-order($order: 0) {
|
||
|
|
order: $order;
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Change flex-direction
|
||
|
|
/// @param {Keyword} $direction [row] - Flex direction to use. Can be
|
||
|
|
/// - row (default): same as text direction
|
||
|
|
/// - row-reverse: opposite to text direction
|
||
|
|
/// - column: same as row but top to bottom
|
||
|
|
/// - column-reverse: same as row-reverse top to bottom
|
||
|
|
@mixin flex-direction($direction: row) {
|
||
|
|
flex-direction: $direction;
|
||
|
|
}
|