@sc-360-v2/storefront-cms-library 0.3.60 → 0.3.62

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.
@@ -255,6 +255,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
255
255
  display: flex;
256
256
  align-items: center;
257
257
  gap: 8px;
258
+ cursor: pointer;
258
259
  }
259
260
  }
260
261
 
@@ -565,6 +566,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
565
566
  .product_code {
566
567
  display: flex;
567
568
  align-items: center;
569
+ gap: 6px;
568
570
  align-self: stretch;
569
571
  flex-wrap: wrap;
570
572
 
@@ -0,0 +1,130 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $activeElementSelector: "[data-has-clicked='true']";
5
+ [data-div-type="element"] {
6
+ &[data-element-type="categoryGroups"] {
7
+ // width: var(--_sf-catego-nw-wh);
8
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ // width: calc(
10
+ // 1% *
11
+ // var(
12
+ // --_ctm-mob-catego-ele-nw-wh-vl,
13
+ // var(--_ctm-tab-catego-ele-nw-wh-vl, var(--_ctm-catego-ele-nw-wh-vl)),
14
+ // auto
15
+ // )
16
+ // );
17
+ // width: 100%;
18
+ // height: var(--_ctm-catego-lt-ht);
19
+
20
+ width: calc(
21
+ 1% *
22
+ var(
23
+ --_ctm-mob-catego-ele-nw-wh-vl,
24
+ var(--_ctm-tab-catego-ele-nw-wh-vl, var(--_ctm-catego-ele-nw-wh-vl, auto))
25
+ )
26
+ );
27
+ margin: var(
28
+ --_ctm-mob-catego-lt-mn,
29
+ var(--_ctm-tab-catego-lt-mn, var(--_ctm-catego-lt-mn, var(--_ctm-lt-mn)))
30
+ );
31
+
32
+ &[data-view-state="full"] {
33
+ & > .wrapper {
34
+ grid-template-rows: auto !important;
35
+ }
36
+ }
37
+ & > div {
38
+ &.wrapper {
39
+ width: 100%;
40
+ min-height: prepareMediaVariable(--_ctm-catego-lt-mn-ht);
41
+ padding: var(
42
+ --_ctm-mob-catego-lt-pg,
43
+ var(--_ctm-tab-catego-lt-pg, var(--_ctm-catego-lt-pg))
44
+ );
45
+
46
+ background-color: var(
47
+ --_ctm-mob-catego-dn-bd-cr,
48
+ var(--_ctm-tab-catego-dn-bd-cr, var(--_ctm-catego-dn-bd-cr))
49
+ );
50
+ background-image: var(
51
+ --_ctm-mob-catego-dn-bd-ie,
52
+ var(--_ctm-tab-catego-dn-bd-ie, var(--_ctm-catego-dn-bd-ie))
53
+ );
54
+ background-attachment: var(
55
+ --_ctm-mob-catego-dn-bd-at,
56
+ var(--_ctm-tab-catego-dn-bd-at, var(--_ctm-catego-dn-bd-at))
57
+ );
58
+ background-position: var(
59
+ --_ctm-mob-catego-dn-bd-pn,
60
+ var(--_ctm-tab-catego-dn-bd-pn, var(--_ctm-catego-dn-bd-pn))
61
+ );
62
+ background-repeat: var(
63
+ --_ctm-mob-catego-dn-bd-rt,
64
+ var(--_ctm-tab-catego-dn-bd-rt, var(--_ctm-catego-dn-bd-rt))
65
+ );
66
+ background-size: var(
67
+ --_ctm-mob-catego-dn-bd-se,
68
+ var(--_ctm-tab-catego-dn-bd-se, var(--_ctm-catego-dn-bd-se))
69
+ );
70
+ border-radius: var(
71
+ --_ctm-mob-catego-dn-br-rs,
72
+ var(--_ctm-tab-catego-dn-br-rs, var(--_ctm-catego-dn-br-rs))
73
+ );
74
+ border-color: var(
75
+ --_ctm-mob-catego-dn-br-cr,
76
+ var(--_ctm-tab-catego-dn-br-cr, var(--_ctm-catego-dn-br-cr))
77
+ );
78
+ border-style: var(
79
+ --_ctm-mob-catego-dn-br-se,
80
+ var(--_ctm-tab-catego-dn-br-se, var(--_ctm-catego-dn-br-se))
81
+ );
82
+ border-width: var(
83
+ --_ctm-mob-catego-dn-br-wh,
84
+ var(--_ctm-tab-catego-dn-br-wh, var(--_ctm-catego-dn-br-wh))
85
+ );
86
+ box-shadow: var(
87
+ --_hover-show-shadow,
88
+ var(
89
+ --_sf-hr-bx-sw,
90
+ var(
91
+ --_show-shadow,
92
+ var(
93
+ --_ctm-mob-dn-dt-se-sw-ae,
94
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
95
+ )
96
+ var(
97
+ --_ctm-mob-dn-dt-se-sw-br,
98
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
99
+ )
100
+ var(
101
+ --_ctm-mob-dn-dt-se-sw-sd,
102
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
103
+ )
104
+ var(
105
+ --_ctm-mob-dn-dt-se-sw-cr,
106
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
107
+ )
108
+ )
109
+ )
110
+ );
111
+ }
112
+ }
113
+
114
+ // &[data-view-state="full"] {
115
+ // width: auto;
116
+ // margin: 0;
117
+ // justify-self: stretch !important;
118
+ // align-self: stretch !important;
119
+ // cursor: auto;
120
+ // &:is(#{$activeElementSelector}) {
121
+ // & > div {
122
+ // &[data-div-type="wrapper__layer"] {
123
+ // --_sf-vt-zz: visible;
124
+ // --_sf-op-zz: 1;
125
+ // }
126
+ // }
127
+ // }
128
+ // }
129
+ }
130
+ }
@@ -3636,6 +3636,7 @@
3636
3636
  height: 24px;
3637
3637
  path {
3638
3638
  stroke: #099250;
3639
+ fill: #fff;
3639
3640
  }
3640
3641
  }
