@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-content-box-settings-v3/content-box-settings-v3.scss

@@ -0,0 +1,205 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-box-shadow-v3/box-shadow-v3';
+@use '../../breakpoints';
+
+@mixin contentBoxSettingsV3() {
+	&__inner-container {
+		grid-area: main;
+		place-self: var(--content-box-vert-align-mobile)
+			var(--content-box-horiz-align-mobile);
+		z-index: var(--content-z-index, 5);
+		overflow: var(--content-box-overflow);
+		min-width: min-content;
+		aspect-ratio: var(--content-box-aspect-ratio);
+		border-radius: var(--border-radius);
+		border-width: var(--border-width);
+		border-color: var(--border-colour);
+		border-style: var(--border-style);
+		display: flex;
+		flex-direction: var(--content-box-items-direction-mobile, column);
+		justify-content: var(--content-items-alignment-mobile);
+		align-items: center;
+		background-color: var(--cb-bg-colour);
+		padding: calc(
+				var(--global-inline-spacing) *
+					var(--content-box-top-padding-mult-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-box-right-padding-mult-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-box-bottom-padding-mult-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-box-left-padding-mult-mobile)
+			);
+		margin: calc(
+				var(--global-inline-spacing) *
+					var(--content-box-top-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-box-right-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-box-bottom-margin-mobile)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--content-box-left-margin-mobile)
+			);
+		column-gap: var(
+			--content-items-micro-gap-mobile,
+			calc(var(--content-items-gap-mobile) * var(--global-inline-spacing))
+		);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			justify-content: var(--content-items-alignment-portrait);
+			place-self: var(--content-box-vert-align-portrait)
+				var(--content-box-horiz-align-portrait);
+			padding: calc(
+					var(--global-inline-spacing) *
+						var(--content-box-top-padding-mult-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-right-padding-mult-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-bottom-padding-mult-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-left-padding-mult-portrait)
+				);
+			margin: calc(
+					var(--global-inline-spacing) *
+						var(--content-box-top-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-right-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-bottom-margin-portrait)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-left-margin-portrait)
+				);
+		}
+
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			column-gap: var(
+				--content-items-micro-gap-desktop,
+				calc(
+					var(--content-items-gap-desktop) *
+						var(--global-inline-spacing)
+				)
+			);
+			justify-content: var(--content-items-alignment);
+			max-width: var(--cb-max-width);
+			place-self: var(--content-box-vert-align)
+				var(--content-box-horiz-align);
+			padding: calc(
+					var(--global-inline-spacing) *
+						var(--content-box-top-padding-mult)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-right-padding-mult)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-bottom-padding-mult)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-left-padding-mult)
+				);
+			margin: calc(
+					var(--global-inline-spacing) * var(--content-box-top-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-right-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-bottom-margin)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--content-box-left-margin)
+				);
+		}
+
+		@include box-shadow-v3.boxShadow();
+	}
+	&__content-box,
+	&__content-container {
+		max-width: var(--wysiwyg-max-width-mobile);
+		margin-inline: auto;
+		display: grid;
+		word-break: normal;
+		width: var(--content-box-width, 100%);
+		-webkit-text-stroke: core-functions-v3.fontSize(
+				var(--text-stroke-width),
+				'static'
+			)
+			var(--text-stroke-colour);
+		&:last-child {
+			margin-bottom: 0;
+		}
+		@include core-mixins-v3.defaultThemeTextColours();
+		@include core-mixins-v3.defaultTextTransform();
+		@include core-mixins-v3.defaultTextAlign();
+		@include core-mixins-v3.responsiveShowHide();
+		p,
+		li,
+		div {
+			@include core-mixins-v3.defaultFontWeight();
+			@include core-mixins-v3.defaultFontStyle();
+		}
+
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			max-width: var(--wysiwyg-max-width-portrait);
+		}
+
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			max-width: var(--wysiwyg-max-width);
+		}
+	}
+
+	&--text-shadow {
+		@include core-mixins-v3.textShadow();
+	}
+
+	&__cta-selection-container {
+		width: 100%;
+		display: var(--cta-container-display);
+		grid-template-columns: var(--grid-columns-mobile);
+		flex-wrap: wrap;
+		flex-direction: var(--cta-flex-direction);
+		justify-content: var(--cta-alignment-mobile);
+		gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
+
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			gap: calc(
+				var(--global-inline-spacing) * var(--cta-spacing-gap-desktop)
+			);
+			justify-content: var(--cta-alignment-portrait);
+			grid-template-columns: var(--grid-columns-portrait);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			justify-content: var(--cta-alignment);
+			grid-template-columns: var(--grid-columns-desktop);
+		}
+	}
+}

