@sc-360-v2/storefront-cms-library 0.2.97 → 0.2.99

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 (33) hide show
  1. package/dist/amount-estimator.scss +291 -226
  2. package/dist/builder.js +1 -1
  3. package/dist/button.scss +1 -1
  4. package/dist/buy-for-tab.scss +8 -7
  5. package/dist/cartDropdownOverlay.scss +0 -13
  6. package/dist/faq.scss +20 -24
  7. package/dist/icon-list.scss +76 -13
  8. package/dist/icons.js +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/map.scss +35 -35
  11. package/dist/menu-item.scss +19 -0
  12. package/dist/menu-v2.scss +695 -0
  13. package/dist/order-status.scss +483 -0
  14. package/dist/pickup-locations.scss +22 -19
  15. package/dist/product-options.scss +118 -76
  16. package/dist/quick-links.scss +186 -143
  17. package/dist/quotes.scss +1 -0
  18. package/dist/repeater-item.scss +1 -0
  19. package/dist/section.scss +29 -78
  20. package/dist/stack.scss +16 -61
  21. package/dist/store-locations.scss +21 -20
  22. package/dist/tab-v2.scss +8 -7
  23. package/dist/table-common.scss +510 -0
  24. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +6 -1
  25. package/dist/types/builder/tools/element-edit/icon-list.d.ts +73 -7
  26. package/dist/types/builder/tools/element-edit/menu_v2.d.ts +4 -0
  27. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +94 -1
  28. package/dist/uom-selector.scss +929 -1416
  29. package/dist/variant-picker.scss +416 -68
  30. package/dist/volume-pricing copy.scss +1092 -0
  31. package/dist/volume-pricing.scss +1007 -606
  32. package/dist/widget.scss +3 -0
  33. package/package.json +1 -1
package/dist/amount-estimator.scss CHANGED
@@ -31,12 +31,50 @@
31
31
  color: rgba(75, 69, 70, 1);
32
32
  }
