@para-ui/core 4.0.0-alpha → 4.0.0-rc

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 (125) hide show
  1. package/AutoTips/index.js +5 -5
  2. package/Button/index.js +2 -2
  3. package/Cascader/index.js +3 -3
  4. package/Checkbox/index.js +1 -1
  5. package/ColorPicker/index.js +2 -2
  6. package/ComboSelect/index.js +13 -14
  7. package/ComboSelect/utils.d.ts +5 -0
  8. package/CopyText/index.js +2 -2
  9. package/DatePicker/index.js +2 -1
  10. package/Desktop/index.js +1 -1
  11. package/DragVerify/index.js +2 -2
  12. package/Drawer/index.d.ts +2 -2
  13. package/Drawer/index.js +129 -24
  14. package/Drawer/interface.d.ts +8 -0
  15. package/Drawer/util.d.ts +6 -0
  16. package/DynamicMultiBox/index.d.ts +7 -2
  17. package/DynamicMultiBox/index.js +5 -5
  18. package/Form/index.js +6 -6
  19. package/FormItem/index.js +6 -6
  20. package/FunctionModal/index.js +5 -5
  21. package/GlobalContext/index.js +1 -1
  22. package/Help/index.js +1 -1
  23. package/InputNumber/index.js +1 -1
  24. package/Modal/index.js +2 -2
  25. package/MultiBox/index.js +8 -4
  26. package/Notification/index.js +1 -1
  27. package/OperateBtn/index.js +4 -3
  28. package/PageHeader/index.js +1 -1
  29. package/ParauiProvider/index.js +1 -1
  30. package/PasswordRules/index.js +1 -1
  31. package/PopConfirm/index.js +1 -1
  32. package/Radio/index.js +1 -1
  33. package/Search/index.js +1 -1
  34. package/Select/index.js +1 -1
  35. package/Selector/index.js +4 -4
  36. package/SelectorPicker/index.js +3 -3
  37. package/Status/index.d.ts +2 -0
  38. package/Status/index.js +17 -5
  39. package/Stepper/index.js +1 -1
  40. package/Styles/scrollbar.scss +66 -66
  41. package/Styles/theme.scss +62 -61
  42. package/Switch/index.js +1 -1
  43. package/Table/index.js +2 -2
  44. package/Tabs/index.js +1 -1
  45. package/Tag/index.js +10 -1184
  46. package/TimePicker/index.js +1 -0
  47. package/Title/index.d.ts +2 -0
  48. package/Title/index.js +6 -2
  49. package/Tooltip/index.js +1 -1
  50. package/Transfer/index.js +6 -6
  51. package/Tree/OperateBar/index.d.ts +2 -2
  52. package/Tree/index.js +4 -4
  53. package/Tree/interface.d.ts +4 -0
  54. package/Upload/index.js +6 -6
  55. package/_verture/{index-e2881a53.js → index-19947788.js} +2 -2
  56. package/_verture/{index-e6f85fd5.js → index-1c8d3e94.js} +3 -0
  57. package/_verture/{index-d63bd287.js → index-232d890b.js} +1 -1
  58. package/_verture/{index-7ec72724.js → index-47297a40.js} +36 -29
  59. package/_verture/{index-5c77417d.js → index-8469865e.js} +2 -2
  60. package/_verture/{index-68db2bc3.js → index-e1b800aa.js} +2 -2
  61. package/_verture/{modalContext-c12ca3e8.js → modalContext-670eab09.js} +1 -1
  62. package/_verture/tinycolor-ece3542d.js +1180 -0
  63. package/_verture/{utils-f0e81540.js → utils-06d86594.js} +3 -6
  64. package/index.js +11 -11
  65. package/locale/index.js +2 -2
  66. package/package.json +52 -8
  67. package/umd/AutoBox.js +1 -1
  68. package/umd/AutoTips.js +4 -4
  69. package/umd/Breadcrumbs.js +3 -3
  70. package/umd/Button.js +3 -3
  71. package/umd/ButtonGroup.js +5 -5
  72. package/umd/Cascader.js +6 -6
  73. package/umd/Checkbox.js +5 -5
  74. package/umd/CheckboxGroup.js +5 -5
  75. package/umd/ColorPicker.js +1 -1
  76. package/umd/ComboSelect.js +7 -7
  77. package/umd/CopyText.js +3 -3
  78. package/umd/DatePicker.js +3 -3
  79. package/umd/Desktop.js +3 -3
  80. package/umd/Drawer.js +5 -5
  81. package/umd/DynamicMultiBox.js +5 -5
  82. package/umd/Empty.js +1 -1
  83. package/umd/Form.js +3 -3
  84. package/umd/FormItem.js +5 -5
  85. package/umd/FunctionModal.js +3 -3
  86. package/umd/GlobalContext.js +1 -1
  87. package/umd/Help.js +2 -2
  88. package/umd/InputLang.js +5 -5
  89. package/umd/InputNumber.js +2 -2
  90. package/umd/Label.js +2 -2
  91. package/umd/Modal.js +3 -3
  92. package/umd/MultiBox.js +3 -3
  93. package/umd/Notification.js +1 -1
  94. package/umd/OperateBtn.js +3 -3
  95. package/umd/PageHeader.js +3 -3
  96. package/umd/Pagination.js +3 -3
  97. package/umd/ParauiProvider.js +1 -1
  98. package/umd/PasswordRules.js +4 -4
  99. package/umd/PopConfirm.js +3 -3
  100. package/umd/Popover.js +1 -1
  101. package/umd/Radio.js +2 -2
  102. package/umd/RadioGroup.js +2 -2
  103. package/umd/Search.js +3 -3
  104. package/umd/Select.js +3 -3
  105. package/umd/SelectInput.js +3 -3
  106. package/umd/Selector.js +3 -3
  107. package/umd/SelectorPicker.js +3 -3
  108. package/umd/SingleBox.js +3 -3
  109. package/umd/Status.js +4 -4
  110. package/umd/Stepper.js +2 -2
  111. package/umd/Switch.js +2 -2
  112. package/umd/Table.js +7 -7
  113. package/umd/Tabs.js +3 -3
  114. package/umd/Tag.js +2 -2
  115. package/umd/TextEditor.js +2 -2
  116. package/umd/TextField.js +3 -3
  117. package/umd/TimePicker.js +3 -3
  118. package/umd/Title.js +2 -2
  119. package/umd/ToggleButton.js +5 -5
  120. package/umd/Tooltip.js +1 -1
  121. package/umd/Transfer.js +6 -6
  122. package/umd/Tree.js +7 -7
  123. package/umd/Upload.js +3 -3
  124. package/umd/locale.js +1 -1
  125. /package/_verture/{typeof-b240b062.js → typeof-c310ee4a.js} +0 -0
