@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.39

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.
@@ -138,16 +138,42 @@ $dark-color: #343a40;
138
138
  }
139
139
 
140
140
  .btn_secondary {
141
- background-color: #0032cc;
142
- color: white;
143
- border: none;
144
- padding: 0.6rem 1.2rem;
145
- font-size: 0.9rem;
146
- border-radius: 4px;
147
- cursor: pointer;
141
+ padding: 16px 24px;
142
+ width: fit-content;
143
+ background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
144
+ border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
145
+ border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
146
+ border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
147
+ border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
148
+ color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
149
+ font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
150
+ font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
151
+ font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
152
+ font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
153
+ line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
154
+ letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
155
+ box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
156
+ var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
157
+ text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
158
+ text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
148
159
 
149
160
  &:hover {
150
- background-color: #0028a3;
161
+ background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
162
+ border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
163
+ border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
164
+ border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
165
+ border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
166
+ color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
167
+ font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
168
+ font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
169
+ font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
170
+ font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
171
+ line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
172
+ letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
173
+ box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
174
+ var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
175
+ text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
176
+ text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
151
177
  }
152
178
  }
153
179
  }
@@ -195,6 +221,9 @@ $dark-color: #343a40;
195
221
  .accordion-title {
196
222
  margin-right: 1rem;
197
223
  white-space: nowrap;
224
+ display: flex;
225
+ align-items: center;
226
+ gap: 8px;
198
227
  color: var(--_ctm-dn-sn-an-te-dn-cr);
199
228
  font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
200
229
  font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
@@ -206,7 +235,6 @@ $dark-color: #343a40;
206
235
  text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
207
236
  }
208
237
  .edit-btn {
209
- align-self: flex-end;
210
238
  cursor: pointer;
211
239
  padding: 0;
212
240
  background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
@@ -308,7 +336,7 @@ $dark-color: #343a40;
308
336
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
309
337
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
310
338
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
311
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
339
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
312
340
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
313
341
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
314
342
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -321,7 +349,7 @@ $dark-color: #343a40;
321
349
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
322
350
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
323
351
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
324
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
352
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
325
353
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
326
354
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
327
355
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -351,7 +379,7 @@ $dark-color: #343a40;
351
379
  }
352
380
 
353
381
  .chk_shipping_address_submit_btn {
354
- padding: 8px 24px;
382
+ padding: 12px 24px;
355
383
  width: fit-content;
356
384
  background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
357
385
  border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
@@ -512,7 +540,7 @@ $dark-color: #343a40;
512
540
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
513
541
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
514
542
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
515
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
543
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
516
544
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
517
545
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
518
546
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -541,7 +569,7 @@ $dark-color: #343a40;
541
569
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
542
570
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
543
571
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
544
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
572
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
545
573
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
546
574
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
547
575
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -726,7 +754,7 @@ $dark-color: #343a40;
726
754
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
727
755
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
728
756
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
729
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
757
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
730
758
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
731
759
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
732
760
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -845,7 +873,7 @@ $dark-color: #343a40;
845
873
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
846
874
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
847
875
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
848
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
876
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
849
877
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
850
878
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
851
879
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -858,7 +886,7 @@ $dark-color: #343a40;
858
886
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
859
887
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
860
888
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
861
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
889
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
862
890
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
863
891
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
864
892
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -888,24 +916,45 @@ $dark-color: #343a40;
888
916
  }
889
917
 
890
918
  .chk_shipping_address_submit_btn {
891
- padding: 8px 24px;
919
+ padding: 12px 24px;
892
920
  width: fit-content;
893
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
894
- border-color: var(--_ctm-dn-it-bn-dn-br-cr);
895
- border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
896
- border-style: var(--_ctm-dn-it-bn-dn-br-se);
897
- border-width: var(--_ctm-dn-it-bn-dn-br-wh);
898
- color: var(--_ctm-dn-it-bn-dn-cr);
899
- font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
900
- font-size: var(--_ctm-dn-it-bn-dn-ft-se);
901
- font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
902
- font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
903
- line-height: var(--_ctm-dn-it-bn-dn-le-ht);
904
- letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
905
- box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
906
- var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
907
- text-align: var(--_ctm-dn-it-bn-dn-tt-an);
908
- text-decoration: var(--_ctm-dn-it-bn-dn-ue);
921
+ background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
922
+ border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
923
+ border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
924
+ border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
925
+ border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
926
+ color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
927
+ font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
928
+ font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
929
+ font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
930
+ font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
931
+ line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
932
+ letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
933
+ box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae)
934
+ var(--_ctm-dn-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-it-bn-dn-dt-se-sw-sd)
935
+ var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
936
+ text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
937
+ text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
938
+
939
+ &:hover {
940
+ background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
941
+ border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
942
+ border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
943
+ border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
944
+ border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
945
+ color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
946
+ font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
947
+ font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
948
+ font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
949
+ font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
950
+ line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
951
+ letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
952
+ box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae)
953
+ var(--_ctm-dn-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-it-bn-dn-hr-se-sw-sd)
954
+ var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
955
+ text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
956
+ text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
957
+ }
909
958
  }
