@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-global-content-max-width-v3/global-content-max-width-v3.twig

@@ -0,0 +1,10 @@
+{% if fields.enable_global_content_max_width %}
+	{{'max-width: var(--global-content-max-width); margin-inline: auto;'}}
+	{% if is_preview %}
+		{{'--screen-width-desktop: 840px;'}}
+		{{'--font-reference-desktop: 840px;'}}
+	{% else %}
+		{{'--screen-width-desktop: calc(var(--desktop-design-reference) * 1px);'}}
+		{{'--font-reference-desktop: calc(var(--desktop-design-reference) * 1px);'}}
+	{% endif %}
+{% endif %}

package/components/component-global-content-max-width-v3/group_63c83de4f0a99.json

@@ -0,0 +1,58 @@
+{
+    "key": "group_63c83de4f0a99",
+    "title": "Component: Enable Global Content Max Width",
+    "fields": [
+        {
+            "key": "field_63c83de5d114d",
+            "label": "Enable global content max width",
+            "name": "enable_global_content_max_width",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "50",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "user_roles": [
+                "administrator"
+            ],
+            "message": "This will restrict the block width to the global content max width setting",
+            "default_value": 0,
+            "ui_on_text": "",
+            "ui_off_text": "",
+            "ui": 1,
+            "style": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "!=",
+                "value": "all"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": false,
+    "description": "Library version - Do not modify in this project as any changes will be overwritten by future updates.",
+    "show_in_rest": 0,
+    "display_title": "",
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1764943547
+}

package/components/component-gradient-overlay-v3/gradient-overlay-v3.scss

@@ -0,0 +1,43 @@
+@mixin gradientOverlay() {
+	--spread: calc(100% - var(--gradient-spread));
+	&__gradient-overlay-element {
+		position: absolute;
+		inset: 0;
+		z-index: var(--gradient-zindex);
+		grid-area: var(--gradient-grid-area);
+		&::before,
+		&:after {
+			content: '';
+			pointer-events: none;
+			position: absolute;
+			inset: 0;
+			opacity: var(--gradient-opacity);
+		}
+		&::before {
+			background: linear-gradient(
+				var(--gradient-origin-before),
+				rgba(255, 255, 255, 0) 0%,
+				rgba(255, 255, 255, 0)
+					calc(var(--spread) - var(--gradient-amount)),
+				var(--gradient-colour) calc(100% - var(--gradient-amount))
+			);
+		}
+		&::after {
+			content: var(--enable-after);
+			background: linear-gradient(
+				var(--gradient-origin-after),
+				rgba(255, 255, 255, 0) 0%,
+				rgba(255, 255, 255, 0)
+					calc(var(--spread) - var(--gradient-amount)),
+				var(--gradient-colour) calc(100% - var(--gradient-amount))
+			);
+		}
+	}
+	&__blur-overlay-element {
+		background: var(--blur-colour);
+		backdrop-filter: blur(var(--blur-value));
+		position: absolute;
+		inset: 0;
+		z-index: var(--blur-zindex);
+	}
+}

package/components/component-gradient-overlay-v3/gradient-overlay-v3.twig

@@ -0,0 +1,58 @@
+{% set enableOverlay = fields.enable_gradient_overlay %}
+{% set overlayType = fields.overlay_type|ru|default('gradient') %}
+
+{% if enableOverlay and overlayType == "gradient" %}
+
+	{% if type == 'style' %}
+		{% set gradientOriginMap = { top: '0deg', right: '90deg', bottom: '180deg', left: '270deg' } %}
+		{% set gradientSpread = '--gradient-spread:' ~ (fields.gradient_overlay_spread|default(0)) ~ '%;' %}
+		{% set gradientAmount = '--gradient-amount:' ~ (fields.gradient_overlay_amount|default(0)) ~ '%;' %}
+		{% set gradientOpacity = '--gradient-opacity:' ~ (fields.gradient_overlay_opacity|default(0)) ~ ';' %}
+		{% set gradientColour = '--gradient-colour:' ~ (fields.gradient_overlay_colour|ru|default('transparent')) ~ ';' %}
+		{% set gradientZIndex = '--gradient-zindex:' ~ (fields.gradient_z_index|ru|default(4)) ~ ';' %}
+		{% set gradientGridArea = '--gradient-grid-area:' ~ (fields.gradient_grid_area|ru|default('unset')) ~ ';' %}
+
+		{% set gradientTypeKey = fields.gradient_overlay_origin|ru %}
+		{% set gradientOrigin = '--gradient-origin-before:' ~ gradientOriginMap[gradientTypeKey] ~ ';' %}
+		{% set enableAfter = "--enable-after: ;" %}
+		{% if gradientTypeKey == 'vertical' %}
+			{% set gradientOrigin = '--gradient-origin-before: 0deg;' %}
+			{% set gradientOriginAfter = '--gradient-origin-after: 180deg;' %}
+			{% set enableAfter = "--enable-after: '';" %}
+		{% endif %}
+		{% if gradientTypeKey == 'horizontal' %}
+			{% set gradientOrigin = '--gradient-origin-before: 90deg;' %}
+			{% set gradientOriginAfter = '--gradient-origin-after: 270deg;' %}
+			{% set enableAfter = "--enable-after: '';" %}
+		{% endif %}
+		{% set gradientStyleString = '' %}
+		{# {% if fields.enable_gradient_overlay %} #}
+		{% set gradientStyleString = gradientSpread ~ gradientAmount ~ gradientOpacity ~ gradientColour ~ gradientOrigin ~ gradientZIndex ~ gradientGridArea ~ enableAfter ~ gradientOriginAfter %}
+		{# {% endif %} #}
+
+		{{gradientStyleString}}
+
+	{% endif %}
+	{% if type == 'html' %}
+		<div class="{{blockClassName}}__gradient-overlay-element"></div>
+	{% endif %}
+
+{% endif %}
+
+{% if enableOverlay and overlayType == "blur" %}
+
+	{% if type == 'style' %}
+		{% set blurColour = '--blur-colour:' ~ (fields.blur_overlay_colour|default('')) ~ ';' %}
+		{% set blurValue = '--blur-value:' ~ (fields.blur_overlay_value|default(0)) ~ 'px' ~ ';' %}
+		{% set blurZIndex = '--blur-zindex:' ~ (fields.blur_z_index|ru|default(5)) ~ ';' %}
+
+		{% set blurStyleString = blurColour ~ blurValue ~ blurZIndex%}
+
+		{{blurStyleString}}
+
+	{% endif %}
+
+	{% if type == 'html' %}
+		<div class="{{blockClassName}}__blur-overlay-element"></div>
+	{% endif %}
+{% endif %}

package/components/component-gradient-overlay-v3/group_686fd9ca50b63.json

@@ -0,0 +1,495 @@
+{
+    "key": "group_686fd9ca50b63",
+    "title": "Component: Gradient Overlay v3",
+    "fields": [
+        {
+            "key": "field_686fd9ca5d7ca",
+            "label": "Enable gradient overlay",
+            "name": "enable_gradient_overlay",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "message": "",
+            "default_value": 0,
+            "ui_on_text": "",
+            "ui_off_text": "",
+            "ui": 1,
+            "style": ""
+        },
+        {
+            "key": "field_686fda2c4d5f6",
+            "label": "Render dynamic",
+            "name": "render_dynamic",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_670b7ac92563c"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_686fd9ca5db86",
+            "label": "Overlay type",
+            "name": "overlay_type",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__gradient": "Gradient",
+                "__blur": "Blur"
+            },
+            "default_value": "__gradient",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "min": "",
+            "max": ""
+        },
+        {
+            "key": "field_686fd9ca5df94",
+            "label": "Gradient overlay origin",
+            "name": "gradient_overlay_origin",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__top": "Top",
+                "__right": "Right",
+                "__bottom": "Bottom",
+                "__left": "Left",
+                "__vertical": "Vertical",
+                "__horizontal": "Horizontal"
+            },
+            "default_value": "__bottom",
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_686fd9ca5e370",
+            "label": "Gradient overlay amount",
+            "name": "gradient_overlay_amount",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 0,
+            "min": "",
+            "max": "",
+            "step": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_686fd9ca5e75b",
+            "label": "Gradient overlay colour",
+            "name": "gradient_overlay_colour",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "display": "default",
+            "button_label": "Select Color",
+            "color_picker": 1,
+            "absolute": 0,
+            "input": 1,
+            "allow_null": 1,
+            "theme_colors": 0,
+            "colors": []
+        },
+        {
+            "key": "field_686fd9ca5eb42",
+            "label": "Gradient overlay opacity",
+            "name": "gradient_overlay_opacity",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "0.3",
+            "min": "",
+            "max": 1,
+            "step": "0.1",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_686fd9ca5ef2f",
+            "label": "Gradient overlay spread",
+            "name": "gradient_overlay_spread",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 30,
+            "min": "",
+            "max": "",
+            "step": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_686fd9ca5f315",
+            "label": "Gradient z-index",
+            "name": "gradient_z_index",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 4,
+            "min": -20,
+            "max": 50,
+            "step": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_686fd9ca5f702",
+            "label": "Gradient grid area",
+            "name": "gradient_grid_area",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5d7ca",
+                        "operator": "==",
+                        "value": "1"
+                    },
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__gradient"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__unset": "Block",
+                "__main": "Inside padding"
+            },
+            "default_value": "__unset",
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "allow_null": 0,
+            "ui": 1,
+            "ajax": 1,
+            "placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_686fd9ca5fadc",
+            "label": "Blur overlay colour",
+            "name": "blur_overlay_colour",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__blur"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "display": "default",
+            "button_label": "Select Color",
+            "color_picker": true,
+            "absolute": false,
+            "input": true,
+            "allow_null": true,
+            "theme_colors": false,
+            "colors": []
+        },
+        {
+            "key": "field_686fd9ca5fed2",
+            "label": "Blur overlay value (px)",
+            "name": "blur_overlay_value",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__blur"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 0,
+            "min": 0,
+            "max": 50,
+            "step": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_686fd9ca602b0",
+            "label": "Blur z-index",
+            "name": "blur_z_index",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_686fd9ca5db86",
+                        "operator": "==",
+                        "value": "__blur"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 4,
+            "min": -20,
+            "max": 50,
+            "step": "",
+            "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,
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfml_field_group_mode": "localization",
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1752162095
+}

package/components/component-grid-gap-mults-v3/grid-gap-mults-v3.twig

@@ -0,0 +1,10 @@
+{% set columnGapDesktop = '--column-gap-mult-desktop: ' ~ fields.column_gap_desktop ~ ';' %}
+{% set columnGapPortrait = '--column-gap-mult-portrait: ' ~ fields.column_gap_portrait ~ ';' %}
+{% set columnGapMobile = '--column-gap-mult-mobile: ' ~ fields.column_gap_mobile ~ ';' %}
+{% set rowGapDesktop = '--row-gap-mult-desktop: ' ~ fields.row_gap_desktop ~ ';' %}
+{% set rowGapPortrait = '--row-gap-mult-portrait: ' ~ fields.row_gap_portrait ~ ';' %}
+{% set rowGapMobile = '--row-gap-mult-mobile: ' ~ fields.row_gap_mobile ~ ';' %}
+
+{% set gridGapMults = columnGapDesktop ~ columnGapPortrait ~ columnGapMobile ~ rowGapDesktop ~ rowGapPortrait ~ rowGapMobile %}
+
+{{ gridGapMults}}