wcui/js/lib/sliders/main.scss

@charset "UTF-8";
/**
 *
 * @authors Lincoln (875482941@qq.com)
 * @date    2017-09-07 20:32:11
 * @version $Id$
 */

 @import "../../../css/var.scss";
 // @import "../../../css/reset.scss";

.do-sliders {position: relative;height: 100%;width: 100%;

    .slider-content{height: 75%;position: relative;

        .container {position: relative;height: 100%;overflow: hidden;
            .box {height: 100%;width: 100%;transition: .4s;
                a {position:relative;display: inline-block;height: 100%;vertical-align: middle;
                    img {width: 100%;height: 100%;object-fit: cover;}
                    .title-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;text-align: center;font-size: 25px;}
                    .elm{height: 100%;width: 100%;background: #333;}
                    .default-elm{width: 100%;height: 100%;}
                }

            }
        }

        .slider-btn {position: absolute;top: 50%;min-width: 50px;min-height: 50px;margin-top: -25px;text-decoration: none;font-size: 30px;line-height: 50px;text-align: center;border-radius: 100%;color: rgba(255,255,255,.6);font-weight: bold;z-index: 1;transition: .4s;}
        // .slider-btn:hover {color: #fff;}
        .slider-btn:nth-of-type(1){margin-left: 20px;}
        // .slider-btn:nth-of-type(1):hover{animation: left-to-right .3s;}
        .slider-btn:nth-of-type(2){right: 0;margin-right: 20px;}
        // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;}
    }


    .slider-preview-btn {position: relative;bottom: -5%;height: 20%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden;

        span {display: inline-block;width: 10px;height: 10px;margin: 20px 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
        span:hover{background:nth($cg, 1);}
        .no-preview-act{background:nth($cg, 3);}


        .btn-img{display: inline-block;position: relative;width: 150px;height: 100%;margin: 0 5px;transition: .4s;cursor: pointer;
            img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;}
            .preview-act{transform: scale(.95)}
        }
        .btn-img .btn-background {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;}
        .btn-img.act .btn-background {opacity: 1;}
    }

    &.skin-0 .title-class{color: #fff}
    &.skin-1 .title-class{color: nth($cr, 3)}
    &.skin-2 .title-class{color: nth($cg, 3)}
    &.skin-3 .title-class{color: nth($cb, 3)}

    &.skin-0 .slider-btn{color: rgba(255,255,255,.6)}
    &.skin-1 .slider-btn{color: nth($cr, 3)}
    &.skin-2 .slider-btn{color: nth($cg, 3)}
    &.skin-3 .slider-btn{color: nth($cb, 3)}

    &.skin-0 .slider-btn:hover{color: #fff}
    &.skin-1 .slider-btn:hover{color: nth($cr, 1)}
    &.skin-2 .slider-btn:hover{color: nth($cg, 1)}
    &.skin-3 .slider-btn:hover{color: nth($cb, 1)}

    &.skin-0 .btn-img .btn-background{background: #fff}
    &.skin-1 .btn-img .btn-background{background: nth($cr, 1)}
    &.skin-2 .btn-img .btn-background{background: nth($cg, 1)}
    &.skin-3 .btn-img .btn-background{background: nth($cb, 1)}

    &.skin-0 .default-elm{background: #fff}
    &.skin-1 .default-elm{background: nth($cr, 1)}
    &.skin-2 .default-elm{background: nth($cg, 1)}
    &.skin-3 .default-elm{background: nth($cb, 1)}

}


@keyframes right-to-left{
    49% {-webkit-transform: translate(100%)}
    50% {-webkit-transform: translate(-100%);opacity: 0;}
    100% {opacity: 1;}
}

@keyframes left-to-right{
    49% {-webkit-transform: translate(-100%)}
    50% {-webkit-transform: translate(100%);opacity: 0;}
    100% {opacity: 1;}
}