@canlooks/can-ui 0.0.97 → 0.0.99

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 (209) hide show
  1. package/dist/cjs/components/accordion/accordion.style.js +88 -86
  2. package/dist/cjs/components/actionSheet/actionSheet.style.js +35 -33
  3. package/dist/cjs/components/alert/alert.style.js +44 -42
  4. package/dist/cjs/components/anchorList/anchorList.style.js +40 -38
  5. package/dist/cjs/components/app/app.style.js +24 -17
  6. package/dist/cjs/components/avatar/avatar.style.js +22 -20
  7. package/dist/cjs/components/avatar/avatarGroup.style.js +24 -22
  8. package/dist/cjs/components/backdrop/backdrop.style.js +11 -9
  9. package/dist/cjs/components/badge/badge.style.js +42 -40
  10. package/dist/cjs/components/bottomNavigation/bottomNavigation.style.js +61 -59
  11. package/dist/cjs/components/boundary/errorBoundary.style.js +11 -9
  12. package/dist/cjs/components/breadcrumb/breadcrumb.style.js +8 -6
  13. package/dist/cjs/components/bubble/bubble.style.js +10 -8
  14. package/dist/cjs/components/bubbleConfirm/bubbleConfirm.style.js +37 -35
  15. package/dist/cjs/components/button/button.style.js +219 -197
  16. package/dist/cjs/components/calendar/calendar.style.js +93 -91
  17. package/dist/cjs/components/card/card.style.js +47 -44
  18. package/dist/cjs/components/cascade/cascade.style.js +58 -54
  19. package/dist/cjs/components/checkboxBase/checkboxBase.style.js +122 -120
  20. package/dist/cjs/components/colorPicker/colorPicker.style.js +68 -64
  21. package/dist/cjs/components/counter/counter.style.js +19 -17
  22. package/dist/cjs/components/curd/curd.style.js +70 -66
  23. package/dist/cjs/components/curd/curdColumnConfig.style.js +17 -15
  24. package/dist/cjs/components/dataGrid/dataGrid.style.js +113 -111
  25. package/dist/cjs/components/dateTimePicker/dateTimePicker.style.js +31 -27
  26. package/dist/cjs/components/dateTimePicker/timer.style.js +29 -27
  27. package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.style.js +7 -5
  28. package/dist/cjs/components/descriptions/descriptions.style.js +99 -95
  29. package/dist/cjs/components/dialog/dialog.style.js +98 -96
  30. package/dist/cjs/components/divider/divider.style.js +17 -15
  31. package/dist/cjs/components/drawer/drawer.style.js +78 -77
  32. package/dist/cjs/components/dropdown/dropdown.style.js +10 -8
  33. package/dist/cjs/components/flex/flex.js +10 -5
  34. package/dist/cjs/components/flex/flex.style.d.ts +1 -0
  35. package/dist/cjs/components/flex/flex.style.js +17 -1
  36. package/dist/cjs/components/form/form.style.js +27 -25
  37. package/dist/cjs/components/gallery/gallery.style.js +82 -80
  38. package/dist/cjs/components/image/image.style.js +35 -33
  39. package/dist/cjs/components/input/input.style.js +27 -26
  40. package/dist/cjs/components/inputBase/inputBase.style.js +164 -162
  41. package/dist/cjs/components/loading/loading.style.js +17 -15
  42. package/dist/cjs/components/loadingIndicator/loadingIndicator.style.js +10 -8
  43. package/dist/cjs/components/loadingMask/loadingMask.style.js +19 -17
  44. package/dist/cjs/components/menu/menu.style.js +3 -1
  45. package/dist/cjs/components/menuItem/menuItem.d.ts +1 -1
  46. package/dist/cjs/components/menuItem/menuItem.js +1 -1
  47. package/dist/cjs/components/menuItem/menuItem.style.js +94 -90
  48. package/dist/cjs/components/modal/modal.style.js +11 -9
  49. package/dist/cjs/components/optionsBase/optionsBase.js +1 -2
  50. package/dist/cjs/components/optionsBase/optionsBase.style.js +10 -8
  51. package/dist/cjs/components/overlayBase/overlayBase.style.js +15 -13
  52. package/dist/cjs/components/pagination/pagination.style.js +31 -29
  53. package/dist/cjs/components/palette/palette.style.d.ts +1 -1
  54. package/dist/cjs/components/palette/palette.style.js +115 -113
  55. package/dist/cjs/components/pickerDialog/pickerDialog.style.js +25 -23
  56. package/dist/cjs/components/pinchable/pinchable.style.js +10 -8
  57. package/dist/cjs/components/placeholder/placeholder.style.js +28 -26
  58. package/dist/cjs/components/popper/popper.js +26 -21
  59. package/dist/cjs/components/popper/popper.style.js +43 -39
  60. package/dist/cjs/components/progress/progress.style.js +111 -111
  61. package/dist/cjs/components/rating/rating.style.js +52 -50
  62. package/dist/cjs/components/resizable/resizable.style.js +229 -223
  63. package/dist/cjs/components/scrollbar/scrollbar.style.js +71 -69
  64. package/dist/cjs/components/segmented/segmented.style.js +79 -77
  65. package/dist/cjs/components/select/select.d.ts +1 -1
  66. package/dist/cjs/components/select/select.style.js +36 -34
  67. package/dist/cjs/components/selectedList/selectedList.style.js +9 -7
  68. package/dist/cjs/components/serialInput/serialInput.style.js +4 -2
  69. package/dist/cjs/components/skeleton/skeleton.style.js +53 -47
  70. package/dist/cjs/components/slidableActions/slidableActions.style.js +45 -43
  71. package/dist/cjs/components/slider/slider.style.js +129 -127
  72. package/dist/cjs/components/snackbarBase/snackbarBase.style.js +96 -94
  73. package/dist/cjs/components/status/status.style.js +13 -11
  74. package/dist/cjs/components/stepper/step.style.js +217 -216
  75. package/dist/cjs/components/stepper/stepper.style.js +5 -3
  76. package/dist/cjs/components/switch/switch.style.js +73 -71
  77. package/dist/cjs/components/table/table.style.js +83 -81
  78. package/dist/cjs/components/table/tableSticky.style.js +33 -31
  79. package/dist/cjs/components/tabs/tabs.style.js +161 -159
  80. package/dist/cjs/components/tabs/tabsEllipsis.style.js +5 -3
  81. package/dist/cjs/components/tag/tag.style.js +96 -94
  82. package/dist/cjs/components/textarea/textarea.style.js +27 -25
  83. package/dist/cjs/components/theme/themeVariables.d.ts +1 -0
  84. package/dist/cjs/components/theme/themeVariables.js +3 -1
  85. package/dist/cjs/components/timeline/timeline.style.js +112 -108
  86. package/dist/cjs/components/toggleButton/toggleButton.style.js +7 -5
  87. package/dist/cjs/components/tooltip/tooltip.style.js +13 -11
  88. package/dist/cjs/components/touchRipple/touchRipple.style.js +19 -17
  89. package/dist/cjs/components/transfer/transfer.style.js +42 -40
  90. package/dist/cjs/components/transitionBase/transitionBase.style.js +101 -94
  91. package/dist/cjs/components/transportStyle/transportStyle.d.ts +1 -0
  92. package/dist/cjs/components/transportStyle/transportStyle.js +33 -7
  93. package/dist/cjs/components/transportStyle/transportStyle.style.d.ts +1 -0
  94. package/dist/cjs/components/transportStyle/transportStyle.style.js +57 -0
  95. package/dist/cjs/components/tree/tree.style.js +83 -79
  96. package/dist/cjs/components/tree/treeDnd.style.js +131 -129
  97. package/dist/cjs/components/treeSelect/treeSelect.style.js +35 -33
  98. package/dist/cjs/components/typography/typography.style.js +98 -96
  99. package/dist/cjs/components/upload/dropArea.style.js +31 -29
  100. package/dist/cjs/components/upload/upload.style.js +106 -104
  101. package/dist/cjs/components/waterfall/waterfall.style.js +7 -5
  102. package/dist/cjs/extensions/documentViewer/documentViewer.style.js +43 -41
  103. package/dist/cjs/utils/utils.d.ts +1 -7
  104. package/dist/cjs/utils/utils.js +0 -14
  105. package/dist/esm/components/accordion/accordion.style.js +88 -86
  106. package/dist/esm/components/actionSheet/actionSheet.style.js +35 -33
  107. package/dist/esm/components/alert/alert.style.js +44 -42
  108. package/dist/esm/components/anchorList/anchorList.style.js +40 -38
  109. package/dist/esm/components/app/app.style.js +24 -17
  110. package/dist/esm/components/avatar/avatar.style.js +22 -20
  111. package/dist/esm/components/avatar/avatarGroup.style.js +24 -22
  112. package/dist/esm/components/backdrop/backdrop.style.js +11 -9
  113. package/dist/esm/components/badge/badge.style.js +42 -40
  114. package/dist/esm/components/bottomNavigation/bottomNavigation.style.js +61 -59
  115. package/dist/esm/components/boundary/errorBoundary.style.js +11 -9
  116. package/dist/esm/components/breadcrumb/breadcrumb.style.js +8 -6
  117. package/dist/esm/components/bubble/bubble.style.js +10 -8
  118. package/dist/esm/components/bubbleConfirm/bubbleConfirm.style.js +37 -35
  119. package/dist/esm/components/button/button.style.js +219 -197
  120. package/dist/esm/components/calendar/calendar.style.js +93 -91
  121. package/dist/esm/components/card/card.style.js +58 -55
  122. package/dist/esm/components/cascade/cascade.style.js +58 -54
  123. package/dist/esm/components/checkboxBase/checkboxBase.style.js +122 -120
  124. package/dist/esm/components/colorPicker/colorPicker.style.js +69 -65
  125. package/dist/esm/components/counter/counter.style.js +19 -17
  126. package/dist/esm/components/curd/curd.style.js +70 -66
  127. package/dist/esm/components/curd/curdColumnConfig.style.js +17 -15
  128. package/dist/esm/components/dataGrid/dataGrid.style.js +113 -111
  129. package/dist/esm/components/dateTimePicker/dateTimePicker.style.js +31 -27
  130. package/dist/esm/components/dateTimePicker/timer.style.js +29 -27
  131. package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.style.js +7 -5
  132. package/dist/esm/components/descriptions/descriptions.style.js +99 -95
  133. package/dist/esm/components/dialog/dialog.style.js +98 -96
  134. package/dist/esm/components/divider/divider.style.js +17 -15
  135. package/dist/esm/components/drawer/drawer.style.js +78 -77
  136. package/dist/esm/components/dropdown/dropdown.style.js +10 -8
  137. package/dist/esm/components/flex/flex.js +13 -8
  138. package/dist/esm/components/flex/flex.style.d.ts +1 -0
  139. package/dist/esm/components/flex/flex.style.js +16 -0
  140. package/dist/esm/components/form/form.style.js +27 -25
  141. package/dist/esm/components/gallery/gallery.style.js +82 -80
  142. package/dist/esm/components/image/image.style.js +35 -33
  143. package/dist/esm/components/input/input.style.js +27 -26
  144. package/dist/esm/components/inputBase/inputBase.style.js +164 -162
  145. package/dist/esm/components/loading/loading.style.js +17 -15
  146. package/dist/esm/components/loadingIndicator/loadingIndicator.style.js +10 -8
  147. package/dist/esm/components/loadingMask/loadingMask.style.js +19 -17
  148. package/dist/esm/components/menu/menu.style.js +3 -1
  149. package/dist/esm/components/menuItem/menuItem.d.ts +1 -1
  150. package/dist/esm/components/menuItem/menuItem.js +1 -1
  151. package/dist/esm/components/menuItem/menuItem.style.js +94 -90
  152. package/dist/esm/components/modal/modal.style.js +11 -9
  153. package/dist/esm/components/optionsBase/optionsBase.js +1 -2
  154. package/dist/esm/components/optionsBase/optionsBase.style.js +10 -8
  155. package/dist/esm/components/overlayBase/overlayBase.style.js +15 -13
  156. package/dist/esm/components/pagination/pagination.style.js +31 -29
  157. package/dist/esm/components/palette/palette.style.d.ts +1 -1
  158. package/dist/esm/components/palette/palette.style.js +113 -111
  159. package/dist/esm/components/pickerDialog/pickerDialog.style.js +25 -23
  160. package/dist/esm/components/pinchable/pinchable.style.js +10 -8
  161. package/dist/esm/components/placeholder/placeholder.style.js +28 -26
  162. package/dist/esm/components/popper/popper.js +26 -21
  163. package/dist/esm/components/popper/popper.style.js +43 -39
  164. package/dist/esm/components/progress/progress.style.js +111 -111
  165. package/dist/esm/components/rating/rating.style.js +52 -50
  166. package/dist/esm/components/resizable/resizable.style.js +229 -223
  167. package/dist/esm/components/scrollbar/scrollbar.style.js +71 -69
  168. package/dist/esm/components/segmented/segmented.style.js +79 -77
  169. package/dist/esm/components/select/select.d.ts +1 -1
  170. package/dist/esm/components/select/select.style.js +36 -34
  171. package/dist/esm/components/selectedList/selectedList.style.js +9 -7
  172. package/dist/esm/components/serialInput/serialInput.style.js +4 -2
  173. package/dist/esm/components/skeleton/skeleton.style.js +53 -47
  174. package/dist/esm/components/slidableActions/slidableActions.style.js +45 -43
  175. package/dist/esm/components/slider/slider.style.js +129 -127
  176. package/dist/esm/components/snackbarBase/snackbarBase.style.js +96 -94
  177. package/dist/esm/components/status/status.style.js +13 -11
  178. package/dist/esm/components/stepper/step.style.js +217 -216
  179. package/dist/esm/components/stepper/stepper.style.js +5 -3
  180. package/dist/esm/components/switch/switch.style.js +73 -71
  181. package/dist/esm/components/table/table.style.js +83 -81
  182. package/dist/esm/components/table/tableSticky.style.js +33 -31
  183. package/dist/esm/components/tabs/tabs.style.js +161 -159
  184. package/dist/esm/components/tabs/tabsEllipsis.style.js +5 -3
  185. package/dist/esm/components/tag/tag.style.js +96 -94
  186. package/dist/esm/components/textarea/textarea.style.js +27 -25
  187. package/dist/esm/components/theme/themeVariables.d.ts +1 -0
  188. package/dist/esm/components/theme/themeVariables.js +2 -0
  189. package/dist/esm/components/timeline/timeline.style.js +112 -108
  190. package/dist/esm/components/toggleButton/toggleButton.style.js +7 -5
  191. package/dist/esm/components/tooltip/tooltip.style.js +13 -11
  192. package/dist/esm/components/touchRipple/touchRipple.style.js +19 -17
  193. package/dist/esm/components/transfer/transfer.style.js +42 -40
  194. package/dist/esm/components/transitionBase/transitionBase.style.js +101 -94
  195. package/dist/esm/components/transportStyle/transportStyle.d.ts +1 -0
  196. package/dist/esm/components/transportStyle/transportStyle.js +33 -8
  197. package/dist/esm/components/transportStyle/transportStyle.style.d.ts +1 -0
  198. package/dist/esm/components/transportStyle/transportStyle.style.js +54 -0
  199. package/dist/esm/components/tree/tree.style.js +83 -79
  200. package/dist/esm/components/tree/treeDnd.style.js +131 -129
  201. package/dist/esm/components/treeSelect/treeSelect.style.js +35 -33
  202. package/dist/esm/components/typography/typography.style.js +98 -96
  203. package/dist/esm/components/upload/dropArea.style.js +31 -29
  204. package/dist/esm/components/upload/upload.style.js +106 -104
  205. package/dist/esm/components/waterfall/waterfall.style.js +7 -5
  206. package/dist/esm/extensions/documentViewer/documentViewer.style.js +43 -41
  207. package/dist/esm/utils/utils.d.ts +1 -7
  208. package/dist/esm/utils/utils.js +0 -13
  209. package/package.json +1 -1
