katoikia-app/web-ui/web-react/node_modules/primeflex/src/_grid.scss

89 lines
1.7 KiB
SCSS

.grid {
display: flex;
flex-wrap: wrap;
margin-right: -1 * $gutter;
margin-left: -1 * $gutter;
margin-top: -1 * $gutter;
}
.grid > .col,
.grid > [class*="col"] {
box-sizing: border-box;
}
.grid-nogutter {
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
.grid-nogutter > .col,
.grid-nogutter > [class*="col-"] {
padding: 0;
}
.col {
flex-grow: 1;
flex-basis: 0;
padding: $gutter;
}
.col-fixed {
flex: 0 0 auto;
padding: $gutter;
}
$grid-columns: (
"col-1": 8.3333%,
"col-2": 16.6667%,
"col-3": 25%,
"col-4": 33.3333%,
"col-5": 41.6667%,
"col-6": 50%,
"col-7": 58.3333%,
"col-8": 66.6667%,
"col-9": 75%,
"col-10": 83.3333%,
"col-11": 91.6667%,
"col-12": 100%
);
$grid-column-offsets: (
"col-offset-0": 0,
"col-offset-1": 8.3333%,
"col-offset-2": 16.6667%,
"col-offset-3": 25%,
"col-offset-4": 33.3333%,
"col-offset-5": 41.6667%,
"col-offset-6": 50%,
"col-offset-7": 58.3333%,
"col-offset-8": 66.6667%,
"col-offset-9": 75%,
"col-offset-10": 83.3333%,
"col-offset-11": 91.6667%,
"col-offset-12": 100%,
);
@each $col,$width in $grid-columns {
.#{$col} {
flex: 0 0 auto;
padding: $gutter;
width: #{$width};
}
}
@each $key, $val in $breakpoints {
@media screen and (min-width: #{$val}) {
.#{$key + $separator} {
@each $col,$width in $grid-columns {
&#{$col} {
flex: 0 0 auto;
padding: $gutter;
width: #{$width};
}
}
}
}
}
@include style-class('margin-left', $grid-column-offsets, true);