rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Added missing grid make-column mixins and fixed some inconsistencies

Browse Source 
make-column() was still been use to generate "medium size" columns (col-sm), while make-small-column was creating the default columns (col).
I also changed @grid-float-breakpoint to @screen-small, as it was used in make-row() and I think it makes more sense here than the other.
This commit is contained in:
Guillermo González de Agüero 2013-08-07 21:15:01 +02:00
parent d490c35af3
commit 001e5d3da9
1 changed files with 68 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
less/mixins.less
View File

@ -459,41 +459,8 @@
}
}
// Generate the columns
// Generate the default columns
.make-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the column offsets
.make-column-offset(@columns) {
@media (min-width: @grid-float-breakpoint) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-column-push(@columns) {
@media (min-width: @grid-float-breakpoint) {
left: percentage((@columns / @grid-columns));
}
}
.make-column-pull(@columns) {
@media (min-width: @grid-float-breakpoint) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-small-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
// Prevent columns from collapsing when empty
@ -501,7 +468,7 @@
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@max-width: (@grid-float-breakpoint - 1);
@max-width: (@screen-small - 1);
// Calculate width based on number of columns available
@media (max-width: @max-width) {
@ -509,6 +476,72 @@
}
}
// Generate the small columns
.make-small-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-small-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-small-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-small-column-pull(@columns) {
@media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-large-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-large-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-large-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-large-column-pull(@columns) {
@media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns));
}
}
// Form validation states
//