@kaiheila/ui-components 0.1.5 → 0.1.8

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 (3) hide show
  1. package/dist/main.css +63 -47
  2. package/dist/ui-components.js +1 -1
  3. package/package.json +1 -1
package/dist/main.css CHANGED
@@ -250,9 +250,10 @@ textarea {
250
250
  .chuanyu-button.size-sm {
251
251
  height: 32px;
252
252
  min-width: 80px;
253
- font-size: 12px;
253
+ font-size: 14px;
254
254
  padding: 0 12px;
255
255
  border-radius: 8px;
256
+ line-height: 32px;
256
257
  }
257
258
  .chuanyu-button.size-md {
258
259
  height: 36px;
@@ -264,7 +265,7 @@ textarea {
264
265
  .chuanyu-button.size-lg {
265
266
  height: 40px;
266
267
  min-width: 88px;
267
- font-size: 16px;
268
+ font-size: 14px;
268
269
  padding: 0 16px;
269
270
  border-radius: 12px;
270
271
  }
@@ -292,14 +293,18 @@ textarea {
292
293
  opacity: 0.5;
293
294
  background-color: var(--color-primary);
294
295
  }
295
- .chuanyu-button.type-primary-text {
296
+ .chuanyu-button.type-simple-primary {
296
297
  background-color: transparent;
297
298
  color: var(--color-primary);
298
299
  }
299
- .chuanyu-button.type-primary-text:hover {
300
+ .chuanyu-button.type-simple-primary:hover {
300
301
  background-color: var(--color-primary);
301
302
  color: #fff;
302
303
  }
304
+ .chuanyu-button.type-simple-primary:active {
305
+ background-color: var(--color-primary-active);
306
+ color: #fff;
307
+ }
303
308
  .chuanyu-button.type-appprimary {
304
309
  background-color: var(--color-primary);
305
310
  }
@@ -889,11 +894,7 @@ textarea {
889
894
  padding: 6px 32px 6px 12px;
890
895
  border-radius: 16px;
891
896
  border-width: 0;
892
- background-color: var(--color-ede);
893
- }
894
- .selector-contain.type-ghost:not([disabled]) .selector-select:hover {
895
- background-color: var(--color-primary);
896
- color: white;
897
+ background-color: var(--menu-background);
897
898
  }
898
899
  .selector-contain.simple .selector-select {
899
900
  border: none;
@@ -914,11 +915,11 @@ textarea {
914
915
  transform: translate(-50%);
915
916
  width: 220px;
916
917
  padding: 10px;
917
- border-radius: 6px;
918
+ border-radius: 12px;
918
919
  border: none;
919
920
  }
920
921
  .selector-option.simple .selector-option-item {
921
- border-radius: 6px;
922
+ border-radius: 8px;
922
923
  }
923
924
  .selector-option.simple .selector-option-item.selected {
924
925
  background-color: transparent;
@@ -995,7 +996,7 @@ textarea {
995
996
  overflow: hidden;
996
997
  text-overflow: ellipsis;
997
998
  cursor: pointer;
998
- border-radius: 6px;
999
+ border-radius: 8px;
999
1000
  margin-bottom: 2px;
1000
1001
  }
1001
1002
  .selector-option-item:last-child {
@@ -1004,6 +1005,9 @@ textarea {
1004
1005
  .selector-option-item:hover {
1005
1006
  background-color: var(--menu-hover);
1006
1007
  }
1008
+ .selector-option-item:active {
1009
+ background-color: var(--menu-active);
1010
+ }
1007
1011
  .selector-option-item.selected {
1008
1012
  background-color: var(--menu-active);
1009
1013
  }
@@ -1101,7 +1105,7 @@ textarea {
1101
1105
 
1102
1106
  .custom-tooltip {
1103
1107
  padding: 4px 8px;
1104
- color: #edeef0;
1108
+ color: #fff;
1105
1109
  font-size: 14px;
1106
1110
  line-height: 20px;
1107
1111
  word-break: break-all;
@@ -1109,7 +1113,7 @@ textarea {
1109
1113
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1110
1114
  z-index: 100;
1111
1115
  pointer-events: none;
1112
- border-radius: 6px;
1116
+ border-radius: 10px;
1113
1117
  }
1114
1118
  .custom-tooltip.useMaxWidth {
1115
1119
  max-width: 160px;
@@ -1129,7 +1133,7 @@ textarea {
1129
1133
  body .__react_component_tooltip.type-info {
1130
1134
  background-color: #121315;
1131
1135
  padding: 4px 8px;
1132
- color: #edeef0;
1136
+ color: #fff;
1133
1137
  font-size: 14px;
1134
1138
  line-height: 20px;
1135
1139
  word-break: break-all;
@@ -1137,7 +1141,7 @@ body .__react_component_tooltip.type-info {
1137
1141
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1138
1142
  z-index: 100;
1139
1143
  pointer-events: none;
1140
- border-radius: 6px;
1144
+ border-radius: 10px;
1141
1145
  }
1142
1146
  body .__react_component_tooltip.type-info.useMaxWidth {
1143
1147
  max-width: 160px;
@@ -1185,7 +1189,7 @@ body .__react_component_tooltip.type-info.place-left:after {
1185
1189
  }
1186
1190
  body .__react_component_tooltip.type-success {
1187
1191
  padding: 4px 8px;
1188
- color: #edeef0;
1192
+ color: #fff;
1189
1193
  font-size: 14px;
1190
1194
  line-height: 20px;
1191
1195
  word-break: break-all;
@@ -1193,8 +1197,8 @@ body .__react_component_tooltip.type-success {
1193
1197
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1194
1198
  z-index: 100;
1195
1199
  pointer-events: none;
1196
- border-radius: 6px;
1197
- background-color: #5ab582;
1200
+ border-radius: 10px;
1201
+ background-color: #64dc00;
1198
1202
  }
1199
1203
  body .__react_component_tooltip.type-success.useMaxWidth {
1200
1204
  max-width: 160px;
@@ -1212,21 +1216,21 @@ body .__react_component_tooltip.type-success .user-fullname {
1212
1216
  vertical-align: middle;
1213
1217
  }
1214
1218
  body .__react_component_tooltip.type-success.place-right:after {
1215
- border-right-color: #5ab582;
1219
+ border-right-color: #64dc00;
1216
1220
  }
1217
1221
  body .__react_component_tooltip.type-success.place-top:after {
1218
- border-top-color: #5ab582;
1222
+ border-top-color: #64dc00;
1219
1223
  }
1220
1224
  body .__react_component_tooltip.type-success.place-bottom:after {
1221
- border-bottom-color: #5ab582;
1225
+ border-bottom-color: #64dc00;
1222
1226
  }
1223
1227
  body .__react_component_tooltip.type-success.place-left:after {
1224
- border-left-color: #5ab582;
1228
+ border-left-color: #64dc00;
1225
1229
  }
1226
1230
  body .__react_component_tooltip.type-dark {
1227
1231
  margin-top: 0;
1228
1232
  padding: 4px 8px;
1229
- border-radius: 4px;
1233
+ border-radius: 10px;
1230
1234
  max-width: 136px;
1231
1235
  max-height: 62px;
1232
1236
  font-size: 12px;
@@ -1265,23 +1269,42 @@ body .__react_component_tooltip.type-dark.place-right:after {
1265
1269
  width: 80px;
1266
1270
  }
1267
1271
  .ui-switch small {
1268
- background-color: var(--text-tip-color);
1269
- border-radius: 100%;
1270
1272
  width: 12px;
1271
1273
  height: 12px;
1272
1274
  position: absolute;
1273
1275
  top: 50%;
1274
1276
  margin-top: -6px;
1275
1277
  left: 2px;
1276
- transition: 0.3s ease-out all;
1278
+ transition: 200ms ease-out all;
1279
+ }
1280
+ .ui-switch small::before {
1281
+ content: '';
1282
+ position: absolute;
1283
+ left: 0;
1284
+ top: 0;
1285
+ bottom: 0;
1286
+ right: 0;
1287
+ border-radius: 6px;
1288
+ background-color: var(--text-tip-color);
1289
+ transition: 200ms ease-out all;
1277
1290
  }
1278
1291
  .ui-switch.checked {
1279
1292
  border-color: var(--color-primary);
1280
1293
  }
1281
1294
  .ui-switch.checked small {
1282
- left: 14px;
1295
+ left: calc(100% - 14px);
1296
+ }
1297
+ .ui-switch.checked small::before {
1283
1298
  background-color: var(--color-primary);
1284
1299
  }
1300
+ .ui-switch:active small::before {
1301
+ left: 0;
1302
+ right: -100%;
1303
+ }
1304
+ .ui-switch.checked:active small::before {
1305
+ right: 0;
1306
+ left: -100%;
1307
+ }
1285
1308
  /*wider switch text moves small further to the right*/
1286
1309
  .ui-switch.wide.checked small {
1287
1310
  left: 52px;
@@ -1336,12 +1359,14 @@ body .__react_component_tooltip.type-dark.place-right:after {
1336
1359
  display: flex;
1337
1360
  justify-content: center;
1338
1361
  align-items: center;
1339
- border-style: solid;
1340
- border-width: 1px;
1362
+ border: 1px solid var(--border-color);
1341
1363
  }
1342
1364
  .kaihei-auth-switch .auth-status-item .xy-iconfont {
1343
1365
  font-size: 24px;
1344
1366
  }
1367
+ .kaihei-auth-switch .auth-status-item:hover {
1368
+ background-color: var(--menu-hover);
1369
+ }
1345
1370
  .kaihei-auth-switch .auth-status-item.close-status {
1346
1371
  border-top-left-radius: 8px;
1347
1372
  border-bottom-left-radius: 8px;
@@ -1365,22 +1390,12 @@ body .__react_component_tooltip.type-dark.place-right:after {
1365
1390
  .kaihei-auth-switch .auth-status-item.default-status {
1366
1391
  border-left-width: 0;
1367
1392
  border-right-width: 0;
1368
- color: #dddddd;
1393
+ color: var(--text-tip-color);
1369
1394
  }
1370
1395
  .kaihei-auth-switch .auth-status-item.default-status.active {
1371
1396
  color: white;
1372
- }
1373
- .theme-light .kaihei-auth-switch .auth-status-item {
1374
- border-color: #dddddd;
1375
- }
1376
- .theme-light .kaihei-auth-switch .auth-status-item.default-status.active {
1377
- background-color: #dddddd;
1378
- }
1379
- .theme-dark .kaihei-auth-switch .auth-status-item {
1380
- border-color: rgba(255, 255, 255, 0.38);
1381
- }
1382
- .theme-dark .kaihei-auth-switch .auth-status-item.default-status.active {
1383
- background-color: rgba(255, 255, 255, 0.38);
1397
+ background-color: var(--text-tip-color);
1398
+ border-color: var(--text-tip-color);
1384
1399
  }
1385
1400
 
1386
1401
  .textarea-box {
@@ -1482,7 +1497,8 @@ body .__react_component_tooltip.type-dark.place-right:after {
1482
1497
  width: 100%;
1483
1498
  display: flex;
1484
1499
  flex-wrap: wrap;
1485
- border-radius: 6px;
1500
+ margin-top: 4px;
1501
+ border-radius: 12px;
1486
1502
  background-color: var(--color-grey-bg);
1487
1503
  box-shadow: var(--box-shadow);
1488
1504
  overflow: hidden;
@@ -1495,7 +1511,7 @@ body .__react_component_tooltip.type-dark.place-right:after {
1495
1511
  width: 100%;
1496
1512
  text-align: center;
1497
1513
  line-height: 40px;
1498
- border-top: 1px solid var(--border-color);
1514
+ border-top: 1px solid var(--color-line);
1499
1515
  cursor: pointer;
1500
1516
  }
1501
1517
  .time-selector-option .footer:hover {
@@ -1511,12 +1527,12 @@ body .__react_component_tooltip.type-dark.place-right:after {
1511
1527
  height: 210px;
1512
1528
  }
1513
1529
  .time-selector-hour {
1514
- border-right: 1px solid var(--border-color);
1530
+ border-right: 1px solid var(--color-line);
1515
1531
  }
1516
1532
  .time-selector-item {
1517
1533
  height: 32px;
1518
1534
  line-height: 32px;
1519
- border-radius: 6px;
1535
+ border-radius: 8px;
1520
1536
  text-align: center;
1521
1537
  margin-bottom: 2px;
1522
1538
  }
package/dist/ui-components.js CHANGED
@@ -2803,7 +2803,7 @@ module.exports = require("react-dom");
2803
2803
  /* 6 */
2804
2804
  /***/ (function(module) {
2805
2805
 
2806
- module.exports = JSON.parse("{\"name\":\"@kaiheila/ui-components\",\"version\":\"0.1.5\",\"description\":\"开黑啦 UI Components\",\"main\":\"dist/ui-components.js\",\"scripts\":{\"build\":\"webpack\",\"demo\":\"webpack-dev-server --config webpack.config.demo.js\"},\"keywords\":[\"UI\",\"Components\"],\"author\":\"yangchuan\",\"license\":\"ISC\",\"files\":[\"dist\"],\"devDependencies\":{\"@babel/core\":\"^7.15.5\",\"@babel/preset-env\":\"^7.15.6\",\"@babel/preset-react\":\"^7.14.5\",\"@webpack-cli/serve\":\"^1.6.0\",\"babel-loader\":\"^8.2.2\",\"classnames\":\"^2.3.1\",\"css-loader\":\"^2.1.1\",\"html-webpack-plugin\":\"^4.5.2\",\"less\":\"^4.1.2\",\"less-loader\":\"^5.0.0\",\"mini-css-extract-plugin\":\"^0.8.0\",\"prop-types\":\"^15.7.2\",\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\",\"react-tooltip\":\"^4.2.21\",\"style-loader\":\"^1.0.0\",\"url-loader\":\"^2.1.0\",\"webpack\":\"^4.40.2\",\"webpack-cli\":\"^3.3.1\",\"webpack-dev-server\":\"^3.2.1\"},\"peerDependencies\":{\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\"},\"browserslist\":{\"production\":[\">0.2%\",\"not dead\",\"not op_mini all\"],\"development\":[\"last 1 chrome version\",\"last 1 firefox version\",\"last 1 safari version\"]}}");
2806
+ module.exports = JSON.parse("{\"name\":\"@kaiheila/ui-components\",\"version\":\"0.1.7\",\"description\":\"开黑啦 UI Components\",\"main\":\"dist/ui-components.js\",\"scripts\":{\"build\":\"webpack\",\"demo\":\"webpack-dev-server --config webpack.config.demo.js\"},\"keywords\":[\"UI\",\"Components\"],\"author\":\"yangchuan\",\"license\":\"ISC\",\"files\":[\"dist\"],\"devDependencies\":{\"@babel/core\":\"^7.15.5\",\"@babel/preset-env\":\"^7.15.6\",\"@babel/preset-react\":\"^7.14.5\",\"@webpack-cli/serve\":\"^1.6.0\",\"babel-loader\":\"^8.2.2\",\"classnames\":\"^2.3.1\",\"css-loader\":\"^2.1.1\",\"html-webpack-plugin\":\"^4.5.2\",\"less\":\"^4.1.2\",\"less-loader\":\"^5.0.0\",\"mini-css-extract-plugin\":\"^0.8.0\",\"prop-types\":\"^15.7.2\",\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\",\"react-tooltip\":\"^4.2.21\",\"style-loader\":\"^1.0.0\",\"url-loader\":\"^2.1.0\",\"webpack\":\"^4.40.2\",\"webpack-cli\":\"^3.3.1\",\"webpack-dev-server\":\"^3.2.1\"},\"peerDependencies\":{\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\"},\"browserslist\":{\"production\":[\">0.2%\",\"not dead\",\"not op_mini all\"],\"development\":[\"last 1 chrome version\",\"last 1 firefox version\",\"last 1 safari version\"]}}");
2807
2807
 
2808
2808
  /***/ }),
2809
2809
  /* 7 */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaiheila/ui-components",
3
- "version": "0.1.5",
3
+ "version": "0.1.8",
4
4
  "description": "开黑啦 UI Components",
5
5
  "main": "dist/ui-components.js",
6
6
  "scripts": {