@sc-360-v2/storefront-cms-library 0.3.83 → 0.3.85

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.
@@ -192,6 +192,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
192
192
  pointer-events: none;
193
193
  }
194
194
  }
195
+ .disabled {
196
+ opacity: 0.5;
197
+ pointer-events: none;
198
+ }
195
199
  }
196
200
  }
197
201
  }
@@ -6,249 +6,6 @@
6
6
  width: 100% !important;
7
7
 
8
8
  & > .wrapper {
9
- .template_wrapper {
10
- width: 100%;
11
- .template_section {
12
- width: 100%;
13
- display: flex;
14
- justify-content: space-between;
15
- align-items: center;
16
- margin-bottom: 24px;
17
- h2 {
18
- font-size: 24px;
19
- }
20
- .back_to_cart {
21
- color: var(--_primary-400);
22
- &:hover {
23
- text-decoration: underline;
24
- }
25
- }
26
- }
27
- .template_body {
28
- display: flex;
29
- gap: 60px;
30
- justify-content: space-between;
31
- .template_col_left {
32
- width: 100%;
33
- height: 400px;
34
- background-color: var(--_base-white);
35
- .wishlist-modal {
36
- display: flex;
37
- flex-direction: column;
38
- width: 100%;
39
-
40
- .wishlist-modal-section {
41
- // padding: 16px 24px 24px 24px;
42
- gap: 16px !important;
43
- overflow-x: hidden;
44
- display: flex;
45
- flex-direction: column;
46
-
47
- .form-group {
48
- display: flex;
49
- flex-direction: column;
50
- gap: 8px;
51
- max-width: 500px;
52
-
53
- label {
54
- display: block;
55
- font-size: 0.875rem;
56
- font-weight: 500;
57
- color: #374151;
58
- }
59
-
60
- .primary_text_label {
61
- font-weight: 700;
62
- }
63
-
64
- input[type="radio"],
65
- textarea {
66
- width: 100%;
67
- padding: 0.5rem 0.75rem;
68
- font-size: 0.875rem;
69
- border: 1px solid #d1d5db;
70
- border-radius: 0.375rem;
71
- outline: none;
72
- box-sizing: border-box;
73
- transition: all 0.2s;
74
-
75
- &:focus {
76
- border-color: #2563eb;
77
- // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
78
- }
79
-
80
- &[type="radio"] {
81
- width: fit-content;
82
- height: fit-content;
83
- }
84
- }
85
-
86
- .radio-group {
87
- display: flex;
88
- flex-direction: column;
89
- gap: 12px;
90
- font-weight: normal;
91
-
92
- .radio-label {
93
- display: inline-flex;
94
- align-items: center;
95
- gap: 8px;
96
- cursor: pointer;
97
- width: fit-content;
98
-
99
- span {
100
- color: var(--_gray-500);
101
-
102
- span {
103
- color: var(--_gray-900);
104
- font-weight: 500;
105
- }
106
- }
107
- }
108
- }
109
-
110
- textarea {
111
- min-height: 100px;
112
- resize: vertical;
113
- }
114
-
115
- .global-can-edit {
116
- display: flex;
117
- flex-direction: column;
118
- align-items: flex-start;
119
- margin-left: 20px;
120
- margin-top: 6px;
121
- gap: 6px;
122
-
123
- input[type="checkbox"] {
124
- margin: 0;
125
- width: 16px;
126
- height: 16px;
127
- cursor: pointer;
128
- }
129
-
130
- span {
131
- font-size: 0.875rem;
132
- font-weight: 600;
133
- color: var(--_gray-900);
134
- margin-left: -15px;
135
- }
136
- }
137
- }
138
- input[type="text"] {
139
- height: 40px;
140
- border: 1px solid var(--_gray-300);
141
- border-radius: 6px;
142
- padding-inline: 16px;
143
- }
144
- }
145
- }
146
- .action-buttons {
147
- display: flex;
148
- gap: 1rem;
149
- align-items: center;
150
- // justify-content: flex-end;
151
- flex: 1 1 auto;
152
- // padding: 16px 24px;
153
- // border-top: 1px solid var(--_gray-200);
154
- gap: 12px;
155
- margin-block: 24px;
156
- padding-bottom: 24px;
157
- button {
158
- padding: 12px 16px;
159
- border-radius: 6px;
160
- }
161
- .create-btn {
162
- display: flex;
163
- justify-content: center;
164
- align-items: center;
165
- gap: 8px;
166
- background-color: var(--_primary-400);
167
- color: var(--_base-white);
168
- &.disabled {
169
- opacity: 0.5;
170
- pointer-events: none;
171
- }
172
- .loader {
173
- animation: rotate-icon 1s linear infinite;
174
- display: inline-block;
175
- transform-origin: center;
176
-
177
- svg path {
178
- stroke: var(--_primary-200);
179
- }
180
- }
181
-
182
- &:hover {
183
- background-color: var(--_primary-500);
184
- }
185
- }
186
- .discard-btn {
187
- &:hover {
188
- background-color: var(--_gray-50);
189
- color: var(--_gray-900);
190
- }
191
- }
192
- }
193
- }
194
- .template_col_right {
195
- width: 400px;
196
- height: fit-content;
197
- background-color: var(--_base-white);
198
- .template_summary_wrapper {
199
- border: 1px solid var(--_gray-300);
200
- border-radius: 4px;
201
- width: 350px;
202
- .template_summary_header {
203
- padding: 12px 16px;
204
- border-bottom: 1px solid var(--_gray-300);
205
- font-size: 16px;
206
- font-weight: 600;
207
- background-color: #f5f5f5;
208
- }
209
- .template_summary_body {
210
- .template_summary_items {
211
- padding: 16px;
212
- display: flex;
213
- flex-direction: column;
214
- gap: 8px;
215
- .template_summary_item {
216
- display: flex;
217
- justify-content: space-between;
218
- gap: 16px;
219
- .template_summary_item_details {
220
- display: flex;
221
- gap: 16px;
222
- .template_summary_item_pro_info {
223
- h5 {
224
- font-size: 16px;
225
- font-weight: 600;
226
- color: var(--_gray-900);
227
- }
228
- .template_summary_item_pro_qty {
229
- color: var(--_gray-500);
230
- font-size: 12px;
231
- span {
232
- display: block;
233
- }
234
- .qty {
235
- color: var(--_gray-900);
236
- }
237
- }
238
- }
239
- }
240
- .template_summary_item_detail_price {
241
- font-size: 16px;
242
- font-weight: 600;
243
- color: var(--_gray-900);
244
- }
245
- }
246
- }
247
- }
248
- }
249
- }
250
- }
251
- }
252
9
  }
