68 lines
1.6 KiB
SCSS
68 lines
1.6 KiB
SCSS
// CSS3 Flexible Box Model and property defaults
|
|
|
|
// Custom shorthand notation for flexbox
|
|
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
|
@include display-box;
|
|
@include box-orient($orient);
|
|
@include box-pack($pack);
|
|
@include box-align($align);
|
|
}
|
|
|
|
@mixin display-box {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: box;
|
|
}
|
|
|
|
@mixin box-orient($orient: inline-axis) {
|
|
// horizontal|vertical|inline-axis|block-axis|inherit
|
|
-webkit-box-orient: $orient;
|
|
-moz-box-orient: $orient;
|
|
box-orient: $orient;
|
|
}
|
|
|
|
@mixin box-pack($pack: start) {
|
|
// start|end|center|justify
|
|
-webkit-box-pack: $pack;
|
|
-moz-box-pack: $pack;
|
|
box-pack: $pack;
|
|
}
|
|
|
|
@mixin box-align($align: stretch) {
|
|
// start|end|center|baseline|stretch
|
|
-webkit-box-align: $align;
|
|
-moz-box-align: $align;
|
|
box-align: $align;
|
|
}
|
|
|
|
@mixin box-direction($direction: normal) {
|
|
// normal|reverse|inherit
|
|
-webkit-box-direction: $direction;
|
|
-moz-box-direction: $direction;
|
|
box-direction: $direction;
|
|
}
|
|
@mixin box-lines($lines: single) {
|
|
// single|multiple
|
|
-webkit-box-lines: $lines;
|
|
-moz-box-lines: $lines;
|
|
box-lines: $lines;
|
|
}
|
|
|
|
@mixin box-ordinal-group($integer: 1) {
|
|
-webkit-box-ordinal-group: $integer;
|
|
-moz-box-ordinal-group: $integer;
|
|
box-ordinal-group: $integer;
|
|
}
|
|
|
|
@mixin box-flex($value: 0.0) {
|
|
-webkit-box-flex: $value;
|
|
-moz-box-flex: $value;
|
|
box-flex: $value;
|
|
}
|
|
|
|
@mixin box-flex-group($integer: 1) {
|
|
-webkit-box-flex-group: $integer;
|
|
-moz-box-flex-group: $integer;
|
|
box-flex-group: $integer;
|
|
}
|