@qsxy/element-plus-react 1.0.0-next.12 → 1.0.0-next.15

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 (187) hide show
  1. package/dist/Dialog/Dialog.js +5 -6
  2. package/dist/Dialog/DialogContext.d.ts +1 -1
  3. package/dist/Dialog/DialogContext.js +1 -1
  4. package/dist/Drawer/Drawer.d.ts +2 -5
  5. package/dist/Drawer/Drawer.js +98 -35
  6. package/dist/Drawer/DrawerBody.js +6 -12
  7. package/dist/Drawer/DrawerContext.d.ts +1 -13
  8. package/dist/Drawer/DrawerContext.js +1 -11
  9. package/dist/Drawer/DrawerHeader.js +5 -18
  10. package/dist/Drawer/typings.d.ts +31 -10
  11. package/dist/InputNumber/InputNumber.d.ts +2 -2
  12. package/dist/InputNumber/InputNumber.js +3 -3
  13. package/dist/Loading/Loading.d.ts +7 -2
  14. package/dist/Loading/Loading.js +108 -57
  15. package/dist/Loading/typings.d.ts +7 -1
  16. package/dist/Message/Main.d.ts +0 -7
  17. package/dist/Message/Main.js +0 -7
  18. package/dist/Message/Message.d.ts +2 -2
  19. package/dist/Message/Message.js +4 -3
  20. package/dist/Message/index.d.ts +0 -8
  21. package/dist/Message/index.js +5 -9
  22. package/dist/MessageBox/MessageBox.js +2 -1
  23. package/dist/MessageBox/index.d.ts +5 -5
  24. package/dist/MessageBox/index.js +1 -0
  25. package/dist/Notification/Main.d.ts +0 -7
  26. package/dist/Notification/Main.js +0 -7
  27. package/dist/Popover/Popover.d.ts +3 -2
  28. package/dist/Popover/Popover.js +10 -5
  29. package/dist/Popover/typings.d.ts +0 -1
  30. package/dist/Skeleton/PlaceholderGraph.d.ts +1 -1
  31. package/dist/Skeleton/PlaceholderGraph.js +3 -3
  32. package/dist/Skeleton/PlaceholderGrid.d.ts +1 -1
  33. package/dist/Skeleton/PlaceholderGrid.js +3 -3
  34. package/dist/Skeleton/PlaceholderParagraph.d.ts +2 -2
  35. package/dist/Skeleton/PlaceholderParagraph.js +13 -8
  36. package/dist/Skeleton/Skeleton.d.ts +2 -9
  37. package/dist/Skeleton/Skeleton.js +94 -7
  38. package/dist/Skeleton/SkeletonContext.d.ts +17 -0
  39. package/dist/Skeleton/SkeletonContext.js +5 -0
  40. package/dist/Skeleton/SkeletonItem.d.ts +4 -0
  41. package/dist/Skeleton/SkeletonItem.js +47 -0
  42. package/dist/Skeleton/index.d.ts +2 -3
  43. package/dist/Skeleton/index.js +2 -1
  44. package/dist/Skeleton/typings.d.ts +29 -0
  45. package/dist/Skeleton/typings.js +1 -0
  46. package/dist/Table/Table.d.ts +0 -1
  47. package/dist/Table/Table.js +1 -1
  48. package/dist/Table/hooks/useSelection.d.ts +1 -1
  49. package/dist/Tooltip/Tooltip.d.ts +3 -3
  50. package/dist/Tooltip/Tooltip.js +6 -6
  51. package/dist/index.css +1 -1
  52. package/dist/index.d.ts +2 -2
  53. package/dist/index.js +1 -1
  54. package/package.json +1 -1
  55. package/theme-chalk/drawer/index.scss +61 -65
  56. package/theme-chalk/message/index.scss +11 -3
  57. package/theme-chalk/placeholder/index.scss +22 -37
  58. package/dist/theme-chalk/avatar/index.scss +0 -50
  59. package/dist/theme-chalk/badge/index.scss +0 -63
  60. package/dist/theme-chalk/breadcrumb/index.scss +0 -65
  61. package/dist/theme-chalk/build.scss +0 -2
  62. package/dist/theme-chalk/button/_mixins.scss +0 -317
  63. package/dist/theme-chalk/button/button-group.scss +0 -83
  64. package/dist/theme-chalk/button/button.scss +0 -382
  65. package/dist/theme-chalk/button/index.scss +0 -2
  66. package/dist/theme-chalk/calendar/date-picker.scss +0 -112
  67. package/dist/theme-chalk/calendar/date-range-picker.scss +0 -139
  68. package/dist/theme-chalk/calendar/date-table.scss +0 -156
  69. package/dist/theme-chalk/calendar/index.scss +0 -6
  70. package/dist/theme-chalk/calendar/month-table.scss +0 -92
  71. package/dist/theme-chalk/calendar/picker-panel.scss +0 -136
  72. package/dist/theme-chalk/calendar/year-table.scss +0 -107
  73. package/dist/theme-chalk/card/index.scss +0 -44
  74. package/dist/theme-chalk/carousel/index.scss +0 -237
  75. package/dist/theme-chalk/cascader/cascader-panel.scss +0 -184
  76. package/dist/theme-chalk/cascader/cascader.scss +0 -239
  77. package/dist/theme-chalk/cascader/index.scss +0 -2
  78. package/dist/theme-chalk/checkbox/index.scss +0 -255
  79. package/dist/theme-chalk/checkbox-button/index.scss +0 -117
  80. package/dist/theme-chalk/checkbox-group/index.scss +0 -33
  81. package/dist/theme-chalk/col/_mixins.scss +0 -62
  82. package/dist/theme-chalk/col/index.scss +0 -50
  83. package/dist/theme-chalk/collapse/index.scss +0 -84
  84. package/dist/theme-chalk/color-picker/index.scss +0 -340
  85. package/dist/theme-chalk/common/_var.scss +0 -6
  86. package/dist/theme-chalk/common/index.d.ts +0 -1
  87. package/dist/theme-chalk/common/index.js +0 -1
  88. package/dist/theme-chalk/common/index.scss +0 -222
  89. package/dist/theme-chalk/date-picker/index.scss +0 -253
  90. package/dist/theme-chalk/date-time-picker/index.scss +0 -3
  91. package/dist/theme-chalk/date-time-picker/time-picker.scss +0 -83
  92. package/dist/theme-chalk/date-time-picker/time-range-picker.scss +0 -32
  93. package/dist/theme-chalk/descriptions/descriptions-item.scss +0 -66
  94. package/dist/theme-chalk/descriptions/descriptions.scss +0 -160
  95. package/dist/theme-chalk/descriptions/index.scss +0 -2
  96. package/dist/theme-chalk/dev.scss +0 -2
  97. package/dist/theme-chalk/dialog/index.scss +0 -190
  98. package/dist/theme-chalk/display.scss +0 -46
  99. package/dist/theme-chalk/divider/index.scss +0 -51
  100. package/dist/theme-chalk/doc.scss +0 -2
  101. package/dist/theme-chalk/drawer/index.scss +0 -250
  102. package/dist/theme-chalk/dropdown/index.scss +0 -147
  103. package/dist/theme-chalk/empty/index.scss +0 -69
  104. package/dist/theme-chalk/fonts/fa-brands-400.ttf +0 -0
  105. package/dist/theme-chalk/fonts/fa-brands-400.woff2 +0 -0
  106. package/dist/theme-chalk/fonts/fa-duotone-900.ttf +0 -0
  107. package/dist/theme-chalk/fonts/fa-duotone-900.woff2 +0 -0
  108. package/dist/theme-chalk/fonts/fa-light-300.ttf +0 -0
  109. package/dist/theme-chalk/fonts/fa-light-300.woff2 +0 -0
  110. package/dist/theme-chalk/fonts/fa-regular-400.ttf +0 -0
  111. package/dist/theme-chalk/fonts/fa-regular-400.woff2 +0 -0
  112. package/dist/theme-chalk/fonts/fa-solid-900.ttf +0 -0
  113. package/dist/theme-chalk/fonts/fa-solid-900.woff2 +0 -0
  114. package/dist/theme-chalk/fonts/fa-thin-100.ttf +0 -0
  115. package/dist/theme-chalk/fonts/fa-thin-100.woff2 +0 -0
  116. package/dist/theme-chalk/fonts/fa-v4compatibility.ttf +0 -0
  117. package/dist/theme-chalk/fonts/fa-v4compatibility.woff2 +0 -0
  118. package/dist/theme-chalk/form/index.scss +0 -378
  119. package/dist/theme-chalk/icon/fonts.scss +0 -9
  120. package/dist/theme-chalk/icon/index.scss +0 -44
  121. package/dist/theme-chalk/icon/scss/_animated.scss +0 -205
  122. package/dist/theme-chalk/icon/scss/_bordered-pulled.scss +0 -20
  123. package/dist/theme-chalk/icon/scss/_core.scss +0 -33
  124. package/dist/theme-chalk/icon/scss/_duotone-icons.scss +0 -12
  125. package/dist/theme-chalk/icon/scss/_fixed-width.scss +0 -7
  126. package/dist/theme-chalk/icon/scss/_functions.scss +0 -57
  127. package/dist/theme-chalk/icon/scss/_icons.scss +0 -11
  128. package/dist/theme-chalk/icon/scss/_list.scss +0 -20
  129. package/dist/theme-chalk/icon/scss/_mixins.scss +0 -102
  130. package/dist/theme-chalk/icon/scss/_rotated-flipped.scss +0 -31
  131. package/dist/theme-chalk/icon/scss/_screen-reader.scss +0 -14
  132. package/dist/theme-chalk/icon/scss/_shims.scss +0 -2606
  133. package/dist/theme-chalk/icon/scss/_sizing.scss +0 -16
  134. package/dist/theme-chalk/icon/scss/_stacked.scss +0 -32
  135. package/dist/theme-chalk/icon/scss/_variables.scss +0 -9189
  136. package/dist/theme-chalk/icon/scss/brands.scss +0 -27
  137. package/dist/theme-chalk/icon/scss/duotone.scss +0 -72
  138. package/dist/theme-chalk/icon/scss/fontawesome.scss +0 -13
  139. package/dist/theme-chalk/icon/scss/index.scss +0 -15
  140. package/dist/theme-chalk/icon/scss/light.scss +0 -21
  141. package/dist/theme-chalk/icon/scss/regular.scss +0 -21
  142. package/dist/theme-chalk/icon/scss/solid.scss +0 -21
  143. package/dist/theme-chalk/icon/scss/thin.scss +0 -21
  144. package/dist/theme-chalk/icon/scss/v4-shims.scss +0 -3
  145. package/dist/theme-chalk/index.scss +0 -67
  146. package/dist/theme-chalk/input/_mixins.scss +0 -16
  147. package/dist/theme-chalk/input/index.scss +0 -3
  148. package/dist/theme-chalk/input/input-range.scss +0 -208
  149. package/dist/theme-chalk/input/input.scss +0 -577
  150. package/dist/theme-chalk/input-number/index.scss +0 -172
  151. package/dist/theme-chalk/link/index.scss +0 -99
  152. package/dist/theme-chalk/loading/index.scss +0 -94
  153. package/dist/theme-chalk/message/index.scss +0 -169
  154. package/dist/theme-chalk/message-box/index.scss +0 -184
  155. package/dist/theme-chalk/notification/index.scss +0 -155
  156. package/dist/theme-chalk/pagination/index.scss +0 -515
  157. package/dist/theme-chalk/placeholder/index.scss +0 -135
  158. package/dist/theme-chalk/popconfirm/index.scss +0 -35
  159. package/dist/theme-chalk/popover/index.scss +0 -54
  160. package/dist/theme-chalk/popper/index.scss +0 -86
  161. package/dist/theme-chalk/progress/index.scss +0 -155
  162. package/dist/theme-chalk/radio/index.scss +0 -2
  163. package/dist/theme-chalk/radio/radio-button.scss +0 -128
  164. package/dist/theme-chalk/radio/radio.scss +0 -171
  165. package/dist/theme-chalk/radio-group/index.scss +0 -31
  166. package/dist/theme-chalk/row/index.scss +0 -30
  167. package/dist/theme-chalk/scrollbar/index.scss +0 -103
  168. package/dist/theme-chalk/select/index.scss +0 -244
  169. package/dist/theme-chalk/select/option-group.scss +0 -54
  170. package/dist/theme-chalk/select/option.scss +0 -63
  171. package/dist/theme-chalk/select/select-dropdown.scss +0 -57
  172. package/dist/theme-chalk/switch/index.scss +0 -273
  173. package/dist/theme-chalk/table/index.scss +0 -714
  174. package/dist/theme-chalk/tabs/index.scss +0 -620
  175. package/dist/theme-chalk/tag/index.scss +0 -360
  176. package/dist/theme-chalk/time-line/_timeline-item.scss +0 -90
  177. package/dist/theme-chalk/time-line/_timeline.scss +0 -50
  178. package/dist/theme-chalk/time-line/index.scss +0 -2
  179. package/dist/theme-chalk/time-picker/index.scss +0 -109
  180. package/dist/theme-chalk/tooltip/index.scss +0 -13
  181. package/dist/theme-chalk/transfer/index.scss +0 -247
  182. package/dist/theme-chalk/transition/index.scss +0 -756
  183. package/dist/theme-chalk/tree/_directory.scss +0 -73
  184. package/dist/theme-chalk/tree/_tree.scss +0 -401
  185. package/dist/theme-chalk/tree/index.scss +0 -2
  186. package/dist/theme-chalk/tree-select/index.scss +0 -25
  187. package/dist/theme-chalk/upload/index.scss +0 -631
