Skip to content

Instantly share code, notes, and snippets.

@barinali
Created June 17, 2013 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barinali/5799270 to your computer and use it in GitHub Desktop.
Save barinali/5799270 to your computer and use it in GitHub Desktop.
no margin-left for classes named no-margin-spanX in Bootstrap 2.x
#grid {
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.no-margin-spanX (@index) when (@index > 0) {
(~".no-margin-span@{index}") { .no-margin-span(@index); }
(~'.no-margin-span@{index}:first-child') { .no-margin-spanFirstChild(@index); }
.no-margin-spanX(@index - 1);
}
.no-margin-spanX (0) {}
.no-margin-offsetX (@index) when (@index > 0) {
(~'.no-margin-offset@{index}') { .no-margin-offset(@index); }
.no-margin-offsetX(@index - 1);
}
.no-margin-offsetX (0) {}
.no-margin-offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
.no-margin-span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
}
.no-margin-spanFirstChild (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
[class*="no-margin-span"] {
.input-block-level();
float: left;
margin-left: 0;
}
// generate .no-margin-spanX and .no-margin-offsetX
.no-margin-spanX (@gridColumns);
.no-margin-offsetX (@gridColumns);
}
}
}
@media (max-width: 767px) {
// Make all grid-sized elements block level again
[class*="no-margin-span"],
.uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"],
[class*="no-margin-span"]:first-child,
.uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"]:first-child {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.no-margin-span12,
.row-fluid .no-margin-span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
// Make no-margin-span* classes full width
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="no-margin-span"],
select[class*="no-margin-span"],
textarea[class*="no-margin-span"],
.uneditable-input {
.input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="no-margin-span"],
.input-append input[class*="no-margin-span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
margin-left: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment