@bytenew/bn-applet-ui 1.1.10 → 1.1.11

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 (2) hide show
  1. package/common.scss +176 -126
  2. package/package.json +1 -1
package/common.scss CHANGED
@@ -271,118 +271,6 @@ stretch(默认值):如果项目未设置高度或设为auto,将占满整
271
271
  align-items: baseline;
272
272
  }
273
273
 
274
- /**
275
- * 动态生成flex间隔类
276
- * 范围:4-30px
277
- * 示例:
278
- * .w-flex-gap10 { gap: 10px !important; }
279
- * .w-flex-column-gap20 { column-gap: 20px !important; }
280
- * .w-flex-row-gap15 { row-gap: 15px !important; }
281
- */
282
- @for $i from 4 through 30 {
283
- // 普通间隔(行列间隔相同)
284
- .w-flex-gap#{$i} {
285
- display: flex;
286
- gap: #{$i}px !important;
287
- }
288
-
289
- // 列间隔(水平方向)
290
- .w-flex-column-gap#{$i} {
291
- display: flex;
292
- column-gap: #{$i}px !important;
293
- }
294
-
295
- // 行间隔(垂直方向)
296
- .w-flex-row-gap#{$i} {
297
- display: flex;
298
- row-gap: #{$i}px !important;
299
- }
300
- }
301
-
302
- /**
303
- * 动态生成padding和margin类
304
- * 范围:0-60px
305
- * 示例:
306
- * .w-padding20 { padding: 20px !important; }
307
- * .w-padding-left30 { padding-left: 30px !important; }
308
- * .w-margin15 { margin: 15px !important; }
309
- * .w-margin-top25 { margin-top: 25px !important; }
310
- */
311
- @for $i from 0 through 60 {
312
- // padding类
313
- .w-padding#{$i} {
314
- padding: #{$i}px !important;
315
- }
316
-
317
- .w-padding-left#{$i} {
318
- padding-left: #{$i}px !important;
319
- }
320
-
321
- .w-padding-right#{$i} {
322
- padding-right: #{$i}px !important;
323
- }
324
- .w-padding-lr#{$i} {
325
- padding-left: #{$i}px !important;
326
- padding-right: #{$i}px !important;
327
- }
328
-
329
- .w-padding-top#{$i} {
330
- padding-top: #{$i}px !important;
331
- }
332
-
333
- .w-padding-bottom#{$i} {
334
- padding-bottom: #{$i}px !important;
335
- }
336
- .w-padding-tb#{$i} {
337
- padding-top: #{$i}px !important;
338
- padding-bottom: #{$i}px !important;
339
- }
340
-
341
- // margin类
342
- .w-margin#{$i} {
343
- margin: #{$i}px !important;
344
- }
345
-
346
- .w-margin-left#{$i} {
347
- margin-left: #{$i}px !important;
348
- }
349
-
350
- .w-margin-right#{$i} {
351
- margin-right: #{$i}px !important;
352
- }
353
-
354
- .w-margin-lr#{$i} {
355
- margin-left: #{$i}px !important;
356
- margin-right: #{$i}px !important;
357
- }
358
-
359
- .w-margin-top#{$i} {
360
- margin-top: #{$i}px !important;
361
- }
362
-
363
- .w-margin-bottom#{$i} {
364
- margin-bottom: #{$i}px !important;
365
- }
366
-
367
- .w-margin-tb#{$i} {
368
- margin-top: #{$i}px !important;
369
- margin-bottom: #{$i}px !important;
370
- }
371
- }
372
-
373
- /**
374
- * 动态生成字体大小类
375
- * 范围:10-60px
376
- * 示例:
377
- * .w-font14 { font-size: 14px !important; }
378
- * .w-font24 { font-size: 24px !important; }
379
- */
380
- @for $i from 10 through 60 {
381
- .w-font#{$i} {
382
- font-size: #{$i}px !important;
383
- }
384
- }
385
-
386
274
  /**
387
275
  * 动态生成字重类
388
276
  * 范围:100-900,步进值100
@@ -396,19 +284,6 @@ stretch(默认值):如果项目未设置高度或设为auto,将占满整
396
284
  }
397
285
  }
398
286
 
399
- /**
400
- * 动态生成行高类
401
- * 范围:10-100px
402
- * 示例:
403
- * .w-line-height32 { line-height: 32px !important; }
404
- * .w-line-height40 { line-height: 40px !important; }
405
- */
406
- @for $i from 10 through 100 {
407
- .w-line-height#{$i} {
408
- line-height: #{$i}px !important;
409
- }
410
- }
411
-
412
287
  // 定义颜色变量映射
413
288
  $colors: (
414
289
  'black': black,
@@ -530,7 +405,139 @@ $colors: (
530
405
  cursor: pointer;
531
406
  outline: none;
532
407
  }
408
+ //0到100的循环生成类
409
+ @for $i from 0 through 100 {
410
+ /**
411
+ * 动态生成flex间隔类
412
+ * 示例:
413
+ * .w-flex-gap10 { gap: 10px !important; }
414
+ * .w-flex-column-gap20 { column-gap: 20px !important; }
415
+ * .w-flex-row-gap15 { row-gap: 15px !important; }
416
+ */
417
+ // 普通间隔(行列间隔相同)
418
+ .w-flex-gap#{$i} {
419
+ display: flex;
420
+ gap: #{$i}px !important;
421
+ }
422
+
423
+ // 列间隔(水平方向)
424
+ .w-flex-column-gap#{$i} {
425
+ display: flex;
426
+ column-gap: #{$i}px !important;
427
+ }
428
+
429
+ // 行间隔(垂直方向)
430
+ .w-flex-row-gap#{$i} {
431
+ display: flex;
432
+ row-gap: #{$i}px !important;
433
+ }
434
+ /**
435
+ * 动态生成行高类
436
+ * 示例:
437
+ * .w-line-height32 { line-height: 32px !important; }
438
+ * .w-line-height40 { line-height: 40px !important; }
439
+ */
440
+ .w-line-height#{$i} {
441
+ line-height: #{$i}px !important;
442
+ }
443
+ /**
444
+ * 动态生成圆角类
445
+ * 示例:
446
+ * .w-radius20 { radius: 20px !important; }
447
+ */
448
+
449
+ .w-radius#{$i} {
450
+ border-radius: #{$i}px !important;
451
+ }
452
+ .w-radius-bl#{$i} {
453
+ border-bottom-left-radius: #{$i}px !important;
454
+ }
455
+ .w-radius-br#{$i} {
456
+ border-bottom-right-radius: #{$i}px !important;
457
+ }
458
+ .w-radius-tl#{$i} {
459
+ border-top-left-radius: #{$i}px !important;
460
+ }
461
+ .w-radius-tr#{$i} {
462
+ border-top-right-radius: #{$i}px !important;
463
+ }
464
+ /**
465
+ * 动态生成padding和margin类
466
+ * 示例:
467
+ * .w-padding20 { padding: 20px !important; }
468
+ * .w-padding-left30 { padding-left: 30px !important; }
469
+ * .w-margin15 { margin: 15px !important; }
470
+ * .w-margin-top25 { margin-top: 25px !important; }
471
+ */
472
+ // padding类
473
+ .w-padding#{$i} {
474
+ padding: #{$i}px !important;
475
+ }
476
+
477
+ .w-padding-left#{$i} {
478
+ padding-left: #{$i}px !important;
479
+ }
533
480
 
