@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-grid-gap-mults-v3/group_689221b94ce69.json

@@ -0,0 +1,220 @@
+{
+	"key": "group_689221b94ce69",
+	"title": "Component: Grid Gap Mults v3",
+	"fields": [
+		{
+			"key": "field_6892222e02038",
+			"label": "Desktop",
+			"name": "",
+			"aria-label": "",
+			"type": "accordion",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"open": 0,
+			"multi_expand": 0,
+			"endpoint": 0
+		},
+		{
+			"key": "field_6892220c470ae",
+			"label": "Column gap desktop",
+			"name": "column_gap_desktop",
+			"aria-label": "",
+			"type": "range",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"default_value": 0,
+			"min": 0,
+			"max": 4,
+			"step": "0.125",
+			"prepend": "",
+			"append": ""
+		},
+		{
+			"key": "field_68922212470af",
+			"label": "Row gap desktop",
+			"name": "row_gap_desktop",
+			"aria-label": "",
+			"type": "range",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"default_value": 0,
+			"min": 0,
+			"max": 4,
+			"step": "0.125",
+			"prepend": "",
+			"append": ""
+		},
+		{
+			"key": "field_68922261cc6c2",
+			"label": "Portrait",
+			"name": "",
+			"aria-label": "",
+			"type": "accordion",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"open": 0,
+			"multi_expand": 0,
+			"endpoint": 0
+		},
+		{
+			"key": "field_68922216470b0",
+			"label": "Column gap portrait",
+			"name": "column_gap_portrait",
+			"aria-label": "",
+			"type": "range",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"default_value": 0,
+			"min": 0,
+			"max": 4,
+			"step": "0.125",
+			"prepend": "",
+			"append": ""
+		},
+		{
+			"key": "field_6892221a470b1",
+			"label": "Row gap portrait",
+			"name": "row_gap_portrait",
+			"aria-label": "",
+			"type": "range",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"default_value": 0,
+			"min": 0,
+			"max": 4,
+			"step": "0.125",
+			"prepend": "",
+			"append": ""
+		},
+		{
+			"key": "field_689222868db0a",
+			"label": "Mobile",
+			"name": "",
+			"aria-label": "",
+			"type": "accordion",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"open": 0,
+			"multi_expand": 0,
+			"endpoint": 0
+		},
+		{
+			"key": "field_6892221f470b2",
+			"label": "Column gap mobile",
+			"name": "column_gap_mobile",
+			"aria-label": "",
+			"type": "range",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"default_value": 0,
+			"min": 0,
+			"max": 4,
+			"step": "0.125",
+			"prepend": "",
+			"append": ""
+		},
+		{
+			"key": "field_68922222470b3",
+			"label": "Row gap mobile",
+			"name": "row_gap_mobile",
+			"aria-label": "",
+			"type": "range",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"default_value": 0,
+			"min": 0,
+			"max": 4,
+			"step": "0.125",
+			"prepend": "",
+			"append": ""
+		}
+	],
+	"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,
+	"acfe_autosync": ["json"],
+	"acfml_field_group_mode": "localization",
+	"acfe_form": 0,
+	"acfe_display_title": "",
+	"acfe_meta": "",
+	"acfe_note": "",
+	"modified": 1754407681
+}

package/components/component-grid-layout-container-v3/grid-layout-container-v3.scss

