//解决小程序展示不出图标的问题
@import 'components/ty-icon/css/_iconfont.scss';

//全局loading的样式
uni-toast .uni-toast{
	background: none;
	.uni-loading, uni-button[loading]:before{
		background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAEm0lEQVRIS8WVe0yVdRjHP897LhAiGHJphkMUWiZ5A03LmineJnjBxMLZtJGysjk10+btaC512WXpvEyXs00sTEq8pKZhzZyaYDZhzWsY/yReIAmPes77tBc8CMrBDv7h+9/7/J7n+/l9n99NaMG3sapoqJjkIeakiW16bQtUQpor2HajNO7ytZqKKe1SahrmbbpWtFDBBXw68fHkGQ3Hxmqes/qqLfr7tmPK/Wn7hW6uKk102M1SNTkyLjTpJQT1iTQHHXklfyemDPXYtPuuiIxTTYH9QjdeO9EmxO44hxAhMD4zNCn3QdDRFflpJrIDtFpNW0JBzMi/A4JayXnXT01VYSVo+c1q8+nXn+j2rxVvymmXkjxnp2j7KUESUZm7PXrUhwG31ypwFRbaO/eKPgGahPLBuNZJC6z4xqriV8XUXDWZMqlt8norNurKtzPVZIXA+crqyi4H4ye5Hwj95ebFJJszqKKPxDRqydfVv6cKxj7gWGZoUh+f0IaqwxHZ4c9f9f2PrMj/EeRlFR1TEJmR3xCYfHxduN3mjj7aY9oZK167pke0PNb08KeI1KC6PNL+5IpEkZu+wi3VJweaHrkwvk3X8/5mP7xyW0fjtjyzIypjpy+nf6HLfjssKgfRRUCYQsLhnlPLaqF5WuKM9YTnCwyvLVC9YCqzXghqH/AZ9AH7Fa9OVdHPULrc0TzkVseQopQpNY1272FPeZooHwNP1SZ6vSP6BsftCPTw9y1eNdBAfrA6qWi5gbx3qOfbX1l26tvbUNRy3d4TPhVI83i92S8Gx/ltqb/J9D66Mt7hMHJB97lNx3LLXcPcZm+kQB3+3/xHAz2hl8YKRnLDWapNz/Uwo2rP38N8zi3TswxDEhtpqxyTk1yuRAm/V9yJM7KzhF1pMTRvekSwadxXr1AlxXppmA1b70biNvN0NzNqS4uBdwqDc2dmI5rQUMdEjj+aNX1YNy2pv99pcrsQwhxzUBmEqVn8XHYhYOHVWR0Jsm8A3cVf7pW4tt7yd06F/nFZwDKQ2NrbQ8xBFF48EDB0w4R0RAru1J1BmMEbX9bfyXVOLXetHXtB+tUlagmi01oE9M1w/YQMhBWIxNdJ6m7C3KPJ3HqrDjogPg7TPIvyD8ICKFvHQTz1Dt/qmY7aSljzq/8rcenwjhgSz+yddzvz+bAgWkXNBOYAIZjeDry5ufzumvaPTcDurGD/+apG7czpMQaxfQNayJqiAfVjriERuPbWv6csG3EEoTeGDGbW9v2NNNa/FoM6I5m8qcSKN39kJnYI5rHIUiAe1XdZW2S9QDA/dTKGrgWyWHTAej1gadpixJhfuzTu691xHbzbqXs2RfPQnJS5CEuA01y+8SxbS+p24cLUT4DpKC4W77ceaPhocCu8wX8AsQjvMLtglb8N6B+a/VwMDs9ZkFDUTGdtcf3uaxJqEZalZYGxGfQqblsnXN9VNgX2D81JSQJ+Q3QPa4rSGhU35bQuQVg+4idU+6LSmfcLzgYGtbKzu8ZS5b1U31afgn8ouNJDsHujmLe7LPD2+quw4vMGvoLBF5hksuTAnuZSmxr7Dynjvx449n3lAAAAAElFTkSuQmCC) no-repeat;
	}
	.uni-toast__content{
		display: none;
	}
	.uni-icon_toast.uni-loading{
		width:30px;
		height:30px;
	}
}


