/* #ifdef WEB */
.uni-picker-view-mask{
	background-image:none !important;
}
/* #endif */
// 溢出隐藏。
.overflow {
	overflow: hidden;
}
.show{
	visibility:visible;
}
.hidden{
	visibility:hidden;
}
.none{
	display:none;
}
$v_position: (
	relative: relative,
	absolute: absolute,
	fixed: fixed,
	// sticky: sticky,
	// static : static ,
);

@each $name,$key in $v_position {
	.#{$name} {
		position: $key ;
	}
}
.fulled{
	width:100%;
}
.fulled-height {
	flex: 1;
}




@for $i from 0 through 26 {
	.zIndex-#{$i} {
		z-index: #{$i * 1};
	}
	.zIndex-n#{$i} {
		z-index: #{$i * 2};
	}
}

.text-overflow {
	text-overflow: ellipsis;
}

@for $i from 1 to 6 {
	.text-overflow-#{$i} {
		text-overflow: ellipsis;
		lines: $i;
	}
}


// 文本大小 。text-size-xs大小名称,xxs,xs,s,n,g,lg,xl
@each $name,$key in (xxs: 10px, xs: 11px, s: 12px, m: 14px, n: 15px, g: 17px, lg: 18px, xl: 20px) {
	.text-size-#{$name} {
		font-size: $key;
	}
}

// 文本加粗text-weight-s,n,b
@each $name,$key in (s: 400, n: 400, b: 700) {
	.text-weight-#{$name} {
		font-weight: $key;
	}
}

// 文本对齐 。text-align-left,right,center
@each $name,$key in (left: left, right: right, center: center) {
	.text-align-#{$name} {
		text-align: $key;
	}
}

// 圆角半径
// 圆角说明 round-方向-大小。
// tl，顶左，tr顶右。bt底左，br底右。a全部。t:顶左和顶右，b:底左和底右，l:顶左和底左，r:顶右，底右。
@each $name,$key in (tl: 'tl', tr: 'tr', bl: 'bl', br: 'br', a: 'a', t: 't', b: 'b', l: 'l', r: 'r') {
	@for $i from 0 to 51 {
		.round-#{$name}-#{$i} {
			@if $key=='tl' {
				border-top-left-radius: #{$i}px;
			}

			@if $key=='tr' {
				border-top-right-radius: #{$i}px;
			}

			@if $key=='bl' {
				border-bottom-left-radius: #{$i}px;
			}

			@if $key=='br' {
				border-bottom-right-radius: #{$i}px;
			}

			@if $key=='t' {
				border-top-left-radius: #{$i}px;
				border-top-right-radius: #{$i}px;
			}

			@if $key=='b' {
				border-bottom-left-radius: #{$i}px;
				border-bottom-right-radius: #{$i}px;
			}

			@if $key=='l' {
				border-top-left-radius: #{$i}px;
				border-bottom-left-radius: #{$i}px;
			}

			@if $key=='r' {
				border-top-right-radius: #{$i}px;
				border-bottom-right-radius: #{$i}px;
			}

			@if $key=='a' {
				border-radius: #{$i}px;
			}
		}
	}
}

// 从0-100的圆角round-数字
@for $i from 0 through 26 {
	.round-#{$i} {
		border-radius: #{$i}px;
	}

}

/** 0-20表示的是1.0~3.0之间的行高 */
@for $i from 0 through 21 {
	.line-#{$i}{
		line-height: #{$i / 10 + 1};
	}
}



// 透明度opacity-[1-10]
@for $i from 0 to 11 {
	.opacity-#{$i} {
		@if $i>0 and $i<10 {
			opacity: $i / 10;
		}

		@if $i==0 {
			opacity: 0;
		}

		@if $i==10 {
			opacity: 1;
		}
	}
}

// 添加边线 最大5
@for $i from 0 to 6 {
	@if $i==0 {
		.border-0 {
			border:0px solid  #f5f5f5;
		}

		.border {
			border:1px solid  #f5f5f5;
		}

	}

	@if $i>0 {
		.border-#{$i} {
			border:#{$i}px solid  #f5f5f5;
		}

		.border-#{$i}-bk {
			border:#{$i}px solid  #f5f5f5;
		}
	}
}

