Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-popup   php

Repository URL to install this package:

Version: 1.5.2 

/ scss / jet-popup-frontend.scss

@import "addons/jet-popup-action-button";
@import "addons/jet-popup-mailchimp";

.jet-popup.jet-popup--front-mode {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
	z-index: 999;

	.jet-popup__inner {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jet-popup__overlay {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		background-color: rgba( 0, 0, 0, 0.5);
	}

	.jet-popup__container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: stretch;
		width: 800px;
		max-width: 100%;
		max-height: 100%;
		height: auto;
		z-index: 2;
		opacity: 0;
	}

	.jet-popup__container-inner {
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: stretch;

		background-color: white;
		padding: 20px;
		z-index: 1;

		> .elementor {
			position: relative;
			z-index: 2;
		}
	}

	.jet-popup__container-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.jet-popup__container-content {
		position: relative;
		z-index: 2;
	}

	.jet-popup__close-button {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0px;
		right: 0px;
		cursor: pointer;
		z-index: 2;
		transition: all 0.2s ease;

		width: 30px;
		height: 30px;
		font-size: 20px;
		color: #fff;
		background-color: #6ec1e4;

		i {
			line-height: 1;
		}
	}

	&.jet-popup--loading-state {

		.jet-popup-loader {
			display: block;
		}

		.jet-popup__container-inner {
			display: none;
		}

		.jet-popup__close-button {
			display: none;
		}
	}

	&.jet-popup--hide-state {
		opacity: 0;
		pointer-events: none;
	}

	&.jet-popup--show-state {
		opacity: 1;
		pointer-events: none;

		.jet-popup__inner {
			pointer-events: none;
		}

		.jet-popup__overlay {
			pointer-events: all;
		}

		.jet-popup__container {
			pointer-events: all;
		}
	}

	&.jet-popup--animation-flip-x {
		perspective: 1000px;

		.jet-popup__container {
			transform-style: preserve-3d;
		}
	}

	&.jet-popup--animation-flip-y {
		perspective: 1000px;

		.jet-popup__container {
			transform-style: preserve-3d;
		}
	}

}

.jet-popup.jet-popup--single-preview {
	.jet-popup__overlay {
		opacity: 1;
	}

	.jet-popup__container {
		opacity: 1;
	}

	#wpadminbar {

	}
}

.single-jet-popup {
	background-image: url( '../image/transparent.jpg' );
	background-repeat: repeat;
	height: 100vh;
}

.jet-popup-cursor-pointer {
	cursor: pointer;
}

.jet-popup-prevent-scroll {
	overflow: hidden;
	max-height: 100vh;
}

.jet-popup-loader {
	display: none;
	width: 48px;
	height: 48px;
	border: 4px rgba( #fff,0.15 ) solid;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #fff;
	border-radius: 50%;
	animation: spCircRot .6s infinite linear;
}

@keyframes spCircRot {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}