gmusicprocurator/static/scss/include/_flex-box.scss
// CSS3 Flexible Box Model and property defaults
//
// Original Copyright (c) 2011-2013 thoughtbot, inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
// Modified by Mark Lee
// scss-lint:disable VendorPrefix
// CSS3 Flexible Box Model and property defaults
// Unified attributes for 2009, 2011, and 2012 flavours.
// 2009 - display (box | inline-box)
// 2011 - display (flexbox | inline-flexbox)
// 2012 - display (flex | inline-flex)
@mixin display($value) {
// $value: flex | inline-flex
@if $value == 'flex' {
// 2009
display: -webkit-box;
display: -moz-box;
// no one implemented the 2009 spec unprefixed
// 2011
display: -ms-flexbox; // IE 10
// 2012
display: -webkit-flex;
// display: -moz-flex only existed in Firefox 18, behind an about:config pref (defaulted off).
display: flex;
} @elseif $value == 'inline-flex' {
// 2009
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-box;
// 2011
display: -ms-inline-flexbox;
// 2012
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: inline-flex;
} @else {
display: $value;
}
}
// 2009 - box-flex (integer)
// 2011 - flex (decimal | width decimal)
// 2012 - flex (integer integer width)
@mixin flex($value) {
// Grab flex-grow for older browsers.
$flex-grow: nth($value, 1);
// 2009
@include prefixer(box-flex, $flex-grow, webkit moz, false);
// 2011 (IE 10), 2012
@include prefixer(flex, $value, webkit moz ms);
}
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
// - box-direction (normal | reverse)
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
@mixin flex-direction($value: row) {
// Alt values.
$value-2009: $value;
$value-2011: $value;
$direction: 'normal';
@if $value == 'row' {
$value-2009: horizontal;
} @elseif $value == 'row-reverse' {
$value-2009: horizontal;
$direction: reverse;
} @elseif $value == 'column' {
$value-2009: vertical;
} @elseif $value == 'column-reverse' {
$value-2009: vertical;
$direction: reverse;
}
// 2009
@include prefixer(box-orient, $value-2009, webkit moz, false);
@if $direction == 'reverse' {
@include prefixer(box-direction, $direction, webkit moz);
}
// 2012
@include prefixer(flex-direction, $value, webkit moz);
// 2011 (IE 10)
-ms-flex-direction: $value;
}
// 2009 - box-lines (single | multiple)
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
@mixin flex-wrap($value: nowrap) {
// Alt values.
$alt-value: $value;
@if $value == nowrap {
$alt-value: single;
} @elseif $value == wrap {
$alt-value: multiple;
} @elseif $value == 'wrap-reverse' {
$alt-value: multiple;
}
@include prefixer(box-lines, $alt-value, webkit moz);
@include prefixer(flex-wrap, $value, webkit moz ms);
}
// 2009 - TODO: parse values into flex-direction/flex-wrap
// 2011 - TODO: parse values into flex-direction/flex-wrap
// 2012 - flex-flow (flex-direction || flex-wrap)
@mixin flex-flow($value) {
@include prefixer(flex-flow, $value, webkit moz);
}
// 2009 - box-ordinal-group (integer)
// 2011 - flex-order (integer)
// 2012 - order (integer)
@mixin order($int: 0) {
// 2009
@include prefixer(box-ordinal-group, $int, webkit moz, false);
// 2012
@include prefixer(order, $int, webkit moz);
// 2011 (IE 10)
-ms-flex-order: $int;
}
// 2012 - flex-grow (number)
@mixin flex-grow($number: 0) {
@include prefixer(flex-grow, $number, webkit moz);
-ms-flex-positive: $number;
}
// 2012 - flex-shrink (number)
@mixin flex-shrink($number: 1) {
@include prefixer(flex-shrink, $number, webkit moz);
-ms-flex-negative: $number;
}
// 2012 - flex-basis (number)
@mixin flex-basis($width: auto) {
@include prefixer(flex-basis, $width, webkit moz);
-ms-flex-preferred-size: $width;
}
// 2009 - box-pack (start | end | center | justify)
// 2011 - flex-pack (start | end | center | justify)
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
@mixin justify-content ($value: flex-start) {
// Alt values.
$alt-value: $value;
@if $value == 'flex-start' {
$alt-value: start;
} @elseif $value == 'flex-end' {
$alt-value: end;
} @elseif $value == 'space-between' {
$alt-value: justify;
} @elseif $value == 'space-around' {
$alt-value: center;
}
// 2009
@include prefixer(box-pack, $alt-value, webkit moz, false);
// 2012
@include prefixer(justify-content, $value, webkit moz ms o);
// 2011 (IE 10)
-ms-flex-pack: $alt-value;
}
// 2009 - box-align (start | end | center | baseline | stretch)
// 2011 - flex-align (start | end | center | baseline | stretch)
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
@mixin align-items($value: stretch) {
$alt-value: $value;
@if $value == 'flex-start' {
$alt-value: start;
} @elseif $value == 'flex-end' {
$alt-value: end;
}
// 2009
@include prefixer(box-align, $alt-value, webkit moz, false);
// 2012
@include prefixer(align-items, $value, webkit moz ms o);
// 2011 (IE 10)
-ms-flex-align: $alt-value;
}
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
@mixin align-self($value: auto) {
$value-2011: $value;
@if $value == 'flex-start' {
$value-2011: start;
} @elseif $value == 'flex-end' {
$value-2011: end;
}
// 2012
@include prefixer(align-self, $value, webkit moz);
// 2011 (IE 10)
-ms-flex-item-align: $value-2011;
}
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
@mixin align-content($value: stretch) {
$value-2011: $value;
@if $value == 'flex-start' {
$value-2011: start;
} @elseif $value == 'flex-end' {
$value-2011: end;
} @elseif $value == 'space-between' {
$value-2011: justify;
} @elseif $value == 'space-around' {
$value-2011: distribute;
}
// 2012
@include prefixer(align-content, $value, webkit moz);
// 2011 (IE 10)
-ms-flex-line-pack: $value-2011;
}