@sheinx/shineout-style 3.10.0-beta.4 → 3.10.0-beta.6

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 (9) hide show
  1. package/cjs/steps/steps.d.ts.map +1 -1
  2. package/cjs/steps/steps.js +60 -128
  3. package/cjs/version.d.ts +1 -1
  4. package/cjs/version.js +1 -1
  5. package/esm/steps/steps.d.ts.map +1 -1
  6. package/esm/steps/steps.js +60 -128
  7. package/esm/version.d.ts +1 -1
  8. package/esm/version.js +1 -1
  9. package/package.json +3 -3
package/cjs/steps/steps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAq0BxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAwwBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/cjs/steps/steps.js CHANGED
@@ -51,7 +51,7 @@ var stepsStyle = {
51
51
  left: -12
52
52
  },
53
53
  '& $step:not(:last-child)': {
54
- '&$widthDescription': {
54
+ '&$withDescription': {
55
55
  '&:after': {
56
56
  borderLeftWidth: 22,
57
57
  borderTopWidth: 28,
@@ -96,7 +96,7 @@ var stepsStyle = {
96
96
  }
97
97
  },
98
98
  '& $step:last-child': {
99
- '&$widthDescription': {
99
+ '&$withDescription': {
100
100
  '&:before': {
101
101
  borderLeftWidth: 22,
102
102
  borderTopWidth: 28,
@@ -199,7 +199,7 @@ var stepsStyle = {
199
199
  large: {
200
200
  '&$arrow': {
201
201
  '& $step:not(:last-child)': {
202
- '&$widthDescription': {
202
+ '&$withDescription': {
203
203
  '&:after': {
204
204
  top: 0,
205
205
  width: 30,
@@ -247,7 +247,7 @@ var stepsStyle = {
247
247
  }
248
248
  },
249
249
  '& $step:last-child': {
250
- '&$widthDescription': {
250
+ '&$withDescription': {
251
251
  '&:before': {
252
252
  borderLeftWidth: 30,
253
253
  borderTopWidth: 36,
@@ -625,88 +625,74 @@ var stepsStyle = {
625
625
  '& $title': {}
626
626
  }
627
627
  },
628
- arrow: {
629
- position: 'relative',
630
- zIndex: 0,
631
- '&$steps': {
632
- overflow: 'hidden'
628
+ arrowIcon: {
629
+ position: 'absolute',
630
+ top: 0,
631
+ right: 0.25,
632
+ bottom: 0,
633
+ transform: 'translateX(100%)',
634
+ zIndex: 1,
635
+ '@media (min-resolution: 2dppx)': {
636
+ right: 0
637
+ },
638
+ '$withDescription &': {
639
+ transform: 'translateX(calc(100% - 0.5px))',
640
+ '@media (min-resolution: 2dppx)': {
641
+ transform: 'translateX(100%)'
642
+ }
633
643
  },
634
- '& $step': {
635
- marginRight: 4,
636
- paddingLeft: _theme.default.stepsArrowPaddingX,
637
- // before
638
- '&:before': {
639
- content: '""',
640
- position: 'absolute',
641
- width: 0,
642
- height: 0,
643
- top: 0,
644
- borderLeftWidth: 16,
645
- borderTopWidth: 20,
646
- borderBottomWidth: 20,
647
- borderLeftColor: '#ffffff'
644
+ '& > svg': {
645
+ display: 'block',
646
+ height: '100%',
647
+ color: _theme.default.stepsFinishBackgroundColor,
648
+ '$process &': {
649
+ color: _theme.default.stepsProcessBackgroundColor
648
650
  },
649
- '&[dir=ltr]:before': {
650
- left: 0
651
+ '$wait &': {
652
+ color: _theme.default.stepsWaitBackgroundColor
651
653
  },
652
- '&[dir=rtl]:before': {
653
- right: 0
654
+ '&:last-child': {
655
+ position: 'relative'
654
656
  },
655
- // after
656
- '&:after': {
657
- content: '""',
657
+ '&:first-child': {
658
658
  position: 'absolute',
659
- width: 0,
660
- height: 0,
661
659
  top: 0,
662
- zIndex: 1,
663
- borderLeftWidth: 16,
664
- borderTopWidth: 20,
665
- borderBottomWidth: 20
666
- },
667
- '&[dir=ltr]:after': {
668
- right: -16
669
- },
670
- '&[dir=rtl]:after': {
671
- left: -16
660
+ left: 4,
661
+ color: 'white',
662
+ '$arrow[dir=rtl] &': {
663
+ right: 4,
664
+ left: 'auto'
665
+ }
672
666
  }
673
667
  },
668
+ '$step:last-child &': {
669
+ display: 'none'
670
+ },
671
+ '$arrow[dir=rtl] &': {
672
+ left: '0.25px',
673
+ right: 'auto',
674
+ transform: 'translateX(-100%)',
675
+ '& > svg': {
676
+ transform: "rotate(180deg)"
677
+ }
678
+ }
679
+ },
680
+ arrow: {
681
+ position: 'relative',
682
+ '& $step': {
683
+ marginRight: 4,
684
+ paddingLeft: _theme.default.stepsArrowPaddingX
685
+ },
674
686
  '&$horizontal': {
675
687
  '& $horizontalLabel $title:after': {
676
688
  display: 'none'
677
689
  }
678
690
  },
679
691
  '& $step:first-child': {
680
- padding: 0,
681
- '&:before': {
682
- display: 'none'
683
- },
684
- '&$widthDescription': {
685
- '&:after': {
686
- borderLeftWidth: 26,
687
- borderTopWidth: 32,
688
- borderBottomWidth: 32
689
- },
690
- '&[dir=ltr]:after': {
691
- right: -26
692
- },
693
- '&[dir=rtl]:after': {
694
- left: -26
695
- }
696
- }
692
+ padding: 0
697
693
  },
698
694
  '& $step:last-child': {
699
- paddingRight: 0,
700
- '&:after': {
701
- display: 'none'
702
- },
703
- '&$widthDescription': {
704
- '&:before': {
705
- borderLeftWidth: 26,
706
- borderTopWidth: 32,
707
- borderBottomWidth: 32
708
- }
709
- }
695
+ paddingRight: 0
710
696
  },
711
697
  '& $description': {
712
698
  paddingRight: 0,
@@ -721,84 +707,30 @@ var stepsStyle = {
721
707
  width: '100%'
722
708
  },
723
709
  '& $finish': {
724
- backgroundColor: _theme.default.stepsFinishBackgroundColor,
725
- '&:after': {
726
- borderLeft: "16px solid ".concat(_theme.default.stepsFinishBackgroundColor),
727
- borderTop: "20px solid transparent",
728
- borderBottom: "20px solid transparent"
729
- },
730
- '&:before': {
731
- // borderLeft: `16px solid #ffffff`,
732
- // borderTop: `20px solid transparent`,
733
- // borderBottom: `20px solid transparent`,
734
- }
710
+ backgroundColor: _theme.default.stepsFinishBackgroundColor
735
711
  },
736
712
  '& $process': {
737
713
  color: _theme.default.stepsProcessFontColor,
738
714
  backgroundColor: _theme.default.stepsProcessBackgroundColor,
739
715
  '& $description': {
740
716
  color: _theme.default.stepsProcessFontColor
741
- },
742
- '&:after': {
743
- borderLeft: "16px solid ".concat(_theme.default.stepsProcessBackgroundColor),
744
- borderTop: "20px solid transparent",
745
- borderBottom: "20px solid transparent"
746
- },
747
- '&[dir=ltr]:after': {
748
- right: -16
749
- },
750
- '&[dir=rtl]:after': {
751
- left: -16
752
- },
753
- '&:before': {
754
- borderLeft: "16px solid #ffffff",
755
- borderTop: "20px solid transparent",
756
- borderBottom: "20px solid transparent"
757
717
  }
758
718
  },
759
719
  '& $wait': {
760
720
  color: _theme.default.stepsWaitFontColor,
761
721
  // backgroundColor: Token.stepsWaitBackgroundColor,
762
- backgroundColor: _theme.default.stepsWaitBackgroundColor,
763
- '&:after': {
764
- borderLeft: "16px solid ".concat(_theme.default.stepsWaitBackgroundColor),
765
- borderTop: "20px solid transparent",
766
- borderBottom: "20px solid transparent"
767
- },
768
- '&:before': {
769
- borderLeft: "16px solid #ffffff",
770
- borderTop: "20px solid transparent",
771
- borderBottom: "20px solid transparent"
772
- }
722
+ backgroundColor: _theme.default.stepsWaitBackgroundColor
773
723
  },
774
- '& $widthDescription': {
724
+ '& $withDescription': {
775
725
  '& $content,$description': {
776
726
  textAlign: 'left'
777
727
  },
778
728
  '& $title': {
779
729
  marginBottom: _theme.default.stepsDescriptionTitleMarginX
780
- },
781
- '&$process,$finish,$wait': {
782
- '&:after': {
783
- borderLeftWidth: 26,
784
- borderTopWidth: 32,
785
- borderBottomWidth: 32
786
- },
787
- '&[dir=ltr]:after': {
788
- right: -26
789
- },
790
- '&[dir=rtl]:after': {
791
- left: -26
792
- },
793
- '&:before': {
794
- borderLeftWidth: 26,
795
- borderTopWidth: 32,
796
- borderBottomWidth: 32
797
- }
798
730
  }
799
731
  }
800
732
  },
801
- widthDescription: {},
733
+ withDescription: {},
802
734
  default: {
803
735
  lineHeight: 0,
804
736
  '&$vertical': {
package/cjs/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "3.10.0-beta.4";
1
+ declare const _default: "3.10.0-beta.6";
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.10.0-beta.4';
7
+ var _default = exports.default = '3.10.0-beta.6';
package/esm/steps/steps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAq0BxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAwwBxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/esm/steps/steps.js CHANGED
@@ -44,7 +44,7 @@ var stepsStyle = {
44
44
  left: -12
45
45
  },
46
46
  '& $step:not(:last-child)': {
47
- '&$widthDescription': {
47
+ '&$withDescription': {
48
48
  '&:after': {
49
49
  borderLeftWidth: 22,
50
50
  borderTopWidth: 28,
@@ -89,7 +89,7 @@ var stepsStyle = {
89
89
  }
90
90
  },
91
91
  '& $step:last-child': {
92
- '&$widthDescription': {
92
+ '&$withDescription': {
93
93
  '&:before': {
94
94
  borderLeftWidth: 22,
95
95
  borderTopWidth: 28,
@@ -192,7 +192,7 @@ var stepsStyle = {
192
192
  large: {
193
193
  '&$arrow': {
194
194
  '& $step:not(:last-child)': {
195
- '&$widthDescription': {
195
+ '&$withDescription': {
196
196
  '&:after': {
197
197
  top: 0,
198
198
  width: 30,
@@ -240,7 +240,7 @@ var stepsStyle = {
240
240
  }
241
241
  },
242
242
  '& $step:last-child': {
243
- '&$widthDescription': {
243
+ '&$withDescription': {
244
244
  '&:before': {
245
245
  borderLeftWidth: 30,
246
246
  borderTopWidth: 36,
@@ -618,88 +618,74 @@ var stepsStyle = {
618
618
  '& $title': {}
619
619
  }
620
620
  },
621
- arrow: {
622
- position: 'relative',
623
- zIndex: 0,
624
- '&$steps': {
625
- overflow: 'hidden'
621
+ arrowIcon: {
622
+ position: 'absolute',
623
+ top: 0,
624
+ right: 0.25,
625
+ bottom: 0,
626
+ transform: 'translateX(100%)',
627
+ zIndex: 1,
628
+ '@media (min-resolution: 2dppx)': {
629
+ right: 0
630
+ },
631
+ '$withDescription &': {
632
+ transform: 'translateX(calc(100% - 0.5px))',
633
+ '@media (min-resolution: 2dppx)': {
634
+ transform: 'translateX(100%)'
635
+ }
626
636
  },
627
- '& $step': {
628
- marginRight: 4,
629
- paddingLeft: Token.stepsArrowPaddingX,
630
- // before
631
- '&:before': {
632
- content: '""',
633
- position: 'absolute',
634
- width: 0,
635
- height: 0,
636
- top: 0,
637
- borderLeftWidth: 16,
638
- borderTopWidth: 20,
639
- borderBottomWidth: 20,
640
- borderLeftColor: '#ffffff'
637
+ '& > svg': {
638
+ display: 'block',
639
+ height: '100%',
640
+ color: Token.stepsFinishBackgroundColor,
641
+ '$process &': {
642
+ color: Token.stepsProcessBackgroundColor
641
643
  },
642
- '&[dir=ltr]:before': {
643
- left: 0
644
+ '$wait &': {
645
+ color: Token.stepsWaitBackgroundColor
644
646
  },
645
- '&[dir=rtl]:before': {
646
- right: 0
647
+ '&:last-child': {
648
+ position: 'relative'
647
649
  },
648
- // after
649
- '&:after': {
650
- content: '""',
650
+ '&:first-child': {
651
651
  position: 'absolute',
652
- width: 0,
653
- height: 0,
654
652
  top: 0,
655
- zIndex: 1,
656
- borderLeftWidth: 16,
657
- borderTopWidth: 20,
658
- borderBottomWidth: 20
659
- },
660
- '&[dir=ltr]:after': {
661
- right: -16
662
- },
663
- '&[dir=rtl]:after': {
664
- left: -16
653
+ left: 4,
654
+ color: 'white',
655
+ '$arrow[dir=rtl] &': {
656
+ right: 4,
657
+ left: 'auto'
658
+ }
665
659
  }
666
660
  },
661
+ '$step:last-child &': {
662
+ display: 'none'
663
+ },
664
+ '$arrow[dir=rtl] &': {
665
+ left: '0.25px',
666
+ right: 'auto',
667
+ transform: 'translateX(-100%)',
668
+ '& > svg': {
669
+ transform: "rotate(180deg)"
670
+ }
671
+ }
672
+ },
673
+ arrow: {
674
+ position: 'relative',
675
+ '& $step': {
676
+ marginRight: 4,
677
+ paddingLeft: Token.stepsArrowPaddingX
678
+ },
667
679
  '&$horizontal': {
668
680
  '& $horizontalLabel $title:after': {
669
681
  display: 'none'
670
682
  }
671
683
  },
672
684
  '& $step:first-child': {
673
- padding: 0,
674
- '&:before': {
675
- display: 'none'
676
- },
677
- '&$widthDescription': {
678
- '&:after': {
679
- borderLeftWidth: 26,
680
- borderTopWidth: 32,
681
- borderBottomWidth: 32
682
- },
683
- '&[dir=ltr]:after': {
684
- right: -26
685
- },
686
- '&[dir=rtl]:after': {
687
- left: -26
688
- }
689
- }
685
+ padding: 0
690
686
  },
691
687
  '& $step:last-child': {
692
- paddingRight: 0,
693
- '&:after': {
694
- display: 'none'
695
- },
696
- '&$widthDescription': {
697
- '&:before': {
698
- borderLeftWidth: 26,
699
- borderTopWidth: 32,
700
- borderBottomWidth: 32
701
- }
702
- }
688
+ paddingRight: 0
703
689
  },
704
690
  '& $description': {
705
691
  paddingRight: 0,
@@ -714,84 +700,30 @@ var stepsStyle = {
714
700
  width: '100%'
715
701
  },
716
702
  '& $finish': {
717
- backgroundColor: Token.stepsFinishBackgroundColor,
718
- '&:after': {
719
- borderLeft: "16px solid ".concat(Token.stepsFinishBackgroundColor),
720
- borderTop: "20px solid transparent",
721
- borderBottom: "20px solid transparent"
722
- },
723
- '&:before': {
724
- // borderLeft: `16px solid #ffffff`,
725
- // borderTop: `20px solid transparent`,
726
- // borderBottom: `20px solid transparent`,
727
- }
703
+ backgroundColor: Token.stepsFinishBackgroundColor
728
704
  },
729
705
  '& $process': {
730
706
  color: Token.stepsProcessFontColor,
731
707
  backgroundColor: Token.stepsProcessBackgroundColor,
732
708
  '& $description': {
733
709
  color: Token.stepsProcessFontColor
734
- },
735
- '&:after': {
736
- borderLeft: "16px solid ".concat(Token.stepsProcessBackgroundColor),
737
- borderTop: "20px solid transparent",
738
- borderBottom: "20px solid transparent"
739
- },
740
- '&[dir=ltr]:after': {
741
- right: -16
742
- },
743
- '&[dir=rtl]:after': {
744
- left: -16
745
- },
746
- '&:before': {
747
- borderLeft: "16px solid #ffffff",
748
- borderTop: "20px solid transparent",
749
- borderBottom: "20px solid transparent"
750
710
  }
751
711
  },
752
712
  '& $wait': {
753
713
  color: Token.stepsWaitFontColor,
754
714
  // backgroundColor: Token.stepsWaitBackgroundColor,
755
- backgroundColor: Token.stepsWaitBackgroundColor,
756
- '&:after': {
757
- borderLeft: "16px solid ".concat(Token.stepsWaitBackgroundColor),
758
- borderTop: "20px solid transparent",
759
- borderBottom: "20px solid transparent"
760
- },
761
- '&:before': {
762
- borderLeft: "16px solid #ffffff",
763
- borderTop: "20px solid transparent",
764
- borderBottom: "20px solid transparent"
765
- }
715
+ backgroundColor: Token.stepsWaitBackgroundColor
766
716
  },
767
- '& $widthDescription': {
717
+ '& $withDescription': {
768
718
  '& $content,$description': {
769
719
  textAlign: 'left'
770
720
  },
771
721
  '& $title': {
772
722
  marginBottom: Token.stepsDescriptionTitleMarginX
773
- },
774
- '&$process,$finish,$wait': {
775
- '&:after': {
776
- borderLeftWidth: 26,
777
- borderTopWidth: 32,
778
- borderBottomWidth: 32
779
- },
780
- '&[dir=ltr]:after': {
781
- right: -26
782
- },
783
- '&[dir=rtl]:after': {
784
- left: -26
785
- },
786
- '&:before': {
787
- borderLeftWidth: 26,
788
- borderTopWidth: 32,
789
- borderBottomWidth: 32
790
- }
791
723
  }
792
724
  }
793
725
  },
794
- widthDescription: {},
726
+ withDescription: {},
795
727
  default: {
796
728
  lineHeight: 0,
797
729
  '&$vertical': {
package/esm/version.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "3.10.0-beta.4";
1
+ declare const _default: "3.10.0-beta.6";
2
2
  export default _default;
3
3
  //# sourceMappingURL=version.d.ts.map
package/esm/version.js CHANGED
@@ -1 +1 @@
1
- export default '3.10.0-beta.4';
1
+ export default '3.10.0-beta.6';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/shineout-style",
3
- "version": "3.10.0-beta.4",
3
+ "version": "3.10.0-beta.6",
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.10.0-beta.4",
21
- "@sheinx/base": "3.10.0-beta.4"
20
+ "@sheinx/theme": "3.10.0-beta.6",
21
+ "@sheinx/base": "3.10.0-beta.6"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "core-js": ">=3"