_flex-box.scss (7544B)
1 // CSS3 Flexible Box Model and property defaults 2 3 // Custom shorthand notation for flexbox 4 @mixin box($orient: inline-axis, $pack: start, $align: stretch) { 5 @include display-box; 6 @include box-orient($orient); 7 @include box-pack($pack); 8 @include box-align($align); 9 } 10 11 @mixin display-box { 12 display: -webkit-box; 13 display: -moz-box; 14 display: -ms-flexbox; // IE 10 15 display: box; 16 } 17 18 @mixin box-orient($orient: inline-axis) { 19 // horizontal|vertical|inline-axis|block-axis|inherit 20 @include prefixer(box-orient, $orient, webkit moz spec); 21 } 22 23 @mixin box-pack($pack: start) { 24 // start|end|center|justify 25 @include prefixer(box-pack, $pack, webkit moz spec); 26 -ms-flex-pack: $pack; // IE 10 27 } 28 29 @mixin box-align($align: stretch) { 30 // start|end|center|baseline|stretch 31 @include prefixer(box-align, $align, webkit moz spec); 32 -ms-flex-align: $align; // IE 10 33 } 34 35 @mixin box-direction($direction: normal) { 36 // normal|reverse|inherit 37 @include prefixer(box-direction, $direction, webkit moz spec); 38 -ms-flex-direction: $direction; // IE 10 39 } 40 41 @mixin box-lines($lines: single) { 42 // single|multiple 43 @include prefixer(box-lines, $lines, webkit moz spec); 44 } 45 46 @mixin box-ordinal-group($int: 1) { 47 @include prefixer(box-ordinal-group, $int, webkit moz spec); 48 -ms-flex-order: $int; // IE 10 49 } 50 51 @mixin box-flex($value: 0) { 52 @include prefixer(box-flex, $value, webkit moz spec); 53 -ms-flex: $value; // IE 10 54 } 55 56 @mixin box-flex-group($int: 1) { 57 @include prefixer(box-flex-group, $int, webkit moz spec); 58 } 59 60 // CSS3 Flexible Box Model and property defaults 61 // Unified attributes for 2009, 2011, and 2012 flavours. 62 63 // 2009 - display (box | inline-box) 64 // 2011 - display (flexbox | inline-flexbox) 65 // 2012 - display (flex | inline-flex) 66 @mixin display($value) { 67 // flex | inline-flex 68 @if $value == "flex" { 69 // 2009 70 display: -webkit-box; 71 display: -moz-box; 72 display: box; 73 74 // 2012 75 display: -webkit-flex; 76 display: -moz-flex; 77 display: -ms-flexbox; // 2011 (IE 10) 78 display: flex; 79 } @else if $value == "inline-flex" { 80 display: -webkit-inline-box; 81 display: -moz-inline-box; 82 display: inline-box; 83 84 display: -webkit-inline-flex; 85 display: -moz-inline-flex; 86 display: -ms-inline-flexbox; 87 display: inline-flex; 88 } @else { 89 display: $value; 90 } 91 } 92 93 // 2009 - box-flex (integer) 94 // 2011 - flex (decimal | width decimal) 95 // 2012 - flex (integer integer width) 96 @mixin flex($value) { 97 98 // Grab flex-grow for older browsers. 99 $flex-grow: nth($value, 1); 100 101 // 2009 102 @include prefixer(box-flex, $flex-grow, webkit moz spec); 103 104 // 2011 (IE 10), 2012 105 @include prefixer(flex, $value, webkit moz ms spec); 106 } 107 108 // 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis) 109 // - box-direction (normal | reverse) 110 // 2011 - flex-direction (row | row-reverse | column | column-reverse) 111 // 2012 - flex-direction (row | row-reverse | column | column-reverse) 112 @mixin flex-direction($value: row) { 113 114 // Alt values. 115 $value-2009: $value; 116 $value-2011: $value; 117 $direction: normal; 118 119 @if $value == row { 120 $value-2009: horizontal; 121 } @else if $value == "row-reverse" { 122 $value-2009: horizontal; 123 $direction: reverse; 124 } @else if $value == column { 125 $value-2009: vertical; 126 } @else if $value == "column-reverse" { 127 $value-2009: vertical; 128 $direction: reverse; 129 } 130 131 // 2009 132 @include prefixer(box-orient, $value-2009, webkit moz spec); 133 @include prefixer(box-direction, $direction, webkit moz spec); 134 135 // 2012 136 @include prefixer(flex-direction, $value, webkit moz spec); 137 138 // 2011 (IE 10) 139 -ms-flex-direction: $value; 140 } 141 142 // 2009 - box-lines (single | multiple) 143 // 2011 - flex-wrap (nowrap | wrap | wrap-reverse) 144 // 2012 - flex-wrap (nowrap | wrap | wrap-reverse) 145 @mixin flex-wrap($value: nowrap) { 146 // Alt values 147 $alt-value: $value; 148 @if $value == nowrap { 149 $alt-value: single; 150 } @else if $value == wrap { 151 $alt-value: multiple; 152 } @else if $value == "wrap-reverse" { 153 $alt-value: multiple; 154 } 155 156 @include prefixer(box-lines, $alt-value, webkit moz spec); 157 @include prefixer(flex-wrap, $value, webkit moz ms spec); 158 } 159 160 // 2009 - TODO: parse values into flex-direction/flex-wrap 161 // 2011 - TODO: parse values into flex-direction/flex-wrap 162 // 2012 - flex-flow (flex-direction || flex-wrap) 163 @mixin flex-flow($value) { 164 @include prefixer(flex-flow, $value, webkit moz spec); 165 } 166 167 // 2009 - box-ordinal-group (integer) 168 // 2011 - flex-order (integer) 169 // 2012 - order (integer) 170 @mixin order($int: 0) { 171 // 2009 172 @include prefixer(box-ordinal-group, $int, webkit moz spec); 173 174 // 2012 175 @include prefixer(order, $int, webkit moz spec); 176 177 // 2011 (IE 10) 178 -ms-flex-order: $int; 179 } 180 181 // 2012 - flex-grow (number) 182 @mixin flex-grow($number: 0) { 183 @include prefixer(flex-grow, $number, webkit moz spec); 184 -ms-flex-positive: $number; 185 } 186 187 // 2012 - flex-shrink (number) 188 @mixin flex-shrink($number: 1) { 189 @include prefixer(flex-shrink, $number, webkit moz spec); 190 -ms-flex-negative: $number; 191 } 192 193 // 2012 - flex-basis (number) 194 @mixin flex-basis($width: auto) { 195 @include prefixer(flex-basis, $width, webkit moz spec); 196 -ms-flex-preferred-size: $width; 197 } 198 199 // 2009 - box-pack (start | end | center | justify) 200 // 2011 - flex-pack (start | end | center | justify) 201 // 2012 - justify-content (flex-start | flex-end | center | space-between | space-around) 202 @mixin justify-content($value: flex-start) { 203 204 // Alt values. 205 $alt-value: $value; 206 @if $value == "flex-start" { 207 $alt-value: start; 208 } @else if $value == "flex-end" { 209 $alt-value: end; 210 } @else if $value == "space-between" { 211 $alt-value: justify; 212 } @else if $value == "space-around" { 213 $alt-value: distribute; 214 } 215 216 // 2009 217 @include prefixer(box-pack, $alt-value, webkit moz spec); 218 219 // 2012 220 @include prefixer(justify-content, $value, webkit moz ms o spec); 221 222 // 2011 (IE 10) 223 -ms-flex-pack: $alt-value; 224 } 225 226 // 2009 - box-align (start | end | center | baseline | stretch) 227 // 2011 - flex-align (start | end | center | baseline | stretch) 228 // 2012 - align-items (flex-start | flex-end | center | baseline | stretch) 229 @mixin align-items($value: stretch) { 230 231 $alt-value: $value; 232 233 @if $value == "flex-start" { 234 $alt-value: start; 235 } @else if $value == "flex-end" { 236 $alt-value: end; 237 } 238 239 // 2009 240 @include prefixer(box-align, $alt-value, webkit moz spec); 241 242 // 2012 243 @include prefixer(align-items, $value, webkit moz ms o spec); 244 245 // 2011 (IE 10) 246 -ms-flex-align: $alt-value; 247 } 248 249 // 2011 - flex-item-align (auto | start | end | center | baseline | stretch) 250 // 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch) 251 @mixin align-self($value: auto) { 252 253 $value-2011: $value; 254 @if $value == "flex-start" { 255 $value-2011: start; 256 } @else if $value == "flex-end" { 257 $value-2011: end; 258 } 259 260 // 2012 261 @include prefixer(align-self, $value, webkit moz spec); 262 263 // 2011 (IE 10) 264 -ms-flex-item-align: $value-2011; 265 } 266 267 // 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) 268 // 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch) 269 @mixin align-content($value: stretch) { 270 271 $value-2011: $value; 272 @if $value == "flex-start" { 273 $value-2011: start; 274 } @else if $value == "flex-end" { 275 $value-2011: end; 276 } @else if $value == "space-between" { 277 $value-2011: justify; 278 } @else if $value == "space-around" { 279 $value-2011: distribute; 280 } 281 282 // 2012 283 @include prefixer(align-content, $value, webkit moz spec); 284 285 // 2011 (IE 10) 286 -ms-flex-line-pack: $value-2011; 287 }