@total_onion/onion-library 1.0.0

package/components/component-better-reviews/better-reviews.scss

@@ -0,0 +1,356 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/theme/breakpoints';
+@use './better-reviews-extra';
+
+@mixin better-reviews() {
+	&__better-reviews {
+		place-self: var(--horizontal-alignment, center);
+	}
+
+	--better-reviews-filled-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 26"><path d="M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z" fill="%23ECFC34"/></svg>');
+	--better-reviews-no-fill-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 26"><path d="M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z" opacity="0.3" fill="%230f8d86" /></svg>');
+	--better-reviews-half-fill-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 25.82" fill="%23ECFC34"><path d="M13.93 0L9.77 8.72 0 9.94l7.24 6.46-1.99 9.42 8.68-4.53h0V0z"/></svg>');
+	--better-reviews-font-size: core-functions.fontSize(16, 'static');
+	--better-reviews-text-colour: #ffffff;
+
+	.better-reviews__review {
+		display: flex;
+		font-family: var(--secondary-font-family);
+		gap: 5px;
+		width: 100%;
+		max-width: var(--global-content-max-width);
+		margin-left: auto;
+		margin-right: auto;
+		padding-top: 15px;
+		padding-bottom: 15px;
+		align-items: center;
+		justify-content: var(--horizontal-alignment);
+
+		.better-reviews__criteria-review-count {
+			font-size: var(--better-reviews-font-size);
+			font-family: var(--secondary-font-family);
+			color: var(--better-reviews-text-colour);
+		}
+
+		.better-reviews__review-title {
+			font-family: var(--secondary-font-family);
+			font-size: var(--better-reviews-font-size);
+			font-weight: 400;
+			margin-bottom: 0;
+			display: none;
+		}
+
+		.better-reviews__cta {
+			border: 0;
+			cursor: pointer;
+			background-color: transparent;
+			font-family: var(--secondary-font-family);
+			font-size: var(--better-reviews-font-size);
+			font-weight: 500;
+			text-decoration: underline;
+			display: inline-block;
+			padding-top: 4px;
+			padding-bottom: 4px;
+			appearance: none;
+			padding-left: unset;
+			color: var(--better-reviews-text-colour);
+		}
+
+		.better-reviews__cta-container {
+			order: 1;
+		}
+
+		.better-reviews__average {
+			display: flex;
+			gap: 5px;
+			align-items: center;
+			order: 2;
+
+			.better-reviews__criteria-stars {
+				--better-reviews-star-width: 110px;
+				position: relative;
+				background-image: var(--better-reviews-filled-star);
+				width: var(--better-reviews-star-width);
+				height: 16px;
+				background-clip: content-box;
+				background-repeat: space;
+				background-size: 16px auto;
+				background-position: 0% 33%;
+			}
+
+			.better-reviews__criteria-stars:before {
+				content: '';
+				display: block;
+				position: absolute;
+				width: var(--better-reviews-star-width);
+				height: 100%;
+				transform: scaleX(-1);
+				opacity: 0.4;
+				background-image: var(--better-reviews-filled-star);
+				background-clip: content-box;
+				background-repeat: space;
+				background-size: 16px auto;
+				background-position: 0% 33%;
+			}
+
+			.better-reviews__star_05 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.911);
+			}
+
+			.better-reviews__star_10 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.8);
+			}
+
+			.better-reviews__star_15 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.702);
+			}
+
+			.better-reviews__star_20 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.6);
+			}
+
+			.better-reviews__star_25 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.5);
+			}
+
+			.better-reviews__star_30 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.4);
+			}
+
+			.better-reviews__star_35 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.298);
+			}
+
+			.better-reviews__star_40 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.2);
+			}
+
+			.better-reviews__star_45 {
+				padding-right: calc(var(--better-reviews-star-width) * 0.09);
+			}
+
+			.better-reviews__star_50 {
+				padding-right: calc(var(--better-reviews-star-width) * 0);
+			}
+		}
+	}
+
+	@include better-reviews-extra.additionalReviewsStyles();
+}
+
+.better-reviews__modal {
+	--better-reviews-filled-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 26"><path d="M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z" fill="%23ECFC34"/></svg>');
+	--better-reviews-no-fill-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 26"><path d="M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z" fill="%230f8d86" /></svg>');
+	--better-reviews-half-fill-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 25.82" fill="%23ECFC34"><path d="M13.93 0L9.77 8.72 0 9.94l7.24 6.46-1.99 9.42 8.68-4.53h0V0z"/></svg>');
+	--better-reviews-star-size: 26px;
+	--better-reviews-star-gap: 14px;
+
+	--better-reviews-background-colour: #07c0b4;
+	--better-reviews-text-colour: #ffffff;
+	--better-reviews-submit-button-text-colour: #21171b;
+
+	position: fixed;
+	inset: 0;
+	z-index: 9999;
+	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(6px);
+
+	.better-reviews__modal-thank-you {
+		display: none;
+
+		.better-reviews__modal-content {
+			font-family: var(--primary-font-family);
+			font-size: 50px;
+			line-height: 1em;
+			text-transform: uppercase;
+			margin-bottom: 0;
+		}
+	}
+
+	.better-reviews__modal-inner {
+		position: absolute;
+		inset: 0;
+		background-color: var(--better-reviews-background-colour);
+		color: var(--better-reviews-text-colour);
+		margin: auto;
+		padding: 40px 30px;
+		height: fit-content;
+		width: calc(100% - 30px);
+		max-width: 330px;
+		box-shadow: 6px 6px 0px 0px #000;
+		border-radius: 20px;
+	}
+
+	.better-reviews__modal-title {
+		font-size: 50px;
+		line-height: 1em;
+		text-transform: uppercase;
+		margin-bottom: 0;
+	}
+
+	.better-reviews__modal-content {
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+		text-align: center;
+	}
+
+	.better-reviews__modal-error {
+		display: none;
+	}
+
+	.better-reviews__modal-submit {
+		padding: core-functions.fluidSize(11, 'static')
+			core-functions.fluidSize(34, 'static')
+			core-functions.fluidSize(12, 'static')
+			core-functions.fluidSize(34, 'static');
+		display: flex;
+		width: 100%;
+		background-color: var(--better-reviews-text-colour);
+		color: var(--better-reviews-submit-button-text-colour);
+		margin-top: core-functions.fluidSize(10, 'static');
+		appearance: none;
+		border: none;
+		font-family: var(--primary-font-family);
+		font-weight: 400;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		cursor: pointer;
+		filter: alpha(opacity=100);
+		-moz-opacity: 1;
+		opacity: 1;
+		width: core-functions.fluidSize(114, 'static');
+		height: core-functions.fluidSize(41, 'static');
+		border-radius: core-functions.fluidSize(30, 'static');
+		font-size: core-functions.fontSize(14, 'static');
+		place-self: center;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		&:disabled {
+			filter: alpha(opacity=25);
+			-moz-opacity: 0.25;
+			opacity: 0.25;
+		}
+	}
+
+	.better-reviews__modal-close {
+		position: absolute;
+		top: -10px;
+		right: 10px;
+		cursor: pointer;
+		visibility: hidden;
+
+		&:before {
+			visibility: visible;
+			content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E");
+			border-radius: 50%;
+			background-color: white;
+			width: core-functions.fluidSize(48, 'static');
+			height: core-functions.fluidSize(48, 'static');
+			position: absolute;
+			top: core-functions.fluidSize(-15, 'static');
+			right: core-functions.fluidSize(10, 'static');
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+		}
+	}
+
+	.better-reviews__modal-criteria {
+		display: flex;
+		justify-content: center;
+	}
+
+	.better-reviews__modal-criteria .better-reviews__criteria-stars {
+		font-size: var(--better-reviews-star-size);
+		display: flex;
+		gap: var(--better-reviews-star-gap);
+
+		.rating__input {
+			position: absolute !important;
+			left: -9999px !important;
+		}
+
+		&:hover,
+		&:has(:checked) {
+			.rating__label .rating__icon {
+				background-image: var(--better-reviews-filled-star);
+			}
+		}
+
+		.rating__label {
+			display: inline-block;
+			cursor: pointer;
+			width: 1em;
+			height: 1em;
+			z-index: 1;
+
+			&--half {
+				width: 0.5em;
+				height: 1em;
+				z-index: 2;
+				margin-right: calc(-0.5em - var(--better-reviews-star-gap));
+			}
+
+			.rating__icon {
+				width: 100%;
+				height: 100%;
+				display: block;
+				background-size: 100%;
+				background-repeat: no-repeat;
+				background-image: var(
+					--better-reviews-no-fill-star
+				); // Default when no hover and no checked
+			}
+		}
+
+		.rating__label--half .rating__icon {
+			background-size: 200%;
+		}
+
+		&:hover .rating__label .rating__icon {
+			background-image: var(--better-reviews-filled-star) !important;
+		}
+
+		.rating__input:checked ~ .rating__label .rating__icon--star {
+			background-image: var(--better-reviews-no-fill-star);
+		}
+
+		.rating__input:hover ~ .rating__label .rating__icon--star {
+			background-image: var(--better-reviews-no-fill-star) !important;
+		}
+
+		.rating__input:checked ~ .rating__label--half .rating__icon--star {
+			background-image: var(--better-reviews-no-fill-star);
+		}
+
+		.star-half {
+			background-size: 200%;
+			background-image: var(--better-reviews-half-fill-star);
+		}
+
+		.star-empty {
+			background-image: var(--better-reviews-no-fill-star);
+		}
+	}
+	@include better-reviews-extra.additionalPopupStyles();
+}
+
+.better-reviews__modal-succeeded {
+	.better-reviews__modal-thank-you {
+		display: block !important;
+	}
+
+	.better-reviews__modal-form {
+		display: none !important;
+	}
+
+	.better-reviews__modal-submit {
+		display: none !important;
+	}
+}

