@total_onion/onion-library 2.0.64 → 2.0.66

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.
@@ -32,7 +32,7 @@
32
32
 
33
33
  <div class="{{blockClassName}}__other-images">
34
34
  {% for image in images %}
35
- <div class="{{blockClassName}}__image-wrapper">
35
+ <div class="{{blockClassName}}__image-wrapper {{loop.index == 1 ? blockClassName ~ '__image-wrapper--active' : ''}}">
36
36
  {% set image = get_image(image.image) %}
37
37
  {% set srcset = gt_image_srcset(image) %}
38
38
  {% set mainImageSrc = gt_image_mainsrc(image) %}
@@ -62,10 +62,11 @@
62
62
  {{widgetStyles}}
63
63
  }
64
64
  </style>
65
- <a href="#" class="{{blockClassName}}__product-buy-now ctb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}" data-ctbuy data-ctbuy-variant="{{productCtbPimid}}" data-ctbuy-country="" data-ctbuy-lang="" data-ctbuy-default-view="" data-ctbuy-customquerystring="" data-ctbuy-direct-link="" title="{{field.post_link_text}}">
66
- <span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
67
- {{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
68
- </a>
65
+ [clicktobuy class="{{blockClassName}}__product-buy-now ctb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}
66
+ cmpl-cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : '1'}}
67
+ has-shop shop-ctb" lang="{{ postObject.meta('click_to_buy_language') }}" variant="{{productCtbPimid}}" defaultView="links" country="" customQueryString=""]
68
+ <span class="cmpl-cta-span">{{ field.post_link_text }}</span>
69
+ [/clicktobuy]
69
70
  {% endif %}
70
71
  {% if buyNowOptionSelect|ru == 'wtb' %}
71
72
  {% set productPimDebrainId = post.meta('debrain_pim_id') %}
@@ -3091,6 +3091,123 @@
3091
3091
  "acfe_flexible_category": false,
3092
3092
  "acfe_layout_col": "auto",
3093
3093
  "acfe_layout_allowed_col": false
3094
+ },
3095
+ "layout_68eff85cd2e83": {
3096
+ "key": "layout_68eff85cd2e83",
3097
+ "name": "spacer_v3",
3098
+ "label": "Spacer v3",
3099
+ "display": "block",
3100
+ "sub_fields": [
3101
+ {
3102
+ "key": "field_68eff85cd2e86",
3103
+ "label": "Grid Layout",
3104
+ "name": "",
3105
+ "aria-label": "",
3106
+ "type": "tab",
3107
+ "instructions": "",
3108
+ "required": 0,
3109
+ "conditional_logic": 0,
3110
+ "wrapper": {
3111
+ "width": "",
3112
+ "class": "",
3113
+ "id": ""
3114
+ },
3115
+ "wpml_cf_preferences": 3,
3116
+ "placement": "top",
3117
+ "endpoint": 0,
3118
+ "no_preference": 0,
3119
+ "selected": 0
3120
+ },
3121
+ {
3122
+ "key": "field_68eff85cd2e87",
3123
+ "label": "Grid layout",
3124
+ "name": "grid_layout",
3125
+ "aria-label": "",
3126
+ "type": "clone",
3127
+ "instructions": "",
3128
+ "required": 0,
3129
+ "conditional_logic": 0,
3130
+ "wrapper": {
3131
+ "width": "",
3132
+ "class": "",
3133
+ "id": ""
3134
+ },
3135
+ "wpml_cf_preferences": 3,
3136
+ "clone": [
3137
+ "group_68822860bda9f"
3138
+ ],
3139
+ "display": "seamless",
3140
+ "layout": "block",
3141
+ "prefix_label": 0,
3142
+ "prefix_name": 0,
3143
+ "acfe_seamless_style": 0,
3144
+ "acfe_clone_modal": 0,
3145
+ "acfe_clone_modal_close": 0,
3146
+ "acfe_clone_modal_button": "",
3147
+ "acfe_clone_modal_size": "large"
3148
+ },
3149
+ {
3150
+ "key": "field_68eff85cd2e88",
3151
+ "label": "Spacer Settings",
3152
+ "name": "",
3153
+ "aria-label": "",
3154
+ "type": "tab",
3155
+ "instructions": "",
3156
+ "required": 0,
3157
+ "conditional_logic": 0,
3158
+ "wrapper": {
3159
+ "width": "",
3160
+ "class": "",
3161
+ "id": ""
3162
+ },
3163
+ "wpml_cf_preferences": 3,
3164
+ "placement": "top",
3165
+ "endpoint": 0,
3166
+ "no_preference": 0,
3167
+ "selected": 0
3168
+ },
3169
+ {
3170
+ "key": "field_68eff85cd2e89",
3171
+ "label": "Spacer fields",
3172
+ "name": "spacer_fields",
3173
+ "aria-label": "",
3174
+ "type": "clone",
3175
+ "instructions": "",
3176
+ "required": 0,
3177
+ "conditional_logic": 0,
3178
+ "wrapper": {
3179
+ "width": "",
3180
+ "class": "",
3181
+ "id": ""
3182
+ },
3183
+ "wpml_cf_preferences": 3,
3184
+ "clone": [
3185
+ "group_686b8cb48c708"
3186
+ ],
3187
+ "display": "seamless",
3188
+ "layout": "block",
3189
+ "prefix_label": 0,
3190
+ "prefix_name": 0,
3191
+ "acfe_seamless_style": 0,
3192
+ "acfe_clone_modal": 0,
3193
+ "acfe_clone_modal_close": 0,
3194
+ "acfe_clone_modal_button": "",
3195
+ "acfe_clone_modal_size": "large"
3196
+ }
3197
+ ],
3198
+ "min": "",
3199
+ "max": "",
3200
+ "acfe_flexible_render_template": false,
3201
+ "acfe_flexible_render_style": false,
3202
+ "acfe_flexible_render_script": false,
3203
+ "acfe_flexible_thumbnail": false,
3204
+ "acfe_flexible_settings": false,
3205
+ "acfe_flexible_settings_size": "medium",
3206
+ "acfe_layout_locations": [],
3207
+ "acfe_flexible_modal_edit_size": false,
3208
+ "acfe_flexible_category": false,
3209
+ "acfe_layout_col": "auto",
3210
+ "acfe_layout_allowed_col": false
3094
3211
  }
