@total_onion/onion-library 2.0.36 → 2.0.37
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.
|
@@ -1,74 +1,79 @@
|
|
|
1
1
|
{% if fields.accent_image_v3.enable_accent_image_v3 %}
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
2
|
+
{% for image in fields.accent_image_v3.accent_images %}
|
|
3
|
+
{% set accentImage = get_image(image.accent_image_v3_image) %}
|
|
4
|
+
{% set rotationDesktop = image.desktop_positioning.image_rotation_desktop|default(0) %}
|
|
5
|
+
{% set rotationMobile = image.mobile_positioning.image_rotation_mobile|default(rotationDesktop) %}
|
|
6
|
+
{% set opacity = image.accent_image_opacity|default(1) %}
|
|
7
|
+
{% set borderRadius = image.accent_image_border_radius|default('0px') %}
|
|
8
|
+
{% set zIndex = image.accent_z_index %}
|
|
9
|
+
{% set mobileSettings = image.mobile_positioning %}
|
|
10
|
+
{% set oneHundredWidth = image.set_width_and_height_to_100 %}
|
|
11
|
+
{% set imageFitStyle = image.image_fit_style|ru %}
|
|
12
|
+
{% if image.use_desktop_positioning_for_mobile %}
|
|
13
|
+
{% set mobileSettings = image.desktop_positioning %}
|
|
14
|
+
{% endif %}
|
|
15
|
+
{% set mobilePositioning = mobileSettings.horizontal_offset ~ '% ' ~ mobileSettings.vertical_offset ~ '%' %}
|
|
16
|
+
{% set desktopPositioning = image.desktop_positioning.horizontal_offset ~ '% ' ~ image.desktop_positioning.vertical_offset ~ '%' %}
|
|
17
|
+
{% set desktopWidth = 'calc(' ~ image.desktop_accent_image_width ~ '/ var(--desktop-design-reference) * var(--screen-width-desktop))' %}
|
|
18
|
+
{% set mobileWidth = 'calc(' ~ image.mobile_accent_image_width ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile))' %}
|
|
19
|
+
{% if oneHundredWidth %}
|
|
20
|
+
{% set desktopWidth = '100%' %}
|
|
21
|
+
{% set mobileWidth = '100%' %}
|
|
22
|
+
{% endif %}
|
|
23
|
+
{% set accentImageContainerElement = 'div' %}
|
|
24
|
+
{% set accentImageCtaType = image.accent_image_cta_type|ru %}
|
|
25
|
+
{% if image.enable_accent_image_cta %}
|
|
26
|
+
{% if image.accent_image_cta_type|ru == 'link' %}
|
|
27
|
+
{% set accentImageContainerElement = 'a' %}
|
|
28
|
+
{% endif %}
|
|
29
|
+
{% endif %}
|
|
30
30
|
{% set suffix = block.id ~ '-' ~ loop.index %}
|
|
31
31
|
{% if image.animations.enable_animations %}
|
|
32
|
-
{{include('components/animations-style.twig', { fields: image, suffix }, with_context = false)}}
|
|
32
|
+
{{include('components/animations-style-v3.twig', { fields: image, suffix }, with_context = false)}}
|
|
33
33
|
{% endif %}
|
|
34
|
-
|
|
34
|
+
<style>
|
|
35
35
|
.loaded .{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
|
|
36
|
-
{{include('components/animations.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
|
|
37
|
-
animation: var(--animation-name) var(--animation-duration)
|
|
38
|
-
var(--animation-delay) var(--animation-easing)
|
|
39
|
-
var(--animation-repeat) var(--animation-fill-mode)
|
|
40
|
-
var(--animation-direction);
|
|
36
|
+
{{include('components/animations-v3.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
|
|
37
|
+
animation: var(--animation-name) var(--animation-duration) var(--animation-delay) var(--animation-easing) var(--animation-repeat) var(--animation-fill-mode) var(--animation-direction);
|
|
41
38
|
}
|
|
42
39
|
.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
|
|
43
|
-
z-index: {{zIndex}}
|
|
40
|
+
z-index: {{zIndex}}
|
|
41
|
+
;
|
|
44
42
|
grid-area: main;
|
|
45
43
|
pointer-events: {{image.enable_accent_image_cta ? 'all' : 'none'}};
|
|
46
44
|
position: absolute;
|
|
47
45
|
place-self: {{mobileSettings.vertical_snap|ru}}
|
|
48
|
-
{{mobileSettings.horizontal_snap|ru}}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
{{mobileSettings.horizontal_snap|ru}}
|
|
47
|
+
;
|
|
48
|
+
width: {{mobileWidth}}
|
|
49
|
+
;
|
|
50
|
+
height: {{mobileWidth}}
|
|
51
|
+
;
|
|
52
|
+
translate: {{mobilePositioning}}
|
|
53
|
+
;
|
|
52
54
|
}
|
|
53
55
|
.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
|
|
54
56
|
width: 100%;
|
|
55
57
|
height: 100%;
|
|
56
58
|
display: flex;
|
|
57
|
-
object-fit: {{imageFitStyle}}
|
|
58
|
-
|
|
59
|
+
object-fit: {{imageFitStyle}}
|
|
60
|
+
;
|
|
61
|
+
border-radius: {{borderRadius}}
|
|
62
|
+
;
|
|
59
63
|
border: 0 solid transparent;
|
|
60
|
-
opacity: {{opacity}}
|
|
64
|
+
opacity: {{opacity}}
|
|
65
|
+
;
|
|
61
66
|
rotate: {{rotationMobile ~ 'deg'}};
|
|
62
67
|
}
|
|
63
68
|
.{{blockClassName}}__image-number {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
z-index: 99;
|
|
70
|
+
position: absolute;
|
|
71
|
+
font-size: 40px;
|
|
72
|
+
left: 50%;
|
|
73
|
+
top: 50%;
|
|
74
|
+
transform: translate(-50%, -50%);
|
|
75
|
+
color: white;
|
|
76
|
+
text-shadow: 1px 1px 1px blue;
|
|
72
77
|
}
|
|
73
78
|
@media screen and (min-width: 768px) {
|
|
74
79
|
.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
|
|
@@ -90,7 +95,7 @@
|
|
|
90
95
|
}
|
|
91
96
|
}
|
|
92
97
|
</style>
|
|
93
|
-
|
|
98
|
+
<{{accentImageContainerElement}}
|
|
94
99
|
{{accentImageCtaType == 'link' ? 'href="' ~ image.accent_image_link.url ~ '" ' ~ 'target="' ~ image.accent_image_link.target ~ '" ' : ''}}
|
|
95
100
|
class="{{block.id}}-{{ loop.index }} {{blockClassName}}__accent-image">
|
|
96
101
|
<img
|
|
@@ -101,9 +106,9 @@
|
|
|
101
106
|
alt="{{ accentImage.alt }}"
|
|
102
107
|
loading="lazy"
|
|
103
108
|
/>
|
|
104
|
-
{% if fields.accent_image_v3.show_image_number and is_preview%}
|
|
109
|
+
{% if fields.accent_image_v3.show_image_number and is_preview %}
|
|
105
110
|
<div class="{{blockClassName}}__image-number">{{ loop.index }}</div>
|
|
106
111
|
{% endif %}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
{% endif %}
|
|
112
|
+
</{{accentImageContainerElement}}>
|
|
113
|
+
{% endfor %}
|
|
114
|
+
{% endif %}
|