160 lines
3.4 KiB
SCSS
160 lines
3.4 KiB
SCSS
/*
|
|
* Flex
|
|
* Used to simplify the flexbox and it's styles
|
|
*
|
|
* Many of these mixins were taken from mastastealth/sass-flex-mixin:
|
|
* https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/02/23
|
|
*/
|
|
|
|
//Flex/Flexbox
|
|
@mixin t-flexbox {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -moz-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
%t-flexbox {
|
|
@include t-flexbox;
|
|
}
|
|
|
|
//Inline Flex/Inline Flexbox
|
|
@mixin t-inline-flex {
|
|
display: -webkit-inline-box;
|
|
display: -webkit-inline-flex;
|
|
display: -moz-inline-flex;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
}
|
|
|
|
%t-inline-flex {
|
|
@include t-inline-flex;
|
|
}
|
|
|
|
//Align-items
|
|
@mixin t-align-items($value: stretch) {
|
|
@if $value == flex-start {
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
} @else if $value == flex-end {
|
|
-webkit-box-align: end;
|
|
-ms-flex-align: end;
|
|
} @else {
|
|
-webkit-box-align: $value;
|
|
-ms-flex-align: $value;
|
|
}
|
|
|
|
-webkit-align-items: $value;
|
|
-moz-align-items: $value;
|
|
align-items: $value;
|
|
}
|
|
|
|
|
|
//Align-self
|
|
@mixin t-align-self($value: auto) {
|
|
// No Webkit Box Fallback.
|
|
-webkit-align-self: $value;
|
|
-moz-align-self: $value;
|
|
@if $value == flex-start {
|
|
-ms-flex-item-align: start;
|
|
} @else if $value == flex-end {
|
|
-ms-flex-item-align: end;
|
|
} @else {
|
|
-ms-flex-item-align: $value;
|
|
}
|
|
align-self: $value;
|
|
}
|
|
|
|
//Align content
|
|
@mixin t-align-content($value: stretch) {
|
|
// No Webkit Box Fallback.
|
|
-webkit-align-content: $value;
|
|
-moz-align-content: $value;
|
|
@if $value == flex-start {
|
|
-ms-flex-line-pack: start;
|
|
} @else if $value == flex-end {
|
|
-ms-flex-line-pack: end;
|
|
} @else {
|
|
-ms-flex-line-pack: $value;
|
|
}
|
|
align-content: $value;
|
|
}
|
|
|
|
//Justify Content
|
|
@mixin t-justify-content($value: flex-start) {
|
|
@if $value == flex-start {
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
} @else if $value == flex-end {
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
} @else if $value == space-between {
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
} @else if $value == space-around {
|
|
-ms-flex-pack: distribute;
|
|
} @else {
|
|
-webkit-box-pack: $value;
|
|
-ms-flex-pack: $value;
|
|
}
|
|
-webkit-justify-content: $value;
|
|
-moz-justify-content: $value;
|
|
justify-content: $value;
|
|
}
|
|
|
|
//Wrapping
|
|
@mixin t-flex-wrap($value: nowrap) {
|
|
// No Webkit Box fallback.
|
|
-webkit-flex-wrap: $value;
|
|
-moz-flex-wrap: $value;
|
|
@if $value == nowrap {
|
|
-ms-flex-wrap: none;
|
|
} @else {
|
|
-ms-flex-wrap: $value;
|
|
}
|
|
flex-wrap: $value;
|
|
}
|
|
|
|
//Flowing
|
|
@mixin t-flex-flow($values: (row nowrap)) {
|
|
// No Webkit Box fallback.
|
|
-webkit-flex-flow: $values;
|
|
-moz-flex-flow: $values;
|
|
-ms-flex-flow: $values;
|
|
flex-flow: $values;
|
|
}
|
|
|
|
//t-flex-direction
|
|
@mixin t-flex-direction($value: row) {
|
|
@if $value == row-reverse {
|
|
-webkit-box-direction: reverse;
|
|
-webkit-box-orient: horizontal;
|
|
} @else if $value == column {
|
|
-webkit-box-direction: normal;
|
|
-webkit-box-orient: vertical;
|
|
} @else if $value == column-reverse {
|
|
-webkit-box-direction: reverse;
|
|
-webkit-box-orient: vertical;
|
|
} @else {
|
|
-webkit-box-direction: normal;
|
|
-webkit-box-orient: horizontal;
|
|
}
|
|
-webkit-flex-direction: $value;
|
|
-moz-flex-direction: $value;
|
|
-ms-flex-direction: $value;
|
|
flex-direction: $value;
|
|
}
|
|
|
|
//Flex Grow
|
|
@mixin t-flex-grow($int: 0) {
|
|
-webkit-box-flex: $int;
|
|
-webkit-flex-grow: $int;
|
|
-moz-flex-grow: $int;
|
|
-ms-flex-positive: $int;
|
|
flex-grow: $int;
|
|
}
|