border-right: @arrowWidth solid @black;
}
}
- }
+
+// Grid System
+// -----------
+
+.container-fixed() {
+ margin-left: auto;
+ margin-right: auto;
+ .clearfix();
+}
+
+.tableColumns(@columnSpan: 1) {
+ float: none; // undo default grid column styles
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+ margin-left: 0; // undo default grid column styles
+}
+
+#grid {
+
+ .core (@gridColumnWidth, @gridGutterWidth) {
+
+ .span (@columns) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ }
+
+ .offset (@columns) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+ }
+
+ .row {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+ }
+
+ [class*="span"] {
+ float: left;
+ margin-left: @gridGutterWidth;
+ }
+
+ .container { .span(12); }
+
+ .span1 { .span(1) }
+ .span2 { .span(2) }
+ .span3 { .span(3) }
+ .span4 { .span(4) }
+ .span5 { .span(5) }
+ .span6 { .span(6) }
+ .span7 { .span(7) }
+ .span8 { .span(8) }
+ .span9 { .span(9) }
+ .span10 { .span(10) }
+ .span11 { .span(11) }
+ .span12 { .span(12) }
+
+ .offset1 { .offset(1) }
+ .offset2 { .offset(2) }
+ .offset3 { .offset(3) }
+ .offset4 { .offset(4) }
+ .offset5 { .offset(5) }
+ .offset6 { .offset(6) }
+ .offset7 { .offset(7) }
+ .offset8 { .offset(8) }
+ .offset9 { .offset(9) }
+ .offset10 { .offset(10) }
+ .offset11 { .offset(11) }
+ .offset12 { .offset(12) }
+
+ }
+
+ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
+
+ .span (@columns) {
+ width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+ }
+
+ .row-fluid {
+ width: 100%;
+ .clearfix();
+ > [class*="span"] {
+ float: left;
+ margin-left: @fluidGridGutterWidth;
+ }
+ > [class*="span"]:first-child {
+ margin-left: 0;
+ }
+ > .span1 { .span(1) }
+ > .span2 { .span(2) }
+ > .span3 { .span(3) }
+ > .span4 { .span(4) }
+ > .span5 { .span(5) }
+ > .span6 { .span(6) }
+ > .span7 { .span(7) }
+ > .span8 { .span(8) }
+ > .span9 { .span(9) }
+ > .span10 { .span(10) }
+ > .span11 { .span(11) }
+ > .span12 { .span(12) }
+ }
+
+ }
+
+ .input(@gridColumnWidth, @gridGutterWidth) {
+
+ .span(@columns) {
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+ }
+
+ input,
+ textarea,
+ .uneditable-input {
+ &.span1 { .span(1) }
+ &.span2 { .span(2) }
+ &.span3 { .span(3) }
+ &.span4 { .span(4) }
+ &.span5 { .span(5) }
+ &.span6 { .span(6) }
+ &.span7 { .span(7) }
+ &.span8 { .span(8) }
+ &.span9 { .span(9) }
+ &.span10 { .span(10) }
+ &.span11 { .span(11) }
+ &.span12 { .span(12) }
+ }
+
+ }
+
++}