481
+ .w-padding-right#{$i} {
482
+ padding-right: #{$i}px !important;
483
+ }
484
+ .w-padding-lr#{$i} {
485
+ padding-left: #{$i}px !important;
486
+ padding-right: #{$i}px !important;
487
+ }
488
+
489
+ .w-padding-top#{$i} {
490
+ padding-top: #{$i}px !important;
491
+ }
492
+
493
+ .w-padding-bottom#{$i} {
494
+ padding-bottom: #{$i}px !important;
495
+ }
496
+ .w-padding-tb#{$i} {
497
+ padding-top: #{$i}px !important;
498
+ padding-bottom: #{$i}px !important;
499
+ }
500
+
501
+ // margin类
502
+ .w-margin#{$i} {
503
+ margin: #{$i}px !important;
504
+ }
505
+
506
+ .w-margin-left#{$i} {
507
+ margin-left: #{$i}px !important;
508
+ }
509
+
510
+ .w-margin-right#{$i} {
511
+ margin-right: #{$i}px !important;
512
+ }
513
+
514
+ .w-margin-lr#{$i} {
515
+ margin-left: #{$i}px !important;
516
+ margin-right: #{$i}px !important;
517
+ }
518
+
519
+ .w-margin-top#{$i} {
520
+ margin-top: #{$i}px !important;
521
+ }
522
+
523
+ .w-margin-bottom#{$i} {
524
+ margin-bottom: #{$i}px !important;
525
+ }
526
+
527
+ .w-margin-tb#{$i} {
528
+ margin-top: #{$i}px !important;
529
+ margin-bottom: #{$i}px !important;
530
+ }
531
+ /**
532
+ * 动态生成字体大小类
533
+ * 示例:
534
+ * .w-font14 { font-size: 14px !important; }
535
+ * .w-font24 { font-size: 24px !important; }
536
+ */
537
+ .w-font#{$i} {
538
+ font-size: #{$i}px !important;
539
+ }
540
+ }
534
541
  // 基础类名声明(用于编辑器自动补全)
535
542
  .w-padding,
536
543
  .w-padding-left,
@@ -599,7 +606,12 @@ $colors: (
599
606
  .w-color-coral,
600
607
  .w-color-turquoise,
601
608
  .w-color-violet,
602
- .w-color-gold
609
+ .w-color-gold,
610
+ .w-radius,
611
+ .w-radius-bl,
612
+ .w-radius-br,
613
+ .w-radius-tl,
614
+ .w-radius-tr,
603
615
  {}
604
616
 
605
617
 
@@ -1355,4 +1367,42 @@ $colors: (
1355
1367
  .el-checkbox {
1356
1368
  margin-top: 0 !important;
1357
1369
  padding-bottom: 0 !important;
1370
+ }
1371
+ /* 统一修改 element 走马灯组件样式 */
1372
+ .el-carousel.el-carousel--horizontal {
1373
+ border-radius: 18px;
1374
+ overflow: hidden;
1375
+ border: 1px solid #e4e7ed;
1376
+ }
1377
+
1378
+ .el-carousel__item {
1379
+ border-radius: 18px;
1380
+ }
1381
+
1382
+ .el-carousel__indicator {
1383
+ .el-carousel__button {
1384
+ height: 8px;
1385
+ width: 8px;
1386
+ border-radius: 4px;
1387
+ background: #d7d5d5;
1388
+ }
1389
+
1390
+ &.is-active {
1391
+ .el-carousel__button {
1392
+ background: #fff;
1393
+ width: 24px;
1394
+ }
1395
+ }
1396
+ }
1397
+
1398
+ //输入框圆角修改为8px
1399
+ .el-input__wrapper{
1400
+ border-radius: 8px;
1401
+ }
1402
+
1403
+ /* Element Plus Dialog 样式修改 */
1404
+ .el-dialog {
1405
+ border-radius: 18px;
1406
+ overflow: hidden;
1407
+ margin-bottom: 0;
1358
1408
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bytenew/bn-applet-ui",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "description": "班牛组件库 vue2 版本",
5
5
  "private": false,
6
6
  "main": "dist/bn-applet-ui.umd.js",