@sc-360-v2/storefront-cms-library 0.3.82 → 0.3.84

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.
Files changed (17) hide show
  1. package/dist/allocations.scss +221 -148
  2. package/dist/builder.js +1 -1
  3. package/dist/bundle.scss +20 -3
  4. package/dist/cart-products-sidebar.scss +2 -1
  5. package/dist/cartDropdownOverlay.scss +5 -1
  6. package/dist/coupon.scss +238 -21
  7. package/dist/currency.scss +31 -0
  8. package/dist/dropdownTemplate.scss +24 -2
  9. package/dist/modal.scss +64 -3
  10. package/dist/my-templates.scss +244 -243
  11. package/dist/order-processing.scss +57 -0
  12. package/dist/repeater.scss +26 -0
  13. package/dist/request-for-quotes.scss +230 -0
  14. package/dist/skeleton.scss +32 -0
  15. package/dist/types/builder/tools/element-edit/coupon.d.ts +247 -4248
  16. package/dist/uom-selector.scss +8 -3
  17. package/package.json +1 -1
package/dist/my-templates.scss CHANGED
@@ -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,248 @@
295
52
  // );
296
53
  // }
297
54
  }
55
+
56
+ .template_wrapper {
57
+ width: 100%;
58
+ .template_section {
59
+ width: 100%;
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ margin-bottom: 24px;
64
+ h2 {
65
+ font-size: 24px;
66
+ }
67
+ .back_to_cart {
68
+ color: var(--_primary-400);
69
+ &:hover {
70
+ text-decoration: underline;
71
+ }
72
+ }
73
+ }
74
+ .template_body {
75
+ display: flex;
76
+ gap: 60px;
77
+ justify-content: space-between;
78
+ .template_col_left {
79
+ width: 100%;
80
+ height: 400px;
81
+ background-color: var(--_base-white);
82
+ .wishlist-modal {
83
+ display: flex;
84
+ flex-direction: column;
85
+ width: 100%;
86
+
87
+ .wishlist-modal-section {
88
+ // padding: 16px 24px 24px 24px;
89
+ gap: 16px !important;
90
+ overflow-x: hidden;
91
+ display: flex;
92
+ flex-direction: column;
93
+
94
+ .form-group {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 8px;
98
+ max-width: 500px;
99
+
100
+ label {
101
+ display: block;
102
+ font-size: 0.875rem;
103
+ font-weight: 500;
104
+ color: #374151;
105
+ }
106
+
107
+ .primary_text_label {
108
+ font-weight: 700;
109
+ }
110
+
111
+ input[type="radio"],
112
+ textarea {
113
+ width: 100%;
114
+ padding: 0.5rem 0.75rem;
115
+ font-size: 0.875rem;
116
+ border: 1px solid #d1d5db;
117
+ border-radius: 0.375rem;
118
+ outline: none;
119
+ box-sizing: border-box;
120
+ transition: all 0.2s;
121
+
122
+ &:focus {
123
+ border-color: #2563eb;
124
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
125
+ }
126
+
127
+ &[type="radio"] {
128
+ width: fit-content;
129
+ height: fit-content;
130
+ }
131
+ }
132
+
133
+ .radio-group {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 12px;
137
+ font-weight: normal;
138
+
139
+ .radio-label {
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ cursor: pointer;
144
+ width: fit-content;
145
+
146
+ span {
147
+ color: var(--_gray-500);
148
+
149
+ span {
150
+ color: var(--_gray-900);
151
+ font-weight: 500;
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ textarea {
158
+ min-height: 100px;
159
+ resize: vertical;
160
+ }
161
+
162
+ .global-can-edit {
163
+ display: flex;
164
+ flex-direction: column;
165
+ align-items: flex-start;
166
+ margin-left: 20px;
167
+ margin-top: 6px;
168
+ gap: 6px;
169
+
170
+ input[type="checkbox"] {
171
+ margin: 0;
172
+ width: 16px;
173
+ height: 16px;
174
+ cursor: pointer;
175
+ }
176
+
177
+ span {
178
+ font-size: 0.875rem;
179
+ font-weight: 600;
180
+ color: var(--_gray-900);
181
+ margin-left: -15px;
182
+ }
183
+ }
184
+ }
185
+ input[type="text"] {
186
+ height: 40px;
187
+ border: 1px solid var(--_gray-300);
188
+ border-radius: 6px;
189
+ padding-inline: 16px;
190
+ }
191
+ }
192
+ }
193
+ .action-buttons {
194
+ display: flex;
195
+ gap: 1rem;
196
+ align-items: center;
197
+ // justify-content: flex-end;
198
+ flex: 1 1 auto;
199
+ // padding: 16px 24px;
200
+ // border-top: 1px solid var(--_gray-200);
201
+ gap: 12px;
202
+ margin-block: 24px;
203
+ padding-bottom: 24px;
204
+ button {
205
+ padding: 12px 16px;
206
+ border-radius: 6px;
207
+ }
208
+ .create-btn {
209
+ display: flex;
210
+ justify-content: center;
211
+ align-items: center;
212
+ gap: 8px;
213
+ background-color: var(--_primary-400);
214
+ color: var(--_base-white);
215
+ &.disabled {
216
+ opacity: 0.5;
217
+ pointer-events: none;
218
+ }
219
+ .loader {
220
+ animation: rotate-icon 1s linear infinite;
221
+ display: inline-block;
222
+ transform-origin: center;
223
+
224
+ svg path {
225
+ stroke: var(--_primary-200);
226
+ }
227
+ }
228
+
229
+ &:hover {
230
+ background-color: var(--_primary-500);
231
+ }
232
+ }
233
+ .discard-btn {
234
+ &:hover {
235
+ background-color: var(--_gray-50);
236
+ color: var(--_gray-900);
237
+ }
238
+ }
239
+ }
240
+ }
241
+ .template_col_right {
242
+ width: 400px;
243
+ height: fit-content;
244
+ background-color: var(--_base-white);
245
+ .template_summary_wrapper {
246
+ border: 1px solid var(--_gray-300);
247
+ border-radius: 4px;
248
+ width: 350px;
249
+ .template_summary_header {
250
+ padding: 12px 16px;
251
+ border-bottom: 1px solid var(--_gray-300);
252
+ font-size: 16px;
253
+ font-weight: 600;
254
+ background-color: #f5f5f5;
255
+ }
256
+ .template_summary_body {
257
+ .template_summary_items {
258
+ padding: 16px;
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 8px;
262
+ .template_summary_item {
263
+ display: flex;
264
+ justify-content: space-between;
265
+ gap: 16px;
266
+ .template_summary_item_details {
267
+ display: flex;
268
+ gap: 16px;
269
+ .template_summary_item_pro_info {
270
+ h5 {
271
+ font-size: 16px;
272
+ font-weight: 600;
273
+ color: var(--_gray-900);
274
+ }
275
+ .template_summary_item_pro_qty {
276
+ color: var(--_gray-500);
277
+ font-size: 12px;
278
+ span {
279
+ display: block;
280
+ }
281
+ .qty {
282
+ color: var(--_gray-900);
283
+ }
284
+ }
285
+ }
286
+ }
287
+ .template_summary_item_detail_price {
288
+ font-size: 16px;
289
+ font-weight: 600;
290
+ color: var(--_gray-900);
291
+ }
292
+ }
293
+ }
294
+ }
295
+ }
296
+ }
297
+ }
298
+ }
298
299
  }
package/dist/order-processing.scss ADDED
@@ -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
+ }
package/dist/repeater.scss CHANGED
@@ -647,6 +647,32 @@ $rai: "repeater-advertise-item";
647
647
  // }
648
648
  // }
649
649
 
650
+ .repeater__button__container {
651
+ display: flex;
652
+
653
+ &[data-button-alignment-default-state="flex-start"] {
654
+ justify-content: flex-start;
655
+ }
656
+
657
+ &[data-button-alignment-default-state="center"] {
658
+ justify-content: center;
659
+ }
660
+
661
+ &[data-button-alignment-default-state="flex-end"] {
662
+ justify-content: flex-end;
663
+ }
664
+
665
+ &[data-button-alignment-hover-state="flex-start"]:hover {
666
+ justify-content: flex-start;
667
+ }
668
+ &[data-button-alignment-hover-state="center"]:hover {
669
+ justify-content: center;
670
+ }
671
+ &[data-button-alignment-hover-state="flex-end"]:hover {
672
+ justify-content: flex-end;
673
+ }
674
+ }
675
+
650
676
  .btn__with__text[data-btn-name="loadmoreButton"] {
651
677
  justify-content: center;
652
678
  &[data-show-shadow="false"] {