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

/* ==========================================================================
# Carousels style - begin
========================================================================== */

/* show when carousel is initialized */
.edgtf-carousel{
	display:none;
}

.edgtf-carousel-holder {

	.edgtf-carousel-item-holder {
		position: relative;

		.edgtf-carousel-item-title {
			text-align: center;
			margin-top: 20px;
		}

		/* Image roll over  - begin
		========================================================================== */

		&.edgtf-carousel-roll-over {
			.edgtf-carousel-first-image-holder,
			.edgtf-carousel-second-image-holder {
				-webkit-transition: -webkit-transform .22s cubic-bezier(0.6,-0.28,0.26,0.99);
				transition: transform .22s cubic-bezier(0.6,-0.28,0.26,0.99);
				display: block;
			}
			.edgtf-carousel-second-image-holder{
				@include edgtfTransform(translateY(-100%));
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			&:hover .edgtf-carousel-second-image-holder{
				@include edgtfTransform(translateY(0%));
			}
			&:hover .edgtf-carousel-first-image-holder{
				@include edgtfTransform(translateY(100%));
			}

		}


		/* Image roll over - end
		========================================================================== */


		/* Image fade - begin
		========================================================================== */


		&.edgtf-carousel-fade {
			.edgtf-carousel-first-image-holder,
			.edgtf-carousel-second-image-holder  {
				@include edgtfTransition(opacity .3s ease-in-out);
			}
			.edgtf-carousel-second-image-holder{
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			&:hover .edgtf-carousel-second-image-holder{
				opacity: 1;
			}
			&:hover .edgtf-carousel-first-image-holder{
				opacity: 0;
			}
		}


		/* Image fade on hover - end
		========================================================================== */

	}


	/* Carousel navigation - begin
	========================================================================== */

	.edgtf-carousel.owl-carousel {

		.owl-nav {

			width: 100%;

			.owl-prev {
				position: absolute;
				top: 50%;
				@include edgtfTransform(translateY(-50%));
				left: 1%;
			}

			.owl-next {
				position: absolute;
				top: 50%;
				@include edgtfTransform(translateY(-50%));
				right: 1%;
			}

			.edgtf-prev-icon,
			.edgtf-next-icon {
				display: inline-block;
				width: 42px;
				height: 42px;
				text-align: center;

				i {	
					@include edgtfTransition(color .3s ease-out);
					font-size: 45px;
					line-height: 45px;
					color: #fff;
				}
				&:hover{
                    i {
                        color:$first-main-color;
                    }
                }
			}
		}

		.owl-dots {
			text-align: center;
			margin-top: 55px;

			.owl-dot {
				display: inline-block;
			}

			.owl-dot span {
				display: inline-block;
				width: 6px;
				height: 6px;
				margin: 3px 9px;
				background-color: $first-main-color;
			}

			.owl-dot.active span {
				background-color: $second-main-color;
			}

		}

	}

	/* Carousel navigation - end
	========================================================================== */

}

/* ==========================================================================
# Carousels style - end
========================================================================== */

??

??