@sc-360-v2/storefront-cms-library 0.3.46 → 0.3.48

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 (30) hide show
  1. package/dist/add-products-tab copy.scss +1131 -0
  2. package/dist/allocationDetails.scss +2020 -479
  3. package/dist/allocations.scss +984 -166
  4. package/dist/builder.js +1 -1
  5. package/dist/button.scss +2 -8
  6. package/dist/buy-for-tab.scss +3 -1
  7. package/dist/cartAttributes.scss +705 -344
  8. package/dist/cartDropdownOverlay.scss +0 -1
  9. package/dist/checkout.scss +131 -6
  10. package/dist/confirmationModal.scss +1 -0
  11. package/dist/customization-tree.scss +42 -26
  12. package/dist/gallery-slider-temp.scss +85 -83
  13. package/dist/image-temp.scss +2 -1
  14. package/dist/language-selector.scss +3 -1
  15. package/dist/modal.scss +2 -1
  16. package/dist/prefix-list.scss +1 -1
  17. package/dist/product-image.scss +93 -84
  18. package/dist/profile.scss +84 -21
  19. package/dist/quota-details.scss +265 -0
  20. package/dist/shipping-payments.scss +1733 -0
  21. package/dist/theme-classes.scss +296 -0
  22. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +32 -1
  23. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +2 -1
  24. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +4 -0
  25. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +79 -0
  26. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +0 -8
  27. package/dist/types/builder/tools/element-edit/profile.d.ts +17 -1
  28. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +1012 -14
  29. package/dist/widget.scss +2 -2
  30. package/package.json +1 -1
package/dist/cartDropdownOverlay.scss CHANGED
@@ -208,7 +208,6 @@ $button-padding: 6px 12px;
208
208
  justify-content: center;
209
209
  flex: 1 0 0;
210
210
  margin: $spacing-md 0px;
211
-
212
211
  &.disabled {
213
212
  opacity: 0.5;
214
213
  pointer-events: none;
package/dist/checkout.scss CHANGED
@@ -208,14 +208,12 @@ $dark-color: #343a40;
208
208
  }
209
209
 