package/components/component-better-reviews/better-reviews.twig

@@ -0,0 +1,6 @@
+{% set horizontalAlignment = '--horizontal-alignment: ' ~ fields.horizontal_alignment|ru ~ ';' %}
+{% set elementStyles = horizontalAlignment %}
+
+<div class="{{blockClassName}}__better-reviews {{blockClassName}}__info-item" style="{{elementStyles}}">
+	{{function( 'do_shortcode', '[better-reviews post_id=' ~ fields.better_reviews_post ~ ' display="stars,review_count,review_cta"]' )|raw}}
+</div>

package/components/component-better-reviews-display-settings/group_671f47cc17aa9.json

@@ -0,0 +1,91 @@
+{
+    "key": "group_671f47cc17aa9",
+    "title": "Component: Better reviews display settings",
+    "fields": [
+        {
+            "key": "field_671f47cca5251",
+            "label": "Display settings",
+            "name": "display_settings",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "layout": "block",
+            "acfe_seamless_style": 0,
+            "acfe_group_modal": 0,
+            "acfe_group_modal_close": 0,
+            "acfe_group_modal_button": "",
+            "acfe_group_modal_size": "large",
+            "sub_fields": [
+                {
+                    "key": "field_671f4815a5252",
+                    "label": "options",
+                    "name": "options",
+                    "aria-label": "",
+                    "type": "checkbox",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "choices": {
+                        "__display_full": "Display full review block",
+                        "__stars": "Average stars",
+                        "__review_count": "Review count",
+                        "__review_cta": "Call to action (Show rate review link)",
+                        "__criteria": "Criteria (Make sure criteria's are set in the better reviews settings)"
+                    },
+                    "default_value": [
+                        "__stars"
+                    ],
+                    "return_format": "value",
+                    "min": "",
+                    "max": "",
+                    "allow_custom": 0,
+                    "layout": "vertical",
+                    "toggle": 0,
+                    "save_custom": 0,
+                    "custom_choice_button_text": "Add new choice"
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "post_type",
+                "operator": "!=",
+                "value": "all"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": false,
+    "description": "",
+    "show_in_rest": 0,
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfml_field_group_mode": "localization",
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1746891250
+}

package/components/component-block-padding/block-padding.scss

@@ -0,0 +1,62 @@
+@use 'Assets/scss/theme/breakpoints';
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+
+@mixin blockPadding() {
+	.cmpl-block-padding {
+		padding: calc(
+				var(--global-inline-spacing) *
+					var(--padding-block-multiplier-mobile-top)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--padding-inline-multiplier-mobile-right)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--padding-block-multiplier-mobile-bottom)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--padding-inline-multiplier-mobile-left)
+			);
+
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			padding: calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-portrait-top)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-portrait-right)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-portrait-bottom)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-portrait-left)
+				);
+		}
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			padding: calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-desktop-top)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-desktop-right)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-block-multiplier-desktop-bottom)
+				)
+				calc(
+					var(--global-inline-spacing) *
+						var(--padding-inline-multiplier-desktop-left)
+				);
+		}
+	}
+}