// 边线格式1：border-方向t,r,l,b-宽度
@each $name,$key in (l: 'left', r: 'right', t: 'top', b: 'bottom', a: 'a') {
	@for $i from 1 to 6 {
		.border-#{$name}-#{$i} {
			@if $key=='a' {
				border:#{$i}px solid  opacify($color: #f5f5f5, $amount: 1);
			}

			@if $key !='a' {
				border-#{$key}:#{$i}px solid  opacify($color: #f5f5f5, $amount: 1);
			}
		}

	}
}

// 内间距。p[a,t,r,b,l,x,y]如：pa表示所有边距，px:左右，py:上下,pr:右边距
@each $name,$key in (a: 'padding', t: 'padding-top', r: 'padding-right', b: 'padding-bottom', l: 'padding-left', x: 'x', y: 'y') {
	@for $i from 0 to 51 {
		@if $key !='x' and $key !='y' {
			.p#{$name}-#{$i} {
				#{$key}: #{$i}px;
			}
		}

		@if $key=='x' {
			.px-#{$i} {
				padding-left: #{$i}px;
				padding-right: #{$i}px;
			}
		}

		@if $key=='y' {
			.py-#{$i} {
				padding-top: #{$i}px;
				padding-bottom: #{$i}px;
			}
		}
	}

	@for $i from 1 to 26 {
		@if $key !='x' and $key !='y' {
			.p#{$name}-n#{$i} {
				#{$key}: #{$i * 2}px;
			}
		}

		@if $key=='x' {
			.px-n#{$i} {
				padding-left: #{$i * 2}px;
				padding-right: #{$i * 2}px;
			}
		}

		@if $key=='y' {
			.py-n#{$i} {
				padding-top: #{$i * 2}px;
				padding-bottom: #{$i * 2}px;
			}
		}
	}
}

// 外间距。m[a,t,r,b,l,x,y]如：ma表示所有外边距，mx:左右，my:上下,mr:右边距
@each $name,$key in (a: 'margin', t: 'margin-top', r: 'margin-right', b: 'margin-bottom', l: 'margin-left', x: 'x', y: 'y') {
	@for $i from 0 to 51 {
		@if $key !='x' and $key !='y' {
			.m#{$name}-#{$i} {
				#{$key}: #{$i}px;
			}

			@if $key !='margin' {
				.m#{$name}--#{$i} {
					#{$key}: -#{$i}px;
				}
			}
		}
		@if $key=='x' {
			.mx-#{$i} {
				margin-left: #{$i}px;
				margin-right: #{$i}px;
			}
		}

		@if $key=='y' {
			.my-#{$i} {
				margin-top: #{$i}px;
				margin-bottom: #{$i}px;
			}
		}
	}

	@for $i from 1 to 26 {
		@if $key !='x' and $key !='y' {
			.m#{$name}-n#{$i} {
				#{$key}: #{$i * 2}px;
			}

			@if $key !='margin' {
				.m#{$name}--n#{$i} {
					#{$key}: -#{$i * 2}px;
				}
			}
		}

		@if $key=='x' {
			.mx-n#{$i} {
				margin-left: #{$i * 2}px;
				margin-right: #{$i * 2}px;
			}
		}

		@if $key=='y' {
			.my-n#{$i} {
				margin-top: #{$i * 2}px;
				margin-bottom: #{$i * 2}px;
			}
		}
	}
}

// 位置。
@each $name,$key in (t: 'top', r: 'right', b: 'bottom', l: 'left') {
	@for $i from 0 to 51 {
		.#{$name}-#{$i} {
			#{$key}: #{$i}px;
		}

		.#{$name}--#{$i} {
			#{$key}: -#{$i}px;
		}
	}

	@for $i from 1 to 26 {
		.#{$name}-n#{$i} {
			#{$key}: #{$i * 2}px;
		}

		.#{$name}--n#{$i} {
			#{$key}: -#{$i * 2}px;
		}
	}
}

