@sheinx/shineout-style 3.2.0-beta.2 → 3.2.0-beta.4

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 (31) hide show
  1. package/cjs/alert/alert.d.ts.map +1 -1
  2. package/cjs/alert/alert.js +8 -1
  3. package/cjs/breadcrumb/breadcrumb.d.ts.map +1 -1
  4. package/cjs/breadcrumb/breadcrumb.js +8 -1
  5. package/cjs/button/button.js +31 -13
  6. package/cjs/date-picker/date-picker.d.ts.map +1 -1
  7. package/cjs/date-picker/date-picker.js +5 -1
  8. package/cjs/menu/menu.d.ts.map +1 -1
  9. package/cjs/menu/menu.js +42 -8
  10. package/cjs/tabs/tabs.d.ts.map +1 -1
  11. package/cjs/tabs/tabs.js +92 -45
  12. package/cjs/tag/tag.d.ts.map +1 -1
  13. package/cjs/tag/tag.js +0 -1
  14. package/cjs/version.d.ts +1 -1
  15. package/cjs/version.js +1 -1
  16. package/esm/alert/alert.d.ts.map +1 -1
  17. package/esm/alert/alert.js +8 -1
  18. package/esm/breadcrumb/breadcrumb.d.ts.map +1 -1
  19. package/esm/breadcrumb/breadcrumb.js +8 -1
  20. package/esm/button/button.js +31 -13
  21. package/esm/date-picker/date-picker.d.ts.map +1 -1
  22. package/esm/date-picker/date-picker.js +5 -1
  23. package/esm/menu/menu.d.ts.map +1 -1
  24. package/esm/menu/menu.js +42 -8
  25. package/esm/tabs/tabs.d.ts.map +1 -1
  26. package/esm/tabs/tabs.js +92 -45
  27. package/esm/tag/tag.d.ts.map +1 -1
  28. package/esm/tag/tag.js +0 -1
  29. package/esm/version.d.ts +1 -1
  30. package/esm/version.js +1 -1
  31. package/package.json +3 -3
package/cjs/alert/alert.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAgJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAuJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/cjs/alert/alert.js CHANGED
@@ -91,7 +91,7 @@ var alertStyle = {
91
91
  width: _theme.default.alertFontSize,
92
92
  color: _theme.default.alertCloseFontColor,
93
93
  fontSize: _theme.default.alertFontSize,
94
- height: _theme.default.lineHeightDynamic,
94
+ height: _theme.default.alertFontSize,
95
95
  flex: '0 0 auto',
96
96
  display: 'flex',
97
97
  alignItems: 'center',
@@ -101,8 +101,15 @@ var alertStyle = {
101
101
  color: _theme.default.alertCloseHoverColor
102
102
  }
103
103
  },
104
+ closeWrapper: {
105
+ width: _theme.default.alertFontSize,
106
+ height: _theme.default.lineHeightDynamic,
107
+ display: 'flex',
108
+ alignItems: 'center'
109
+ },
104
110
  content: {
105
111
  flex: '1 1 0',
112
+ minWidth: 0,
106
113
  wordBreak: 'break-all'
107
114
  },
