@neatui/css 3.0.0-beta.9 → 3.0.0

package/components/anim/am-view-ah.scss

@@ -62,24 +62,24 @@
 }
 
 // 传参调用
-@mixin am-view-ah($time: 450ms, $delay: 100ms) {
+@mixin am-view-ah() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ah;
-      animation: am-show-ah $time $delay both;
+      animation: am-show-ah 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ah;
-      animation: am-hide-ah $time $delay both;
+      animation: am-hide-ah 450ms 100ms both;
     }
   }
 
@@ -89,29 +89,25 @@
   }
 }
 
-// 动画时间
-$time: 450ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='ah'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ah;
-      animation: am-show-ah $time $delay both;
+      animation: am-show-ah 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ah;
-      animation: am-hide-ah $time $delay both;
+      animation: am-hide-ah 450ms 100ms both;
     }
   }
 

package/components/anim/am-view-ai.scss

@@ -56,24 +56,24 @@
 }
 
 // 传参调用
-@mixin am-view-ai($time: 500ms, $delay: 100ms) {
+@mixin am-view-ai() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ai;
-      animation: am-show-ai $time $delay both;
+      animation: am-show-ai 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ai;
-      animation: am-hide-ai $time $delay both;
+      animation: am-hide-ai 500ms 100ms both;
     }
   }
 
@@ -83,29 +83,25 @@
   }
 }
 
-// 动画时间
-$time: 500ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='ai'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ai;
-      animation: am-show-ai $time $delay both;
+      animation: am-show-ai 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ai;
-      animation: am-hide-ai $time $delay both;
+      animation: am-hide-ai 500ms 100ms both;
     }
   }
 

package/components/anim/am-view-aj.scss

@@ -50,25 +50,25 @@
 }
 
 // 传参调用
-@mixin am-view-aj($time: 350ms, $delay: 100ms) {
+@mixin am-view-aj() {
   perspective: 500;
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-aj;
-      animation: am-show-aj $time $delay both;
+      animation: am-show-aj 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-aj;
-      animation: am-hide-aj $time $delay both;
+      animation: am-hide-aj 350ms 100ms both;
     }
   }
 
@@ -78,10 +78,6 @@
   }
 }
 
-// 动画时间
-$time: 350ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='aj'] {
   perspective: 500;
@@ -89,19 +85,19 @@ $delay: 100ms;
   &[view='2'] {
     & > * {
       @extend %am-show-aj;
-      animation: am-show-aj $time $delay both;
+      animation: am-show-aj 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-aj;
-      animation: am-hide-aj $time $delay both;
+      animation: am-hide-aj 350ms 100ms both;
     }
   }
 

package/components/anim/am-view-ak.scss

@@ -42,24 +42,24 @@
 }
 
 // 传参调用
-@mixin am-view-ak($time: 500ms, $delay: 100ms) {
+@mixin am-view-ak() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ak;
-      animation: am-show-ak $time $delay both;
+      animation: am-show-ak 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ak;
-      animation: am-hide-ak $time $delay both;
+      animation: am-hide-ak 500ms 100ms both;
     }
   }
 
@@ -69,29 +69,25 @@
   }
 }
 
-// 动画时间
-$time: 500ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='ak'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ak;
-      animation: am-show-ak $time $delay both;
+      animation: am-show-ak 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ak;
-      animation: am-hide-ak $time $delay both;
+      animation: am-hide-ak 500ms 100ms both;
     }
   }
 

package/components/anim/am-view-al.scss

@@ -38,24 +38,24 @@
 }
 
 // 传参调用
-@mixin am-view-al($time: 450ms, $delay: 100ms) {
+@mixin am-view-al() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-al;
-      animation: am-show-al $time $delay both;
+      animation: am-show-al 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-al;
-      animation: am-hide-al $time $delay both;
+      animation: am-hide-al 450ms 100ms both;
     }
   }
 
@@ -65,29 +65,25 @@
   }
 }
 
-// 动画时间
-$time: 450ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='al'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-al;
-      animation: am-show-al $time $delay both;
+      animation: am-show-al 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-al;
-      animation: am-hide-al $time $delay both;
+      animation: am-hide-al 450ms 100ms both;
     }
   }
 

package/components/anim/am-view-am.scss

@@ -37,24 +37,24 @@
 }
 
 // 传参调用
-@mixin am-view-am($time: 450ms, $delay: 100ms) {
+@mixin am-view-am() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-am;
-      animation: am-show-am $time $delay both;
+      animation: am-show-am 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-am;
-      animation: am-hide-am $time $delay both;
+      animation: am-hide-am 450ms 100ms both;
     }
   }
 
