@sheinx/shineout-style 3.1.4 → 3.2.0-rc.1

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 (15) hide show
  1. package/cjs/menu/menu.d.ts.map +1 -1
  2. package/cjs/menu/menu.js +105 -1
  3. package/cjs/table/table.d.ts.map +1 -1
  4. package/cjs/table/table.js +0 -1
  5. package/cjs/version.d.ts +1 -1
  6. package/cjs/version.d.ts.map +1 -1
  7. package/cjs/version.js +1 -1
  8. package/esm/menu/menu.d.ts.map +1 -1
  9. package/esm/menu/menu.js +105 -1
  10. package/esm/table/table.d.ts.map +1 -1
  11. package/esm/table/table.js +0 -1
  12. package/esm/version.d.ts +1 -1
  13. package/esm/version.d.ts.map +1 -1
  14. package/esm/version.js +1 -1
  15. package/package.json +3 -3
package/cjs/menu/menu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA6WtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAydtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/cjs/menu/menu.js CHANGED
@@ -25,12 +25,20 @@ var arrow = {
25
25
  var menuStyle = {
26
26
  wrapper: {
27
27
  height: '100%',
28
+ transition: 'width 0.3s',
28
29
  backgroundColor: _theme.default.menuItemBackgroundColor
29
30
  },
30
31
  wrapperLight: {},
31
32
  wrapperDark: {
32
33
  backgroundColor: _theme.default.menuDarkItemBackgroundColor
33
34
  },
35
+ collapse: {
36
+ width: _theme.default.menuCollapseWidth,
37
+ boxSizing: 'content-box',
38
+ '& $root': {
39
+ width: _theme.default.menuCollapseWidth
40
+ }
41
+ },
34
42
  scrollbox: {
35
43
  '$wrapperVertical &': {
36
44
  overflow: 'hidden',
@@ -139,10 +147,87 @@ var menuStyle = {
139
147
  item: {
140
148
  listStyle: 'none',
141
149
  flexShrink: 0,
150
+ position: 'relative',
142
151
  '$wrapperVertical &, $wrapperHorizontal &': {
143
152
  position: 'relative'
144
153
  }
145
154
  },
155
+ collapseItem: {
156
+ // width: 40,
157
+ cursor: 'pointer',
158
+ opacity: 1,
159
+ height: _theme.default.menuCollapseWidth,
160
+ transition: 'all ease .3s',
161
+ color: 'inherit',
162
+ position: 'relative',
163
+ '$wrapperLight &': {
164
+ background: _theme.default.menuItemBackgroundColor,
165
+ '&:hover': {
166
+ background: _theme.default.menuItemHoverBackgroundColor,
167
+ color: _theme.default.menuItemHoverFontColor
168
+ }
169
+ },
170
+ '$wrapperLight $itemDisabled > &&': {
171
+ cursor: 'not-allowed',
172
+ color: _theme.default.menuCollapseItemDisabledFontColor,
173
+ background: _theme.default.menuCollapseItemDisabledBackgroundColor
174
+ },
175
+ '$wrapperDark $itemDisabled > &&': {
176
+ cursor: 'not-allowed',
177
+ color: _theme.default.menuDarkCollapseItemDisabledFontColor,
178
+ background: _theme.default.menuDarkCollapseItemDisabledBackgroundColor
179
+ },
180
+ '$wrapperDark &': {
181
+ color: _theme.default.menuDarkCollapseItemFontColor,
182
+ background: _theme.default.menuDarkCollapseItemBackgroundColor,
183
+ '&:hover': {
184
+ background: _theme.default.menuDarkCollapseItemHoverBackgroundColor,
185
+ color: _theme.default.menuDarkCollapseItemHoverFontColor
186
+ }
187
+ },
188
+ '$itemActive > &&': {
189
+ '$wrapperLight &': {
190
+ color: _theme.default.menuCollapseItemActiveFontColor,
191
+ background: _theme.default.menuCollapseItemActiveBackgroundColor
192
+ },
193
+ '$wrapperDark &': {
194
+ color: _theme.default.menuDarkCollapseItemActiveFontColor,
195
+ background: _theme.default.menuDarkCollapseItemActiveBackgroundColor
196
+ }
197
+ },
198
+ '&$collapseItemInPath': {
199
+ // background: token.menuItemBackgroundColor,
200
+ '&::after': {
201
+ content: '""',
202
+ position: 'absolute',
203
+ left: 0,
204
+ top: 0,
205
+ bottom: 0,
206
+ width: 3,
207
+ transition: 'all ease 0.3s',
208
+ backgroundColor: _theme.default.menuCollapseItemActiveFontColor
209
+ }
210
+ }
211
+ },
212
+ collapseItemInPath: {},
213
+ collapseItemHide: {
214
+ opacity: 0,
215
+ width: 0,
216
+ // height: 0,
217
+ // zIndex: -1,
218
+ position: 'absolute',
219
+ top: 0,
220
+ color: 'transparent',
221
+ background: 'transparent',
222
+ '&$collapseItemInPath': {
223
+ // background: token.menuItemBackgroundColor,
224
+ '&::after': {
225
+ top: 20,
226
+ bottom: 20,
227
+ backgroundColor: 'transparent'
228
+ }
229
+ }
230
+ },
146
231
  itemActive: {},
147
232
  itemDisabled: {},
148
233
  itemOpen: {},
@@ -155,6 +240,8 @@ var menuStyle = {
155
240
  alignItems: 'center',
156
241
  cursor: 'pointer',
157
242
  position: 'relative',
243
+ // opacity: 1,
244
+ transition: 'all ease 0.3s',
158
245
  '$wrapperLight &': {
159
246
  color: _theme.default.menuItemFontColor,
160
247
  backgroundColor: _theme.default.menuItemBackgroundColor,
@@ -262,6 +349,20 @@ var menuStyle = {
262
349
  }
263
350
  }
264
351
  },
352
+ itemContentHide: {
353
+ position: 'absolute',
354
+ overflow: 'hidden',
355
+ pointerEvents: 'none',
356
+ // opacity: 0,
357
+ visibility: 'hidden',
358
+ '& $title': {
359
+ pointerEvents: 'none',
360
+ whiteSpace: 'nowrap'
361
+ },
362
+ '& $menuIcon': {
363
+ opacity: 0
364
+ }
365
+ },
265
366
  itemContentFront: {},
266
367
  itemContentBack: {},
267
368
  title: {
@@ -301,6 +402,7 @@ var menuStyle = {
301
402
  },
302
403
  '& > $icon': {
303
404
  lineHeight: 1,
405
+ opacity: 1,
304
406
  width: _theme.default.menuExpandSize,
305
407
  height: _theme.default.menuExpandSize,
306
408
  '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
@@ -316,7 +418,9 @@ var menuStyle = {
316
418
  }
317
419
  }
318
420
  },
319
- icon: {},
421
+ icon: {
422
+ transition: 'all ease 0.3s'
423
+ },
320
424
  expandHover: {
321
425
  '&:hover': {
322
426
  backgroundColor: _theme.default.menuExpandHoverBackgroundColor
package/cjs/table/table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAiaxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAgaxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/cjs/table/table.js CHANGED
@@ -34,7 +34,6 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
34
34
  position: 'relative',
35
35
  zIndex: 0,
36
36
  minHeight: 0,
37
- minWidth: 0,
38
37
  fontSize: _theme.default.tableFontSize,
39
38
  '& table': {
40
39
  minWidth: '100%',
package/cjs/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "3.1.4";
1
+ declare const _default: "3.2.0-rc.1";
2
2
  export default _default;
3
3
  //# sourceMappingURL=version.d.ts.map
package/cjs/version.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAuB"}
1
+ {"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAA4B"}
package/cjs/version.js CHANGED
@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _default = exports.default = '3.1.4';
7
+ var _default = exports.default = '3.2.0-rc.1';
package/esm/menu/menu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA6WtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAY9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAydtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/esm/menu/menu.js CHANGED
@@ -18,12 +18,20 @@ var arrow = {
18
18
  var menuStyle = {
19
19
  wrapper: {
20
20
  height: '100%',
21
+ transition: 'width 0.3s',
21
22
  backgroundColor: token.menuItemBackgroundColor
22
23
  },
23
24
  wrapperLight: {},
24
25
  wrapperDark: {
25
26
  backgroundColor: token.menuDarkItemBackgroundColor
26
27
  },
28
+ collapse: {
29
+ width: token.menuCollapseWidth,
30
+ boxSizing: 'content-box',
31
+ '& $root': {
32
+ width: token.menuCollapseWidth
33
+ }
34
+ },
27
35
  scrollbox: {
28
36
  '$wrapperVertical &': {
29
37
  overflow: 'hidden',
@@ -132,10 +140,87 @@ var menuStyle = {
132
140
  item: {
133
141
  listStyle: 'none',
134
142
  flexShrink: 0,
143
+ position: 'relative',
135
144
  '$wrapperVertical &, $wrapperHorizontal &': {
136
145
  position: 'relative'
137
146
  }
138
147
  },
148
+ collapseItem: {
149
+ // width: 40,
150
+ cursor: 'pointer',
151
+ opacity: 1,
152
+ height: token.menuCollapseWidth,
153
+ transition: 'all ease .3s',
154
+ color: 'inherit',
155
+ position: 'relative',
156
+ '$wrapperLight &': {
157
+ background: token.menuItemBackgroundColor,
158
+ '&:hover': {
159
+ background: token.menuItemHoverBackgroundColor,
160
+ color: token.menuItemHoverFontColor
161
+ }
162
+ },
163
+ '$wrapperLight $itemDisabled > &&': {
164
+ cursor: 'not-allowed',
165
+ color: token.menuCollapseItemDisabledFontColor,
166
+ background: token.menuCollapseItemDisabledBackgroundColor
167
+ },
168
+ '$wrapperDark $itemDisabled > &&': {
169
+ cursor: 'not-allowed',
170
+ color: token.menuDarkCollapseItemDisabledFontColor,
171
+ background: token.menuDarkCollapseItemDisabledBackgroundColor
172
+ },
173
+ '$wrapperDark &': {
174
+ color: token.menuDarkCollapseItemFontColor,
175
+ background: token.menuDarkCollapseItemBackgroundColor,
176
+ '&:hover': {
177
+ background: token.menuDarkCollapseItemHoverBackgroundColor,
178
+ color: token.menuDarkCollapseItemHoverFontColor
179
+ }
180
+ },
181
+ '$itemActive > &&': {
182
+ '$wrapperLight &': {
183
+ color: token.menuCollapseItemActiveFontColor,
184
+ background: token.menuCollapseItemActiveBackgroundColor
185
+ },
186
+ '$wrapperDark &': {
187
+ color: token.menuDarkCollapseItemActiveFontColor,
188
+ background: token.menuDarkCollapseItemActiveBackgroundColor
189
+ }
190
+ },
191
+ '&$collapseItemInPath': {
192
+ // background: token.menuItemBackgroundColor,
193
+ '&::after': {
194
+ content: '""',
195
+ position: 'absolute',
196
+ left: 0,
197
+ top: 0,
198
+ bottom: 0,
199
+ width: 3,
200
+ transition: 'all ease 0.3s',
201
+ backgroundColor: token.menuCollapseItemActiveFontColor
202
+ }
203
+ }
204
+ },
205
+ collapseItemInPath: {},
206
+ collapseItemHide: {
207
+ opacity: 0,
208
+ width: 0,
209
+ // height: 0,
210
+ // zIndex: -1,
211
+ position: 'absolute',
212
+ top: 0,
213
+ color: 'transparent',
214
+ background: 'transparent',
215
+ '&$collapseItemInPath': {
216
+ // background: token.menuItemBackgroundColor,
217
+ '&::after': {
218
+ top: 20,
219
+ bottom: 20,
220
+ backgroundColor: 'transparent'
221
+ }
222
+ }
223
+ },
139
224
  itemActive: {},
140
225
  itemDisabled: {},
141
226
  itemOpen: {},
@@ -148,6 +233,8 @@ var menuStyle = {
148
233
  alignItems: 'center',
149
234
  cursor: 'pointer',
150
235
  position: 'relative',
236
+ // opacity: 1,
237
+ transition: 'all ease 0.3s',
151
238
  '$wrapperLight &': {
152
239
  color: token.menuItemFontColor,
153
240
  backgroundColor: token.menuItemBackgroundColor,
@@ -255,6 +342,20 @@ var menuStyle = {
255
342
  }
256
343
  }
257
344
  },
345
+ itemContentHide: {
346
+ position: 'absolute',
347
+ overflow: 'hidden',
348
+ pointerEvents: 'none',
349
+ // opacity: 0,
350
+ visibility: 'hidden',
351
+ '& $title': {
352
+ pointerEvents: 'none',
353
+ whiteSpace: 'nowrap'
354
+ },
355
+ '& $menuIcon': {
356
+ opacity: 0
357
+ }
358
+ },
258
359
  itemContentFront: {},
259
360
  itemContentBack: {},
260
361
  title: {
@@ -294,6 +395,7 @@ var menuStyle = {
294
395
  },
295
396
  '& > $icon': {
296
397
  lineHeight: 1,
398
+ opacity: 1,
297
399
  width: token.menuExpandSize,
298
400
  height: token.menuExpandSize,
299
401
  '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
@@ -309,7 +411,9 @@ var menuStyle = {
309
411
  }
310
412
  }
311
413
  },
312
- icon: {},
414
+ icon: {
415
+ transition: 'all ease 0.3s'
416
+ },
313
417
  expandHover: {
314
418
  '&:hover': {
315
419
  backgroundColor: token.menuExpandHoverBackgroundColor
package/esm/table/table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAiaxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAgaxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/esm/table/table.js CHANGED
@@ -27,7 +27,6 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
27
27
  position: 'relative',
28
28
  zIndex: 0,
29
29
  minHeight: 0,
30
- minWidth: 0,
31
30
  fontSize: token.tableFontSize,
32
31
  '& table': {
33
32
  minWidth: '100%',
package/esm/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "3.1.4";
1
+ declare const _default: "3.2.0-rc.1";
2
2
  export default _default;
3
3
  //# sourceMappingURL=version.d.ts.map
package/esm/version.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAAuB"}
1
+ {"version":3,"file":"version.d.ts","sourceRoot":"","sources":["version.ts"],"names":[],"mappings":";AAAA,wBAA4B"}
package/esm/version.js CHANGED
@@ -1 +1 @@
1
- export default '3.1.4';
1
+ export default '3.2.0-rc.1';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/shineout-style",
3
- "version": "3.1.4",
3
+ "version": "3.2.0-rc.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -17,8 +17,8 @@
17
17
  "dependencies": {
18
18
  "jss": "10.9.2",
19
19
  "react-jss": "10.9.2",
20
- "@sheinx/theme": "3.1.4",
21
- "@sheinx/base": "3.1.4"
20
+ "@sheinx/theme": "3.2.0-rc.1",
21
+ "@sheinx/base": "3.2.0-rc.1"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "core-js": ">=3"