@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-animations-v3/animations-v3.twig

@@ -0,0 +1,19 @@
+{% if fields.animations.enable_animations %}
+	{% set animationName = '--animation-name: ' ~ fields.animations.animation_name|ru ~ ';' %}
+	{% if fields.animations.animation_name|ru == 'custom'  %}
+		{% set animationName = '--animation-name: ' ~ fields.animations.animation_name|ru ~ '-' ~ suffix ~ ';' %}
+	{% endif %}
+	{% set animationDuration = '--animation-duration: ' ~ fields.animations.animation_duration|ru ~ 's;' %}
+	{% set animationDelay = '--animation-delay: ' ~ fields.animations.animation_delay|ru ~ 's;' %}
+	{% set animationRepeat = '--animation-repeat: ' ~ fields.animations.animation_repeat|ru ~ ';' %}
+	{% set animationFillMode = '--animation-fill-mode: ' ~ fields.animations.animation_fill_mode|ru ~ ';' %}
+	{% set animationEasing = '--animation-easing: ' ~ fields.animations.animation_easing|ru ~ ';' %}
+	{% if fields.animations.animation_easing|ru == 'custom' %}
+		{% set animationEasing = '--animation-easing: ' ~ fields.animations.animation_easing_custom|ru ~ ';' %}
+	{% endif %}
+	{% set animationDirection = '--animation-direction: ' ~ fields.animations.animation_direction|ru ~ ';' %}
+	{% set animationTimeline = '--animation-timeline: ' ~ fields.animations.animation_timeline|ru ~ ';' %}
+	{% set animationsString = animationName ~ animationDuration ~ animationDelay ~ animationRepeat ~ animationEasing ~ animationFillMode ~ animationDirection ~ animationTimeline %}
+
+	{{animationsString}}
+{% endif %}

package/components/component-animations-v3/group_689f39c37980a.json