108
115
  pending: {
package/cjs/breadcrumb/breadcrumb.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["breadcrumb.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA4FlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["breadcrumb.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAmGlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/cjs/breadcrumb/breadcrumb.js CHANGED
@@ -10,6 +10,7 @@ var breadcrumbStyle = {
10
10
  wrapper: {
11
11
  lineHeight: _theme.default.lineHeightDynamic,
12
12
  fontSize: _theme.default.breadcrumbFontSize,
13
+ fontWeight: _theme.default.breadcrumbFontWieght,
13
14
  display: 'flex',
14
15
  alignItems: 'center',
15
16
  color: _theme.default.breadcrumbFontColor,
@@ -38,7 +39,13 @@ var breadcrumbStyle = {
38
39
  },
39
40
  item: {
40
41
  display: 'flex',
41
- alignItems: 'center'
42
+ alignItems: 'center',
43
+ '& a:not(a[class])': {
44
+ color: _theme.default.breadcrumbDefaultLinkColor,
45
+ '&:hover': {
46
+ color: _theme.default.breadcrumbDefaultLinkHoverColor
47
+ }
48
+ }
42
49
  // '&:not(a) svg': {
43
50
  // color: token.breadcrumbIconBackgroundColor,
44
51
  // },
package/cjs/button/button.js CHANGED
@@ -177,12 +177,17 @@ var textBeforeLine = function textBeforeLine() {
177
177
  }
178
178
  };
179
179
  };
180
- var loading = function loading(type, styles) {
181
- var buttonStyle = button(type, styles);
182
- return {
183
- '&$loading': _objectSpread({}, buttonStyle['&$disabled'])
184
- };
185
- };
180
+
181
+ // const loading = (type: ButtonTypeWithoutLink, styles: ButtonStyleType) => {
182
+ // const buttonStyle = button(type, styles);
183
+
184
+ // return {
185
+ // '&$loading': {
186
+ // ...buttonStyle['&$disabled'],
187
+ // },
188
+ // };
189
+ // };
190
+
186
191
  var ButtonStyle = {
187
192
  button: {
188
193
  outline: 'none',
@@ -303,13 +308,26 @@ var ButtonStyle = {
303
308
  cursor: 'not-allowed'
304
309
  },
305
310
  loading: {
306
- cursor: 'not-allowed',
307
- '&$default': _objectSpread({}, loading('Secondary', '')),
308
- '&$primary': _objectSpread({}, loading('Primary', '')),
309
- '&$success': _objectSpread({}, loading('Success', '')),
310
- '&$danger': _objectSpread({}, loading('Danger', '')),
311
- '&$warning': _objectSpread({}, loading('Warning', '')),
312
- '&$secondary': _objectSpread({}, loading('Secondary', ''))
311
+ cursor: 'not-allowed'
312
+
313
+ // '&$default': {
314
+ // ...loading('Secondary', ''),
315
+ // },
316
+ // '&$primary': {
317
+ // ...loading('Primary', ''),
318
+ // },
319
+ // '&$success': {
320
+ // ...loading('Success', ''),
321
+ // },
322
+ // '&$danger': {
323
+ // ...loading('Danger', ''),
324
+ // },
325
+ // '&$warning': {
326
+ // ...loading('Warning', ''),
327
+ // },
328
+ // '&$secondary': {
329
+ // ...loading('Secondary', ''),
330
+ // },
313
331
  },
314
332
  groupItem: {},
315
333
  group: {
package/cjs/date-picker/date-picker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAwmBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA4mBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/cjs/date-picker/date-picker.js CHANGED
@@ -64,6 +64,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
64
64
  position: 'relative',
65
65
  // width: token.datePickerDateWidth,
66
66
  width: 240,
67
+ cursor: 'pointer',
67
68
  '&[data-soui-type="datetime"]': {
68
69
  // width: token.datePickerDatetimeWidth,
69
70
  width: 240
@@ -294,6 +295,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
294
295
  cursor: 'pointer',
295
296
  width: _theme.default.datePickerPanelHeaderIconHotWidth,
296
297
  height: _theme.default.datePickerPanelHeaderIconHotWidth,
298
+ color: _theme.default.datePickerPanelHeaderIconColor,
297
299
  borderRadius: '50%',
298
300
  '&[dir=rtl]': {
299
301
  transform: 'rotate(180deg)'
@@ -317,6 +319,8 @@ var datePickerStyle = _objectSpread(_objectSpread({
317
319
  pickerHeaderInfo: {
318
320
  cursor: 'pointer',
319
321
  borderRadius: '2px',
322
+ color: _theme.default.datePickerPanelHeaderFontColor,
323
+ fontWeight: _theme.default.datePickerPanelHeaderFontWeight,
320
324
  '&:hover': {
321
325
  backgroundColor: _theme.default.datePickerPanelHeaderIconHoverBackgroundColor
322
326
  }
@@ -334,7 +338,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
334
338
  '& th, & td': {
335
339
  boxSizing: 'border-box',
336
340
  padding: '0',
337
- fontWeight: 'normal'
341
+ fontWeight: _theme.default.datePickerPanelFontWeight
338
342
  },
339
343
  '& th': {
340
344
  color: _theme.default.datePickerCellHeaderColor,
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;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA8atC,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;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAgdtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/cjs/menu/menu.js CHANGED
@@ -15,7 +15,9 @@ var menuStyle = {
15
15
  width: '100%',
16
16
  backgroundColor: _theme.default.menuItemBackgroundColor,
17
17
  transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
18
- color: _theme.default.menuFontColor
18
+ color: _theme.default.menuFontColor,
19
+ display: 'flex',
20
+ flexDirection: 'column'
19
21
  },
20
22
  wrapperLight: {},
21
23
  wrapperDark: {
@@ -92,12 +94,46 @@ var menuStyle = {
92
94
  }
93
95
  },
94
96
  scrollbox: {
97
+ flex: 1,
98
+ minWidth: 0,
99
+ minHeight: 0,
100
+ overflow: 'auto',
101
+ // scrollbarWidth: 'thin',
102
+ // '$wrapperLight &': {
103
+ // scrollbarColor: 'rgba(0, 0, 0, 0.1) transparent',
104
+ // '&::-moz-scrollbar-thumb:hover': {
105
+ // backgroundColor: 'rgba(0, 0, 0, 0.2)',
106
+ // },
107
+ // },
108
+ // '$wrapperDark &': {
109
+ // scrollbarColor: 'rgba(255, 255, 255, 0.4) transparent',
110
+ // },
95
111
  '$wrapperVertical &': {
96
- overflow: 'hidden',
97
- height: '100%'
112
+ overflowX: 'hidden'
98
113
  },
99
114
  '$wrapperHorizontal &': {
100
- overflow: 'hidden'
115
+ overflowY: 'hidden'
116
+ },
117
+ '&::-webkit-scrollbar': {
118
+ width: '6px',
119
+ height: '6px'
120
+ },
121
+ '&::-webkit-scrollbar-thumb': {
122
+ border: '0px solid transparent',
123
+ backgroundClip: 'content-box',
124
+ borderRadius: '11px',
125
+ '$wrapperLight &': {
126
+ backgroundColor: 'rgba(0, 0, 0, 0.05)',
127
+ '&:hover': {
128
+ backgroundColor: 'rgba(0, 0, 0, 0.1)'
129
+ }
130
+ },
131
+ '$wrapperDark &': {
132
+ backgroundColor: 'rgba(255, 255, 255, 0.4)',
133
+ '&:hover': {
134
+ backgroundColor: 'rgba(255, 255, 255, 0.5)'
135
+ }
136
+ }
101
137
  }
102
138
  },
103
139
  root: {
@@ -112,11 +148,9 @@ var menuStyle = {
112
148
  }
113
149
  },
114
150
  wrapperInline: {},
115
- wrapperVertical: {
116
- position: 'relative'
117
- },
151
+ wrapperVertical: {},
118
152
  wrapperHorizontal: {
119
- position: 'relative'
153
+ flexDirection: 'row'
120
154
  },
121
155
  wrapperHasOpen: {},
122
156
  children: {
package/cjs/tabs/tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAsSxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CAmc1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA8RxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA0f1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/cjs/tabs/tabs.js CHANGED
@@ -183,12 +183,12 @@ var getLineStyle = function getLineStyle() {
183
183
  bottom: 0,
184
184
  left: 0,
185
185
  width: 2
186
- })),
187
- '& :not([data-soui-state="active"])$tab': {
188
- '&:after': {
189
- display: 'none'
190
- }
191
- }
186
+ }))
187
+ // '& :not([data-soui-state="active"])$tab': {
188
+ // '&:after': {
189
+ // display: 'none',
190
+ // },
191
+ // },
192
192
  },
193
193
  '&[data-soui-position^="right-"][data-soui-shape="line"]': {
194
194
  '&[dir=ltr]': _objectSpread({
@@ -214,12 +214,7 @@ var getLineStyle = function getLineStyle() {
214
214
  bottom: 0,
215
215
  right: 0,
216
216
  width: 2
217
- })),
218
- '& :not([data-soui-state="active"])$tab': {
219
- '&:after': {
220
- display: 'none'
221
- }
222
- }
217
+ }))
223
218
  },
224
219
  '&[data-soui-position^="top-"][data-soui-shape="line"]': _objectSpread({
225
220
  '& $hr': {
@@ -247,7 +242,13 @@ var getLineStyle = function getLineStyle() {
247
242
  })), {}, {
248
243
  '& :not([data-soui-state="active"])$tab': {
249
244
  '&:after': {
250
- display: 'none'
245
+ position: 'absolute',
246
+ content: '""',
247
+ top: 0,
248
+ left: 0,
249
+ width: '100%',
250
+ height: 1,
251
+ background: _theme.default.tabsBorderColor
251
252
  }
252
253
  }
253
254
  })
@@ -307,12 +308,6 @@ var getFillStyle = function getFillStyle() {
307
308
  color: _theme.default.tabsActiveFontColor
308
309
  }
309
310
  },
310
- '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
311
- background: _theme.default.tabsExtraFillHoverBackgroundColor
312
- },
313
- '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
314
- background: _theme.default.tabsClickBackgroundColor
315
- },
316
311
  '&:before': {
317
312
  content: '""',
318
313
  position: 'absolute',
@@ -455,7 +450,10 @@ var tabsStyle = {
455
450
  },
456
451
  hr: {
457
452
  position: 'absolute',
458
- background: _theme.default.tabsBorderColor
453
+ background: _theme.default.tabsBorderColor,
454
+ '$headerWrapper[data-soui-shape="line"] &': {
455
+ background: _theme.default.tabsLineHrBackgroundColor
456
+ }
459
457
  },
460
458
  cardHr: {
461
459
  // aflter
@@ -664,23 +662,27 @@ var tabsStyle = {
664
662
  '$headerWrapper[data-soui-shape="card"] &': {
665
663
  '& $tab': {
666
664
  position: 'relative',
667
- border: "1px solid ".concat(_theme.default.tabsBorderColor),
668
- padding: "".concat(_theme.default.tabsTabPaddingY, " ").concat(_theme.default.tabsTabPaddingX),
669
- background: _theme.default.tabsBackgroundColor,
665
+ border: "1px solid ".concat(_theme.default.tabsCardBorderColor),
666
+ padding: "".concat(_theme.default.tabsCardPaddingY, " ").concat(_theme.default.tabsCardPaddingX),
667
+ color: _theme.default.tabsCardFontColor,
668
+ fontSize: _theme.default.tabsCardFontSize,
669
+ fontWeight: _theme.default.tabsCardFontWeight,
670
+ background: _theme.default.tabsCardBackgroundColor,
670
671
  '&[data-soui-state="active"]': {
671
- color: _theme.default.tabsActiveFontColor,
672
- background: _theme.default.tabsActiveBackgroundColor,
673
- fontWeight: 'bold'
672
+ color: _theme.default.tabsCardCheckedFontColor,
673
+ fontSize: _theme.default.tabsCardCheckedFontSize,
674
+ fontWeight: _theme.default.tabsCardCheckedFontWeight,
675
+ background: _theme.default.tabsCardCheckedBackgroundColor
674
676
  },
675
677
  '&[data-soui-state="disabled"]': {
676
- color: _theme.default.tabsDisabledFontColor,
678
+ color: _theme.default.tabsCardDisabledFontColor,
677
679
  cursor: 'not-allowed'
678
680
  },
679
681
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover': {
680
- background: _theme.default.tabsHoverBackgroundColor
682
+ background: _theme.default.tabsCardHoverBackgroundColor
681
683
  },
682
684
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active': {
683
- background: _theme.default.tabsClickBackgroundColor
685
+ background: _theme.default.tabsCardActiveBackgroundColor
684
686
  }
685
687
  }
686
688
  },
@@ -688,17 +690,39 @@ var tabsStyle = {
688
690
  '& $tab': {
689
691
  position: 'relative',
690
692
  padding: "".concat(_theme.default.tabsLinePaddingY, " ").concat(_theme.default.tabsLinePaddingX),
691
- // background: '#FFF',
692
-
693
+ color: _theme.default.tabsLineFontColor,
694
+ fontSize: _theme.default.tabsLineFontSize,
695
+ fontWeight: _theme.default.tabsLineFontWeight,
696
+ background: _theme.default.tabsLineBackgroundColor,
693
697
  '&[data-soui-state="active"]': {
694
- color: _theme.default.tabsActiveFontColor,
695
- background: _theme.default.tabsActiveBackgroundColor,
696
- fontWeight: 'bold'
698
+ color: _theme.default.tabsLineCheckedFontColor,
699
+ fontSize: _theme.default.tabsLineCheckedFontSize,
700
+ background: _theme.default.tabsLineCheckedBackgroundColor,
701
+ fontWeight: _theme.default.tabsLineCheckedFontWeight,
702
+ '&:after': {
703
+ background: _theme.default.tabsLineAfterBackgroundColor
704
+ }
697
705
  },
698
706
  '&[data-soui-state="disabled"]': {
699
- color: _theme.default.tabsDisabledFontColor,
707
+ color: _theme.default.tabsLineDisabledFontColor,
700
708
  cursor: 'not-allowed'
701
709
  },
710
+ '[data-soui-position^="left-"] &': {
711
+ '&:after': {
712
+ width: 1,
713
+ right: 0,
714
+ left: 'auto',
715
+ height: '100%',
716
+ background: _theme.default.tabsBorderColor
717
+ }
718
+ },
719
+ '[data-soui-position^="right-"] &': {
720
+ '&:after': {
721
+ width: 1,
722
+ height: '100%',
723
+ background: _theme.default.tabsBorderColor
724
+ }
725
+ },
702
726
  '&:not([data-soui-state="active"])': {
703
727
  '&:after': {
704
728
  position: 'absolute',
@@ -711,41 +735,64 @@ var tabsStyle = {
711
735
  }
712
736
  },
713
737
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
714
- background: _theme.default.tabsHoverBackgroundColor
738
+ background: _theme.default.tabsLineHoverBackgroundColor
715
739
  },
716
740
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $lineInner': {
717
- background: _theme.default.tabsClickBackgroundColor
741
+ background: _theme.default.tabsLineActiveBackgroundColor
718
742
  }
719
743
  }
720
744
  },
721
745
  '$headerWrapper[data-soui-shape="dash"] &': {
722
746
  '& $tab': {
723
747
  padding: "".concat(_theme.default.tabsLinePaddingY, " ").concat(_theme.default.tabsLinePaddingX),
748
+ color: _theme.default.tabsLineFontColor,
749
+ fontSize: _theme.default.tabsLineFontSize,
750
+ fontWeight: _theme.default.tabsLineFontWeight,
751
+ background: _theme.default.tabsLineBackgroundColor,
724
752
  '&[data-soui-state="active"]': {
725
- color: _theme.default.tabsActiveFontColor,
726
- background: _theme.default.tabsActiveBackgroundColor,
727
- fontWeight: 'bold'
753
+ color: _theme.default.tabsLineCheckedFontColor,
754
+ fontSize: _theme.default.tabsLineCheckedFontSize,
755
+ background: _theme.default.tabsLineCheckedBackgroundColor,
756
+ fontWeight: _theme.default.tabsLineCheckedFontWeight,
757
+ '&:after': {
758
+ background: _theme.default.tabsLineAfterBackgroundColor
759
+ }
728
760
  },
729
761
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
730
- background: _theme.default.tabsHoverBackgroundColor
762
+ background: _theme.default.tabsLineHoverBackgroundColor
731
763
  },
732
764
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $lineInner': {
733
- background: _theme.default.tabsClickBackgroundColor
765
+ background: _theme.default.tabsLineActiveBackgroundColor
734
766
  },
735
767
  '&[data-soui-state="disabled"]': {
736
- color: _theme.default.tabsDisabledFontColor,
768
+ color: _theme.default.tabsLineDisabledFontColor,
737
769
  cursor: 'not-allowed'
738
770
  }
739
771
  }
740
772
  },
