@sc-360-v2/storefront-cms-library 0.4.13 → 0.4.15

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 (27) hide show
  1. package/dist/add-existing-form.scss +66 -0
  2. package/dist/allocations.scss +8 -8
  3. package/dist/builder.js +1 -1
  4. package/dist/cart-details.scss +36 -1
  5. package/dist/cart-summary.scss +12 -27
  6. package/dist/cart.scss +15 -13
  7. package/dist/checkout.scss +261 -98
  8. package/dist/contact-us.scss +48 -0
  9. package/dist/filters.scss +16 -6
  10. package/dist/icons.js +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/login.scss +9 -3
  13. package/dist/product-actions.scss +36 -42
  14. package/dist/product-image.scss +5 -0
  15. package/dist/product-sizechart.scss +6 -6
  16. package/dist/profile.scss +27 -18
  17. package/dist/quantity-selector.scss +8 -8
  18. package/dist/repeater.scss +10 -10
  19. package/dist/search.scss +3 -0
  20. package/dist/table.scss +10 -5
  21. package/dist/types/builder/elements/form-builder/index.d.ts +4 -0
  22. package/dist/types/builder/tools/element-edit/profile.d.ts +15 -1
  23. package/dist/types/builder/tools/element-edit/table.d.ts +6 -1
  24. package/dist/user-elements.scss +8 -20
  25. package/dist/variant-picker.scss +3 -3
  26. package/dist/widget.scss +1 -0
  27. 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/cart-summary.scss CHANGED
@@ -1285,7 +1285,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1285
1285
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-wh)};
1286
1286
  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-br-rs)};
1287
1287
  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-at)};
1288
- --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-ad-tt-sg)};
1288
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-gp)};
1289
1289
 
1290
1290
  // for shadow
1291
1291
  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-sw-ae)};
@@ -1328,7 +1328,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1328
1328
  align-items: center;
1329
1329
 
1330
1330
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-at));
1331
- gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-in-ad-tt-sg));
1331
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-gp));
1332
1332
 
1333
1333
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-br-rs));
1334
1334
 
@@ -1428,7 +1428,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1428
1428
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-wh)};
1429
1429
  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-br-rs)};
1430
1430
  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-at)};
1431
- --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-ad-tt-sg)};
1431
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-gp)};
1432
1432
 
1433
1433
  // for shadow
1434
1434
  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-sw-ae)};
@@ -1474,10 +1474,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1474
1474
  align-items: center;
1475
1475
 
1476
1476
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-at));
1477
- gap: var(
1478
- --_sf-hr-in-ad-tt-sg,
1479
- prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-in-ad-tt-sg)
1480
- );
1477
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-gp));
1481
1478
 
1482
1479
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-br-rs));
1483
1480
 
@@ -1589,7 +1586,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1589
1586
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-wh)};
1590
1587
  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-rs)};
1591
1588
  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-at)};
1592
- --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-ad-tt-sg)};
1589
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-gp)};
1593
1590
 
1594
1591
  // for shadow
1595
1592
  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-sw-ae)};
@@ -1635,10 +1632,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1635
1632
  align-items: center;
1636
1633
 
1637
1634
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-at));
1638
- gap: var(
1639
- --_sf-hr-in-ad-tt-sg,
1640
- prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-in-ad-tt-sg)
1641
- );
1635
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-gp));
1642
1636
 
1643
1637
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-br-rs));
1644
1638
 
@@ -1749,7 +1743,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1749
1743
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-wh)};
1750
1744
  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-br-rs)};
1751
1745
  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-at)};
1752
- --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-ad-tt-sg)};
1746
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-gp)};
1753
1747
 
1754
1748
  // for shadow
1755
1749
  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-sw-ae)};
@@ -1795,10 +1789,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1795
1789
  align-items: center;
1796
1790
 
1797
1791
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-at));
1798
- gap: var(
1799
- --_sf-hr-in-ad-tt-sg,
1800
- prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-in-ad-tt-sg)
1801
- );
1792
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-gp));
1802
1793
 
1803
1794
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-br-rs));
1804
1795
 
@@ -1909,7 +1900,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1909
1900
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-wh)};
1910
1901
  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-br-rs)};
1911
1902
  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-at)};
1912
- --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-ad-tt-sg)};
1903
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-gp)};
1913
1904
 
1914
1905
  // for shadow
1915
1906
  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-sw-ae)};
@@ -1955,10 +1946,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1955
1946
  align-items: center;