@@ -0,0 +1,499 @@
+{
+    "key": "group_689f39c37980a",
+    "title": "Component: Animations v3",
+    "fields": [
+        {
+            "key": "field_689f39c38dfbb",
+            "label": "Animations",
+            "name": "animations",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "user_roles": [
+                "administrator"
+            ],
+            "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_689f39c38fbd7",
+                    "label": "Enable animations",
+                    "name": "enable_animations",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "message": "",
+                    "default_value": 0,
+                    "ui_on_text": "",
+                    "ui_off_text": "",
+                    "ui": 1,
+                    "style": "",
+                    "wpml_cf_preferences": 3
+                },
+                {
+                    "key": "field_689f39c38ff69",
+                    "label": "Animation name",
+                    "name": "animation_name",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "fade-in": "Fade In",
+                        "fade-in-left": "Fade in left",
+                        "fade-in-right": "Fade in right",
+                        "fade-in-up": "Fade in  up",
+                        "fade-in-down": "Fade in down",
+                        "rotate": "Rotate",
+                        "scale-in": "Scale in",
+                        "reveal-up": "Reveal Up",
+                        "reveal-up-and-slide": "Reveal Up and Slide",
+                        "custom": "Custom"
+                    },
+                    "default_value": "fade-in",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "max": "",
+                    "prepend": "",
+                    "append": "",
+                    "allow_null": 0,
+                    "allow_in_bindings": 1,
+                    "ui": 0,
+                    "ajax": 0,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0,
+                    "allow_custom": 0,
+                    "search_placeholder": "",
+                    "min": ""
+                },
+                {
+                    "key": "field_689f39c39039e",
+                    "label": "Custom animation (keyframe)",
+                    "name": "custom_animation",
+                    "aria-label": "",
+                    "type": "acfe_code_editor",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38ff69",
+                                "operator": "==",
+                                "value": "custom"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "{\r\n    from {\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n    }\r\n}",
+                    "placeholder": "{\r\n    from {\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n    }\r\n}",
+                    "mode": "css",
+                    "lines": 1,
+                    "indent_unit": 4,
+                    "maxlength": "",
+                    "rows": 9,
+                    "max_rows": "",
+                    "return_format": [
+                        "htmlentities"
+                    ],
+                    "allow_in_bindings": 1
+                },
+                {
+                    "key": "field_689f39c39073b",
+                    "label": "Animation duration",
+                    "name": "animation_duration",
+                    "aria-label": "",
+                    "type": "range",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "default_value": 1,
+                    "min": 0,
+                    "max": 10,
+                    "step": "0.1",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_689f39c390b34",
+                    "label": "Animation delay",
+                    "name": "animation_delay",
+                    "aria-label": "",
+                    "type": "range",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "default_value": 0,
+                    "min": 0,
+                    "max": 10,
+                    "step": "0.1",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_689f39c390f17",
+                    "label": "Animation fill mode",
+                    "name": "animation_fill_mode",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "choices": {
+                        "__forwards": "Forwards",
+                        "__none": "None"
+                    },
+                    "default_value": "__forwards",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "max": "",
+                    "allow_custom": 0,
+                    "search_placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 1,
+                    "placeholder": "",
+                    "min": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
+                {
+                    "key": "field_689f39c391309",
+                    "label": "Animation direction",
+                    "name": "animation_direction",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "choices": {
+                        "normal": "Normal",
+                        "reverse": "Reverse",
+                        "alternate": "Alternate",
+                        "alternate-reverse": "Alternate reverse"
+                    },
+                    "default_value": "normal",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "max": "",
+                    "allow_custom": 0,
+                    "search_placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "allow_null": 0,
+                    "allow_in_bindings": 1,
+                    "ui": 1,
+                    "ajax": 1,
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0,
+                    "min": ""
+                },
+                {
+                    "key": "field_689f39c3916e8",
+                    "label": "Animation easing",
+                    "name": "animation_easing",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "choices": {
+                        "__linear": "Linear",
+                        "__ease-out": "Ease out",
+                        "__ease-in": "Ease in",
+                        "__ease-in-out": "Ease in out",
+                        "__custom": "Custom"
+                    },
+                    "default_value": "__linear",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "max": "",
+                    "allow_custom": 0,
+                    "search_placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 1,
+                    "placeholder": "",
+                    "min": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
+                {
+                    "key": "field_689f39c391acf",
+                    "label": "Animation easing custom",
+                    "name": "animation_easing_custom",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            },
+                            {
+                                "field": "field_689f39c3916e8",
+                                "operator": "==",
+                                "value": "__custom"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 2,
+                    "default_value": "",
+                    "maxlength": "",
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_689f39c391eb9",
+                    "label": "Animation repeat",
+                    "name": "animation_repeat",
+                    "aria-label": "",
+                    "type": "select",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "choices": {
+                        "__1": "Once",
+                        "__infinite": "Infinite",
+                        "__custom": "Custom"
+                    },
+                    "default_value": "__1",
+                    "return_format": "value",
+                    "multiple": 0,
+                    "max": "",
+                    "allow_custom": 0,
+                    "search_placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "allow_null": 0,
+                    "ui": 1,
+                    "ajax": 1,
+                    "placeholder": "",
+                    "min": "",
+                    "create_options": 0,
+                    "save_options": 0
+                },
+                {
+                    "key": "field_689f39c3922a7",
+                    "label": "Animation repeat number",
+                    "name": "animation_repeat_number",
+                    "aria-label": "",
+                    "type": "range",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c391eb9",
+                                "operator": "==",
+                                "value": "__custom"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "50",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "default_value": 1,
+                    "min": "",
+                    "max": 50,
+                    "step": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_68f9e35d7db0b",
+                    "label": "Animation Timeline",
+                    "name": "animation_timeline",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "Add your timeline function with the appropriate arguments or leave blank for no timeline.\r\nSee https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/animation-timeline",
+                    "required": 0,
+                    "conditional_logic": [
+                        [
+                            {
+                                "field": "field_689f39c38fbd7",
+                                "operator": "==",
+                                "value": "1"
+                            }
+                        ]
+                    ],
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 1,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "post_type",
+                "operator": "==",
+                "value": "post"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": false,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1761846934
+}

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

@@ -0,0 +1,137 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+@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-v3.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);
+			}
+		}
+	}
+}