210
210
  .chk_checkout_accordion {
211
- font-family: Arial, sans-serif;
212
- font-size: 0.95rem;
213
- color: $dark-color;
214
211
  display: flex;
215
212
  padding: var(--_ctm-lt-pg);
216
213
  flex-direction: column;
217
214
  gap: var(--_ctm-lt-te-ad-it-gp);
218
215
  word-break: keep-all;
216
+ padding-bottom: 24px;
219
217
 
220
218
  .chk_checkout_title {
221
219
  color: var(--_ctm-dn-ct-hg-dn-cr);
@@ -316,6 +314,7 @@ $dark-color: #343a40;
316
314
  }
317
315
 
318
316
  .accordion-body {
317
+ margin-bottom: 16px;
319
318
  .summary {
320
319
  .chk_shipping_method_label {
321
320
  display: flex;
@@ -1100,6 +1099,129 @@ $dark-color: #343a40;
1100
1099
  text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1101
1100
  }
1102
1101
 
1102
+ // gift card styles
1103
+ .chk_gft_crd_wrapper {
1104
+ display: flex;
1105
+ justify-content: space-between;
1106
+ align-items: center;
1107
+ padding: 16px 16px 0 16px;
1108
+ &_item {
1109
+ display: flex;
1110
+ align-items: center;
1111
+ gap: 16px;
1112
+ &_icon {
1113
+ width: 40px;
1114
+ height: 40px;
1115
+ border: 1px solid var(--_gray-200);
1116
+ border-radius: 6px;
1117
+ display: flex;
1118
+ justify-content: center;
1119
+ align-items: center;
1120
+ }
1121
+ &_info {
1122
+ display: flex;
1123
+ flex-direction: column;
1124
+ &_title {
1125
+ font-size: 14px;
1126
+ margin-bottom: 4px;
1127
+ font-weight: 600;
1128
+ }
1129
+ &_desc {
1130
+ display: flex;
1131
+ &_value {
1132
+ font-size: 12px;
1133
+ color: var(--_gray-600);
1134
+ }
1135
+ &_label {
1136
+ font-size: 12px;
1137
+ color: var(--_gray-900);
1138
+ }
1139
+ }
1140
+ }
1141
+ &_pin {
1142
+ margin-left: 36px;
1143
+ input[type="number"] {
1144
+ border: 1px solid var(--_gray-300);
1145
+ border-radius: 4px;
1146
+ background-color: var(--_base-white);
1147
+ width: 95px;
1148
+ height: 44px;
1149
+ padding-inline: 10px;
1150
+ &:focus {
1151
+ outline: 2px solid var(--_primary-100);
1152
+ border: 1px solid var(--_primary-300);
1153
+ }
1154
+ }
1155
+ }
1156
+ }
1157
+
1158
+ &_input {
1159
+ border: 1px solid var(--_gray-300);
1160
+ border-radius: 4px;
1161
+ background-color: var(--_base-white);
1162
+ height: 44px;
1163
+ width: 100px;
1164
+ display: flex;
1165
+ align-items: center;
1166
+ gap: 8px;
1167
+ padding-left: 10px;
1168
+ input[type="number"] {
1169
+ background-color: var(--_base-white);
1170
+ padding-right: 10px;
1171
+ }
1172
+ &:focus-within {
1173
+ outline: 2px solid var(--_primary-100);
1174
+ border: 1px solid var(--_primary-300);
1175
+ }
1176
+ }
1177
+ }
1178
+ .chk_gft_crd_wrapper {
1179
+ &_btn {
1180
+ text-align: left;
1181
+ margin-bottom: 16px;
1182
+ color: var(--_primary-400);
1183
+ &:hover {
1184
+ text-decoration: underline;
1185
+ }
1186
+ }
1187
+ }
1188
+
1189
+ // payment other options styles
1190
+ .chk_pmnt_other_options {
1191
+ display: flex;
1192
+ justify-content: space-between;
1193
+ gap: 80px;
1194
+ padding: 16px;
1195
+ .chk_pmnt_other_options_left_container {
1196
+ display: flex;
1197
+ gap: 12px;
1198
+ .chk_pmnt_option_info_wrapper {
1199
+ display: flex;
1200
+ gap: 12px;
1201
+ .cards {
1202
+ display: flex;
1203
+ flex-direction: column;
1204
+ gap: 8px;
1205
+ .chk_payment_options_name {
1206
+ font-weight: 600;
1207
+ }
1208
+ span {
1209
+ font-size: 12px;
1210
+ .chk_payment_options_label {
1211
+ color: var(--_gray-600);
1212
+ }
1213
+ .chk_payment_options_value {
1214
+ color: var(--_gray-900);
1215
+ }
1216
+ }
1217
+ }
1218
+ }
1219
+ }
1220
+ .chk_pmnt_other_options_container {
1221
+ padding: 16px;
1222
+ }
1223
+ }
1224
+
1103
1225
  &__other_option_wrapper {
1104
1226
  display: flex;
1105
1227
  width: 100%;
@@ -1113,8 +1235,12 @@ $dark-color: #343a40;
1113
1235
 
1114
1236
  &_left_container {
1115
1237
  display: flex;
1116
- gap: 12px;
1238
+ gap: 80px;
1117
1239
  align-items: flex-start;
1240
+ & > div {
1241
+ display: flex;
1242
+ gap: 12px;
1243
+ }
1118
1244
 
1119
1245
  @media (max-width: 500px) {
1120
1246
  flex-wrap: wrap;
@@ -1176,7 +1302,6 @@ $dark-color: #343a40;
1176
1302
  &__info_wrapper {
1177
1303
  display: flex;
1178
1304
  flex-direction: column;
1179
- white-space: nowrap;
1180
1305
 
1181
1306
  .chk_payment_options_name {
1182
1307
  color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
@@ -1224,7 +1349,7 @@ $dark-color: #343a40;
1224
1349
 
1225
1350
  &_input {
1226
1351
  display: flex;
1227
- padding: 10px 12px;
1352
+ padding: 9px 12px;
1228
1353
  align-items: center;
1229
1354
  max-width: 96px;
1230
1355
  background-color: var(--_ctm-dn-pt-os-dn-pt-os-it-dn-dt-se-bd-cr);
package/dist/confirmationModal.scss CHANGED
@@ -40,6 +40,7 @@
40
40
  font-size: 14px;
41
41
  color: #475467;
42
42
  text-align: left;
43
+ line-height: 24px;
43
44
  }
44
45
  }
45
46
 
package/dist/customization-tree.scss CHANGED
@@ -109,33 +109,49 @@ $link-color: #243dc6;
109
109
  }
110
110
 
111
111
  // customization tree
112
- .lightbox-overlay {
113
- background: red;
114
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
115
- border-radius: 6px;
116
- padding: 10px;
117
- min-width: 200px;
118
- height: 100px;
119
- transition: all 0.3s ease;
120
112
 
121
- &.top {
122
- transform-origin: bottom;
113
+ .modal-overlay-main-element {
114
+ .modal-overlay-backdrop {
115
+ position: fixed;
116
+ top: 0;
117
+ left: 0;
118
+ width: 100%;
119
+ height: 100%;
120
+ background-color: rgba(0, 0, 0, 0.2);
121
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
122
+ animation: fadeIn 0.4s forwards;
123
+ cursor: auto;
123
124
  }
124
-
125
- &.bottom {
126
- transform-origin: top;
127
- }
128
-
129
- .custom_attr_lb_img img {
130
- max-width: 100%;
131
- height: auto;
132
- display: block;
133
- }
134
-
135
- .custom_attr_lb_footer {
136
- margin-top: 8px;
137
- font-size: 12px;
138
- text-align: center;
139
- color: #555;
125
+ .modal-overlay-container {
126
+ position: fixed;
127
+ top: 50%;
128
+ left: 50%;
129
+ transform: translate(-50%, -50%);
130
+ background-color: var(--_base-white);
131
+ width: var(--_sf-ml-wh, 450px);
132
+ max-width: 250px;
133
+ height: 300px;
134
+ padding: 12px;
135
+ border-radius: 6px;
136
+ display: flex;
137
+ flex-direction: column;
138
+ gap: 12px;
139
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
140
+ cursor: auto;
141
+ .custom_image_overlay {
142
+ .custom_image_container {
143
+ height: 230px;
144
+ width: 100%;
145
+ background-color: var(--_gray-200);
146
+ }
147
+ .custom_image_footer {
148
+ width: 100%;
149
+ background-color: var(-_base-white);
150
+ display: flex;
151
+ justify-content: space-between;
152
+ align-items: center;
153
+ padding: 16px;
154
+ }
155
+ }
140
156
  }
141
157
  }
package/dist/gallery-slider-temp.scss CHANGED
@@ -570,19 +570,7 @@
570
570
  justify-content: space-between;
571
571
  transform: translate(-50%, -50%);
572
572
  // padding-left: 20px;
573
- &[data-control-type="Side"] {
574
- .left-button,
575
- .right-button {
576
- background-color: transparent;
577
- }
578
- }
579
- &[data-background-shape="Round"] {
580
- .left-button,
581
- .right-button {
582
- background-color: #f2f5f5;
583
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
584
- }
585
- }
573
+
586
574
  &[data-control-type="Bottom-Overflow"] {
587
575
  transform: translateX(-50%);
588
576
  width: 100%;
@@ -599,90 +587,104 @@
599
587
  gap: 12px;
600
588
  margin-top: 10px;
601
589
  }
602
- .left-button {
603
- padding: 10px;
604
- border-radius: 50%;
605
- border: none;
606
- width: var(
607
- --_ctm-mob-dn-pn-as-aw-se,
608
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
609
- );
610
- height: var(
611
- --_ctm-mob-dn-pn-as-aw-se,
612
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
613
- );
590
+ }
591
+ .left-button {
592
+ padding: 10px;
593
+ border-radius: 50%;
594
+ border: none;
595
+ width: var(
596
+ --_ctm-mob-dn-pn-as-aw-se,
597
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
598
+ );
599
+ height: var(
600
+ --_ctm-mob-dn-pn-as-aw-se,
601
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
602
+ );
614
603
 
615
- display: flex;
616
- align-items: center;
617
- justify-content: center;
618
- cursor: pointer;
619
- outline: none;
620
- margin-left: 12px;
621
- &:disabled {
622
- & svg {
623
- path {
624
- stroke: rgb(192, 192, 192);
625
- }
604
+ display: flex;
605
+ align-items: center;
606
+ justify-content: center;
607
+ cursor: pointer;
608
+ outline: none;
609
+ margin-left: 12px;
610
+ &:disabled {
611
+ & svg {
612
+ path {
613
+ stroke: rgb(192, 192, 192);
626
614
  }
627
615
  }
628
616
  }
629
- .right-button {
630
- border-radius: 50%;
631
- border: none;
632
- width: var(
633
- --_ctm-mob-dn-pn-as-aw-se,
634
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
635
- );
636
- height: var(
637
- --_ctm-mob-dn-pn-as-aw-se,
638
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
639
- );
617
+ }
618
+ .right-button {
619
+ border-radius: 50%;
620
+ border: none;
621
+ width: var(
622
+ --_ctm-mob-dn-pn-as-aw-se,
623
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
624
+ );
625
+ height: var(
626
+ --_ctm-mob-dn-pn-as-aw-se,
627
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
628
+ );
640
629
 
641
- display: flex;
642
- align-items: center;
643
- justify-content: center;
644
- cursor: pointer;
645
- outline: none;
646
- margin-right: 12px;
647
- padding: 10px;
648
-
649
- &:disabled {
650
- & svg {
651
- path {
652
- stroke: rgb(192, 192, 192);
653
- }
630
+ display: flex;
631
+ align-items: center;
632
+ justify-content: center;
633
+ cursor: pointer;
634
+ outline: none;
635
+ margin-right: 12px;
636
+ padding: 10px;
637
+
638
+ &:disabled {
639
+ & svg {
640
+ path {
641
+ stroke: rgb(192, 192, 192);
654
642
  }
655
643
  }
656
644
  }
657
- .icon {
658
- display: flex;
645
+ }
646
+ .icon {
647
+ display: flex;
659
648
 
660
- svg {
661
- width: calc(
662
- var(
663
- --_ctm-mob-dn-pn-as-aw-se,
664
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
665
- ) *
666
- 0.5
667
- );
668
- height: calc(
669
- var(
670
- --_ctm-mob-dn-pn-as-aw-se,
671
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
672
- ) *
673
- 0.5
674
- );
649
+ svg {
650
+ width: calc(
651
+ var(
652
+ --_ctm-mob-dn-pn-as-aw-se,
653
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
654
+ ) *
655
+ 0.5
656
+ );
657
+ height: calc(
658
+ var(
659
+ --_ctm-mob-dn-pn-as-aw-se,
660
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
661
+ ) *
662
+ 0.5
663
+ );
675
664
 
676
- path {
677
- stroke: var(
678
- --_ctm-mob-dn-pn-as-aw-cr,
679
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
680
- );
681
- }
665
+ path {
666
+ stroke: var(
667
+ --_ctm-mob-dn-pn-as-aw-cr,
668
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
669
+ );
682
670
  }
683
671
  }
684
672
  }
685
673
 
674
+ &[data-control-type="Side"] {
675
+ .left-button,
676
+ .right-button {
677
+ background-color: transparent;
678
+ }
679
+ }
680
+ &[data-background-shape="Round"] {
681
+ .left-button,
682
+ .right-button {
683
+ background-color: #f2f5f5;
684
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
685
+ }
686
+ }
687
+
686
688
  &[data-control-type="Side"] {
687
689
  .embla__viewport {
688
690
  width: calc(100% - 120px);
package/dist/image-temp.scss CHANGED
@@ -4,7 +4,8 @@
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="image"],
6
6
  &[data-element-type="brandImage"],
7
- &[data-element-type="categoryImage"] {
7
+ &[data-element-type="categoryImage"],
8
+ &[data-element-type="productBrandImage"] {
8
9
  cursor: pointer;
9
10
  // width: var(--_lt-wh);
10
11
  // height: var(--_lt-ht);
package/dist/language-selector.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @use "./functions.scss" as *;
4
4
 
5
5
  [data-div-type="element"] {
6
- &[data-element-type="languageMenu"] {
6
+ &[data-element-type="languageMenu"],
7
+ &[data-element-type="currencySelector"],
8
+ &[data-element-type="warehouseSelector"] {
7
9
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
8
10
 
9
11
  & > .wrapper {
package/dist/modal.scss CHANGED
@@ -166,7 +166,8 @@ $active_btn_text_color: #fff;
166
166
  justify-content: center;
167
167
 
168
168
  &:hover {
169
- background-color: darken(#d92d20, 5%);
169
+ // background-color: darken(#d92d20, 5%);
170
+ background-color: color-mix(in srgb, #d92d20 95%, var(--_base-black) 5%);
170
171
  }
171
172
  }
172
173
  }
package/dist/prefix-list.scss CHANGED
@@ -75,7 +75,7 @@ $VariableTypes: (
75
75
  @if ($type != maxHeight) {
76
76
  &#{$elementSelector} {
77
77
  &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
78
- #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type), $defaultValue})};
78
+ #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)}, $defaultValue)};
79
79
  }
80
80
  }
81
81
  }