@neatui/css 3.0.0-beta.8 → 3.0.0

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

@@ -53,24 +53,24 @@
 }
 
 // 传参调用
-@mixin am-view-ar($time: 350ms, $delay: 100ms) {
+@mixin am-view-ar() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ar;
-      animation: am-show-ar $time $delay both;
+      animation: am-show-ar 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-ar;
-      animation: am-hide-ar $time $delay both;
+      animation: am-hide-ar 350ms 100ms both;
     }
   }
 
@@ -80,29 +80,25 @@
   }
 }
 
-// 动画时间
-$time: 350ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='ar'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-ar;
-      animation: am-show-ar $time $delay both;
+      animation: am-show-ar 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-ar;
-      animation: am-hide-ar $time $delay both;
+      animation: am-hide-ar 350ms 100ms both;
     }
   }
 

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

@@ -38,25 +38,25 @@
 }
 
 // 传参调用
-@mixin am-view-as($time: 250ms, $delay: 100ms) {
+@mixin am-view-as() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-as;
-      animation: am-show-as $time $delay both;
+      animation: am-show-as 350ms 100ms both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (5/10) ($time + $delay) * (5/10);
-    // transition: $delay $time;
+    transition: (350ms + 100ms) * (5/10) (350ms + 100ms) * (5/10);
+    // transition: 100ms 350ms;
     pointer-events: none;
 
     & > * {
       @extend %am-hide-as;
-      animation: am-hide-as $time $delay both;
+      animation: am-hide-as 350ms 100ms both;
     }
   }
 
@@ -66,29 +66,25 @@
   }
 }
 
-// 动画时间
-$time: 250ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='as'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-as;
-      animation: am-show-as $time $delay both;
+      animation: am-show-as 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-as;
-      animation: am-hide-as $time $delay both;
+      animation: am-hide-as 350ms 100ms both;
     }
   }
 

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

@@ -42,25 +42,25 @@
 }
 
 // 传参调用
-@mixin am-view-at($time: 250ms, $delay: 100ms) {
+@mixin am-view-at() {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-at;
-      animation: am-show-at $time cubic-bezier(0.25, 0.1, 0.25, 1) $delay 1 both;
+      animation: am-show-at 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms 1 both;
     }
   }
 
   &.hide,
   &[view='1'] {
     opacity: 0;
-    transition: ($time + $delay) * (5/10) ($time + $delay) * (5/10);
-    // transition: $delay $time;
+    transition: (350ms + 100ms) * (5/10) (350ms + 100ms) * (5/10);
+    // transition: 100ms 350ms;
     pointer-events: none;
 
     & > * {
       @extend %am-hide-at;
-      animation: am-hide-at $time $delay both;
+      animation: am-hide-at 350ms 100ms both;
     }
   }
 
@@ -70,29 +70,25 @@
   }
 }
 
