/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果您是插件开发者，建议您使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果您是App开发者（插件使用者），您可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果您的项目同样使用了scss预处理，您也可以直接在您的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 系统主题颜色变量 */
$gl_background: #006eff;
$gl_color: #006eff;


/* 颜色变量 */
$gl-themeColor: #006eff;
$gl-bodyBg: #ffffff;
$gl-brand: $gl-themeColor;
$gl-primary: #5867dd;
$gl-metal: #575962;
$gl-success: #34bfa3;
$gl-warning: #ffb822;
$gl-info: #36a3f7;
$gl-focus: #9816f4;
$gl-accent: #00c5dc;
$gl-light: #ffffff;
$gl-danger: #f4516c;




/* 文字尺寸 */
$uni-font-size-sm: 24upx;
$uni-font-size-base: 28upx;
$uni-font-size-lg: 32upx;

$gl-h1-weight: bold;
$gl-h2-weight: 700;
$gl-h3-weight: 500;
$gl-h4-weight: 300;
$gl-h5-weight: normal;

/* 行为相关颜色 */
$uni-color-primary: $gl-themeColor;
$uni-color-success: $gl-success;
$uni-color-warning: $gl-warning;
$uni-color-error: $gl-danger;

/* 文字基本颜色 */
$uni-text-color: #333; //基本色
$uni-text-color-inverse: #fff; //反色
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;

/* 背景颜色 */
$uni-bg-color: $gl-bodyBg;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

/* 边框颜色 */
$uni-border-color: #c8c7cc;

/* 尺寸变量 */

/* 图片尺寸 */
$uni-img-size-sm: 40upx;
$uni-img-size-base: 52upx;
$uni-img-size-lg: 80upx;

/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;

/* 垂直间距 */
$uni-spacing-col-sm: 8upx;
$uni-spacing-col-base: 16upx;
$uni-spacing-col-lg: 24upx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle: 36upx;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 30upx;


/* flex布局 */

@mixin flexRowSpace {
	flex-direction: row;
	justify-content: space-between;
} // 两边布局
// @include  flexRowSpace;


@mixin flexRowSpaceBetween {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
} // 两边居中
// @include flexRowSpaceBetween;


@mixin flexRowSpaceAround{
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
} // 两边居中，两边评分
// @include  flexRowSpaceAround;


@mixin flexRowCenterCenter {
	flex-direction: row;
	justify-content: center;
	align-items: center;
} // 两边布局

// @include flexRowCenterCenter;

@mixin flexRowCenter {
	flex-direction: row;
	align-items: center;
} // flex布局对齐
// @include  flexRowCenter;

@mixin flexRowEnd {
	flex-direction: row;
	justify-content: flex-end;
} // 结尾对齐
// @include flexRowEnd;

@mixin flexRowWrap {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
} // flex布局 超出部分换行
// @include  flexRowWrap;

/* 单行省略号 */
@mixin onlyLineEllipsis {
	text-overflow: ellipsis;
	overflow: hidden;      
	lines: 1;      
	/* #ifdef H5 */
	white-space: nowrap;
	/* #endif */  
	/* #ifdef MP-WEIXIN */
	white-space: nowrap;
	/* #endif */
}
// @include onlyLineEllipsis;


/* 多行省略号 */
@mixin moreLineEllipsis($line: 2) {
	text-overflow: ellipsis;
	overflow: hidden;				
	/* #ifdef H5 */ 
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $line;
	/* #endif */
	lines: $line;
}
// @include moreLineEllipsis;




/* 字体替换 */
 
 @mixin styleFont($color: #343434, $size: 13rpx, $isWidget: 0) {
 	font-size: #{$size};
 	color: $color;
 	@if $isWidget != 0 {
 		@if $isWidget == 1 {
 			font-weight: bold;
 		} 
 		 @if $isWidget > 1 {
 			 font-weight: #{$isWidget};
 		 }
 	}
 }

// @include styleFont(#,);
 
@mixin styleFont2($color: #343434, $size: 13rpx, $isWidget: 0) {
	font-size: #{$size};
	color: $color;
	@if $isWidget != 0 {
		@if $isWidget == 1 {
			font-weight: bold;
		} 
		 @if $isWidget > 1 {
			 font-weight: #{$isWidget};
		 }
	}
}
/* 边框 */

@mixin borderBotton($color: #000000) {
	border-bottom-style: solid;
	border-bottom-color: $color;
	border-bottom-width: 1px;
} // 底部边框
// @include borderBotton;

@mixin borderTop($color: #000000) {
	border-top-style: solid;
	border-top-color: $color;
	border-top-width: 1px;
} // 顶部边框
// @include borderTop;

/* 定位CSS */ 
@mixin positionAbsolute($top: 0,$left: 0) {
	position: absolute;
	top: #{$top}px;
	left: #{$left}px;
} // 
// @include positionAbsolute;


@mixin positionFixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
} // 全屏固定定位

// @include positionFixed;


@mixin positionFixed2($height: 45) {
	/* #ifndef APP-PLUS */
	position: fixed;
	width: 750rpx;
	top: 0;
	left: 0;
	height: #{$height}px;
	z-index: 10;
	/* #endif */ 
}



@mixin compileStyle($name: width, $napp: 1px, $app: 1px) {
	/* #ifdef APP-PLUS */
	 #{$name}: $app;
	/* #endif */ 
	/* #ifndef APP-PLUS */ 
	#{$name}: $napp;
	/* #endif */ 
}