@neatui/css 4.5.0 → 4.7.0

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

@@ -1,7 +1,8 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-aq {
   0% {
-    transform: scale3d(0.8, 0.8, 1);
+    transform: scale3d(0.838, 0.838, 1);
     opacity: 0;
   }
   30% {
@@ -9,11 +10,11 @@
     opacity: 1;
   }
   50% {
-    transform: scale3d(0.95, 0.95, 1);
+    transform: scale3d(0.99, 0.99, 1);
     opacity: 1;
   }
   70% {
-    transform: scale3d(1.01, 1.01, 1);
+    transform: scale3d(1.004, 1.004, 1);
     opacity: 1;
   }
   100% {
@@ -22,57 +23,47 @@
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-aq {
   0% {
     transform: scale3d(1, 1, 1);
+    opacity: 1;
   }
   40%,
   50% {
-    transform: scale3d(1.05, 1.05, 1);
-  }
-  70% {
-    opacity: 1;
+    transform: scale3d(1.04, 1.04, 1);
   }
   100% {
-    transform: scale3d(0.8, 0.8, 1);
+    transform: scale3d(0.838, 0.838, 1);
     opacity: 0;
   }
 }
 
-// 引用显示
 %am-show-aq {
-  transform: scale3d(0.8, 0.8, 1);
+  transform: scale3d(0.838, 0.838, 1);
   opacity: 0;
-  transform-style: preserve-3d;
 }
 
-// 引用隐藏
 %am-hide-aq {
   transform: scale3d(1, 1, 1);
   opacity: 1;
-  transform-style: preserve-3d;
 }
 
-// 传参调用
 @mixin am-view-aq() {
   &.show,
   &[view='2'] {
-    & > * {
+    & > * > * {
       @extend %am-show-aq;
-      animation: am-show-aq 350ms 100ms both;
+      animation: am-show-aq 350ms ease both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
     pointer-events: none;
 
-    & > * {
+    & > * > * {
       @extend %am-hide-aq;
-      animation: am-hide-aq 350ms 100ms both;
+      animation: am-hide-aq $am-hide-time $am-hide-ease both;
     }
   }
 
@@ -82,30 +73,6 @@
   }
 }
 
-// 全套引用
 [am-view='aq'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-aq;
-      animation: am-show-aq 350ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-aq;
-      animation: am-hide-aq 350ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-aq();
 }

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

@@ -1,109 +1,59 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-ar {
   0% {
-    transform: scale3d(1, 1, 1) translateY(30%);
     opacity: 0;
+    transform: translate3d(0, 14px, 0);
   }
-  30% {
-    transform: scale3d(1, 1, 1) translateY(-2%);
-    opacity: 0.8;
-  }
-  50% {
-    transform: scale3d(1, 1, 1) translateY(1%);
-  }
-  75% {
-    transform: scale3d(1, 1, 1) translateY(-0.5%);
+  68% {
     opacity: 1;
+    transform: translate3d(0, -2px, 0);
   }
   100% {
-    transform: scale3d(1, 1, 1) translateY(0%);
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-ar {
   0% {
-    transform: scale3d(1, 1, 1) translateY(0%);
-    opacity: 1;
-  }
-  50%,
-  60% {
-    transform: scale3d(1, 1, 1) translateY(5%);
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
   100% {
-    transform: scale3d(1, 1, 1) translateY(-30%);
     opacity: 0;
+    transform: translate3d(0, -12px, 0);
   }
 }
 
-// 引用显示
 %am-show-ar {
-  transform: scale(0.8, 0.8) translateY(100%);
-  opacity: 0.8;
-  transform-style: preserve-3d;
+  opacity: 0;
+  transform: translate3d(0, 14px, 0);
 }
 
-// 引用隐藏
 %am-hide-ar {
-  transform: scale(1, 1) translateY(0);
   opacity: 1;
-  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 0);
 }
 
-// 传参调用
 @mixin am-view-ar() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ar;
-      animation: am-show-ar 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-ar;
-      animation: am-hide-ar 350ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-ar, am-hide-ar);
 }
 
-// 全套引用
 [am-view='ar'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-ar;
-      animation: am-show-ar 350ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-ar;
-      animation: am-hide-ar 350ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-ar();
 }

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

@@ -1,95 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-as {
   0% {
-    transform: translateY(-15px);
     opacity: 0;
+    transform: translate3d(0, -20px, 0);
   }
   100% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-as {
   0% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
-
   100% {
-    transform: translateY(-15px);
     opacity: 0;
+    transform: translate3d(0, -20px, 0);
   }
 }
 
-// 引用显示
 %am-show-as {
-  transform: translateY(-15px);
   opacity: 0;
-  transform-style: preserve-3d;
+  transform: translate3d(0, -20px, 0);
 }
 
-// 引用隐藏
 %am-hide-as {
-  transform: translateY(0);
   opacity: 1;
-  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 0);
 }
 
-// 传参调用
 @mixin am-view-as() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-as;
-      animation: am-show-as 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (5/10) (350ms + 100ms) * (5/10);
-    // transition: 100ms 350ms;
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-as;
-      animation: am-hide-as 350ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-as, am-hide-as);
 }
 
-// 全套引用
 [am-view='as'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-as;
-      animation: am-show-as 350ms 100ms both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-as;
-      animation: am-hide-as 350ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-as();
 }

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

@@ -1,99 +1,55 @@
-// 显示动画
+@use './am-view-core' as *;
+
 @keyframes am-show-at {
   0% {
     opacity: 0;
-    transform: scale(0.9);
-  }
-  25% {
-    transform: scale(0.9);
+    transform: scale3d(0.96, 0.96, 1);
   }
   100% {
-    transform: scale(1);
     opacity: 1;
+    transform: scale3d(1, 1, 1);
   }
 }
 
-// 隐藏动画
 @keyframes am-hide-at {
   0% {
-    transform: scale(1);
     opacity: 1;
-  }
-  50% {
-    transform: scale(0.9);
+    transform: scale3d(1, 1, 1);
   }
   100% {
     opacity: 0;
+    transform: scale3d(0.96, 0.96, 1);
   }
 }
 
-// 引用显示
 %am-show-at {
-  transform: translateY(-15px);
   opacity: 0;
-  transform-style: preserve-3d;
+  transform: scale3d(0.96, 0.96, 1);
 }
 
-// 引用隐藏
 %am-hide-at {
-  transform: translateY(0);
   opacity: 1;
-  transform-style: preserve-3d;
+  transform: scale3d(1, 1, 1);
 }
 
-// 传参调用
 @mixin am-view-at() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-at;
-      animation: am-show-at 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms 1 both;
     }
   }
 
   &.hide,
   &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (5/10) (350ms + 100ms) * (5/10);
-    // transition: 100ms 350ms;
-    pointer-events: none;
-
     & > * {
       @extend %am-hide-at;
-      animation: am-hide-at 350ms 100ms both;
     }
   }
 
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-bind(am-show-at, am-hide-at);
 }
 
