@neatui/css 3.0.0-beta.9 → 3.0.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 (139) hide show
  1. package/components/anim/am-view-aa.scss +7 -11
  2. package/components/anim/am-view-ab.scss +7 -11
  3. package/components/anim/am-view-ad.scss +7 -11
  4. package/components/anim/am-view-ae.scss +7 -11
  5. package/components/anim/am-view-af.scss +4 -8
  6. package/components/anim/am-view-ag.scss +92 -1541
  7. package/components/anim/am-view-ah.scss +7 -11
  8. package/components/anim/am-view-ai.scss +7 -11
  9. package/components/anim/am-view-aj.scss +7 -11
  10. package/components/anim/am-view-ak.scss +7 -11
  11. package/components/anim/am-view-al.scss +7 -11
  12. package/components/anim/am-view-am.scss +7 -11
  13. package/components/anim/am-view-an.scss +7 -11
  14. package/components/anim/am-view-ao.scss +11 -15
  15. package/components/anim/am-view-ap.scss +7 -11
  16. package/components/anim/am-view-aq.scss +7 -11
  17. package/components/anim/am-view-ar.scss +7 -11
  18. package/components/anim/am-view-as.scss +8 -12
  19. package/components/anim/am-view-at.scss +8 -12
  20. package/components/anim/index.scss +22 -0
  21. package/components/btns/base.scss +2 -0
  22. package/components/btns/btns@a.scss +2 -1
  23. package/components/btns/index.scss +1 -0
  24. package/components/card/card@a.scss +10 -8
  25. package/components/card/card@b.scss +2 -0
  26. package/components/card/index.scss +2 -0
  27. package/components/form/base.scss +3 -0
  28. package/components/form/form@a/base.scss +1 -1
  29. package/components/form/form@a/checkbox.scss +1 -1
  30. package/components/form/form@a/date.scss +2 -2
  31. package/components/form/form@a/index.scss +9 -9
  32. package/components/form/form@a/input.scss +3 -4
  33. package/components/form/form@a/radio.scss +1 -1
  34. package/components/form/form@a/select.scss +2 -2
  35. package/components/form/form@a/switch.scss +0 -1
  36. package/components/form/form@a/textarea.scss +2 -3
  37. package/components/form/form@b/base.scss +1 -1
  38. package/components/form/form@b/checkbox.scss +0 -1
  39. package/components/form/form@b/date.scss +2 -2
  40. package/components/form/form@b/index.scss +9 -9
  41. package/components/form/form@b/input.scss +3 -4
  42. package/components/form/form@b/radio.scss +0 -1
  43. package/components/form/form@b/select.scss +2 -2
  44. package/components/form/form@b/switch.scss +0 -1
  45. package/components/form/form@b/textarea.scss +2 -3
  46. package/components/form/form@c/base.scss +1 -1
  47. package/components/form/form@c/checkbox.scss +0 -1
  48. package/components/form/form@c/date.scss +2 -2
  49. package/components/form/form@c/index.scss +9 -9
  50. package/components/form/form@c/input.scss +3 -4
  51. package/components/form/form@c/radio.scss +0 -1
  52. package/components/form/form@c/select.scss +2 -2
  53. package/components/form/form@c/switch.scss +0 -1
  54. package/components/form/form@c/textarea.scss +2 -2
  55. package/components/form/form@d/base.scss +1 -1
  56. package/components/form/form@d/checkbox.scss +0 -1
  57. package/components/form/form@d/date.scss +2 -2
  58. package/components/form/form@d/input.scss +3 -4
  59. package/components/form/form@d/radio.scss +0 -1
  60. package/components/form/form@d/select.scss +2 -2
  61. package/components/form/form@d/switch.scss +0 -1
  62. package/components/form/form@d/textarea.scss +2 -2
  63. package/components/form/index.scss +3 -0
  64. package/components/form/vars.scss +2 -0
  65. package/components/icon/index.scss +21 -0
  66. package/components/imgs/imgs@a.scss +1 -1
  67. package/components/imgs/index.scss +1 -0
  68. package/components/line/index.scss +2 -0
  69. package/components/list/index.scss +2 -0
  70. package/components/list/list@a.scss +2 -2
  71. package/components/list/list@b.scss +1 -1
  72. package/components/load/index.scss +8 -0
  73. package/components/menu/index.scss +1 -0
  74. package/components/navs/index.scss +2 -0
  75. package/components/note/index.scss +2 -0
  76. package/components/note/note@a.scss +2 -2
  77. package/components/note/note@b.scss +2 -2
  78. package/components/opts/index.scss +1 -0
  79. package/components/path/index.scss +1 -0
  80. package/components/path/path@a.scss +2 -0
  81. package/components/steps/index.scss +2 -0
  82. package/components/steps/steps@a.scss +5 -4
  83. package/components/steps/steps@v.scss +5 -5
  84. package/components/table/index.scss +3 -0
  85. package/components/table/table@b.scss +1 -1
  86. package/components/table/table@c.scss +1 -1
  87. package/components/tabs/index.scss +3 -0
  88. package/components/tabs/tabs@a.scss +3 -3
  89. package/components/tabs/tabs@b.scss +3 -3
  90. package/components/tabs/tabs@c.scss +3 -3
  91. package/components/tags/index.scss +2 -0
  92. package/components/tags/tags@a.scss +4 -4
  93. package/components/tags/tags@b.scss +4 -4
  94. package/components/tips/index.scss +1 -0
  95. package/components/tips/tips@a.scss +1 -1
  96. package/components/title/index.scss +2 -0
  97. package/core/{base.scss → basic.scss} +2 -0
  98. package/core/border.scss +6 -4
  99. package/core/cols.scss +1 -1
  100. package/core/cover.scss +6 -0
  101. package/core/flex.scss +1 -1
  102. package/core/grid.scss +251 -0
  103. package/core/media copy.scss +270 -0
  104. package/core/media.scss +1 -0
  105. package/core/neatui.core.scss.backup +34 -0
  106. package/core/reset.scss +0 -4
  107. package/core/scroll.scss +2 -0
  108. package/core/size.scss +2 -11
  109. package/core/theme-v2.scss +378 -0
  110. package/core/theme.scss +169 -128
  111. package/core/trim.scss +2 -0
  112. package/core/vars.scss +3 -0
  113. package/neatui.scss +54 -23
  114. package/package.json +1 -1
  115. package/components/anim/mcui@anim.scss +0 -22
  116. package/components/btns/mcui@btns.scss +0 -1
  117. package/components/card/mcui@card.scss +0 -2
  118. package/components/form/mcui@form.scss +0 -4
  119. package/components/icon/mcui@icon.scss +0 -21
  120. package/components/imgs/mcui@imgs.scss +0 -1
  121. package/components/line/mcui@line.scss +0 -2
  122. package/components/list/mcui@list.scss +0 -2
  123. package/components/load/mcui@load.scss +0 -8
  124. package/components/menu/mcui@menu.scss +0 -1
  125. package/components/navs/mcui@navs.scss +0 -2
  126. package/components/note/mcui@note.scss +0 -2
  127. package/components/opts/mcui@opts.scss +0 -1
  128. package/components/path/mcui@path.scss +0 -1
  129. package/components/steps/mcui@steps.scss +0 -2
  130. package/components/table/mcui@table.scss +0 -3
  131. package/components/tabs/mcui@tabs.scss +0 -3
  132. package/components/tags/mcui@tags.scss +0 -2
  133. package/components/tips/mcui@tips.scss +0 -1
  134. package/components/title/mcui@title.scss +0 -2
  135. package/core/neatui@core.scss +0 -30
  136. /package/components/chat/{mcui@chat.scss → index.scss} +0 -0
  137. /package/components/demo/{mcui@demo.scss → index.scss} +0 -0
  138. /package/components/grid/{mcui@grid.scss → index.scss} +0 -0
  139. /package/components/side/{mcui@side.scss → index.scss} +0 -0
