22

✏️ Editing: _jet-image-accordion.scss

.jet-image-accordion {
	overflow: hidden;

&__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		position: relative;
		height: 600px;
		overflow: hidden;
		z-index: 1;
	}

&__item {
		display: flex;
		align-items: stretch;
		overflow: hidden;
		flex-shrink: 0;
		flex-basis: auto;
		transition-property: all;
		transition-duration: 500ms;
		transition-timing-function: cubic-bezier(.83,.08,.16,.97);
		backface-visibility: hidden;
		transform: translateZ(0);

&.active-accordion {
			flex-grow: 2;

.jet-image-accordion__content {
				opacity: 1;
				transition-delay: 500ms;
			}
		}

&:focus-visible {
			outline: auto;
		}

&:before {
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
			top: 0;
			left: 0;
			z-index: 1;
			content: '';
		}

&.title-display-mode__on_both_states {
			&.active-accordion {
				.jet-image-accordion__title-default {
					opacity: 0;
				}
			}
		}
	}

&__image-instance {
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		width: 100%;
		height: 100% !important;
		opacity: 0;
		transition: opacity 300ms ease;

&.loaded {
			opacity: 1;
		}
	}

&__content {
		position: absolute;
		display: flex;
		flex-flow: column;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 20px;
		overflow: hidden;
		opacity: 0;
		z-index: 2;
		background-color: rgba( 0,0,0, 0.5 );
		transition: opacity 300ms ease;

&:empty {
			display: none;
		}
	}

&__title {
		align-self: stretch;
		text-align: left;
		color: white;
		font-size: 20px;

&-default {
			display: flex;
			padding: 20px;
			height: fit-content;
			width: 100%;
			color: white;
			font-size: 20px;
			z-index: 9;
		}
	}

&__desc {
		align-self: stretch;
		text-align: left;
		color: white;
		font-size: 16px;
		margin-bottom: 20px;
	}

&__button {
		font-weight: 500;
		background-color: #6ec1e4;
	}

&__item-loader {
		position: absolute;
		display: none;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba( 0,0,0, 0.5 );
		z-index: 1;

.jet-image-accordion__image-instance ~ & {
			display: flex;
		}

span {
			width: 32px;
			height: 32px;
			display: block;
			background: url( '../images/spinner-32.svg' ) no-repeat;
		}
	}

&.jet-image-accordion-vertical-orientation {
		.jet-image-accordion__list {
			flex-direction: row;
		}
	}

&.jet-image-accordion-horizontal-orientation {
		.jet-image-accordion__list {
			flex-direction: column;
		}
	}

&.jet-image-accordion-sine-ease {
		.jet-image-accordion__item {
			transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
		}
	}

&.jet-image-accordion-quint-ease {
		.jet-image-accordion__item {
			transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
		}
	}

&.jet-image-accordion-cubic-ease {
		.jet-image-accordion__item {
			transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
	}

&.jet-image-accordion-expo-ease {
		.jet-image-accordion__item {
			transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
		}
	}

&.jet-image-accordion-back-ease {
		.jet-image-accordion__item {
			transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
		}
	}
}

// Compatibility Imagify plugin

picture.jet-image-accordion__image-instance{
	opacity: 1;
	img{
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		width: 100%;
		height: 100% !important;
		opacity: 0;
		transition: opacity 300ms ease;
		&.loaded {
			opacity: 1;
		}
	}
}

MR SKB