/**
 * function.less
 * LESS 功能函数
 */

@import "config.less";

// 清除浮动
.layout() {
	&::before, &::after {
		content: " ";
		display: table;
	}

	&::after {
		clear: both;
	}
}

// 设置动画
.animation(@effect) {
	-moz-animation: @effect;
	-o-animation: @effect;
	-webkit-animation: @effect;
	animation: @effect;
}
// 设置动画时间
.animationDuration(@time: .5s) {
	-moz-animation-duration: @time;
	-webkit-animation-duration: @time;
	-o-animation-duration: @time;
	animation-duration: @time;
}
// 设置动画延迟
.animationDelay(@time: .5s) {
	-moz-animation-delay: @time;
	-o-animation-delay: @time;
	-webkit-animation-delay: @time;
	animation-delay: @time;
}
// 设置在时间之外的状态
.animationFillMode(@fillMode: forwards) {
	-moz-animation-fill-mode: @fillMode;
	-o-animation-fill-mode: @fillMode;
	-webkit-animation-fill-mode: @fillMode;
	animation-fill-mode: @fillMode;
}
// 设置动画循环次数
.animationIterationCount(@count: infinite) {
	-moz-animation-iteration-count: @count;
	-o-animation-iteration-count: @count;
	-webkit-animation-iteration-count: @count;
	animation-iteration-count: @count;
}
// 设置动画的过渡类型
.animationTimingFunction(@function) {
	-moz-animation-timing-function: @function;
	-o-animation-timing-function: @function;
	-webkit-animation-timing-function: @function;
	animation-timing-function: @function;
}

// 设置变换方案
.transform(@effect) {
	-moz-transform: @effect;
	-ms-transform: @effect;
	-o-transform: @effect;
	-webkit-transform: @effect;
	transform: @effect;
}
// 设置变换原点
.transformOrigin(@value) {
	-moz-transform-origin: @value;
	-ms-transform-origin: @value;
	-o-transform-origin: @value;
	-webkit-transform-origin: @value;
	transform-origin: @value;
}
// 设置变换模式
.transformStyle(@value: preserve-3d) {
	-webkit-transform-style: @value;
	transform-style: @value;
}