-// 全套引用
 [am-view='at'] {
-  &.show,
-  &[view='2'] {
-    & > * {
-      @extend %am-show-at;
-      animation: am-show-at 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms 1 both;
-    }
-  }
-
-  &.hide,
-  &[view='1'] {
-    opacity: 0;
-    transition: (350ms + 100ms) * (4 * 0.1) (350ms + 100ms) * (6 * 0.1);
-    pointer-events: none;
-
-    & > * {
-      @extend %am-hide-at;
-      animation: am-hide-at 350ms 100ms both;
-    }
-  }
-
-  &.none,
-  &[view='0'] {
-    display: none;
-  }
+  @include am-view-at();
 }

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

@@ -0,0 +1,36 @@
+// Shared Layer / am-view motion.
+// Never fade the overlay host: host opacity multiplies into the panel and flashes.
+$am-show-ease: cubic-bezier(0.22, 0.82, 0.24, 1);
+$am-hide-ease: cubic-bezier(0.4, 0, 0.2, 1);
+$am-show-time: 380ms;
+$am-hide-time: 280ms;
+
+@mixin am-view-bind(
+  $show-anim,
+  $hide-anim,
+  $show-time: $am-show-time,
+  $hide-time: $am-hide-time,
+  $show-ease: $am-show-ease,
+  $hide-ease: $am-hide-ease
+) {
+  &.show,
+  &[view='2'] {
+    & > * {
+      animation: $show-anim $show-time $show-ease both;
+    }
+  }
+
+  &.hide,
+  &[view='1'] {
+    pointer-events: none;
+
+    & > * {
+      animation: $hide-anim $hide-time $hide-ease both;
+    }
+  }
+
+  &.none,
+  &[view='0'] {
+    display: none;
+  }
+}

