react-jam-ui/components/Slider/styles.styl

React JAM UI components

.slider {
    position: relative;
    overflow: hidden;

    &-slides {
        display: flex;
        width: 300%;
    }

    &-slide {
        width: 100%;
        display: none;

        &.active {
            display: block;
        }
    }

    &-prev,
    &-next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        user-select: none;
        font-size: 70px;
        color: #FFFFFF;
        z-index:20;
    }

    &-prev {
        left: 20px;
    }
    
    &-next {
        right: 20px;
    }
    
    &-thumbs {
        display: flex;
        overflow: auto;
        text-align: center;
        justify-content: center;
    }

    &-thumb {        
        cursor: pointer;
        flex: 0 0 100px;
        user-select: none;
    }
}

.slider-thumbs--empty {
    position: absolute;
    z-index: 15;
    width: 100%;
    bottom: 80px;
    left: 0;

    .slider-thumb {
        display: inline-block;
        vertical-align: middle;
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
        margin: 0 5px;
        border: 1px solid #fff;
        background: none;
        text-indent: 100%;
        border-radius: 50%;
        font-size: 0;
        transition: background 0.4s ease-in-out;

        &.active {
            background-color: #fff;
        }
    }
}
    
.slider-slides {
    padding-bottom: 41%;
}
.slider-slide {
    &.slider-fade {
        position: absolute;
        height: 100%;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.active {
            animation: fadein 1s;
        }
        &.out {
            display: block;
            animation: fadeout 1s;
        }
    }
}

.slide-inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 15%;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,.75);
    text-align: center;
    left: 0;
    top: 0;
    z-index:10;
    position: absolute;

    &-title {
        font-size: 52px;
        line-height: 70px;
        flex: 0 1 auto;
    }

    .btn {
        margin-top: 40px;
    }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}