@total_onion/onion-library 3.2.0 → 3.2.2

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

@@ -0,0 +1,38 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+@mixin flexLayoutContainer() {
+	display: var(--display-type, flex);
+	justify-content: var(--justify-content-mobile, flex-start);
+	flex-direction: var(--flex-direction-mobile, row);
+	align-items: var(--align-items-mobile, center);
+	gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0))
+		calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
+	flex-wrap: var(--flex-wrap-mobile, nowrap);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		justify-content: var(--justify-content-portrait, flex-start);
+		flex-direction: var(--flex-direction-portrait, row);
+		align-items: var(--align-items-portrait, center);
+		gap: calc(
+				var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)
+			)
+			calc(
+				var(--global-inline-spacing) *
+					var(--column-gap-mult-portrait, 0)
+			);
+		flex-wrap: var(--flex-wrap-portrait, nowrap);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		justify-content: var(--justify-content-desktop, flex-start);
+		flex-direction: var(--flex-direction-desktop, row);
+		align-items: var(--align-items-desktop, center);
+		gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0))
+			calc(
+				var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0)
+			);
+		flex-wrap: var(--flex-wrap-desktop, nowrap);
+	}
+}

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

@@ -0,0 +1,28 @@
+{% set flexDirectionDesktop = '--flex-direction-desktop: ' ~ fields.flex_layout.flex_direction_desktop|ru|default('row') ~ ';' %}
+{% set flexDirectionPortrait = '--flex-direction-portrait: ' ~ fields.flex_layout.flex_direction_portrait|ru|default('row') ~ ';' %}
+{% set flexDirectionMobile = '--flex-direction-mobile: ' ~ fields.flex_layout.flex_direction_mobile|ru|default('row') ~ ';' %}
+
+{% set flexWrapDesktop = '--flex-wrap-desktop: ' ~ fields.flex_layout.flex_wrap_desktop|ru|default('nowrap') ~ ';' %}
+{% set flexWrapPortrait = '--flex-wrap-portrait: ' ~ fields.flex_layout.flex_wrap_portrait|ru|default('nowrap') ~ ';' %}
+{% set flexWrapMobile = '--flex-wrap-mobile: ' ~ fields.flex_layout.flex_wrap_mobile|ru|default('nowrap') ~ ';' %}
+
+{% set displayType = '--display-type: ' ~ 'flex' ~ ';' %}
+
+{% set flexDirection = flexDirectionDesktop ~ flexDirectionPortrait ~ flexDirectionMobile %}
+{% set flexWrap = flexWrapDesktop ~ flexWrapPortrait ~ flexWrapMobile %}
+
+{% set justifyContentDesktop = '--justify-content-desktop: ' ~ fields.flex_layout.justify_content_desktop|ru|default('flex-start') ~ ';' %}
+{% set justifyContentPortrait = '--justify-content-portrait: ' ~ fields.flex_layout.justify_content_portrait|ru|default('flex-start') ~ ';' %}
+{% set justifyContentMobile = '--justify-content-mobile: ' ~ fields.flex_layout.justify_content_mobile|ru|default('flex-start') ~ ';' %}
+
+{% set justifyContent = justifyContentDesktop ~ justifyContentPortrait ~ justifyContentMobile %}
+{% set flexDirection = flexDirection ~ flexWrap ~ justifyContentDesktop ~ justifyContentPortrait ~ justifyContentMobile %}
+{% set alignItemsDesktop = '--align-items-desktop: ' ~ fields.flex_layout.align_items_desktop|ru|default('flex-start') ~ ';' %}
+{% set alignItemsPortrait = '--align-items-portrait: ' ~ fields.flex_layout.align_items_portrait|ru|default('flex-start') ~ ';' %}
+{% set alignItemsMobile = '--align-items-mobile: ' ~ fields.flex_layout.align_items_mobile|ru|default('flex-start') ~ ';' %}
+
+{% set gridGapMults = include('components/grid-gap-mults-v3.twig', {fields: fields.flex_layout}, with_context = false) %}
+
+{% set alignItems = alignItemsDesktop ~ alignItemsPortrait ~ alignItemsMobile %}
+
+{{flexDirection ~ flexWrap ~ justifyContent ~ alignItems ~ gridGapMults ~ displayType}}