OwlCyberSecurity - MANAGER

Edit File: woo-quick-view.scss

/*------------------------------------------------------------------
Woo Quick View
-------------------------------------------------------------------*/

// Border radius
@mixin border-radius( $args ) {
   -webkit-border-radius: $args;
   -moz-border-radius: $args;
   -ms-border-radius: $args;
    border-radius: $args;
}

// Animation
@mixin animation( $args ) {
    -ms-animation: $args;
    -webkit-animation: $args;
	-o-animation: $args;
	-moz-animation: $args;
	animation: $args;
}

// Transform
@mixin transform( $args ) {
    -webkit-transform: $args;
    -moz-transform: $args;
    -ms-transform: $args;
    -o-transform: $args;
    transform: $args;
}

// Box Shadow
@mixin box-shadow( $args ) {
    -webkit-box-shadow: $args;
    -moz-box-shadow: $args;
    box-shadow: $args;
}

.owp-quick-view {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0;
    visibility: hidden;
    z-index: 12;

&:hover {
    	background-color: rgba(0, 0, 0, .9);
    	color: #fff;
    }

i {
		display: inline-block;
	    font-size: 16px;
	    font-weight: 400;
	    margin-right: 9px;
	    line-height: 1;
	    vertical-align: middle;
	    margin-top: -4px;
	}

}

.woo-entry-image {
	.owp-quick-view{
		.owp-icon {
			margin-right: 9px;
			line-height: 1;
			margin-top: -4px;
			use {
				stroke: #fff;

&:hover {
					stroke: #fff;
				}
			}
		}
	}
}

.woocommerce .products .product-inner:hover .owp-quick-view {
    opacity: 1;
    visibility: visible;
}

.woo-entry-image.loading {
	&:before {
		content: '';
		position: absolute;
	    top: 50%;
	    left: 50%;
	    margin-left: -15px;
	    margin-top: -15px;
	    width: 30px;
	    height: 30px;
	    opacity: .8;
	    border-width: 3px;
	    border-style: solid;
	    border-color: rgba(0,0,0,.1);
	    border-left-color: #fff;
	    z-index: 99;
	    @include border-radius( 50% );
	    @include animation( qv-spin .6s infinite linear );
	}

&:after {
		content: '';
	    background-color: rgba(0,0,0,.15);
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
    	height: 100%;
	    visibility: visible;
	    z-index: 11;
	}
}

@-webkit-keyframes qv-spin {
	0% {
	    -webkit-transform: rotate(0deg);
	}
	100% {
	    -webkit-transform: rotate(360deg);
	}
}

@keyframes qv-spin {
    0% {
	    transform: rotate(0deg);
	}
	100% {
	    transform: rotate(360deg);
	}
}

#owp-qv-wrap {
	display: none;
	overflow-x: hidden;
    overflow-y: auto;

&,
	.owp-qv-overlay {
		position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 999;
	}

.owp-qv-image,
	.summary {
		width: 50%;
	}

.owp-qv-slides,
	.flex-control-nav,
	.flex-direction-nav {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}

.owp-qv-slides {
	    display: inline-block;
    	vertical-align: top;
	}

.summary {
		padding: 30px;
		margin: 0;
	}

.flex-viewport {
	    float: none;
	    width: 100%;
	}

img {
		display: block;
	    width: 100%;
	    height: auto;
	}

.flex-control-nav {
	    position: absolute;
	    bottom: 10px;
	    width: 100%;
	    text-align: center;

li {
		    display: inline-block;
		    position: relative;
	    	margin: 0 5px;
	    	line-height: 1;
	    	z-index: 10;

a {
			    display: inline-block;
			    width: 12px;
			    height: 12px;
			    border: 3px solid #111;
			    opacity: 0.4;
			    text-indent: -9999px;
			    cursor: pointer;
    			@include border-radius( 50% );

&:hover {
    				opacity: 0.7;
    			}

&.flex-active {
				    background: rgba(0,0,0,.9);
				    cursor: default;
				}
	    	}
	    }
	}

.flex-direction-nav {
	    a {
		    position: absolute;
		    top: 50%;
		    width: 30px;
		    height: 30px;
		    margin-top: -15px;
		    color: rgba(0,0,0,.8);
		    opacity: 0;
		    overflow: hidden;
		    cursor: pointer;
		    z-index: 10;

&:before {
			    display: inline-block;
				font: normal normal 900 30px/1 'Font Awesome 5 free';
			    text-rendering: auto;
		    }

&.flex-prev {
			    left: -50px;
			    text-align: right;

&:before {
    				content: '\f104';
    			}
			}

&.flex-next {
			    right: -50px;

&:before {
    				content: '\f105';
    			}
			}
	    }
	}

.owp-qv-image:hover .flex-direction-nav a.flex-prev {
	    opacity: .8;
	    left: 10px;
	}

.owp-qv-image:hover .flex-direction-nav a.flex-next {
	    opacity: .8;
	    right: 10px;
	}
}

.owp-qv-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    padding: 30px;

&:before {
    	content: '';
    	display: inline-block;
	    height: 100%;
	    vertical-align: middle;
    }
}

.owp-qv-open {
	overflow: hidden;
}

.owp-qv-content-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    max-width: 100%;
    z-index: 1045;
    opacity: 0;
    @include transform( translateY(-30px) );
    -webkit-transition: transform .5s, opacity .3s;
    -moz-transition: transform .5s, opacity .3s;
    transition: transform .5s, opacity .3s;
}

.is-visible .owp-qv-content-wrap {
    opacity: 1;
    @include transform( translateY(0) );
}

.owp-qv-content-inner {
	position: relative;
	background-color: #fff;
    max-width: 875px;
    margin: 0 auto;
    z-index: 1000;
    @include box-shadow( 3px 3px 20px 0 rgba(0,0,0,0.15) );

.owp-qv-close {
    	position: absolute;
	    top: 0;
	    right: 0;
	    color: #333;
	    opacity: .5;
	    font-weight: 300;
	    font-size: 40px;
	    width: 40px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    z-index: 1001;

&:hover {
	    	opacity: 1;
	    }
    }

.product {
    	margin: 0;
    }

select {
    	padding: 0 12px;
    }
}

.owp-qv-overlay {
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}

#owp-qv-content a.woocommerce-review-link {
    display: none;
}

@media screen and (max-width: 850px) {
	#owp-qv-wrap .owp-qv-image,
	#owp-qv-wrap .summary {
		width: 100%;
	}

.owp-qv-container:before {
		display: none;
	}
}