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

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 (24) hide show
  1. package/dist/amount-estimator.scss +226 -291
  2. package/dist/builder.js +1 -1
  3. package/dist/cartDropdownOverlay.scss +13 -0
  4. package/dist/faq.scss +24 -20
  5. package/dist/icon-list.scss +16 -15
  6. package/dist/map.scss +35 -35
  7. package/dist/pickup-locations.scss +19 -22
  8. package/dist/product-options.scss +76 -118
  9. package/dist/quick-links.scss +143 -186
  10. package/dist/quotes.scss +0 -1
  11. package/dist/repeater-item.scss +0 -1
  12. package/dist/section.scss +78 -29
  13. package/dist/stack.scss +61 -16
  14. package/dist/store-locations.scss +20 -21
  15. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +1 -94
  16. package/dist/uom-selector.scss +1428 -941
  17. package/dist/variant-picker.scss +68 -416
  18. package/dist/volume-pricing.scss +606 -1007
  19. package/dist/widget.scss +0 -2
  20. package/package.json +1 -1
  21. package/dist/menu-item.scss +0 -19
  22. package/dist/order-status.scss +0 -483
  23. package/dist/table-common.scss +0 -510
  24. package/dist/volume-pricing copy.scss +0 -1092
package/dist/amount-estimator.scss CHANGED
@@ -31,50 +31,12 @@
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
- );
72
34
  .button_main {
73
35
  border: 1px solid var(--_gray-600);
74
36
  width: 100%;
75
37
  height: auto;
76
38
  overflow-y: auto;
77
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
39
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
78
40
  //Input button group
79
41
  .input__btn__group {
80
42
  display: flex;
@@ -88,150 +50,162 @@
88
50
  // & > div {
89
51
  // width: 100%;
90
52
  // }
91
-
92
- .search-container {
53
+ .search__btn {
93
54
  width: 100%;
94
- height: 100%;
95
- &.dropdown {
96
- &:focus-within {
97
- .dropdown__options {
98
- display: block;
99
- }
100
- }
101
- }
102
- }
103
-
104
- .search-wrapper {
55
+ border: 1px solid #d0d5dd;
105
56
  display: flex;
106
- align-items: center;
107
- width: 100%;
108
- height: 100%;
109
- border: 1px solid var(--_gray-200);
57
+ gap: 12px;
58
+ padding-inline: 10px;
59
+ height: 40px;
60
+
110
61
  background-color: var(
111
- --_ctm-mob-dn-sh-br-bd-cr,
112
- var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr))
62
+ --_ctm-mob-dn-it-se-bd-cr,
63
+ var(--_ctm-tab-dn-it-se-bd-cr, var(--_ctm-dn-it-se-bd-cr))
113
64
  );
65
+
114
66
  border-color: var(
115
- --_ctm-mob-dn-sh-br-br-cr,
116
- var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
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
+ )
117
72
  );
118
73
  border-style: var(
119
- --_ctm-mob-dn-sh-br-br-se,
120
- var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
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
+ )
121
79
  );
122
80
  border-width: var(
123
- --_ctm-mob-dn-sh-br-br-wh,
124
- var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
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
+ )
125
86
  );
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
+
126
93
  box-shadow: var(
127
- --_show-shadow,
94
+ --_show-shadow-im-se,
128
95
  var(
129
- --_ctm-mob-dn-sh-br-sw-ae,
130
- var(--_ctm-tab-dn-sh-br-sw-ae, var(--_ctm-dn-sh-br-sw-ae))
96
+ --_ctm-mob-dn-it-se-sw-ae,
97
+ var(--_ctm-tab-dn-it-se-sw-ae, var(--_ctm-dn-it-se-sw-ae))
131
98
  )
132
99
  var(
133
- --_ctm-mob-dn-sh-br-sw-br,
134
- var(--_ctm-tab-dn-sh-br-sw-br, var(--_ctm-dn-sh-br-sw-br))
100
+ --_ctm-mob-dn-it-se-sw-br,
101
+ var(--_ctm-tab-dn-it-se-sw-br, var(--_ctm-dn-it-se-sw-br))
135
102
  )
136
103
  var(
137
- --_ctm-mob-dn-sh-br-sw-sd,
138
- var(--_ctm-tab-dn-sh-br-sw-sd, var(--_ctm-dn-sh-br-sw-sd))
104
+ --_ctm-mob-dn-it-se-sw-sd,
105
+ var(--_ctm-tab-dn-it-se-sw-sd, var(--_ctm-dn-it-se-sw-sd))
139
106
  )
140
107
  var(
141
- --_ctm-mob-dn-sh-br-sw-cr,
142
- var(--_ctm-tab-dn-sh-br-sw-cr, var(--_ctm-dn-sh-br-sw-cr))
108
+ --_ctm-mob-dn-it-se-sw-cr,
109
+ var(--_ctm-tab-dn-it-se-sw-cr, var(--_ctm-dn-it-se-sw-cr))
143
110
  )
144
111
  );
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
- );
149
-
150
- .search-icon {
151
- font-size: 18px;
152
- margin-right: 8px;
153
- color: #555;
154
- }
155
112
 
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))
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))
203
126
  );
204
127
  }
205
128
  }
206
129
 
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
- );
223
-
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
- }
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
+ }
231
170
 
232
- // &:hover {
233
- // background: #0056b3;
234
- // }
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
+ );
235
209
  }
236
210
  }
237
211
 
@@ -623,11 +597,11 @@
623
597
  box-shadow 0.2s ease;
624
598
  }
625
599
 
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
- // }
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
+ }
631
605
  .error__message {
632
606
  color: red;
633
607
  font-size: 12px;
@@ -689,32 +663,13 @@
689
663
  &.stack__vertical {
690
664
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
691
665
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
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
- }
666
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
700
667
  }
701
668
  &.stack__horizontal {
702
- // grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
703
- display: flex;
669
+ grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
704
670
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
705
- // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
706
- width: 100%;
671
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
707
672
  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
- }
718
673
  }
719
674
  &.grid {
720
675
  display: grid;
@@ -723,36 +678,23 @@
723
678
  minmax(auto, 1fr)
724
679
  );
725
680
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
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
- }
681
+ padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
733
682
  }
734
683
  .item {
735
684
  display: flex;
736
- // justify-content: space-between;
737
- gap: 20px;
685
+ justify-content: space-between;
738
686
  align-items: center;
739
687
  cursor: pointer;
740
688
  background-color: var(--_primary-25);
741
689
  flex-wrap: wrap;
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
-
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
+ );
756
698
  background-color: var(
757
699
  --_ctm-mob-dn-im-se-bd-cr,
758
700
  var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
@@ -803,93 +745,86 @@
803
745
  var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
804
746
  )
805
747
  );
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
- // }
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
+ }
815
757
 
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
- // );
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
+ );
827
769
 
828
- // span {
829
- // line-height: 12px;
830
- // }
770
+ span {
771
+ line-height: 12px;
772
+ }
831
773
 
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;
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
+ }
893
828
  }
894
829
  }
895
830
  }