3095
3212
  },
3096
3213
  "min": "",
@@ -3361,11 +3478,8 @@
3361
3478
  "id": ""
3362
3479
  },
3363
3480
  "wpml_cf_preferences": 3,
3364
- "user_roles": [
3365
- "administrator"
3366
- ],
3367
3481
  "clone": [
3368
- "group_638f4148bc10b"
3482
+ "group_689f66f3e26df"
3369
3483
  ],
3370
3484
  "display": "seamless",
3371
3485
  "layout": "block",
@@ -3426,5 +3540,5 @@
3426
3540
  "acfe_display_title": "",
3427
3541
  "acfe_meta": "",
3428
3542
  "acfe_note": "",
3429
- "modified": 1760445581
3543
+ "modified": 1760557221
3430
3544
  }
@@ -0,0 +1,9 @@
1
+ {% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
2
+ <style>
3
+ .{{blockClassName}}__spacer-container.{{block.id}}{
4
+ {{gridLayoutElement}}
5
+ }
6
+ </style>
7
+ <div class="{{blockClassName}}__spacer-container {{blockClassName}}__info-item {{block.id}}">
8
+ {{ include( 'blocks/spacer-v3.twig', {fields : field, block, blockClassName}, with_context = false) }}
9
+ </div>
@@ -62,7 +62,7 @@
62
62
  {% set gridTemplateColumnsCustom = gridTemplateColumnsCustomDesktop ~ gridTemplateColumnsCustomPortrait ~ gridTemplateColumnsCustomMobile %}
63
63
 
64
64
  {# Grid Auto Rows #}
65
- {% set gridAutoRows = '--grid-auto-rows-desktop: ' ~ fields.grid_layout.grid_auto_rows_desktop|ru ~ ';' %}
65
+ {% set gridAutoRowsDesktop = '--grid-auto-rows-desktop: ' ~ fields.grid_layout.grid_auto_rows_desktop|ru ~ ';' %}
66
66
  {% set gridAutoRowsPortrait = '--grid-auto-rows-portrait: ' ~ fields.grid_layout.grid_auto_rows_portrait|ru ~ ';' %}
67
67
  {% set gridAutoRowsMobile = '--grid-auto-rows-mobile: ' ~ fields.grid_layout.grid_auto_rows_mobile|ru ~ ';' %}
68
68
  {% set gridAutoRows = gridAutoRowsDesktop ~ gridAutoRowsPortrait ~ gridAutoRowsMobile %}
@@ -290,6 +290,7 @@
290
290
  animation-iteration-count: 1 !important;
291
291
  transition-duration: 0.01ms !important;
292
292
  scroll-behavior: auto !important;
293
+ transition: 0.01ms !important;
293
294
  }
294
295
  }