@@ -62,24 +62,24 @@
62
62
  }
63
63
 
64
64
  // 传参调用
65
- @mixin am-view-ah($time: 450ms, $delay: 100ms) {
65
+ @mixin am-view-ah() {
66
66
  &.show,
67
67
  &[view='2'] {
68
68
  & > * {
69
69
  @extend %am-show-ah;
70
- animation: am-show-ah $time $delay both;
70
+ animation: am-show-ah 450ms 100ms both;
71
71
  }
72
72
  }
73
73
 
74
74
  &.hide,
75
75
  &[view='1'] {
76
76
  opacity: 0;
77
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
77
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
78
78
  pointer-events: none;
79
79
 
80
80
  & > * {
81
81
  @extend %am-hide-ah;
82
- animation: am-hide-ah $time $delay both;
82
+ animation: am-hide-ah 450ms 100ms both;
83
83
  }
84
84
  }
85
85
 
@@ -89,29 +89,25 @@
89
89
  }
90
90
  }
91
91
 
92
- // 动画时间
93
- $time: 450ms;
94
- $delay: 100ms;
95
-
96
92
  // 全套引用
97
93
  [am-view='ah'] {
98
94
  &.show,
99
95
  &[view='2'] {
100
96
  & > * {
101
97
  @extend %am-show-ah;
102
- animation: am-show-ah $time $delay both;
98
+ animation: am-show-ah 450ms 100ms both;
103
99
  }
104
100
  }
105
101
 
106
102
  &.hide,
107
103
  &[view='1'] {
108
104
  opacity: 0;
109
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
105
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
110
106
  pointer-events: none;
111
107
 
112
108
  & > * {
113
109
  @extend %am-hide-ah;
114
- animation: am-hide-ah $time $delay both;
110
+ animation: am-hide-ah 450ms 100ms both;
115
111
  }
116
112
  }
117
113
 
@@ -56,24 +56,24 @@
56
56
  }
