@total_onion/onion-library 3.0.49 → 3.2.0

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

@@ -1,205 +0,0 @@
-@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

@@ -1,156 +0,0 @@
-{% 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 %}