/*
|--------------------------------------------------------------------------
| 组件的布局文件
|--------------------------------------------------------------------------
| - paddings, margins
| - width   12 的倍数  12 ->  1200
| - clearfix
| - position
| - ellipsis
*/

/* paddings , margins
 * ---------------------------------------- */
._loopMarginPadding(@counter) when (@counter >= 0) {
	._loopMarginPadding((@counter - 2));

	/* Margin
	 * ---------------------------------------- */
	.mt-@{counter} {
		margin-top: (1px * @counter);
	}
	.mr-@{counter} {
		margin-right: (1px * @counter);
	}
	.ml-@{counter} {
		margin-left: (1px * @counter);
	}
	.mb-@{counter} {
		margin-bottom: (1px * @counter);
	}

	/* Padding
	 * ---------------------------------------- */
	.pt-@{counter} {
		padding-top: (1px * @counter);
	}
	.pr-@{counter} {
		padding-right: (1px * @counter);
	}
	.pl-@{counter} {
		padding-left: (1px * @counter);
	}
	.pb-@{counter} {
		padding-bottom: (1px * @counter);
	}
}

/* 百分比宽度
 * ---------------------------------------- */
._loopPercentWidth(@counter) when (@counter >= 0) {
	._loopPercentWidth((@counter - 5));
	.wp-@{counter} {
		width: (1% * @counter);
	}
}

/* 只显示一行，超出隐藏显示...
-------------------------------------------- */
._text-ellipsis() {
	display       : block;
	overflow      : hidden;
	text-overflow : ellipsis;
	white-space   : nowrap;
	word-break    : keep-all;
}