@@ -1,27 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
-
4
- :root,
5
- :host {
6
- --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
7
- }
8
-
9
- @font-face {
10
- font-family: 'Font Awesome 6 Brands';
11
- font-style: normal;
12
- font-weight: 400;
13
- font-display: $fa-font-display;
14
- src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
15
- }
16
-
17
- .fab,
18
- .#{$fa-css-prefix}-brands {
19
- font-family: 'Font Awesome 6 Brands';
20
- font-weight: 400;
21
- }
22
-
23
- @each $name, $icon in $fa-brand-icons {
24
- .#{$fa-css-prefix}-#{$name}:before {
25
- content: unquote('"#{ $icon }"');
26
- }
27
- }
@@ -1,72 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
-
4
- :root,
5
- :host {
6
- --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
7
- }
8
-
9
- @font-face {
10
- font-family: 'Font Awesome 6 Duotone';
11
- font-style: normal;
12
- font-weight: 900;
13
- font-display: $fa-font-display;
14
- src: url('#{$fa-font-path}/fa-duotone-900.woff2') format('woff2'), url('#{$fa-font-path}/fa-duotone-900.ttf') format('truetype');
15
- }
16
-
17
- .fad,
18
- .#{$fa-css-prefix}-duotone {
19
- position: relative;
20
- font-family: 'Font Awesome 6 Duotone';
21
- font-weight: 900;
22
- letter-spacing: normal;
23
- }
24
-
25
- .fad::before,
26
- .#{$fa-css-prefix}-duotone::before {
27
- position: absolute;
28
- color: var(--#{$fa-css-prefix}-primary-color, inherit);
29
- opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
30
- }
31
-
32
- .fad::after,
33
- .#{$fa-css-prefix}-duotone::after {
34
- color: var(--#{$fa-css-prefix}-secondary-color, inherit);
35
- opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
36
- }
37
-
38
- .#{$fa-css-prefix}-swap-opacity .fad::before,
39
- .#{$fa-css-prefix}-swap-opacity .fa-duotone::before,
40
- .fad.#{$fa-css-prefix}-swap-opacity::before,
41
- .fa-duotone.#{$fa-css-prefix}-swap-opacity::before {
42
- opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
43
- }
44
-
45
- .#{$fa-css-prefix}-swap-opacity .fad::after,
46
- .#{$fa-css-prefix}-swap-opacity .fa-duotone::after,
47
- .fad.#{$fa-css-prefix}-swap-opacity::after,
48
- .fa-duotone.#{$fa-css-prefix}-swap-opacity::after {
49
- opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
50
- }
51
-
52
- .fad.#{$fa-css-prefix}-inverse,
53
- .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-inverse {
54
- color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
55
- }
56
-
57
- .fad.#{$fa-css-prefix}-stack-1x,
58
- .fad.#{$fa-css-prefix}-stack-2x,
59
- .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x,
60
- .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x {
61
- position: absolute;
62
- }
63
-
64
- .fad.#{$fa-css-prefix}-stack-1x::before,
65
- .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x::before,
66
- .fad.#{$fa-css-prefix}-stack-2x::before,
67
- .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x::before,
68
- .fad.#{$fa-css-prefix}-fw::before,
69
- .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-fw::before {
70
- left: 50%;
71
- transform: translateX(-50%);
72
- }
@@ -1,13 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
- @import 'mixins';
4
- @import 'core';
5
- @import 'sizing';
6
- @import 'fixed-width';
7
- @import 'list';
8
- @import 'bordered-pulled';
9
- @import 'animated';
10
- @import 'rotated-flipped';
11
- @import 'stacked';
12
- @import 'icons';
13
- @import 'screen-reader';
@@ -1,15 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
- @import 'mixins';
4
- @import 'core';
5
- @import 'sizing';
6
- @import 'fixed-width';
7
- @import 'list';
8
- @import 'bordered-pulled';
9
- @import 'animated';
10
- @import 'rotated-flipped';
11
- @import 'stacked';
12
- @import 'icons';
13
- @import 'screen-reader';
14
- @import 'duotone-icons';
15
- @import 'shims';
@@ -1,21 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
-
4
- :root,
5
- :host {
6
- --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
7
- }
8
-
9
- @font-face {
10
- font-family: $fa-style-family;
11
- font-style: normal;
12
- font-weight: 300;
13
- font-display: $fa-font-display;
14
- src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'), url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
15
- }
16
-
17
- .fal,
18
- .#{$fa-css-prefix}-light {
19
- font-family: $fa-style-family;
20
- font-weight: 300;
21
- }
@@ -1,21 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
-
4
- :root,
5
- :host {
6
- --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
7
- }
8
-
9
- @font-face {
10
- font-family: $fa-style-family;
11
- font-style: normal;
12
- font-weight: 400;
13
- font-display: $fa-font-display;
14
- src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
15
- }
16
-
17
- .far,
18
- .#{$fa-css-prefix}-regular {
19
- font-family: $fa-style-family;
20
- font-weight: 400;
21
- }
@@ -1,21 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
-
4
- :root,
5
- :host {
6
- --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
7
- }
8
-
9
- @font-face {
10
- font-family: $fa-style-family;
11
- font-style: normal;
12
- font-weight: 900;
13
- font-display: $fa-font-display;
14
- src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'), url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
15
- }
16
-
17
- .fas,
18
- .#{$fa-css-prefix}-solid {
19
- font-family: $fa-style-family;
20
- font-weight: 900;
21
- }
@@ -1,21 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
-
4
- :root,
5
- :host {
6
- --#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family }';
7
- }
8
-
9
- @font-face {
10
- font-family: $fa-style-family;
11
- font-style: normal;
12
- font-weight: 100;
13
- font-display: $fa-font-display;
14
- src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'), url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
15
- }
16
-
17
- .fat,
18
- .#{$fa-css-prefix}-thin {
19
- font-family: $fa-style-family;
20
- font-weight: 100;
21
- }
@@ -1,3 +0,0 @@
1
- @import 'functions';
2
- @import 'variables';
3
- @import 'shims';
@@ -1,67 +0,0 @@
1
- /* Basic 基础组件 */
2
- @import './common';
3
- @import './link';
4
- @import './button';
5
- @import './icon/fonts';
6
- @import './icon';
7
- @import './row';
8
- @import './col';
9
- @import './scrollbar';
10
- @import './popper';
11
- @import './transition';
12
-
13
- /* Form 表单组件 */
14
- @import './cascader';
15
- @import './carousel/';
16
- @import './checkbox';
17
- @import './checkbox-button';
18
- @import './checkbox-group';
19
- @import './color-picker';
20
- @import './radio';
21
- @import './radio-group';
22
- @import './input';
23
- @import './input-number';
24
- @import './select';
25
- @import './calendar';
26
- @import './date-picker';
27
- @import './date-time-picker';
28
- @import './time-picker';
29
- @import './switch';
30
- @import './transfer';
31
- @import './form';
32
- @import './upload';
33
-
34
- /* Data 数据展示 */
35
- @import './avatar/';
36
- @import './badge';
37
- @import './card';
38
- @import './collapse';
39
- @import './descriptions';
40
- @import './pagination';
41
- @import './progress';
42
- @import './table';
43
- @import './time-line';
44
- @import './tree';
45
- @import './tree-select';
46
- @import './tag';
47
-
48
- // /* Navigation 导航 */
49
- @import './breadcrumb';
50
- @import './dropdown';
51
- @import './tabs';
52
- @import './empty';
53
- @import './placeholder';
54
-
55
- /* Feedback 反馈组件 */
56
- @import './dialog';
57
- @import './drawer';
58
- @import './loading';
59
- @import './message';
60
- @import './message-box';
61
- @import './notification';
62
- @import './tooltip';
63
- @import './popconfirm';
64
- @import './popover';
65
-
66
- /* Others 其他 */
67
- @import './divider';
@@ -1,16 +0,0 @@
1
- @use '../common/var';
2
-
3
- @mixin placeholder {
4
- &::-webkit-input-placeholder {
5
- color: var(--#{$namespace}-text-color-placeholder);
6
- }
7
- &:-moz-placeholder {
8
- color: var(--#{$namespace}-text-color-placeholder);
9
- }
10
- &::-moz-placeholder {
11
- color: var(--#{$namespace}-text-color-placeholder);
12
- }
13
- &:-ms-input-placeholder {
14
- color: var(--#{$namespace}-text-color-placeholder);
15
- }
16
- }
@@ -1,3 +0,0 @@
1
- @import './mixins';
2
- @import './input.scss';
3
- @import './input-range.scss';
@@ -1,208 +0,0 @@
1
- @use '../common/var';
2
- @use 'sass:map';
3
-
4
- $input-height: () !default;
5
- $input-height: map.merge(
6
- (
7
- 'large': var(--#{$namespace}-component-size-large),
8
- 'default': 32px,
9
- 'small': var(--#{$namespace}-component-size-small),
10
- ),
11
- $input-height
12
- );
13
-
14
- $input-line-height: () !default;
15
- $input-line-height: map.merge(
16
- (
17
- 'large': var(--#{$namespace}-component-size-large),
18
- 'default': 32px,
19
- 'small': var(--#{$namespace}-component-size-small),
20
- ),
21
- $input-line-height
22
- );
23
-
24
- $input-font-size: () !default;
25
- $input-font-size: map.merge(
26
- (
27
- 'large': 14px,
28
- 'default': 14px,
29
- 'small': 12px,
30
- ),
31
- $input-font-size
32
- );
33
-
34
- .#{$namespace}-input-range {
35
- --#{$namespace}-input-hover-border-color: var(--#{$namespace}-border-color-hover);
36
-
37
- position: relative;
38
- display: inline-block;
39
- text-align: left;
40
-
41
- &.is-warning {
42
- box-shadow: 0 0 0 1px var(--#{$namespace}-color-warning) inset !important;
43
-
44
- .#{$namespace}-range-input {
45
- color: var(--#{$namespace}-color-warning) !important;
46
- }
47
- }
48
-
49
- &.is-error {
50
- box-shadow: 0 0 0 1px var(--#{$namespace}-color-error) inset !important;
51
-
52
- .#{$namespace}-range-input {
53
- color: var(--#{$namespace}-color-error) !important;
54
- }
55
- }
56
-
57
- .close-icon {
58
- cursor: pointer;
59
- }
60
-
61
- .clear-icon {
62
- cursor: pointer;
63
-
64
- &:hover {
65
- color: #909399;
66
- }
67
- }
68
-
69
- .#{$namespace}-range__icon {
70
- height: 1em;
71
- font-size: 14px;
72
- color: var(--#{$namespace}-text-color-placeholder);
73
- float: left;
74
- padding-right: 5px;
75
- }
76
-
77
- .#{$namespace}-range-input {
78
- appearance: none;
79
- border: none;
80
- outline: none;
81
- display: inline-block;
82
- height: 100%;
83
- margin: 0;
84
- padding: 0;
85
- width: 39%;
86
- text-align: center;
87
- font-size: 14px;
88
- color: var(--#{$namespace}-text-color-regular);
89
- background: transparent;
90
-
91
- @include placeholder();
92
- }
93
-
94
- .#{$namespace}-range-separator {
95
- flex: 1;
96
- display: inline-flex;
97
- justify-content: center;
98
- align-items: center;
99
- height: 100%;
100
- padding: 0 5px;
101
- margin: 0;
102
- font-size: 14px;
103
- word-break: keep-all;
104
- color: var(--#{$namespace}-text-color-primary);
105
- }
106
-
107
- .#{$namespace}-range__close-icon {
108
- font-size: 14px;
109
- color: var(--#{$namespace}-text-color-placeholder);
110
- height: 1em;
111
- width: 20px;
112
- cursor: pointer;
113
- padding-left: 5px;
114
- margin-left: 5px;
115
-
116
- &:hover {
117
- color: var(--#{$namespace}-color-primary);
118
- }
119
-
120
- svg {
121
- vertical-align: middle;
122
- }
123
-
124
- &--hidden {
125
- opacity: 0;
126
- visibility: hidden;
127
- }
128
- }
129
-
130
- .#{$namespace}-range__end-icon {
131
- font-size: 14px;
132
- color: var(--#{$namespace}-text-color-placeholder);
133
- height: 1em;
134
- width: unset;
135
- cursor: pointer;
136
- padding-left: 5px;
137
- }
138
-
139
- &.#{$namespace}-input__wrapper {
140
- display: inline-flex;
141
- align-items: center;
142
- justify-content: center;
143
- padding: 3px 10px;
144
- background-color: var(--#{$namespace}-input-bg-color, var(--#{$namespace}-fill-color-blank));
145
- background-image: none;
146
- transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
147
- height: map.get($input-height, default);
148
- }
149
-
150
- .#{$namespace}-range-input {
151
- line-height: 1;
152
- }
153
-
154
- &.is-active {
155
- box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
156
-
157
- &:hover {
158
- box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
159
- }
160
- }
161
-
162
- &.is-disabled {
163
- background-color: var(--#{$namespace}-disabled-bg-color);
164
- border-color: var(--#{$namespace}-border-color-light);
165
- color: var(--#{$namespace}-disabled-text-color);
166
- cursor: not-allowed;
167
-
168
- &:hover,
169
- &:focus {
170
- border-color: var(--#{$namespace}-border-color-light);
171
- }
172
-
173
- input {
174
- // background-color: #f5f7fa;
175
- color: var(--#{$namespace}-disabled-text-color);
176
- cursor: not-allowed;
177
-
178
- // @include placeholder();
179
- }
180
-
181
- .#{$namespace}-range-separator {
182
- color: var(--#{$namespace}-disabled-text-color);
183
- }
184
-
185
- &:hover {
186
- box-shadow: 0 0 0 1px var(--#{$namespace}-input-border-color, var(--#{$namespace}-border-color)) inset;
187
- }
188
- }
189
- }
190
-
191
- @each $size in (large, small) {
192
- .#{$namespace}-input-range--#{$size} {
193
- line-height: map.get($input-height, $size);
194
-
195
- &.#{$namespace}-input__warpper {
196
- height: map.get($input-height, $size);
197
- }
198
-
199
- .#{$namespace}-range-separator {
200
- line-height: map.get($input-line-height, $size);
201
- font-size: map.get($input-font-size, $size);
202
- }
203
-
204
- .#{$namespace}-range-input {
205
- font-size: map.get($input-font-size, $size);
206
- }
207
- }
208
- }