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); } } } } } } }
Save
Back