910
959
 
911
960
  &_same_as_billing_address_chkbx {
@@ -1039,7 +1088,7 @@ $dark-color: #343a40;
1039
1088
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1040
1089
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1041
1090
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1042
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1091
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1043
1092
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1044
1093
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1045
1094
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -1052,7 +1101,7 @@ $dark-color: #343a40;
1052
1101
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1053
1102
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1054
1103
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1055
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1104
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1056
1105
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1057
1106
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1058
1107
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -1128,7 +1177,7 @@ $dark-color: #343a40;
1128
1177
  }
1129
1178
 
1130
1179
  .chk_submit-btn {
1131
- padding: 8px 24px;
1180
+ padding: 12px 24px;
1132
1181
  width: fit-content;
1133
1182
  background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1134
1183
  border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
@@ -1192,7 +1241,7 @@ $dark-color: #343a40;
1192
1241
  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
1193
1242
  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
1194
1243
  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
1195
- box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-ae)
1244
+ box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
1196
1245
  var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
1197
1246
  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
1198
1247
  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
@@ -1234,6 +1283,46 @@ $dark-color: #343a40;
1234
1283
  text-decoration: var(--_ctm-dn-sy-ve-tt-dn-ue);
1235
1284
  }
1236
1285
 
1286
+ .chk_primary_btn_link {
1287
+ background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
1288
+ border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
1289
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
1290
+ border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
1291
+ border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
1292
+ color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
1293
+ font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
1294
+ font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
1295
+ font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
1296
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
1297
+ line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
1298
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
1299
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
1300
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
1301
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
1302
+ text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
1303
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
1304
+
1305
+ &:hover {
1306
+ background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
1307
+ border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
1308
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
1309
+ border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
1310
+ border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
1311
+ color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
1312
+ font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
1313
+ font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
1314
+ font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
1315
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
1316
+ line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
1317
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
1318
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
1319
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
1320
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
1321
+ text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
1322
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
1323
+ }
1324
+ }
1325
+
1237
1326
  .chk_checkbox_wrapper {
1238
1327
  display: flex;
1239
1328
  width: fit-content;
@@ -14,17 +14,17 @@ $link-color: #243dc6;
14
14
  line-height: 28px;
15
15
  margin-bottom: 12px;
16
16
  }
17
- .treeNode {
18
- position: relative;
19
- &::after {
20
- content: "";
21
- position: absolute;
22
- bottom: 0;
23
- left: 0;
24
- width: 100%;
25
- border-bottom:1px dotted var(--_gray-300);
17
+ .treeNode {
18
+ position: relative;
19
+ &::after {
20
+ content: "";
21
+ position: absolute;
22
+ bottom: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ border-bottom: 1px dotted var(--_gray-300);
26
+ }
26
27
  }
27
- }
28
28
  .treeNode,
29
29
  .treeItem {
30
30
  position: relative;
@@ -105,3 +105,35 @@ $link-color: #243dc6;
105
105
  }
106
106
  }
107
107
  }
108
+
109
+ // customization tree
110
+ .lightbox-overlay {
111
+ background: red;
112
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
113
+ border-radius: 6px;
114
+ padding: 10px;
115
+ min-width: 200px;
116
+ height: 100px;
117
+ transition: all 0.3s ease;
118
+
119
+ &.top {
120
+ transform-origin: bottom;
121
+ }
122
+
123
+ &.bottom {
124
+ transform-origin: top;
125
+ }
126
+
127
+ .custom_attr_lb_img img {
128
+ max-width: 100%;
129
+ height: auto;
130
+ display: block;
131
+ }
132
+
133
+ .custom_attr_lb_footer {
134
+ margin-top: 8px;
135
+ font-size: 12px;
136
+ text-align: center;
137
+ color: #555;
138
+ }
139
+ }
@@ -2,10 +2,6 @@
2
2
  display: grid;
