##// END OF EJS Templates
add width:100% to vbox for webkit / FF consistency...
MinRK -
Show More
@@ -1,97 +1,99 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 .hbox {
5 .hbox {
6 display: -webkit-box;
6 display: -webkit-box;
7 -webkit-box-orient: horizontal;
7 -webkit-box-orient: horizontal;
8 -webkit-box-align: stretch;
8 -webkit-box-align: stretch;
9
9
10 display: -moz-box;
10 display: -moz-box;
11 -moz-box-orient: horizontal;
11 -moz-box-orient: horizontal;
12 -moz-box-align: stretch;
12 -moz-box-align: stretch;
13
13
14 display: box;
14 display: box;
15 box-orient: horizontal;
15 box-orient: horizontal;
16 box-align: stretch;
16 box-align: stretch;
17 }
17 }
18
18
19 .hbox > * {
19 .hbox > * {
20 -webkit-box-flex: 0;
20 -webkit-box-flex: 0;
21 -moz-box-flex: 0;
21 -moz-box-flex: 0;
22 box-flex: 0;
22 box-flex: 0;
23 }
23 }
24
24
25 .vbox {
25 .vbox {
26 display: -webkit-box;
26 display: -webkit-box;
27 -webkit-box-orient: vertical;
27 -webkit-box-orient: vertical;
28 -webkit-box-align: stretch;
28 -webkit-box-align: stretch;
29
29
30 display: -moz-box;
30 display: -moz-box;
31 -moz-box-orient: vertical;
31 -moz-box-orient: vertical;
32 -moz-box-align: stretch;
32 -moz-box-align: stretch;
33
33
34 display: box;
34 display: box;
35 box-orient: vertical;
35 box-orient: vertical;
36 box-align: stretch;
36 box-align: stretch;
37 /* width must be 100% to force FF to behave like webkit */
38 width: 100%;
37 }
39 }
38
40
39 .vbox > * {
41 .vbox > * {
40 -webkit-box-flex: 0;
42 -webkit-box-flex: 0;
41 -moz-box-flex: 0;
43 -moz-box-flex: 0;
42 box-flex: 0;
44 box-flex: 0;
43 }
45 }
44
46
45 .reverse {
47 .reverse {
46 -webkit-box-direction: reverse;
48 -webkit-box-direction: reverse;
47 -moz-box-direction: reverse;
49 -moz-box-direction: reverse;
48 box-direction: reverse;
50 box-direction: reverse;
49 }
51 }
50
52
51 .box-flex0 {
53 .box-flex0 {
52 -webkit-box-flex: 0;
54 -webkit-box-flex: 0;
53 -moz-box-flex: 0;
55 -moz-box-flex: 0;
54 box-flex: 0;
56 box-flex: 0;
55 }
57 }
56
58
57 .box-flex1, .box-flex {
59 .box-flex1, .box-flex {
58 -webkit-box-flex: 1;
60 -webkit-box-flex: 1;
59 -moz-box-flex: 1;
61 -moz-box-flex: 1;
60 box-flex: 1;
62 box-flex: 1;
61 }
63 }
62
64
63 .box-flex2 {
65 .box-flex2 {
64 -webkit-box-flex: 2;
66 -webkit-box-flex: 2;
65 -moz-box-flex: 2;
67 -moz-box-flex: 2;
66 box-flex: 2;
68 box-flex: 2;
67 }
69 }
68
70
69 .box-group1 {
71 .box-group1 {
70 -webkit-box-flex-group: 1;
72 -webkit-box-flex-group: 1;
71 -moz-box-flex-group: 1;
73 -moz-box-flex-group: 1;
72 box-flex-group: 1;
74 box-flex-group: 1;
73 }
75 }
74
76
75 .box-group2 {
77 .box-group2 {
76 -webkit-box-flex-group: 2;
78 -webkit-box-flex-group: 2;
77 -moz-box-flex-group: 2;
79 -moz-box-flex-group: 2;
78 box-flex-group: 2;
80 box-flex-group: 2;
79 }
81 }
80
82
81 .start {
83 .start {
82 -webkit-box-pack: start;
84 -webkit-box-pack: start;
83 -moz-box-pack: start;
85 -moz-box-pack: start;
84 box-pack: start;
86 box-pack: start;
85 }
87 }
86
88
87 .end {
89 .end {
88 -webkit-box-pack: end;
90 -webkit-box-pack: end;
89 -moz-box-pack: end;
91 -moz-box-pack: end;
90 box-pack: end;
92 box-pack: end;
91 }
93 }
92
94
93 .center {
95 .center {
94 -webkit-box-pack: center;
96 -webkit-box-pack: center;
95 -moz-box-pack: center;
97 -moz-box-pack: center;
96 box-pack: center;
98 box-pack: center;
97 }
99 }
General Comments 0
You need to be logged in to leave comments. Login now