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