@total_onion/onion-library 2.0.239 → 2.0.241

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/component-element-positioning-v3/element-positioning-v3.scss +22 -1
  2. package/components/component-element-positioning-v3/element-positioning-v3.twig +11 -3
  3. package/package.json +1 -1
  4. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +11 -0
  5. package/public/block-post-info-v3/post-info-v3.css +12 -0
  6. package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css +14 -0
  7. package/public/block-product-info-v3/product-info-v3.css +12 -0
package/components/component-element-positioning-v3/element-positioning-v3.scss CHANGED
@@ -9,7 +9,28 @@
9
9
  translate: var(--element-horizontal-offset-mobile, 0)
10
10
  var(--element-vertical-offset-mobile, 0);
11
11
  rotate: var(--element-rotation-mobile, 0deg);
12
-
12
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
13
+ place-self: var(
14
+ --portrait-vertical-placement,
15
+ var(--desktop-vertical-placement)
16
+ )
17
+ var(
18
+ --portrait-horizontal-placement,
19
+ var(--desktop-horizontal-placement)
20
+ );
21
+ translate: var(
22
+ --element-horizontal-offset-portrait,
23
+ var(--element-horizontal-offset-desktop, 0)
24
+ )
25
+ var(
26
+ --element-vertical-offset-portrait,
27
+ var(--element-vertical-offset-desktop, 0)
28
+ );
29
+ rotate: var(
30
+ --element-rotation-portrait,
31
+ var(--element-rotation-desktop, 0deg)
32
+ );
33
+ }
13
34
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
14
35
  place-self: var(--desktop-vertical-placement)
15
36
  var(--desktop-horizontal-placement);
package/components/component-element-positioning-v3/element-positioning-v3.twig CHANGED
@@ -1,19 +1,23 @@
1
1
  {% set rotationDesktop = '--element-rotation-desktop: ' ~ fields.element_positioning.desktop_positioning.element_rotation_desktop|default(0) ~ 'deg;' %}
2
+ {% set rotationPortrait = '--element-rotation-portrait: ' ~ fields.element_positioning.portrait_positioning.element_rotation_portrait ~ 'deg;' %}
2
3
  {% set rotationMobile = '--element-rotation-mobile: ' ~ fields.element_positioning.mobile_positioning.element_rotation_mobile|default(rotationDesktop) ~ 'deg;' %}
3
4
  {% set zIndex = '--element-z-index: ' ~ fields.element_positioning.element_z_index ~ ';' %}
4
5
  {% set elementPosition = '--element-position: ' ~ fields.element_positioning.element_position|ru ~ ';' %}
5
6
 
6
7
  {% if fields.element_positioning.unit_type == '%' %}
7
8
  {% set mobilePositioning = '--element-horizontal-offset-mobile: ' ~ fields.element_positioning.mobile_positioning.horizontal_offset ~ '%; --element-vertical-offset-mobile: ' ~ fields.element_positioning.mobile_positioning.vertical_offset ~ '%;' %}
9
+ {% set portraitPositioning = '--element-horizontal-offset-portrait: ' ~ fields.element_positioning.portrait_positioning.horizontal_offset ~ '%; --element-vertical-offset-portrait: ' ~ fields.element_positioning.portrait_positioning.vertical_offset ~ '%;' %}
8
10
  {% set desktopPositioning = '--element-horizontal-offset-desktop: ' ~ fields.element_positioning.desktop_positioning.horizontal_offset ~ '%; --element-vertical-offset-desktop: ' ~ fields.element_positioning.desktop_positioning.vertical_offset ~ '%;' %}
9
11
  {% else %}
10
12
  {% set mobilePositioning = '--element-horizontal-offset-mobile: calc(' ~ fields.element_positioning.mobile_positioning.horizontal_offset ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile)); --element-vertical-offset-mobile: calc(' ~ fields.element_positioning.mobile_positioning.vertical_offset ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile));' %}
13
+ {% set portraitPositioning = '--element-horizontal-offset-portrait: calc(' ~ fields.element_positioning.portrait_positioning.horizontal_offset ~ '/ var(--portrait-design-reference) * var(--screen-width-portrait)); --element-vertical-offset-portrait: calc(' ~ fields.element_positioning.portrait_positioning.vertical_offset ~ '/ var(--portrait-design-reference) * var(--screen-width-portrait));' %}
11
14
  {% set desktopPositioning = '--element-horizontal-offset-desktop: calc(' ~ fields.element_positioning.desktop_positioning.horizontal_offset ~ '/ var(--desktop-design-reference) * var(--screen-width-desktop)); --element-vertical-offset-desktop: calc(' ~ fields.element_positioning.desktop_positioning.vertical_offset ~ '/ var(--desktop-design-reference) * var(--screen-width-desktop));' %}
12
15
  {% endif %}
13
16
 
14
17
  {% set mobileSettings = fields.element_positioning.mobile_positioning %}
15
-
18
+ {% set portraitSettings = fields.element_positioning.portrait_positioning %}
16
19
  {% set desktopSettings = fields.element_positioning.desktop_positioning %}
20
+
17
21
  {% if fields.element_positioning.use_desktop_positioning_for_mobile %}
18
22
  {% set mobileSettings = fields.element_positioning.desktop_positioning %}
19
23
  {% endif %}
@@ -21,14 +25,18 @@
21
25
  {% set mobileHorizontalPlacement = '--mobile-horizontal-placement: ' ~ mobileSettings.horizontal_snap|ru ~ ';' %}
22
26
  {% set mobileVerticalPlacement = '--mobile-vertical-placement: ' ~ mobileSettings.vertical_snap|ru ~ ';' %}