57
57
 
58
58
  // 传参调用
59
- @mixin am-view-ai($time: 500ms, $delay: 100ms) {
59
+ @mixin am-view-ai() {
60
60
  &.show,
61
61
  &[view='2'] {
62
62
  & > * {
63
63
  @extend %am-show-ai;
64
- animation: am-show-ai $time $delay both;
64
+ animation: am-show-ai 500ms 100ms both;
65
65
  }
66
66
  }
67
67
 
68
68
  &.hide,
69
69
  &[view='1'] {
70
70
  opacity: 0;
71
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
71
+ transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
72
72
  pointer-events: none;
73
73
 
74
74
  & > * {
75
75
  @extend %am-hide-ai;
76
- animation: am-hide-ai $time $delay both;
76
+ animation: am-hide-ai 500ms 100ms both;
77
77
  }
78
78
  }
79
79
 
@@ -83,29 +83,25 @@
83
83
  }
84
84
  }
85
85
 
86
- // 动画时间
87
- $time: 500ms;
88
- $delay: 100ms;
89
-
90
86
  // 全套引用
91
87
  [am-view='ai'] {
92
88
  &.show,
93
89
  &[view='2'] {
94
90
  & > * {
95
91
  @extend %am-show-ai;
96
- animation: am-show-ai $time $delay both;
92
+ animation: am-show-ai 500ms 100ms both;
97
93
  }
98
94
  }
99
95
 
100
96
  &.hide,
101
97
  &[view='1'] {
102
98
  opacity: 0;
103
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
99
+ transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
104
100
  pointer-events: none;
105
101
 
106
102
  & > * {
107
103
  @extend %am-hide-ai;
108
- animation: am-hide-ai $time $delay both;
104
+ animation: am-hide-ai 500ms 100ms both;
109
105
  }
110
106
  }
111
107
 
@@ -50,25 +50,25 @@
50
50
  }
51
51
 
52
52
  // 传参调用
