Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
202 lines (159 sloc) 4.16 KB
//http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx
// Declare flexbox on the parent
// @include flexbox();
@mixin flexbox() {
// Microsoft IE10-specific styles
@if $flexboxSupportIE10 {
-ms-box-orient: horizontal;
display: -ms-flexbox;
}
@if $flexboxSupportLegacy {
display: -moz-box;
display: -webkit-box;
}
// Cross-browser newest syntax
display: -webkit-flex;
display: flex;
}
//
//
@mixin flexbox-justify-content($justify) {
$legacyJustify: none;
@if $flexboxSupportLegacy or $flexboxSupportIE10 {
@if $justify == flex-start {
$legacyJustify: start;
}
@if $justify == flex-end {
$legacyJustify: end;
}
@if $justify == center {
$legacyJustify: center;
}
@if $justify == space-between {
$legacyJustify: justify;
}
// There is no box-pack equivalent for space-around available,
// so if you're supporting the box syntax, choose another
@if $justify == space-around {
$legacyJustify: distribute;
}
}
@if $flexboxSupportLegacy {
-webkit-box-pack: $legacyJustify;
-moz-box-pack: $legacyJustify;
}
@if $flexboxSupportIE10 {
-ms-flex-pack: $legacyJustify;
}
// Cross-browser newest syntax
-webkit-justify-content: $justify;
justify-content: $justify;
}
//
//
@mixin flexbox-flex-wrap($wrap) {
$legacyWrap: none;
@if $flexboxSupportLegacy {
@if $wrap == nowrap {
$legacyWrap: single;
}
@if $wrap == wrap {
$legacyWrap: multiple;
}
// There is no box-lines equivalent for wrap-reverse available,
// so if you're supporting the box syntax, choose another
}
@if $flexboxSupportLegacy {
-webkit-box-pack: $legacyWrap;
-moz-box-pack: $legacyWrap;
}
@if $flexboxSupportIE10 {
-ms-flex-wrap: $wrap;
}
// Cross-browser newest syntax
// Firefox doesn't support flex-wrap, but will as of v28
-webkit-flex-wrap: $wrap;
flex-wrap: $wrap;
}
//
//
@mixin flexbox-align-items($align) {
$legacyAlign: none;
@if $flexboxSupportLegacy or $flexboxSupportIE10 {
@if $align == flex-start {
$legacyAlign: start;
}
@if $align == flex-end {
$legacyAlign: end;
}
@if $align == center {
$legacyAlign: center;
}
@if $align == baseline {
$legacyAlign: baseline;
}
@if $align == stretch {
$legacyAlign: stretch;
}
}
@if $flexboxSupportLegacy {
-webkit-box-align: $legacyAlign;
-moz-box-align: $legacyAlign;
}
// Microsoft IE10-specific styles
@if $flexboxSupportIE10 {
-ms-flex-align: $legacyAlign;
}
-webkit-align-items: $align;
align-items: $align;
}
//
//
@mixin flexbox-flex-direction($dir) {
$legacyDir: none;
$legacyOrient: none;
@if $flexboxSupportLegacy {
@if $dir == row {
$legacyOrient: horizontal;
$legacyDir: normal;
}
@if $dir == row-reverse {
$legacyOrient: horizontal;
$legacyDir: reverse;
}
@if $dir == column {
$legacyOrient: vertical;
$legacyDir: normal;
}
@if $dir == column-reverse {
$legacyOrient: vertical;
$legacyDir: reverse;
}
// There is no box-lines equivalent for wrap-reverse available,
// so if you're supporting the box syntax, choose another
}
@if $flexboxSupportLegacy {
-webkit-box-orient: $legacyOrient;
-webkit-box-direction: $legacyDir;
-moz-box-orient: $legacyOrient;
-moz-box-direction: $legacyDir;
}
@if $flexboxSupportIE10 {
-ms-flex-direction: $dir;
}
-webkit-flex-direction: $dir;
flex-direction: $dir;
}
//
//
@mixin flexbox-order($order) {
@if $flexboxSupportLegacy {
-webkit-box-ordinal-group: $order;
-moz-box-ordinal-group: $order;
}
@if $flexboxSupportIE10 {
-ms-flex-order: $order;
}
-webkit-order: $order;
order: $order;
}