?? GreyFile — Mystic File Browser

Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/shortcodes/


?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules

?? Viewing: _floating-slider.scss

/* ==========================================================================
   Floating Slider - Start
   ========================================================================== */

.edgtf-floating-slider {
	overflow: hidden;
}

.edgtf-fs-background-elements {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;

	.floater {
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		position: absolute;
	}
}

.edgtf-fs-background-elements-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0,0);
	transform: translate(0,0);

	&.running {
		opacity: 1;
		filter: alpha(opacity=100);
	}
}

.edgtf-fs-front-content-inner {
	position: relative;
	box-sizing: border-box;
}

.edgtf-fs-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;

	&.current {
		z-index: 10;
	}
}

.fs-container {
	position: absolute;
	top: 100%;
	background: transparent center center no-repeat;
	background-size: cover;

	.fs-cont-title {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		text-align: center;
		opacity: 0;
		margin-top: 7px;
		-webkit-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
		transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
	}

	&:hover .fs-cont-title {
		opacity: 1;
		margin-top: 0;
	}

	.fs-cont-title h2 {
		color: white;
	}

	.fs-cont-date {
		position: absolute;
        z-index: 100;
        @include edgtfTransition(transform 0.3s ease-in-out, background-color 0.2s ease-in-out);
        background-color: #18202d;
        width: 58px;
        padding-top: 13px;
        padding-bottom: 13px;
        color: #fff;
        -webkit-transition: -webkit-transform 0.3s ease-in-out, background-color 0.2s ease-in-out;
	    transition: transform 0.3s ease-in-out, background-color 0.2s ease-in-out;

        span{
            display: block;
            text-align: center;
        }

        .edgtf-date-month{
            font-size: 12px;
            line-height: 16px;
        }
        .edgtf-date-day{
            font-size: 28px;
            line-height: 28px;
            font-weight: 700;
            margin-bottom: 2px;
        }
        .edgtf-date-year{
            font-size: 12px;
            line-height: 16px;
            opacity: 0.38;
            @include edgtfTransition(color 0.1s ease-in-out);
        }
	}

	&:hover .fs-cont-date {
		-webkit-transform: translateY(-7px);
	    transform: translateY(-7px);
	    background-color: #fb3644;
	}

	& > a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	& > img {
		display: block;
	}
}

.edgtf-fs-nav {
	position: absolute;
    bottom: 20px;
    z-index: 30;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);

	& .nav_but {
		float: left;
	    margin-right: 10px;
	    font-size: 16px;
	    cursor: pointer;
	    padding: 5px;
	    color: #0d2d32;
	    position: relative;

	    &:last-child {
	    	margin-right: 0;
	    }

	    &:before {
	    	content: '';
		    position: absolute;
		    top: 0;
		    left: 50%;
		    width: 6px;
		    height: 6px;
		    background-color: $first-main-color;
		    margin-top: -6px;
		    margin-left: -3px;
		    -webkit-transition: background-color 1s ease;
		    transition: background-color 1s ease;
	    }

	    &.seen:before {
		    background-color: #0d2d32;
	    }

	    & > span {
	    	-webkit-transition: opacity 1s ease;
	    	transition: opacity 1s ease;
	    	opacity: 0;
	    	filter: alpha(opacity=0);
	    }

	    &.current > span {
	    	opacity: 100;
	    	filter: alpha(opacity=100);
	    }
	}
}

/* ==========================================================================
   Floating Slider - End
   ========================================================================== */

??

??