295
296
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.64",
3
+ "version": "2.0.66",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -1,16 +1,22 @@
1
1
  .featured-image-gallery-v3 {
2
2
  display: grid;
3
3
  grid-template: "featured" "other"/1fr;
4
- grid-gap: calc(var(--column-gap) / var(--design-reference) * var(--screen-width));
4
+ grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
5
+ gap: calc(10 / var(--design-reference) * var(--screen-width));
5
6
  }
6
7
  @media screen and (min-width: 768px) {
7
8
  .featured-image-gallery-v3 {
8
9
  grid-template: "featured other"/1fr 1fr;
9
- grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
10
+ grid-gap: calc(20 / var(--design-reference) * var(--screen-width));
10
11
  }
11
12
  }
12
13
  .featured-image-gallery-v3__featured-image-container {
13
14
  perspective: 1000px;
15
+ grid-area: featured;
16
+ align-self: stretch;
17
+ justify-self: stretch;
18
+ place-self: stretch;
19
+ aspect-ratio: 1;
14
20
  }
15
21
  .featured-image-gallery-v3__featured-image-container.changing-image .featured-image-gallery-v3__featured-image-inner-container {
16
22
  transform: rotateY(180deg);
@@ -31,8 +37,7 @@
31
37
  backface-visibility: hidden;
32
38
  }
33
39
  .featured-image-gallery-v3__featured-image-front {
34
- background-color: #bbb;
35
- color: black;
40
+ background-color: var(--bally-blue-dark);
36
41
  }
37
42
  .featured-image-gallery-v3__featured-image-back {
38
43
  display: grid;
@@ -66,9 +71,10 @@
66
71
  justify-self: stretch;
67
72
  place-self: stretch;
68
73
  display: grid;
74
+ aspect-ratio: 1;
69
75
  grid-gap: calc(8 / var(--design-reference) * var(--screen-width));
70
76
  grid-template-columns: repeat(3, 1fr);
71
- grid-auto-rows: 1fr;
77
+ grid-template-rows: repeat(3, 1fr);
72
78
  }
73
79
  @media screen and (min-width: 768px) {
74
80
  .featured-image-gallery-v3__other-images {
@@ -80,19 +86,17 @@
80
86
  overflow: hidden;
81
87
  box-shadow: 0px 0px 8px transparent;
82
88
  transition: box-shadow 0.2s;
83
- }
84
- .featured-image-gallery-v3__image-wrapper:hover {
85
- box-shadow: 0px 0px 8px white;
86
89
  cursor: pointer;
87
90
  }
91
+ .featured-image-gallery-v3__image-wrapper:hover,
92
+ .featured-image-gallery-v3__image-wrapper--active {
93
+ box-shadow: 0px 0px 0px calc(2 / var(--design-reference) * var(--screen-width)) white;
94
+ }
88
95
  .featured-image-gallery-v3__image {
89
96
  -o-object-fit: cover;
90
97
  object-fit: cover;
91
98
  aspect-ratio: 1;
92
99
  width: 100%;
93
100
  height: auto;
94
- transition: transform 0.5s ease-out, filter 0.5s;
95
- }
96
- .featured-image-gallery-v3__image:hover {
97
- filter: contrast(105%);
101
+ transition: transform 0.5s ease-out;
98
102
  }