253
10
  &[data-show-shadow="false"] {
254
11
  --_show-shadow: none;
@@ -295,4 +52,273 @@
295
52
  // );
296
53
  // }
297
54
  }
55
+
56
+ .template_wrapper {
57
+ width: 100%;
58
+
59
+ .template_section {
60
+ width: 100%;
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ margin-bottom: 24px;
65
+
66
+ h2 {
67
+ font-size: 24px;
68
+ }
69
+
70
+ .back_to_cart {
71
+ color: var(--_primary-400);
72
+
73
+ &:hover {
74
+ text-decoration: underline;
75
+ }
76
+ }
77
+ }
78
+
79
+ .template_body {
80
+ display: flex;
81
+ gap: 60px;
82
+ justify-content: space-between;
83
+
84
+ .template_col_left {
85
+ width: 100%;
86
+ height: 400px;
87
+ background-color: var(--_base-white);
88
+
89
+ .wishlist-modal {
90
+ display: flex;
91
+ flex-direction: column;
92
+ width: 100%;
93
+
94
+ .wishlist-modal-section {
95
+ // padding: 16px 24px 24px 24px;
96
+ gap: 16px !important;
97
+ overflow-x: hidden;
98
+ display: flex;
99
+ flex-direction: column;
100
+
101
+ .form-group {
102
+ display: flex;
103
+ flex-direction: column;
104
+ gap: 8px;
105
+ max-width: 500px;
106
+
107
+ label {
108
+ display: block;
109
+ font-size: 0.875rem;
110
+ font-weight: 500;
111
+ color: #374151;
112
+ }
113
+
114
+ .primary_text_label {
115
+ font-weight: 700;
116
+ }
117
+
118
+ input[type="radio"],
119
+ textarea {
120
+ width: 100%;
121
+ padding: 0.5rem 0.75rem;
122
+ font-size: 0.875rem;
123
+ border: 1px solid #d1d5db;
124
+ border-radius: 0.375rem;
125
+ outline: none;
126
+ box-sizing: border-box;
127
+ transition: all 0.2s;
128
+
129
+ &:focus {
130
+ border-color: #2563eb;
131
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
132
+ }
133
+
134
+ &[type="radio"] {
135
+ width: fit-content;
136
+ height: fit-content;
137
+ }
138
+ }
139
+
140
+ .radio-group {
141
+ display: flex;
142
+ flex-direction: column;
143
+ gap: 12px;
144
+ font-weight: normal;
145
+
146
+ .radio-label {
147
+ display: inline-flex;
148
+ align-items: center;
149
+ gap: 8px;
150
+ cursor: pointer;
151
+ width: fit-content;
152
+
153
+ span {
154
+ color: var(--_gray-500);
155
+
156
+ span {
157
+ color: var(--_gray-900);
158
+ font-weight: 500;
159
+ }
160
+ }
161
+ }
162
+ }
163
+
164
+ textarea {
165
+ min-height: 100px;
166
+ resize: vertical;
167
+ }
168
+
169
+ .global-can-edit {
170
+ display: flex;
171
+ flex-direction: column;
172
+ align-items: flex-start;
173
+ margin-left: 20px;
174
+ margin-top: 6px;
175
+ gap: 6px;
176
+
177
+ input[type="checkbox"] {
178
+ margin: 0;
179
+ width: 16px;
180
+ height: 16px;
181
+ cursor: pointer;
182
+ }
183
+
184
+ span {
185
+ font-size: 0.875rem;
186
+ font-weight: 600;
187
+ color: var(--_gray-900);
188
+ margin-left: -15px;
189
+ }
190
+ }
191
+ }
192
+
193
+ input[type="text"] {
194
+ height: 40px;
195
+ border: 1px solid var(--_gray-300);
196
+ border-radius: 6px;
197
+ padding-inline: 16px;
198
+ }
199
+ }
200
+ }
201
+
202
+ .action-buttons {
203
+ display: flex;
204
+ gap: 1rem;
205
+ align-items: center;
206
+ // justify-content: flex-end;
207
+ flex: 1 1 auto;
208
+ // padding: 16px 24px;
209
+ // border-top: 1px solid var(--_gray-200);
210
+ gap: 12px;
211
+ margin-block: 24px;
212
+ padding-bottom: 24px;
213
+
214
+ button {
215
+ padding: 12px 16px;
216
+ border-radius: 6px;
217
+ }
218
+
219
+ .create-btn {
220
+ display: flex;
221
+ justify-content: center;
222
+ align-items: center;
223
+ gap: 8px;
224
+ background-color: var(--_primary-400);
225
+ color: var(--_base-white);
226
+
227
+ &.disabled {
228
+ opacity: 0.5;
229
+ pointer-events: none;
230
+ }
231
+
232
+ .loader {
233
+ animation: rotate-icon 1s linear infinite;
234
+ display: inline-block;
235
+ transform-origin: center;
236
+
237
+ svg path {
238
+ stroke: var(--_primary-200);
239
+ }
240
+ }
241
+
242
+ &:hover {
243
+ background-color: var(--_primary-500);
244
+ }
245
+ }
246
+
247
+ .discard-btn {
248
+ &:hover {
249
+ background-color: var(--_gray-50);
250
+ color: var(--_gray-900);
251
+ }
252
+ }
253
+ }
254
+ }
255
+
256
+ .template_col_right {
257
+ width: 400px;
258
+ height: fit-content;
259
+ background-color: var(--_base-white);
260
+
261
+ .template_summary_wrapper {
262
+ border: 1px solid var(--_gray-300);
263
+ border-radius: 4px;
264
+ width: 350px;
265
+
266
+ .template_summary_header {
267
+ padding: 12px 16px;
268
+ border-bottom: 1px solid var(--_gray-300);
269
+ font-size: 16px;
270
+ font-weight: 600;
271
+ background-color: #f5f5f5;
272
+ }
273
+
274
+ .template_summary_body {
275
+ .template_summary_items {
276
+ padding: 16px;
277
+ display: flex;
278
+ flex-direction: column;
279
+ gap: 8px;
280
+
281
+ .template_summary_item {
282
+ display: flex;
283
+ justify-content: space-between;
284
+ gap: 16px;
285
+
286
+ .template_summary_item_details {
287
+ display: flex;
288
+ gap: 16px;
289
+
290
+ .template_summary_item_pro_info {
291
+ h5 {
292
+ font-size: 16px;
293
+ font-weight: 600;
294
+ color: var(--_gray-900);
295
+ }
296
+
297
+ .template_summary_item_pro_qty {
298
+ color: var(--_gray-500);
299
+ font-size: 12px;
300
+
301
+ span {
302
+ display: block;
303
+ }
304
+
305
+ .qty {
306
+ color: var(--_gray-900);
307
+ }
308
+ }
309
+ }
310
+ }
311
+
312
+ .template_summary_item_detail_price {
313
+ font-size: 16px;
314
+ font-weight: 600;
315
+ color: var(--_gray-900);
316
+ }
317
+ }
318
+ }
319
+ }
320
+ }
321
+ }
322
+ }
323
+ }
298
324
  }