23
27
 
28
+ {% set portraitHorizontalPlacement = '--portrait-horizontal-placement: ' ~ portraitSettings.horizontal_snap|ru ~ ';' %}
29
+ {% set portraitVerticalPlacement = '--portrait-vertical-placement: ' ~ portraitSettings.vertical_snap|ru ~ ';' %}
30
+
24
31
  {% set desktopHorizontalPlacement = '--desktop-horizontal-placement: ' ~ desktopSettings.horizontal_snap|ru ~ ';' %}
25
32
  {% set desktopVerticalPlacement = '--desktop-vertical-placement: ' ~ desktopSettings.vertical_snap|ru ~ ';' %}
26
33
 
27
34
  {% set desktopWidth = 'calc(' ~ fields.element_positioning.desktop_element_image_width ~ '/ var(--desktop-design-reference) * var(--screen-width-desktop))' %}
28
35
 
29
- {% set mobileWidth = 'calc(' ~ fields.element_positioning.mobile_element_image_width ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile))' %}
36
+ {% set portraitWidth = 'calc(' ~ fields.element_positioning.portrait_element_image_width ~ '/ var(--portrait-design-reference) * var(--screen-width-portrait))' %}
30
37
 
31
- {% set positioningVars = rotationDesktop ~ rotationMobile ~ opacity ~ borderRadius ~ zIndex ~ elementPosition ~ mobilePositioning ~ desktopPositioning ~ mobileHorizontalPlacement ~ mobileVerticalPlacement ~ desktopHorizontalPlacement ~ desktopVerticalPlacement ~ unitType %}
38
+ {% set mobileWidth = 'calc(' ~ fields.element_positioning.mobile_element_image_width ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile))' %}
32
39
 
40
+ {% set positioningVars = rotationDesktop ~ rotationPortrait ~ rotationMobile ~ opacity ~ borderRadius ~ zIndex ~ elementPosition ~ mobilePositioning ~ portraitPositioning ~ desktopPositioning ~ mobileHorizontalPlacement ~ mobileVerticalPlacement ~ portraitHorizontalPlacement ~ portraitVerticalPlacement ~ desktopHorizontalPlacement ~ desktopVerticalPlacement ~ unitType %}
33
41
 
34
42
  {{positioningVars}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.239",
3
+ "version": "2.0.241",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css CHANGED
@@ -128,6 +128,17 @@
128
128
  rotate: 0deg;
129
129
  rotate: var(--element-rotation-mobile, 0deg);
130
130
  }
131
+ @media screen and (min-width: 768px) {
132
+ .carousel-multi-layout-v3 .swiper-pagination {
133
+ align-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement));
134
+ justify-self: var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
135
+ place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
136
+ translate: 0 0;
137
+ translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
138
+ rotate: 0deg;
139
+ rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
140
+ }
141
+ }
131
142
  @media screen and (min-width: 1024px) {
132
143
  .carousel-multi-layout-v3 .swiper-pagination {
133
144
  align-self: var(--desktop-vertical-placement);
package/public/block-post-info-v3/post-info-v3.css CHANGED
@@ -1104,6 +1104,18 @@
1104
1104
  rotate: 0deg;
1105
1105
  rotate: var(--element-rotation-mobile, 0deg);
1106
1106
  }
1107
+ @media screen and (min-width: 768px) {
1108
+ .post-info-v3__post-image-container--image-accent img,
1109
+ .post-info-v3__post-image-container--image-accent svg {
1110
+ align-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement));
1111
+ justify-self: var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
1112
+ place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
1113
+ translate: 0 0;
1114
+ translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
1115
+ rotate: 0deg;
1116
+ rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
1117
+ }
1118
+ }
1107
1119
  @media screen and (min-width: 1024px) {
1108
1120
  .post-info-v3__post-image-container--image-accent img,
1109
1121
  .post-info-v3__post-image-container--image-accent svg {
package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css CHANGED
@@ -529,6 +529,20 @@
529
529
  rotate: 0deg;
530
530
  rotate: var(--element-rotation-mobile, 0deg);
531
531
  }
532
+ @media screen and (min-width: 768px) {
533
+ .post-type-filter-grid-v3__post-image--image_accent,
534
+ .post-type-filter-grid-v3__post-image--secondary--image_accent,
535
+ .post-type-filter-grid-v3__global-image--image_accent,
536
+ .post-type-filter-grid-v3__media-image--image_accent {
537
+ align-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement));
538
+ justify-self: var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
539
+ place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
540
+ translate: 0 0;
541
+ translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
542
+ rotate: 0deg;
543
+ rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
544
+ }
545
+ }
532
546
  @media screen and (min-width: 1024px) {
533
547
  .post-type-filter-grid-v3__post-image--image_accent,
534
548
  .post-type-filter-grid-v3__post-image--secondary--image_accent,
package/public/block-product-info-v3/product-info-v3.css CHANGED
@@ -810,6 +810,18 @@
810
810
  rotate: 0deg;
811
811
  rotate: var(--element-rotation-mobile, 0deg);
812
812
  }
813
+ @media screen and (min-width: 768px) {
814
+ .product-info-v3__post-image-container--image-accent img,
815
+ .product-info-v3__post-image-container--image-accent svg {
816
+ align-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement));
817
+ justify-self: var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
818
+ place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
819
+ translate: 0 0;
820
+ translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
821
+ rotate: 0deg;
822
+ rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
823
+ }
824
+ }
813
825
  @media screen and (min-width: 1024px) {
814
826
  .product-info-v3__post-image-container--image-accent img,
815
827
  .product-info-v3__post-image-container--image-accent svg {