1956
1947
 
1957
1948
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-at));
1958
- gap: var(
1959
- --_sf-hr-in-ad-tt-sg,
1960
- prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-in-ad-tt-sg)
1961
- );
1949
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-gp));
1962
1950
 
1963
1951
  border-radius: var(
1964
1952
  --_sf-hr-br-rs,
@@ -2088,7 +2076,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2088
2076
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-wh)};
2089
2077
  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-br-rs)};
2090
2078
  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-at)};
2091
- --_sf-hr-in-ad-tt-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-ad-tt-sg)};
2079
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-gp)};
2092
2080
 
2093
2081
  // for shadow
2094
2082
  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-sw-ae)};
@@ -2134,10 +2122,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2134
2122
  align-items: center;
2135
2123
 
2136
2124
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-at));
2137
- gap: var(
2138
- --_sf-hr-in-ad-tt-sg,
2139
- prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-in-ad-tt-sg)
2140
- );
2125
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-gp));
2141
2126
 
2142
2127
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-br-rs));
2143
2128
 
package/dist/cart.scss CHANGED
@@ -37,20 +37,22 @@
37
37
  gap: 8px;
38
38
  .cart__div {
39
39
  position: relative;
40
- svg {
41
- width: var(
42
- --_ctm-mob-dn-ct-in-in-se,
43
- var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
44
- );
45
- height: var(
46
- --_ctm-mob-dn-ct-in-in-se,
47
- var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
48
- );
49
- path {
50
- stroke: var(
51
- --_ctm-mob-dn-ct-in-in-c1,
52
- var(--_ctm-tab-dn-ct-in-in-c1, var(--_ctm-dn-ct-in-in-c1))
40
+ span {
41
+ svg {
42
+ width: var(
43
+ --_ctm-mob-dn-ct-in-in-se,
44
+ var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
45
+ );
46
+ height: var(
47
+ --_ctm-mob-dn-ct-in-in-se,
48
+ var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
53
49
  );
50
+ path {
51
+ stroke: var(
52
+ --_ctm-mob-dn-ct-in-in-c1,
53
+ var(--_ctm-tab-dn-ct-in-in-c1, var(--_ctm-dn-ct-in-in-c1))
54
+ );
55
+ }
54
56
  }
55
57
  }
56
58
 
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);
@@ -2145,6 +2145,7 @@ $dark-color: #343a40;
2145
2145
  justify-content: space-between;
2146
2146
  align-items: center;
2147
2147
  width: 100%;
2148
+ gap: 12px;
2148
2149
  .chk_payment_section_col_left {
2149
2150
  display: flex;
2150
2151
  gap: 12px;
@@ -2155,46 +2156,133 @@ $dark-color: #343a40;
2155
2156
  .chk_payment_section_method {
2156
2157
  display: flex;
2157
2158
  flex-direction: column;
2158
- .chk_payment_section_method_name {
2159
- font-size: 14px;
2160
- // font-weight: 700;
2161
- line-height: 20px;
2162
- // color: var(--_gray-700);
2163
- font-family: var(
2164
- --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-fy,
2165
- var(
2166
- --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-fy,
2167
- var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-fy)
2168
- )
2169
- );
2170
- color: var(
2171
- --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-cr,
2172
- var(
2173
- --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-cr,
2174
- var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-cr)
2175
- )
2176
- );
2177
- font-weight: var(
2178
- --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-wt,
2179
- var(
2180
- --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-wt,
2181
- var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-wt)
2182
- )
2183
- );
2184
- // font-size: var(
2185
- // --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-se,
2186
- // var(
2187
- // --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-se,
2188
- // var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-se)
2189
- // )
2190
- // );
2191
- padding: var(
2192
- --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-pg,
2193
- var(
2194
- --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-pg,
2195
- var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-pg)
2196
- )
2197
- );
2159
+ .chk_payment_section_method_details {
2160
+ display: flex;
2161
+ gap: 12px;
2162
+ .chk_payment_section_method_name {
2163
+ font-size: 14px;
2164
+ // font-weight: 700;
2165
+ line-height: 20px;
2166
+ // color: var(--_gray-700);
2167
+ white-space: nowrap;
2168
+ font-family: var(
2169
+ --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-fy,
2170
+ var(
2171
+ --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-fy,
2172
+ var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-fy)
2173
+ )
2174
+ );
2175
+ color: var(
2176
+ --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-cr,
2177
+ var(
2178
+ --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-cr,
2179
+ var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-cr)
2180
+ )
2181
+ );
2182
+ font-weight: var(
2183
+ --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-wt,
2184
+ var(
2185
+ --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-wt,
2186
+ var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-wt)
2187
+ )
2188
+ );
2189
+ // font-size: var(
2190
+ // --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-se,
2191
+ // var(
2192
+ // --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-se,
2193
+ // var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-ft-se)
2194
+ // )
2195
+ // );
2196
+ padding: var(
2197
+ --_ctm-mob-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-pg,
2198
+ var(
2199
+ --_ctm-tab-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-pg,
2200
+ var(--_ctm-dn-an-tb-pt-md-pt-pe-pl-by-pl-te-pg)
2201
+ )
2202
+ );
2203
+ }
2204
+ .po-container {
2205
+ // padding: 24px;
2206
+ max-width: 800px;
2207
+ .po-grid {
2208
+ display: grid;
2209
+ grid-template-columns: repeat(3, 1fr);
2210
+ // gap: 16px;
2211
+ .po-input {
2212
+ // height: 44px;
2213
+ border: 1px solid var(--_gray-200);
2214
+ border-radius: 4px;
2215
+ background-color: var(--_base-white);
2216
+ display: flex;
2217
+ // width: 120px;
2218
+ overflow: hidden;
2219
+ align-items: center;
2220
+ padding-inline: 12px;
2221
+ gap: 12px;
2222
+
2223
+ border-color: var(
2224
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
2225
+ var(
2226
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-cr,
2227
+ var(--_ctm-dn-an-tb-fm-wr-is-br-cr)
2228
+ )
2229
+ );
2230
+ border-style: var(
2231
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
2232
+ var(
2233
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-se,
2234
+ var(--_ctm-dn-an-tb-fm-wr-is-br-se)
2235
+ )
2236
+ );
2237
+ border-width: var(
2238
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
2239
+ var(
2240
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-wh,
2241
+ var(--_ctm-dn-an-tb-fm-wr-is-br-wh)
2242
+ )
2243
+ );
2244
+ border-radius: var(
2245
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
2246
+ var(
2247
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-rs,
2248
+ var(--_ctm-dn-an-tb-fm-wr-is-br-rs)
2249
+ )
2250
+ );
2251
+ padding: var(
2252
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
2253
+ var(
2254
+ --_ctm-tab-dn-an-tb-fm-wr-is-pg,
2255
+ var(--_ctm-dn-an-tb-fm-wr-is-pg)
2256
+ )
2257
+ );
2258
+
2259
+ &:focus {
2260
+ border: 1px solid var(--_primary-200);
2261
+ outline: 2px solid var(--_primary-50);
2262
+ }
2263
+ &:disabled {
2264
+ color: #aaa;
2265
+ background-color: #f9f9f9;
2266
+ border-color: #ddd;
2267
+ cursor: not-allowed;
2268
+ overflow: hidden;
2269
+ }
2270
+ }
2271
+ .p1-input {
2272
+ border-top-right-radius: 0;
2273
+ border-bottom-right-radius: 0;
2274
+ }
2275
+ .p2-input {
2276
+ border-radius: 0;
2277
+ border-left: none;
2278
+ border-right: none;
2279
+ }
2280
+ .p3-input {
2281
+ border-top-left-radius: 0;
2282
+ border-bottom-left-radius: 0;
2283
+ }
2284
+ }
2285
+ }
2198
2286
  }
2199
2287
  & > div {
2200
2288
  display: flex;
@@ -2281,65 +2369,84 @@ $dark-color: #343a40;
2281
2369
  }
2282
2370
  }
2283
2371
  &_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);
2372
+ display: flex;
2373
+ flex-direction: column;
2374
+ align-items: flex-end;
2375
+ gap: 5px;
2376
+ .chk_currency_inp_sec {
2289
2377
  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;
2378
+ flex-direction: column;
2379
+ align-items: flex-end;
2380
+ gap: 4px;
2381
+ .chk_currency_inp {
2382
+ height: 44px;
2383
+ border: 1px solid var(--_gray-200);
2384
+ border-radius: 4px;
2337
2385
  background-color: var(--_base-white);
2338
- &:disabled {
2339
- opacity: 0.8;
2340
- cursor: not-allowed;
2386
+ display: flex;
2387
+ width: 120px;
2388
+ overflow: hidden;
2389
+ align-items: center;
2390
+ padding-inline: 12px;
2391
+ gap: 12px;
2392
+
2393
+ border-color: var(
2394
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
2395
+ var(
2396
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-cr,
2397
+ var(--_ctm-dn-an-tb-fm-wr-is-br-cr)
2398
+ )
2399
+ );
2400
+ border-style: var(
2401
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
2402
+ var(
2403
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-se,
2404
+ var(--_ctm-dn-an-tb-fm-wr-is-br-se)
2405
+ )
2406
+ );
2407
+ border-width: var(
2408
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
2409
+ var(
2410
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-wh,
2411
+ var(--_ctm-dn-an-tb-fm-wr-is-br-wh)
2412
+ )
2413
+ );
2414
+ border-radius: var(
2415
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
2416
+ var(
2417
+ --_ctm-tab-dn-an-tb-fm-wr-is-br-rs,
2418
+ var(--_ctm-dn-an-tb-fm-wr-is-br-rs)
2419
+ )
2420
+ );
2421
+ padding: var(
2422
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
2423
+ var(
2424
+ --_ctm-tab-dn-an-tb-fm-wr-is-pg,
2425
+ var(--_ctm-dn-an-tb-fm-wr-is-pg)
2426
+ )
2427
+ );
2428
+ &:focus-within {
2429
+ border: 1px solid var(--_primary-200);
2430
+ outline: 2px solid var(--_primary-50);
2431
+ }
2432
+ input {
2433
+ height: inherit;
2434
+ background-color: var(--_base-white);
2435
+ &:disabled {
2436
+ opacity: 0.8;
2437
+ cursor: not-allowed;
2438
+ }
2341
2439
  }
2342
2440
  }
2441
+ .currency_inp_err_msg {
2442
+ color: #d92d20;
2443
+ font-size: 12px;
2444
+ line-height: 125%;
2445
+ }
2446
+ }
2447
+ .cur_conversion {
2448
+ font-size: 12px;
2449
+ font-weight: 600;
2343
2450
  }
2344
2451
  }