package/components/component-block-padding/block-padding.twig

@@ -0,0 +1,53 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+
+
+{% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top: 0;" %}
+{% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom: 0;" %}
+{% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right: 0;" %}
+{% set paddingHorizMultiplierDesktopLeft = "--padding-inline-multiplier-desktop-left: 0;" %}
+{% set paddingVertMultiplierDesktop = "--padding-block-multiplier-desktop: 0;" %}
+{% set paddingVertMultiplierPortraitTop = "--padding-block-multiplier-portrait-top: 0;" %}
+{% set paddingVertMultiplierPortraitBottom = "--padding-block-multiplier-portrait-bottom: 0;" %}
+{% set paddingHorizMultiplierPortraitRight = "--padding-inline-multiplier-portrait-right: 0;" %}
+{% set paddingHorizMultiplierPortraitLeft = "--padding-inline-multiplier-portrait-left: 0;" %}
+{% set paddingVertMultiplierPortrait = "--padding-block-multiplier-portrait: 0;" %}
+{% set paddingVertMultiplierMobileTop = "--padding-block-multiplier-mobile-top: 0;" %}
+{% set paddingVertMultiplierMobileBottom = "--padding-block-multiplier-mobile-bottom: 0;" %}
+{% set paddingHorizMultiplierMobileRight = "--padding-inline-multiplier-mobile-right: 0;" %}
+{% set paddingHorizMultiplierMobileLeft = "--padding-inline-multiplier-mobile-left: 0;" %}
+{% set paddingVertMultiplierMobile = "--padding-block-multiplier-mobile: 0;" %}
+
+{% if fields.enable_block_padding %}
+	{% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top:" ~ fields.block_vertical_padding_desktop ~ ";"  %}
+	{% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom:" ~ fields.block_vertical_padding_desktop ~ ";"  %}
+	{% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right:" ~ fields.block_horizontal_padding_desktop ~ ";" %}
+	{% set paddingHorizMultiplierDesktopLeft = "--padding-inline-multiplier-desktop-left:" ~ fields.block_horizontal_padding_desktop ~ ";" %}
+	{% set paddingVertMultiplierDesktop = "--padding-block-multiplier-desktop:" ~ fields.block_vertical_padding_desktop ~ ";" %}
+	{% set paddingVertMultiplierPortraitTop = "--padding-block-multiplier-portrait-top:" ~ fields.block_vertical_padding_portrait ~ ";"  %}
+	{% set paddingVertMultiplierPortraitBottom = "--padding-block-multiplier-portrait-bottom:" ~ fields.block_vertical_padding_portrait ~ ";"  %}
+	{% set paddingHorizMultiplierPortraitRight = "--padding-inline-multiplier-portrait-right:" ~ fields.block_horizontal_padding_portrait ~ ";" %}
+	{% set paddingHorizMultiplierPortraitLeft = "--padding-inline-multiplier-portrait-left:" ~ fields.block_horizontal_padding_portrait ~ ";" %}
+	{% set paddingVertMultiplierPortrait = "--padding-block-multiplier-portrait:" ~ fields.block_vertical_padding_portrait ~ ";" %}
+	{% set paddingVertMultiplierMobileTop = "--padding-block-multiplier-mobile-top:" ~ fields.block_vertical_padding_mobile ~ ";"  %}
+	{% set paddingVertMultiplierMobileBottom = "--padding-block-multiplier-mobile-bottom:" ~ fields.block_vertical_padding_mobile ~ ";"  %}
+	{% set paddingHorizMultiplierMobileRight = "--padding-inline-multiplier-mobile-right:" ~ fields.block_horizontal_padding_mobile ~ ";" %}
+	{% set paddingHorizMultiplierMobileLeft = "--padding-inline-multiplier-mobile-left:" ~ fields.block_horizontal_padding_mobile ~ ";" %}
+	{% set paddingVertMultiplierMobile = "--padding-block-multiplier-mobile:" ~ fields.block_vertical_padding_mobile ~ ";" %}
+	{% if fields.enable_advanced_block_padding_controls %}
+		{% set paddingVertMultiplierMobileTop = "--padding-block-multiplier-mobile-top:" ~ fields.block_vertical_padding_mobile_top ~ ";" %}
+		{% set paddingVertMultiplierMobileBottom = "--padding-block-multiplier-mobile-bottom:" ~ fields.block_vertical_padding_mobile_bottom ~ ";" %}
+		{% set paddingHorizMultiplierMobileRight = "--padding-inline-multiplier-mobile-right:" ~ fields.block_horizontal_padding_mobile_right ~ ";" %}
+		{% set paddingHorizMultiplierMobileLeft = "--padding-inline-multiplier-mobile-left:" ~ fields.block_horizontal_padding_mobile_left ~ ";" %}
+		{% set paddingVertMultiplierPortraitTop = "--padding-block-multiplier-portrait-top:" ~ fields.block_vertical_padding_portrait_top ~ ";" %}
+		{% set paddingVertMultiplierPortraitBottom = "--padding-block-multiplier-portrait-bottom:" ~ fields.block_vertical_padding_portrait_bottom ~ ";" %}
+		{% set paddingHorizMultiplierPortraitRight = "--padding-inline-multiplier-portrait-right:" ~ fields.block_horizontal_padding_portrait_right ~ ";" %}
+		{% set paddingHorizMultiplierPortraitLeft = "--padding-inline-multiplier-portrait-left:" ~ fields.block_horizontal_padding_portrait_left ~ ";" %}
+		{% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top:" ~ fields.block_vertical_padding_desktop_top ~ ";" %}
+		{% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom:" ~ fields.block_vertical_padding_desktop_bottom ~ ";" %}
+		{% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right:" ~ fields.block_horizontal_padding_desktop_right ~ ";" %}
+		{% set paddingHorizMultiplierDesktopLeft = "--padding-inline-multiplier-desktop-left:" ~ fields.block_horizontal_padding_desktop_left ~ ";" %}
+	{% endif %}
+{% endif %}
+
+{% set blockPaddingString = paddingVertMultiplierDesktop ~ paddingVertMultiplierDesktopTop ~ paddingVertMultiplierDesktopBottom ~ paddingHorizMultiplierDesktopRight ~ paddingHorizMultiplierDesktopLeft ~ paddingVertMultiplierMobileTop ~ paddingVertMultiplierMobileBottom ~ paddingHorizMultiplierMobileLeft ~ paddingHorizMultiplierMobileRight ~ paddingVertMultiplierMobile ~ paddingVertMultiplierPortraitTop ~ paddingVertMultiplierPortraitBottom ~ paddingHorizMultiplierPortraitLeft ~ paddingHorizMultiplierPortraitRight ~ paddingVertMultiplierPortrait %}
+{{blockPaddingString}}