3641
3642
  }
@@ -289,6 +289,7 @@
289
289
  height: 24px;
290
290
  path {
291
291
  stroke: #099250;
292
+ fill: #fff;
292
293
  }
293
294
  }
294
295
  }
@@ -310,8 +311,8 @@
310
311
  }
311
312
  }
312
313
  .order-failed {
313
- background-color: var(--_error-100);
314
- border: 1px solid var(--_error-200);
314
+ background-color: #fffbfa;
315
+ border: 1px solid #fda29b;
315
316
  .success__dropdown__icon {
316
317
  svg path {
317
318
  stroke: var(--_error-700) !important;
@@ -782,29 +783,32 @@
782
783
  font-size: 12px;
783
784
  font-weight: 500;
784
785
  line-height: 18px;
786
+ background-color: #eff8ff;
787
+ color: #0040c1;
785
788
 
786
789
  display: inline-flex;
787
790
  align-items: center;
788
- gap: 8px;
791
+ gap: 6px;
789
792
  &::before {
790
793
  content: "";
791
794
  display: inline-block;
792
795
  width: 6px;
793
796
  height: 6px;
794
797
  border-radius: 50%;
798
+ background-color: #0040c1;
795
799
  }
796
- &.success {
797
- background-color: var(--_success-200);
798
- &::before {
799
- background-color: var(--_success-700);
800
- }
801
- }
802
- &.failed {
803
- background-color: var(--_error-100);
804
- &::before {
805
- background-color: var(--_error-700);
806
- }
807
- }
800
+ // &.success {
801
+ // background-color: var(--_success-200);
802
+ // &::before {
803
+ // background-color: var(--_success-700);
804
+ // }
805
+ // }
806
+ // &.failed {
807
+ // background-color: var(--_error-100);
808
+ // &::before {
809
+ // background-color: var(--_error-700);
810
+ // }
811
+ // }
808
812
  }
809
813
 
810
814
  .link-button {
@@ -32,6 +32,7 @@ $prefixList: (
32
32
  buyForWithTabs: buy,
33
33
  buyForTabsContainer: buyFo,
34
34
  spotlight: spo,
35
+ categoryGroups: catego,
35
36
  );
36
37
 
37
38
  $VariableTypes: (
@@ -60,6 +60,10 @@
60
60
  &[data-show-shadow="false"] {
61
61
  --_show-shadow: none;
62
62
  }
63
+ .product_image {
64
+ height: 100%;
65
+ object-fit: contain;
66
+ }
63
67
 
64
68
  .main-image {
65
69
  position: relative;
@@ -148,7 +152,8 @@
148
152
  // font-weight: 600;
149
153
  // color: rgba(75, 69, 70, 1);
150
154
  width: 100%;
151
- height: auto;
155
+ height: 100%;
156
+ object-fit: contain;
152
157
  }
153
158
  .gallery-slider-element {
154
159
  --text-high-contrast-rgb-value: 49, 49, 49;
@@ -1015,6 +1020,12 @@
1015
1020
  height: 100%;
1016
1021
  display: flex;
1017
1022
  flex: 0 0 auto;
1023
+ div {
1024
+ position: relative;
1025
+ overflow: hidden;
1026
+ width: 100%;
1027
+ height: 100%;
1028
+ }
1018
1029
 
1019
1030
  // flex-direction: column;
1020
1031
 
package/dist/table.scss CHANGED
@@ -121,7 +121,7 @@
121
121
  )
122
122
  );
123
123
  border-width: var(
124
- --_sf-hr-br-wh,
124
+ --_sf-hr-br-wt,
125
125
  var(
126
126
  --_ctm-mob-dn-ld-me-bn-br-wh,
127
127
  var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
@@ -267,10 +267,7 @@
267
267
  );
268
268
 
269
269
  .thead__row__divider {
270
- height: var(
271
- --_ctm-mob-lt-mx-dy-se-hr-ht,
272
- var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht))
273
- );
270
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
274
271
 
275
272
  .th__col__divider {
276
273
  padding: var(
@@ -333,10 +330,7 @@
333
330
  var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
334
331
  );
335
332
 
336
- height: var(
337
- --_ctm-mob-lt-mx-dy-se-rw-ht,
338
- var(--_ctm-tab-lt-mx-dy-se-rw-ht, var(--_ctm-lt-mx-dy-se-rw-ht))
339
- );
333
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
340
334
 
341
335
  .td__col__divider {
342
336
  padding: var(
@@ -72,7 +72,8 @@ export declare enum CMSToolIdTypes {
72
72
  TEXTELEMENTDOBLECLICK = "data-cms-tt-ee-dbl-clkd",
73
73
  menuWrapperV2 = "cms-menu-v2-wrapper",
74
74
  menuItemWrapper = "cms-menu-item-wrapper",
75
- animation = "flex-animation-element"
75
+ animation = "flex-animation-element",
76
+ categoryGroupsWrapper = "cms-category-groups-wrapper"
76
77
  }
77
78
  export declare enum CMSElementSelectors {
78
79
  iframeSelector = "iframe[data-title='iframe__playground']",
@@ -121,12 +122,12 @@ export declare enum CMSElementSelectors {
121
122
  cmsElementFullView = "div[data-cms-tool='cms-element-full-view']",
122
123
  productElement = "div[data-element-type='product']",
123
124
  productDetailsElement = "div[data-element-type='productDetails']",
125
+ categoryGroupsElement = "div[data-element-type='categoryGroups']",
124
126
  categoryDetailsElement = "div[data-element-type='categoryDetails']",
125
127
  categoryElement = "div[data-element-type='category']",
126
128
  brandElement = "div[data-element-type='brand']",
127
129
  subCategoryElement = "div[data-element-type='subCategory']",
128
130
  categoryWidgetElement = "div[data-element-type='categoryWidget']",
129
- tabsElement = "div[data-element-type='tabs']",
130
131
  tabsV2Element = "div[data-element-type='tabs-v2']",
131
132
  buyForWithTabsElement = "div[data-element-type='buyForWithTabs']",
132
133
  imageHotspot = "div[data-element-type='imageHotspot']",
@@ -337,6 +338,7 @@ export declare const CMSElementsListEnum: {
337
338
  WAREHOUSE_SELECTOR: string;
338
339
  USER_GROUP_SELECTOR: string;
339
340
  SHIPPING_PAYMENT: string;
341
+ CATEGORY_GROUPS: string;
340
342
  };
341
343
  export declare enum CMSResponsiveModeEnums {
342
344
  DESKTOP = "desktop",
package/dist/widget.scss CHANGED
@@ -122,3 +122,4 @@
122
122
  @use "./theme-classes.scss";
123
123
  @use "./shipping-payments.scss";
124
124
  @use "./emtpy-templates.scss";
125
+ @use "./category-groups-element.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.60",
3
+ "version": "0.3.62",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {