@sc-360-v2/storefront-cms-library 0.4.12 → 0.4.14

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 (18) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart-details.scss +36 -1
  3. package/dist/checkout.scss +133 -58
  4. package/dist/contact-us.scss +48 -0
  5. package/dist/filters.scss +7 -4
  6. package/dist/icons.js +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/login.scss +7 -1
  9. package/dist/product-image.scss +5 -0
  10. package/dist/profile.scss +4 -6
  11. package/dist/search.scss +3 -0
  12. package/dist/table.scss +10 -5
  13. package/dist/types/builder/tools/element-edit/profile.d.ts +5 -0
  14. package/dist/types/builder/tools/element-edit/table.d.ts +6 -1
  15. package/dist/user-elements.scss +8 -20
  16. package/dist/variant-picker.scss +3 -3
  17. package/dist/website.js +1 -1
  18. package/package.json +1 -1
package/dist/cart-details.scss CHANGED
@@ -690,6 +690,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
690
690
  transition: rotate 0.4s ease-in-out;
691
691
  }
692
692
  }
693
+ .selected-display {
694
+ .selected-item {
695
+ display: flex;
696
+ align-items: center;
697
+ gap: 4px;
698
+ font-size: 14px;
699
+ font-weight: 500;
700
+ line-height: 20px;
701
+ color: #344054;
702
+ .svg_icon {
703
+ vertical-align: middle;
704
+ svg {
705
+ width: 12px;
706
+ height: 12px;
707
+ cursor: pointer;
708
+ vertical-align: middle;
709
+ g {
710
+ path {
711
+ stroke: #98a2b3;
712
+ }
713
+ }
714
+ }
715
+ }
716
+ }
717
+ .multi-selected-display {
718
+ display: flex;
719
+ align-items: center;
720
+ gap: 8px;
721
+ .selected-item {
722
+ border: 1px solid var(--_gray-300);
723
+ border-radius: 4px;
724
+ padding: 2px 4px;
725
+ }
726
+ }
727
+ }
693
728
  }
694
729
  &:focus {
695
730
  border-color: var(--_primary-400);
@@ -1314,7 +1349,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1314
1349
  .product_qty_price_wrapper {
1315
1350
  display: flex;
1316
1351
  justify-content: var(--_dm-flt);
1317
- align-items: center;
1352
+ // align-items: center;
1318
1353
  gap: 32px;
1319
1354
  align-self: stretch;
1320
1355
 
package/dist/checkout.scss CHANGED
@@ -74,7 +74,7 @@ $dark-color: #343a40;
74
74
  h2 {
75
75
  margin-bottom: -6px;
76
76
  font-family: "Lato";
77
- font-weight: 700;
77
+ font-weight: 600;
78
78
  font-size: 24px;
79
79
  line-height: 32px;
80
80
  color: var(--_gray-900);
@@ -124,7 +124,7 @@ $dark-color: #343a40;
124
124
  h2 {
125
125
  margin-bottom: -6px;
126
126
  font-family: "Lato";
127
- font-weight: 700;
127
+ font-weight: 600;
128
128
  font-size: 24px;
129
129
  line-height: 32px;
130
130
  color: var(--_gray-900);
@@ -167,7 +167,7 @@ $dark-color: #343a40;
167
167
  h3 {
168
168
  margin-bottom: 6px;
169
169
  font-family: "Lato";
170
- font-weight: 700;
170
+ font-weight: 600;
171
171
  font-size: 24px;
172
172
  line-height: 32px;
173
173
  color: var(--_gray-900);
@@ -2281,65 +2281,84 @@ $dark-color: #343a40;
2281
2281
  }
2282
2282
  }
2283
2283
  &_col_right {
2284
- .chk_currency_inp {
2285
- height: 44px;
2286
- border: 1px solid var(--_gray-200);
2287
- border-radius: 4px;
2288
- background-color: var(--_base-white);
2284
+ display: flex;
2285
+ flex-direction: column;
2286
+ align-items: flex-end;
2287
+ gap: 5px;
2288
+ .chk_currency_inp_sec {
2289
2289
  display: flex;
2290
- width: 120px;
2291
- overflow: hidden;
2292
- align-items: center;
2293
- padding-inline: 12px;
2294
- gap: 12px;
2295
-
2296
- border-color: var(
2297
- --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
2298
- var(
2299
- --_ctm-tab-dn-an-tb-fm-wr-is-br-cr,
2300
- var(--_ctm-dn-an-tb-fm-wr-is-br-cr)
2301
- )
2302
- );
2303
- border-style: var(
2304
- --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
2305
- var(
2306
- --_ctm-tab-dn-an-tb-fm-wr-is-br-se,
2307
- var(--_ctm-dn-an-tb-fm-wr-is-br-se)
2308
- )
2309
- );
2310
- border-width: var(
2311
- --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
2312
- var(
2313
- --_ctm-tab-dn-an-tb-fm-wr-is-br-wh,
2314
- var(--_ctm-dn-an-tb-fm-wr-is-br-wh)
2315
- )
2316
- );
2317
- border-radius: var(
2318
- --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
2319
- var(
2320
- --_ctm-tab-dn-an-tb-fm-wr-is-br-rs,
2321
- var(--_ctm-dn-an-tb-fm-wr-is-br-rs)
2322
- )
2323
- );
2324
- padding: var(
2325
- --_ctm-mob-dn-an-tb-fm-wr-is-pg,
2326
- var(
2327
- --_ctm-tab-dn-an-tb-fm-wr-is-pg,
2328
- var(--_ctm-dn-an-tb-fm-wr-is-pg)
2329
- )
2330
- );
2331
- &:focus-within {
2332
- border: 1px solid var(--_primary-200);
2333
- outline: 2px solid var(--_primary-50);
2334
- }
2335
- input {
2336
- height: inherit;
2290
+ flex-direction: column;
2291
+ align-items: flex-end;
2292
+ gap: 4px;
2293
+ .chk_currency_inp {
2294
+ height: 44px;
2295
+ border: 1px solid var(--_gray-200);
2296
+ border-radius: 4px;
2337
2297
  background-color: var(--_base-white);
2338
- &:disabled {
2339
- opacity: 0.8;
2340
- cursor: not-allowed;
2298
+ display: flex;
2299
+ width: 120px;
2300
+ overflow: hidden;
2301
+ align-items: center;
2302
+ padding-inline: 12px;
2303
+ gap: 12px;
2304
+
2305
+ border-color: var(
2306
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
2307
+ var(
2308
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-cr,
2309
+ var(--_ctm-dn-an-tb-fm-wr-is-br-cr)
2310
+ )
2311
+ );
2312
+ border-style: var(
2313
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
2314
+ var(
2315
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-se,
2316
+ var(--_ctm-dn-an-tb-fm-wr-is-br-se)
2317
+ )
2318
+ );
2319
+ border-width: var(
2320
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
2321
+ var(
2322
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-wh,
2323
+ var(--_ctm-dn-an-tb-fm-wr-is-br-wh)
2324
+ )
2325
+ );
2326
+ border-radius: var(
2327
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
2328
+ var(
2329
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-rs,
2330
+ var(--_ctm-dn-an-tb-fm-wr-is-br-rs)
2331
+ )
2332
+ );
2333
+ padding: var(
2334
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
2335
+ var(
2336
+ --_ctm-tab-dn-an-tb-fm-wr-is-pg,
2337
+ var(--_ctm-dn-an-tb-fm-wr-is-pg)
2338
+ )
2339
+ );
2340
+ &:focus-within {
2341
+ border: 1px solid var(--_primary-200);
2342
+ outline: 2px solid var(--_primary-50);
2343
+ }
2344
+ input {
2345
+ height: inherit;
2346
+ background-color: var(--_base-white);
2347
+ &:disabled {
2348
+ opacity: 0.8;
2349
+ cursor: not-allowed;
2350
+ }
2341
2351
  }
2342
2352
  }
2353
+ .currency_inp_err_msg {
2354
+ color: #d92d20;
2355
+ font-size: 12px;
2356
+ line-height: 125%;
2357
+ }
2358
+ }
2359
+ .cur_conversion {
2360
+ font-size: 12px;
2361
+ font-weight: 600;
2343
2362
  }
2344
2363
  }
2345
2364
  }
@@ -6300,6 +6319,62 @@ $dark-color: #343a40;
6300
6319
  font-size: 14px;
6301
6320
  font-weight: 600;
6302
6321
  }
6322
+ .chk_currency_inp_sec {
6323
+ display: flex;
6324
+ flex-direction: column;
6325
+ align-items: flex-end;
6326
+ gap: 4px;
6327
+ .chk_currency_inp {
6328
+ height: 44px;
6329
+ border: 1px solid var(--_gray-200);
6330
+ border-radius: 4px;
6331
+ background-color: var(--_base-white);
6332
+ display: flex;
6333
+ width: 120px;
6334
+ overflow: hidden;
6335
+ align-items: center;
6336
+ padding-inline: 12px;
6337
+ gap: 12px;
6338
+
6339
+ border-color: var(
6340
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
6341
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-cr, var(--_ctm-dn-an-tb-fm-wr-is-br-cr))
6342
+ );
6343
+ border-style: var(
6344
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
6345
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-se, var(--_ctm-dn-an-tb-fm-wr-is-br-se))
6346
+ );
6347
+ border-width: var(
6348
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
6349
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-wh, var(--_ctm-dn-an-tb-fm-wr-is-br-wh))
6350
+ );
6351
+ border-radius: var(
6352
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
6353
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-rs, var(--_ctm-dn-an-tb-fm-wr-is-br-rs))
6354
+ );
6355
+ padding: var(
6356
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
6357
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
6358
+ );
6359
+ &:focus-within {
6360
+ border: 1px solid var(--_primary-200);
6361
+ outline: 2px solid var(--_primary-50);
6362
+ }
6363
+ input {
6364
+ height: inherit;
6365
+ background-color: var(--_base-white);
6366
+ &:disabled {
6367
+ opacity: 0.8;
6368
+ cursor: not-allowed;
6369
+ }
6370
+ }
6371
+ }
6372
+ .currency_inp_err_msg {
6373
+ color: #d92d20;
6374
+ font-size: 12px;
6375
+ line-height: 125%;
6376
+ }
6377
+ }
6303
6378
  }
6304
6379
  }
6305
6380
  .add_new_credit_card {
package/dist/contact-us.scss CHANGED
@@ -28,7 +28,55 @@
28
28
  width: 100%;
29
29
  height: 100%;
30
30
  }
31
+ .psw__contain {
32
+ margin-bottom: 24px;
33
+ margin-top: 8px;
31
34
 
35
+ .psw_status {
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: space-between;
39
+ gap: 10px;
40
+ .step {
41
+ // width: 20%;1
42
+ height: 3px;
43
+ border-radius: 4px;
44
+ background-color: var(--_gray-300);
45
+ flex-grow: 1;
46
+ &.active {
47
+ background-color: var(--_success-600);
48
+ }
49
+ }
50
+ }
51
+ .psw_content {
52
+ background-color: var(--_gray-50);
53
+ padding: 16px;
54
+ border-radius: 6px !important;
55
+ // height: 100px;
56
+ max-height: 160px;
57
+ overflow-y: auto;
58
+ // margin-top: 20px;
59
+ margin-top: 5px;
60
+ .title {
61
+ font-size: 14px;
62
+ font-weight: 600;
63
+ color: var(--_gray-700);
64
+ margin-bottom: 16px;
65
+ }
66
+ ul {
67
+ li {
68
+ color: var(--_gray-700);
69
+ font-size: 14px;
70
+ & > span {
71
+ display: inline-flex;
72
+ }
73
+ &:not(:last-child) {
74
+ margin-bottom: 8px;
75
+ }
76
+ }
77
+ }
78
+ }
79
+ }
32
80
  &[data-widget-border="true"] {
33
81
  .search-wrapper {
34
82
  border-color: var(
package/dist/filters.scss CHANGED
@@ -646,8 +646,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
646
646
  gap: 12px;
647
647
  .search__btn {
648
648
  svg {
649
- width: 14px;
650
- height: 14px;
649
+ width: 16px;
650
+ height: 16px;
651
651
  }
652
652
  }
653
653
  }
@@ -657,6 +657,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
657
657
  padding: 6px 10px;
658
658
  border: 1px solid var(--_gray-300);
659
659
  border-radius: 6px;
660
+ width: 100%;
660
661
 
661
662
  button {
662
663
  display: flex;
@@ -1624,7 +1625,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1624
1625
  button {
1625
1626
  display: flex;
1626
1627
  .default-icon {
1627
- display: block;
1628
+ display: flex;
1629
+ justify-content: center;
1630
+ align-items: center;
1628
1631
  }
1629
1632
 
1630
1633
  .hover-icon {
@@ -2055,7 +2058,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2055
2058
  position: relative;
2056
2059
  width: 100%;
2057
2060
  height: 5px;
2058
- margin: 30px 0;
2061
+ margin: 16px 0 30px 0px;
2059
2062
  // background-color: var(--_primary-400);
2060
2063
  background: linear-gradient(
2061
2064
  to right,