package/dist/cjs/components/resizable/resizable.style.js CHANGED
@@ -26,64 +26,66 @@ function useStyle({ variant, handleSize, handleColor }) {
26
26
  return (0, utils_1.useCss)(({ divider, easing }) => {
27
27
  const ret = [
28
28
  (0, react_1.css) `
29
- position: relative;
30
-
31
- .${exports.classes.container} {
32
- width: 100%;
33
- height: 100%;
29
+ @layer reset {
34
30
  position: relative;
35
- z-index: 0;
36
- }
37
-
38
- .${exports.classes.edge}, .${exports.classes.corner} {
39
- touch-action: none;
40
- position: absolute;
41
- -webkit-tap-highlight-color: transparent;
42
- }
43
31
 
44
- .${exports.classes.edge} {
45
- z-index: 1;
46
-
47
- &[data-handle=t], &[data-handle=b] {
32
+ .${exports.classes.container} {
48
33
  width: 100%;
49
- height: ${handleSize}px;
50
- left: 0;
51
- cursor: ${exports.handleCursors.t};
52
- }
53
-
54
- &[data-handle=l], &[data-handle=r] {
55
- width: ${handleSize}px;
56
34
  height: 100%;
57
- top: 0;
58
- cursor: ${exports.handleCursors.l};
35
+ position: relative;
36
+ z-index: 0;
59
37
  }
60
- }
61
-
62
- .${exports.classes.corner} {
63
- width: ${handleSize}px;
64
- height: ${handleSize}px;
65
- z-index: 2;
66
38
 
67
- &[data-handle=tl] {
68
- cursor: ${exports.handleCursors.tl};
69
- }
70
-
71
- &[data-handle=tr] {
72
- cursor: ${exports.handleCursors.tr};
39
+ .${exports.classes.edge}, .${exports.classes.corner} {
40
+ touch-action: none;
41
+ position: absolute;
42
+ -webkit-tap-highlight-color: transparent;
73
43
  }
74
-
75
- &[data-handle=bl] {
76
- cursor: ${exports.handleCursors.bl};
44
+
45
+ .${exports.classes.edge} {
46
+ z-index: 1;
47
+
48
+ &[data-handle=t], &[data-handle=b] {
49
+ width: 100%;
50
+ height: ${handleSize}px;
51
+ left: 0;
52
+ cursor: ${exports.handleCursors.t};
53
+ }
54
+
55
+ &[data-handle=l], &[data-handle=r] {
56
+ width: ${handleSize}px;
57
+ height: 100%;
58
+ top: 0;
59
+ cursor: ${exports.handleCursors.l};
60
+ }
77
61
  }
78
-
79
- &[data-handle=br] {
80
- cursor: ${exports.handleCursors.br};
62
+
63
+ .${exports.classes.corner} {
64
+ width: ${handleSize}px;
65
+ height: ${handleSize}px;
66
+ z-index: 2;
67
+
68
+ &[data-handle=tl] {
69
+ cursor: ${exports.handleCursors.tl};
70
+ }
71
+
72
+ &[data-handle=tr] {
73
+ cursor: ${exports.handleCursors.tr};
74
+ }
75
+
76
+ &[data-handle=bl] {
77
+ cursor: ${exports.handleCursors.bl};
78
+ }
79
+
80
+ &[data-handle=br] {
81
+ cursor: ${exports.handleCursors.br};
82
+ }
81
83
  }
82
- }
83
84
 
84
- &:has([data-dragging=true]) {
85
- .${exports.classes.edge}, .${exports.classes.corner} {
86
- cursor: inherit;
85
+ &:has([data-dragging=true]) {
86
+ .${exports.classes.edge}, .${exports.classes.corner} {
87
+ cursor: inherit;
88
+ }
87
89
  }
88
90
  }
89
91
  `
@@ -110,80 +112,82 @@ function useStyle({ variant, handleSize, handleColor }) {
110
112
  };
111
113
  if (variant === 'mouse') {
112
114
  const hoverStyle = `
113
- &:before {
115
+ &::before {
114
116
  transition: background-color 1s ${easing.easeOut};
115
117
  background-color: ${color};
116
118
  }
117
119
  `;
118
120
  ret.push((0, react_1.css) `
119
- .${exports.classes.edge} {
120
- &:before {
121
- content: '';
122
- position: absolute;
123
- }
121
+ @layer reset {
122
+ .${exports.classes.edge} {
123
+ &::before {
124
+ content: '';
125
+ position: absolute;
126
+ }
124
127
 
125
- &:hover, &[data-dragging=true] {
126
- ${hoverStyle}
127
- }
128
+ &:hover, &[data-dragging=true] {
129
+ ${hoverStyle}
130
+ }
128
131
 
129
- &[data-handle=t], &[data-handle=b] {
130
- &:before {
131
- width: 100%;
132
- height: 1px;
133
- top: 50%;
134
- left: 0;
132
+ &[data-handle=t], &[data-handle=b] {
133
+ &::before {
134
+ width: 100%;
135
+ height: 1px;
136
+ top: 50%;
137
+ left: 0;
138
+ }
135
139
  }
136
- }
137
140
 
138
- &[data-handle=t] {
139
- top: ${-handleSize / 2}px;
140
- }
141
-
142
- &[data-handle=b] {
143
- bottom: ${-handleSize / 2}px;
144
- }
141
+ &[data-handle=t] {
142
+ top: ${-handleSize / 2}px;
143
+ }
145
144
 
146
- &[data-handle=l], &[data-handle=r] {
147
- &:before {
148
- width: 1px;
149
- height: 100%;
150
- top: 0;
151
- left: 50%;
145
+ &[data-handle=b] {
146
+ bottom: ${-handleSize / 2}px;
152
147
  }
153
- }
154
148
 
155
- &[data-handle=l] {
156
- left: ${-handleSize / 2}px;
157
- }
158
-
159
- &[data-handle=r] {
160
- right: ${-handleSize / 2}px;
161
- }
162
- }
149
+ &[data-handle=l], &[data-handle=r] {
150
+ &::before {
151
+ width: 1px;
152
+ height: 100%;
153
+ top: 0;
154
+ left: 50%;
155
+ }
156
+ }
163
157
 
164
- .${exports.classes.corner} {
165
- &[data-handle=tl] {
166
- top: ${-handleSize / 2}px;
167
- left: ${-handleSize / 2}px;
168
- }
158
+ &[data-handle=l] {
159
+ left: ${-handleSize / 2}px;
160
+ }
169
161
 
170
- &[data-handle=tr] {
171
- top: ${-handleSize / 2}px;
172
- right: ${-handleSize / 2}px;
162
+ &[data-handle=r] {
163
+ right: ${-handleSize / 2}px;
164
+ }
173
165
  }
174
166
 
175
- &[data-handle=bl] {
176
- bottom: ${-handleSize / 2}px;
177
- left: ${-handleSize / 2}px;
178
- }
167
+ .${exports.classes.corner} {
168
+ &[data-handle=tl] {
169
+ top: ${-handleSize / 2}px;
170
+ left: ${-handleSize / 2}px;
171
+ }
179
172
 
180
- &[data-handle=br] {
181
- bottom: ${-handleSize / 2}px;
182
- right: ${-handleSize / 2}px;
173
+ &[data-handle=tr] {
174
+ top: ${-handleSize / 2}px;
175
+ right: ${-handleSize / 2}px;
176
+ }
177
+
178
+ &[data-handle=bl] {
179
+ bottom: ${-handleSize / 2}px;
180
+ left: ${-handleSize / 2}px;
181
+ }
182
+
183
+ &[data-handle=br] {
184
+ bottom: ${-handleSize / 2}px;
185
+ right: ${-handleSize / 2}px;
186
+ }
183
187
  }
184
- }
185
188
 
186
- ${linkEdge(hoverStyle, 'hover')}
189
+ ${linkEdge(hoverStyle, 'hover')}
190
+ }
187
191
  `);
188
192
  }
189
193
  else {
@@ -192,153 +196,155 @@ function useStyle({ variant, handleSize, handleColor }) {
192
196
  const hoverStyle = `
193
197
  background-color: ${hoverColor};
194
198
 
195
- &:before {
199
+ &::before {
196
200
  background-color: #ffffff;
197
201
  }
198
202
  `;
199
203
  ret.push((0, react_1.css) `
200
- .${exports.classes.edge}, .${exports.classes.corner} {
201
- display: flex;
202
- align-items: center;
203
- justify-content: center;
204
- overflow: hidden;
205
-
206
- &:active, &[data-dragging=true] {
207
- ${hoverStyle}
208
- }
209
- }
204
+ @layer reset {
205
+ .${exports.classes.edge}, .${exports.classes.corner} {
206
+ display: flex;
207
+ align-items: center;
208
+ justify-content: center;
209
+ overflow: hidden;
210
210
 
211
- &[data-handle-position=outside] {
212
- .${exports.classes.edge} {
213
- &[data-handle=t] {
214
- top: ${-handleSize}px;
215
- }
216
-
217
- &[data-handle=b] {
218
- bottom: ${-handleSize}px;
219
- }
220
-
221
- &[data-handle=l] {
222
- left: ${-handleSize}px;
223
- }
224
-
225
- &[data-handle=r] {
226
- right: ${-handleSize}px;
211
+ &:active, &[data-dragging=true] {
212
+ ${hoverStyle}
227
213
  }
228
214
  }
229
215
 
230
- .${exports.classes.corner} {
231
- &[data-handle=tl] {
232
- top: ${-handleSize}px;
233
- left: ${-handleSize}px;
234
- }
235
-
236
- &[data-handle=tr] {
237
- top: ${-handleSize}px;
238
- right: ${-handleSize}px;
239
- }
240
-
241
- &[data-handle=bl] {
242
- bottom: ${-handleSize}px;
243
- left: ${-handleSize}px;
216
+ &[data-handle-position=outside] {
217
+ .${exports.classes.edge} {
218
+ &[data-handle=t] {
219
+ top: ${-handleSize}px;
220
+ }
221
+
222
+ &[data-handle=b] {
223
+ bottom: ${-handleSize}px;
224
+ }
225
+
226
+ &[data-handle=l] {
227
+ left: ${-handleSize}px;
228
+ }
229
+
230
+ &[data-handle=r] {
231
+ right: ${-handleSize}px;
232
+ }
244
233
  }
245
-
246
- &[data-handle=br] {
247
- bottom: ${-handleSize}px;
248
- right: ${-handleSize}px;
234
+
235
+ .${exports.classes.corner} {
236
+ &[data-handle=tl] {
237
+ top: ${-handleSize}px;
238
+ left: ${-handleSize}px;
239
+ }
240
+
241
+ &[data-handle=tr] {
242
+ top: ${-handleSize}px;
243
+ right: ${-handleSize}px;
244
+ }
245
+
246
+ &[data-handle=bl] {
247
+ bottom: ${-handleSize}px;
248
+ left: ${-handleSize}px;
249
+ }
250
+
251
+ &[data-handle=br] {
252
+ bottom: ${-handleSize}px;
253
+ right: ${-handleSize}px;
254
+ }
249
255
  }
250
256
  }
251
- }
252
257
 
253
- &[data-handle-position=inside] {
254
- .${exports.classes.edge} {
255
- &[data-handle=t] {
256
- top: 0;
257
- }
258
-
259
- &[data-handle=b] {
260
- bottom: 0;
261
- }
262
-
263
- &[data-handle=l] {
264
- left: 0;
258
+ &[data-handle-position=inside] {
259
+ .${exports.classes.edge} {
260
+ &[data-handle=t] {
261
+ top: 0;
262
+ }
263
+
264
+ &[data-handle=b] {
265
+ bottom: 0;
266
+ }
267
+
268
+ &[data-handle=l] {
269
+ left: 0;
270
+ }
271
+
272
+ &[data-handle=r] {
273
+ right: 0;
274
+ }
265
275
  }
266
-
267
- &[data-handle=r] {
268
- right: 0;
276
+
277
+ .${exports.classes.corner} {
278
+ &[data-handle=tl] {
279
+ top: 0;
280
+ left: 0;
281
+ }
282
+
283
+ &[data-handle=tr] {
284
+ top: 0;
285
+ right: 0;
286
+ }
287
+
288
+ &[data-handle=bl] {
289
+ bottom: 0;
290
+ left: 0;
291
+ }
292
+
293
+ &[data-handle=br] {
294
+ bottom: 0;
295
+ right: 0;
296
+ }
269
297
  }
270
298
  }
271
299
 
272
- .${exports.classes.corner} {
273
- &[data-handle=tl] {
274
- top: 0;
275
- left: 0;
276
- }
277
-
278
- &[data-handle=tr] {
279
- top: 0;
280
- right: 0;
300
+ .${exports.classes.edge} {
301
+ overflow: hidden;
302
+
303
+ &::before {
304
+ content: '';
305
+ background-color: ${divider};
306
+ border-radius: 2px;
281
307
  }
282
-
283
- &[data-handle=bl] {
284
- bottom: 0;
285
- left: 0;
308
+
309
+ &[data-handle=t], &[data-handle=b] {
310
+ &::before {
311
+ width: 40px;
312
+ height: 3px;
313
+ }
286
314
  }
287
-
288
- &[data-handle=br] {
289
- bottom: 0;
290
- right: 0;
315
+
316
+ &[data-handle=l], &[data-handle=r] {
317
+ &::before {
318
+ width: 3px;
319
+ height: 40px;
320
+ }
291
321
  }
292
322
  }
293
- }
294
323
 
295
- .${exports.classes.edge} {
296
- overflow: hidden;
297
-
298
- &:before {
299
- content: '';
300
- background-color: ${divider};
301
- border-radius: 2px;
302
- }
303
-
304
- &[data-handle=t], &[data-handle=b] {
305
- &:before {
306
- width: 40px;
324
+ .${exports.classes.corner} {
325
+ &::before {
326
+ content: '';
327
+ width: ${Math.sqrt(handleSize * handleSize)}px;
307
328
  height: 3px;
329
+ background-color: ${divider};
330
+ border-radius: 2px;
308
331
  }
309
- }
310
-
311
- &[data-handle=l], &[data-handle=r] {
312
- &:before {
313
- width: 3px;
314
- height: 40px;
315
- }
316
- }
317
- }
318
-
319
- .${exports.classes.corner} {
320
- &:before {
321
- content: '';
322
- width: ${Math.sqrt(handleSize * handleSize)}px;
323
- height: 3px;
324
- background-color: ${divider};
325
- border-radius: 2px;
326
- }
327
-
328
- &[data-handle=tl], &[data-handle=br] {
329
- &:before {
330
- transform: rotate(-45deg);
332
+
333
+ &[data-handle=tl], &[data-handle=br] {
334
+ &::before {
335
+ transform: rotate(-45deg);
336
+ }
331
337
  }
332
- }
333
-
334
- &[data-handle=tr], &[data-handle=bl] {
335
- &:before {
336
- transform: rotate(45deg)
338
+
339
+ &[data-handle=tr], &[data-handle=bl] {
340
+ &::before {
341
+ transform: rotate(45deg)
342
+ }
337
343
  }
338
344
  }
339
- }
340
345
 
341
- ${linkEdge(hoverStyle, 'active')}
346
+ ${linkEdge(hoverStyle, 'active')}
347
+ }
342
348
  `);
343
349
  }
344
350
  return ret;