@total_onion/onion-library 1.1.48 → 1.1.49
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.
- package/components/block-social-networks-v3/social-networks-v3.scss +3 -12
- package/components/block-social-networks-v3/social-networks-v3.twig +1 -1
- package/components/component-social-networks-v3/social-networks-v3.scss +74 -0
- package/components/component-social-networks-v3/social-networks-v3.twig +50 -0
- package/package.json +1 -1
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
@use '../
|
|
2
|
-
@use '../fields-core-functions-v3/core-functions-v3';
|
|
3
|
-
@use '../../breakpoints';
|
|
4
|
-
@use '../component-content-container-settings-v3/content-container-settings-v3';
|
|
5
|
-
// @use 'Assets/scss/blocks/social-networks-v3/social-networks-v3-extra';
|
|
6
|
-
.social-networks-v3 {
|
|
7
|
-
@include content-container-settings-v3.contentContainerSettingsV3();
|
|
8
|
-
pointer-events: all;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
gap: core-functions-v3.fluidSize(10);
|
|
1
|
+
@use '../component-social-networks-v3/social-networks-v3';
|
|
12
2
|
|
|
13
|
-
|
|
3
|
+
.social-networks-v3 {
|
|
4
|
+
@include social-networks-v3.socialNetworksV3();
|
|
14
5
|
}
|
|
@@ -19,6 +19,6 @@
|
|
|
19
19
|
{{ include('components/wysiwyg-editor-v3.twig', { fields, block, blockClassName}, with_context = false, ignore_missing = true) }}
|
|
20
20
|
{% endif %}
|
|
21
21
|
|
|
22
|
-
{{ include('components/social-networks.twig', {fields, block, blockClassName, is_preview, market_settings}, with_context = false, ignore_missing = true) }}
|
|
22
|
+
{{ include('components/social-networks-v3.twig', {fields, block, blockClassName, is_preview, market_settings, options}, with_context = false, ignore_missing = true) }}
|
|
23
23
|
{{htmlEntryPoint}}
|
|
24
24
|
</section>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
|
|
2
|
+
@use '../fields-core-functions-v3/core-functions-v3';
|
|
3
|
+
@use '../fields-core-mixins-v3/core-mixins-v3';
|
|
4
|
+
@use '../../breakpoints';
|
|
5
|
+
|
|
6
|
+
@mixin socialNetworksV3() {
|
|
7
|
+
.component-social-networks-v3 {
|
|
8
|
+
display: flex;
|
|
9
|
+
width: 100%;
|
|
10
|
+
justify-content: var(--alignment-mobile);
|
|
11
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
12
|
+
justify-content: var(--alignment-portrait);
|
|
13
|
+
}
|
|
14
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
15
|
+
justify-content: var(--alignment-desktop);
|
|
16
|
+
}
|
|
17
|
+
&__inner-container {
|
|
18
|
+
display: flex;
|
|
19
|
+
width: max-content;
|
|
20
|
+
gap: core-functions-v3.fluidSize(var(--gap-mobile), 'mobile');
|
|
21
|
+
flex-direction: var(--direction-mobile);
|
|
22
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
23
|
+
gap: core-functions-v3.fluidSize(var(--gap-portrait), 'portrait');
|
|
24
|
+
flex-direction: var(--direction-portrait);
|
|
25
|
+
}
|
|
26
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
27
|
+
gap: core-functions-v3.fluidSize(var(--gap-desktop), 'desktop');
|
|
28
|
+
flex-direction: var(--direction-desktop);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&__image {
|
|
33
|
+
display: block;
|
|
34
|
+
width: core-functions-v3.fluidSize(var(--width-mobile), 'mobile');
|
|
35
|
+
height: core-functions-v3.fluidSize(var(--width-mobile), 'mobile');
|
|
36
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
37
|
+
width: core-functions-v3.fluidSize(
|
|
38
|
+
var(--width-portrait),
|
|
39
|
+
'portrait'
|
|
40
|
+
);
|
|
41
|
+
height: core-functions-v3.fluidSize(
|
|
42
|
+
var(--width-portrait),
|
|
43
|
+
'portrait'
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
47
|
+
width: core-functions-v3.fluidSize(
|
|
48
|
+
var(--width-desktop),
|
|
49
|
+
'desktop'
|
|
50
|
+
);
|
|
51
|
+
height: core-functions-v3.fluidSize(
|
|
52
|
+
var(--width-desktop),
|
|
53
|
+
'desktop'
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
&__link-container {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
gap: core-functions-v3.fluidSize(15);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&__image {
|
|
64
|
+
height: auto;
|
|
65
|
+
width: core-functions-v3.fluidSize(var(--width-mobile));
|
|
66
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
67
|
+
width: core-functions-v3.fluidSize(var(--width-portrait));
|
|
68
|
+
}
|
|
69
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
70
|
+
width: core-functions-v3.fluidSize(var(--width-desktop));
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
|
|
2
|
+
{% set direction = '--direction-desktop: ' ~ fields.menu_direction|ru ~ ';' %}
|
|
3
|
+
{% set directionPortrait = '--direction-portrait: ' ~ fields.menu_direction_portrait|ru ~ ';' %}
|
|
4
|
+
{% set directionMobile = '--direction-mobile: ' ~ fields.menu_direction_mobile|ru ~ ';' %}
|
|
5
|
+
{% set socialIconSize = '--width-desktop: ' ~ fields.width_desktop|ru ~ ';' %}
|
|
6
|
+
{% set socialIconSizePortrait = '--width-portrait: ' ~ fields.width_portrait|ru ~ ';' %}
|
|
7
|
+
{% set socialIconSizeMobile = '--width-mobile: ' ~ fields.width_mobile|ru ~ ';' %}
|
|
8
|
+
{% set gapDesktop = '--gap-desktop: ' ~ fields.gap_desktop|ru ~ ';' %}
|
|
9
|
+
{% set gapPortrait = '--gap-portrait: ' ~ fields.gap_portrait|ru ~ ';' %}
|
|
10
|
+
{% set gapMobile = '--gap-mobile: ' ~ fields.gap_mobile|ru ~ ';' %}
|
|
11
|
+
{% set alignmentDesktop = '--alignment-desktop: ' ~ fields.alignment_desktop|ru ~ ';' %}
|
|
12
|
+
{% set alignmentPortrait = '--alignment-portrait: ' ~ fields.alignment_portrait|ru ~ ';' %}
|
|
13
|
+
{% set alignmentMobile = '--alignment-mobile: ' ~ fields.alignment_mobile|ru ~ ';' %}
|
|
14
|
+
{% set showSocialName = fields.show_social_name %}
|
|
15
|
+
|
|
16
|
+
{% set sectionStyles = direction ~ alignmentDesktop ~ alignmentPortrait ~ alignmentMobile ~ directionPortrait ~ directionMobile ~ gapDesktop ~ gapPortrait ~ gapMobile ~ socialIconSize ~ socialIconSizePortrait ~ socialIconSizeMobile %}
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
.component-social-networks-v3 {
|
|
20
|
+
{{sectionStyles}}
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<div class="component-social-networks-v3">
|
|
25
|
+
<div class="component-social-networks-v3__inner-container">
|
|
26
|
+
{% for social in options.social_networks.networks %}
|
|
27
|
+
{% if social.enabled %}
|
|
28
|
+
|
|
29
|
+
{# {% set image = get_image(social.social_icon) %} #}
|
|
30
|
+
{% set image = options.cta_icons[social.social_network] %}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
{% set isSVG = image.post_mime_type == 'image/svg+xml' %}
|
|
34
|
+
|
|
35
|
+
{% set target = social.social_link.target is not empty ? social.social_link.target : "_self" %}
|
|
36
|
+
|
|
37
|
+
<a class="component-social-networks-v3__link-container" href="{{social.social_link.url}}" aria-label="social-network-link-{{social.social_network}}" target="{{target}}">
|
|
38
|
+
{% if showSocialName %}
|
|
39
|
+
<span class="component-social-networks-v3__social-name">{{social.social_network}}</span>
|
|
40
|
+
{% endif %}
|
|
41
|
+
{% if isSVG and false %}
|
|
42
|
+
{{get_raw_svg(image.id)}}
|
|
43
|
+
{% else %}
|
|
44
|
+
<img class="component-social-networks-v3__image style-svg" src="{{image.src}}" loading="lazy" width="30" height="30" alt="{{ image.alt }}">
|
|
45
|
+
{% endif %}
|
|
46
|
+
</a>
|
|
47
|
+
{% endif %}
|
|
48
|
+
{% endfor %}
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|