diff options
| -rw-r--r-- | _scss/utilities/_flexbox.scss (renamed from _scss/_flexbox.scss) | 71 |
1 files changed, 46 insertions, 25 deletions
diff --git a/_scss/_flexbox.scss b/_scss/utilities/_flexbox.scss index 085616f..58bfd28 100644 --- a/_scss/_flexbox.scss +++ b/_scss/utilities/_flexbox.scss @@ -22,18 +22,25 @@ // property to determine the main size of the element. If an element is // not a flex item, 'flex' has no effect. // -// Values: <flex-basis> -// Default: 1 +// Values: none | <flex-grow> <flex-shrink> || <flex-basis> +// Default: See individual properties (1 1 0) // // http://w3.org/tr/css3-flexbox/#flex-property -@mixin flex($values: 1) { - -webkit-box-flex: $values; - -moz-box-flex: $values; - -webkit-flex: $values; - -moz-flex: $values; - -ms-flex: $values; - flex: $values; +@mixin flex($fg: 1, $fs: null, $fb: null) { + + $fg-boxflex: $fg; + + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -moz-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; } // Flexbox Direction @@ -48,6 +55,20 @@ // http://w3.org/tr/css3-flexbox/#flex-direction-property @mixin flex-direction($value: row) { + @if $value == 'row-reverse' { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == 'column' { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == 'column-reverse' { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; -moz-flex-direction: $value; -ms-flex-direction: $value; @@ -66,7 +87,7 @@ // http://w3.org/tr/css3-flexbox/#flex-wrap-property @mixin flex-wrap($value: nowrap) { - @if $value == nowrap { + @if $value == 'nowrap' { -ms-flex-wrap: none; } @else { -ms-flex-wrap: $value; @@ -182,16 +203,16 @@ // http://w3.org/tr/css3-flexbox/#justify-content-property @mixin justify-content($value: flex-start) { - @if $value == flex-start { + @if $value == 'flex-start' { -webkit-box-pack: start; -ms-flex-pack: start; - } @else if $value == flex-end { + } @else if $value == 'flex-end' { -webkit-box-pack: end; -ms-flex-pack: end; - } @else if $value == space-between { + } @else if $value == 'space-between' { -webkit-box-pack: justify; -ms-flex-pack: justify; - } @else if $value == space-around { + } @else if $value == 'space-around' { -ms-flex-pack: distribute; } @else { -webkit-box-pack: $value; @@ -217,19 +238,19 @@ // // http://w3.org/tr/css3-flexbox/#align-content-property -@mixin align-content($align: stretch) { - @if $value == flex-start { +@mixin align-content($value: stretch) { + @if $value == 'flex-start' { -ms-flex-line-pack: start; - } @else if $value == flex-end { + } @else if $value == 'flex-end' { -ms-flex-line-pack: end; } @else { -ms-flex-line-pack: $value; } - -webkit-align-content: $align; - -moz-align-content: $align; - -ms-align-content: $align; - align-content: $align; + -webkit-align-content: $value; + -moz-align-content: $value; + -ms-align-content: $value; + align-content: $value; } // Flexbox Align Items @@ -248,10 +269,10 @@ // http://w3.org/tr/css3-flexbox/#align-items-property @mixin align-items($value: stretch) { - @if $value == flex-start { + @if $value == 'flex-start' { -webkit-box-align: start; -ms-flex-align: start; - } @else if $value == flex-end { + } @else if $value == 'flex-end' { -webkit-box-align: end; -ms-flex-align: end; } @else { @@ -271,9 +292,9 @@ // Default: auto @mixin align-self($value: auto) { - @if $value == flex-start { + @if $value == 'flex-start' { -ms-flex-item-align: start; - } @else if $value == flex-end { + } @else if $value == 'flex-end' { -ms-flex-item-align: end; } @else { -ms-flex-item-align: $value; |