53
- @mixin am-view-aj($time: 350ms, $delay: 100ms) {
53
+ @mixin am-view-aj() {
54
54
  perspective: 500;
55
55
  &.show,
56
56
  &[view='2'] {
57
57
  & > * {
58
58
  @extend %am-show-aj;
59
- animation: am-show-aj $time $delay both;
59
+ animation: am-show-aj 350ms 100ms both;
60
60
  }
61
61
  }
62
62
 
63
63
  &.hide,
64
64
  &[view='1'] {
65
65
  opacity: 0;
66
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
66
+ transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
67
67
  pointer-events: none;
68
68
 
69
69
  & > * {
70
70
  @extend %am-hide-aj;
71
- animation: am-hide-aj $time $delay both;
71
+ animation: am-hide-aj 350ms 100ms both;
72
72
  }
73
73
  }
74
74
 
@@ -78,10 +78,6 @@
78
78
  }
79
79
  }
80
80
 
81
- // 动画时间
82
- $time: 350ms;
83
- $delay: 100ms;
84
-
85
81
  // 全套引用
86
82
  [am-view='aj'] {
87
83
  perspective: 500;
@@ -89,19 +85,19 @@ $delay: 100ms;
89
85
  &[view='2'] {
90
86
  & > * {
91
87
  @extend %am-show-aj;
92
- animation: am-show-aj $time $delay both;
88
+ animation: am-show-aj 350ms 100ms both;
93
89
  }
94
90
  }
95
91
 
96
92
  &.hide,
97
93
  &[view='1'] {
98
94
  opacity: 0;
99
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
95
+ transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
100
96
  pointer-events: none;
101
97
 
102
98
  & > * {
103
99
  @extend %am-hide-aj;
104
- animation: am-hide-aj $time $delay both;
100
+ animation: am-hide-aj 350ms 100ms both;
105
101
  }
106
102
  }
107
103
 
@@ -42,24 +42,24 @@
42
42
  }
43
43
 
44
44
  // 传参调用
45
- @mixin am-view-ak($time: 500ms, $delay: 100ms) {
45
+ @mixin am-view-ak() {
46
46
  &.show,
47
47
  &[view='2'] {
48
48
  & > * {
49
49
  @extend %am-show-ak;
50
- animation: am-show-ak $time $delay both;
50
+ animation: am-show-ak 500ms 100ms both;
51
51
  }
52
52
  }
53
53
 
54
54
  &.hide,
55
55
  &[view='1'] {
56
56
  opacity: 0;
57
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
57
+ transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
58
58
  pointer-events: none;
59
59
 
60
60
  & > * {
61
61
  @extend %am-hide-ak;
62
- animation: am-hide-ak $time $delay both;
62
+ animation: am-hide-ak 500ms 100ms both;
63
63
  }
64
64
  }
65
65
 
@@ -69,29 +69,25 @@
69
69
  }
70
70
  }
71
71
 
72
- // 动画时间
73
- $time: 500ms;
74
- $delay: 100ms;
75
-
76
72
  // 全套引用
77
73
  [am-view='ak'] {
78
74
  &.show,
79
75
  &[view='2'] {
80
76
  & > * {
81
77
  @extend %am-show-ak;
82
- animation: am-show-ak $time $delay both;
78
+ animation: am-show-ak 500ms 100ms both;
83
79
  }
84
80
  }
85
81
 
86
82
  &.hide,
87
83
  &[view='1'] {
88
84
  opacity: 0;
89
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
85
+ transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
90
86
  pointer-events: none;
91
87
 
92
88
  & > * {
93
89
  @extend %am-hide-ak;
94
- animation: am-hide-ak $time $delay both;
90
+ animation: am-hide-ak 500ms 100ms both;
95
91
  }
96
92
  }
97
93
 
@@ -38,24 +38,24 @@
38
38
  }
39
39
 
40
40
  // 传参调用