741
773
  '$headerWrapper[data-soui-shape="fill"] &': {
742
774
  '& $tab': {
775
+ color: _theme.default.tabsFillFontColor,
776
+ fontSize: _theme.default.tabsFillFontSize,
777
+ fontWeight: _theme.default.tabsFillFontWeight,
778
+ background: _theme.default.tabsFillBackgroundColor,
743
779
  '&[data-soui-state="active"]': {
744
- fontWeight: 'bold'
780
+ color: _theme.default.tabsFillCheckedFontColor,
781
+ // fontSize: Token.tabsFillCheckedFontSize,
782
+ fontWeight: _theme.default.tabsFillCheckedFontWeight,
783
+ '& $fillInner': {
784
+ background: _theme.default.tabsFillCheckedBackgroundColor
785
+ }
745
786
  },
746
787
  '&[data-soui-state="disabled"]': {
747
- color: _theme.default.tabsDisabledFontColor,
788
+ color: _theme.default.tabsFillDisabledFontColor,
748
789
  cursor: 'not-allowed'
790
+ },
791
+ '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
792
+ background: _theme.default.tabsFillHoverBackgroundColor
793
+ },
794
+ '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
795
+ background: _theme.default.tabsFillActiveBackgroundColor
749
796
  }
750
797
  }