33
33
  .amount__estimator_container {
34
+ background-color: var(
35
+ --_ctm-mob-dn-wt-se-bd-cr,
36
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
37
+ );
38
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
39
+ display: flex;
40
+ flex-direction: column;
41
+ --_sf-gp: var(
42
+ --_ctm-mob-lt-im-sg,
43
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
44
+ );
45
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
46
+ row-gap: var(--_sf-gp);
47
+ width: 100%;
48
+ // height: 100%;
49
+ border-color: var(
50
+ --_ctm-mob-dn-wt-se-br-cr,
51
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
52
+ );
53
+ border-style: var(
54
+ --_ctm-mob-dn-wt-se-br-se,
55
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
56
+ );
57
+ border-width: var(
58
+ --_ctm-mob-dn-wt-se-br-wh,
59
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
60
+ );
61
+ border-radius: var(
62
+ --_ctm-mob-dn-wt-se-br-rs,
63
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
64
+ );
65
+ box-shadow: var(
66
+ --_show-shadow,
67
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
68
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
69
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
70
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
71
+ );
34
72
  .button_main {
35
73
  border: 1px solid var(--_gray-600);
36
74
  width: 100%;
37
75
  height: auto;
38
76
  overflow-y: auto;
39
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
77
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
40
78
  //Input button group
41
79
  .input__btn__group {
42
80
  display: flex;
@@ -50,162 +88,150 @@
50
88
  // & > div {
51
89
  // width: 100%;
52
90
  // }
53
- .search__btn {
91
+
92
+ .search-container {
54
93
  width: 100%;
55
- border: 1px solid #d0d5dd;
56
- display: flex;
57
- gap: 12px;
58
- padding-inline: 10px;
59
- height: 40px;
94
+ height: 100%;
95
+ &.dropdown {
96
+ &:focus-within {
97
+ .dropdown__options {
98
+ display: block;
99
+ }
100
+ }
101
+ }
102
+ }
60
103
 
104
+ .search-wrapper {
105
+ display: flex;
106
+ align-items: center;
107
+ width: 100%;
108
+ height: 100%;
109
+ border: 1px solid var(--_gray-200);
61
110
  background-color: var(
62
- --_ctm-mob-dn-it-se-bd-cr,
63
- var(--_ctm-tab-dn-it-se-bd-cr, var(--_ctm-dn-it-se-bd-cr))
111
+ --_ctm-mob-dn-sh-br-bd-cr,
112
+ var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr))
64
113
  );
65
-
66
114
  border-color: var(
67
- --_show-border-im-se,
68
- var(
69
- --_ctm-mob-dn-it-se-br-cr,
70
- var(--_ctm-tab-dn-it-se-br-cr, var(--_ctm-dn-it-se-br-cr))
71
- )
115
+ --_ctm-mob-dn-sh-br-br-cr,
116
+ var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
72
117
  );
73
118
  border-style: var(
74
- --_show-border-im-se,
75
- var(
76
- --_ctm-mob-dn-it-se-br-se,
77
- var(--_ctm-tab-dn-it-se-br-se, var(--_ctm-dn-it-se-br-se))
78
- )
119
+ --_ctm-mob-dn-sh-br-br-se,
120
+ var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
79
121
  );
80
122
  border-width: var(
81
- --_show-border-im-se,
82
- var(
83
- --_ctm-mob-dn-it-se-br-wh,
84
- var(--_ctm-tab-dn-it-se-br-wh, var(--_ctm-dn-it-se-br-wh))
85
- )
123
+ --_ctm-mob-dn-sh-br-br-wh,
124
+ var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
86
125
  );
87
-
88
- border-radius: var(
89
- --_ctm-mob-dn-it-se-br-rs,
90
- var(--_ctm-tab-dn-it-se-br-rs, var(--_ctm-dn-it-se-br-rs, var(--_tst-dn-br-rs)))
91
- );
92
-
93
126
  box-shadow: var(
94
- --_show-shadow-im-se,
127
+ --_show-shadow,
95
128
  var(
96
- --_ctm-mob-dn-it-se-sw-ae,
97
- var(--_ctm-tab-dn-it-se-sw-ae, var(--_ctm-dn-it-se-sw-ae))
129
+ --_ctm-mob-dn-sh-br-sw-ae,
130
+ var(--_ctm-tab-dn-sh-br-sw-ae, var(--_ctm-dn-sh-br-sw-ae))
98
131
  )
99
132
  var(
100
- --_ctm-mob-dn-it-se-sw-br,
101
- var(--_ctm-tab-dn-it-se-sw-br, var(--_ctm-dn-it-se-sw-br))
133
+ --_ctm-mob-dn-sh-br-sw-br,
134
+ var(--_ctm-tab-dn-sh-br-sw-br, var(--_ctm-dn-sh-br-sw-br))
102
135
  )
103
136
  var(
104
- --_ctm-mob-dn-it-se-sw-sd,
105
- var(--_ctm-tab-dn-it-se-sw-sd, var(--_ctm-dn-it-se-sw-sd))
137
+ --_ctm-mob-dn-sh-br-sw-sd,
138
+ var(--_ctm-tab-dn-sh-br-sw-sd, var(--_ctm-dn-sh-br-sw-sd))
106
139
  )
107
140
  var(
108
- --_ctm-mob-dn-it-se-sw-cr,
109
- var(--_ctm-tab-dn-it-se-sw-cr, var(--_ctm-dn-it-se-sw-cr))
141
+ --_ctm-mob-dn-sh-br-sw-cr,
142
+ var(--_ctm-tab-dn-sh-br-sw-cr, var(--_ctm-dn-sh-br-sw-cr))
110
143
  )
111
144
  );
145
+ border-radius: var(
146
+ --_ctm-mob-dn-sh-br-br-rs,
147
+ var(--_ctm-tab-dn-sh-br-br-rs, var(--_ctm-dn-sh-br-br-rs))
148
+ );
112
149
 
113
- svg {
114
- width: var(
115
- --_ctm-mob-dn-it-se-in-se,
116
- var(--_ctm-tab-dn-it-se-in-se, var(--_ctm-dn-it-se-in-se))
117
- );
118
- height: var(
119
- --_ctm-mob-dn-it-se-in-se,
120
- var(--_ctm-tab-dn-it-se-in-se, var(--_ctm-dn-it-se-in-se))
121
- );
122
- path {
123
- stroke: var(
124
- --_ctm-mob-dn-it-se-in-c1,
125
- var(--_ctm-tab-dn-it-se-in-c1, var(--_ctm-dn-it-se-in-c1))
150
+ .search-icon {
151
+ font-size: 18px;
152
+ margin-right: 8px;
153
+ color: #555;
154
+ }
155
+
156
+ .search-input {
157
+ flex-grow: 1;
158
+ border: none;
159
+ outline: none;
160
+ padding: 8px;
161
+ font-size: 14px;
162
+ color: #333;
163
+ background: transparent;
164
+ border-radius: 6px;
165
+
166
+ &::placeholder {
167
+ color: var(
168
+ --_ctm-mob-dn-pr-tt-cr,
169
+ var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr))
170
+ );
171
+ font-family: var(
172
+ --_ctm-mob-dn-pr-tt-ft-fy,
173
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
174
+ ),
175
+ sans-serif;
176
+ font-size: var(
177
+ --_ctm-mob-dn-pr-tt-ft-se,
178
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
179
+ );
180
+ font-weight: var(
181
+ --_ctm-mob-dn-pr-tt-ft-wt,
182
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
183
+ );
184
+ font-style: var(
185
+ --_ctm-mob-dn-pr-tt-ft-se-ic,
186
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
187
+ );
188
+ text-align: var(
189
+ --_ctm-mob-dn-pr-tt-tt-an,
190
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
191
+ );
192
+ letter-spacing: var(
193
+ --_ctm-mob-dn-pr-tt-lr-sg,
194
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
195
+ );
196
+ line-height: var(
197
+ --_ctm-mob-dn-pr-tt-le-ht,
198
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
199
+ );
200
+ text-decoration: var(
201
+ --_ctm-mob-dn-pr-tt-ue,
202
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
126
203
  );
127
204
  }
128
205
  }
129
206
 
130
- input[type="text"] {
131
- height: auto;
132
- color: var(
133
- --_ctm-mob-dn-it-se-cr,
134
- var(--_ctm-tab-dn-it-se-cr, var(--_ctm-dn-it-se-cr))
135
- );
136
- font-family: var(
137
- --_ctm-mob-dn-it-se-ft-fy,
138
- var(--_ctm-tab-dn-it-se-ft-fy, var(--_ctm-dn-it-se-ft-fy))
139
- ),
140
- sans-serif;
141
- font-size: var(
142
- --_ctm-mob-dn-it-se-ft-se,
143
- var(--_ctm-tab-dn-it-se-ft-se, var(--_ctm-dn-it-se-ft-se))
144
- );
145
- font-weight: var(
146
- --_ctm-mob-dn-it-se-ft-wt,
147
- var(--_ctm-tab-dn-it-se-ft-wt, var(--_ctm-dn-it-se-ft-wt))
148
- );
149
- font-style: var(
150
- --_ctm-mob-dn-it-se-ft-se-ic,
151
- var(--_ctm-tab-dn-it-se-ft-se-ic, var(--_ctm-dn-it-se-ft-se-ic))
152
- );
153
- text-align: var(
154
- --_ctm-mob-dn-it-se-tt-an,
155
- var(--_ctm-tab-dn-it-se-tt-an, var(--_ctm-dn-it-se-tt-an))
156
- );
157
- letter-spacing: var(
158
- --_ctm-mob-dn-it-se-lr-sg,
159
- var(--_ctm-tab-dn-it-se-lr-sg, var(--_ctm-dn-it-se-lr-sg))
160
- );
161
- line-height: var(
162
- --_ctm-mob-dn-it-se-le-ht,
163
- var(--_ctm-tab-dn-it-se-le-ht, var(--_ctm-dn-it-se-le-ht))
164
- );
165
- text-decoration: var(
166
- --_ctm-mob-dn-it-se-ue,
167
- var(--_ctm-tab-dn-it-se-ue, var(--_ctm-dn-it-se-ue))
168
- );
169
- }
207
+ .search-button {
208
+ color: #fff;
209
+ border: none;
210
+ padding-left: 10px;
211
+ border-radius: 4px;
212
+ // cursor: pointer;
213
+ transition: 0.3s;
214
+ svg {
215
+ width: var(
216
+ --_ctm-mob-dn-sh-in-in-se,
217
+ var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
218
+ );
219
+ height: var(
220
+ --_ctm-mob-dn-sh-in-in-se,
221
+ var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
222
+ );
170
223
 
171
- input::placeholder {
172
- color: var(
173
- --_ctm-mob-dn-it-se-cr,
174
- var(--_ctm-tab-dn-it-se-cr, var(--_ctm-dn-it-se-cr))
175
- );
176
- font-family: var(
177
- --_ctm-mob-dn-it-se-ft-fy,
178
- var(--_ctm-tab-dn-it-se-ft-fy, var(--_ctm-dn-it-se-ft-fy))
179
- ),
180
- sans-serif;
181
- font-size: var(
182
- --_ctm-mob-dn-it-se-ft-se,
183
- var(--_ctm-tab-dn-it-se-ft-se, var(--_ctm-dn-it-se-ft-se))
184
- );
185
- font-weight: var(
186
- --_ctm-mob-dn-it-se-ft-wt,
187
- var(--_ctm-tab-dn-it-se-ft-wt, var(--_ctm-dn-it-se-ft-wt))
188
- );
189
- font-style: var(
190
- --_ctm-mob-dn-it-se-ft-se-ic,
191
- var(--_ctm-tab-dn-it-se-ft-se-ic, var(--_ctm-dn-it-se-ft-se-ic))
192
- );
193
- text-align: var(
194
- --_ctm-mob-dn-it-se-tt-an,
195
- var(--_ctm-tab-dn-it-se-tt-an, var(--_ctm-dn-it-se-tt-an))
196
- );
197
- letter-spacing: var(
198
- --_ctm-mob-dn-it-se-lr-sg,
199
- var(--_ctm-tab-dn-it-se-lr-sg, var(--_ctm-dn-it-se-lr-sg))
200
- );
201
- line-height: var(
202
- --_ctm-mob-dn-it-se-le-ht,
203
- var(--_ctm-tab-dn-it-se-le-ht, var(--_ctm-dn-it-se-le-ht))
204
- );
205
- text-decoration: var(
206
- --_ctm-mob-dn-it-se-ue,
207
- var(--_ctm-tab-dn-it-se-ue, var(--_ctm-dn-it-se-ue))
208
- );
224
+ path {
225
+ stroke: var(
226
+ --_ctm-mob-dn-sh-in-in-c1,
227
+ var(--_ctm-tab-dn-sh-in-in-c1, var(--_ctm-dn-sh-in-in-c1))
228
+ );
229
+ }
230
+ }
231
+
232
+ // &:hover {
233
+ // background: #0056b3;
234
+ // }
209
235
  }
210
236
  }
211
237
 
@@ -597,11 +623,11 @@
597
623
  box-shadow 0.2s ease;
598
624
  }
599
625
 
600
- input:focus {
601
- border-color: #4f46e5; /* Indigo */
602
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
603
- outline: none;
604
- }
626
+ // input:focus {
627
+ // border-color: #4f46e5; /* Indigo */
628
+ // box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
629
+ // outline: none;
630
+ // }
605
631
  .error__message {
606
632
  color: red;
607
633
  font-size: 12px;
@@ -663,13 +689,32 @@
663
689
  &.stack__vertical {
664
690
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
665
691
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
666
- padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
692
+ // max-height: var(--_sf-custom-height);
693
+ // overflow-y: auto;
694
+ max-height: var(--_sf-custom-height);
695
+ overflow-y: hidden;
696
+
697
+ &[data-add-scroll="true"] {
698
+ overflow-y: auto;
699
+ }
667
700
  }
668
701
  &.stack__horizontal {
669
- grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
702
+ // grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
703
+ display: flex;
670
704
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
671
- padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
705
+ // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
706
+ width: 100%;
672
707
  background-color: #fff;
708
+
709
+ &[data-overflow="Wrap"] {
710
+ flex-wrap: wrap;
711
+ }
712
+ &[data-overflow="Scroll"] {
713
+ overflow-x: auto;
714
+ }
715
+ .item {
716
+ flex-wrap: nowrap;
717
+ }
673
718
  }
674
719
  &.grid {
675
720
  display: grid;
@@ -678,23 +723,36 @@
678
723
  minmax(auto, 1fr)
679
724
  );
680
725
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
681
- padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
726
+ // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
727
+ max-height: var(--_sf-custom-height);
728
+ overflow-y: hidden;
729
+
730
+ &[data-add-scroll="true"] {
731
+ overflow-y: auto;
732
+ }
682
733
  }
683
734
  .item {
684
735
  display: flex;
685
- justify-content: space-between;
736
+ // justify-content: space-between;
737
+ gap: 20px;
686
738
  align-items: center;
687
739
  cursor: pointer;
688
740
  background-color: var(--_primary-25);
689
741
  flex-wrap: wrap;
690
- padding: var(
691
- --_ctm-mob-dn-im-se-vl-pg,
692
- var(--_ctm-tab-dn-im-se-vl-pg, var(--_ctm-dn-im-se-vl-pg))
693
- )
694
- var(
695
- --_ctm-mob-dn-im-se-hl-pg,
696
- var(--_ctm-tab-dn-im-se-hl-pg, var(--_ctm-dn-im-se-hl-pg))
697
- );
742
+
743
+ height: var(--_ctm-mob-lt-im-ht, var(--_ctm-tab-lt-im-ht, var(--_ctm-lt-im-ht)));
744
+
745
+ // padding: var(
746
+ // --_ctm-mob-dn-im-se-vl-pg,
747
+ // var(--_ctm-tab-dn-im-se-vl-pg, var(--_ctm-dn-im-se-vl-pg))
748
+ // )
749
+ // var(
750
+ // --_ctm-mob-dn-im-se-hl-pg,
751
+ // var(--_ctm-tab-dn-im-se-hl-pg, var(--_ctm-dn-im-se-hl-pg))
752
+ // );
753
+
754
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
755
+
698
756
  background-color: var(
699
757
  --_ctm-mob-dn-im-se-bd-cr,
700
758
  var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
@@ -745,86 +803,93 @@
745
803
  var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
746
804
  )
747
805
  );
748
- .left__col {
749
- display: inline-block;
750
- font-weight: 600;
751
- input[type="radio"] {
752
- width: auto;
753
- display: inline-block;
754
- margin-right: 10px;
755
- }
756
- }
806
+ // .left__col {
807
+ // display: inline-block;
808
+ // font-weight: 600;
809
+ // input[type="radio"] {
810
+ // width: auto;
811
+ // display: inline-block;
812
+ // margin-right: 10px;
813
+ // }
814
+ // }
757
815
 
758
- .right__col {
759
- display: flex;
760
- align-items: center;
761
- text-align: center;
762
- gap: 16px;
763
- font-weight: 500;
764
- flex-wrap: wrap;
765
- justify-content: var(
766
- --_ctm-mob-dn-im-se-ct-at,
767
- var(--_ctm-tab-dn-im-se-ct-at, var(--_ctm-dn-im-se-ct-at))
768
- );
816
+ // .right__col {
817
+ // display: flex;
818
+ // align-items: center;
819
+ // text-align: center;
820
+ // gap: 16px;
821
+ // font-weight: 500;
822
+ // flex-wrap: wrap;
823
+ // justify-content: var(
824
+ // --_ctm-mob-dn-im-se-ct-at,
825
+ // var(--_ctm-tab-dn-im-se-ct-at, var(--_ctm-dn-im-se-ct-at))
826
+ // );
769
827
 
770
- span {
771
- line-height: 12px;
772
- }
828
+ // span {
829
+ // line-height: 12px;
830
+ // }
773
831
 
774
- .card {
775
- width: 60px;
776
- height: 50px;
777
- background-color: var(
778
- --_ctm-mob-dn-sg-md-lo-bd-cr,
779
- var(--_ctm-tab-dn-sg-md-lo-bd-cr, var(--_ctm-dn-sg-md-lo-bd-cr))
780
- );
781
- border-color: var(
782
- --_ctm-mob-dn-sg-md-lo-br-cr,
783
- var(--_ctm-tab-dn-sg-md-lo-br-cr, var(--_ctm-dn-sg-md-lo-br-cr))
784
- );
785
- border-style: var(
786
- --_ctm-mob-dn-sg-md-lo-br-se,
787
- var(--_ctm-tab-dn-sg-md-lo-br-se, var(--_ctm-dn-sg-md-lo-br-se))
788
- );
789
- border-width: var(
790
- --_ctm-mob-dn-sg-md-lo-br-wh,
791
- var(--_ctm-tab-dn-sg-md-lo-br-wh, var(--_ctm-dn-sg-md-lo-br-wh))
792
- );
793
- border-radius: var(
794
- --_ctm-mob-dn-sg-md-lo-br-rs,
795
- var(--_ctm-tab-dn-sg-md-lo-br-rs, var(--_ctm-dn-sg-md-lo-br-rs))
796
- );
797
- box-shadow: var(
798
- var(
799
- --_ctm-mob-dn-sg-md-lo-sw-ae,
800
- var(
801
- --_ctm-tab-dn-sg-md-lo-sw-ae,
802
- var(--_ctm-dn-sg-md-lo-sw-ae, var(--_tst-dn-sw-ae))
803
- )
804
- )
805
- var(
806
- --_ctm-mob-dn-sg-md-lo-sw-br,
807
- var(
808
- --_ctm-tab-dn-sg-md-lo-sw-br,
809
- var(--_ctm-dn-sg-md-lo-sw-br, var(--_tst-dn-sw-br))
810
- )
811
- )
812
- var(
813
- --_ctm-mob-dn-sg-md-lo-sw-sd,
814
- var(
815
- --_ctm-tab-dn-sg-md-lo-sw-sd,
816
- var(--_ctm-dn-sg-md-lo-sw-sd, var(--_tst-dn-sw-sd))
817
- )
818
- )
819
- var(
820
- --_ctm-mob-dn-sg-md-lo-sw-cr,
821
- var(
822
- --_ctm-tab-dn-sg-md-lo-sw-cr,
823
- var(--_ctm-dn-sg-md-lo-sw-cr, var(--_tst-dn-sw-cr))
824
- )
825
- )
826
- );
827
- }
832
+ // .card {
833
+ // width: 60px;
834
+ // height: 50px;
835
+ // background-color: var(
836
+ // --_ctm-mob-dn-sg-md-lo-bd-cr,
837
+ // var(--_ctm-tab-dn-sg-md-lo-bd-cr, var(--_ctm-dn-sg-md-lo-bd-cr))
838
+ // );
839
+ // border-color: var(
840
+ // --_ctm-mob-dn-sg-md-lo-br-cr,
841
+ // var(--_ctm-tab-dn-sg-md-lo-br-cr, var(--_ctm-dn-sg-md-lo-br-cr))
842
+ // );
843
+ // border-style: var(
844
+ // --_ctm-mob-dn-sg-md-lo-br-se,
845
+ // var(--_ctm-tab-dn-sg-md-lo-br-se, var(--_ctm-dn-sg-md-lo-br-se))
846
+ // );
847
+ // border-width: var(
848
+ // --_ctm-mob-dn-sg-md-lo-br-wh,
849
+ // var(--_ctm-tab-dn-sg-md-lo-br-wh, var(--_ctm-dn-sg-md-lo-br-wh))
850
+ // );
851
+ // border-radius: var(
852
+ // --_ctm-mob-dn-sg-md-lo-br-rs,
853
+ // var(--_ctm-tab-dn-sg-md-lo-br-rs, var(--_ctm-dn-sg-md-lo-br-rs))
854
+ // );
855
+ // box-shadow: var(
856
+ // var(
857
+ // --_ctm-mob-dn-sg-md-lo-sw-ae,
858
+ // var(
859
+ // --_ctm-tab-dn-sg-md-lo-sw-ae,
860
+ // var(--_ctm-dn-sg-md-lo-sw-ae, var(--_tst-dn-sw-ae))
861
+ // )
862
+ // )
863
+ // var(
864
+ // --_ctm-mob-dn-sg-md-lo-sw-br,
865
+ // var(
866
+ // --_ctm-tab-dn-sg-md-lo-sw-br,
867
+ // var(--_ctm-dn-sg-md-lo-sw-br, var(--_tst-dn-sw-br))
868
+ // )
869
+ // )
870
+ // var(
871
+ // --_ctm-mob-dn-sg-md-lo-sw-sd,
872
+ // var(
873
+ // --_ctm-tab-dn-sg-md-lo-sw-sd,
874
+ // var(--_ctm-dn-sg-md-lo-sw-sd, var(--_tst-dn-sw-sd))
875
+ // )
876
+ // )
877
+ // var(
878
+ // --_ctm-mob-dn-sg-md-lo-sw-cr,
879
+ // var(
880
+ // --_ctm-tab-dn-sg-md-lo-sw-cr,
881
+ // var(--_ctm-dn-sg-md-lo-sw-cr, var(--_tst-dn-sw-cr))
882
+ // )
883
+ // )
884
+ // );
885
+ // & > img {
886
+ // width: 100%;
887
+ // height: 100%;
888
+ // }
889
+ // }
890
+ // }
891
+ p {
892
+ white-space: nowrap;
828
893
  }
829
894
  }
830
895
  }