@@ -0,0 +1,154 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+@mixin scrollButtons() {
+	&::scroll-button(left) {
+		content: '◄';
+		position: absolute;
+		place-self: center flex-start;
+		z-index: 50;
+	}
+	&::scroll-button(right) {
+		content: '►';
+		position: absolute;
+		place-self: center flex-end;
+		z-index: 50;
+	}
+	&::scroll-button(*) {
+		border: 1px solid black;
+		border-radius: 10px;
+		font-size: var(
+			--scroll-button-font-size,
+			core-functions-v3.fluidSize(30)
+		);
+		background: rgba(0, 0, 0, 0.163);
+		color: white;
+		opacity: 0.7;
+		cursor: pointer;
+		transition: scale 0.3s ease-in-out;
+	}
+	&::scroll-button(*):hover,
+	&::scroll-button(*):focus {
+		opacity: 1;
+		scale: 1.2;
+	}
+	&::scroll-button(*):active {
+		translate: 1px 1px;
+	}
+	&::scroll-button(*):disabled {
+		opacity: 0.2;
+		cursor: unset;
+	}
+}
+@mixin gridLayoutContainer() {
+	display: var(--display-type, 'grid');
+	position: relative;
+	scroll-behavior: smooth;
+	overscroll-behavior-x: contain;
+	scroll-snap-type: var(--scroll-snap-type-mobile, none);
+	> div {
+		scroll-snap-align: var(--scroll-snap-align-mobile, start);
+	}
+	overflow: var(--container-overflow-type-mobile, hidden);
+	grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0))
+		calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
+	grid-auto-flow: var(--grid-auto-flow-mobile, row);
+	grid-auto-columns: var(--grid-auto-columns-mobile, 1fr);
+	grid-auto-rows: var(--grid-auto-rows-mobile, auto);
+	grid-template-columns: var(
+		--grid-template-columns-custom-mobile,
+		repeat(
+			var(--grid-template-columns-mobile),
+			var(--grid-auto-columns-mobile, 1fr)
+		)
+	);
+	grid-template-rows: var(
+		--grid-template-rows-custom-mobile,
+		repeat(
+			var(--grid-template-rows-mobile),
+			var(--grid-auto-rows-mobile, 1fr)
+		)
+	);
+	&.scroll-btns-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include scrollButtons();
+		}
+	}
+	&.scroll-btns-portrait {
+		@media screen and (min-width: #{breakpoints.$tabPortrait}) and (max-width: #{breakpoints.$tabLandscape - 1}) {
+			@include scrollButtons();
+		}
+	}
+	&.scroll-btns-mobile {
+		@include core-mixins-v3.device(
+			breakpoints.$tabPortrait - 1,
+			'max-width'
+		) {
+			@include scrollButtons();
+		}
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		scroll-snap-type: var(--scroll-snap-type-portrait, none);
+		> div {
+			scroll-snap-align: var(--scroll-snap-align-portrait, start);
+		}
+		overflow: var(--container-overflow-type-portrait, hidden);
+		grid-auto-flow: var(--grid-auto-flow-portrait, row);
+		grid-auto-columns: var(--grid-auto-columns-portrait, 1fr);
+		grid-auto-rows: var(--grid-auto-rows-portrait, auto);
+		grid-gap: calc(
+				var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--column-gap-mult-portrait, 0)
+			);
+		grid-template-columns: var(
+			--grid-template-columns-custom-portrait,
+			repeat(
+				var(--grid-template-columns-portrait),
+				var(--grid-auto-columns-portrait, 1fr)
+			)
+		);
+		grid-template-rows: var(
+			--grid-template-rows-custom-portrait,
+			repeat(
+				var(--grid-template-rows-portrait),
+				var(--grid-auto-rows-portrait, 1fr)
+			)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		scroll-snap-type: var(--scroll-snap-type-desktop, none);
+		> div {
+			scroll-snap-align: var(--scroll-snap-align-desktop, start);
+		}
+		overflow: var(--container-overflow-type-desktop, hidden);
+		grid-gap: calc(
+				var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)
+			)
+			calc(
+				var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0)
+			);
+		grid-auto-flow: var(--grid-auto-flow-desktop, row);
+		grid-auto-columns: var(--grid-auto-columns-desktop, 1fr);
+		grid-auto-rows: var(--grid-auto-rows-desktop, auto);
+		grid-template-columns: var(
+			--grid-template-columns-custom-desktop,
+			repeat(
+				var(--grid-template-columns-desktop, 1),
+				var(--grid-auto-columns-desktop, 1fr)
+			)
+		);
+		grid-template-rows: var(
+			--grid-template-rows-custom-desktop,
+			repeat(
+				var(--grid-template-rows-desktop),
+				var(--grid-auto-rows-desktop, 1fr)
+			)
+		);
+	}
+}

package/components/component-grid-layout-container-v3/grid-layout-container-v3.twig