@@ -0,0 +1,57 @@
1
+ // processing payment screen
2
+ .pmnt_process_wrapper {
3
+ display: flex;
4
+ justify-content: center;
5
+ align-items: center;
6
+ height: 100vh;
7
+ width: 100%;
8
+ background-color: var(--_gray-100);
9
+ .process_loader_content {
10
+ display: flex;
11
+ flex-direction: column;
12
+ /* gap: 8px; */
13
+ justify-content: center;
14
+ align-items: center;
15
+ .processing_loader {
16
+ position: relative;
17
+ width: 64px;
18
+ height: 64px;
19
+ margin-bottom: 24px;
20
+
21
+ &::before,
22
+ &::after {
23
+ content: "";
24
+ position: absolute;
25
+ border-radius: 50%;
26
+ }
27
+
28
+ // Background stroke
29
+ &::before {
30
+ width: 100%;
31
+ height: 100%;
32
+ border: 6px solid #e0e0e0;
33
+ }
34
+
35
+ // Animated stroke
36
+ &::after {
37
+ width: 100%;
38
+ height: 100%;
39
+ border: 6px solid transparent;
40
+ border-top-color: #243dc6;
41
+ animation: processing_loader_spin 1s linear infinite;
42
+ }
43
+ p {
44
+ margin-top: 8px;
45
+ }
46
+ }
47
+
48
+ @keyframes processing_loader_spin {
49
+ 0% {
50
+ transform: rotate(0deg);
51
+ }
52
+ 100% {
53
+ transform: rotate(360deg);
54
+ }
55
+ }
56
+ }
57
+ }
@@ -38,8 +38,9 @@ export declare enum SelectorKeysEnum {
38
38
  PAGINATION = "pagination",
39
39
  SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButton",
40
40
  HOVER_STATE = "hover",
41
- DEFAULT_STATE = "default",
42
- SELECTED_STATE = "selectedState"
41
+ DEFAULT_STATE = "defaultState",
42
+ SELECTED_STATE = "selectedState",
43
+ SCROLL_BAR = "scrollBar"
43
44
  }
44
45
  export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
45
46
  export {};
@@ -58,11 +58,6 @@ export declare const getDefaultData: () => {
58
58
  property: string;
59
59
  propertyType: CMSElementEditTypes;
60
60
  };
61
- overflowItems: {
62
- value: string;
63
- property: string;
64
- propertyType: CMSElementEditTypes;
65
- };
66
61
  numOfItemsToLoad: {
67
62
  value: string;
68
63
  property: string;