-// 动画时间
-$time: 250ms;
-$delay: 100ms;
-
 // 全套引用
 [am-view='at'] {
   &.show,
   &[view='2'] {
     & > * {
       @extend %am-show-at;
-      animation: am-show-at $time cubic-bezier(0.25, 0.1, 0.25, 1) $delay 1 both;
+      animation: am-show-at 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms 1 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-at;
-      animation: am-hide-at $time $delay both;
+      animation: am-hide-at 350ms 100ms both;
     }
   }
 

package/components/anim/index.scss

@@ -0,0 +1,22 @@
+@forward './am-loading.scss';
+@forward './am-rotate.scss';
+@forward './am-view-aa.scss';
+@forward './am-view-ab.scss';
+@forward './am-view-ac.scss';
+@forward './am-view-ad.scss';
+@forward './am-view-ae.scss';
+@forward './am-view-af.scss';
+@forward './am-view-ag.scss';
+@forward './am-view-ah.scss';
+@forward './am-view-ai.scss';
+@forward './am-view-aj.scss';
+@forward './am-view-ak.scss';
+@forward './am-view-al.scss';
+@forward './am-view-am.scss';
+@forward './am-view-an.scss';
+@forward './am-view-ao.scss';
+@forward './am-view-ap.scss';
+@forward './am-view-aq.scss';
+@forward './am-view-ar.scss';
+@forward './am-view-as.scss';
+@forward './am-view-at.scss';

package/components/btns/base.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use './../../core/media.scss' as *;
+
 $size: 'xs', 's', 'm', 'l', 'xl';
 
 [ui-btn] {

package/components/btns/btns@a.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
-@import './base.scss';
+@forward './base.scss';
+@use './../../core/media.scss' as *;
 $size: xs, s, m, l, xl;
 $type: none, main, text, link, read, note, case, line, weak, back, info, well, warn, risk, w, b;
 

package/components/btns/index.scss

@@ -0,0 +1 @@
+@forward './btns@a.scss';

package/components/card/card@a.scss

@@ -1,5 +1,7 @@
-$co: 'none', 'main', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+// @use '../../core/media.scss' as *;
+
+$card_a_co: 'none', 'main', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$card_a_sz: 'xs', 's', 'm', 'l', 'xl';
 
 @mixin card_a($name: 'ui-card', $group: 0, $path: '') {
   &#{$path} {
@@ -116,7 +118,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
   }
 
-  @each $i in $co {
+  @each $i in $card_a_co {
     // 背景
     &[#{$name}~='bg:#{$i}']#{$path} {
       & > * {
@@ -156,18 +158,18 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 尺寸
-  $sz_base: 0.5em;
-  @each $i in $sz {
+  $card_a_sz_base: 0.5em;
+  @each $i in $card_a_sz {
     &[#{$name}~='sz:#{$i}']#{$path} {
       [ui-card-head],
       [ui-card-foot] {
-        padding: $sz_base ($sz_base + 0.5);
+        padding: $card_a_sz_base ($card_a_sz_base + 0.5);
       }
       [ui-card-body] {
-        padding: $sz_base ($sz_base + 0.5);
+        padding: $card_a_sz_base ($card_a_sz_base + 0.5);
       }
     }
-    $sz_base: $sz_base + 0.25;
+    $card_a_sz_base: $card_a_sz_base + 0.25;
   }
 }
 

package/components/card/card@b.scss

@@ -1,3 +1,5 @@
+@use '../../core/media.scss' as *;
+
 @mixin card_b($name) {
   position: relative;
 

package/components/card/index.scss

@@ -0,0 +1,2 @@
+@forward './card@a.scss';
+@forward './card@b.scss';

package/components/form/base.scss

@@ -1,3 +1,6 @@
+$form-co: 'main', 'info', 'well', 'warn', 'risk';
+$form-sz: 'xs', 's', 'm', 'l', 'xl';
+
 // 颜色
 $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'warn', 'risk';
 

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

@@ -1,6 +1,6 @@
 @use 'sass:math';
 // 全局共用
-@import '../base.scss';
+@forward '../base.scss';
 
 // 主题共用
 [ui-form~='@a'] {

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

@@ -12,7 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
+@use '../vars.scss' as *;
 
 [ui-form~='@a'] {
   // 复选框

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@a'] {
   &[ui-form~='type:date'] {
@@ -25,7 +25,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
       }

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

@@ -1,9 +1,9 @@
-@import './base.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './radio.scss';
-@import './checkbox.scss';
-@import './switch.scss';
-@import './select.scss';
-@import './date.scss';
-@import './upload.scss';
+@forward './base.scss';
+@forward './input.scss';
+@forward './textarea.scss';
+@forward './radio.scss';
+@forward './checkbox.scss';
+@forward './switch.scss';
+@forward './select.scss';
+@forward './date.scss';
+@forward './upload.scss';

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

@@ -12,8 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@a'] {
   &[ui-form~='type:input'] {
@@ -124,7 +123,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     // 颜色
-    @each $c in $cos {
+    @each $c in $form-co {
       &[ui-form~='co:#{$c}'] {
         & {
           // @include theme {
@@ -142,7 +141,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
         padding: 0 (($sz_base - 1) * 0.25);

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

@@ -12,7 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
+@use '../vars.scss' as *;
 
 // 动画
 @keyframes am-radio-a {

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@a'] {
   &[ui-form~='type:select'] {
@@ -108,7 +108,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
       }

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

@@ -12,7 +12,6 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
 
 @keyframes am-checked {
   0% {

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

@@ -12,8 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@a'] {
   &[ui-form~='type:textarea'] {
@@ -43,7 +42,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     // 颜色
-    @each $c in $co {
+    @each $c in $form-co {
       &[ui-form~='co:#{$c}'] {
         color: var(--co-#{$c}-text);
         box-shadow:

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

@@ -1,6 +1,6 @@
 @use 'sass:math';
 // 全局共用
-@import '../base.scss';
+@forward '../base.scss';
 
 // 主题共用
 [ui-form~='@b'] {

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

@@ -12,7 +12,6 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
 
 @keyframes am-b-checked {
   0% {

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@b'] {
   &[ui-form~='type:date'] {
@@ -46,7 +46,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
       }

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

@@ -1,9 +1,9 @@
-@import './base.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './radio.scss';
-@import './checkbox.scss';
-@import './switch.scss';
-@import './select.scss';
-@import './date.scss';
-@import './upload.scss';
+@forward './base.scss';
+@forward './input.scss';
+@forward './textarea.scss';
+@forward './radio.scss';
+@forward './checkbox.scss';
+@forward './switch.scss';
+@forward './select.scss';
+@forward './date.scss';
+@forward './upload.scss';

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

@@ -12,8 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@b'] {
   &[ui-form~='type:input'] {
@@ -102,7 +101,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     // 颜色
-    @each $c in $co {
+    @each $c in $form-co {
       &[ui-form~='co:#{$c}'] {
         color: var(--co-#{$c}-text);
         box-shadow:
@@ -131,7 +130,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
         padding: (($sz_base - 1) * 0.25) 0;

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

@@ -12,7 +12,6 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
 
 // 动画
 @keyframes am-b-radio {

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@b'] {
   &[ui-form~='type:select'] {
@@ -104,7 +104,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
       }

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

@@ -12,7 +12,6 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
 
 @keyframes am-checked {
   0% {

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

@@ -12,8 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@b'] {
   &[ui-form~='type:textarea'] {
@@ -39,7 +38,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     // 颜色
-    @each $c in $co {
+    @each $c in $form-co {
       &[ui-form~='co:#{$c}'] {
         color: var(--co-#{$c}-text);
         box-shadow:

package/components/form/form@c/base.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 // 全局共用
-@import '../base.scss';
+@forward '../base.scss';
 
 // 主题共用
 [ui-form~='@c'] {

package/components/form/form@c/checkbox.scss

@@ -12,7 +12,6 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'info', 'well', 'warn', 'risk';
 
 @keyframes am-checked {
   0% {

package/components/form/form@c/date.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@c'] {
   &[ui-form~='type:date'] {
@@ -107,7 +107,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
       }

package/components/form/form@c/index.scss

@@ -1,9 +1,9 @@
-@import './base.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './radio.scss';
-@import './checkbox.scss';
-@import './switch.scss';
-@import './select.scss';
-@import './date.scss';
-@import './upload.scss';
+@forward './base.scss';
+@forward './input.scss';
+@forward './textarea.scss';
+@forward './radio.scss';
+@forward './checkbox.scss';
+@forward './switch.scss';
+@forward './select.scss';
+@forward './date.scss';
+@forward './upload.scss';

package/components/form/form@c/input.scss

@@ -12,8 +12,7 @@ step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
 @use 'sass:math';
-$co: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@c'] {
   &[ui-form~='type:input'] {
@@ -101,7 +100,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     // 颜色
-    @each $c in $co {
+    @each $c in $form-co {
       &[ui-form~='co:#{$c}'] {
         color: var(--co-#{$c}-text);
         box-shadow:
@@ -133,7 +132,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     // 尺寸
     $sz_base: 1.5em;
-    @each $s in $sz {
+    @each $s in $form-sz {
       &[ui-form~='sz:#{$s}'] {
         height: $sz_base;
         padding: (($sz_base - 1) * 0.25);