@@ -0,0 +1,88 @@
+{% set displayType = '--display-type: grid;' %}
+
+{% set gridGapMults = include('components/grid-gap-mults-v3.twig', {fields: fields.grid_layout}, with_context = false) %}
+
+{# Grid Container Settings #}
+{% set scrollSnapDesktop = '--scroll-snap-type-desktop: ' ~ fields.grid_layout.scroll_snap_type_desktop|ru ~ ';' %}
+{% set scrollSnapPortrait = '--scroll-snap-type-portrait: ' ~ fields.grid_layout.scroll_snap_type_portrait|ru ~ ';' %}
+{% set scrollSnapMobile = '--scroll-snap-type-mobile: ' ~ fields.grid_layout.scroll_snap_type_mobile|ru ~ ';' %}
+{% set scrollSnapType = scrollSnapDesktop ~ scrollSnapPortrait ~ scrollSnapMobile %}
+
+{# Scroll Snap Align #}
+{% set scrollSnapAlignDesktop = '--scroll-snap-align-desktop: ' ~ fields.grid_layout.scroll_snap_align_desktop|ru ~ ';' %}
+{% set scrollSnapAlignPortrait = '--scroll-snap-align-portrait: ' ~ fields.grid_layout.scroll_snap_align_portrait|ru ~ ';' %}
+{% set scrollSnapAlignMobile = '--scroll-snap-align-mobile: ' ~ fields.grid_layout.scroll_snap_align_mobile|ru ~ ';' %}
+{% set scrollSnapAlign = scrollSnapAlignDesktop ~ scrollSnapAlignPortrait ~ scrollSnapAlignMobile %}
+
+{# Container overflow type #}
+{% set containerOverflowTypeDesktop = '--container-overflow-type-desktop: ' ~ fields.grid_layout.container_overflow_type_desktop|ru ~ ';' %}
+{% set containerOverflowTypePortrait = '--container-overflow-type-portrait: ' ~ fields.grid_layout.container_overflow_type_portrait|ru ~ ';' %}
+{% set containerOverflowTypeMobile = '--container-overflow-type-mobile: ' ~ fields.grid_layout.container_overflow_type_mobile|ru ~ ';' %}
+{% set containerOverflowType = containerOverflowTypeDesktop ~ containerOverflowTypePortrait ~ containerOverflowTypeMobile %}
+
+{# Grid Auto Flow #}
+{% set gridAutoFlowDesktop = '--grid-auto-flow-desktop: ' ~ fields.grid_layout.grid_auto_flow_desktop|ru ~ ';' %}
+{% set gridAutoFlowPortrait = '--grid-auto-flow-portrait: ' ~ fields.grid_layout.grid_auto_flow_portrait|ru ~ ';' %}
+{% set gridAutoFlowMobile = '--grid-auto-flow-mobile: ' ~ fields.grid_layout.grid_auto_flow_mobile|ru ~ ';' %}
+{% set gridAutoFlow = gridAutoFlowDesktop ~ gridAutoFlowPortrait ~ gridAutoFlowMobile %}
+
+
+{# Grid Auto Columns #}
+{% set gridAutoColumnsDesktop = '--grid-auto-columns-desktop: ' ~ fields.grid_layout.grid_auto_columns_desktop|ru|default('1fr') ~ ';' %}
+{% set gridAutoColumnsPortrait = '--grid-auto-columns-portrait: ' ~ fields.grid_layout.grid_auto_columns_portrait|ru|default('1fr') ~ ';' %}
+{% set gridAutoColumnsMobile = '--grid-auto-columns-mobile: ' ~ fields.grid_layout.grid_auto_columns_mobile|ru|default('1fr') ~ ';' %}
+
+{% if fields.grid_layout.grid_auto_columns_desktop|ru == 'custom' %}
+	{% set gridAutoColumnsDesktop = '--grid-auto-columns-desktop: ' ~ fields.grid_layout.grid_auto_columns_desktop_custom ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_auto_columns_portrait|ru == 'custom' %}
+	{% set gridAutoColumnsPortrait = '--grid-auto-columns-portrait: ' ~ fields.grid_layout.grid_auto_columns_portrait_custom ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_auto_columns_mobile|ru == 'custom' %}
+	{% set gridAutoColumnsMobile = '--grid-auto-columns-mobile: ' ~ fields.grid_layout.grid_auto_columns_mobile_custom ~ ';' %}
+{% endif %}
+{% set gridAutoColumns = gridAutoColumnsDesktop ~ gridAutoColumnsPortrait ~ gridAutoColumnsMobile %}
+
+{# Grid Template Columns #}
+{% set gridTemplateColumnsDesktop = '--grid-template-columns-desktop: ' ~ fields.grid_layout.grid_columns_desktop|ru|default('1fr') ~ ';' %}
+{% set gridTemplateColumnsPortrait = '--grid-template-columns-portrait: ' ~ fields.grid_layout.grid_columns_portrait|ru|default('1fr') ~ ';' %}
+{% set gridTemplateColumnsMobile = '--grid-template-columns-mobile: ' ~ fields.grid_layout.grid_columns_mobile|ru|default('1fr') ~ ';' %}
+{% set gridTemplateColumns = gridTemplateColumnsDesktop ~ gridTemplateColumnsPortrait ~ gridTemplateColumnsMobile %}
+
+{# Template Columns Custom #}
+{% if fields.grid_layout.grid_template_columns_custom_desktop is not empty %}
+	{% set gridTemplateColumnsCustomDesktop = '--grid-template-columns-custom-desktop: ' ~ fields.grid_layout.grid_template_columns_custom_desktop ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_columns_custom_portrait is not empty %}
+	{% set gridTemplateColumnsCustomPortrait = '--grid-template-columns-custom-portrait: ' ~ fields.grid_layout.grid_template_columns_custom_portrait ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_columns_custom_mobile is not empty %}
+	{% set gridTemplateColumnsCustomMobile = '--grid-template-columns-custom-mobile: ' ~ fields.grid_layout.grid_template_columns_custom_mobile ~ ';' %}
+{% endif %}
+{% set gridTemplateColumnsCustom = gridTemplateColumnsCustomDesktop ~ gridTemplateColumnsCustomPortrait ~ gridTemplateColumnsCustomMobile %}
+
+{# Grid Auto Rows #}
+{% set gridAutoRowsDesktop = '--grid-auto-rows-desktop: ' ~ fields.grid_layout.grid_auto_rows_desktop|ru ~ ';' %}
+{% set gridAutoRowsPortrait = '--grid-auto-rows-portrait: ' ~ fields.grid_layout.grid_auto_rows_portrait|ru ~ ';' %}
+{% set gridAutoRowsMobile = '--grid-auto-rows-mobile: ' ~ fields.grid_layout.grid_auto_rows_mobile|ru ~ ';' %}
+{% set gridAutoRows = gridAutoRowsDesktop ~ gridAutoRowsPortrait ~ gridAutoRowsMobile %}
+
+{# Grid Template Rows Custom #}
+{% set gridTemplateRowsCustomDesktop = ' --grid-template-rows-custom-desktop:; ' %}
+{% set gridTemplateRowsCustomPortrait = '--grid-template-rows-custom-portrait:; ' %}
+{% set gridTemplateRowsCustomMobile = '--grid-template-rows-custom-mobile:; ' %}
+
+{% if fields.grid_layout.grid_template_rows_custom_desktop is not empty %}
+	{% set gridTemplateRowsCustomDesktop = '--grid-template-rows-custom-desktop: ' ~ fields.grid_layout.grid_template_rows_custom_desktop ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_portrait is not empty %}
+	{% set gridTemplateRowsCustomPortrait = '--grid-template-rows-custom-portrait: ' ~ fields.grid_layout.grid_template_rows_custom_portrait ~ ';' %}
+{% endif %}
+{% if fields.grid_layout.grid_template_rows_custom_mobile is not empty %}
+	{% set gridTemplateRowsCustomMobile = '--grid-template-rows-custom-mobile: ' ~ fields.grid_layout.grid_template_rows_custom_mobile ~ ';' %}
+{% endif %}
+{% set gridTemplateRowsCustom = gridTemplateRowsCustomDesktop ~ gridTemplateRowsCustomPortrait ~ gridTemplateRowsCustomMobile %}
+
+{% set gridLayoutContainer = scrollSnapType ~ scrollSnapAlign ~ displayType ~ containerOverflowType ~ gridGapMults ~ gridTemplateColumns ~ gridTemplateColumnsCustom ~ gridAutoFlow ~ gridAutoColumns ~ gridAutoRows ~ gridTemplateRowsCustom %}
+
+{{gridLayoutContainer}}