69 lines
2.1 KiB
Sass
69 lines
2.1 KiB
Sass
|
@import ../support
|
||
|
|
@import shared
|
||
|
|
|
||
|
|
// This is the underlying implementation for all the other mixins in this module.
|
||
|
|
// It is the only way to access prefix support for older versions of the spec.
|
||
|
|
// Deviates from canonical Compass implementation by dropping support for
|
||
|
|
// older versions of the Flexbox spec.
|
||
|
|
//
|
||
|
|
// `$properties`: map of property-value pairs that should be prefixed
|
||
|
|
=flexbox($properties)
|
||
|
|
@each $prop, $value in $properties
|
||
|
|
@if $prop == display
|
||
|
|
+experimental-value(display, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)
|
||
|
|
@else
|
||
|
|
+experimental($prop, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official)
|
||
|
|
|
||
|
|
// Values for $display are: flex (default), inline-flex
|
||
|
|
=display-flex($display: flex)
|
||
|
|
+flexbox((display: $display))
|
||
|
|
|
||
|
|
// Values: row | row-reverse | column | column-reverse
|
||
|
|
=flex-direction($direction)
|
||
|
|
+flexbox((flex-direction: $direction))
|
||
|
|
|
||
|
|
// Values: nowrap | wrap | wrap-reverse
|
||
|
|
=flex-wrap($wrap)
|
||
|
|
+flexbox((flex-wrap: $wrap))
|
||
|
|
|
||
|
|
// Shorthand for flex-direction and flex-wrap.
|
||
|
|
=flex-flow($flow)
|
||
|
|
+flexbox((flex-flow: $flow))
|
||
|
|
|
||
|
|
// Accepts an integer
|
||
|
|
=order($order)
|
||
|
|
+flexbox((order: $order))
|
||
|
|
|
||
|
|
// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
|
||
|
|
// Space separated, in that order.
|
||
|
|
=flex($flex)
|
||
|
|
+flexbox((flex: $flex))
|
||
|
|
|
||
|
|
// Accepts a number.
|
||
|
|
=flex-grow($flex-grow)
|
||
|
|
+flexbox((flex-grow: $flex-grow))
|
||
|
|
|
||
|
|
// Accepts a number.
|
||
|
|
=flex-shrink($flex-shrink)
|
||
|
|
+flexbox((flex-shrink: $flex-shrink))
|
||
|
|
|
||
|
|
// Accepts any legal value for the width property.
|
||
|
|
=flex-basis($flex-basis)
|
||
|
|
+flexbox((flex-basis: $flex-basis))
|
||
|
|
|
||
|
|
// Legal values: flex-start | flex-end | center | space-between | space-around
|
||
|
|
=justify-content($justify-content)
|
||
|
|
+flexbox((justify-content: $justify-content))
|
||
|
|
|
||
|
|
// Legal values: flex-start | flex-end | center | baseline | stretch
|
||
|
|
=align-items($align-items)
|
||
|
|
+flexbox((align-items: $align-items))
|
||
|
|
|
||
|
|
// Legal values: auto | flex-start | flex-end | center | baseline | stretch
|
||
|
|
=align-self($align-self)
|
||
|
|
+flexbox((align-self: $align-self))
|
||
|
|
|
||
|
|
// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
|
||
|
|
=align-content($align-content)
|
||
|
|
+flexbox((align-content: $align-content))
|