41
- @mixin am-view-al($time: 450ms, $delay: 100ms) {
41
+ @mixin am-view-al() {
42
42
  &.show,
43
43
  &[view='2'] {
44
44
  & > * {
45
45
  @extend %am-show-al;
46
- animation: am-show-al $time $delay both;
46
+ animation: am-show-al 450ms 100ms both;
47
47
  }
48
48
  }
49
49
 
50
50
  &.hide,
51
51
  &[view='1'] {
52
52
  opacity: 0;
53
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
53
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
54
54
  pointer-events: none;
55
55
 
56
56
  & > * {
57
57
  @extend %am-hide-al;
58
- animation: am-hide-al $time $delay both;
58
+ animation: am-hide-al 450ms 100ms both;
59
59
  }
60
60
  }
61
61
 
@@ -65,29 +65,25 @@
65
65
  }
66
66
  }
67
67
 
68
- // 动画时间
69
- $time: 450ms;
70
- $delay: 100ms;
71
-
72
68
  // 全套引用
73
69
  [am-view='al'] {
74
70
  &.show,
75
71
  &[view='2'] {
76
72
  & > * {
77
73
  @extend %am-show-al;
78
- animation: am-show-al $time $delay both;
74
+ animation: am-show-al 450ms 100ms both;
79
75
  }
80
76
  }
81
77
 
82
78
  &.hide,
83
79
  &[view='1'] {
84
80
  opacity: 0;
85
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
81
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
86
82
  pointer-events: none;
87
83
 
88
84
  & > * {
89
85
  @extend %am-hide-al;
90
- animation: am-hide-al $time $delay both;
86
+ animation: am-hide-al 450ms 100ms both;
91
87
  }
92
88
  }
93
89
 
@@ -37,24 +37,24 @@
37
37
  }
38
38
 
39
39
  // 传参调用
40
- @mixin am-view-am($time: 450ms, $delay: 100ms) {
40
+ @mixin am-view-am() {
41
41
  &.show,
42
42
  &[view='2'] {
43
43
  & > * {
44
44
  @extend %am-show-am;
45
- animation: am-show-am $time $delay both;
45
+ animation: am-show-am 450ms 100ms both;
46
46
  }
47
47
  }
48
48
 
49
49
  &.hide,
50
50
  &[view='1'] {
51
51
  opacity: 0;
52
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
52
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
53
53
  pointer-events: none;
54
54
 
55
55
  & > * {
56
56
  @extend %am-hide-am;
57
- animation: am-hide-am $time $delay both;
57
+ animation: am-hide-am 450ms 100ms both;
58
58
  }
59
59
  }
60
60
 
@@ -64,29 +64,25 @@
64
64
  }
65
65
  }
66
66
 
67
- // 动画时间
68
- $time: 450ms;
69
- $delay: 100ms;
70
-
71
67
  // 全套引用
72
68
  [am-view='am'] {
73
69
  &.show,
74
70
  &[view='2'] {
75
71
  & > * {
76
72
  @extend %am-show-am;
77
- animation: am-show-am $time $delay both;
73
+ animation: am-show-am 450ms 100ms both;
78
74
  }
79
75
  }
80
76
 
81
77
  &.hide,
82
78
  &[view='1'] {
83
79
  opacity: 0;
84
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
80
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
85
81
  pointer-events: none;
86
82
 
87
83
  & > * {
88
84
  @extend %am-hide-am;
89
- animation: am-hide-am $time $delay both;
85
+ animation: am-hide-am 450ms 100ms both;
90
86
  }
91
87
  }
92
88
 
@@ -49,24 +49,24 @@
49
49
  }
50
50
 
51
51
  // 传参调用
52
- @mixin am-view-an($time: 500ms, $delay: 100ms) {
52
+ @mixin am-view-an() {
53
53
  &.show,
54
54
  &[view='2'] {
55
55
  & > * {
56
56
  @extend %am-show-an;
57
- animation: am-show-an $time $delay both;
57
+ animation: am-show-an 500ms 100ms both;
58
58
  }
59
59
  }
60
60
 
61
61
  &.hide,
62
62
  &[view='1'] {
63
63
  opacity: 0;
64
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
64
+ transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
65
65
  pointer-events: none;
66
66
 
67
67
  & > * {
68
68
  @extend %am-hide-an;
69
- animation: am-hide-an $time $delay both;
69
+ animation: am-hide-an 500ms 100ms both;
70
70
  }
71
71
  }
72
72
 
@@ -76,29 +76,25 @@
76
76
  }
77
77
  }
