166 lines
3.4 KiB
SCSS
166 lines
3.4 KiB
SCSS
@mixin dis-flex {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
@mixin dis-inl-flex {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
}
|
|
|
|
@mixin flex-dir-row {
|
|
@include dis-flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
|
|
@mixin flex-dir-col {
|
|
@include dis-flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@mixin flex-dir($val) {
|
|
@if $val == row {@include flex-dir-row;}
|
|
@else if $val == col {@include flex-dir-col;}
|
|
@else {@error 'unknown flex-direction: #{$val}';}
|
|
}
|
|
|
|
@mixin flex-wrap($val: wrap) {
|
|
-ms-flex-wrap: $val;
|
|
flex-wrap: $val;
|
|
}
|
|
|
|
@mixin flex-nowrap {
|
|
@include flex-wrap(nowrap);
|
|
}
|
|
|
|
@mixin flex($val) {
|
|
-webkit-box-flex: $val;
|
|
-ms-flex: $val;
|
|
flex: $val;
|
|
}
|
|
|
|
@mixin flex-shrink($val) {
|
|
-ms-flex-negative: $val;
|
|
flex-shrink: $val;
|
|
}
|
|
|
|
@mixin ord($val) {
|
|
-webkit-box-ordinal-group: $val + 1;
|
|
-ms-flex-order: $val;
|
|
order: $val;
|
|
}
|
|
|
|
@mixin flex-jus-sta {
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@mixin flex-jus-cen {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin flex-jus-end {
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@mixin flex-jus-aro {
|
|
-ms-flex-pack: distribute;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
@mixin flex-jus-bet {
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@mixin flex-jus($val) {
|
|
@if $val == sta {@include flex-jus-sta;}
|
|
@else if $val == cen {@include flex-jus-cen;}
|
|
@else if $val == end {@include flex-jus-end;}
|
|
@else if $val == aro {@include flex-jus-aro;}
|
|
@else if $val == bet {@include flex-jus-bet;}
|
|
@else {@error 'unknown flex-jus (justify-content) property: #{$val}';}
|
|
}
|
|
|
|
@mixin flex-ali-sta {
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@mixin flex-ali-cen {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin flex-ali-end {
|
|
-webkit-box-align: end;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
@mixin flex-ali-str {
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
@mixin flex-ali($val) {
|
|
@if $val == sta {@include flex-ali-sta;}
|
|
@else if $val == cen {@include flex-ali-cen;}
|
|
@else if $val == end {@include flex-ali-end;}
|
|
@else if $val == str {@include flex-ali-str;}
|
|
@else {@error 'unknown flex-ali (align-items) property: #{$val}';}
|
|
}
|
|
|
|
@mixin ali-self-sta {
|
|
-ms-flex-item-align: start;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
@mixin ali-self-cen {
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
}
|
|
|
|
@mixin ali-self-end {
|
|
-ms-flex-item-align: end;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
@mixin ali-self-str {
|
|
-ms-flex-item-align: stretch;
|
|
-ms-grid-row-align: stretch;
|
|
align-self: stretch;
|
|
}
|
|
|
|
@mixin ali-self($val) {
|
|
@if $val == sta {@include ali-self-sta;}
|
|
@else if $val == cen {@include ali-self-cen;}
|
|
@else if $val == end {@include ali-self-end;}
|
|
@else if $val == str {@include ali-self-str;}
|
|
@else {@error 'unknown ali-self (align-self) property: #{$val}';}
|
|
}
|
|
|
|
@mixin flex-layout($dir: none, $ali: none, $jus: none) {
|
|
@if $dir != none {@include flex-dir($dir);}
|
|
@if $jus != none {@include flex-jus($jus);}
|
|
@if $ali != none {@include flex-ali($ali);}
|
|
}
|