3
3
  gap: 2px;
4
4
  width: 100%;
5
- &:focus-within {
6
- border: 1px solid var(--_primary-300);
7
- outline: 2px solid var(--_primary-50);
8
- }
9
5
 
10
6
  .dropdown-disabled {
11
7
  opacity: 0.6;
@@ -22,11 +18,17 @@
22
18
  position: relative;
23
19
  display: flex;
24
20
  justify-content: space-between;
25
- padding: 8px 12px;
21
+ padding: 0px 12px;
26
22
  border: 1px solid var(--_gray-300);
23
+ background-color: var(--_base-white);
27
24
  border-radius: 6px;
28
25
  width: 100%;
29
26
  align-items: center;
27
+ height: 40px;
28
+ &:focus-within {
29
+ border: 1px solid var(--_primary-300);
30
+ outline: 2px solid var(--_primary-50);
31
+ }
30
32
  .dropdown-chips {
31
33
  display: flex;
32
34
  // flex-wrap: wrap;
@@ -73,7 +75,7 @@
73
75
  .dropdown__clear__icon,
74
76
  .dropdown__icon {
75
77
  .icon {
76
- display: flex;
78
+ display: flex;
77
79
  }
78
80
  cursor: pointer;
79
81
  .icon svg {
@@ -95,7 +97,7 @@
95
97
  right: 24px;
96
98
  background: white;
97
99
  border: 1px solid #ddd;
98
- border-radius: 4px;
100
+ border-radius: 6px;
99
101
  max-height: 200px;
100
102
  overflow-y: auto;
101
103
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -104,6 +106,13 @@
104
106
  max-height: 300px;
105
107
  padding: 4px;
106
108
 
109
+ .dropdown_menu_ul {
110
+ max-height: 200px;
111
+ display: flex;
112
+ flex-direction: column;
113
+ gap: 4px;
114
+ }
115
+
107
116
  .dropdown-opt {
108
117
  font-size: 14px;
109
118
  cursor: pointer;
@@ -124,7 +133,8 @@
124
133
  max-height: 52px;
125
134
  border-radius: 4px;
126
135
  &:hover {
127
- background-color: #f4f4f4;
136
+ background-color: var(--_primary-25);
137
+ color: var(--_primary-400);
128
138
  }
129
139
 
130
140
  .item-image {
@@ -149,7 +159,7 @@
149
159
  }
150
160
  .selected {
151
161
  background-color: var(--_primary-25);
152
- font-weight: bold;
162
+ font-weight: normal;
153
163
  color: var(--_primary-500);
154
164
  }
155
165
  }
@@ -221,18 +231,18 @@
221
231
  padding: 0;
222
232
  }
223
233
  }
224
- .dropdown-with-input-section.full-width {
225
- width: auto;
226
- .dropdown-input-section {
227
- width: 100%;
228
- border-radius: 6px;
229
-
230
- &:focus-within {
231
- border: 1px solid var(--_primary-300);
232
- outline: 2px solid var(--_primary-50);
233
- }
234
- }
235
- }
234
+ // .dropdown-with-input-section.full-width {
235
+ // width: auto;
236
+ // .dropdown-input-section {
237
+ // width: 100%;
238
+ // border-radius: 6px;
239
+
240
+ // &:focus-within {
241
+ // border: 1px solid var(--_primary-300);
242
+ // outline: 2px solid var(--_primary-50);
243
+ // }
244
+ // }
245
+ // }
236
246
 
237
247
  .icon_with_label_section {
238
248
  display: flex;
@@ -251,8 +261,8 @@
251
261
  white-space: nowrap;
252
262
  }
253
263
  .no_data_found {
254
- position: absolute;
255
- top: 50%;
256
- left: 50%;
257
- transform: translate(-50%, -50%);
264
+ padding: 24px;
265
+ text-align: center;
266
+ font-weight: 600;
267
+ font-size: 16px;
258
268
  }