/**
 *
 * scss公共样式，应用于各个页面，方便后期维护
 *
 * @author hjm
 * @date 2020-02-10 
 * @since 1.0.0
 * 
 * @date 2020-03-05
 * @since 1.0.1 
 * @describe 新增全局风格
 *
 */

/* 
* 根据设计图色调统一定义主要、次要等颜色变量，用于背景、文字、按钮、边框
* eg: bg: {background: $color-main}
*     txt: {color: $color-main}
*/
// 主要颜色, eg: 蓝色
$color-main: #DC4F11;
// 次要颜色, eg: 灰色
$color-sub: #dedede;

// 黑色
$color-black: #161616;
// 轻黑色
$color-black-light: #757575;
// 白色
$color-white: #ffffff;
// 灰色
$color-gray: #AAAAAA;
// 橘色
$color-orange: #EB3F11;

// 背景色
$color-bg: #F3F3F3;
// 边框色
$color-border: #EBEBEB;


/* 
* 根据设计图统一定义字体大小
* eg: txt: {font-size: $font-size22}
*/
$font-size22: 22rpx;
$font-size24: 24rpx;
$font-size26: 26rpx;
$font-size28: 28rpx;
$font-size32: 32rpx;
$font-size34: 34rpx;
$font-size36: 36rpx;


/* 
 * scss 函数
 */

// 文字
@mixin font-style($color: $color-black, $fongsize: 28rpx) {
    color: $color;
    font-size: $fongsize;
}

// 文字省略显示
@mixin ellipsis($line:2) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 盒子模型兼容性
$border-box: border-box;

@mixin box-sizing($border-box) {
    box-sizing: $border-box;
    -o-box-sizing: $border-box;
    -ms-box-sizing: $border-box;
    -moz-box-sizing: $border-box;
    -webkit-box-sizing: $border-box;
}

// 圆角兼容性
@mixin border-radius($x, $y:$x, $z:$x, $k:$x) {
    border-radius: $x $y $z $k;
    -o-border-radius: $x $y $z $k;
    -ms-border-radius: $x $y $z $k;
    -moz-border-radius: $x $y $z $k;
    -webkit-border-radius: $x $y $z $k;
}

// 长、宽
@mixin wh($width, $height:$width) {
    width: $width;
    height: $height;
}