// 设置过渡方案
// 默认值为all .2s，即全部属性动画为200ms
.transition(@effect: all .2s) {
	-moz-transition: e(replace(%('%s', @effect), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @effect), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @effect), '(transform)', '-webkit-$1'));
	transition: @effect;
}
// 二参数
.transition(@e1, @e2) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1'));
	transition: @e1, @e2;
}
// 三参数
.transition(@e1, @e2, @e3) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1')), e(replace(%('%s', @e3), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1')), e(replace(%('%s', @e3), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1')), e(replace(%('%s', @e3), '(transform)', '-webkit-$1'));
	transition: @e1, @e2, @e3;
}
// 四参数
.transition(@e1, @e2, @e3, @e4) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1')), e(replace(%('%s', @e3), '(transform)', '-moz-$1')), e(replace(%('%s', @e4), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1')), e(replace(%('%s', @e3), '(transform)', '-o-$1')), e(replace(%('%s', @e4), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1')), e(replace(%('%s', @e3), '(transform)', '-webkit-$1')), e(replace(%('%s', @e4), '(transform)', '-webkit-$1'));
	transition: @e1, @e2, @e3, @e4;
}
// 五参数
.transition(@e1, @e2, @e3, @e4, @e5) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1')), e(replace(%('%s', @e3), '(transform)', '-moz-$1')), e(replace(%('%s', @e4), '(transform)', '-moz-$1')), e(replace(%('%s', @e5), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1')), e(replace(%('%s', @e3), '(transform)', '-o-$1')), e(replace(%('%s', @e4), '(transform)', '-o-$1')), e(replace(%('%s', @e5), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1')), e(replace(%('%s', @e3), '(transform)', '-webkit-$1')), e(replace(%('%s', @e4), '(transform)', '-webkit-$1')), e(replace(%('%s', @e5), '(transform)', '-webkit-$1'));
	transition: @e1, @e2, @e3, @e4, @e5;
}
// 六参数
.transition(@e1, @e2, @e3, @e4, @e5, @e6) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1')), e(replace(%('%s', @e3), '(transform)', '-moz-$1')), e(replace(%('%s', @e4), '(transform)', '-moz-$1')), e(replace(%('%s', @e5), '(transform)', '-moz-$1')), e(replace(%('%s', @e6), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1')), e(replace(%('%s', @e3), '(transform)', '-o-$1')), e(replace(%('%s', @e4), '(transform)', '-o-$1')), e(replace(%('%s', @e5), '(transform)', '-o-$1')), e(replace(%('%s', @e6), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1')), e(replace(%('%s', @e3), '(transform)', '-webkit-$1')), e(replace(%('%s', @e4), '(transform)', '-webkit-$1')), e(replace(%('%s', @e5), '(transform)', '-webkit-$1')), e(replace(%('%s', @e6), '(transform)', '-webkit-$1'));
	transition: @e1, @e2, @e3, @e4, @e5, @e6;
}
// 七参数
.transition(@e1, @e2, @e3, @e4, @e5, @e6, @e7) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1')), e(replace(%('%s', @e3), '(transform)', '-moz-$1')), e(replace(%('%s', @e4), '(transform)', '-moz-$1')), e(replace(%('%s', @e5), '(transform)', '-moz-$1')), e(replace(%('%s', @e6), '(transform)', '-moz-$1')), e(replace(%('%s', @e7), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1')), e(replace(%('%s', @e3), '(transform)', '-o-$1')), e(replace(%('%s', @e4), '(transform)', '-o-$1')), e(replace(%('%s', @e5), '(transform)', '-o-$1')), e(replace(%('%s', @e6), '(transform)', '-o-$1')), e(replace(%('%s', @e7), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1')), e(replace(%('%s', @e3), '(transform)', '-webkit-$1')), e(replace(%('%s', @e4), '(transform)', '-webkit-$1')), e(replace(%('%s', @e5), '(transform)', '-webkit-$1')), e(replace(%('%s', @e6), '(transform)', '-webkit-$1')), e(replace(%('%s', @e7), '(transform)', '-webkit-$1'));
	transition: @e1, @e2, @e3, @e4, @e5, @e6, @e7;
}
// 八参数
.transition(@e1, @e2, @e3, @e4, @e5, @e6, @e7, @e8) {
	-moz-transition: e(replace(%('%s', @e1), '(transform)', '-moz-$1')), e(replace(%('%s', @e2), '(transform)', '-moz-$1')), e(replace(%('%s', @e3), '(transform)', '-moz-$1')), e(replace(%('%s', @e4), '(transform)', '-moz-$1')), e(replace(%('%s', @e5), '(transform)', '-moz-$1')), e(replace(%('%s', @e6), '(transform)', '-moz-$1')), e(replace(%('%s', @e7), '(transform)', '-moz-$1')), e(replace(%('%s', @e8), '(transform)', '-moz-$1'));
	-o-transition: e(replace(%('%s', @e1), '(transform)', '-o-$1')), e(replace(%('%s', @e2), '(transform)', '-o-$1')), e(replace(%('%s', @e3), '(transform)', '-o-$1')), e(replace(%('%s', @e4), '(transform)', '-o-$1')), e(replace(%('%s', @e5), '(transform)', '-o-$1')), e(replace(%('%s', @e6), '(transform)', '-o-$1')), e(replace(%('%s', @e7), '(transform)', '-o-$1')), e(replace(%('%s', @e8), '(transform)', '-o-$1'));
	-webkit-transition: e(replace(%('%s', @e1), '(transform)', '-webkit-$1')), e(replace(%('%s', @e2), '(transform)', '-webkit-$1')), e(replace(%('%s', @e3), '(transform)', '-webkit-$1')), e(replace(%('%s', @e4), '(transform)', '-webkit-$1')), e(replace(%('%s', @e5), '(transform)', '-webkit-$1')), e(replace(%('%s', @e6), '(transform)', '-webkit-$1')), e(replace(%('%s', @e7), '(transform)', '-webkit-$1')), e(replace(%('%s', @e8), '(transform)', '-webkit-$1'));
	transition: @e1, @e2, @e3, @e4, @e5, @e6, @e7, @e8;
}
// 设置过渡持续时间
.transitionDuration(@time: .2s) {
	-moz-transition-duration: @time;
	-o-transition-duration: @time;
	-webkit-transition-duration: @time;
	transition-duration: @time;
}

// 生成带有浏览器前缀的appearance属性
// 默认值为none，即取消浏览器的默认系统外观
// HACK: appearance 目前只支持部分浏览器，webkit(chrome、safari)与moz(firefox)
.appearance(@value: none) {
	-moz-appearance: @value;
	-webkit-appearance: @value;
}

// 生成带有浏览器前缀的text-overflow属性
// 默认值为ellipsis，即文本超出范围则用'...'来代替多余文本
.textOverflow(@value: ellipsis) {
	white-space: nowrap;
	overflow: hidden;
	-ms-text-overflow: @value;
	-o-text-overflow: @value;
	text-overflow: @value;
}
// 生成带有浏览器前缀的box-sizing属性
// 默认值为content-box，即盒子运算方式为width、padding、border分开运算
.boxSizing(@value: content-box) {
	-moz-box-sizing: @value;
	-webkit-box-sizing: @value;
	box-sizing: @value;
}
// 生成带有浏览器前缀的user-select属性
// 默认值为none，即元素的选择方式为空
.userSelect(@value: none) {
	-moz-user-select: @value;
	-webkit-user-select: @value;
	-ms-user-select: @value;
	user-select: @value;
}
// 生成带有浏览器前缀的text-size-adjust属性
// 默认值为none，即不对内部元素进行尺寸缩放
.textSizeAdjust(@value: none) {
	-moz-text-size-adjust: @value;
	-webkit-text-size-adjust: @value;
	-ms-text-size-adjust: @value;
	text-size-adjust: @value;
}
// 修复transform、animation导致的元素闪烁
.repairFlicker() {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 0;
	-moz-perspective: 0;
	-ms-perspective: 0;
	perspective: 0;
}
// 设置透视距离
.perspective(@dist: 2000px) {
	-moz-perspective: @dist;
	-ms-perspective: @dist;
	-webkit-perspective: @dist;
	perspective: @dist;
}

// 设置弹性盒
.flex() {
	display: -moz-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
// 设置内联弹性盒
.flexInline() {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
// 设置弹性盒子项
.flexItem(@value: 0) {
	-moz-box-flex: @value;
	-webkit-box-flex: @value;
	-ms-flex: @value @value auto;
	-webkit-flex: @value @value auto;
	flex: @value @value auto;
}
// 弹性盒布局方向
// 兼容旧版浏览器column模式
.flexDirection(@value: column) when (@value = column) {
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	-moz-box-direction: normal;
	-webkit-box-direction: normal;
}
// 兼容旧版浏览器row模式
.flexDirection(@value: column) when (@value = row) {
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	-moz-box-direction: normal;
	-webkit-box-direction: normal;
}
// 兼容旧版浏览器column-reverse模式
.flexDirection(@value: column) when (@value = column-reverse) {
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	-moz-box-direction: reverse;
	-webkit-box-direction: reverse;
}
// 兼容旧版浏览器row-reverse模式
.flexDirection(@value: column) when (@value = row-reverse) {
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	-moz-box-direction: reverse;
	-webkit-box-direction: reverse;
}
// 新版浏览器非兼容模式
.flexDirection(@value: column) {
	-ms-flex-direction: @value;
	-webkit-flex-direction: @value;
	flex-direction: @value;
}
// 弹性盒换行方式
.flexWrap(@value: nowrap) {
	-ms-flex-wrap: @value;
	-webkit-flex-wrap: @value;
	flex-wrap: @value;
}

// 设置动画帧
.keyframes(@name, @point1: 0%, @point2: 100%, @point3: '', @point4: '', @point5: '', @point6: '', @point7: '', @point8: '', @point9: '', @point10: '', @point11: '', @point12: '', @point13: '', @point14: '', @point15: '', @point16: '') {
	@bracketClose: '}';
	@endClose: e(%('%s.%s', @bracketClose, @name));

	.empty() {}
	.keyframesItem('', '', '') {}
	.vendor-keyframes(@prefix: '', @prehack: @bracketClose) {
		@beginString: ~'@{prehack}@@{prefix}keyframes @{name}{@{point1}';
		@{beginString} { .keyframesItem(@name, @point1, ~'@{prefix}'); }
		
		.keyframes-point(@name, @point2, @prefix);
		.keyframes-point(@name, @point3, @prefix);
		.keyframes-point(@name, @point4, @prefix);
		.keyframes-point(@name, @point5, @prefix);
		.keyframes-point(@name, @point6, @prefix);
		.keyframes-point(@name, @point7, @prefix);
		.keyframes-point(@name, @point8, @prefix);
		.keyframes-point(@name, @point9, @prefix);
		.keyframes-point(@name, @point10, @prefix);
		.keyframes-point(@name, @point11, @prefix);
		.keyframes-point(@name, @point12, @prefix);
		.keyframes-point(@name, @point13, @prefix);
		.keyframes-point(@name, @point14, @prefix);
		.keyframes-point(@name, @point15, @prefix);
		.keyframes-point(@name, @point16, @prefix);
	}

	.keyframes-point(@name, @point, @prefix) when not (@point = '') {
		@pointSelector: ~'@{point}';
		@{pointSelector} {
			.keyframesItem(@name, @point, ~'@{prefix}');
		}
	}

	.vendor-keyframes('-webkit-', '');
	.vendor-keyframes('-moz-');
	.vendor-keyframes('-o-');
	.vendor-keyframes();

	@{endClose}{
		.animation(@name 1s linear infinite);
	}
}
// 栅格布局生成器
.grid(@rowClass: row, @columnClass: col) {
	.@{rowClass} {
		.layout();
	}

	.gc-style(@index) when (@index = 1) {
		@col: ~'.@{columnClass}-@{index}';
		@row: ~'.@{columnClass}-@{index}>.@{rowClass}';
		.gc-style(@index + 1, @col, @row);
	}

	.gc-style(@index, @col, @row) when (@index =< @GridMaxColumn) {
		@colItem: ~'.@{columnClass}-@{index}';
		@rowItem: ~'.@{columnClass}-@{index}>.@{rowClass}';
		.gc-style(@index + 1, ~'@{col}, @{colItem}', ~'@{row}, @{rowItem}');
	}

	.gc-style(@index, @col, @row) when (@index > @GridMaxColumn) {
		@{col} {
			display: block;
			position: relative;
			min-height: 1px;
			padding-left: @LayoutPadding;
			padding-right: @LayoutPadding;
		}

		@{row} {
			margin-left: -@LayoutPadding;
			margin-right: -@LayoutPadding;
		}
	}

	.gc-float(@index) when (@index = 1) {
		@item: ~'.@{columnClass}-@{index}';
		.gc-float(@index + 1, @item);
	}

	.gc-float(@index, @list) when (@index =< @GridMaxColumn) {
		@item: ~'.@{columnClass}-@{index}';
		.gc-float(@index + 1, ~'@{list}, @{item}');
	}

	.gc-float(@index, @list) when (@index > @GridMaxColumn) {
		@{list} {
			float: left;
		}
	}

	.gc-width(@index) when (@index =< @GridMaxColumn) {
		.@{columnClass}-@{index} {
			width: 100% / @GridMaxColumn * @index;
			margin-top: 0;
			margin-bottom: 0;
		}
		.gc-width(@index + 1);
	}

	.gc-style(1);

	@media (min-width: @SmallScreenMinWidth) {
		.gc-float(1);
		.gc-width(1);
	}
}

// 带有斑马条文效果的背景
.background-striped(@size: 40px) {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, 
		transparent 50%, rgba(255, 255, 255, .15) 50%, 
		rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, 
		transparent 50%, rgba(255, 255, 255, .15) 50%, 
		rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, 
		transparent 50%, rgba(255, 255, 255, .15) 50%, 
		rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, 
		transparent 50%, rgba(255, 255, 255, .15) 50%, 
		rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-size: @size @size;
}

// 滚动条样式
.scrollStyle(@size: 10px) {
	// 滚动条基础样式
	&::-webkit-scrollbar {
		width: @size;
		height: @size;
	}
	// 滚动条默认样式
	&::-webkit-scrollbar-thumb {
		border-radius: @size / 2;
		background-color: rgba(0, 0, 0, .3);
	}
	// 未激活的滚动条样式
	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: rgba(0, 0, 0, .1);
	}
	// 鼠标滑入的竖滚动条样式
	&::-webkit-scrollbar-thumb:vertical:hover {
		background-color: rgba(0, 0, 0, .45);
	}
	// 鼠标按下的竖滚动条样式
	&::-webkit-scrollbar-thumb:vertical:active {
		background-color: rgba(0, 0, 0, .6);
	}
	// 鼠标滑入的竖滚动条样式
	&::-webkit-scrollbar-thumb:horizontal:hover {
		background-color: rgba(0, 0, 0, .45);
	}
	// 鼠标按下的竖滚动条样式
	&::-webkit-scrollbar-thumb:horizontal:active {
		background-color: rgba(0, 0, 0, .6);
	}
}