https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.8 KiB
111 lines
2.8 KiB
@import "shared"; |
|
|
|
// display:box; must be used for any of the other flexbox mixins to work properly |
|
@mixin display-box { |
|
@include experimental-value(display, box, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// Default box orientation, assuming that the user wants something less block-like |
|
$default-box-orient: horizontal !default; |
|
|
|
// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ] |
|
@mixin box-orient( |
|
$orientation: $default-box-orient |
|
) { |
|
$orientation : unquote($orientation); |
|
@include experimental(box-orient, $orientation, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// Default box-align |
|
$default-box-align: stretch !default; |
|
|
|
// Box align [ start | end | center | baseline | stretch ] |
|
@mixin box-align( |
|
$alignment: $default-box-align |
|
) { |
|
$alignment : unquote($alignment); |
|
@include experimental(box-align, $alignment, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// Default box flex |
|
$default-box-flex: 0 !default; |
|
|
|
// mixin which takes an int argument for box flex. Apply this to the children inside the box. |
|
// |
|
// For example: "div.display-box > div.child-box" would get the box flex mixin. |
|
@mixin box-flex( |
|
$flex: $default-box-flex |
|
) { |
|
@include experimental(box-flex, $flex, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// Default flex group |
|
$default-box-flex-group: 1 !default; |
|
|
|
// mixin which takes an int argument for flexible grouping |
|
@mixin box-flex-group( |
|
$group: $default-box-flex-group |
|
) { |
|
@include experimental(box-flex-group, $group, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// default for ordinal group |
|
$default-box-ordinal-group: 1 !default; |
|
|
|
// mixin which takes an int argument for ordinal grouping and rearranging the order |
|
@mixin box-ordinal-group( |
|
$group: $default-box-ordinal-group |
|
) { |
|
@include experimental(box-ordinal-group, $group, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// Box direction default value |
|
$default-box-direction: normal !default; |
|
|
|
// mixin for box-direction [ normal | reverse | inherit ] |
|
@mixin box-direction( |
|
$direction: $default-box-direction |
|
) { |
|
$direction: unquote($direction); |
|
@include experimental(box-direction, $direction, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// default for box lines |
|
$default-box-lines: single !default; |
|
|
|
// mixin for box lines [ single | multiple ] |
|
@mixin box-lines( |
|
$lines: $default-box-lines |
|
) { |
|
$lines: unquote($lines); |
|
@include experimental(box-lines, $lines, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
} |
|
|
|
// default for box pack |
|
$default-box-pack: start !default; |
|
|
|
// mixin for box pack [ start | end | center | justify ] |
|
@mixin box-pack( |
|
$pack: $default-box-pack |
|
) { |
|
$pack: unquote($pack); |
|
@include experimental(box-pack, $pack, |
|
-moz, -webkit, not -o, -ms, not -khtml, official |
|
); |
|
}
|
|
|