?? 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: _info-card.scss

/* ==========================================================================
# Info Card - begin
========================================================================== */


.edgtf-info-card-holder {
    position: relative;
    @include edgtfBoxSizing(border-box);
    overflow:hidden;

	 > a {
	    position: absolute;
	    height: 100%;
	    width: 100%;
	    z-index: 111;
	}

	//animations
	&:hover, &:focus, &:active {
		.edgtf-info-card-holder-inner {
		    @include edgtfTransition(background-color .5s ease .1s);
		}

		.edgtf-image-1 {
		    top: -100%;
		    @include edgtfTransition(top .4s ease);
		}

		.edgtf-image-2 {
		    top: 0;
		    @include edgtfTransition(top .4s ease);
		}

		.edgtf-info-card-title-holder h3,
		.edgtf-info-card-text-holder p {
		    color: #fff;
		}

		.edgtf-info-card-icon-holder span i {
		    @include edgtfTransition(opacity .1s ease-out .1s !important); //override icon shortcode
		    opacity: 0;
		}

		.edgtf-info-card-icon-holder,
		.edgtf-info-card-title-holder,
		.edgtf-info-card-text-holder {
		    @include edgtfTransform(translateY(-30px));
		    -webkit-transition: -webkit-transform 1s cubic-bezier(0.01, 0.47, 0.58, 1) .1s;
		    transition: transform 1s cubic-bezier(0.01, 0.47, 0.58, 1) .1s;
		}

	}

}

.edgtf-info-card-holder-inner {
    position: relative;
    background-color: transparent;
    padding: 71px 32px 50px;
    z-index: 99;
    @include edgtfTransition(background-color .2s ease);
}


//images

%info-shader {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	transition: top .45s ease;
}

.edgtf-image-1 {
    @extend %info-shader;
    top: 0;
    z-index: 22;
}

.edgtf-image-2 {
	@extend %info-shader;
	background-color: $first-main-color;
	top: 100%;
	z-index: 11;
}


//content

.edgtf-info-card-title-holder {
	-webkit-transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
}

.edgtf-info-card-title-holder h3 {
	color:#000;
    @include edgtfTransition(color .3s ease-out);
}

.edgtf-info-card-icon-holder {
    margin: 20px 10px;
    -webkit-transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
}

.edgtf-info-card-icon-holder span i {
	color:#000;
	font-size: 2em;
    @include edgtfTransition(opacity .1s ease-out .1s !important); //override icon shortcode
}

.edgtf-info-card-text-holder {
    margin: 15px 0 5px;
    max-width: 90%;
    -webkit-backface-visibility: hidden; //fix text blur
    -webkit-transform-style: preserve-3d; //fix text flicker
    -webkit-transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
}

.edgtf-info-card-text-holder p {
	color:#000;
    @include edgtfTransition(color .15s ease-out);
}


/* ==========================================================================
# Info Card - end
========================================================================== */

??

??