| Current Path : /home/rtorresani/www/vendor/magento/theme-adminhtml-backend/web/css/source/utilities/ |
| Current File : //home/rtorresani/www/vendor/magento/theme-adminhtml-backend/web/css/source/utilities/_grid.less |
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Grid system
// _____________________________________________
//
// Generate semantic grid columns with these mixins.
// ---------------------------------------------
// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
.lib-clearer();
margin-left: auto;
margin-right: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
.lib-clearer();
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
//
// Generate the extra small columns
// ---------------------------------------------
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
float: left;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
position: relative;
width: percentage((@columns / @grid-columns));
}
.make-xs-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.make-xs-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
.make-xs-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
//
// Generate the small columns
// ---------------------------------------------
.make-m-column(@columns; @gutter: @grid-gutter-width) {
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
position: relative;
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-m-column-offset(@columns) {
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-m-column-push(@columns) {
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
left: percentage((@columns / @grid-columns));
}
}
.make-m-column-pull(@columns) {
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
right: percentage((@columns / @grid-columns));
}
}
//
// Generate the medium columns
// ---------------------------------------------
.make-l-column(@columns; @gutter: @grid-gutter-width) {
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
position: relative;
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-l-column-offset(@columns) {
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-l-column-push(@columns) {
@media (min-width: @screen__l) {
left: percentage((@columns / @grid-columns));
}
}
.make-l-column-pull(@columns) {
@media (min-width: @screen__l) {
right: percentage((@columns / @grid-columns));
}
}
//
// Generate the large columns
// ---------------------------------------------
.make-xl-column(@columns; @gutter: @grid-gutter-width) {
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
position: relative;
@media (min-width: @screen__xl) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-xl-column-offset(@columns) {
@media (min-width: @screen__xl) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-xl-column-push(@columns) {
@media (min-width: @screen__xl) {
left: percentage((@columns / @grid-columns));
}
}
.make-xl-column-pull(@columns) {
@media (min-width: @screen__xl) {
right: percentage((@columns / @grid-columns));
}
}