##// END OF EJS Templates
Re-added already existing base for less backwards compatability.
Jonathan Frederic -
Show More
@@ -1,212 +1,223 b''
1 1
2 2 /* Flexible box model classes */
3 3 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
4 4
5 5 /* This file is a compatability layer. It allows the usage of flexible box
6 6 model layouts accross multiple browsers, including older browsers. The newest,
7 7 universal implementation of the flexible box model is used when available (see
8 8 `Modern browsers` comments below). Browsers that are known to implement this
9 9 new spec completely include:
10 10
11 11 Firefox 28.0+
12 12 Chrome 29.0+
13 13 Internet Explorer 11+
14 14 Opera 17.0+
15 15
16 16 Browsers not listed, including Safari, are supported via the styling under the
17 17 `Old browsers` comments below.
18 18 */
19 19
20 20
21 21 .hbox {
22 22 /* Old browsers */
23 23 display: -webkit-box;
24 24 -webkit-box-orient: horizontal;
25 25 -webkit-box-align: stretch;
26 26
27 27 display: -moz-box;
28 28 -moz-box-orient: horizontal;
29 29 -moz-box-align: stretch;
30 30
31 31 display: box;
32 32 box-orient: horizontal;
33 33 box-align: stretch;
34 34
35 35 /* Modern browsers */
36 36 display: flex;
37 37 flex-direction: row;
38 38 align-items: stretch;
39 39 }
40 40
41 41 .hbox > * {
42 42 /* Old browsers */
43 43 -webkit-box-flex: 0;
44 44 -moz-box-flex: 0;
45 45 box-flex: 0;
46 46
47 47 /* Modern browsers */
48 48 flex: none;
49 49 }
50 50
51 51 .vbox {
52 52 /* Old browsers */
53 53 display: -webkit-box;
54 54 -webkit-box-orient: vertical;
55 55 -webkit-box-align: stretch;
56 56
57 57 display: -moz-box;
58 58 -moz-box-orient: vertical;
59 59 -moz-box-align: stretch;
60 60
61 61 display: box;
62 62 box-orient: vertical;
63 63 box-align: stretch;
64 64 /* width must be 100% to force FF to behave like webkit */
65 65 width: 100%;
66 66
67 67 /* Modern browsers */
68 68 display: flex;
69 69 flex-direction: column;
70 70 align-items: stretch;
71 71 }
72 72
73 73 .vbox > * {
74 74 /* Old browsers */
75 75 -webkit-box-flex: 0;
76 76 -moz-box-flex: 0;
77 77 box-flex: 0;
78 78
79 79 /* Modern browsers */
80 80 flex: none;
81 81 }
82 82
83 83 .hbox.reverse,
84 .vbox.reverse {
84 .vbox.reverse,
85 .reverse {
85 86 /* Old browsers */
86 87 -webkit-box-direction: reverse;
87 88 -moz-box-direction: reverse;
88 89 box-direction: reverse;
89 90
90 91 /* Modern browsers */
91 92 flex-direction: row-reverse;
92 93 }
93 94
94 95 .hbox.box-flex0,
95 .vbox.box-flex0 {
96 .vbox.box-flex0,
97 .box-flex0 {
96 98 /* Old browsers */
97 99 -webkit-box-flex: 0;
98 100 -moz-box-flex: 0;
99 101 box-flex: 0;
100 102
101 103 /* Modern browsers */
102 104 flex: none;
103 105 width: auto;
104 106 }
105 107
106 108 .hbox.box-flex1,
107 .vbox.box-flex1 {
109 .vbox.box-flex1,
110 .box-flex1 {
108 111 /* Old browsers */
109 112 -webkit-box-flex: 1;
110 113 -moz-box-flex: 1;
111 114 box-flex: 1;
112 115
113 116 /* Modern browsers */
114 117 flex: 1;
115 118 }
116 119
117 120 .hbox.box-flex,
118 .vbox.box-flex {
121 .vbox.box-flex,
122 .box-flex {
119 123 /* Old browsers */
120 124 .box-flex1();
121 125 }
122 126
123 127 .hbox.box-flex2,
124 .vbox.box-flex2 {
128 .vbox.box-flex2,
129 .box-flex2 {
125 130 /* Old browsers */
126 131 -webkit-box-flex: 2;
127 132 -moz-box-flex: 2;
128 133 box-flex: 2;
129 134
130 135 /* Modern browsers */
131 136 flex: 2;
132 137 }
133 138
134 139 .box-group1 {
135 140 /* Deprecated */
136 141 -webkit-box-flex-group: 1;
137 142 -moz-box-flex-group: 1;
138 143 box-flex-group: 1;
139 144 }
140 145
141 146 .box-group2 {
142 147 /* Deprecated */
143 148 -webkit-box-flex-group: 2;
144 149 -moz-box-flex-group: 2;
145 150 box-flex-group: 2;
146 151 }
147 152
148 153 .hbox.start,
149 .vbox.start {
154 .vbox.start,
155 .start {
150 156 /* Old browsers */
151 157 -webkit-box-pack: start;
152 158 -moz-box-pack: start;
153 159 box-pack: start;
154 160
155 161 /* Modern browsers */
156 162 justify-content: flex-start;
157 163 }
158 164
159 165 .hbox.end,
160 .vbox.end {
166 .vbox.end,
167 .end {
161 168 /* Old browsers */
162 169 -webkit-box-pack: end;
163 170 -moz-box-pack: end;
164 171 box-pack: end;
165 172
166 173 /* Modern browsers */
167 174 justify-content: flex-end;
168 175 }
169 176
170 177 .hbox.center,
171 .vbox.center {
178 .vbox.center,
179 .center {
172 180 /* Old browsers */
173 181 -webkit-box-pack: center;
174 182 -moz-box-pack: center;
175 183 box-pack: center;
176 184
177 185 /* Modern browsers */
178 186 justify-content: center;
179 187 }
180 188
181 189 .hbox.align-start,
182 .vbox.align-start {
190 .vbox.align-start,
191 .align-start {
183 192 /* Old browsers */
184 193 -webkit-box-align: start;
185 194 -moz-box-align: start;
186 195 box-align: start;
187 196
188 197 /* Modern browsers */
189 198 align-items: flex-start;
190 199 }
191 200
192 201 .hbox.align-end,
193 .vbox.align-end {
202 .vbox.align-end,
203 .align-end {
194 204 /* Old browsers */
195 205 -webkit-box-align: end;
196 206 -moz-box-align: end;
197 207 box-align: end;
198 208
199 209 /* Modern browsers */
200 210 align-items: flex-end;
201 211 }
202 212
203 213 .hbox.align-center,
204 .vbox.align-center {
214 .vbox.align-center,
215 .align-center {
205 216 /* Old browsers */
206 217 -webkit-box-align: center;
207 218 -moz-box-align: center;
208 219 box-align: center;
209 220
210 221 /* Modern browsers */
211 222 align-items: center;
212 223 }
General Comments 0
You need to be logged in to leave comments. Login now