mirror of https://github.com/rancher/ui.git
89 lines
1.5 KiB
SCSS
89 lines
1.5 KiB
SCSS
$COLUMNS: 2 3 4 5 6 10 11 12 23 24;
|
|
$DEFAULT_COLUMNS: 12;
|
|
$GUTTER: 1.5%;
|
|
|
|
/* SECTIONS */
|
|
.section {
|
|
clear: both;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
/* COLUMN SETUP */
|
|
.col {
|
|
display: block;
|
|
float:left;
|
|
margin: 1% $GUTTER 1% 0;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
/* ROWS */
|
|
.row:before,
|
|
.row:after {
|
|
content:"";
|
|
display:table;
|
|
}
|
|
.row:after {
|
|
clear:both;
|
|
}
|
|
|
|
/* COLUMNS */
|
|
@each $cols in $COLUMNS {
|
|
$span: $cols;
|
|
$suffix: null;
|
|
|
|
@if ( $cols != $DEFAULT_COLUMNS ) {
|
|
$suffix: -of-#{$cols}
|
|
}
|
|
|
|
@while $span > 0 {
|
|
// Normal column with a gutter
|
|
.span-#{$span}#{$suffix} { width: decimal-round( (((100 - ($GUTTER * ($cols - 1))) / $cols) * $span) + (($span - 1) * $GUTTER) , 3, 'floor'); }
|
|
|
|
// Gutterless column
|
|
.gutless .span-#{$span}#{$suffix} { margin-right: 0; width: decimal-round( $span / $cols * 100%, 3, 'floor'); }
|
|
|
|
// Offsets
|
|
.offset-#{$span}#{$suffix} {
|
|
margin-left: decimal-round( ($span/$cols*100%) + $span*($GUTTER/$cols), 3, 'floor' );
|
|
}
|
|
|
|
// Gutterless offset
|
|
.gutless .offset-#{$span}#{$suffix} { margin-left: decimal-round( ($span/$cols*100%), 3, 'floor' ); }
|
|
|
|
$span: $span - 1;
|
|
}
|
|
}
|
|
|
|
//flex grid
|
|
.container-flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.flex-item-half {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
// Equal height columns
|
|
.row-full-height {
|
|
height: 100%;
|
|
}
|
|
|
|
.col-full-height {
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.row-same-height {
|
|
display: table;
|
|
width: 100%;
|
|
/* fix overflow */
|
|
table-layout: fixed;
|
|
}
|