78
78
 
79
- // 动画时间
80
- $time: 500ms;
81
- $delay: 100ms;
82
-
83
79
  // 全套引用
84
80
  [am-view='an'] {
85
81
  &.show,
86
82
  &[view='2'] {
87
83
  & > * {
88
84
  @extend %am-show-an;
89
- animation: am-show-an $time $delay both;
85
+ animation: am-show-an 500ms 100ms both;
90
86
  }
91
87
  }
92
88
 
93
89
  &.hide,
94
90
  &[view='1'] {
95
91
  opacity: 0;
96
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
92
+ transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
97
93
  pointer-events: none;
98
94
 
99
95
  & > * {
100
96
  @extend %am-hide-an;
101
- animation: am-hide-an $time $delay both;
97
+ animation: am-hide-an 500ms 100ms both;
102
98
  }
103
99
  }
104
100
 
@@ -38,11 +38,11 @@
38
38
  }
39
39
 
40
40
  // 传参引用显示
41
- @mixin am-show-ao($time) {
41
+ @mixin am-show-ao() {
42
42
  transform: scale3d(1, 1, 1) translateY(100%);
43
43
  opacity: 1;
44
44
  transform-style: preserve-3d;
45
- animation: am-show-ao $time both 0.1s;
45
+ animation: am-show-ao 450ms both 0.1s;
46
46
  }
47
47
 
48
48
  // 引用隐藏
@@ -54,33 +54,33 @@
54
54
  }
55
55
 
56
56
  // 传参引用隐藏