@@ -64,29 +64,25 @@
   }
 }
 
-// 动画时间
-$time: 450ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='am'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-am;
-      animation: am-show-am $time $delay both;
+      animation: am-show-am 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-am;
-      animation: am-hide-am $time $delay both;
+      animation: am-hide-am 450ms 100ms both;
     }
   }
 

package/components/anim/am-view-an.scss

@@ -49,24 +49,24 @@
 }
 
 // 传参调用
-@mixin am-view-an($time: 500ms, $delay: 100ms) {
+@mixin am-view-an() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-an;
-      animation: am-show-an $time $delay both;
+      animation: am-show-an 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-an;
-      animation: am-hide-an $time $delay both;
+      animation: am-hide-an 500ms 100ms both;
     }
   }
 
@@ -76,29 +76,25 @@
   }
 }
 
-// 动画时间
-$time: 500ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='an'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-an;
-      animation: am-show-an $time $delay both;
+      animation: am-show-an 500ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (500ms + 100ms) * (4 * 0.1) (500ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-an;
-      animation: am-hide-an $time $delay both;
+      animation: am-hide-an 500ms 100ms both;
     }
   }
 

package/components/anim/am-view-ao.scss

@@ -38,11 +38,11 @@
 }
 
 // 传参引用显示
-@mixin am-show-ao($time) {
+@mixin am-show-ao() {
   transform: scale3d(1, 1, 1) translateY(100%);
   opacity: 1;
   transform-style: preserve-3d;
-  animation: am-show-ao $time both 0.1s;
+  animation: am-show-ao 450ms both 0.1s;
 }
 
 // 引用隐藏
@@ -54,33 +54,33 @@
 }
 
 // 传参引用隐藏
-@mixin am-hide-ao($time) {
+@mixin am-hide-ao() {
   transform: scale(1, 1) translateY(0);
   opacity: 1;
   transform-style: preserve-3d;
-  animation: am-hide-ao $time both 0.1s;
+  animation: am-hide-ao 450ms both 0.1s;
   pointer-events: none;
 }
 
 // 传参调用
-@mixin am-view-ao($time: 450ms, $delay: 100ms) {
+@mixin am-view-ao() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ao;
-      animation: am-show-ao $time $delay both;
+      animation: am-show-ao 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ao;
-      animation: am-hide-ao $time $delay both;
+      animation: am-hide-ao 450ms 100ms both;
     }
   }
 
@@ -90,29 +90,25 @@
   }
 }
 
-// 动画时间
-$time: 450ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='ao'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ao;
-      animation: am-show-ao $time $delay both;
+      animation: am-show-ao 450ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 100ms) * (4 * 0.1) (450ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ao;
-      animation: am-hide-ao $time $delay both;
+      animation: am-hide-ao 450ms 100ms both;
     }
   }
 

package/components/anim/am-view-ap.scss

@@ -48,24 +48,24 @@
 }
 
 // 传参调用
-@mixin am-view-ap($time: 450ms, $delay: 100ms) {
+@mixin am-view-ap() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ap;
-      animation: am-show-ap $time $delay both;
+      animation: am-show-ap 450ms 350ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 350ms) * (4 * 0.1) (450ms + 350ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ap;
-      animation: am-hide-ap $time $delay both;
+      animation: am-hide-ap 450ms 350ms both;
     }
   }
 
@@ -75,29 +75,25 @@
   }
 }
 
-// 动画时间
-$time: 450ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='ap'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ap;
-      animation: am-show-ap $time $delay both;
+      animation: am-show-ap 450ms 350ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (450ms + 350ms) * (4 * 0.1) (450ms + 350ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-ap;
-      animation: am-hide-ap $time $delay both;
+      animation: am-hide-ap 450ms 350ms both;
     }
   }
 

package/components/anim/am-view-aq.scss

@@ -55,24 +55,24 @@
 }
 
 // 传参调用
-@mixin am-view-aq($time: 350ms, $delay: 100ms) {
+@mixin am-view-aq() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-aq;
-      animation: am-show-aq $time $delay both;
+      animation: am-show-aq 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-aq;
-      animation: am-hide-aq $time $delay both;
+      animation: am-hide-aq 350ms 100ms both;
     }
   }
 
@@ -82,29 +82,25 @@
   }
 }
 
-// 动画时间
-$time: 350ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='aq'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-aq;
-      animation: am-show-aq $time $delay both;
+      animation: am-show-aq 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (4 * 0.1) ($time + $delay) * (6 * 0.1);
+    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
     & > * {
       @extend %am-hide-aq;
-      animation: am-hide-aq $time $delay both;
+      animation: am-hide-aq 350ms 100ms both;
     }
   }