// Flex辅助。
@mixin dsplay-flex($justify, $items, $content) {
	justify-content: $justify;
	align-items: $items ;
	display: flex;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-wrap {
	flex-flow: row wrap;
}

.flex-shrink {
	flex-shrink: 0;
}

.flex-row {
	flex-direction: row;
}

.flex-reverse {
	flex-direction: row-reverse;
}

//row模式下，上左对齐
.flex-row-top-start {
	@include dsplay-flex(flex-start, flex-start, center);
}

//row模式下，上中对齐
.flex-row-top-center {
	@include dsplay-flex(center, flex-start, center);
}

//row模式下，上右对齐
.flex-row-top-end {
	@include dsplay-flex(flex-end, flex-start, center);
}

//row模式下，中左对齐
.flex-row-center-start {
	@include dsplay-flex(flex-start, center, center);
}

//row模式下，中中对齐
.flex-row-center-center {
	@include dsplay-flex(center, center, center);
}

//row模式下，上右对齐
.flex-row-center-end {
	@include dsplay-flex(flex-end, center, center);
}

//row模式下，下左对齐
.flex-row-bottom-start {
	@include dsplay-flex(flex-start, flex-end, center);
}

//row模式下，下中对齐
.flex-row-bottom-center {
	@include dsplay-flex(center, flex-end, center);
}

//row模式下，下右对齐
.flex-row-bottom-end {
	@include dsplay-flex(flex-end, flex-end, center);
}

//上下居中，两边对齐。
.flex-row-center-between {
	@include dsplay-flex(space-between, center, center);
}

//--------
//col模式下，上左对齐
.flex-col-top-start {
	@include dsplay-flex(flex-start, flex-start, center);
}

//col模式下，上中对齐
.flex-col-top-center {
	@include dsplay-flex(flex-start, center, center);
}

//col模式下，上右对齐
.flex-col-top-end {
	@include dsplay-flex(flex-start, flex-end, center);
}

//col模式下，中左对齐
.flex-col-center-start {
	@include dsplay-flex(center, flex-start, center);
}

//col模式下，中中对齐
.flex-col-center-center {
	@include dsplay-flex(center, center, center);
}

//col模式下，上右对齐
.flex-col-center-end {
	@include dsplay-flex(center, flex-end, center);
}

//col模式下，下左对齐
.flex-col-bottom-start {
	@include dsplay-flex(flex-end, flex-start, center);
}

//col模式下，下中对齐
.flex-col-bottom-center {
	@include dsplay-flex(flex-end, center, center);
}

//col模式下，下右对齐
.flex-col-bottom-end {
	@include dsplay-flex(flex-end, flex-end, center);
}

//-----------

// row居中左对齐
.flex-start {
	@include dsplay-flex(flex-start, center, center);
}

// row居中右对齐
.flex-end {
	@include dsplay-flex(flex-end, center, center);
}

// col,row上下左右居中对齐
.flex-center {
	@include dsplay-flex(center, center, center);
}

// col,row两端对齐
.flex-between {
	justify-content: space-between;
}

//横向的内容在col模式一睥100%宽，与flex-1中的flex-row是功能一样。
.flex-col-full {
	flex-direction: column;
	align-items: stretch;
}

// col,row居中等分对齐
.flex-around {
	justify-content: space-around;
}

@for $i from 0 through 12 {
	.flex-#{$i} {
		flex: $i ;
	}
}


$colorsDefault: (
	'grey': #9e9e9e,
	'black': #000000,
	'white': #ffffff,
	'lighten-5': #fafafa,
	'lighten-4': #f5f5f5,
	'lighten-3': #eeeeee,
	'lighten-2': #e0e0e0,
	'lighten-1': #bdbdbd,
	'darken-1': #757575,
	'darken-2': #616161,
	'darken-3': #424242,
	'darken-4': #212121,
	'darken-5': #131313,
	'darken-6': #0a0a0a
);
$colors: (
	'red': #f44336,
	'pink': #e91e63,
	'purple': #9c27b0,
	'deep-purple': #673ab7,
	'indigo': #3f51b5,
	'blue': #2196f3,
	'light-blue': #03a9f4,
	'cyan': #00bcd4,
	'teal': #009688,
	'green': #4caf50,
	'light-green': #8bc34a,
	'lime': #cddc39,
	'yellow': #ffeb3b,
	'amber': #ffc107,
	'orange': #ff9800,
	'deep-orange': #ff5722,
	'brown': #795548,
	'blue-grey': #607d8b,
	'primary':#0088ff,
	'success': #34c759,
	'danger': #ff8d28,
	'warn': #F3BF12,
	'error': #ff383c,
	'info': #f2f2f7
);

// 文本颜色。text-颜色名
@each $name,$color in $colors {
	.text-#{$name} {
		color: $color ;
	}

	.#{$name} {
		background-color: $color;
	}
}

@each $name,$color in $colorsDefault {
	.text-#{$name} {
		color: $color ;
	}

	.#{$name} {
		background-color: $color;
	}
}