package/components/form/form@a/textarea.scss

@@ -11,17 +11,11 @@ size	       规定输入字段的宽度（以字符计）。
 step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
-@use 'sass:math';
 @use '../vars.scss' as *;
 
 [ui-form~='@a'] {
   &[ui-form~='type:textarea'] {
-    position: relative;
-    min-width: 2.5em;
-    line-height: 1.5em;
-    padding: 0.5em;
-    border-radius: 0.35em;
-    transition: all 0.5s;
+    @include textarea-structure(0.25em, 0.25em);
 
     // @include theme {
     border: 1px solid var(--co-case);
@@ -73,7 +67,7 @@ value	       规定输入字段的默认值。
     }
 
     &,
-    textarea {
+    > textarea {
       &:-webkit-autofill {
         box-shadow: 0 0 0 1000px var(--co-fore) inset;
         color: var(--co-read);
@@ -85,56 +79,5 @@ value	       规定输入字段的默认值。
       }
     }
 
-    textarea {
-      width: 100%;
-    }
-
-    &[ui-form~='disabled'] {
-      cursor: not-allowed;
-      opacity: 0.5;
-      textarea {
-        cursor: not-allowed;
-      }
-    }
-
-    &[ui-form~='readonly'] {
-      cursor: text;
-      textarea {
-        cursor: text;
-      }
-    }
-
-    &[ui-form~=':block'] {
-      display: flex;
-      width: 100%;
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-
-    &[ui-form~='preview'] {
-      &,
-      &:hover,
-      &:focus-within {
-        cursor: default;
-        border-color: transparent !important;
-        background-color: transparent !important;
-        box-shadow: none !important;
-      }
-
-      textarea {
-        cursor: default;
-      }
-    }
-
-    $sz_base: 1.5em;
-    @each $s in $form-sz {
-      &[ui-form~='sz:#{$s}'] {
-        textarea {
-          height: $sz_base;
-          min-height: $sz_base;
-        }
-      }
-      $sz_base: $sz_base + 0.5;
-    }
   }
 }

package/components/form/form@b/textarea.scss

@@ -11,17 +11,11 @@ size	       规定输入字段的宽度（以字符计）。
 step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
-@use 'sass:math';
 @use '../vars.scss' as *;
 
 [ui-form~='@b'] {
   &[ui-form~='type:textarea'] {
-    position: relative;
-    min-width: 2.5em;
-    line-height: 1.5em;
-    padding: 0.5em;
-    border-radius: 0.35em;
-    transition: all 0.5s;
+    @include textarea-structure(0, 0);
 
     border: 1px solid var(--co-case);
     background-color: var(--co-fore);
@@ -69,7 +63,7 @@ value	       规定输入字段的默认值。
     }
 
     &,
-    textarea {
+    > textarea {
       &:-webkit-autofill {
         box-shadow: 0 0 0 1000px var(--co-fore) inset;
         color: var(--co-read);
@@ -81,56 +75,5 @@ value	       规定输入字段的默认值。
       }
     }
 
-    textarea {
-      width: 100%;
-    }
-
-    &[ui-form~='disabled'] {
-      cursor: not-allowed;
-      opacity: 0.5;
-      textarea {
-        cursor: not-allowed;
-      }
-    }
-
-    &[ui-form~='readonly'] {
-      cursor: text;
-      textarea {
-        cursor: text;
-      }
-    }
-
-    &[ui-form~=':block'] {
-      display: flex;
-      width: 100%;
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-
-    &[ui-form~='preview'] {
-      &,
-      &:hover,
-      &:focus-within {
-        cursor: default;
-        border-color: transparent !important;
-        background-color: transparent !important;
-        box-shadow: none !important;
-      }
-
-      textarea {
-        cursor: default;
-      }
-    }
-
-    $sz_base: 1.5em;
-    @each $s in $form-sz {
-      &[ui-form~='sz:#{$s}'] {
-        textarea {
-          height: $sz_base;
-          min-height: $sz_base;
-        }
-      }
-      $sz_base: $sz_base + 0.5;
-    }
   }
 }