57
- @mixin am-hide-ao($time) {
57
+ @mixin am-hide-ao() {
58
58
  transform: scale(1, 1) translateY(0);
59
59
  opacity: 1;
60
60
  transform-style: preserve-3d;
61
- animation: am-hide-ao $time both 0.1s;
61
+ animation: am-hide-ao 450ms both 0.1s;
62
62
  pointer-events: none;
63
63
  }
64
64
 
65
65
  // 传参调用
66
- @mixin am-view-ao($time: 450ms, $delay: 100ms) {
66
+ @mixin am-view-ao() {
67
67
  &.show,
68
68
  &[view='2'] {
69
69
  & > * {
70
70
  @extend %am-show-ao;
71
- animation: am-show-ao $time $delay both;
71
+ animation: am-show-ao 450ms 100ms both;
72
72
  }
73
73
  }
74
74
 
75
75
  &.hide,
76
76
  &[view='1'] {
77
77
  opacity: 0;
78
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
78
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
79
79
  pointer-events: none;
80
80
 
81
81
  & > * {
82
82
  @extend %am-hide-ao;
83
- animation: am-hide-ao $time $delay both;
83
+ animation: am-hide-ao 450ms 100ms both;
84
84
  }
85
85
  }
86
86
 
@@ -90,29 +90,25 @@
90
90
  }
91
91
  }
92
92
 
93
- // 动画时间
94
- $time: 450ms;
95
- $delay: 100ms;
96
-
97
93
  // 全套引用
98
94
  [am-view='ao'] {
99
95
  &.show,
100
96
  &[view='2'] {
101
97
  & > * {
102
98
  @extend %am-show-ao;
103
- animation: am-show-ao $time $delay both;
99
+ animation: am-show-ao 450ms 100ms both;
104
100
  }
105
101
  }
106
102
 
107
103
  &.hide,
108
104
  &[view='1'] {
109
105
  opacity: 0;
110
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
106
+ transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
111
107
  pointer-events: none;
112
108
 
113
109
  & > * {
114
110
  @extend %am-hide-ao;
115
- animation: am-hide-ao $time $delay both;
111
+ animation: am-hide-ao 450ms 100ms both;
116
112
  }
117
113
  }
118
114
 
@@ -48,24 +48,24 @@
48
48
  }
49
49
 
50
50
  // 传参调用
51
- @mixin am-view-ap($time: 450ms, $delay: 100ms) {
51
+ @mixin am-view-ap() {
52
52
  &.show,
53
53
  &[view='2'] {
54
54
  & > * {
55
55
  @extend %am-show-ap;
56
- animation: am-show-ap $time $delay both;
56
+ animation: am-show-ap 450ms 350ms both;
57
57
  }
58
58
  }
59
59
 
60
60
  &.hide,
61
61
  &[view='1'] {
62
62
  opacity: 0;
63
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
63
+ transition: (450ms + 350ms) * (4 * 0.1) (450ms + 350ms) * (6 * 0.1);
64
64
  pointer-events: none;
65
65
 
66
66
  & > * {
67
67
  @extend %am-hide-ap;
68
- animation: am-hide-ap $time $delay both;
68
+ animation: am-hide-ap 450ms 350ms both;
69
69
  }
70
70
  }
71
71
 
@@ -75,29 +75,25 @@
75
75
  }
76
76
  }
77
77
 
78
- // 动画时间
79
- $time: 450ms;
80
- $delay: 100ms;
81
-
82
78
  // 全套引用
83
79
  [am-view='ap'] {
84
80
  &.show,
85
81
  &[view='2'] {
86
82
  & > * {
87
83
  @extend %am-show-ap;
88
- animation: am-show-ap $time $delay both;
84
+ animation: am-show-ap 450ms 350ms both;
89
85
  }
90
86
  }
91
87
 
92
88
  &.hide,
93
89
  &[view='1'] {
94
90
  opacity: 0;
95
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
91
+ transition: (450ms + 350ms) * (4 * 0.1) (450ms + 350ms) * (6 * 0.1);
96
92
  pointer-events: none;
97
93
 
98
94
  & > * {
99
95
  @extend %am-hide-ap;
100
- animation: am-hide-ap $time $delay both;
96
+ animation: am-hide-ap 450ms 350ms both;
101
97
  }
102
98
  }
103
99
 
@@ -55,24 +55,24 @@
55
55
  }
56
56
 
57
57
  // 传参调用
58
- @mixin am-view-aq($time: 350ms, $delay: 100ms) {
58
+ @mixin am-view-aq() {
59
59
  &.show,
60
60
  &[view='2'] {
61
61
  & > * {
62
62
  @extend %am-show-aq;
63
- animation: am-show-aq $time $delay both;
63
+ animation: am-show-aq 350ms 100ms both;
64
64
  }
65
65
  }
66
66
 
67
67
  &.hide,
68
68
  &[view='1'] {
69
69
  opacity: 0;
70
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
70
+ transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
71
71
  pointer-events: none;
72
72
 
73
73
  & > * {
74
74
  @extend %am-hide-aq;
75
- animation: am-hide-aq $time $delay both;
75
+ animation: am-hide-aq 350ms 100ms both;
76
76
  }
77
77
  }
78
78
 
@@ -82,29 +82,25 @@
82
82
  }
83
83
  }
84
84
 
85
- // 动画时间
86
- $time: 350ms;
87
- $delay: 100ms;
88
-
89
85
  // 全套引用
90
86
  [am-view='aq'] {
91
87
  &.show,
92
88
  &[view='2'] {
93
89
  & > * {
94
90
  @extend %am-show-aq;
95
- animation: am-show-aq $time $delay both;
91
+ animation: am-show-aq 350ms 100ms both;
96
92
  }
97
93
  }
98
94
 
99
95
  &.hide,
100
96
  &[view='1'] {
101
97
  opacity: 0;
102
- transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
98
+ transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
103
99
  pointer-events: none;
104
100
 
105
101
  & > * {
106
102
  @extend %am-hide-aq;
107
- animation: am-hide-aq $time $delay both;
103
+ animation: am-hide-aq 350ms 100ms both;
108
104
  }
109
105
  }
110
106