package/components/component-content-box-settings-v3/content-box-settings-v3.twig

@@ -0,0 +1,156 @@
+{% if fields.content_box_vertical_alignment %}
+
+	{% set contentBoxVertAlign = '--content-box-vert-align:' ~ (fields.content_box_vertical_alignment|ru) ~ ';' %}
+	{% set contentBoxHorizAlign = '--content-box-horiz-align:' ~ (fields.content_box_horizontal_alignment|ru) ~ ';' %}
+	{% set contentBoxVertAlignPortrait = '--content-box-vert-align-portrait:' ~ (fields.content_box_vertical_alignment_portrait|ru|default(fields.content_box_vertical_alignment|ru)) ~ ';' %}
+	{% set contentBoxHorizAlignPortrait = '--content-box-horiz-align-portrait:' ~ (fields.content_box_horizontal_alignment_portrait|ru|default(fields.content_box_horizontal_alignment|ru)) ~ ';' %}
+	{% set contentBoxVertAlignMobile = '--content-box-vert-align-mobile:' ~ (fields.content_box_vertical_alignment_mobile|ru|default(fields.content_box_vertical_alignment|ru)) ~ ';' %}
+	{% set contentBoxHorizAlignMobile = '--content-box-horiz-align-mobile:' ~ (fields.content_box_horizontal_alignment_mobile|ru|default(fields.content_box_horizontal_alignment|ru)) ~ ';' %}
+	{% set contentItemsAlignment = '--content-items-alignment:' ~ fields.content_items_alignment|ru|default('center') ~ ';' %}
+	{% set contentItemsAlignmentPortrait = '--content-items-alignment-portrait:' ~ fields.content_items_alignment_portrait|ru|default('center') ~ ';' %}
+	{% set contentItemsAlignmentMobile = '--content-items-alignment-mobile:' ~ fields.content_items_alignment_mobile|ru|default('center') ~ ';' %}
+	{% set contentBoxBgColour = '--cb-bg-colour:' ~ (fields.content_box_background|ru) ~ ';' %}
+	{% set contentBoxBorderStyle = '--border-style:' ~ fields.content_box_border_style|ru|default('none') ~ ';' %}
+	{% set contentBoxBorderRadius = '--border-radius:' ~ fields.content_box_border_radius ~ ';' %}
+	{% set contentBoxBorderColour = '--border-colour:' ~ fields.content_box_border_colour ~ ';' %}
+	{% set contentBoxBorderWidth = '--border-width:' ~ fields.content_box_border_width|default('0') ~ 'px;' %}
+
+	{% set enableAdvancedContentBoxSettings = fields.enable_advanced_content_box_settings %}
+
+	{% set contentBoxTopPaddingValue = fields.content_box_padding_desktop_top %}
+	{% set contentBoxRightPaddingValue = fields.content_box_padding_desktop_right %}
+	{% set contentBoxBottomPaddingValue = fields.content_box_padding_desktop_bottom %}
+	{% set contentBoxLeftPaddingValue = fields.content_box_padding_desktop_left %}
+
+	{% set contentBoxTopMarginValue = fields.content_box_margin_desktop_top %}
+	{% set contentBoxRightMarginValue = fields.content_box_margin_desktop_right %}
+	{% set contentBoxBottomMarginValue = fields.content_box_margin_desktop_bottom %}
+	{% set contentBoxLeftMarginValue = fields.content_box_margin_desktop_left %}
+
+	{% set contentBoxTopPadding = '--content-box-top-padding-mult:' ~ contentBoxTopPaddingValue ~ ';' %}
+	{% set contentBoxRightPadding = '--content-box-right-padding-mult:' ~ contentBoxRightPaddingValue ~ ';' %}
+	{% set contentBoxBottomPadding = '--content-box-bottom-padding-mult:' ~ contentBoxBottomPaddingValue ~ ';' %}
+	{% set contentBoxLeftPadding = '--content-box-left-padding-mult:' ~ contentBoxLeftPaddingValue ~ ';' %}
+
+	{% set contentBoxTopMargin = '--content-box-top-margin:' ~ contentBoxTopMarginValue ~ ';' %}
+	{% set contentBoxRightMargin = '--content-box-right-margin:' ~ contentBoxRightMarginValue ~ ';' %}
+	{% set contentBoxBottomMargin = '--content-box-bottom-margin:' ~ contentBoxBottomMarginValue ~ ';' %}
+	{% set contentBoxLeftMargin = '--content-box-left-margin:' ~ contentBoxLeftMarginValue ~ ';' %}
+
+	{% set contentBoxPaddingTopMobileValue = contentBoxTopPaddingValue %}
+	{% set contentBoxPaddingRightMobileValue = contentBoxRightPaddingValue %}
+	{% set contentBoxPaddingBottomMobileValue = contentBoxBottomPaddingValue %}
+	{% set contentBoxPaddingLeftMobileValue = contentBoxLeftPaddingValue %}
+
+	{% set contentBoxTopMarginMobileValue = contentBoxTopMarginValue %}
+	{% set contentBoxRightMarginMobileValue = contentBoxRightMarginValue %}
+	{% set contentBoxBottomMarginMobileValue = contentBoxBottomMarginValue %}
+	{% set contentBoxLeftMarginMobileValue = contentBoxLeftMarginValue %}
+
+	{% if fields.enable_mobile_content_box_layout %}
+		{% set contentBoxPaddingTopMobileValue = fields.content_box_padding_mobile_top %}
+		{% set contentBoxPaddingRightMobileValue = fields.content_box_padding_mobile_right %}
+		{% set contentBoxPaddingBottomMobileValue = fields.content_box_padding_mobile_bottom %}
+		{% set contentBoxPaddingLeftMobileValue = fields.content_box_padding_mobile_left  %}
+
+		{% set contentBoxTopMarginMobileValue =  fields.content_box_margin_mobile_top %}
+		{% set contentBoxRightMarginMobileValue =  fields.content_box_margin_mobile_right %}
+		{% set contentBoxBottomMarginMobileValue =  fields.content_box_margin_mobile_bottom %}
+		{% set contentBoxLeftMarginMobileValue =  fields.content_box_margin_mobile_left %}
+
+	{% endif %}
+
+	{% set contentBoxPaddingTopMobile = '--content-box-top-padding-mult-mobile:' ~ contentBoxPaddingTopMobileValue ~ ';' %}
+	{% set contentBoxPaddingRightMobile = '--content-box-right-padding-mult-mobile:' ~ contentBoxPaddingRightMobileValue ~ ';' %}
+	{% set contentBoxPaddingBottomMobile = '--content-box-bottom-padding-mult-mobile:' ~ contentBoxPaddingBottomMobileValue ~ ';' %}
+	{% set contentBoxPaddingLeftMobile = '--content-box-left-padding-mult-mobile:' ~  contentBoxPaddingLeftMobileValue ~ ';' %}
+
+	{% set contentBoxTopMarginMobile = '--content-box-top-margin-mobile:' ~ contentBoxTopMarginMobileValue ~ ';' %}
+	{% set contentBoxRightMarginMobile = '--content-box-right-margin-mobile:' ~ contentBoxRightMarginMobileValue ~ ';' %}
+	{% set contentBoxBottomMarginMobile = '--content-box-bottom-margin-mobile:' ~ contentBoxBottomMarginMobileValue ~ ';' %}
+	{% set contentBoxLeftMarginMobile = '--content-box-left-margin-mobile:' ~ contentBoxLeftMarginMobileValue ~ ';' %}
+
+
+	{% set contentBoxPaddingTopPortrait = '--content-box-top-padding-mult-portrait:' ~ contentBoxPaddingTopMobileValue ~ ';' %}
+	{% set contentBoxPaddingRightPortrait = '--content-box-right-padding-mult-portrait:' ~ contentBoxPaddingRightMobileValue ~ ';' %}
+	{% set contentBoxPaddingBottomPortrait = '--content-box-bottom-padding-mult-portrait:' ~ contentBoxPaddingBottomMobileValue ~ ';' %}
+	{% set contentBoxPaddingLeftPortrait = '--content-box-left-padding-mult-portrait:' ~ contentBoxPaddingLeftMobileValue ~ ';' %}
+
+	{% set contentBoxTopMarginPortrait = '--content-box-top-margin-portrait:' ~ contentBoxTopMarginMobileValue ~ ';' %}
+	{% set contentBoxRightMarginPortrait = '--content-box-right-margin-portrait:' ~ contentBoxRightMarginMobileValue ~ ';' %}
+	{% set contentBoxBottomMarginPortrait = '--content-box-bottom-margin-portrait:' ~ contentBoxBottomMarginMobileValue ~ ';' %}
+	{% set contentBoxLeftMarginPortrait = '--content-box-left-margin-portrait:' ~ contentBoxLeftMarginMobileValue ~ ';' %}
+
+	{% if fields.enable_portrait_content_box_layout %}
+		{% set contentBoxPaddingTopPortrait = '--content-box-top-padding-mult-portrait:' ~ fields.content_box_padding_portrait_top ~ ';' %}
+		{% set contentBoxPaddingRightPortrait = '--content-box-right-padding-mult-portrait:' ~ fields.content_box_padding_portrait_right ~ ';' %}
+		{% set contentBoxPaddingBottomPortrait = '--content-box-bottom-padding-mult-portrait:' ~ fields.content_box_padding_portrait_bottom ~ ';' %}
+		{% set contentBoxPaddingLeftPortrait = '--content-box-left-padding-mult-portrait:' ~ fields.content_box_padding_portrait_left ~ ';' %}
+
+		{% set contentBoxTopMarginPortrait = '--content-box-top-margin-portrait:' ~ fields.content_box_margin_portrait_top ~ ';' %}
+		{% set contentBoxRightMarginPortrait = '--content-box-right-margin-portrait:' ~ fields.content_box_margin_portrait_right ~ ';' %}
+		{% set contentBoxBottomMarginPortrait = '--content-box-bottom-margin-portrait:' ~ fields.content_box_margin_portrait_bottom ~ ';' %}
+		{% set contentBoxLeftMarginPortrait = '--content-box-left-margin-portrait:' ~ fields.content_box_margin_portrait_left ~ ';' %}
+	{% endif %}
+
+
+	{% if fields.enable_box_shadow %}
+		{% set boxShadowClass = blockClassName ~ "__inner-container--box-shadow" %}
+		{% set boxShadowStyle = "--box-shadow-offset-x:" ~ (fields.box_shadow_horizontal_offset|default(0)) ~ "; --box-shadow-offset-y: " ~ (fields.box_shadow_vertical_offset|default(0)) ~ "; --box-shadow-blur: " ~ (fields.box_shadow_blur|default(0)) ~ ";" ~ "--box-shadow-spread: " ~ (fields.box_shadow_spread|default(0)) ~ ";" ~ "--box-shadow-colour: " ~ (fields.box_shadow_colour|default("#000000")) %}
+	{% endif %}
+
+	{% set ctaSpacingGap = '--cta-spacing-gap:' ~ fields.cta_spacing_gap ~ ';' %}
+	{% set ctaSpacingGapMobile = '--cta-spacing-gap-mobile:' ~ fields.cta_spacing_gap_mobile ~ ';' %}
+	{% set contentBoxOverflow = '--content-box-overflow:' ~ fields.content_box_overflow|ru|default('hidden') ~ ';' %}
+	{% set contentZIndex = fields.content_box_visible_with_video ? 15 : 8 %}
+	{% set contentBoxVisibleWithVideo = '--content-z-index:' ~ contentZIndex ~ ';' %}
+	{% set cbMaxWidth = '--cb-max-width:' ~ fields.content_box_max_width ~ '%;' %}
+	{% set playBtnAlignment = '--play-button-alignment:' ~ (fields.play_button_alignment|ru) ~ ';' %}
+	{% set playBtnStyle = fields.play_button_style|ru %}
+	{% set contentBoxAspectRatio = '--content-box-aspect-ratio:' ~ fields.content_box_aspect_ratio ~ ';' %}
+
+	{% set contentItemsDirectionDesktop = '--content-box-items-direction-desktop:' ~ (fields.content_items_direction_desktop|ru|default('column')) ~ ';' %}
+	{% set contentItemsDirectionMobile = '--content-box-items-direction-mobile:' ~ (fields.content_items_direction_desktop|ru|default('column')) ~ ';' %}
+
+	{% if fields.enable_mobile_content_box_layout %}
+		{% set contentItemsDirectionMobile = '--content-box-items-direction-mobile:' ~ (fields.content_items_direction_mobile|ru|default('column')) ~ ';' %}
+	{% endif %}
+	{% set contentBoxWidth = '--content-box-width: 100%;' %}
+	{% if fields.content_items_direction_desktop|ru == 'row' %}
+		{% set contentBoxWidth = '--content-box-width: auto;' %}
+	{% endif %}
+
+
+	{% set gapDesktop = fields.content_items_gap_desktop %}
+	{% if gapDesktop.enable_gap_desktop %}
+		{% if gapDesktop.gap_style_desktop|ru == 'normal' %}
+			{% set contentItemsGapDesktop = '--content-items-gap-desktop: ' ~ gapDesktop.normal_gap_desktop ~ ';' %}
+			{% if not(fields.enable_mobile_content_box_layout) %}
+				{% set contentItemsGapMobile = '--content-items-gap-mobile: ' ~ gapDesktop.normal_gap_desktop ~ ';' %}
+			{% endif %}
+		{% endif %}
+		{% if gapDesktop.gap_style_desktop|ru == 'micro' %}
+			{% set microContentItemsGapDesktop = '--content-items-micro-gap-desktop: ' ~ gapDesktop.micro_gap_desktop ~ 'px;' %}
+			{% if not(fields.enable_mobile_content_box_layout) %}
+				{% set microContentItemsGapMobile = '--content-items-micro-gap-mobile: ' ~ gapDesktop.micro_gap_desktop ~ 'px;' %}
+			{% endif %}
+		{% endif %}
+	{% endif %}
+
+	{% set gapMobile = fields.content_items_gap_mobile %}
+	{% if gapMobile.enable_gap_mobile and fields.enable_mobile_content_box_layout %}
+		{% if gapMobile.gap_style_mobile|ru == 'normal' %}
+			{% set contentItemsGapMobile = '--content-items-gap-mobile: ' ~ gapMobile.normal_gap_mobile ~ ';' %}
+		{% endif %}
+		{% if gapMobile.gap_style_mobile|ru == 'micro' %}
+			{% set microContentItemsGapMobile = '--content-items-micro-gap-mobile: ' ~ gapMobile.micro_gap_mobile ~ 'px;' %}
+		{% endif %}
+	{% endif %}
+
+	{% set gapSettings = contentItemsGapDesktop ~ microContentItemsGapDesktop ~ microContentItemsClassDesktop ~ contentItemsGapMobile ~ microContentItemsGapMobile ~ microContentItemsClassMobile %}
+	{% set containerStyles = cbMaxWidth ~ contentBoxVertAlign ~ contentBoxHorizAlignPortrait ~ contentBoxVertAlignPortrait ~ contentBoxTopPadding ~ contentBoxRightPadding ~ contentBoxBottomPadding ~ contentBoxLeftPadding ~ contentBoxTopMargin ~ contentBoxRightMargin ~ contentBoxBottomMargin ~ contentBoxLeftMargin ~ contentBoxPaddingTopPortrait ~ contentBoxPaddingRightPortrait ~ contentBoxPaddingBottomPortrait ~ contentBoxPaddingLeftPortrait ~ contentBoxTopMarginPortrait ~ contentBoxRightMarginPortrait ~ contentBoxBottomMarginPortrait ~ contentBoxLeftMarginPortrait ~ contentBoxPaddingTopMobile ~ contentBoxPaddingRightMobile ~ contentBoxPaddingBottomMobile ~ contentBoxPaddingLeftMobile ~ contentBoxTopMarginMobile ~ contentBoxRightMarginMobile ~ contentBoxBottomMarginMobile ~ contentBoxLeftMarginMobile ~ contentBoxOverflow ~ contentBoxHorizMarginMobile ~ contentBoxVertMarginMobile ~ contentBoxPaddingHorizMobile ~ contentBoxPaddingVertMobile ~ contentBoxHorizAlign ~ contentBoxVertAlignMobile ~ contentBoxHorizAlignMobile ~ contentBoxVisibleWithVideo ~ contentBoxHorizMargin ~ contentBoxVertMargin ~ contentBoxBgColour ~ contentBoxBorderRadius ~ contentBoxBorderColour ~ contentBoxBorderWidth ~ contentBoxBorderStyle ~ contentBoxAspectRatio ~ ctaSpacingGap ~ ctaSpacingGapMobile ~ contentItemsAlignment ~ contentItemsAlignmentMobile ~ contentItemsAlignmentPortrait ~ boxShadowStyle ~ contentItemsDirectionDesktop ~ contentItemsDirectionMobile ~ contentBoxWidth ~ gapSettings %}
+
+
+	{{containerStyles}}
+
+{% endif %}