// flex布局
@mixin df {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

@mixin flex($flex:1) {
    -webkit-flex: $flex;
    -moz-flex: $flex;
    flex: $flex;
}

@mixin fw {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
}

@mixin fac {
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

// flex 布局和 子元素 对其方式
@mixin faj($atype:center, $jtype:center) {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    -webkit-align-items: $atype;
    -moz-align-items: $atype;
    align-items: $atype;

    -webkit-justify-content: $jtype;
    -moz-justify-content: $jtype;
    justify-content: $jtype;
}

// flex 布局 主轴从上到下 和 子元素 对其方式
@mixin fcaj($atype:center, $jtype:center) {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;

    -webkit-align-items: $atype;
    -moz-align-items: $atype;
    align-items: $atype;

    -webkit-justify-content: $jtype;
    -moz-justify-content: $jtype;
    justify-content: $jtype;
}

/* 
* 定位
*/
// absolute
@mixin pos-ab-lt($left:0, $top:0) {
    position: absolute;
    left: $left;
    top: $top;
}

@mixin pos-ab-lb($left:0, $bottom:0) {
    position: absolute;
    left: $left;
    bottom: $bottom;
}

@mixin pos-ab-rt($right:0, $top:0) {
    position: absolute;
    right: $right;
    top: $top;
}

@mixin pos-ab-rb($right:0, $bottom:0) {
    position: absolute;
    right: $right;
    bottom: $bottom;
}

// fixed
@mixin pos-fixed-lt($left:0, $top:0) {
    position: fixed;
    left: $left;
    top: $top;
}

@mixin pos-fixed-lb($left:0, $bottom:0) {
    position: fixed;
    left: $left;
    bottom: $bottom;
}

@mixin pos-fixed-rt($right:0, $top:0) {
    position: fixed;
    right: $right;
    top: $top;
}

@mixin pos-fixed-rb($right:0, $bottom:0) {
    position: fixed;
    right: $right;
    bottom: $bottom;
}

// 定位上下左右居中
@mixin center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 定位上下居中
@mixin ct {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

// 定位左右居中
@mixin cl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 
* 边框
*/
@mixin b($size: 2rpx, $color: $color-border) {
    border: $size solid $color;
}

@mixin bt($size: 2rpx, $color: $color-border) {
    border-top: $size solid $color;
}

@mixin br($size: 2rpx, $color: $color-border) {
    border-right: $size solid $color;
}

@mixin bb($size: 2rpx, $color: $color-border) {
    border-bottom: $size solid $color;
}

@mixin bl($size: 2rpx, $color: $color-border) {
    border-left: $size solid $color;
}


/*
 * 全局风格
 */
// 红色主题
$red-theme : (color-main: #DD2E40, // 主色
    color-sub: #006DDF, // 辅色
    color-sub1: #C93745, // 辅色1
    color-gradient: linear-gradient(-90deg, rgba(255, 209, 100, 1), rgba(255, 167, 0, 1)), // 渐变色
    color-text: #151515, // 文本色
    color-text1: #535353, // 文本色1
    color-text2: #ABABAB, // 文本色2
    color-line: #EEEEEE, // 分割线颜色
    color-bg: #EAEAEA, // 标签底色
);
// 蓝色主题
$blue-theme : (color-main: #2962F4,
    color-sub: #FB8800,
);
// 橘色主题
$orange-theme : (color-main: #FA500E,
    color-sub: #FFA823);
// 粉色主题
$pink-theme : (color-main: #F5587B,
    color-sub: #FF8A5C);
// 黑色主题
$black-theme : (color-main: #313131,
    color-sub: #CA3E47);
// 定义映射集合
$themes: (red-theme: $red-theme,
    blue-theme: $blue-theme,
    orange-theme: $orange-theme,
    pink-theme: $pink-theme,
    black-theme: $black-theme,
);

// 背景主色
@mixin bg-main() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            background: map-get($map: $theme, $key: color-main)
        }
    }
}

// 背景辅色
@mixin bg-sub() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            background: map-get($map: $theme, $key: color-sub)
        }
    }
}

// 背景辅色1
@mixin bg-sub1() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            background: map-get($map: $theme, $key: color-sub1)
        }
    }
}

// 背景渐变色
@mixin bg-gradient() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            background: map-get($map: $theme, $key: color-gradient)
        }
    }
}

// 背景标签底色
@mixin bg-bg() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            background: map-get($map: $theme, $key: color-bg)
        }
    }
}

// 文字主色
@mixin font-main() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: color-main)
        }
    }
}

// 文字辅色
@mixin font-sub() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: color-sub)
        }
    }
}

// 文字辅色1
@mixin font-sub1() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: color-sub1)
        }
    }
}

// 文字文本
@mixin font-text() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: color-text)
        }
    }
}

// 文字文本1
@mixin font-text1() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: color-text1)
        }
    }
}

// 文字文本2
@mixin font-text2() {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: color-text2)
        }
    }
}

// 边框主色
@mixin b-main($size: 2rpx) {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            border: $size solid map-get($map: $theme, $key: color-main)
        }
    }
}

// 边框辅色
@mixin b-sub($size: 2rpx) {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            border: $size solid map-get($map: $theme, $key: color-sub)
        }
    }
}

// 底部边框主色
@mixin bb-main($size: 2rpx) {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            border-bottom: $size solid map-get($map: $theme, $key: color-main)
        }
    }
}

// 底部边框辅色
@mixin bb-sub($size: 2rpx) {

    @each $themename,
    $theme in $themes {
        [data-theme='#{$themename}'] & {
            border-bottom: $size solid map-get($map: $theme, $key: color-sub)
        }
    }
}



:export {
    colorMain: $color-main;
}