@charset "utf-8";

//主题色
$C1:#004170;
$C2:#005999;
$C3:#1687d9;
$C4:#8CCCF8;
$C5:#084E82;
//中性色
$M1:#36434D;
$M2:#66757F;
$M3:#ACB7BF;
$M4:#E4EBF0;
$M5:#F5F8FA;
$M6:#ffffff;
$M7:#F0F2F5;
$M8:#565e66;
$Z4:#38ba72;
//时间曲线
$Ease:cubic-bezier(.25, .1, .25, 1);
$Spring:cubic-bezier(.66, 1.65, .23, .87);
$Spring2:cubic-bezier(.44, 1.53, .32, .92);
$Linear:linear;
//通用font-family
$font-family-H:'Helvetica Neue',
Tahoma,
'PingFang SC',
'Hiragino Sans GB',
'Microsoft YaHei',
STHeitiSC,
sans-serif;
$font-family-A:"Helvetica Neue",
Tahoma,
"PingFang SC",
"Hiragino Sans GB",
SimSun,
STHeitiSC,
sans-serif;

.iTalent-header::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent;
}

.iTalent-header::-webkit-scrollbar-thumb {
    background-color: rgba(150, 150, 150, .5);
    border-radius: 5px;
}

.iTalent-header::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: transparent;
}


//清浮动
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

//引用图片
@mixin imagePath($SvgName) {
    background-image:url("../../../images/"#{$SvgName} ".png");
    background-repeat: no-repeat;
}

//transition跨浏览器兼容
@mixin transition($AnimationList) {
    -webkit-transition: $AnimationList;
    -moz-transition: $AnimationList;
    -ms-transition: $AnimationList;
    -o-transition: $AnimationList;
    transition: $AnimationList;
}

//transform跨浏览器兼容
@mixin transform($Transform) {
    -webkit-transform: $Transform;
    -moz-transform: $Transform;
    -ms-transform: $Transform;
    -o-transform: $Transform;
    transform: $Transform;
}

//opacity跨浏览器兼容
@mixin opacity($opacity) {
    filter: alpha(opacity=#{$opacity*1000}); //IE5--IE9+
    opacity: $opacity;
}

//创建关键帧动效
@mixin CreateKeyframes($AniName, $StartStatus, $EndStatus) {
    @-webkit-keyframes $AniName {
        from {
            -webkit-transform: $StartStatus;
        }

        to {
            -webkit-transform: $EndStatus;
        }
    }

    @-moz-keyframes $AniName {
        from {
            -moz-transform: $StartStatus;
        }

        to {
            -moz-transform: $EndStatus;
        }
    }

    @-ms-keyframes $AniName {
        from {
            -ms-transform: $StartStatus;
        }

        to {
            -ms-transform: $EndStatus;
        }
    }

    @-o-keyframes $AniName {
        from {
            -o-transform: $StartStatus;
        }

        to {
            -o-transform: $EndStatus;
        }
    }

    @keyframes $AniName {
        from {
            transform: $StartStatus;
        }

        to {
            transform: $EndStatus;
        }
    }
}

//引用关键帧动效
@mixin AniQuote($AniInfo) {
    -webkit-animation: $AniInfo;
    -moz-animation: $AniInfo;
    -ms-animation: $AniInfo;
    -o-animation: $AniInfo;
    animation: $AniInfo;
}

//各种关键帧动效名称
//checkbox选中切换动效
$dftToCheck:"dftToCheck";
@include CreateKeyframes($dftToCheck, (rotateZ(45deg)), (rotateZ(0deg)));
$checkToDft:"checkToDft";
@include CreateKeyframes($checkToDft, (rotateZ(-45deg)), (rotateZ(0deg)));

//弹窗出现
// $popShow:"popShow";
// @include CreateKeyframes($popShow,(scale(0)),(scale(1)));
@-webkit-keyframes popShow {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@-ms-keyframes popShow {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@-moz-keyframes popShow {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@-o-keyframes popShow {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes popShow {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

//弹窗消失
// $popHide:"popHide";
// @include CreateKeyframes($popHide,(scale(1)),(scale(0)));
@-webkit-keyframes popHide {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0);
    }
}

@-ms-keyframes popHide {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0);
    }
}

@-moz-keyframes popHide {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0);
    }
}

@-o-keyframes popHide {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0);
    }
}

@keyframes popHide {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0);
    }
}

//新消息更新动效
$newMessageCome:"newMessageCome";
@include CreateKeyframes($newMessageCome, (scale(2)), (scale(1)));


//用户信息下拉菜单项，点击后字体放大
// $newMessageCome:"newMessageCome";
// @include CreateKeyframes($newMessageCome,(scale(1);color:$M1),(scale(1.5);color:transparent));

@-webkit-keyframes fontScale {
    from {
        -webkit-transform: scale(1);
        color: $M1;
    }

    to {
        -webkit-transform: scale(1.5);
        color: transparent;
    }
}

@-moz-keyframes fontScale {
    from {
        -moz-transform: scale(1);
        color: $M1;
    }

    to {
        -moz-transform: scale(1.5);
        color: transparent;
    }
}

@-ms-keyframes fontScale {
    from {
        -ms-transform: scale(1);
        color: $M1;
    }

    to {
        -ms-transform: scale(1.5);
        color: transparent;
    }
}

@-o-keyframes fontScale {
    from {
        -o-transform: scale(1);
        color: $M1;
    }

    to {
        -o-transform: scale(1.5);
        color: transparent;
    }
}

@keyframes fontScale {
    from {
        transform: scale(1);
        color: $M1;
    }

    to {
        transform: scale(1.5);
        color: transparent;
    }
}