]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | @mixin ext-box() {\r |
2 | display: -webkit-box;\r | |
3 | display: -ms-flexbox;\r | |
4 | display: flex;\r | |
5 | }\r | |
6 | \r | |
7 | @mixin ext-inline-box() {\r | |
8 | display: -webkit-inline-box;\r | |
9 | display: -ms-inline-flexbox;\r | |
10 | display: inline-flex;\r | |
11 | }\r | |
12 | \r | |
13 | @mixin ext-box-align($align: stretch) {\r | |
14 | -webkit-box-align: $align;\r | |
15 | -ms-flex-align: $align;\r | |
16 | @if $align == start {\r | |
17 | align-items: flex-start;\r | |
18 | }\r | |
19 | @else if $align == end {\r | |
20 | align-items: flex-end;\r | |
21 | }\r | |
22 | @else {\r | |
23 | align-items: $align;\r | |
24 | }\r | |
25 | }\r | |
26 | \r | |
27 | @mixin ext-box-orient($orient: horizontal) {\r | |
28 | -webkit-box-orient: $orient;\r | |
29 | @if $orient == horizontal {\r | |
30 | -ms-flex-direction: row;\r | |
31 | flex-direction: row;\r | |
32 | } @else {\r | |
33 | -ms-flex-direction: column;\r | |
34 | flex-direction: column;\r | |
35 | }\r | |
36 | }\r | |
37 | \r | |
38 | @mixin ext-box-pack($pack: start) {\r | |
39 | -webkit-box-pack: $pack;\r | |
40 | -ms-flex-pack: $pack;\r | |
41 | @if $pack == start {\r | |
42 | justify-content: flex-start;\r | |
43 | }\r | |
44 | @else if $pack == end {\r | |
45 | justify-content: flex-end;\r | |
46 | }\r | |
47 | @else if $pack == justify {\r | |
48 | justify-content: space-between;\r | |
49 | }\r | |
50 | @else if $pack == center {\r | |
51 | justify-content: center;\r | |
52 | }\r | |
53 | @else {\r | |
54 | justify-content: $pack;\r | |
55 | }\r | |
56 | }\r | |
57 | \r | |
58 | @mixin ext-box-flex($flex: 1 1 auto) {\r | |
59 | -webkit-box-flex: nth($flex, 1);\r | |
60 | -ms-flex: $flex;\r | |
61 | flex: $flex;\r | |
62 | // workaround for firefox bug:\r | |
63 | // http://stackoverflow.com/questions/27424831/firefox-flexbox-overflow\r | |
64 | min-width: 0;\r | |
65 | }\r | |
66 | \r | |
67 | @mixin ext-box-direction($direction: normal, $orientation: row) {\r | |
68 | -webkit-box-direction: $direction;\r | |
69 | @if $direction == reverse {\r | |
70 | @if $orientation == row {\r | |
71 | -ms-flex-direction: row-reverse;\r | |
72 | flex-direction: row-reverse;\r | |
73 | } @else {\r | |
74 | -ms-flex-direction: column-reverse;\r | |
75 | flex-direction: column-reverse;\r | |
76 | }\r | |
77 | } @else {\r | |
78 | @if $orientation == row {\r | |
79 | -ms-flex-direction: row;\r | |
80 | flex-direction: row;\r | |
81 | } @else {\r | |
82 | -ms-flex-direction: column;\r | |
83 | flex-direction: column;\r | |
84 | }\r | |
85 | }\r | |
86 | }\r |