package/SelectorPicker/index.js CHANGED
@@ -29,8 +29,8 @@ import 'rc-dropdown';
29
29
  import '../_verture/usePopupContainer-87febeb9.js';
30
30
  import 'dayjs';
31
31
  import '@paraview/lib';
32
- import '../_verture/index-d63bd287.js';
33
- import '../_verture/typeof-b240b062.js';
32
+ import '../_verture/index-232d890b.js';
33
+ import '../_verture/typeof-c310ee4a.js';
34
34
  import '../Radio/index.js';
35
35
  import '../Checkbox/index.js';
36
36
  import '../Loading/index.js';
@@ -65,7 +65,7 @@ var localeJson = {
65
65
  en: en
66
66
  };
67
67
 
68
- var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-selector-picker {\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0 38px 0 10px;\n border: 1px solid rgb(212, 218, 227);\n border-radius: 4px;\n background-color: rgb(255, 255, 255);\n cursor: pointer;\n transition: 0.3s;\n padding-right: 40px;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover {\n border-color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n overflow: hidden;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n display: inline-block;\n background-color: rgb(234, 236, 241);\n border-radius: 4px;\n padding: 0 10px;\n color: rgb(29, 33, 38);\n margin-right: 4px;\n vertical-align: top;\n max-width: 100%;\n white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n cursor: pointer;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n color: rgb(29, 33, 38);\n display: inline-block;\n height: 100%;\n vertical-align: top;\n max-width: calc(100% - 20px);\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n cursor: pointer;\n margin-left: 8px;\n color: rgb(29, 33, 38);\n font-size: 16px;\n position: relative;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n font-size: 14px;\n line-height: 1.429;\n color: rgb(29, 33, 38);\n word-break: break-all;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n flex: 1;\n color: rgb(161, 168, 179);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n position: absolute;\n right: 10px;\n top: 0;\n z-index: 2;\n line-height: 0;\n width: 18px;\n height: 18px;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n font-size: 18px;\n color: rgb(92, 101, 115);\n transition: all 0.3s;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n position: absolute;\n right: 10px;\n top: 0;\n z-index: 2;\n line-height: 0;\n opacity: 0;\n transition: all 0.3s;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n font-size: 16px;\n color: rgb(161, 168, 179);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper {\n border-color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n transform: rotate(180deg);\n color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper {\n background-color: rgb(247, 248, 250);\n cursor: not-allowed;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n max-width: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover {\n border-color: rgb(212, 218, 227);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-error > .selector-picker-wrapper {\n border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n opacity: 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n min-height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n padding-bottom: 3px;\n height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n margin-top: 3px;\n height: 24px;\n line-height: 24px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n padding: 5px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n height: 30px;\n line-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n padding-bottom: 3px;\n height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n height: 26px;\n line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n padding-bottom: 3px;\n height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n height: 26px;\n line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n top: 4px;\n}\n\n.paraui-v4-selector-picker-dropdown .paraui-v4-selector {\n border: 0;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content {\n max-height: 300px;\n overflow: auto;\n}\n\n.paraui-v4-selector-more-popover {\n /*// 小\n &.paraui-v4-selector-more-popover-small {\n & .select-more {\n & > .select-more-title {\n line-height: 28px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 28px;\n }\n }\n }\n }\n\n // 中\n &.paraui-v4-selector-more-popover-medium {\n & .select-more {\n & > .select-more-title {\n line-height: 32px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 32px;\n }\n }\n }\n }\n\n // 大\n &.paraui-v4-selector-more-popover-large {\n & .select-more {\n & > .select-more-title {\n line-height: 36px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 36px;\n }\n }\n }\n }*/\n}\n.paraui-v4-selector-more-popover .select-more {\n width: 290px;\n padding: 4px 0;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-title {\n font-size: 14px;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content {\n max-height: 320px;\n overflow: auto;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n padding: 0 10px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n width: calc(100% - 25px);\n display: inline-block;\n font-size: 14px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n font-size: 18px;\n position: relative;\n cursor: pointer;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n background-color: rgb(234, 236, 241);\n color: rgb(87, 131, 235);\n border-radius: 2px;\n}";
68
+ var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-selector-picker {\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0 38px 0 10px;\n border: 1px solid rgb(212, 218, 227);\n border-radius: 4px;\n background-color: rgb(255, 255, 255);\n cursor: pointer;\n transition: 0.3s;\n padding-right: 40px;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover {\n border-color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n overflow: hidden;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n display: inline-block;\n background-color: rgb(234, 236, 241);\n border-radius: 4px;\n padding: 0 10px;\n color: rgb(29, 33, 38);\n margin-right: 4px;\n vertical-align: top;\n max-width: 100%;\n white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n cursor: pointer;\n color: rgb(29, 33, 38);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n color: rgb(29, 33, 38);\n display: inline-block;\n height: 100%;\n vertical-align: top;\n max-width: calc(100% - 20px);\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n cursor: pointer;\n margin-left: 8px;\n color: rgb(29, 33, 38);\n font-size: 16px;\n position: relative;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n font-size: 14px;\n line-height: 1.429;\n color: rgb(29, 33, 38);\n word-break: break-all;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n flex: 1;\n color: rgb(161, 168, 179);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n position: absolute;\n right: 10px;\n top: 0;\n z-index: 2;\n line-height: 0;\n width: 18px;\n height: 18px;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n font-size: 18px;\n color: rgb(92, 101, 115);\n transition: all 0.3s;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n position: absolute;\n right: 10px;\n top: 0;\n z-index: 2;\n line-height: 0;\n opacity: 0;\n transition: all 0.3s;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n font-size: 16px;\n color: rgb(161, 168, 179);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper {\n border-color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n transform: rotate(180deg);\n color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper {\n background-color: rgb(247, 248, 250);\n cursor: not-allowed;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n max-width: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover {\n border-color: rgb(212, 218, 227);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-error > .selector-picker-wrapper {\n border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n opacity: 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n min-height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n padding-bottom: 3px;\n height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n margin-top: 3px;\n height: 24px;\n line-height: 24px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n top: 3px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n padding: 5px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n height: 30px;\n line-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n padding-bottom: 3px;\n height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n height: 26px;\n line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n padding-bottom: 3px;\n height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n height: 26px;\n line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n top: 4px;\n}\n\n.paraui-v4-selector-picker-dropdown .paraui-v4-selector {\n border: 0;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content {\n max-height: 300px;\n overflow: auto;\n}\n\n.paraui-v4-selector-more-popover {\n /*// 小\n &.paraui-v4-selector-more-popover-small {\n & .select-more {\n & > .select-more-title {\n line-height: 28px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 28px;\n }\n }\n }\n }\n\n // 中\n &.paraui-v4-selector-more-popover-medium {\n & .select-more {\n & > .select-more-title {\n line-height: 32px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 32px;\n }\n }\n }\n }\n\n // 大\n &.paraui-v4-selector-more-popover-large {\n & .select-more {\n & > .select-more-title {\n line-height: 36px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 36px;\n }\n }\n }\n }*/\n}\n.paraui-v4-selector-more-popover .select-more {\n width: 290px;\n padding: 4px 0;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-title {\n font-size: 14px;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content {\n max-height: 320px;\n overflow: auto;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n padding: 0 10px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n width: calc(100% - 25px);\n display: inline-block;\n font-size: 14px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n font-size: 18px;\n position: relative;\n cursor: pointer;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n color: rgb(46, 101, 230);\n border-radius: 2px;\n}";
69
69
  styleInject(css_248z);
70
70
 
71
71
  //下拉选择器
package/Status/index.d.ts CHANGED
@@ -17,6 +17,8 @@ export interface StatusProps {
17
17
  className?: string;
18
18
  /** style */
19
19
  style?: React.CSSProperties;
20
+ /** 自定义状态颜色 */
21
+ color?: string;
20
22
  }
21
23
  export declare const Status: FC<StatusProps>;
22
24
  export default Status;
package/Status/index.js CHANGED
@@ -3,9 +3,10 @@ import clsx from 'clsx';
3
3
  import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
4
4
  import CloseCircleF from '@para-ui/icons/CloseCircleF';
5
5
  import CompleteIcon from '@para-ui/icons/CheckCircleF';
6
+ import { t as tinycolor } from '../_verture/tinycolor-ece3542d.js';
6
7
  import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
7
8
 
8
- var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-status {\n display: inline-flex;\n align-items: center;\n}\n.paraui-v4-status .status-ink {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n width: 10px;\n height: 10px;\n}\n.paraui-v4-status .status-ink:before {\n content: \" \";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n}\n.paraui-v4-status .status-icon {\n display: inline-flex;\n font-size: 500;\n}\n.paraui-v4-status .status-icon svg {\n font-size: 500;\n}\n.paraui-v4-status .status-icon .status-icon-success {\n color: rgb(19, 191, 76);\n}\n.paraui-v4-status .status-icon .status-icon-error {\n color: rgb(244, 66, 66);\n}\n.paraui-v4-status .status-text {\n margin-left: 4px;\n font-size: 14px;\n color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-status-info .status-ink {\n background: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-status-info .status-ink:before {\n background-color: rgb(46, 101, 230);\n}\n.paraui-v4-status-success .status-ink {\n background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-status-success .status-ink:before {\n background-color: rgb(19, 191, 76);\n}\n.paraui-v4-status-warning .status-ink {\n background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-status-warning .status-ink:before {\n background-color: rgb(255, 147, 38);\n}\n.paraui-v4-status-error .status-ink {\n background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-status-error .status-ink:before {\n background-color: rgb(244, 66, 66);\n}\n.paraui-v4-status-completed .status-ink {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-status-completed .status-ink:before {\n background-color: rgb(161, 168, 179);\n}";
9
+ var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-status {\n display: inline-flex;\n align-items: center;\n}\n.paraui-v4-status .status-ink {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n width: 10px;\n height: 10px;\n}\n.paraui-v4-status .status-ink .status-radius {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n}\n.paraui-v4-status .status-icon {\n display: inline-flex;\n font-size: 16px;\n}\n.paraui-v4-status .status-icon svg {\n font-size: 16px;\n}\n.paraui-v4-status .status-icon .status-icon-success {\n color: rgb(19, 191, 76);\n}\n.paraui-v4-status .status-icon .status-icon-error {\n color: rgb(244, 66, 66);\n}\n.paraui-v4-status .status-text {\n margin-left: 4px;\n font-size: 14px;\n color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-status-info .status-ink {\n background: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-status-info .status-ink .status-radius {\n background-color: rgb(46, 101, 230);\n}\n.paraui-v4-status-success .status-ink {\n background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-status-success .status-ink .status-radius {\n background-color: rgb(19, 191, 76);\n}\n.paraui-v4-status-warning .status-ink {\n background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-status-warning .status-ink .status-radius {\n background-color: rgb(255, 147, 38);\n}\n.paraui-v4-status-error .status-ink {\n background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-status-error .status-ink .status-radius {\n background-color: rgb(244, 66, 66);\n}\n.paraui-v4-status-completed .status-ink {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-status-completed .status-ink .status-radius {\n background-color: rgb(161, 168, 179);\n}";
9
10
  styleInject(css_248z);
10
11
 
11
12
  //状态
@@ -15,7 +16,8 @@ var Status = function Status(props) {
15
16
  status = _props$status === void 0 ? "info" : _props$status,
16
17
  icon = props.icon,
17
18
  className = props.className,
18
- style = props.style;
19
+ style = props.style,
20
+ color = props.color;
19
21
  //cls
20
22
  var makeCls = clsx("".concat($prefixCls, "-status"), className, status && !icon && "".concat($prefixCls, "-status-").concat(status));
21
23
  // render Icon
@@ -47,9 +49,19 @@ var Status = function Status(props) {
47
49
  className: "status-icon"
48
50
  }, {
49
51
  children: renderIcon()
50
- })) : jsx("span", {
51
- className: "status-ink"
52
- }), jsx("span", Object.assign({
52
+ })) : jsx("div", Object.assign({
53
+ className: "status-ink",
54
+ style: {
55
+ backgroundColor: color ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined
56
+ }
57
+ }, {
58
+ children: jsx("span", {
59
+ className: 'status-radius',
60
+ style: {
61
+ backgroundColor: color ? color : undefined
62
+ }
63
+ })
64
+ })), jsx("span", Object.assign({
53
65
  className: "status-text"
54
66
  }, {
55
67
  children: text
package/Stepper/index.js CHANGED
@@ -60,7 +60,7 @@ var Icons = {
60
60
  })
61
61
  };
62
62
 
63
- var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-stepper {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n color: rgb(92, 101, 115);\n font-size: 14px;\n font-variant: tabular-nums;\n line-height: 1.5715;\n list-style: none;\n font-feature-settings: \"tnum\";\n display: flex;\n width: 100%;\n text-align: initial;\n overflow: auto;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item {\n min-width: 140px;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-icon,\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-content {\n width: calc(100% - 40px);\n line-height: normal;\n}\n.paraui-v4-stepper .component-stepper-item {\n position: relative;\n display: inline-block;\n flex: 1;\n vertical-align: top;\n overflow: hidden;\n margin-inline-start: 10px;\n}\n.paraui-v4-stepper .component-stepper-item-container {\n outline: none;\n}\n.paraui-v4-stepper .component-stepper-item-container .component-stepper-item-icon {\n margin-inline-start: 0;\n margin-inline-end: 10px;\n}\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n display: none;\n}\n.paraui-v4-stepper .component-stepper-item-icon,\n.paraui-v4-stepper .component-stepper-item-content {\n display: inline-block;\n vertical-align: top;\n}\n.paraui-v4-stepper .component-stepper-item-icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 30px;\n height: 30px;\n font-size: 500;\n line-height: 30px;\n text-align: center;\n border-radius: 50%;\n background-color: rgb(234, 236, 241);\n transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: rgb(92, 101, 115);\n vertical-align: middle;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon svg {\n color: inherit;\n}\n.paraui-v4-stepper .component-stepper-item-tail {\n position: absolute;\n top: 12px;\n left: 0;\n width: 100%;\n padding: 0 10px;\n}\n.paraui-v4-stepper .component-stepper-item-tail::after {\n display: inline-block;\n width: 100%;\n height: 1px;\n border-radius: 1px;\n transition: background 0.3s;\n content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-title {\n display: inline-block;\n color: rgb(92, 101, 115);\n font-size: 14px;\n padding-inline-end: 10px;\n font-weight: 700;\n line-height: 30px;\n position: relative;\n max-width: 140px;\n min-width: 50px;\n}\n.paraui-v4-stepper .component-stepper-item-title::after {\n position: absolute;\n top: 16px;\n inset-inline-start: 100%;\n display: block;\n width: 9999px;\n height: 1px;\n background: rgba(5, 5, 5, 0.06);\n content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-subtitle {\n display: inline;\n margin-left: 8px;\n color: rgb(92, 101, 115);\n font-weight: normal;\n font-size: 14px;\n}\n.paraui-v4-stepper .component-stepper-item-description {\n color: rgb(92, 101, 115);\n font-size: 12px;\n line-height: 17px;\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(255, 255, 255);\n background: rgb(246, 103, 103);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon {\n background-color: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(92, 101, 115);\n background: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n border-top: 1px dashed rgb(212, 218, 227);\n height: 0;\n background: transparent;\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n border-left: 1px dashed rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon {\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n background: rgb(46, 101, 230);\n}\n@media (min-width: 1200px) and (max-width: 2000px) {\n .paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n background: linear-gradient(63deg, #2e65e6 1%, #ffffff 83%);\n background-position: 400px 0;\n background-size: 400px 100%;\n }\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n font-weight: 400;\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon {\n background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(255, 255, 255);\n background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: rgb(29, 33, 38);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n background-color: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n border-left: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon {\n background-color: rgb(255, 255, 255);\n border-color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-disabled {\n cursor: not-allowed;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n cursor: pointer;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n transition: color 0.3s;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n border-color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n height: auto;\n border: 0;\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n top: 0;\n left: 0;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n}\n.paraui-v4-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n white-space: nowrap;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n margin-left: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n padding-right: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n display: none;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n white-space: normal;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n width: auto;\n background: none;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n background: rgb(87, 131, 235);\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n padding-left: 12px;\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-icon {\n width: 24px;\n height: 24px;\n margin: 0 8px 0 0;\n font-size: 12px;\n line-height: 24px;\n text-align: center;\n border-radius: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title {\n padding-right: 12px;\n font-size: 14px;\n line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title::after {\n top: 12px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-description {\n color: rgb(92, 101, 115);\n font-size: 14px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-tail {\n top: 8px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n width: inherit;\n height: inherit;\n line-height: inherit;\n background: none;\n border: 0;\n border-radius: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n font-size: 24px;\n line-height: 24px;\n transform: none;\n}\n.paraui-v4-stepper.component-stepper-vertical {\n display: flex;\n flex-direction: column;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item {\n display: block;\n flex: 1 0 auto;\n padding-left: 0;\n overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n float: left;\n margin-right: 16px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n display: block;\n min-height: 68px;\n overflow: hidden;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n line-height: 32px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n padding-bottom: 12px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n flex-direction: row;\n align-items: flex-start;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n position: absolute;\n top: 0;\n left: 15px;\n width: 1px;\n height: 100%;\n padding: 36px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n width: 1px;\n height: 100%;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n display: block;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n display: none;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n position: absolute;\n top: 0;\n left: 12px;\n padding: 30px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item {\n overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n margin-left: 58px;\n padding: 3.5px 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-content {\n display: block;\n width: 116px;\n margin-top: 8px;\n text-align: center;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n display: inline-block;\n margin-left: 42px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title {\n padding-right: 0;\n padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n display: none;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n display: block;\n margin-bottom: 4px;\n margin-left: 0;\n line-height: 1.5715;\n}\n.paraui-v4-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n margin-left: 46px;\n}";
63
+ var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-stepper {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n color: rgb(92, 101, 115);\n font-size: 14px;\n font-variant: tabular-nums;\n line-height: 1.5715;\n list-style: none;\n font-feature-settings: \"tnum\";\n display: flex;\n width: 100%;\n text-align: initial;\n overflow: auto;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item {\n min-width: 140px;\n}\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-icon,\n.paraui-v4-stepper.component-stepper-label-horizontal .component-stepper-item-content {\n width: calc(100% - 40px);\n line-height: normal;\n}\n.paraui-v4-stepper .component-stepper-item {\n position: relative;\n display: inline-block;\n flex: 1;\n vertical-align: top;\n overflow: hidden;\n margin-inline-start: 10px;\n}\n.paraui-v4-stepper .component-stepper-item-container {\n outline: none;\n}\n.paraui-v4-stepper .component-stepper-item-container .component-stepper-item-icon {\n margin-inline-start: 0;\n margin-inline-end: 10px;\n}\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v4-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n display: none;\n}\n.paraui-v4-stepper .component-stepper-item-icon,\n.paraui-v4-stepper .component-stepper-item-content {\n display: inline-block;\n vertical-align: top;\n}\n.paraui-v4-stepper .component-stepper-item-icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 30px;\n height: 30px;\n font-size: 16px;\n line-height: 30px;\n text-align: center;\n border-radius: 50%;\n background-color: rgb(234, 236, 241);\n transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: rgb(92, 101, 115);\n vertical-align: middle;\n}\n.paraui-v4-stepper .component-stepper-item-icon .component-stepper-icon svg {\n color: inherit;\n}\n.paraui-v4-stepper .component-stepper-item-tail {\n position: absolute;\n top: 12px;\n left: 0;\n width: 100%;\n padding: 0 10px;\n}\n.paraui-v4-stepper .component-stepper-item-tail::after {\n display: inline-block;\n width: 100%;\n height: 1px;\n border-radius: 1px;\n transition: background 0.3s;\n content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-title {\n display: inline-block;\n color: rgb(92, 101, 115);\n font-size: 14px;\n padding-inline-end: 10px;\n font-weight: 700;\n line-height: 30px;\n position: relative;\n max-width: 140px;\n min-width: 50px;\n}\n.paraui-v4-stepper .component-stepper-item-title::after {\n position: absolute;\n top: 16px;\n inset-inline-start: 100%;\n display: block;\n width: 9999px;\n height: 1px;\n background: rgba(5, 5, 5, 0.06);\n content: \"\";\n}\n.paraui-v4-stepper .component-stepper-item-subtitle {\n display: inline;\n margin-left: 8px;\n color: rgb(92, 101, 115);\n font-weight: normal;\n font-size: 14px;\n}\n.paraui-v4-stepper .component-stepper-item-description {\n color: rgb(92, 101, 115);\n font-size: 12px;\n line-height: 12px;\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(255, 255, 255);\n background: rgb(246, 103, 103);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon {\n background-color: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(92, 101, 115);\n background: rgb(234, 236, 241);\n}\n.paraui-v4-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n border-top: 1px dashed rgb(212, 218, 227);\n height: 0;\n background: transparent;\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n border-left: 1px dashed rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon {\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n background: rgb(46, 101, 230);\n}\n@media (min-width: 1200px) and (max-width: 2000px) {\n .paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n background: linear-gradient(63deg, #2e65e6 1%, #ffffff 83%);\n background-position: 400px 0;\n background-size: 400px 100%;\n }\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n color: rgb(255, 255, 255);\n}\n.paraui-v4-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n font-weight: 400;\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon {\n background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n color: rgb(255, 255, 255);\n background-color: rgb(87, 131, 235);\n}\n.paraui-v4-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: rgb(29, 33, 38);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n background-color: rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n border-left: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon {\n background-color: rgb(255, 255, 255);\n border-color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n color: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n background: linear-gradient(90deg, rgb(46, 101, 230) 50%, rgb(240, 245, 255) 100%);\n}\n.paraui-v4-stepper .component-stepper-item-disabled {\n cursor: not-allowed;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n cursor: pointer;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n transition: color 0.3s;\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n border-color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n height: auto;\n border: 0;\n}\n.paraui-v4-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n top: 0;\n left: 0;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n}\n.paraui-v4-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n white-space: nowrap;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n margin-left: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n padding-right: 0;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n display: none;\n}\n.paraui-v4-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n white-space: normal;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n width: auto;\n background: none;\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n background: rgb(46, 101, 230);\n}\n.paraui-v4-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n background: rgb(87, 131, 235);\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n padding-left: 12px;\n}\n.paraui-v4-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-icon {\n width: 24px;\n height: 24px;\n margin: 0 8px 0 0;\n font-size: 12px;\n line-height: 24px;\n text-align: center;\n border-radius: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title {\n padding-right: 12px;\n font-size: 14px;\n line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-title::after {\n top: 12px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-description {\n color: rgb(92, 101, 115);\n font-size: 14px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-tail {\n top: 8px;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n width: inherit;\n height: inherit;\n line-height: inherit;\n background: none;\n border: 0;\n border-radius: 0;\n}\n.paraui-v4-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n font-size: 24px;\n line-height: 24px;\n transform: none;\n}\n.paraui-v4-stepper.component-stepper-vertical {\n display: flex;\n flex-direction: column;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item {\n display: block;\n flex: 1 0 auto;\n padding-left: 0;\n overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n float: left;\n margin-right: 16px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n display: block;\n min-height: 68px;\n overflow: hidden;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n line-height: 32px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n padding-bottom: 12px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n flex-direction: row;\n align-items: flex-start;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n position: absolute;\n top: 0;\n left: 15px;\n width: 1px;\n height: 100%;\n padding: 36px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n width: 1px;\n height: 100%;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n display: block;\n}\n.paraui-v4-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n display: none;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n position: absolute;\n top: 0;\n left: 12px;\n padding: 30px 0 6px;\n}\n.paraui-v4-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n line-height: 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item {\n overflow: visible;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n margin-left: 58px;\n padding: 3.5px 24px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-content {\n display: block;\n width: 116px;\n margin-top: 8px;\n text-align: center;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n display: inline-block;\n margin-left: 42px;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title {\n padding-right: 0;\n padding-left: 0;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n display: none;\n}\n.paraui-v4-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n display: block;\n margin-bottom: 4px;\n margin-left: 0;\n line-height: 1.5715;\n}\n.paraui-v4-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n margin-left: 46px;\n}";
64
64
  styleInject(css_248z);
65
65
 
66
66
  //steps
package/Styles/scrollbar.scss CHANGED
@@ -1,39 +1,39 @@
1
1
  // 滚动条整体宽度
2
2
  ::-webkit-scrollbar {
3
- width: 6px;
4
- height: 6px;
5
- background-color: $A2; // 背景色
3
+ width: 8px;
4
+ height: 8px;
5
+ background-color: $NA2; // 背景色
6
6
  }
7
7
 
8
8
  // 滚动条滑槽样式
9
9
  ::-webkit-scrollbar-track {
10
- border-radius: 6px;
10
+ border-radius: 4px;
11
11
  }
12
12
 
13
13
  // 滚动条样式
14
14
  ::-webkit-scrollbar-thumb {
15
- background: $T3;
16
- border-radius: 6px;
15
+ background: $NT3;
16
+ border-radius: 4px;
17
17
  }
18
18
 
19
19
  // 边角
20
20
  ::-webkit-scrollbar-corner {
21
- background: $A2;
21
+ background: $NA2;
22
22
  }
23
23
 
24
24
  // 鼠标移入上去
25
25
  ::-webkit-scrollbar-thumb:hover {
26
- background: $A1;
26
+ background: $NA1;
27
27
  }
28
28
 
29
29
  // 鼠标点击
30
30
  ::-webkit-scrollbar-thumb:active {
31
- background: $A1;
31
+ background: $NA1;
32
32
  }
33
33
 
34
34
  // 浏览器失焦的样式
35
35
  ::-webkit-scrollbar-thumb:window-inactive {
36
- background-color: $T3;
36
+ background-color: $NT3;
37
37
  }
38
38
 
39
39
  .#{$prefixCls}-scrollbar-small {
@@ -46,54 +46,54 @@
46
46
 
47
47
  // 滚动条滑槽样式
48
48
  &::-webkit-scrollbar-track {
49
- border-radius: 4px;
49
+ border-radius: 2px;
50
50
  }
51
51
 
52
52
  // 滚动条样式
53
53
  &::-webkit-scrollbar-thumb {
54
- border-radius: 4px;
54
+ border-radius: 2px;
55
55
  }
56
56
  }
57
57
  }
58
58
 
59
59
  .#{$prefixCls}-scrollbar-small-deep {
60
- & *, & {
60
+ &, & * {
61
61
  // 滚动条整体宽度
62
- ::-webkit-scrollbar {
62
+ &::-webkit-scrollbar {
63
63
  width: 4px;
64
64
  height: 4px;
65
- background-color: $T2; // 背景色
65
+ background-color: $NT2; // 背景色
66
66
  }
67
67
 
68
68
  // 滚动条滑槽样式
69
- ::-webkit-scrollbar-track {
70
- border-radius: 4px;
69
+ &::-webkit-scrollbar-track {
70
+ border-radius: 2px;
71
71
  }
72
72
 
73
73
  // 滚动条样式
74
- ::-webkit-scrollbar-thumb {
75
- border-radius: 4px;
76
- background: $A1;
74
+ &::-webkit-scrollbar-thumb {
75
+ border-radius: 2px;
76
+ background: $NA1;
77
77
  }
78
78
 
79
79
  // 边角
80
- ::-webkit-scrollbar-corner {
81
- background: $T2;
80
+ &::-webkit-scrollbar-corner {
81
+ background: $NT2;
82
82
  }
83
83
 
84
84
  // 鼠标移入上去
85
- ::-webkit-scrollbar-thumb:hover {
86
- background: $T3;
85
+ &::-webkit-scrollbar-thumb:hover {
86
+ background: $NT3;
87
87
  }
88
88
 
89
89
  // 鼠标点击
90
- ::-webkit-scrollbar-thumb:active {
91
- background: $T3;
90
+ &::-webkit-scrollbar-thumb:active {
91
+ background: $NT3;
92
92
  }
93
93
 
94
94
  // 浏览器失焦的样式
95
- ::-webkit-scrollbar-thumb:window-inactive {
96
- background-color: $A1;
95
+ &::-webkit-scrollbar-thumb:window-inactive {
96
+ background-color: $NA1;
97
97
  }
98
98
  }
99
99
  }
@@ -102,18 +102,18 @@
102
102
  & *, & {
103
103
  // 滚动条整体宽度
104
104
  &::-webkit-scrollbar {
105
- width: 6px;
106
- height: 6px;
105
+ width: 4px;
106
+ height: 4px;
107
107
  }
108
108
 
109
109
  // 滚动条滑槽样式
110
110
  &::-webkit-scrollbar-track {
111
- border-radius: 6px;
111
+ border-radius: 2px;
112
112
  }
113
113
 
114
114
  // 滚动条样式
115
115
  &::-webkit-scrollbar-thumb {
116
- border-radius: 6px;
116
+ border-radius: 2px;
117
117
  }
118
118
  }
119
119
  }
@@ -121,41 +121,41 @@
121
121
  .#{$prefixCls}-scrollbar-medium-deep {
122
122
  & *, & {
123
123
  // 滚动条整体宽度
124
- ::-webkit-scrollbar {
125
- width: 6px;
126
- height: 6px;
127
- background-color: $T2; // 背景色
124
+ &::-webkit-scrollbar {
125
+ width: 4px;
126
+ height: 4px;
127
+ background-color: $NT2; // 背景色
128
128
  }
129
129
 
130
130
  // 滚动条滑槽样式
131
- ::-webkit-scrollbar-track {
132
- border-radius: 6px;
131
+ &::-webkit-scrollbar-track {
132
+ border-radius: 2px;
133
133
  }
134
134
 
135
135
  // 滚动条样式
136
- ::-webkit-scrollbar-thumb {
137
- border-radius: 6px;
138
- background: $A1;
136
+ &::-webkit-scrollbar-thumb {
137
+ border-radius: 2px;
138
+ background: $NA1;
139
139
  }
140
140
 
141
141
  // 边角
142
- ::-webkit-scrollbar-corner {
143
- background: $T2;
142
+ &::-webkit-scrollbar-corner {
143
+ background: $NT2;
144
144
  }
145
145
 
146
146
  // 鼠标移入上去
147
- ::-webkit-scrollbar-thumb:hover {
148
- background: $T3;
147
+ &::-webkit-scrollbar-thumb:hover {
148
+ background: $NT3;
149
149
  }
150
150
 
151
151
  // 鼠标点击
152
- ::-webkit-scrollbar-thumb:active {
153
- background: $T3;
152
+ &::-webkit-scrollbar-thumb:active {
153
+ background: $NT3;
154
154
  }
155
155
 
156
156
  // 浏览器失焦的样式
157
- ::-webkit-scrollbar-thumb:window-inactive {
158
- background-color: $A1;
157
+ &::-webkit-scrollbar-thumb:window-inactive {
158
+ background-color: $NA1;
159
159
  }
160
160
  }
161
161
  }
@@ -170,12 +170,12 @@
170
170
 
171
171
  // 滚动条滑槽样式
172
172
  &::-webkit-scrollbar-track {
173
- border-radius: 8px;
173
+ border-radius: 4px;
174
174
  }
175
175
 
176
176
  // 滚动条样式
177
177
  &::-webkit-scrollbar-thumb {
178
- border-radius: 8px;
178
+ border-radius: 4px;
179
179
  }
180
180
  }
181
181
  }
@@ -183,41 +183,41 @@
183
183
  .#{$prefixCls}-scrollbar-large-deep {
184
184
  & *, & {
185
185
  // 滚动条整体宽度
186
- ::-webkit-scrollbar {
186
+ &::-webkit-scrollbar {
187
187
  width: 8px;
188
188
  height: 8px;
189
- background-color: $T2; // 背景色
189
+ background-color: $NT2; // 背景色
190
190
  }
191
191
 
192
192
  // 滚动条滑槽样式
193
- ::-webkit-scrollbar-track {
194
- border-radius: 8px;
193
+ &::-webkit-scrollbar-track {
194
+ border-radius: 4px;
195
195
  }
196
196
 
197
197
  // 滚动条样式
198
- ::-webkit-scrollbar-thumb {
199
- border-radius: 8px;
200
- background: $A1;
198
+ &::-webkit-scrollbar-thumb {
199
+ border-radius: 4px;
200
+ background: $NA1;
201
201
  }
202
202
 
203
203
  // 边角
204
- ::-webkit-scrollbar-corner {
205
- background: $T2;
204
+ &::-webkit-scrollbar-corner {
205
+ background: $NT2;
206
206
  }
207
207
 
208
208
  // 鼠标移入上去
209
- ::-webkit-scrollbar-thumb:hover {
210
- background: $T3;
209
+ &::-webkit-scrollbar-thumb:hover {
210
+ background: $NT3;
211
211
  }
212
212
 
213
213
  // 鼠标点击
214
- ::-webkit-scrollbar-thumb:active {
215
- background: $T3;
214
+ &::-webkit-scrollbar-thumb:active {
215
+ background: $NT3;
216
216
  }
217
217
 
218
218
  // 浏览器失焦的样式
219
- ::-webkit-scrollbar-thumb:window-inactive {
220
- background-color: $A1;
219
+ &::-webkit-scrollbar-thumb:window-inactive {
220
+ background-color: $NA1;
221
221
  }
222
222
  }
223
223
  }