2345
2452
  }
@@ -6300,6 +6407,62 @@ $dark-color: #343a40;
6300
6407
  font-size: 14px;
6301
6408
  font-weight: 600;
6302
6409
  }
6410
+ .chk_currency_inp_sec {
6411
+ display: flex;
6412
+ flex-direction: column;
6413
+ align-items: flex-end;
6414
+ gap: 4px;
6415
+ .chk_currency_inp {
6416
+ height: 44px;
6417
+ border: 1px solid var(--_gray-200);
6418
+ border-radius: 4px;
6419
+ background-color: var(--_base-white);
6420
+ display: flex;
6421
+ width: 120px;
6422
+ overflow: hidden;
6423
+ align-items: center;
6424
+ padding-inline: 12px;
6425
+ gap: 12px;
6426
+
6427
+ border-color: var(
6428
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
6429
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-cr, var(--_ctm-dn-an-tb-fm-wr-is-br-cr))
6430
+ );
6431
+ border-style: var(
6432
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-se,
6433
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-se, var(--_ctm-dn-an-tb-fm-wr-is-br-se))
6434
+ );
6435
+ border-width: var(
6436
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-wh,
6437
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-wh, var(--_ctm-dn-an-tb-fm-wr-is-br-wh))
6438
+ );
6439
+ border-radius: var(
6440
+ --_ctm-mob-dn-an-tb-fm-wr-is-br-rs,
6441
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-br-rs, var(--_ctm-dn-an-tb-fm-wr-is-br-rs))
6442
+ );
6443
+ padding: var(
6444
+ --_ctm-mob-dn-an-tb-fm-wr-is-pg,
6445
+ var(--_ctm-tab-dn-an-tb-fm-wr-is-pg, var(--_ctm-dn-an-tb-fm-wr-is-pg))
6446
+ );
6447
+ &:focus-within {
6448
+ border: 1px solid var(--_primary-200);
6449
+ outline: 2px solid var(--_primary-50);
6450
+ }
6451
+ input {
6452
+ height: inherit;
6453
+ background-color: var(--_base-white);
6454
+ &:disabled {
6455
+ opacity: 0.8;
6456
+ cursor: not-allowed;
6457
+ }
6458
+ }
6459
+ }
6460
+ .currency_inp_err_msg {
6461
+ color: #d92d20;
6462
+ font-size: 12px;
6463
+ line-height: 125%;
6464
+ }
6465
+ }
6303
6466
  }
6304
6467
  }
6305
6468
  .add_new_credit_card {