n8n/packages/design-system/src/css/col.scss

@use 'sass:math';

@use './common/var.scss';
@use './mixins/mixins.scss';

[class*='el-col-'] {
	float: left;
	box-sizing: border-box;
}

.el-col-0 {
	display: none;
}

@for $i from 0 through 24 {
	.el-col-#{$i} {
		width: (math.div(1, 24) * $i * 100) * 1%;
	}

	.el-col-offset-#{$i} {
		margin-left: (math.div(1, 24) * $i * 100) * 1%;
	}

	.el-col-pull-#{$i} {
		position: relative;
		right: (math.div(1, 24) * $i * 100) * 1%;
	}

	.el-col-push-#{$i} {
		position: relative;
		left: (math.div(1, 24) * $i * 100) * 1%;
	}
}

@include mixins.res(xs) {
	.el-col-xs-0 {
		display: none;
	}
	@for $i from 0 through 24 {
		.el-col-xs-#{$i} {
			width: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-xs-offset-#{$i} {
			margin-left: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-xs-pull-#{$i} {
			position: relative;
			right: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-xs-push-#{$i} {
			position: relative;
			left: (math.div(1, 24) * $i * 100) * 1%;
		}
	}
}

@include mixins.res(sm) {
	.el-col-sm-0 {
		display: none;
	}
	@for $i from 0 through 24 {
		.el-col-sm-#{$i} {
			width: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-sm-offset-#{$i} {
			margin-left: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-sm-pull-#{$i} {
			position: relative;
			right: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-sm-push-#{$i} {
			position: relative;
			left: (math.div(1, 24) * $i * 100) * 1%;
		}
	}
}

@include mixins.res(md) {
	.el-col-md-0 {
		display: none;
	}
	@for $i from 0 through 24 {
		.el-col-md-#{$i} {
			width: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-md-offset-#{$i} {
			margin-left: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-md-pull-#{$i} {
			position: relative;
			right: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-md-push-#{$i} {
			position: relative;
			left: (math.div(1, 24) * $i * 100) * 1%;
		}
	}
}

@include mixins.res(lg) {
	.el-col-lg-0 {
		display: none;
	}
	@for $i from 0 through 24 {
		.el-col-lg-#{$i} {
			width: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-lg-offset-#{$i} {
			margin-left: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-lg-pull-#{$i} {
			position: relative;
			right: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-lg-push-#{$i} {
			position: relative;
			left: (math.div(1, 24) * $i * 100) * 1%;
		}
	}
}

@include mixins.res(xl) {
	.el-col-xl-0 {
		display: none;
	}
	@for $i from 0 through 24 {
		.el-col-xl-#{$i} {
			width: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-xl-offset-#{$i} {
			margin-left: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-xl-pull-#{$i} {
			position: relative;
			right: (math.div(1, 24) * $i * 100) * 1%;
		}

		.el-col-xl-push-#{$i} {
			position: relative;
			left: (math.div(1, 24) * $i * 100) * 1%;
		}
	}
}