Edit

Editing: hello-plus-zigzag.scss

@use "../../../../dev/scss/variables";

.ehp-zigzag {
	--zigzag-title-color: #000000;
	--zigzag-description-color: #000000;
	--zigzag-content-position: center;
	--zigzag-image-width: 50%;
	--zigzag-icon-width: 50%;
	--zigzag-icon-size: 256px;
	--zigzag-icon-color: #555963;
	--zigzag-icon-color-alternate: var(--zigzag-icon-color);

--zigzag-animation-delay: 0;
	--zigzag-animation-duration: 1s;

--zigzag-animation-duration-slow: 2s;
	--zigzag-animation-duration-normal: 1s;
	--zigzag-animation-duration-fast: 0.8s;

--zigzag-button-primary-icon-spacing: 10px;
	--zigzag-button-primary-text-color: #{variables.$global-colors-white};
	--zigzag-button-primary-text-color-hover: #{variables.$global-colors-text};
	--zigzag-button-primary-text-color-alternate: var(--zigzag-button-primary-text-color);
	--zigzag-button-primary-text-color-hover-alternate: var(--zigzag-button-primary-text-color-hover);
	--zigzag-button-primary-border-width: 0;
	--zigzag-button-primary-border-color: transparent;
	--zigzag-button-primary-border-radius-block-end: #{variables.$corners-shape-default};
	--zigzag-button-primary-border-radius-block-start: #{variables.$corners-shape-default};
	--zigzag-button-primary-border-radius-inline-end: #{variables.$corners-shape-default};
	--zigzag-button-primary-border-radius-inline-start: #{variables.$corners-shape-default};

align-items: center;
	background-color: transparent;
	display: flex;
	flex-direction: column;

& a.ehp-zigzag__button,
	& a.ehp-zigzag__button:not([href]):not([tabindex]) {
		--ehp-button-primary-icon-spacing: var(--zigzag-button-primary-icon-spacing);
		--ehp-button-primary-text-color: var(--zigzag-button-primary-text-color);
		--ehp-button-primary-text-color-hover: var(--zigzag-button-primary-text-color-hover);
		--ehp-button-primary-border-width: var(--zigzag-button-primary-border-width);
		--ehp-button-primary-border-color: var(--zigzag-button-primary-border-color);
		--ehp-button-primary-padding-block-end: var(--zigzag-button-primary-padding-block-end);
		--ehp-button-primary-padding-block-start: var(--zigzag-button-primary-padding-block-start);
		--ehp-button-primary-padding-inline-end: var(--zigzag-button-primary-padding-inline-end);
		--ehp-button-primary-padding-inline-start: var(--zigzag-button-primary-padding-inline-start);
		--ehp-button-primary-border-radius-block-end: var(--zigzag-button-primary-border-radius-block-end);
		--ehp-button-primary-border-radius-block-start: var(--zigzag-button-primary-border-radius-block-start);
		--ehp-button-primary-border-radius-inline-end: var(--zigzag-button-primary-border-radius-inline-end);
		--ehp-button-primary-border-radius-inline-start: var(--zigzag-button-primary-border-radius-inline-start);
	}

&.has-alternate {

&-button-styles .ehp-zigzag__item-wrapper:nth-child(even) {

& a.ehp-zigzag__button,
			& a.ehp-zigzag__button:not([href]):not([tabindex]) {
				--ehp-button-primary-text-color: var(--zigzag-button-primary-text-color-alternate);
				--ehp-button-primary-text-color-hover: var(--zigzag-button-primary-text-color-hover-alternate);
			}
		}

&-button-border-styles .ehp-zigzag__item-wrapper:nth-child(even) {
			& a.ehp-zigzag__button,
			& a.ehp-zigzag__button:not([href]):not([tabindex]) {
				border: var(--zigzag-button-primary-border-width-alternate) solid var(--zigzag-button-primary-border-color-alternate);
			}
		}

&-icon-color .ehp-zigzag__item-wrapper:nth-child(even) {

& .ehp-zigzag__graphic-element-container {
				color: var(--zigzag-icon-color-alternate);
			}
		}
	}

& .ehp-image {
		--ehp-image-height: var(--zigzag-image-height);
		--ehp-image-min-height: var(--zigzag-image-min-height);
		--ehp-image-position: var(--zigzag-image-position);
		--ehp-image-border-color: var(--zigzag-image-border-color);
		--ehp-image-border-width: var(--zigzag-image-border-width);
		--ehp-image-border-radius-block-end: var(--zigzag-image-border-radius-block-end);
		--ehp-image-border-radius-block-start: var(--zigzag-image-border-radius-block-start);
		--ehp-image-border-radius-inline-end: var(--zigzag-image-border-radius-inline-end);
		--ehp-image-border-radius-inline-start: var(--zigzag-image-border-radius-inline-start);
	}

&__button-container {
		display: flex;
	}

&__text-container {
		display: flex;
		flex-direction: column;
		justify-content: var(--zigzag-content-position);

&.is-graphic-image {
			width: calc(100% - var(--zigzag-image-width));
		}

&.is-graphic-icon {
			width: calc(100% - var(--zigzag-icon-width));
		}
	}

&__image-container {
		width: 100%;
	}

&__title {
		color: var(--zigzag-title-color);
	}

&__description {
		color: var(--zigzag-description-color);
		font-size: 18px;
	}

&__graphic-element-container {
		align-items: var(--zigzag-content-position);
		display: flex;

&.has-image {
			width: var(--zigzag-image-width);

.elementor & img {
				width: 100%;
			}
		}

&.has-icon {
			color: var(--zigzag-icon-color);
			display: flex;
			justify-content: center;
			width: var(--zigzag-icon-width);

& svg {
				fill: currentColor;
				height: var(--zigzag-icon-size);
				width: var(--zigzag-icon-size);
			}

& i {
				font-size: var(--zigzag-icon-size);
			}
		}
	}

&__item-container {
		display: flex;
		gap: var(--zigzag-column-gap);
		padding-block: calc(var(--zigzag-row-gap) / 2);
		padding-inline-start: var(--zigzag-box-padding-inline-start);
		padding-inline-end: var(--zigzag-box-padding-inline-end);
		max-width: var(--zigzag-content-width);
		width: 100%;
	}

&.has-entrance-animation {

& .ehp-zigzag__item-wrapper {
			animation-delay: var(--zigzag-animation-delay);
			animation-duration: var(--zigzag-animation-duration);
			animation-fill-mode: both;
			animation-timing-function: ease;
		}
	}

&__item-wrapper {
		display: flex;
		justify-content: center;
		width: 100%;

&:first-of-type {

.ehp-zigzag__item-container {
				padding-block-start: var(--zigzag-box-padding-block-start);
			}
		}

&:last-of-type {

.ehp-zigzag__item-container {
				padding-block-end: var(--zigzag-box-padding-block-end);
			}
		}

&.hidden {
			opacity: 0;
			visibility: hidden;
		}

&.visible {
			opacity: 1;
			visibility: visible;
		}
	}

@media screen and (min-width: variables.$screen-desktop-min) {
		&.has-direction {
			&-start {
				.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__item-container {
						flex-direction: row;
					}
				}

.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__item-container {
						flex-direction: row-reverse;
					}
				}
			}

&-end {
				.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__item-container {
						flex-direction: row-reverse;
					}
				}

.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__item-container {
						flex-direction: row;
					}
				}
			}
		}
	}

