@sc-360-v2/storefront-cms-library 0.2.61 → 0.2.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.
Files changed (6) hide show
  1. package/dist/login.scss +502 -493
  2. package/dist/product-highlights.scss +6 -3
  3. package/dist/uom-selector.scss +6 -3
  4. package/dist/variant-picker.scss +6 -3
  5. package/dist/volume-pricing.scss +6 -4
  6. package/package.json +1 -1
package/dist/login.scss CHANGED
@@ -1,159 +1,124 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @import "./functions.scss";
3
4
 
4
- [data-div-type="element"] {
5
- &[data-element-type="login"],
6
- &[data-element-type="resetPassword"] {
7
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
8
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
9
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
10
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
11
- position: relative;
5
+ .element__center {
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ }
12
10
 
13
- & > .wrapper {
14
- display: flex;
11
+ .logn__main__div {
12
+ height: var(--_height-100-dvh);
13
+ max-height: var(--_height-100-dvh);
14
+ overflow: clip;
15
+ width: 100%;
16
+ position: var(--_p-relative);
17
+
18
+ & > div {
19
+ &.loader {
20
+ position: var(--_p-absolute);
21
+ z-index: var(--_higher-zIndex);
22
+ background: var(--_base-white);
23
+ border-radius: 50%;
24
+ display: var(--_d-flex);
15
25
  align-items: center;
16
26
  justify-content: center;
17
- width: 100%;
18
- height: 100%;
19
- }
20
-
21
- // & form {
22
- // width: 100%;
23
- // height: 100%;
24
- // }
25
-
26
- &[data-widget-border="true"] {
27
- .search-wrapper {
28
- border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
29
- border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
30
- border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
27
+ --_sf-in-sz: 1.2;
28
+ width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
29
+ height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
30
+ --_sf-img-sz: 80px;
31
+
32
+ left: 50%;
33
+ top: 50%;
34
+ transform: translate(-50%, -50%);
35
+ overflow: clip;
36
+
37
+ &::before {
38
+ animation: shine 1.5s infinite;
39
+ background: linear-gradient(
40
+ to right,
41
+ rgba(255, 255, 255, 0) 0%,
42
+ rgba(255, 255, 255, 0.8) 100%
43
+ );
44
+ content: "";
45
+ display: block;
46
+ height: 90px;
47
+ left: -80%;
48
+ position: absolute;
49
+ top: 0px;
50
+ transform: skewX(-45deg);
51
+ width: 70%;
52
+ z-index: 2;
31
53
  }
32
- }
33
54
 
34
- &[data-widget-shadow="false"] {
35
- --_show-shadow: none;
36
- }
37
-
38
- &[data-show-shadow="false"] {
39
- --_show-shadow: none;
55
+ & > img {
56
+ // z-index: 3;
57
+ width: var(--_sf-img-sz);
58
+ height: var(--_sf-img-sz);
59
+ }
40
60
  }
61
+ &.wrapper {
62
+ display: var(--_d-grid);
63
+ --_col-count: 2;
64
+ --_col-gap: 0px;
65
+ grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
41
66
 
42
- .auth-container {
43
- .logn__main__div {
44
- height: var(--_height-100-dvh);
45
- max-height: var(--_height-100-dvh);
46
- overflow: clip;
67
+ & > div {
47
68
  width: 100%;
48
- position: var(--_p-relative);
49
-
50
- & > div {
51
- &.loader {
52
- position: var(--_p-absolute);
53
- z-index: var(--_higher-zIndex);
54
- background: var(--_base-white);
55
- border-radius: 50%;
56
- display: var(--_d-flex);
57
- align-items: center;
58
- justify-content: center;
59
- --_sf-in-sz: 1.2;
60
- width: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
61
- height: calc(var(--_sf-img-sz) * var(--_sf-in-sz));
62
- --_sf-img-sz: 80px;
63
-
64
- left: 50%;
65
- top: 50%;
66
- transform: translate(-50%, -50%);
67
- overflow: clip;
68
-
69
- &::before {
70
- animation: shine 1.5s infinite;
71
- background: linear-gradient(
72
- to right,
73
- rgba(255, 255, 255, 0) 0%,
74
- rgba(255, 255, 255, 0.8) 100%
75
- );
76
- content: "";
77
- display: block;
78
- height: 90px;
79
- left: -80%;
80
- position: absolute;
81
- top: 0px;
82
- transform: skewX(-45deg);
83
- width: 70%;
84
- z-index: 2;
85
- }
86
-
87
- & > img {
88
- // z-index: 3;
89
- width: var(--_sf-img-sz);
90
- height: var(--_sf-img-sz);
91
- }
69
+ &.left__div {
70
+ display: var(--_d-flex);
71
+ background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
72
+ background-size: 75%;
73
+ height: 100%;
74
+ align-items: center;
75
+ img {
76
+ width: 100%;
77
+ object-fit: cover;
92
78
  }
93
- &.wrapper {
94
- display: var(--_d-grid);
95
- --_col-count: 2;
96
- --_col-gap: 0px;
97
- grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap);
98
-
99
- & > div {
100
- width: 100%;
101
- &.left__div {
102
- display: var(--_d-flex);
103
- background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900);
104
- background-size: 75%;
105
- height: 100%;
106
- align-items: center;
107
- img {
108
- width: 100%;
109
- object-fit: cover;
110
- }
111
79
 
112
- & > div {
113
- &.left__box__parent {
114
- max-width: 65%;
115
- margin-inline: auto;
80
+ & > div {
81
+ &.left__box__parent {
82
+ max-width: 65%;
83
+ margin-inline: auto;
84
+ display: var(--_d-flex);
85
+ flex-direction: column;
86
+ --_sf-gp: var(--_gap-24);
87
+ gap: calc(var(--_sf-gp) * 1.25);
88
+
89
+ & > div {
90
+ &.box {
91
+ display: var(--_d-flex);
92
+ color: var(--_base-white);
93
+ --_sf-img-size: 50px;
94
+ // --_sf-gp: var(--_gap-24);
95
+ gap: var(--_sf-gp);
96
+
97
+ &::before {
98
+ content: "";
99
+ background: var(--_sf-img) no-repeat center center / cover;
100
+ width: var(--_sf-img-size);
101
+ height: var(--_sf-img-size);
102
+ }
103
+
104
+ & > div {
116
105
  display: var(--_d-flex);
117
106
  flex-direction: column;
118
- --_sf-gp: var(--_gap-24);
119
- gap: calc(var(--_sf-gp) * 1.25);
120
-
121
- & > div {
122
- &.box {
123
- display: var(--_d-flex);
124
- color: var(--_base-white);
125
- --_sf-img-size: 50px;
126
- // --_sf-gp: var(--_gap-24);
127
- gap: var(--_sf-gp);
128
-
129
- &::before {
130
- content: "";
131
- background: var(--_sf-img) no-repeat center center / cover;
132
- width: var(--_sf-img-size);
133
- height: var(--_sf-img-size);
134
- }
135
-
136
- & > div {
137
- display: var(--_d-flex);
138
- flex-direction: column;
139
- row-gap: calc(var(--_sf-gp) * 0.5);
140
- align-items: flex-start;
141
- flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
142
-
143
- & > p {
144
- color: var(--_base-white);
145
- margin: 0;
146
-
147
- &.title {
148
- font-weight: var(--_fw-400);
149
- font-size: var(--_fs-24);
150
- }
151
- &.desc {
152
- font-size: var(--_fs-16);
153
- line-height: 1.6;
154
- }
155
- }
156
- }
107
+ row-gap: calc(var(--_sf-gp) * 0.5);
108
+ align-items: flex-start;
109
+ flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp));
110
+
111
+ & > p {
112
+ color: var(--_base-white);
113
+ margin: 0;
114
+
115
+ &.title {
116
+ font-weight: var(--_fw-400);
117
+ font-size: var(--_fs-24);
118
+ }
119
+ &.desc {
120
+ font-size: var(--_fs-16);
121
+ line-height: 1.6;
157
122
  }
158
123
  }
159
124
  }
@@ -163,392 +128,436 @@
163
128
  }
164
129
  }
165
130
  }
131
+ }
132
+ }
133
+ }
166
134
 
167
- // General Container Styles
168
- .loginContainer {
169
- display: flex;
170
- justify-content: center;
171
- align-items: center;
172
- }
135
+ // General Container Styles
136
+ .loginContainer {
137
+ display: flex;
138
+ justify-content: center;
139
+ align-items: center;
140
+ height: 100vh;
141
+ background-color: var(--_base-white);
142
+ }
173
143
 
174
- // Login Box
175
- .loginBox {
176
- width: 100%;
177
- }
144
+ // Login Box
145
+ .loginBox {
146
+ padding: 20px;
147
+ // border: 1px solid #ddd;
148
+ border-radius: 8px;
149
+ background-color: #fff;
150
+ width: 500px;
151
+ @media only screen and (max-width: 768px) {
152
+ width: 350px;
153
+ }
154
+ }
178
155
 
179
- // Title Styles
180
- .title {
181
- // text-align: center;
182
- color: var(--_gray-900);
183
- font-size: 24px;
184
- margin-bottom: 8px;
185
- }
186
- .desc {
187
- font-size: 14px;
188
- color: var(--_gray-500);
189
- }
190
- .sso_verify {
191
- border: 1px solid red;
192
- }
156
+ // Title Styles
157
+ .title {
158
+ // text-align: center;
159
+ color: var(--_gray-900);
160
+ font-size: 24px;
161
+ margin-bottom: 8px;
162
+ }
163
+ .desc {
164
+ font-size: 14px;
165
+ color: var(--_gray-500);
166
+ }
167
+ .sso_verify {
168
+ border: 1px solid red;
169
+ }
193
170
 
194
- .form_fields {
195
- margin-top: 36px;
196
- }
171
+ .form_fields {
172
+ margin-top: 36px;
173
+ }
197
174
 
198
- // Form Group (For Email and Password)
199
- .field__group {
200
- // margin-bottom: 16px;
201
- position: relative;
202
- .input__label {
203
- display: flex;
204
- align-items: center;
205
- gap: 4px;
206
- margin-bottom: 4px;
207
- }
208
- .input__field {
209
- position: relative;
210
- svg {
211
- width: 20px;
212
- height: 20px;
213
- }
214
- .placeholder_icon_start {
215
- position: absolute;
216
- z-index: 10;
217
- top: 9px;
218
- left: 10px;
219
- }
220
- .placeholder_icon_end {
221
- position: absolute;
222
- right: 10px;
223
- z-index: 10;
224
- top: 50%;
225
- transform: translateY(-50%);
226
- }
175
+ // Form Group (For Email and Password)
176
+ .field__group {
177
+ position: relative;
178
+ .input__label {
179
+ display: flex;
180
+ align-items: center;
181
+ gap: 4px;
182
+ margin-bottom: 4px;
183
+ }
184
+ .input__field {
185
+ position: relative;
186
+ svg {
187
+ width: 20px;
188
+ height: 20px;
189
+ }
190
+ .placeholder_icon_start {
191
+ position: absolute;
192
+ z-index: 10;
193
+ top: 9px;
194
+ left: 10px;
195
+ }
196
+ .placeholder_icon_end {
197
+ position: absolute;
198
+ right: 10px;
199
+ z-index: 10;
200
+ top: 50%;
201
+ transform: translateY(-50%);
202
+ }
227
203
 
228
- input {
229
- padding-left: 38px;
230
- }
231
- }
232
- .view__icon {
233
- position: absolute;
234
- right: 10px;
235
- top: 35px;
236
- svg {
237
- width: 18px;
238
- height: 18px;
239
- }
240
- }
241
- }
204
+ input {
205
+ padding-left: 38px;
206
+ }
207
+ }
208
+ .view__icon {
209
+ position: absolute;
210
+ right: 10px;
211
+ top: 35px;
212
+ svg {
213
+ width: 18px;
214
+ height: 18px;
215
+ }
216
+ }
217
+ }
242
218
 
243
- // Input Field Styles
244
- .inputField {
245
- width: 100%;
246
- padding: 10px;
247
- border-radius: 6px;
248
- border: 1px solid var(--_gray-300) !important;
249
- font-size: 14px;
250
- transition:
251
- background-color 0.2s,
252
- color 0.2s,
253
- border-color 0.2s,
254
- box-shadow 0.2s;
255
- &:focus {
256
- box-shadow:
257
- 0px 1px 2px rgba(16, 24, 40, 0.02),
258
- 0px 0px 0px 2px var(--_primary-100) !important;
259
- border: 1px solid var(--_primary-300) !important;
260
- }
261
- }
219
+ // Input Field Styles
220
+ .inputField {
221
+ width: 100%;
222
+ padding: 10px;
223
+ border-radius: 6px;
224
+ border: 1px solid var(--_gray-300) !important;
225
+ font-size: 14px;
226
+ transition:
227
+ background-color 0.2s,
228
+ color 0.2s,
229
+ border-color 0.2s,
230
+ box-shadow 0.2s;
231
+ &:focus {
232
+ box-shadow:
233
+ 0px 1px 2px rgba(16, 24, 40, 0.02),
234
+ 0px 0px 0px 2px var(--_primary-100) !important;
235
+ border: 1px solid var(--_primary-300) !important;
236
+ }
237
+ }
262
238
 
263
- // Invalid Input Field
264
- .invalid {
265
- border-color: var(--_error-300) !important;
266
- outline: 2px solid #fee4e2;
267
- }
239
+ // Invalid Input Field
240
+ .invalid {
241
+ border-color: var(--_error-300) !important;
242
+ outline: 2px solid #fee4e2;
243
+ }
268
244
 
269
- // Error Text Styles
270
- .errorText {
271
- display: flex;
272
- align-items: center;
273
- gap: 4px;
274
- font-size: 12px;
275
- color: red;
276
- svg {
277
- display: flex;
278
- width: 13px;
279
- height: 13px;
280
- path {
281
- stroke: var(--_error-500);
282
- }
283
- }
284
- }
245
+ // Error Text Styles
246
+ .errorText {
247
+ display: flex;
248
+ align-items: center;
249
+ gap: 4px;
250
+ font-size: 12px;
251
+ color: red;
252
+ svg {
253
+ display: flex;
254
+ width: 13px;
255
+ height: 13px;
256
+ path {
257
+ stroke: var(--_error-500);
258
+ }
259
+ }
260
+ }
285
261
 
286
- // Submit Button
287
- .submitButton {
288
- width: 100%;
289
- padding: 12px;
290
- background-color: var(--_primary-500);
291
- color: #fff;
292
- border-radius: 6px;
293
- border: none;
294
- cursor: pointer;
295
- margin-top: 16px;
296
- display: flex;
297
- align-items: center;
298
- justify-content: center;
299
- &:has(svg) {
300
- gap: 8px;
301
- }
302
- svg {
303
- display: flex;
304
- path {
305
- stroke: var(--_base-white);
306
- }
307
- }
262
+ // Submit Button
263
+ .submitButton {
264
+ width: 100%;
265
+ padding: 12px;
266
+ background-color: var(--_primary-500);
267
+ color: #fff;
268
+ border-radius: 6px;
269
+ border: none;
270
+ cursor: pointer;
271
+ margin-top: 16px;
272
+ display: flex;
273
+ align-items: center;
274
+ justify-content: center;
275
+ &:has(svg) {
276
+ gap: 8px;
277
+ }
278
+ svg {
279
+ display: flex;
280
+ path {
281
+ stroke: var(--_base-white);
282
+ }
283
+ }
308
284
 
309
- &:disabled {
310
- background-color: var(--_primary-100);
311
- cursor: not-allowed;
312
- }
313
- }
314
- .mt__32 {
315
- margin-top: 32px !important;
316
- }
317
- .mt__48 {
318
- margin-top: 48px !important;
319
- }
285
+ &:disabled {
286
+ background-color: var(--_primary-100);
287
+ cursor: not-allowed;
288
+ }
289
+ }
290
+ .mt__32 {
291
+ margin-top: 32px !important;
292
+ }
293
+ .mt__48 {
294
+ margin-top: 48px !important;
295
+ }
320
296
 
321
- // Loading Icon
322
- .loadingIcon {
323
- margin-left: 8px;
324
- }
297
+ // Loading Icon
298
+ .loadingIcon {
299
+ margin-left: 8px;
300
+ }
325
301
 
326
- // Forgot Password Section
327
- .forgotPassword {
328
- display: flex;
329
- align-items: center;
330
- justify-content: space-between;
331
- margin-top: 20px;
332
- .remember_block {
333
- display: flex;
334
- align-items: center;
335
- gap: 6px;
336
- }
302
+ // Forgot Password Section
303
+ .forgotPassword {
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: space-between;
307
+ margin-top: 20px;
308
+ .remember_block {
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 6px;
312
+ }
313
+ }
314
+ .flex_center {
315
+ display: flex;
316
+ justify-content: center;
317
+ align-items: center;
318
+ gap: 8px;
319
+ font-weight: 600;
320
+ margin-top: 20px;
321
+ width: 100%;
322
+ color: var(--_primary-400);
323
+ svg {
324
+ display: flex;
325
+ path {
326
+ stroke: var(--_primary-400);
327
+ }
328
+ }
329
+ }
330
+
331
+ .psw__contain {
332
+ margin-bottom: 24px;
333
+ .psw_status {
334
+ display: flex;
335
+ align-items: center;
336
+ justify-content: space-between;
337
+ .step {
338
+ width: 20%;
339
+ height: 3px;
340
+ border-radius: 4px;
341
+ background-color: var(--_gray-300);
342
+ &.active {
343
+ background-color: var(--_success-600);
337
344
  }
338
- .flex_center {
339
- display: flex;
340
- justify-content: center;
341
- align-items: center;
342
- gap: 8px;
343
- font-weight: 600;
344
- margin-top: 20px;
345
- width: 100%;
346
- color: var(--_primary-400);
347
- svg {
348
- display: flex;
349
- path {
350
- stroke: var(--_primary-400);
351
- }
345
+ }
346
+ }
347
+ .psw_content {
348
+ background-color: var(--_gray-50);
349
+ padding: 16px;
350
+ border-radius: 6px !important;
351
+ height: 100px;
352
+ overflow-y: auto;
353
+ margin-top: 20px;
354
+ .title {
355
+ font-size: 14px;
356
+ font-weight: 600;
357
+ color: var(--_gray-700);
358
+ margin-bottom: 16px;
359
+ }
360
+ ul {
361
+ li {
362
+ color: var(--_gray-700);
363
+ font-size: 14px;
364
+ & > span {
365
+ display: inline-flex;
352
366
  }
353
- }
354
-
355
- .psw__contain {
356
- margin-bottom: 24px;
357
- .psw_status {
358
- display: flex;
359
- align-items: center;
360
- justify-content: space-between;
361
- .step {
362
- width: 20%;
363
- height: 3px;
364
- border-radius: 4px;
365
- background-color: var(--_gray-300);
366
- &.active {
367
- background-color: var(--_success-600);
368
- }
369
- }
370
- }
371
- .psw_content {
372
- background-color: var(--_gray-50);
373
- padding: 16px;
374
- border-radius: 6px !important;
375
- height: 100px;
376
- overflow-y: auto;
377
- margin-top: 20px;
378
- .title {
379
- font-size: 14px;
380
- font-weight: 600;
381
- color: var(--_gray-700);
382
- margin-bottom: 16px;
383
- }
384
- ul {
385
- li {
386
- color: var(--_gray-700);
387
- font-size: 14px;
388
- & > span {
389
- display: inline-flex;
390
- }
391
- &:not(:last-child) {
392
- margin-bottom: 8px;
393
- }
394
- }
395
- }
367
+ &:not(:last-child) {
368
+ margin-bottom: 8px;
396
369
  }
397
370
  }
371
+ }
372
+ }
373
+ }
398
374
 
399
- // password reset successfully
400
- .reset_password_success {
401
- display: flex;
402
- justify-content: center;
403
- flex-direction: column;
404
- align-items: center;
405
-
406
- // .rounded_icon {
407
- // @extend .element__center;
408
- // width: 40px;
409
- // height: 40px;
410
- // background-color: var(--_gray-200);
411
- // border-radius: 50%;
412
- // margin-bottom: 24px;
413
- // }
414
- }
375
+ // password reset successfully
376
+ .reset_password_success {
377
+ display: flex;
378
+ justify-content: center;
379
+ flex-direction: column;
380
+ align-items: center;
381
+
382
+ .rounded_icon {
383
+ @extend .element__center;
384
+ width: 40px;
385
+ height: 40px;
386
+ background-color: var(--_gray-200);
387
+ border-radius: 50%;
388
+ margin-bottom: 24px;
389
+ }
390
+ }
415
391
 
416
- // Forgot Password Button
417
- .forgotPasswordButton {
418
- background: none;
419
- border: none;
420
- color: var(--_primary-400);
392
+ // Forgot Password Button
393
+ .forgotPasswordButton {
394
+ background: none;
395
+ border: none;
396
+ color: var(--_primary-400);
397
+
398
+ font-weight: 600;
399
+ cursor: pointer;
400
+ font-size: 14px;
401
+ padding: 8px 16px;
402
+ border-radius: 6px;
403
+ &:hover {
404
+ background-color: var(--_primary-25);
405
+ color: var(--_primary-700);
406
+ }
407
+ }
421
408
 
422
- font-weight: 600;
423
- cursor: pointer;
424
- font-size: 14px;
425
- padding: 8px 16px;
426
- border-radius: 6px;
427
- &:hover {
428
- background-color: var(--_primary-25);
429
- color: var(--_primary-700);
430
- }
431
- }
409
+ @keyframes shine {
410
+ 100% {
411
+ left: 125%;
412
+ }
413
+ }
432
414
 
433
- @keyframes shine {
434
- 100% {
435
- left: 125%;
436
- }
415
+ .reset_password {
416
+ form {
417
+ label {
418
+ display: block;
419
+ margin-bottom: 4px;
420
+ }
421
+ .formGroup {
422
+ &:not(:last-child) {
423
+ margin-bottom: 16px;
437
424
  }
438
-
439
- .reset_password {
440
- form {
441
- label {
442
- display: block;
443
- margin-bottom: 4px;
444
- }
445
- .formGroup {
446
- &:not(:last-child) {
447
- margin-bottom: 16px;
448
- }
449
- }
450
- .to_be_filled {
451
- display: grid;
452
- grid-template-columns: 50% 50%;
453
- gap: 4px;
454
- margin-top: 10px;
455
- margin-bottom: 16px;
456
- li {
457
- padding: 4px 10px;
458
- background-color: var(--_gray-100);
459
- color: var(--_gray-700);
460
- border-radius: 40px;
461
- display: flex;
462
- align-items: center;
463
- gap: 5px;
464
- font-size: 12px;
465
- &.active {
466
- background-color: var(--_success-50);
467
- color: var(--_success-700);
468
- svg {
469
- path {
470
- stroke: var(--_success-700);
471
- }
472
- }
473
- }
474
-
475
- button {
476
- svg {
477
- path {
478
- stroke: var(--_gray-500);
479
- }
480
- }
481
- }
425
+ }
426
+ .to_be_filled {
427
+ display: grid;
428
+ grid-template-columns: 50% 50%;
429
+ gap: 4px;
430
+ margin-top: 10px;
431
+ margin-bottom: 16px;
432
+ li {
433
+ padding: 4px 10px;
434
+ background-color: var(--_gray-100);
435
+ color: var(--_gray-700);
436
+ border-radius: 40px;
437
+ display: flex;
438
+ align-items: center;
439
+ gap: 5px;
440
+ font-size: 12px;
441
+ &.active {
442
+ background-color: var(--_success-50);
443
+ color: var(--_success-700);
444
+ svg {
445
+ path {
446
+ stroke: var(--_success-700);
482
447
  }
483
448
  }
484
449
  }
485
450
 
486
- .to_be_filled {
487
- display: flex;
488
- }
489
- .error {
490
- color: var(--_error-500);
491
- &::first-letter {
492
- text-transform: uppercase;
493
- }
494
- }
495
- }
496
-
497
- // common styles
498
- .btn__primary {
499
- border-radius: 6px;
500
- width: 100%;
501
- height: 48px;
502
- font-weight: 600;
503
- color: var(--_base-white);
504
- background-color: var(--_primary-500);
505
- margin-top: 48px;
506
- font-size: 16px;
507
- display: flex;
508
- justify-content: center;
509
- align-items: center;
510
- gap: 8px;
511
- & > span {
512
- display: flex;
451
+ button {
513
452
  svg {
514
453
  path {
515
- stroke: var(--_base-white);
454
+ stroke: var(--_gray-500);
516
455
  }
517
456
  }
518
457
  }
519
458
  }
520
- .section__title {
521
- font-size: 24px;
522
- font-weight: 600;
523
- margin-bottom: 8px;
524
- color: var(--_gray-900);
525
- }
526
- .section__desc {
527
- font-size: 14px;
528
- color: var(--_gray-500);
529
- }
530
- .text__center {
531
- text-align: center;
459
+ }
460
+ }
461
+
462
+ .to_be_filled {
463
+ display: flex;
464
+ }
465
+ .error {
466
+ color: var(--_error-500);
467
+ &::first-letter {
468
+ text-transform: uppercase;
469
+ }
470
+ }
471
+ }
472
+
473
+ .single_sign_on {
474
+ display: flex;
475
+ flex-direction: column;
476
+ justify-content: center;
477
+ align-items: center;
478
+ .redirect_section,
479
+ .auth_failed_section {
480
+ position: absolute;
481
+ top: 50%;
482
+ left: 50%;
483
+ transform: translate(-50%, -50%);
484
+ max-width: 500px;
485
+ height: auto;
486
+ justify-content: center;
487
+ display: flex;
488
+ align-items: center;
489
+ flex-direction: column;
490
+ .section_title {
491
+ font-size: 18px;
492
+ margin-bottom: 4px;
493
+ }
494
+ .section_txt {
495
+ font-size: 14px;
496
+ text-align: center;
497
+ }
498
+ .logo_brand {
499
+ margin-top: 20px;
500
+ }
501
+ }
502
+ .copyright_text {
503
+ position: fixed;
504
+ bottom: 10px;
505
+ text-align: center;
506
+ }
507
+ }
508
+
509
+ // common styles
510
+ .btn__primary {
511
+ border-radius: 6px;
512
+ width: 100%;
513
+ height: 48px;
514
+ font-weight: 600;
515
+ color: var(--_base-white);
516
+ background-color: var(--_primary-500);
517
+ margin-top: 48px;
518
+ font-size: 16px;
519
+ display: flex;
520
+ justify-content: center;
521
+ align-items: center;
522
+ gap: 8px;
523
+ & > span {
524
+ display: flex;
525
+ svg {
526
+ path {
527
+ stroke: var(--_base-white);
532
528
  }
529
+ }
530
+ }
531
+ }
532
+ .section__title {
533
+ font-size: 24px;
534
+ font-weight: 600;
535
+ margin-bottom: 8px;
536
+ color: var(--_gray-900);
537
+ }
538
+ .section__desc {
539
+ font-size: 14px;
540
+ color: var(--_gray-500);
541
+ }
542
+ .text__center {
543
+ text-align: center;
544
+ }
533
545
 
534
- // .rounded__fill {
535
- // @extend .element__center;
536
- // width: 60px;
537
- // height: 60px;
538
- // background-color: var(--_success-50);
539
- // border-radius: 50%;
540
- // margin-bottom: 24px;
541
- // svg {
542
- // width: 26px;
543
- // height: 26px;
544
- // path {
545
- // stroke: var(--_success-600);
546
- // }
547
- // }
548
- // &.remove__bg {
549
- // background-color: transparent;
550
- // }
551
- // }
546
+ .rounded__fill {
547
+ @extend .element__center;
548
+ width: 60px;
549
+ height: 60px;
550
+ background-color: var(--_success-50);
551
+ border-radius: 50%;
552
+ margin-bottom: 24px;
553
+ svg {
554
+ width: 26px;
555
+ height: 26px;
556
+ path {
557
+ stroke: var(--_success-600);
552
558
  }
553
559
  }
560
+ &.remove__bg {
561
+ background-color: transparent;
562
+ }
554
563
  }
package/dist/product-highlights.scss CHANGED
@@ -39,10 +39,13 @@
39
39
  }
40
40
  }
41
41
  .text-element {
42
- background: #6d96e4;
43
- padding: 10px;
42
+ color: var(--Gray-900, #101828);
43
+ font-family: "Hanken Grotesk";
44
+ font-size: 20px;
45
+ font-style: normal;
44
46
  font-weight: 600;
45
- color: rgba(75, 69, 70, 1);
47
+ line-height: 150%; /* 30px */
48
+ letter-spacing: -0.4px;
46
49
  }
47
50
  .highlights__container {
48
51
  padding: var(--_ctm-lt-pg);
package/dist/uom-selector.scss CHANGED
@@ -44,10 +44,13 @@
44
44
  }
45
45
  }
46
46
  .text-element {
47
- background: #6d96e4;
48
- padding: 10px;
47
+ color: var(--Gray-900, #101828);
48
+ font-family: "Hanken Grotesk";
49
+ font-size: 20px;
50
+ font-style: normal;
49
51
  font-weight: 600;
50
- color: rgba(75, 69, 70, 1);
52
+ line-height: 150%; /* 30px */
53
+ letter-spacing: -0.4px;
51
54
  }
52
55
  .uom__container {
53
56
  padding: var(--_ctm-lt-pg);
package/dist/variant-picker.scss CHANGED
@@ -29,10 +29,13 @@ $minWidth: 70px;
29
29
  --_show-shadow: none;
30
30
  }
31
31
  .text-element {
32
- background: #6d96e4;
33
- padding: 10px;
32
+ color: var(--Gray-900, #101828);
33
+ // font-family: "Hanken Grotesk";
34
+ font-size: 20px;
35
+ font-style: normal;
34
36
  font-weight: 600;
35
- color: rgba(75, 69, 70, 1);
37
+ line-height: 150%; /* 30px */
38
+ letter-spacing: -0.4px;
36
39
  }
37
40
  .is__combination_avail {
38
41
  color: red;
package/dist/volume-pricing.scss CHANGED
@@ -25,11 +25,13 @@
25
25
  --_show-shadow: none;
26
26
  }
27
27
  .text-element {
28
- background: #6d96e4;
29
- padding: 10px;
28
+ color: var(--Gray-900, #101828);
29
+ font-family: "Hanken Grotesk";
30
+ font-size: 20px;
31
+ font-style: normal;
30
32
  font-weight: 600;
31
- color: rgba(75, 69, 70, 1);
32
- // min-width: 250px;
33
+ line-height: 150%; /* 30px */
34
+ letter-spacing: -0.4px;
33
35
  }
34
36
  .volume__container {
35
37
  padding: var(--_ctm-lt-pg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.2.61",
3
+ "version": "0.2.62",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {