172 lines
9.2 KiB
CSS
172 lines
9.2 KiB
CSS
/*
|
|
Grid system
|
|
========================================
|
|
*/
|
|
|
|
/* Fixed grid system */
|
|
.row {
|
|
margin-left: calc(var(--grid-gutter-width) * -1);
|
|
zoom: 1;
|
|
}
|
|
|
|
.row:before,
|
|
.row:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
|
|
.row:after {
|
|
clear: both;
|
|
}
|
|
|
|
[class*="span"] {
|
|
float: left;
|
|
min-height: 1px;
|
|
margin-left: var(--grid-gutter-width);
|
|
}
|
|
|
|
.container,
|
|
.navbar-static-top .container,
|
|
.navbar-fixed-top .container,
|
|
.navbar-fixed-bottom .container {
|
|
width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
|
|
}
|
|
|
|
/* Generate .spanX classes */
|
|
.span1 { width: var(--grid-column-width); }
|
|
.span2 { width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); }
|
|
.span3 { width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); }
|
|
.span4 { width: calc(var(--grid-column-width) * 4 + var(--grid-gutter-width) * 3); }
|
|
.span5 { width: calc(var(--grid-column-width) * 5 + var(--grid-gutter-width) * 4); }
|
|
.span6 { width: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 5); }
|
|
.span7 { width: calc(var(--grid-column-width) * 7 + var(--grid-gutter-width) * 6); }
|
|
.span8 { width: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 7); }
|
|
.span9 { width: calc(var(--grid-column-width) * 9 + var(--grid-gutter-width) * 8); }
|
|
.span10 { width: calc(var(--grid-column-width) * 10 + var(--grid-gutter-width) * 9); }
|
|
.span11 { width: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 10); }
|
|
.span12 { width: calc(var(--grid-column-width) * 12 + var(--grid-gutter-width) * 11); }
|
|
|
|
/* Generate .offsetX classes */
|
|
.offset1 { margin-left: calc(var(--grid-column-width) + var(--grid-gutter-width) * 2); }
|
|
.offset2 { margin-left: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width) * 3); }
|
|
.offset3 { margin-left: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 4); }
|
|
.offset4 { margin-left: calc(var(--grid-column-width) * 4 + var(--grid-gutter-width) * 5); }
|
|
.offset5 { margin-left: calc(var(--grid-column-width) * 5 + var(--grid-gutter-width) * 6); }
|
|
.offset6 { margin-left: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 7); }
|
|
.offset7 { margin-left: calc(var(--grid-column-width) * 7 + var(--grid-gutter-width) * 8); }
|
|
.offset8 { margin-left: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 9); }
|
|
.offset9 { margin-left: calc(var(--grid-column-width) * 9 + var(--grid-gutter-width) * 10); }
|
|
.offset10 { margin-left: calc(var(--grid-column-width) * 10 + var(--grid-gutter-width) * 11); }
|
|
.offset11 { margin-left: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 12); }
|
|
|
|
/* Fluid grid system */
|
|
.row-fluid {
|
|
width: 100%;
|
|
zoom: 1;
|
|
}
|
|
|
|
.row-fluid:before,
|
|
.row-fluid:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
|
|
.row-fluid:after {
|
|
clear: both;
|
|
}
|
|
|
|
.row-fluid [class*="span"] {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: calc(var(--base-line-height) + 10px);
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: var(--fluid-grid-gutter-width);
|
|
margin-left: calc(var(--fluid-grid-gutter-width) - 0.5%);
|
|
}
|
|
|
|
.row-fluid [class*="span"]:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Space grid-sized controls properly if multiple per line */
|
|
.row-fluid .controls-row [class*="span"] + [class*="span"] {
|
|
margin-left: var(--fluid-grid-gutter-width);
|
|
}
|
|
|
|
/* Generate .spanX classes for fluid grid */
|
|
.row-fluid .span1 { width: var(--fluid-grid-column-width); }
|
|
.row-fluid .span2 { width: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .span3 { width: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width) * 2); }
|
|
.row-fluid .span4 { width: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width) * 3); }
|
|
.row-fluid .span5 { width: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width) * 4); }
|
|
.row-fluid .span6 { width: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width) * 5); }
|
|
.row-fluid .span7 { width: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width) * 6); }
|
|
.row-fluid .span8 { width: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width) * 7); }
|
|
.row-fluid .span9 { width: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width) * 8); }
|
|
.row-fluid .span10 { width: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width) * 9); }
|
|
.row-fluid .span11 { width: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width) * 10); }
|
|
.row-fluid .span12 { width: 100%; }
|
|
|
|
/* Generate .offsetX classes for fluid grid */
|
|
.row-fluid .offset1 { margin-left: calc(var(--fluid-grid-column-width) + var(--fluid-grid-gutter-width) * 2); }
|
|
.row-fluid .offset1:first-child { margin-left: calc(var(--fluid-grid-column-width) + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset2 { margin-left: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width) * 3); }
|
|
.row-fluid .offset2:first-child { margin-left: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset3 { margin-left: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width) * 4); }
|
|
.row-fluid .offset3:first-child { margin-left: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset4 { margin-left: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width) * 5); }
|
|
.row-fluid .offset4:first-child { margin-left: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset5 { margin-left: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width) * 6); }
|
|
.row-fluid .offset5:first-child { margin-left: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset6 { margin-left: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width) * 7); }
|
|
.row-fluid .offset6:first-child { margin-left: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset7 { margin-left: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width) * 8); }
|
|
.row-fluid .offset7:first-child { margin-left: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset8 { margin-left: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width) * 9); }
|
|
.row-fluid .offset8:first-child { margin-left: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset9 { margin-left: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width) * 10); }
|
|
.row-fluid .offset9:first-child { margin-left: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset10 { margin-left: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width) * 11); }
|
|
.row-fluid .offset10:first-child { margin-left: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width)); }
|
|
.row-fluid .offset11 { margin-left: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width) * 12); }
|
|
.row-fluid .offset11:first-child { margin-left: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width)); }
|
|
|
|
/* Input grid sizing */
|
|
input.span1, textarea.span1, .uneditable-input.span1 { width: calc(var(--grid-column-width) - 14px); }
|
|
input.span2, textarea.span2, .uneditable-input.span2 { width: calc((var(--grid-column-width) * 2) + var(--grid-gutter-width) - 14px); }
|
|
input.span3, textarea.span3, .uneditable-input.span3 { width: calc((var(--grid-column-width) * 3) + (var(--grid-gutter-width) * 2) - 14px); }
|
|
input.span4, textarea.span4, .uneditable-input.span4 { width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3) - 14px); }
|
|
input.span5, textarea.span5, .uneditable-input.span5 { width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4) - 14px); }
|
|
input.span6, textarea.span6, .uneditable-input.span6 { width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5) - 14px); }
|
|
input.span7, textarea.span7, .uneditable-input.span7 { width: calc((var(--grid-column-width) * 7) + (var(--grid-gutter-width) * 6) - 14px); }
|
|
input.span8, textarea.span8, .uneditable-input.span8 { width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7) - 14px); }
|
|
input.span9, textarea.span9, .uneditable-input.span9 { width: calc((var(--grid-column-width) * 9) + (var(--grid-gutter-width) * 8) - 14px); }
|
|
input.span10, textarea.span10, .uneditable-input.span10 { width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9) - 14px); }
|
|
input.span11, textarea.span11, .uneditable-input.span11 { width: calc((var(--grid-column-width) * 11) + (var(--grid-gutter-width) * 10) - 14px); }
|
|
input.span12, textarea.span12, .uneditable-input.span12 { width: calc((var(--grid-column-width) * 12) + (var(--grid-gutter-width) * 11) - 14px); }
|
|
|
|
input,
|
|
textarea,
|
|
.uneditable-input {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Space grid-sized controls properly if multiple per line */
|
|
.controls-row [class*="span"] + [class*="span"] {
|
|
margin-left: var(--grid-gutter-width);
|
|
}
|
|
|
|
/* Reset utility classes due to specificity */
|
|
[class*="span"].hide,
|
|
.row-fluid [class*="span"].hide {
|
|
display: none;
|
|
}
|
|
|
|
[class*="span"].pull-right,
|
|
.row-fluid [class*="span"].pull-right {
|
|
float: right;
|
|
}
|