@sc-360-v2/storefront-cms-library 0.3.80 → 0.3.81

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.
@@ -5140,6 +5140,391 @@ $dark-color: #343a40;
5140
5140
  }
5141
5141
  }
5142
5142
 
5143
+ .chk_billing_address {
5144
+ width: 100%;
5145
+ display: flex;
5146
+ flex-direction: column;
5147
+ background-color: var(
5148
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-bd-cr,
5149
+ var(
5150
+ --_ctm-tab-dn-an-tb-bg-as-bg-as-cr-bd-cr,
5151
+ var(--_ctm-dn-an-tb-bg-as-bg-as-cr-bd-cr)
5152
+ )
5153
+ );
5154
+ border-color: var(
5155
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-br-cr,
5156
+ var(
5157
+ --_ctm-tab-dn-an-tb-bg-as-bg-as-cr-br-cr,
5158
+ var(--_ctm-dn-an-tb-bg-as-bg-as-cr-br-cr)
5159
+ )
5160
+ );
5161
+ border-style: var(
5162
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-br-se,
5163
+ var(
5164
+ --_ctm-tab-dn-an-tb-bg-as-bg-as-cr-br-se,
5165
+ var(--_ctm-dn-an-tb-bg-as-bg-as-cr-br-se)
5166
+ )
5167
+ );
5168
+ border-width: var(
5169
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-br-wh,
5170
+ var(
5171
+ --_ctm-tab-dn-an-tb-bg-as-bg-as-cr-br-wh,
5172
+ var(--_ctm-dn-an-tb-bg-as-bg-as-cr-br-wh)
5173
+ )
5174
+ );
5175
+ border-radius: var(
5176
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-br-rs,
5177
+ var(
5178
+ --_ctm-tab-dn-an-tb-bg-as-bg-as-cr-br-rs,
5179
+ var(--_ctm-dn-an-tb-bg-as-bg-as-cr-br-rs)
5180
+ )
5181
+ );
5182
+ padding: var(
5183
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-pg,
5184
+ var(--_ctm-tab-dn-an-tb-bg-as-bg-as-cr-pg, var(--_ctm-dn-an-tb-bg-as-bg-as-cr-pg))
5185
+ );
5186
+ display: flex;
5187
+ justify-content: space-between;
5188
+ gap: var(
5189
+ --_ctm-mob-dn-an-tb-bg-as-bg-as-cr-im-gp,
5190
+ var(
5191
+ --_ctm-tab-dn-an-tb-bg-as-bg-as-cr-im-gp,
5192
+ var(--_ctm-dn-an-tb-bg-as-bg-as-cr-im-gp)
5193
+ )
5194
+ );
5195
+
5196
+ &_form_container {
5197
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
5198
+ padding-top: 24px;
5199
+ display: flex;
5200
+ flex-direction: column;
5201
+ gap: 24px;
5202
+ }
5203
+
5204
+ .chk_payment_options_heading {
5205
+ font-family: var(
5206
+ --_ctm-mob-an-tb-bg-as-bg-te-ft-fy,
5207
+ var(--_ctm-tab-an-tb-bg-as-bg-te-ft-fy, var(--_ctm-an-tb-bg-as-bg-te-ft-fy))
5208
+ );
5209
+ color: var(
5210
+ --_ctm-mob-an-tb-bg-as-bg-te-cr,
5211
+ var(--_ctm-tab-an-tb-bg-as-bg-te-cr, var(--_ctm-an-tb-bg-as-bg-te-cr))
5212
+ );
5213
+ font-weight: 600;
5214
+ font-size: var(
5215
+ --_ctm-mob-an-tb-bg-as-bg-te-ft-se,
5216
+ var(--_ctm-tab-an-tb-bg-as-bg-te-ft-se, var(--_ctm-an-tb-bg-as-bg-te-ft-se))
5217
+ );
5218
+ letter-spacing: var(
5219
+ --_ctm-mob-an-tb-bg-as-bg-te-lr-sg,
5220
+ var(--_ctm-tab-an-tb-bg-as-bg-te-lr-sg, var(--_ctm-an-tb-bg-as-bg-te-lr-sg))
5221
+ );
5222
+ &.pl_0 {
5223
+ padding-left: 0px;
5224
+ }
5225
+ }
5226
+
5227
+ &_form_wrapper {
5228
+ display: flex;
5229
+ flex-direction: column;
5230
+ gap: 24px;
5231
+ border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
5232
+ }
5233
+
5234
+ .shipping_address_container {
5235
+ display: flex;
5236
+ flex-direction: column;
5237
+ gap: 24px;
5238
+ max-width: 485px;
5239
+ }
5240
+
5241
+ .shipping_address_heading_container {
5242
+ display: flex;
5243
+ justify-content: space-between;
5244
+ align-items: center;
5245
+
5246
+ .chk_heading_info {
5247
+ color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
5248
+ font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
5249
+ font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
5250
+ font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
5251
+ font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
5252
+ line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
5253
+ letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
5254
+ text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
5255
+ }
5256
+ .icon {
5257
+ cursor: pointer;
5258
+ }
5259
+ }
5260
+
5261
+ form {
5262
+ display: flex;
5263
+ flex-direction: column;
5264
+ gap: 16px;
5265
+ // max-width: 85%;
5266
+
5267
+ @media (max-width: 500px) {
5268
+ max-width: 100%;
5269
+ }
5270
+ }
5271
+
5272
+ .chk_shipping_address_form_group {
5273
+ display: flex;
5274
+ justify-content: space-between;
5275
+ flex-direction: row;
5276
+ gap: 12px;
5277
+ }
5278
+
5279
+ .chk_shipping_address_input_container {
5280
+ display: flex;
5281
+ width: 100%;
5282
+ }
5283
+
5284
+ .chk_shipping_address_input_wrapper {
5285
+ display: flex;
5286
+ flex-direction: column;
5287
+ // gap: var(--_ctm-lt-ll-ad-it-gp);
5288
+ width: 100%;
5289
+ }
5290
+
5291
+ .chk_shipping_address_form_label {
5292
+ // color: var(--_gray-600);
5293
+ // font-size: 14px;
5294
+ padding-bottom: 6px;
5295
+ font-family: var(
5296
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-fy,
5297
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-fy, var(--_ctm-dn-an-tb-fm-wr-ls-ft-fy))
5298
+ );
5299
+ color: var(
5300
+ --_ctm-mob-dn-an-tb-fm-wr-ls-cr,
5301
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-cr, var(--_ctm-dn-an-tb-fm-wr-ls-cr))
5302
+ );
5303
+ font-weight: var(
5304
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-wt,
5305
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-wt, var(--_ctm-dn-an-tb-fm-wr-ls-ft-wt))
5306
+ );
5307
+ font-size: var(
5308
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-se,
5309
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-se, var(--_ctm-dn-an-tb-fm-wr-ls-ft-se))
5310
+ );
5311
+ text-decoration: var(
5312
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ue,
5313
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ue, var(--_ctm-dn-an-tb-fm-wr-ls-ue))
5314
+ );
5315
+ letter-spacing: var(
5316
+ --_ctm-mob-dn-an-tb-fm-wr-ls-lr-sg,
5317
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-lr-sg, var(--_ctm-dn-an-tb-fm-wr-ls-lr-sg))
5318
+ );
5319
+ line-height: var(
5320
+ --_ctm-mob-dn-an-tb-fm-wr-ls-le-ht,
5321
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-le-ht, var(--_ctm-dn-an-tb-fm-wr-ls-le-ht))
5322
+ );
5323
+ font-style: var(
5324
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-se-ic,
5325
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-se-ic, var(--_ctm-dn-an-tb-fm-wr-ls-ft-se-ic))
5326
+ );
5327
+ text-align: var(
5328
+ --_ctm-mob-dn-an-tb-fm-wr-ls-tt-an,
5329
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-tt-an, var(--_ctm-dn-an-tb-fm-wr-ls-tt-an))
5330
+ );
5331
+ }
5332
+
5333
+ .chk_shiping_address_form_input {
5334
+ // padding: 8px 12px;
5335
+ // width: -webkit-fill-available;
5336
+ // background-color: var(--_base-white);
5337
+ // border-radius: 6px;
5338
+ // border: 1px solid var(--_gray-300);
5339
+ // padding: 8px 12px;
5340
+ height: 40px;
5341
+ width: -webkit-fill-available;
5342
+ // background-color: var(--_base-white);
5343
+ // color: var(--_gray-600);
5344
+ // border: 1px solid var(--_gray-300);
5345
+ // border-radius: 6px;
5346
+ // height: 40px;
5347
+ background-color: var(
5348
+ --_ctm-mob-dn-an-tb-fm-wr-is-bd-cr,
5349
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-bd-cr, var(--_ctm-dn-an-tb-fm-wr-is-bd-cr))
5350
+ );
5351
+ border-color: var(
5352
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
5353
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-cr, var(--_ctm-dn-an-tb-fm-wr-is-br-cr))
5354
+ );
5355
+ border-style: var(
5356
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
5357
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-se, var(--_ctm-dn-an-tb-fm-wr-is-br-se))
5358
+ );
5359
+ border-width: var(
5360
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
5361
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-wh, var(--_ctm-dn-an-tb-fm-wr-is-br-wh))
5362
+ );
5363
+ border-radius: var(
5364
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
5365
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-rs, var(--_ctm-dn-an-tb-fm-wr-is-br-rs))
5366
+ );
5367
+ padding: var(
5368
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
5369
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
5370
+ );
5371
+ &::placeholder {
5372
+ font-family: var(
5373
+ --_ctm-mob-dn-an-tb-fm-wr-is-ft-fy,
5374
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-fy, var(--_ctm-dn-an-tb-fm-wr-is-ft-fy))
5375
+ );
5376
+ color: var(
5377
+ --_ctm-mob-dn-an-tb-fm-wr-is-cr,
5378
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-cr, var(--_ctm-dn-an-tb-fm-wr-is-cr))
5379
+ );
5380
+ font-weight: var(
5381
+ --_ctm-mob-dn-an-tb-fm-wr-is-ft-wt,
5382
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-wt, var(--_ctm-dn-an-tb-fm-wr-is-ft-wt))
5383
+ );
5384
+ font-size: var(
5385
+ --_ctm-mob-dn-an-tb-fm-wr-is-ft-se,
5386
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-ft-se, var(--_ctm-dn-an-tb-fm-wr-is-ft-se))
5387
+ );
5388
+ text-decoration: var(
5389
+ --_ctm-mob-dn-an-tb-fm-wr-is-ue,
5390
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-ue, var(--_ctm-dn-an-tb-fm-wr-is-ue))
5391
+ );
5392
+ letter-spacing: var(
5393
+ --_ctm-mob-dn-an-tb-fm-wr-is-lr-sg,
5394
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-lr-sg, var(--_ctm-dn-an-tb-fm-wr-is-lr-sg))
5395
+ );
5396
+ line-height: var(
5397
+ --_ctm-mob-dn-an-tb-fm-wr-is-le-ht,
5398
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-le-ht, var(--_ctm-dn-an-tb-fm-wr-is-le-ht))
5399
+ );
5400
+ font-style: var(
5401
+ --_ctm-mob-dn-an-tb-fm-wr-is-ft-se-ic,
5402
+ var(
5403
+ --_ctm-tab-dn-an-tb-fm-wr-is-ft-se-ic,
5404
+ var(--_ctm-dn-an-tb-fm-wr-is-ft-se-ic)
5405
+ )
5406
+ );
5407
+ text-align: var(
5408
+ --_ctm-mob-dn-an-tb-fm-wr-is-tt-an,
5409
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-tt-an, var(--_ctm-dn-an-tb-fm-wr-is-tt-an))
5410
+ );
5411
+ }
5412
+
5413
+ &:focus-within {
5414
+ border: 1px solid var(--_primary-300);
5415
+ outline: 2px solid var(--_primary-100);
5416
+ }
5417
+
5418
+ .input-field {
5419
+ // padding: 8px 12px;
5420
+ width: -webkit-fill-available;
5421
+ background-color: var(--_base-white);
5422
+ border-radius: 6px;
5423
+ // border: 1px solid var(--_gray-300);
5424
+
5425
+ &:focus-within {
5426
+ border: 1px solid var(--_primary-300);
5427
+ outline: 2px solid var(--_primary-100);
5428
+ }
5429
+ }
5430
+ }
5431
+
5432
+ input[type="checkbox"] {
5433
+ width: auto;
5434
+ }
5435
+
5436
+ .error-msg {
5437
+ font-size: 12px;
5438
+ color: #ff0000;
5439
+ }
5440
+
5441
+ .chk_shipping_address_use_as_billing_address_chkbx {
5442
+ display: flex;
5443
+ align-items: center;
5444
+ cursor: pointer;
5445
+ gap: 10px;
5446
+ margin-bottom: 6px;
5447
+ font-family: var(
5448
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-fy,
5449
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-fy, var(--_ctm-dn-an-tb-fm-wr-ls-ft-fy))
5450
+ );
5451
+ color: var(
5452
+ --_ctm-mob-dn-an-tb-fm-wr-ls-cr,
5453
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-cr, var(--_ctm-dn-an-tb-fm-wr-ls-cr))
5454
+ );
5455
+ font-weight: var(
5456
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-wt,
5457
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-wt, var(--_ctm-dn-an-tb-fm-wr-ls-ft-wt))
5458
+ );
5459
+ font-size: var(
5460
+ --_ctm-mob-dn-an-tb-fm-wr-ls-ft-se,
5461
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-se, var(--_ctm-dn-an-tb-fm-wr-ls-ft-se))
5462
+ );
5463
+ letter-spacing: var(
5464
+ --_ctm-mob-dn-an-tb-fm-wr-ls-lr-sg,
5465
+ var(--_ctm-tab-dn-an-tb-fm-wr-ls-lr-sg, var(--_ctm-dn-an-tb-fm-wr-ls-lr-sg))
5466
+ );
5467
+
5468
+ .custom-checkbox {
5469
+ width: 20px;
5470
+ height: 20px;
5471
+ border: 1px solid #d0d5dd;
5472
+ border-radius: 4px;
5473
+ position: relative;
5474
+ background-color: #fff;
5475
+ transition: all 0.2s ease;
5476
+
5477
+ &::after {
5478
+ content: "";
5479
+ position: absolute;
5480
+ display: none;
5481
+ left: 5px;
5482
+ top: 0.5px;
5483
+ width: 5px;
5484
+ height: 10px;
5485
+ border: solid #fff;
5486
+ border-width: 0 2px 2px 0;
5487
+ transform: rotate(45deg);
5488
+ }
5489
+ }
5490
+ }
5491
+
5492
+ input[type="checkbox"]:checked + label {
5493
+ .custom-checkbox {
5494
+ background-color: #004dff;
5495
+ border-color: #004dff;
5496
+
5497
+ &::after {
5498
+ display: block;
5499
+ }
5500
+ }
5501
+ }
5502
+
5503
+ .checkbox-group {
5504
+ display: flex;
5505
+ align-items: center;
5506
+ justify-content: start;
5507
+ gap: 8px;
5508
+ }
5509
+
5510
+ &_same_as_billing_address_chkbx {
5511
+ color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
5512
+ font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
5513
+ font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
5514
+ font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
5515
+ font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
5516
+ line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
5517
+ letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
5518
+ text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
5519
+ }
5520
+
5521
+ &_button_wrapper {
5522
+ display: flex;
5523
+ align-items: center;
5524
+ gap: 16px;
5525
+ }
5526
+ }
5527
+
5143
5528
  .react-international-phone-country-selector-button {
5144
5529
  border: none !important;
5145
5530
  height: auto !important;
@@ -3,7 +3,7 @@ export interface ContactUsEditPopupInterface extends CMSElementEditPopupInterfac
3
3
  }
4
4
  interface selfLayoutInterface {
5
5
  selectorKey: string;
6
- formData: any;
6
+ formData?: any;
7
7
  }
8
8
  export interface selfDesignInterface {
9
9
  selectorKey: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.80",
3
+ "version": "0.3.81",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {