@sc-360-v2/storefront-cms-library 0.4.16 → 0.4.18

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.
@@ -29,6 +29,30 @@ $activeElementSelector: "[data-has-clicked='true']";
29
29
  var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
30
30
  );
31
31
 
32
+ &[data-show-border="true"] {
33
+ border-color: var(
34
+ --_ctm-mob-con-dn-br-cr,
35
+ var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
36
+ );
37
+ border-style: var(
38
+ --_ctm-mob-con-dn-br-se,
39
+ var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
40
+ );
41
+ border-width: var(
42
+ --_ctm-mob-con-dn-br-wh,
43
+ var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
44
+ );
45
+ }
46
+ &[data-show-shadow="true"] {
47
+ // box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-con-dn-sw-ae, var(--_ctm-dn-sw-ae)))
48
+ // var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-con-dn-sw-br, var(--_ctm-dn-sw-br)))
49
+ // var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-con-dn-sw-sd, var(--_ctm-dn-sw-sd)))
50
+ // var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-con-dn-sw-cr, var(--_ctm-dn-sw-cr)));
51
+ box-shadow: prepareMediaVariable(--_ctm-con-dn-sw-ae, 0 0)
52
+ prepareMediaVariable(--_ctm-con-dn-sw-br, 0) prepareMediaVariable(--_ctm-con-dn-sw-sd, 0)
53
+ prepareMediaVariable(--_ctm-con-dn-sw-cr, transparent);
54
+ }
55
+
32
56
  &[data-view-state="full"] {
33
57
  & > .wrapper {
34
58
  grid-template-rows: auto !important;
@@ -68,43 +92,6 @@ $activeElementSelector: "[data-has-clicked='true']";
68
92
  --_ctm-mob-con-dn-br-rs,
69
93
  var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
70
94
  );
71
- border-color: var(
72
- --_ctm-mob-con-dn-br-cr,
73
- var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
74
- );
75
- border-style: var(
76
- --_ctm-mob-con-dn-br-se,
77
- var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
78
- );
79
- border-width: var(
80
- --_ctm-mob-con-dn-br-wh,
81
- var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
82
- );
83
- box-shadow: var(
84
- --_hover-show-shadow,
85
- var(
86
- --_sf-hr-bx-sw,
87
- var(
88
- --_show-shadow,
89
- var(
90
- --_ctm-mob-dn-dt-se-sw-ae,
91
- var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
92
- )
93
- var(
94
- --_ctm-mob-dn-dt-se-sw-br,
95
- var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
96
- )
97
- var(
98
- --_ctm-mob-dn-dt-se-sw-sd,
99
- var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
100
- )
101
- var(
102
- --_ctm-mob-dn-dt-se-sw-cr,
103
- var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
104
- )
105
- )
106
- )
107
- );
108
95
  }
109
96
  }
110
97
 
@@ -50,7 +50,6 @@
50
50
  var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
51
51
  );
52
52
 
53
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
54
53
  // gap: var(
55
54
  // --_ctm-mob-lt-it-ad-mn-qy-sg,
56
55
  // var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
@@ -385,7 +384,7 @@
385
384
  //Dropdown
386
385
  .value__selected__new {
387
386
  width: 100%;
388
- padding: 8px 12px;
387
+ // padding: 8px 12px;
389
388
  // text-align: left;
390
389
  font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
391
390
  font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
@@ -425,24 +424,44 @@
425
424
  &.open .list {
426
425
  display: flex;
427
426
  }
427
+ .dropdown__button__wrapper {
428
+ width: 100%;
429
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
430
+ .option_select {
431
+ padding: unset;
432
+ }
433
+ }
434
+
428
435
  .est__dropdown__button {
429
436
  display: flex;
430
437
  align-items: center;
431
438
  width: 100%;
439
+ position: relative;
432
440
  }
433
441
 
434
442
  .est__dropdown__icon {
435
443
  position: absolute;
436
- // top: 10px;
437
444
  right: 5px;
438
- transition: all 200ms ease-in;
445
+ // transition: all 200ms ease-in;
439
446
  &.open {
440
447
  transform: rotate(180deg);
441
- transform: all 200ms ease-in;
442
448
  }
443
449
  &.close {
444
450
  transform: rotate(0deg);
445
- transform: all 200ms ease-in;
451
+ }
452
+ width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
453
+ height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
454
+
455
+ svg {
456
+ width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
457
+ height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
458
+
459
+ path {
460
+ stroke: var(
461
+ --_ctm-mob-dn-te-in-in-c1,
462
+ var(--_ctm-tab-dn-te-in-cr, var(--_ctm-dn-te-in-in-c1))
463
+ );
464
+ }
446
465
  }
447
466
  }
448
467
 
@@ -18,6 +18,85 @@
18
18
  --_show-border-im-se: none;
19
19
  }
20
20
 
21
+ &[data-show-divider="true"] {
22
+ .store__container {
23
+ .stack {
24
+ .vertical {
25
+ .item:not(:last-child)::after {
26
+ content: "";
27
+ position: absolute;
28
+ left: 0;
29
+ right: 0;
30
+ bottom: calc(
31
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
32
+ );
33
+ height: var(
34
+ --_ctm-mob-dn-im-se-dr-wt,
35
+ var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))
36
+ );
37
+ background-color: var(
38
+ --_ctm-mob-dn-im-se-dr-cr,
39
+ var(--_ctm-tab-dn-im-se-dr-cr, var(--_ctm-dn-im-se-dr-cr))
40
+ );
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+
47
+ &[data-widget-show-border="true"] {
48
+ .store__container {
49
+ border-color: var(
50
+ --_ctm-mob-dn-wt-se-br-cr,
51
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
52
+ );
53
+
54
+ border-style: var(
55
+ --_ctm-mob-dn-wt-se-br-se,
56
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
57
+ );
58
+
59
+ border-width: var(
60
+ --_ctm-mob-dn-wt-se-br-wh,
61
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
62
+ );
63
+ }
64
+ }
65
+
66
+ &[data-widget-show-shadow="true"] {
67
+ .store__container {
68
+ box-shadow: var(
69
+ --_ctm-mob-dn-wt-se-sw-ae,
70
+ var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))
71
+ )
72
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
73
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
74
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)));
75
+ }
76
+ }
77
+
78
+ &[data-button-position="flex-start"] {
79
+ .store__container {
80
+ .search__with__btn {
81
+ justify-content: flex-start;
82
+ }
83
+ }
84
+ }
85
+ &[data-button-position="center"] {
86
+ .store__container {
87
+ .search__with__btn {
88
+ justify-content: center;
89
+ }
90
+ }
91
+ }
92
+ &[data-button-position="flex-end"] {
93
+ .store__container {
94
+ .search__with__btn {
95
+ justify-content: flex-end;
96
+ }
97
+ }
98
+ }
99
+
21
100
  .text-element {
22
101
  background: #6d96e4;
23
102
  padding: 10px;
@@ -567,6 +646,7 @@
567
646
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
568
647
 
569
648
  .item {
649
+ position: relative;
570
650
  padding: var(
571
651
  --_ctm-mob-dn-im-se-vl-pg,
572
652
  var(--_ctm-tab-dn-im-se-vl-pg, var(--_ctm-dn-im-se-vl-pg))
@@ -795,6 +875,7 @@
795
875
  .item {
796
876
  display: flex;
797
877
  flex-direction: column;
878
+ position: relative;
798
879
  width: 100%;
799
880
  padding: var(
800
881
  --_ctm-mob-dn-im-se-vl-pg,
@@ -3,7 +3,8 @@
3
3
  @use "./functions.scss" as *;
4
4
 
5
5
  [data-div-type="element"] {
6
- &[data-element-type="storeLocations"] {
6
+ &[data-element-type="storeLocations"],
7
+ &[data-element-type="pickupLocations"] {
7
8
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
8
9
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
9
10
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -126,31 +127,25 @@
126
127
  }
127
128
  }
128
129
 
129
- &[data-item-show-border="true"] {
130
+ &[data-show-divider="true"] {
130
131
  .store__container {
131
132
  .stack {
132
133
  .vertical {
133
- .item {
134
- border-color: var(
135
- --_show-border-im-se,
136
- var(
137
- --_ctm-mob-dn-im-se-br-cr,
138
- var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
139
- )
134
+ .item:not(:last-child)::after {
135
+ content: "";
136
+ position: absolute;
137
+ left: 0;
138
+ right: 0;
139
+ bottom: calc(
140
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
140
141
  );
141
- border-style: var(
142
- --_show-border-im-se,
143
- var(
144
- --_ctm-mob-dn-im-se-br-se,
145
- var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
146
- )
142
+ height: var(
143
+ --_ctm-mob-dn-im-se-dr-wt,
144
+ var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))
147
145
  );
148
- border-width: var(
149
- --_show-border-im-se,
150
- var(
151
- --_ctm-mob-dn-im-se-br-wh,
152
- var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
153
- )
146
+ background-color: var(
147
+ --_ctm-mob-dn-im-se-dr-cr,
148
+ var(--_ctm-tab-dn-im-se-dr-cr, var(--_ctm-dn-im-se-dr-cr))
154
149
  );
155
150
  }
156
151
  }
@@ -183,6 +178,59 @@
183
178
  }
184
179
  }
185
180
 
181
+ &[data-widget-show-border="true"] {
182
+ .store__container {
183
+ border-color: var(
184
+ --_ctm-mob-dn-wt-se-br-cr,
185
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
186
+ );
187
+
188
+ border-style: var(
189
+ --_ctm-mob-dn-wt-se-br-se,
190
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
191
+ );
192
+
193
+ border-width: var(
194
+ --_ctm-mob-dn-wt-se-br-wh,
195
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
196
+ );
197
+ }
198
+ }
199
+
200
+ &[data-widget-show-shadow="true"] {
201
+ .store__container {
202
+ box-shadow: var(
203
+ --_ctm-mob-dn-wt-se-sw-ae,
204
+ var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))
205
+ )
206
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
207
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
208
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)));
209
+ }
210
+ }
211
+
212
+ &[data-button-position="flex-start"] {
213
+ .store__container {
214
+ .search__with__btn {
215
+ justify-content: flex-start;
216
+ }
217
+ }
218
+ }
219
+ &[data-button-position="center"] {
220
+ .store__container {
221
+ .search__with__btn {
222
+ justify-content: center;
223
+ }
224
+ }
225
+ }
226
+ &[data-button-position="flex-end"] {
227
+ .store__container {
228
+ .search__with__btn {
229
+ justify-content: flex-end;
230
+ }
231
+ }
232
+ }
233
+
186
234
  .text-element {
187
235
  background: #6d96e4;
188
236
  padding: 10px;
@@ -200,35 +248,13 @@
200
248
  var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
201
249
  );
202
250
 
203
- border-color: var(
204
- --_ctm-mob-dn-wt-se-br-cr,
205
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
206
- );
207
-
208
- border-style: var(
209
- --_ctm-mob-dn-wt-se-br-se,
210
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
211
- );
212
-
213
- border-width: var(
214
- --_ctm-mob-dn-wt-se-br-wh,
215
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
216
- );
217
-
218
251
  border-radius: var(
219
252
  --_ctm-mob-dn-wt-se-br-rs,
220
253
  var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
221
254
  );
222
255
 
223
- box-shadow: var(
224
- --_show-shadow,
225
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
226
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
227
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
228
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
229
- );
230
-
231
256
  .search__with__btn {
257
+ width: 100%;
232
258
  display: flex;
233
259
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
234
260
 
@@ -952,6 +978,7 @@
952
978
 
953
979
  .item {
954
980
  display: flex;
981
+ position: relative;
955
982
  flex-direction: column;
956
983
  width: 100%;
957
984
  padding: var(
@@ -29,6 +29,10 @@ export declare const menuConrolsInterface: {
29
29
  property: string;
30
30
  propertyType: CMSElementEditTypes;
31
31
  };
32
+ buttonPosition: {
33
+ value: string;
34
+ propertyType: CMSElementEditTypes;
35
+ };
32
36
  menuType: {
33
37
  value: string;
34
38
  propertyType: CMSElementEditTypes;
@@ -102,7 +106,8 @@ export declare enum selfEnums {
102
106
  OPTION_STYLE = "optionStyle",
103
107
  HOVER_STATE = "hover",
104
108
  SELECTED_STATE = "selected",
105
- DEFAULT_STATE = "default"
109
+ DEFAULT_STATE = "default",
110
+ TOGGLE_ICON = "toggleIcon"
106
111
  }
107
112
  export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
108
113
  export {};
@@ -10,6 +10,7 @@ interface selfLayoutInterface {
10
10
  displayResults: CMSIBCommonInterface;
11
11
  noOfItemToShow: CMSIBCommonInterface;
12
12
  searchPlaceholderText: CMSIBCommonInterface;
13
+ buttonPosition: CMSIBCommonInterface;
13
14
  }
14
15
  interface selfDesignInterface {
15
16
  selectorKey: string;
@@ -121,8 +121,9 @@ interface selfDesignInterface {
121
121
  selectorKey: string;
122
122
  [key: string]: any;
123
123
  };
124
+ [key: string]: any;
124
125
  }
125
- export declare enum UOMSelectorKeysEnum {
126
+ export declare enum SelectorKeysEnum {
126
127
  LAYOUT = "layout",
127
128
  CONTENT = "content",
128
129
  DESIGN = "design",