@total_onion/onion-library 2.0.36 → 2.0.38
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 %}
|
|
@@ -494,7 +494,7 @@
|
|
|
494
494
|
@mixin sh-m-size {
|
|
495
495
|
font-size: clamp(
|
|
496
496
|
var(--sh-m-font-size-min-desktop, 10px),
|
|
497
|
-
core-functions-v3.fontSize(var(--sh-m-desktop,
|
|
497
|
+
core-functions-v3.fontSize(var(--sh-m-desktop, 30)),
|
|
498
498
|
var(--sh-m-font-size-max-desktop, 180px)
|
|
499
499
|
);
|
|
500
500
|
letter-spacing: var(--sh-m-letter-spacing);
|
|
@@ -541,7 +541,7 @@
|
|
|
541
541
|
@mixin sh-s-size {
|
|
542
542
|
font-size: clamp(
|
|
543
543
|
var(--sh-s-font-size-min-desktop, 10px),
|
|
544
|
-
core-functions-v3.fontSize(var(--sh-s-desktop,
|
|
544
|
+
core-functions-v3.fontSize(var(--sh-s-desktop, 26)),
|
|
545
545
|
var(--sh-s-font-size-max-desktop, 180px)
|
|
546
546
|
);
|
|
547
547
|
letter-spacing: var(--sh-s-letter-spacing);
|
|
@@ -167,19 +167,19 @@ function core_typography_v3()
|
|
|
167
167
|
--sh-l-landscape:' . ($options['sub_headings']['sh_l_desktop'] ?? 44) . ';
|
|
168
168
|
--sh-l-portrait:' . ($options['sub_headings']['sh_l_portrait'] ?? 32) . ';
|
|
169
169
|
--sh-l-mobile:' . ($options['sub_headings']['sh_l_mobile'] ?? 32) . ';
|
|
170
|
-
--sh-m-desktop:' . ($options['sub_headings']['sh_m_desktop'] ??
|
|
170
|
+
--sh-m-desktop:' . ($options['sub_headings']['sh_m_desktop'] ?? 30) . ';
|
|
171
171
|
--sh-m-landscape:' . ($options['sub_headings']['sh_m_desktop'] ?? 32) . ';
|
|
172
172
|
--sh-m-portrait:' . ($options['sub_headings']['sh_m_portrait'] ?? 24) . ';
|
|
173
173
|
--sh-m-mobile:' . ($options['sub_headings']['sh_m_mobile'] ?? 24) . ';
|
|
174
|
-
--sh-s-desktop:' . ($options['sub_headings']['sh_s_desktop'] ??
|
|
174
|
+
--sh-s-desktop:' . ($options['sub_headings']['sh_s_desktop'] ?? 26) . ';
|
|
175
175
|
--sh-s-landscape:' . ($options['sub_headings']['sh_s_desktop'] ?? 24) . ';
|
|
176
176
|
--sh-s-portrait:' . ($options['sub_headings']['sh_s_portrait'] ?? 20) . ';
|
|
177
177
|
--sh-s-mobile:' . ($options['sub_headings']['sh_s_mobile'] ?? 20) . ';
|
|
178
|
-
--sh-xs-desktop:' . ($options['sub_headings']['sh_xs_desktop'] ??
|
|
178
|
+
--sh-xs-desktop:' . ($options['sub_headings']['sh_xs_desktop'] ?? 18) . ';
|
|
179
179
|
--sh-xs-landscape:' . ($options['sub_headings']['sh_xs_desktop'] ?? 20) . ';
|
|
180
180
|
--sh-xs-portrait:' . ($options['sub_headings']['sh_xs_portrait'] ?? 18) . ';
|
|
181
181
|
--sh-xs-mobile:' . ($options['sub_headings']['sh_xs_mobile'] ?? 18) . ';
|
|
182
|
-
--sh-xxs-desktop:' . ($options['sub_headings']['sh_xxs_desktop'] ??
|
|
182
|
+
--sh-xxs-desktop:' . ($options['sub_headings']['sh_xxs_desktop'] ?? 16) . ';
|
|
183
183
|
--sh-xxs-landscape:' . ($options['sub_headings']['sh_xxs_desktop'] ?? 18) . ';
|
|
184
184
|
--sh-xxs-portrait:' . ($options['sub_headings']['sh_xxs_portrait'] ?? 18) . ';
|
|
185
185
|
--sh-xxs-mobile:' . ($options['sub_headings']['sh_xxs_mobile'] ?? 18) . ';
|