751
798
  },
package/cjs/tag/tag.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CA+IxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CA8IxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/cjs/tag/tag.js CHANGED
@@ -145,7 +145,6 @@ var TagStyle = {
145
145
  wrapper: {
146
146
  lineHeight: _theme.default.lineHeightDynamic
147
147
  },
148
- container: {},
149
148
  inline: {
150
149
  display: 'inline-block',
151
150
  flex: 1,
package/cjs/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "3.2.0-beta.2";
1
+ declare const _default: "3.2.0-beta.4";
2
2
  export default _default;
3
3
  //# sourceMappingURL=version.d.ts.map
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.2.0-beta.2';
7
+ var _default = exports.default = '3.2.0-beta.4';
package/esm/alert/alert.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAgJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["alert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,YAAY,CAuJ5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/esm/alert/alert.js CHANGED
@@ -84,7 +84,7 @@ var alertStyle = {
84
84
  width: Token.alertFontSize,
85
85
  color: Token.alertCloseFontColor,
86
86
  fontSize: Token.alertFontSize,
87
- height: Token.lineHeightDynamic,
87
+ height: Token.alertFontSize,
88
88
  flex: '0 0 auto',
89
89
  display: 'flex',
90
90
  alignItems: 'center',
@@ -94,8 +94,15 @@ var alertStyle = {
94
94
  color: Token.alertCloseHoverColor
95
95
  }
96
96
  },
97
+ closeWrapper: {
98
+ width: Token.alertFontSize,
99
+ height: Token.lineHeightDynamic,
100
+ display: 'flex',
101
+ alignItems: 'center'
102
+ },
97
103
  content: {
98
104
  flex: '1 1 0',
105
+ minWidth: 0,
99
106
  wordBreak: 'break-all'
100
107
  },
101
108
  pending: {
package/esm/breadcrumb/breadcrumb.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["breadcrumb.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA4FlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["breadcrumb.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAmGlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/esm/breadcrumb/breadcrumb.js CHANGED
@@ -3,6 +3,7 @@ var breadcrumbStyle = {
3
3
  wrapper: {
4
4
  lineHeight: token.lineHeightDynamic,
5
5
  fontSize: token.breadcrumbFontSize,
6
+ fontWeight: token.breadcrumbFontWieght,
6
7
  display: 'flex',
7
8
  alignItems: 'center',
8
9
  color: token.breadcrumbFontColor,
@@ -31,7 +32,13 @@ var breadcrumbStyle = {
31
32
  },
32
33
  item: {
33
34
  display: 'flex',
34
- alignItems: 'center'
35
+ alignItems: 'center',
36
+ '& a:not(a[class])': {
37
+ color: token.breadcrumbDefaultLinkColor,
38
+ '&:hover': {
39
+ color: token.breadcrumbDefaultLinkHoverColor
40
+ }
41
+ }
35
42
  // '&:not(a) svg': {
36
43
  // color: token.breadcrumbIconBackgroundColor,
37
44
  // },
package/esm/button/button.js CHANGED
@@ -170,12 +170,17 @@ var textBeforeLine = function textBeforeLine() {
170
170
  }
171
171
  };
172
172
  };
173
- var loading = function loading(type, styles) {
174
- var buttonStyle = button(type, styles);
175
- return {
176
- '&$loading': _objectSpread({}, buttonStyle['&$disabled'])
177
- };
178
- };
173
+
174
+ // const loading = (type: ButtonTypeWithoutLink, styles: ButtonStyleType) => {
175
+ // const buttonStyle = button(type, styles);
176
+
177
+ // return {
178
+ // '&$loading': {
179
+ // ...buttonStyle['&$disabled'],
180
+ // },
181
+ // };
182
+ // };
183
+
179
184
  var ButtonStyle = {
180
185
  button: {
181
186
  outline: 'none',
@@ -296,13 +301,26 @@ var ButtonStyle = {
296
301
  cursor: 'not-allowed'
297
302
  },
298
303
  loading: {
299
- cursor: 'not-allowed',
300
- '&$default': _objectSpread({}, loading('Secondary', '')),
301
- '&$primary': _objectSpread({}, loading('Primary', '')),
302
- '&$success': _objectSpread({}, loading('Success', '')),
303
- '&$danger': _objectSpread({}, loading('Danger', '')),
304
- '&$warning': _objectSpread({}, loading('Warning', '')),
305
- '&$secondary': _objectSpread({}, loading('Secondary', ''))
304
+ cursor: 'not-allowed'
305
+
306
+ // '&$default': {
307
+ // ...loading('Secondary', ''),
308
+ // },
309
+ // '&$primary': {
310
+ // ...loading('Primary', ''),
311
+ // },
312
+ // '&$success': {
313
+ // ...loading('Success', ''),
314
+ // },
315
+ // '&$danger': {
316
+ // ...loading('Danger', ''),
317
+ // },
318
+ // '&$warning': {
319
+ // ...loading('Warning', ''),
320
+ // },
321
+ // '&$secondary': {
322
+ // ...loading('Secondary', ''),
323
+ // },
306
324
  },
307
325
  groupItem: {},
308
326
  group: {
package/esm/date-picker/date-picker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CAwmBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAuD1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA4mBlD,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/esm/date-picker/date-picker.js CHANGED
@@ -57,6 +57,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
57
57
  position: 'relative',
58
58
  // width: token.datePickerDateWidth,
59
59
  width: 240,
60
+ cursor: 'pointer',
60
61
  '&[data-soui-type="datetime"]': {
61
62
  // width: token.datePickerDatetimeWidth,
62
63
  width: 240
@@ -287,6 +288,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
287
288
  cursor: 'pointer',
288
289
  width: token.datePickerPanelHeaderIconHotWidth,
289
290
  height: token.datePickerPanelHeaderIconHotWidth,
291
+ color: token.datePickerPanelHeaderIconColor,
290
292
  borderRadius: '50%',
291
293
  '&[dir=rtl]': {
292
294
  transform: 'rotate(180deg)'
@@ -310,6 +312,8 @@ var datePickerStyle = _objectSpread(_objectSpread({
310
312
  pickerHeaderInfo: {
311
313
  cursor: 'pointer',
312
314
  borderRadius: '2px',
315
+ color: token.datePickerPanelHeaderFontColor,
316
+ fontWeight: token.datePickerPanelHeaderFontWeight,
313
317
  '&:hover': {
314
318
  backgroundColor: token.datePickerPanelHeaderIconHoverBackgroundColor
315
319
  }
@@ -327,7 +331,7 @@ var datePickerStyle = _objectSpread(_objectSpread({
327
331
  '& th, & td': {
328
332
  boxSizing: 'border-box',
329
333
  padding: '0',
330
- fontWeight: 'normal'
334
+ fontWeight: token.datePickerPanelFontWeight
331
335
  },
332
336
  '& th': {
333
337
  color: token.datePickerCellHeaderColor,
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;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CA8atC,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;AACxC,MAAM,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC;AAM9C,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,aAAa,CAgdtC,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/esm/menu/menu.js CHANGED
@@ -8,7 +8,9 @@ var menuStyle = {
8
8
  width: '100%',
9
9
  backgroundColor: token.menuItemBackgroundColor,
10
10
  transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
11
- color: token.menuFontColor
11
+ color: token.menuFontColor,
12
+ display: 'flex',
13
+ flexDirection: 'column'
12
14
  },
13
15
  wrapperLight: {},
14
16
  wrapperDark: {
@@ -85,12 +87,46 @@ var menuStyle = {
85
87
  }
86
88
  },
87
89
  scrollbox: {
90
+ flex: 1,
91
+ minWidth: 0,
92
+ minHeight: 0,
93
+ overflow: 'auto',
94
+ // scrollbarWidth: 'thin',
95
+ // '$wrapperLight &': {
96
+ // scrollbarColor: 'rgba(0, 0, 0, 0.1) transparent',
97
+ // '&::-moz-scrollbar-thumb:hover': {
98
+ // backgroundColor: 'rgba(0, 0, 0, 0.2)',
99
+ // },
100
+ // },
101
+ // '$wrapperDark &': {
102
+ // scrollbarColor: 'rgba(255, 255, 255, 0.4) transparent',
103
+ // },
88
104
  '$wrapperVertical &': {
89
- overflow: 'hidden',
90
- height: '100%'
105
+ overflowX: 'hidden'
91
106
  },
92
107
  '$wrapperHorizontal &': {
93
- overflow: 'hidden'
108
+ overflowY: 'hidden'
109
+ },
110
+ '&::-webkit-scrollbar': {
111
+ width: '6px',
112
+ height: '6px'
113
+ },
114
+ '&::-webkit-scrollbar-thumb': {
115
+ border: '0px solid transparent',
116
+ backgroundClip: 'content-box',
117
+ borderRadius: '11px',
118
+ '$wrapperLight &': {
119
+ backgroundColor: 'rgba(0, 0, 0, 0.05)',
120
+ '&:hover': {
121
+ backgroundColor: 'rgba(0, 0, 0, 0.1)'
122
+ }
123
+ },
124
+ '$wrapperDark &': {
125
+ backgroundColor: 'rgba(255, 255, 255, 0.4)',
126
+ '&:hover': {
127
+ backgroundColor: 'rgba(255, 255, 255, 0.5)'
128
+ }
129
+ }
94
130
  }
95
131
  },
96
132
  root: {
@@ -105,11 +141,9 @@ var menuStyle = {
105
141
  }
106
142
  },
107
143
  wrapperInline: {},
108
- wrapperVertical: {
109
- position: 'relative'
110
- },
144
+ wrapperVertical: {},
111
145
  wrapperHorizontal: {
112
- position: 'relative'
146
+ flexDirection: 'row'
113
147
  },
114
148
  wrapperHasOpen: {},
115
149
  children: {
package/esm/tabs/tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAsSxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CAmc1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA8RxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA0f1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/esm/tabs/tabs.js CHANGED
@@ -176,12 +176,12 @@ var getLineStyle = function getLineStyle() {
176
176
  bottom: 0,
177
177
  left: 0,
178
178
  width: 2
179
- })),
180
- '& :not([data-soui-state="active"])$tab': {
181
- '&:after': {
182
- display: 'none'
183
- }
184
- }
179
+ }))
180
+ // '& :not([data-soui-state="active"])$tab': {
181
+ // '&:after': {
182
+ // display: 'none',
183
+ // },
184
+ // },
185
185
  },
186
186
  '&[data-soui-position^="right-"][data-soui-shape="line"]': {
187
187
  '&[dir=ltr]': _objectSpread({
@@ -207,12 +207,7 @@ var getLineStyle = function getLineStyle() {
207
207
  bottom: 0,
208
208
  right: 0,
209
209
  width: 2
210
- })),
211
- '& :not([data-soui-state="active"])$tab': {
212
- '&:after': {
213
- display: 'none'
214
- }
215
- }
210
+ }))
216
211
  },
217
212
  '&[data-soui-position^="top-"][data-soui-shape="line"]': _objectSpread({
218
213
  '& $hr': {
@@ -240,7 +235,13 @@ var getLineStyle = function getLineStyle() {
240
235
  })), {}, {
241
236
  '& :not([data-soui-state="active"])$tab': {
242
237
  '&:after': {
243
- display: 'none'
238
+ position: 'absolute',
239
+ content: '""',
240
+ top: 0,
241
+ left: 0,
242
+ width: '100%',
243
+ height: 1,
244
+ background: Token.tabsBorderColor
244
245
  }
245
246
  }
246
247
  })
@@ -300,12 +301,6 @@ var getFillStyle = function getFillStyle() {
300
301
  color: Token.tabsActiveFontColor
301
302
  }
302
303
  },
303
- '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
304
- background: Token.tabsExtraFillHoverBackgroundColor
305
- },
306
- '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
307
- background: Token.tabsClickBackgroundColor
308
- },
309
304
  '&:before': {
310
305
  content: '""',
311
306
  position: 'absolute',
@@ -448,7 +443,10 @@ var tabsStyle = {
448
443
  },
449
444
  hr: {
450
445
  position: 'absolute',
451
- background: Token.tabsBorderColor
446
+ background: Token.tabsBorderColor,
447
+ '$headerWrapper[data-soui-shape="line"] &': {
448
+ background: Token.tabsLineHrBackgroundColor
449
+ }
452
450
  },
453
451
  cardHr: {
454
452
  // aflter
@@ -657,23 +655,27 @@ var tabsStyle = {
657
655
  '$headerWrapper[data-soui-shape="card"] &': {
658
656
  '& $tab': {
659
657
  position: 'relative',
660
- border: "1px solid ".concat(Token.tabsBorderColor),
661
- padding: "".concat(Token.tabsTabPaddingY, " ").concat(Token.tabsTabPaddingX),
662
- background: Token.tabsBackgroundColor,
658
+ border: "1px solid ".concat(Token.tabsCardBorderColor),
659
+ padding: "".concat(Token.tabsCardPaddingY, " ").concat(Token.tabsCardPaddingX),
660
+ color: Token.tabsCardFontColor,
661
+ fontSize: Token.tabsCardFontSize,
662
+ fontWeight: Token.tabsCardFontWeight,
663
+ background: Token.tabsCardBackgroundColor,
663
664
  '&[data-soui-state="active"]': {
664
- color: Token.tabsActiveFontColor,
665
- background: Token.tabsActiveBackgroundColor,
666
- fontWeight: 'bold'
665
+ color: Token.tabsCardCheckedFontColor,
666
+ fontSize: Token.tabsCardCheckedFontSize,
667
+ fontWeight: Token.tabsCardCheckedFontWeight,
668
+ background: Token.tabsCardCheckedBackgroundColor
667
669
  },
668
670
  '&[data-soui-state="disabled"]': {
669
- color: Token.tabsDisabledFontColor,
671
+ color: Token.tabsCardDisabledFontColor,
670
672
  cursor: 'not-allowed'
671
673
  },
672
674
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover': {
673
- background: Token.tabsHoverBackgroundColor
675
+ background: Token.tabsCardHoverBackgroundColor
674
676
  },
675
677
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active': {
676
- background: Token.tabsClickBackgroundColor
678
+ background: Token.tabsCardActiveBackgroundColor
677
679
  }
678
680
  }
679
681
  },
@@ -681,17 +683,39 @@ var tabsStyle = {
681
683
  '& $tab': {
682
684
  position: 'relative',
683
685
  padding: "".concat(Token.tabsLinePaddingY, " ").concat(Token.tabsLinePaddingX),
684
- // background: '#FFF',
685
-
686
+ color: Token.tabsLineFontColor,
687
+ fontSize: Token.tabsLineFontSize,
688
+ fontWeight: Token.tabsLineFontWeight,
689
+ background: Token.tabsLineBackgroundColor,
686
690
  '&[data-soui-state="active"]': {
687
- color: Token.tabsActiveFontColor,
688
- background: Token.tabsActiveBackgroundColor,
689
- fontWeight: 'bold'
691
+ color: Token.tabsLineCheckedFontColor,
692
+ fontSize: Token.tabsLineCheckedFontSize,
693
+ background: Token.tabsLineCheckedBackgroundColor,
694
+ fontWeight: Token.tabsLineCheckedFontWeight,
695
+ '&:after': {
696
+ background: Token.tabsLineAfterBackgroundColor
697
+ }
690
698
  },
691
699
  '&[data-soui-state="disabled"]': {
692
- color: Token.tabsDisabledFontColor,
700
+ color: Token.tabsLineDisabledFontColor,
693
701
  cursor: 'not-allowed'
694
702
  },
703
+ '[data-soui-position^="left-"] &': {
704
+ '&:after': {
705
+ width: 1,
706
+ right: 0,
707
+ left: 'auto',
708
+ height: '100%',
709
+ background: Token.tabsBorderColor
710
+ }
711
+ },
712
+ '[data-soui-position^="right-"] &': {
713
+ '&:after': {
714
+ width: 1,
715
+ height: '100%',
716
+ background: Token.tabsBorderColor
717
+ }
718
+ },
695
719
  '&:not([data-soui-state="active"])': {
696
720
  '&:after': {
697
721
  position: 'absolute',
@@ -704,41 +728,64 @@ var tabsStyle = {
704
728
  }
705
729
  },
706
730
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
707
- background: Token.tabsHoverBackgroundColor
731
+ background: Token.tabsLineHoverBackgroundColor
708
732
  },
709
733
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $lineInner': {
710
- background: Token.tabsClickBackgroundColor
734
+ background: Token.tabsLineActiveBackgroundColor
711
735
  }
712
736
  }
713
737
  },
714
738
  '$headerWrapper[data-soui-shape="dash"] &': {
715
739
  '& $tab': {
716
740
  padding: "".concat(Token.tabsLinePaddingY, " ").concat(Token.tabsLinePaddingX),
741
+ color: Token.tabsLineFontColor,
742
+ fontSize: Token.tabsLineFontSize,
743
+ fontWeight: Token.tabsLineFontWeight,
744
+ background: Token.tabsLineBackgroundColor,
717
745
  '&[data-soui-state="active"]': {
718
- color: Token.tabsActiveFontColor,
719
- background: Token.tabsActiveBackgroundColor,
720
- fontWeight: 'bold'
746
+ color: Token.tabsLineCheckedFontColor,
747
+ fontSize: Token.tabsLineCheckedFontSize,
748
+ background: Token.tabsLineCheckedBackgroundColor,
749
+ fontWeight: Token.tabsLineCheckedFontWeight,
750
+ '&:after': {
751
+ background: Token.tabsLineAfterBackgroundColor
752
+ }
721
753
  },
722
754
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
723
- background: Token.tabsHoverBackgroundColor
755
+ background: Token.tabsLineHoverBackgroundColor
724
756
  },
725
757
  '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $lineInner': {
726
- background: Token.tabsClickBackgroundColor
758
+ background: Token.tabsLineActiveBackgroundColor
727
759
  },
728
760
  '&[data-soui-state="disabled"]': {
729
- color: Token.tabsDisabledFontColor,
761
+ color: Token.tabsLineDisabledFontColor,
730
762
  cursor: 'not-allowed'
731
763
  }
732
764
  }
733
765
  },
734
766
  '$headerWrapper[data-soui-shape="fill"] &': {
735
767
  '& $tab': {
768
+ color: Token.tabsFillFontColor,
769
+ fontSize: Token.tabsFillFontSize,
770
+ fontWeight: Token.tabsFillFontWeight,
771
+ background: Token.tabsFillBackgroundColor,
736
772
  '&[data-soui-state="active"]': {
737
- fontWeight: 'bold'
773
+ color: Token.tabsFillCheckedFontColor,
774
+ // fontSize: Token.tabsFillCheckedFontSize,
775
+ fontWeight: Token.tabsFillCheckedFontWeight,
776
+ '& $fillInner': {
777
+ background: Token.tabsFillCheckedBackgroundColor
778
+ }
738
779
  },
739
780
  '&[data-soui-state="disabled"]': {
740
- color: Token.tabsDisabledFontColor,
781
+ color: Token.tabsFillDisabledFontColor,
741
782
  cursor: 'not-allowed'
783
+ },
784
+ '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
785
+ background: Token.tabsFillHoverBackgroundColor
786
+ },
787
+ '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
788
+ background: Token.tabsFillActiveBackgroundColor
742
789
  }
743
790
  }
744
791
  },
package/esm/tag/tag.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CA+IxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+I1C,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,UAAU,CA8IxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/esm/tag/tag.js CHANGED
@@ -138,7 +138,6 @@ var TagStyle = {
138
138
  wrapper: {
139
139
  lineHeight: Token.lineHeightDynamic
140
140
  },
141
- container: {},
142
141
  inline: {
143
142
  display: 'inline-block',
144
143
  flex: 1,
package/esm/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "3.2.0-beta.2";
1
+ declare const _default: "3.2.0-beta.4";
2
2
  export default _default;
3
3
  //# sourceMappingURL=version.d.ts.map
package/esm/version.js CHANGED
@@ -1 +1 @@
1
- export default '3.2.0-beta.2';
1
+ export default '3.2.0-beta.4';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/shineout-style",
3
- "version": "3.2.0-beta.2",
3
+ "version": "3.2.0-beta.4",
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.2.0-beta.2",
21
- "@sheinx/base": "3.2.0-beta.2"
20
+ "@sheinx/theme": "3.2.0-beta.4",
21
+ "@sheinx/base": "3.2.0-beta.4"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "core-js": ">=3"