fixes #8935: add gutter width param to grid mixins
This commit is contained in:
parent
e100817740
commit
18a4082553
63
css.html
63
css.html
|
@ -388,26 +388,36 @@ base_url: "../"
|
|||
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
|
||||
{% highlight css %}
|
||||
// Creates a wrapper for a series of columns
|
||||
.make-row() {
|
||||
// Negative margin the row out to align the content of columns
|
||||
margin-left: (@grid-gutter-width / -2);
|
||||
margin-right: (@grid-gutter-width / -2);
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
// Then clear the floated columns
|
||||
.clearfix();
|
||||
|
||||
@media (min-width: @screen-small) {
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
}
|
||||
|
||||
// Negative margin nested rows out to align the content of columns
|
||||
.row {
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the columns
|
||||
.make-column(@columns) {
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: left;
|
||||
// Calculate width based on number of columns available
|
||||
width: percentage(@columns / @grid-columns);
|
||||
}
|
||||
.make-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Set inner padding as gutters instead of margin
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
// 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
|
||||
|
@ -416,6 +426,33 @@ base_url: "../"
|
|||
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
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
@max-width: (@grid-float-breakpoint - 1);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (max-width: @max-width) {
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Example usage</h4>
|
||||
|
|
|
@ -441,30 +441,30 @@
|
|||
}
|
||||
|
||||
// Creates a wrapper for a series of columns
|
||||
.make-row() {
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
// Then clear the floated columns
|
||||
.clearfix();
|
||||
|
||||
@media (min-width: @screen-small) {
|
||||
margin-left: (@grid-gutter-width / -2);
|
||||
margin-right: (@grid-gutter-width / -2);
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
}
|
||||
|
||||
// Negative margin nested rows out to align the content of columns
|
||||
.row {
|
||||
margin-left: (@grid-gutter-width / -2);
|
||||
margin-right: (@grid-gutter-width / -2);
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the columns
|
||||
.make-column(@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: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
|
@ -491,14 +491,14 @@
|
|||
}
|
||||
|
||||
// Generate the small columns
|
||||
.make-small-column(@columns) {
|
||||
.make-small-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@grid-gutter-width / 2);
|
||||
padding-right: (@grid-gutter-width / 2);
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
@max-width: (@grid-float-breakpoint - 1);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
|
|
Loading…
Reference in New Issue