@fox-js/foxui 4.0.1-95 → 4.0.1-97

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.
package/dist/style.css CHANGED
@@ -873,7 +873,7 @@
873
873
  flex: auto;
874
874
  }
875
875
 
876
- .fox-input-item {
876
+ .fox-input-item__content {
877
877
  width: 100%;
878
878
  height: var(--fox-input-item-height, 24px);
879
879
  color: var(--fox-input-item-color, var(--fox-black, #000));
@@ -885,22 +885,6 @@
885
885
  text-decoration: none;
886
886
  }
887
887
 
888
- .fox-input-item.is-disabled {
889
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc))) !important;
890
- }
891
-
892
- .fox-input-item.is-disabled input:disabled {
893
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
894
- cursor: not-allowed;
895
- opacity: 1;
896
- -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
897
- background: none;
898
- }
899
-
900
- .fox-input-item.is-readonly {
901
- color: var(--fox-input-item-readonly-color, var(--fox-black, #000)) !important;
902
- }
903
-
904
888
  .fox-input-item__append {
905
889
  width: var(--fox-input-item-append-width, 30px);
906
890
  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
@@ -933,15 +917,19 @@
933
917
  overflow: hidden;
934
918
  }
935
919
 
936
- .fox-item__main--top__main--top .fox-input {
937
- padding: 0 5px 0 15px;
920
+ .fox-input-item.disabled .fox-input-item__content {
921
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
922
+ cursor: not-allowed;
923
+ opacity: 1;
924
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
925
+ background: none;
938
926
  }
939
927
 
940
- .fox-item__main--top__main--left .fox-input, .fox-item__main--top__main--right .fox-input {
941
- padding: 0 5px 0 0;
928
+ .fox-input-item.readonly .fox-input-item__content {
929
+ color: var(--fox-input-item-readonly-color, var(--fox-black, #000));
942
930
  }
943
931
 
944
- .fox-money-item {
932
+ .fox-money-item__content {
945
933
  width: 100%;
946
934
  height: var(--fox-input-item-height, 24px);
947
935
  color: var(--fox-input-item-color, var(--fox-black, #000));
@@ -953,18 +941,6 @@
953
941
  text-decoration: none;
954
942
  }
955
943
 
956
- .fox-money-item.is-disabled {
957
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc))) !important;
958
- }
959
-
960
- .fox-money-item.is-disabled input:disabled {
961
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
962
- cursor: not-allowed;
963
- opacity: 1;
964
- -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
965
- background: none;
966
- }
967
-
968
944
  .fox-money-item__append {
969
945
  width: var(--fox-input-item-append-width, 30px);
970
946
  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
@@ -1009,6 +985,14 @@
1009
985
  color: var(--fox-input-item-color, var(--fox-black, #000)) !important;
1010
986
  }
1011
987
 
988
+ .fox-money-item.disabled .fox-money-item__content {
989
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
990
+ cursor: not-allowed;
991
+ opacity: 1;
992
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
993
+ background: none;
994
+ }
995
+
1012
996
  .fox-theme-dark .fox-textarea {
1013
997
  background: var(--fox-dark-background, #131313);
1014
998
  }
@@ -1067,6 +1051,252 @@
1067
1051
  left: -999999px;
1068
1052
  }
1069
1053
 
1054
+ .fox-picker-item__content {
1055
+ width: 100%;
1056
+ height: var(--fox-input-item-height, 24px);
1057
+ color: var(--fox-input-item-color, var(--fox-black, #000));
1058
+ text-align: var(--fox-input-item-text-align, right);
1059
+ font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1060
+ border: 0;
1061
+ outline: 0;
1062
+ padding: 0 5px 0 0;
1063
+ text-decoration: none;
1064
+ }
1065
+
1066
+ .fox-picker-item__append {
1067
+ width: var(--fox-input-item-append-width, 30px);
1068
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1069
+ justify-content: center;
1070
+ align-items: center;
1071
+ display: flex;
1072
+ position: relative;
1073
+ }
1074
+
1075
+ .fox-picker-item__append .action {
1076
+ justify-content: center;
1077
+ align-items: center;
1078
+ display: flex;
1079
+ }
1080
+
1081
+ .fox-picker-item__append .action-icon {
1082
+ width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1083
+ height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1084
+ color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
1085
+ }
1086
+
1087
+ .fox-picker-item__append .hidden {
1088
+ display: none;
1089
+ }
1090
+
1091
+ .fox-picker-item__unit {
1092
+ color: var(--fox-input-item-unit-color, var(--fox-black, #000));
1093
+ font-size: var(--fox-input-item-unit-font-size, var(--fox-font-size-base, 14px));
1094
+ white-space: nowrap;
1095
+ overflow: hidden;
1096
+ }
1097
+
1098
+ .fox-picker-item.disabled .fox-picker-item__content {
1099
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1100
+ cursor: not-allowed;
1101
+ opacity: 1;
1102
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1103
+ background: none;
1104
+ }
1105
+
1106
+ .fox-picker-item.readonly .fox-picker-item__content {
1107
+ color: var(--fox-input-item-readonly-color, var(--fox-black, #000));
1108
+ }
1109
+
1110
+ .fox-cascader-item__content {
1111
+ width: 100%;
1112
+ height: var(--fox-input-item-height, 24px);
1113
+ color: var(--fox-input-item-color, var(--fox-black, #000));
1114
+ text-align: var(--fox-input-item-text-align, right);
1115
+ font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1116
+ border: 0;
1117
+ outline: 0;
1118
+ padding: 0 5px 0 0;
1119
+ text-decoration: none;
1120
+ }
1121
+
1122
+ .fox-cascader-item__append {
1123
+ width: var(--fox-input-item-append-width, 30px);
1124
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1125
+ justify-content: center;
1126
+ align-items: center;
1127
+ display: flex;
1128
+ position: relative;
1129
+ }
1130
+
1131
+ .fox-cascader-item__append .action {
1132
+ justify-content: center;
1133
+ align-items: center;
1134
+ display: flex;
1135
+ }
1136
+
1137
+ .fox-cascader-item__append .action-icon {
1138
+ width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1139
+ height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1140
+ color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
1141
+ }
1142
+
1143
+ .fox-cascader-item__append .hidden {
1144
+ display: none;
1145
+ }
1146
+
1147
+ .fox-cascader-item__unit {
1148
+ color: var(--fox-input-item-unit-color, var(--fox-black, #000));
1149
+ font-size: var(--fox-input-item-unit-font-size, var(--fox-font-size-base, 14px));
1150
+ white-space: nowrap;
1151
+ overflow: hidden;
1152
+ }
1153
+
1154
+ .fox-cascader-item.disabled .fox-cascader-item__content {
1155
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1156
+ cursor: not-allowed;
1157
+ opacity: 1;
1158
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1159
+ background: none;
1160
+ }
1161
+
1162
+ .fox-cascader-item.readonly .fox-cascader-item__content {
1163
+ color: var(--fox-input-item-readonly-color, var(--fox-black, #000));
1164
+ }
1165
+
1166
+ .fox-date-item__content {
1167
+ width: 100%;
1168
+ height: var(--fox-input-item-height, 24px);
1169
+ color: var(--fox-input-item-color, var(--fox-black, #000));
1170
+ text-align: var(--fox-input-item-text-align, right);
1171
+ font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1172
+ border: 0;
1173
+ outline: 0;
1174
+ padding: 0 5px 0 0;
1175
+ text-decoration: none;
1176
+ }
1177
+
1178
+ .fox-date-item__append {
1179
+ width: var(--fox-input-item-append-width, 30px);
1180
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1181
+ justify-content: center;
1182
+ align-items: center;
1183
+ display: flex;
1184
+ position: relative;
1185
+ }
1186
+
1187
+ .fox-date-item__append .action {
1188
+ justify-content: center;
1189
+ align-items: center;
1190
+ display: flex;
1191
+ }
1192
+
1193
+ .fox-date-item__append .action-icon {
1194
+ width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1195
+ height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1196
+ color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
1197
+ }
1198
+
1199
+ .fox-date-item__append .hidden {
1200
+ display: none;
1201
+ }
1202
+
1203
+ .fox-date-item__unit {
1204
+ color: var(--fox-input-item-unit-color, var(--fox-black, #000));
1205
+ font-size: var(--fox-input-item-unit-font-size, var(--fox-font-size-base, 14px));
1206
+ white-space: nowrap;
1207
+ overflow: hidden;
1208
+ }
1209
+
1210
+ .fox-date-item__long-term-bar {
1211
+ flex-flow: row;
1212
+ justify-content: center;
1213
+ align-items: center;
1214
+ padding: 12px 6px;
1215
+ display: flex;
1216
+ }
1217
+
1218
+ .fox-date-item__long-term-bar .long-term-button {
1219
+ width: 90%;
1220
+ }
1221
+
1222
+ .fox-date-item__long-term-bar .long-term-icon {
1223
+ color: var(--fox-text-color-regular, gray);
1224
+ width: 1em;
1225
+ height: 1em;
1226
+ }
1227
+
1228
+ .fox-date-item__long-term-bar .long-term-icon.is-active {
1229
+ color: var(--fox-color-primary, #fa2c19);
1230
+ }
1231
+
1232
+ .fox-date-item.disabled .fox-date-item__content {
1233
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1234
+ cursor: not-allowed;
1235
+ opacity: 1;
1236
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1237
+ background: none;
1238
+ }
1239
+
1240
+ .fox-date-item.readonly .fox-date-item__content {
1241
+ color: var(--fox-input-item-readonly-color, var(--fox-black, #000));
1242
+ }
1243
+
1244
+ .fox-calendar-item__content {
1245
+ width: 100%;
1246
+ height: var(--fox-input-item-height, 24px);
1247
+ color: var(--fox-input-item-color, var(--fox-black, #000));
1248
+ text-align: var(--fox-input-item-text-align, right);
1249
+ font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1250
+ border: 0;
1251
+ outline: 0;
1252
+ padding: 0 5px 0 0;
1253
+ text-decoration: none;
1254
+ }
1255
+
1256
+ .fox-calendar-item__append {
1257
+ width: var(--fox-input-item-append-width, 30px);
1258
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1259
+ justify-content: center;
1260
+ align-items: center;
1261
+ display: flex;
1262
+ position: relative;
1263
+ }
1264
+
1265
+ .fox-calendar-item__append .action {
1266
+ justify-content: center;
1267
+ align-items: center;
1268
+ display: flex;
1269
+ }
1270
+
1271
+ .fox-calendar-item__append .action-icon {
1272
+ width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1273
+ height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1274
+ color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
1275
+ }
1276
+
1277
+ .fox-calendar-item__append .hidden {
1278
+ display: none;
1279
+ }
1280
+
1281
+ .fox-calendar-item__unit {
1282
+ color: var(--fox-input-item-unit-color, var(--fox-black, #000));
1283
+ font-size: var(--fox-input-item-unit-font-size, var(--fox-font-size-base, 14px));
1284
+ white-space: nowrap;
1285
+ overflow: hidden;
1286
+ }
1287
+
1288
+ .fox-calendar-item.disabled .fox-calendar-item__content {
1289
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1290
+ cursor: not-allowed;
1291
+ opacity: 1;
1292
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1293
+ background: none;
1294
+ }
1295
+
1296
+ .fox-calendar-item.readonly .fox-calendar-item__content {
1297
+ color: var(--fox-input-item-readonly-color, var(--fox-black, #000));
1298
+ }
1299
+
1070
1300
  .fox-theme-dark .fox-radio__label {
1071
1301
  color: var(--fox-dark-color, var(--fox-white, #fff));
1072
1302
  }
@@ -1100,11 +1330,6 @@
1100
1330
  display: flex;
1101
1331
  }
1102
1332
 
1103
- .fox-radio:last-child {
1104
- margin-bottom: 0 !important;
1105
- margin-right: 0 !important;
1106
- }
1107
-
1108
1333
  .fox-radio--reverse .fox-radio__label {
1109
1334
  margin-right: var(--fox-radio-label-margin-left, 15px);
1110
1335
  margin-left: 0;
@@ -1203,7 +1428,7 @@
1203
1428
  margin: 0 6px;
1204
1429
  }
1205
1430
 
1206
- .fox-radio-group--horizontal .fox-radio__button, .fox-radio-item {
1431
+ .fox-radio-group--horizontal .fox-radio__button, .fox-radio-item__content {
1207
1432
  width: 100%;
1208
1433
  }
1209
1434
 
@@ -1256,6 +1481,7 @@
1256
1481
  box-sizing: border-box;
1257
1482
  border: 1px solid var(--fox-checkbox-button-border-color, var(--fox-border-color, #dcdfe6));
1258
1483
  min-width: var(--fox-checkbox-button-min-width, 100px);
1484
+ justify-content: center;
1259
1485
  align-items: center;
1260
1486
  display: inline-flex;
1261
1487
  }
@@ -1354,11 +1580,11 @@
1354
1580
  margin: 0 6px;
1355
1581
  }
1356
1582
 
1357
- .fox-checkbox-group--horizontal .fox-checkbox__button, .fox-checkbox-item {
1583
+ .fox-checkbox-group--horizontal .fox-checkbox__button, .fox-checkbox-item__content {
1358
1584
  width: 100%;
1359
1585
  }
1360
1586
 
1361
- .fox-switch-item__content {
1587
+ .fox-switch-item__wrap {
1362
1588
  padding: var(--fox-switch-item-padding, 0 29px 0 0);
1363
1589
  justify-content: flex-end;
1364
1590
  align-items: center;
@@ -1456,7 +1682,7 @@
1456
1682
  opacity: 0;
1457
1683
  }
1458
1684
 
1459
- .fox-link-item {
1685
+ .fox-link-item__content {
1460
1686
  width: 100%;
1461
1687
  height: var(--fox-input-item-height, 24px);
1462
1688
  line-height: var(--fox-input-item-height, 24px);
@@ -1473,10 +1699,6 @@
1473
1699
  display: flex;
1474
1700
  }
1475
1701
 
1476
- .fox-link-item.is-disabled {
1477
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc))) !important;
1478
- }
1479
-
1480
1702
  .fox-link-item__append {
1481
1703
  width: var(--fox-input-item-append-width, 30px);
1482
1704
  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
@@ -1512,9 +1734,15 @@
1512
1734
  color: var(--fox-link-item-sub-color, var(--fox-text-color-secondary, #909399));
1513
1735
  }
1514
1736
 
1737
+ .fox-link-item.disabled .fox-link-item__content {
1738
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1739
+ }
1740
+
1515
1741
  .fox-actionsheet {
1516
1742
  padding: var(--fox-actionsheet-padding, 0px 16px);
1517
- display: block;
1743
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
1744
+ grid-template-columns: 1fr;
1745
+ display: grid;
1518
1746
  }
1519
1747
 
1520
1748
  .fox-actionsheet__header {
@@ -1542,6 +1770,9 @@
1542
1770
 
1543
1771
  .fox-actionsheet__searchbar {
1544
1772
  --fox-searchbar-padding: 0px;
1773
+ --fox-searchbar-input-border-radius: var(--fox-searchbar-border-radius, 12px);
1774
+ --fox-searchbar-input-background: var(--fox-actionsheet-searchbar-background, var(--fox-fill-color-base, #f5f5f5));
1775
+ --fox-searchbar-input-box-shadow: var(--fox-actionsheet-searchbar-box-shadow, none);
1545
1776
  height: var(--fox-actionsheet-searchbar-height, 40px);
1546
1777
  flex-flow: row;
1547
1778
  justify-content: center;
@@ -1553,13 +1784,6 @@
1553
1784
  margin-top: 10px;
1554
1785
  }
1555
1786
 
1556
- .fox-actionsheet__searchbar .fox-searchbar__search-input {
1557
- border: var(--fox-actionsheet-searchbar-border, 1px solid var(--fox-border-color-lighter, #ebeef5));
1558
- border-radius: var(--fox-searchbar-border-radius, 12px);
1559
- background: var(--fox-actionsheet-searchbar-background, var(--fox-fill-color-base, #f5f5f5));
1560
- box-shadow: none;
1561
- }
1562
-
1563
1787
  .fox-actionsheet__list {
1564
1788
  height: var(--fox-actionsheet-list-height, 380px);
1565
1789
  display: block;
@@ -1653,11 +1877,63 @@
1653
1877
  margin: 10px 18px;
1654
1878
  }
1655
1879
 
1656
- .fox-actionsheet-item {
1880
+ .fox-actionsheet-item__content {
1657
1881
  width: 100%;
1882
+ height: var(--fox-input-item-height, 24px);
1883
+ color: var(--fox-input-item-color, var(--fox-black, #000));
1884
+ text-align: var(--fox-input-item-text-align, right);
1885
+ font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1886
+ border: 0;
1887
+ outline: 0;
1888
+ padding: 0 5px 0 0;
1889
+ text-decoration: none;
1658
1890
  }
1659
1891
 
1660
- .fox-input-number-item {
1892
+ .fox-actionsheet-item__append {
1893
+ width: var(--fox-input-item-append-width, 30px);
1894
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1895
+ justify-content: center;
1896
+ align-items: center;
1897
+ display: flex;
1898
+ position: relative;
1899
+ }
1900
+
1901
+ .fox-actionsheet-item__append .action {
1902
+ justify-content: center;
1903
+ align-items: center;
1904
+ display: flex;
1905
+ }
1906
+
1907
+ .fox-actionsheet-item__append .action-icon {
1908
+ width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1909
+ height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
1910
+ color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
1911
+ }
1912
+
1913
+ .fox-actionsheet-item__append .hidden {
1914
+ display: none;
1915
+ }
1916
+
1917
+ .fox-actionsheet-item__unit {
1918
+ color: var(--fox-input-item-unit-color, var(--fox-black, #000));
1919
+ font-size: var(--fox-input-item-unit-font-size, var(--fox-font-size-base, 14px));
1920
+ white-space: nowrap;
1921
+ overflow: hidden;
1922
+ }
1923
+
1924
+ .fox-actionsheet-item.disabled .fox-actionsheet-item__content {
1925
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1926
+ cursor: not-allowed;
1927
+ opacity: 1;
1928
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, #ccc)));
1929
+ background: none;
1930
+ }
1931
+
1932
+ .fox-actionsheet-item.readonly .fox-actionsheet-item__content {
1933
+ color: var(--fox-input-item-readonly-color, var(--fox-black, #000));
1934
+ }
1935
+
1936
+ .fox-input-number-item__wrap {
1661
1937
  height: var(--fox-input-item-height, 24px);
1662
1938
  padding: var(--fox-input-number-item-padding, 0 29px 0 0);
1663
1939
  justify-content: flex-end;
@@ -1665,54 +1941,61 @@
1665
1941
  display: flex;
1666
1942
  }
1667
1943
 
1668
- .fox-input-number-item.is-left {
1944
+ .fox-input-number-item__wrap.is-left {
1669
1945
  justify-content: flex-start;
1670
1946
  }
1671
1947
 
1672
- .fox-input-number-item.is-center {
1948
+ .fox-input-number-item__wrap.is-center {
1673
1949
  justify-content: center;
1674
1950
  }
1675
1951
 
1676
- .fox-input-number-item.is-right {
1952
+ .fox-input-number-item__wrap.is-right {
1677
1953
  justify-content: flex-end;
1678
1954
  }
1679
1955
 
1680
- .fox-input-number-item .fox-input-number {
1956
+ .fox-input-number-item__wrap .fox-input-number {
1681
1957
  height: 100%;
1682
1958
  }
1683
1959
 
1684
- .fox-input-number-item .fox-input-number input {
1960
+ .fox-input-number-item__wrap .fox-input-number input {
1685
1961
  width: var(--fox-input-number-item-input-widht, 40px);
1686
1962
  font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1687
1963
  color: var(--fox-input-number-item-input-color, var(--fox-input-item-color, var(--fox-black, #000)));
1688
1964
  background: var(--fox-input-number-item-input-background, var(--fox-fill-color-base, #f5f5f5));
1689
1965
  }
1690
1966
 
1691
- .fox-input-number-item .fox-input-number--disabled input {
1967
+ .fox-input-number-item__wrap .fox-input-number--disabled input {
1692
1968
  color: var(--fox-input-number-icon-void-color, var(--fox-disable-color, #ccc));
1693
1969
  }
1694
1970
 
1695
- .fox-input-number-item .fox-input-number__left {
1971
+ .fox-input-number-item__wrap .fox-input-number__left {
1696
1972
  color: var(--fox-input-number-item-left-color, var(--fox-input-item-color, var(--fox-black, #000)));
1697
1973
  background-color: var(--fox-input-number-item-left-background, var(--fox-fill-color-base, #f5f5f5));
1698
1974
  border-radius: 4px 0 0 4px;
1699
1975
  }
1700
1976
 
1701
- .fox-input-number-item .fox-input-number__right {
1977
+ .fox-input-number-item__wrap .fox-input-number__right {
1702
1978
  color: var(--fox-input-number-item-right-color, var(--fox-white, #fff));
1703
1979
  background-color: var(--fox-input-number-item-right-background, var(--fox-color-primary, #fa2c19));
1704
1980
  border-radius: 0 4px 4px 0;
1705
1981
  }
1706
1982
 
1707
- .fox-input-number-item .fox-input-number__icon--disabled {
1983
+ .fox-input-number-item__wrap .fox-input-number__icon {
1984
+ width: var(--fox-input-item-height, 24px);
1985
+ height: var(--fox-input-item-height, 24px);
1986
+ justify-content: center;
1987
+ align-items: center;
1988
+ display: flex;
1989
+ }
1990
+
1991
+ .fox-input-number-item__wrap .fox-input-number__icon--disabled {
1708
1992
  color: var(--fox-input-number-icon-void-color, var(--fox-disable-color, #ccc));
1709
1993
  cursor: not-allowed;
1710
1994
  }
1711
1995
 
1712
- .fox-input-number-item .fox-input-number__icon .fox-icon {
1713
- width: var(--fox-input-item-height, 24px);
1714
- height: var(--fox-input-item-height, 24px);
1715
- font-size: var(--fox-input-item-height, 24px);
1996
+ .fox-input-number-item__wrap .fox-input-number__icon .fox-icon {
1997
+ width: 50%;
1998
+ height: 50%;
1716
1999
  }
1717
2000
 
1718
2001
  .fox-tabs-bar {
@@ -5463,6 +5746,7 @@
5463
5746
  min-width: auto;
5464
5747
  padding: var(--fox-cascader-tabs-titles-item-padding, 0 10px);
5465
5748
  white-space: nowrap;
5749
+ margin: 0;
5466
5750
  }
5467
5751
 
5468
5752
  .fox-cascader__popup {
package/dist/style.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /*!
2
- * @fox-js/foxui-base v4.0.0 2026-06-29T00:47:31.909Z
2
+ * @fox-js/foxui-base v4.0.0 2026-07-15T15:34:42.712Z
3
3
  */
@@ -21,5 +21,3 @@ $fill-color-extra-light: map.get($fill-color, 'extra-light') !default;
21
21
  $fill-color-dark: map.get($fill-color, 'dark') !default;
22
22
  $fill-color-darker: map.get($fill-color, 'daker') !default;
23
23
  $fill-color-blank: map.get($fill-color, 'blank') !default;
24
-
25
- $background-color: map.get($fill-color, 'light') !default;
@@ -41,9 +41,10 @@ $actionsheet: map.deep-merge(
41
41
  'list-item-text-line-height': 24px,
42
42
  'list-item-text-margin': 0,
43
43
  'padding': 0px 16px,
44
+ 'searchbar-height': 40px,
44
45
  'searchbar-background': $fill-color-base,
45
- 'searchbar-border': 1px solid $border-color-lighter,
46
- 'searchbar-height': 40px
46
+ 'searchbar-box-shadow': none,
47
+ 'searchbar-border-radius': 12px
47
48
  ),
48
49
  $actionsheet
49
50
  );
@@ -114,7 +114,7 @@
114
114
  // 填充色
115
115
  --fox-fill-color-base: #{$fill-color-base};
116
116
  // 背景色
117
- --fox-background-color: #{$background-color};
117
+ --fox-background-color: #{$fill-color-light};
118
118
  // 标题常规文字色
119
119
  --fox-title-color: #{$title-color};
120
120
  // 副标题色
@@ -1447,19 +1447,25 @@ declare const HintTextFunction: HintTextTooltip;
1447
1447
  export { HintTextFunction as FoxHintText }
1448
1448
  export { HintTextFunction as HintText }
1449
1449
 
1450
- /**
1451
- * HintTextTooltip
1452
- */
1453
1450
  declare interface HintTextTooltip {
1454
1451
  /**
1455
1452
  * 显示
1456
- * @param reference
1453
+ * @param reference(引用组件 or 位置区域)
1457
1454
  * @param message
1458
1455
  * @param opts
1459
1456
  * @param only
1460
1457
  * @returns
1461
1458
  */
1462
1459
  show(reference: HTMLElement, message: string, opts: Record<string, any>, only?: boolean): string;
1460
+ /**
1461
+ * 显示(在指定区域显示)
1462
+ * @param referenceRect
1463
+ * @param message
1464
+ * @param opts
1465
+ * @param only
1466
+ * @returns
1467
+ */
1468
+ showInRect(referenceRect: InsetRect, message: string, opts: Record<string, any>, only?: boolean): string;
1463
1469
  /**
1464
1470
  * 隐藏
1465
1471
  * @param id
@@ -1578,6 +1584,13 @@ export declare function injectInnerPageScope(defaultValue?: boolean): boolean;
1578
1584
  */
1579
1585
  export declare const InnerPageScopeKey: unique symbol;
1580
1586
 
1587
+ declare type InsetRect = {
1588
+ top: number | null;
1589
+ right: number | null;
1590
+ bottom: number | null;
1591
+ left: number | null;
1592
+ };
1593
+
1581
1594
  /**
1582
1595
  * 获取整数长度
1583
1596
  * @param value
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fox-js/foxui",
3
3
  "type": "module",
4
- "version": "4.0.1-95",
4
+ "version": "4.0.1-97",
5
5
  "description": "FoxUI轻量级移动端组件库(支持小程序开发)",
6
6
  "author": "jiangcheng",
7
7
  "main": "./dist/index.umd.js",