@media screen and (max-width: variables.$screen-tablet-max) {
		.ehp-zigzag__item-container {
			flex-direction: column;
		}

&.has-direction-end {

.ehp-zigzag__graphic-element-container {
				order: 2;
			}

.ehp-zigzag__text-container {
				order: 1;
			}
		}

.ehp-zigzag__graphic-element-container,
		.ehp-zigzag__text-container {
			padding-inline: 0;
			width: 100%;
		}
	}

&.has-image-stretch {

& .ehp-zigzag__item-container {
			padding-inline: 0;

@media screen and (max-width: variables.$screen-tablet-max) {
				padding-block: 0;
			}
		}

.ehp-zigzag__text-container {
			@media screen and (max-width: variables.$screen-tablet-max) {
				padding-inline-start: var(--zigzag-box-padding-inline-start);
				padding-inline-end: var(--zigzag-box-padding-inline-end);
			}
		}

&.has-direction {
			&-start {

.ehp-zigzag__text-container {
					@media screen and (max-width: variables.$screen-tablet-max) {
						padding-block-end: var(--zigzag-box-padding-block-end);
					}
				}

.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__text-container {
						@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-end: var(--zigzag-box-padding-inline-end);
						}
					}
				}

.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__text-container {

@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-start: var(--zigzag-box-padding-inline-start);
						}
					}
				}
			}

&-end {

.ehp-zigzag__text-container {
					@media screen and (max-width: variables.$screen-tablet-max) {
						padding-block-start: var(--zigzag-box-padding-block-start);
					}
				}

.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__text-container {

@media screen and (max-width: variables.$screen-tablet-max) {
							padding-block-start: var(--zigzag-box-padding-block-start);
						}

@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-start: var(--zigzag-box-padding-inline-start);
						}
					}
				}

.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__text-container {

@media screen and (max-width: variables.$screen-tablet-max) {
							padding-block-start: var(--zigzag-box-padding-block-start);
						}

@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-end: var(--zigzag-box-padding-inline-end);
						}
					}
				}
			}
		}
	}
}

Back