2013-01-03 19:14:45 +08:00
|
|
|
|
|
|
|
/* Flexible box model classes */
|
|
|
|
/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.hbox {
|
2013-11-23 06:25:57 +08:00
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-box-orient: horizontal;
|
|
|
|
-webkit-box-align: stretch;
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-11-23 06:25:57 +08:00
|
|
|
display: -moz-box;
|
|
|
|
-moz-box-orient: horizontal;
|
|
|
|
-moz-box-align: stretch;
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-11-23 06:25:57 +08:00
|
|
|
display: box;
|
|
|
|
box-orient: horizontal;
|
|
|
|
box-align: stretch;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.hbox > * {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex: 0;
|
|
|
|
-moz-box-flex: 0;
|
|
|
|
box-flex: 0;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.vbox {
|
2013-11-23 06:25:57 +08:00
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
-webkit-box-align: stretch;
|
|
|
|
|
|
|
|
display: -moz-box;
|
|
|
|
-moz-box-orient: vertical;
|
|
|
|
-moz-box-align: stretch;
|
|
|
|
|
|
|
|
display: box;
|
|
|
|
box-orient: vertical;
|
|
|
|
box-align: stretch;
|
|
|
|
/* width must be 100% to force FF to behave like webkit */
|
|
|
|
width: 100%;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.vbox > * {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex: 0;
|
|
|
|
-moz-box-flex: 0;
|
|
|
|
box-flex: 0;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.reverse {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-direction: reverse;
|
|
|
|
-moz-box-direction: reverse;
|
|
|
|
box-direction: reverse;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.box-flex0 {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex: 0;
|
|
|
|
-moz-box-flex: 0;
|
|
|
|
box-flex: 0;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-04-14 21:42:30 +08:00
|
|
|
.box-flex1 {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex: 1;
|
|
|
|
-moz-box-flex: 1;
|
|
|
|
box-flex: 1;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-04-14 21:42:30 +08:00
|
|
|
.box-flex {
|
|
|
|
.box-flex1();
|
|
|
|
}
|
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.box-flex2 {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex: 2;
|
|
|
|
-moz-box-flex: 2;
|
|
|
|
box-flex: 2;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.box-group1 {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex-group: 1;
|
|
|
|
-moz-box-flex-group: 1;
|
|
|
|
box-flex-group: 1;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.box-group2 {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-flex-group: 2;
|
|
|
|
-moz-box-flex-group: 2;
|
|
|
|
box-flex-group: 2;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.start {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-pack: start;
|
|
|
|
-moz-box-pack: start;
|
|
|
|
box-pack: start;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.end {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-pack: end;
|
|
|
|
-moz-box-pack: end;
|
|
|
|
box-pack: end;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|
2013-01-25 23:48:36 +08:00
|
|
|
|
2013-01-03 19:14:45 +08:00
|
|
|
.center {
|
2013-11-23 06:25:57 +08:00
|
|
|
-webkit-box-pack: center;
|
|
|
|
-moz-box-pack: center;
|
|
|
|
box-pack: center;
|
2013-01-03 19:14:45 +08:00
|
|
|
}
|