@neatui/css 3.0.0-beta.9 → 3.0.1

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

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

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@c'] {
   &[ui-form~='type:select'] {
@@ -101,7 +101,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/switch.scss

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@d'] {
   &[ui-form~='type:date'] {
@@ -109,7 +109,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@d/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~='@d'] {
   &[ui-form~='type:input'] {
@@ -287,7 +286,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     // 颜色
-    @each $c in $co {
+    @each $c in $form-co {
       &[ui-form~='co:#{$c}'] {
         @include theme {
           color: var(--co-#{$c}-text);
@@ -325,7 +324,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@d/radio.scss

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

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@use '../vars.scss' as *;
 
 [ui-form~='@d'] {
   &[ui-form~='type:select'] {
@@ -103,7 +103,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@d/switch.scss

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

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

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

package/components/form/index.scss

@@ -0,0 +1,3 @@
+@forward './form@a';
+@forward './form@b';
+@forward './form@c';

package/components/form/vars.scss

@@ -0,0 +1,2 @@
+$form-co: 'main', 'info', 'well', 'warn', 'risk';
+$form-sz: 'xs', 's', 'm', 'l', 'xl';

package/components/icon/index.scss

@@ -0,0 +1,21 @@
+@forward './icon@add.scss';
+@forward './icon@close.scss';
+@forward './icon@down.scss';
+@forward './icon@except.scss';
+@forward './icon@hook.scss';
+@forward './icon@left.scss';
+@forward './icon@link.scss';
+@forward './icon@menu.scss';
+@forward './icon@minus.scss';
+@forward './icon@more.scss';
+@forward './icon@omit.scss';
+@forward './icon@refresh.scss';
+@forward './icon@right.scss';
+@forward './icon@search.scss';
+@forward './icon@time.scss';
+@forward './icon@top.scss';
+@forward './icon@view.scss';
+@forward './icon@drag.scss';
+@forward './icon@quit.scss';
+@forward './icon@upload.scss';
+@forward './icon@download.scss';

package/components/imgs/imgs@a.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import './base.scss';
+@forward './base.scss';
 
 @mixin imgs($n: 'ui-img', $sub: '') {
   [#{$n}~='@a'] {

package/components/imgs/index.scss

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

package/components/line/index.scss

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

package/components/list/index.scss

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

package/components/list/list@a.scss

@@ -1,4 +1,4 @@
-$type: 'main', 'read', 'info', 'well', 'warn', 'risk';
+$list-a-type: 'main', 'read', 'info', 'well', 'warn', 'risk';
 
 [ui-list~='@a'] {
   // 基础样式
@@ -47,7 +47,7 @@ $type: 'main', 'read', 'info', 'well', 'warn', 'risk';
   }
 
   // 主题颜色
-  @each $co in $type {
+  @each $co in $list-a-type {
     &[ui-list~='#{$co}'] {
       box-shadow:
         inset 0 0.3rem 0 0 var(--co-#{$co}),

package/components/list/list@b.scss

@@ -1,4 +1,4 @@
-$cos: 'main', 'read', 'info', 'well', 'warn', 'risk';
+$list-b-type: 'main', 'read', 'info', 'well', 'warn', 'risk';
 
 [ui-list~='@b'] {
   // 容器

package/components/load/index.scss

@@ -0,0 +1,8 @@
+@forward './load@a.scss';
+@forward './load@b.scss';
+@forward './load@c.scss';
+@forward './load@d.scss';
+@forward './load@e.scss';
+@forward './load@f.scss';
+@forward './load@g.scss';
+@forward './load@h.scss';

package/components/menu/index.scss

@@ -0,0 +1 @@
+@forward './menu@b.scss';

package/components/navs/index.scss

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

package/components/note/index.scss

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

package/components/note/note@a.scss

@@ -1,4 +1,4 @@
-$cos: 'main', 'well', 'warn', 'risk', 'info';
+$note-a-co: 'main', 'well', 'warn', 'risk', 'info';
 [ui-note~='@a'] {
   // 基础
   & {
@@ -11,7 +11,7 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
   }
 
   // 颜色
-  @each $co in $cos {
+  @each $co in $note-a-co {
     &[ui-note~='#{$co}'] {
       color: var(--co-#{$co});
       box-shadow: inset 0 0 0 1px var(--co-#{$co}-sl);

package/components/note/note@b.scss

@@ -1,4 +1,4 @@
-$co: 'main', 'well', 'warn', 'risk';
+$note-b-co: 'main', 'well', 'warn', 'risk';
 
 [ui-note~='@b'] {
   width: 100%;
@@ -9,7 +9,7 @@ $co: 'main', 'well', 'warn', 'risk';
   background: var(--co-read-ss);
   border-left: 2px solid var(--co-read);
 
-  @each $key in $co {
+  @each $key in $note-b-co {
     &[ui-note~='#{$key}'] {
       color: var(--co-#{$key});
       background: var(--co-#{$key}-ss);

package/components/opts/index.scss

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

package/components/path/index.scss

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

package/components/path/path@a.scss

@@ -1,3 +1,5 @@
+@use '../../core/media.scss' as *;
+
 [ui-path~='@a'] {
   & > * {
     display: inline-flex;

package/components/steps/index.scss

@@ -0,0 +1,2 @@
+@forward './steps@a.scss';
+@forward './steps@v.scss';

package/components/steps/steps@a.scss

@@ -1,7 +1,8 @@
-@import '../icon/icon@hook.scss';
-@import '../icon/icon@close.scss';
-$co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+@forward '../icon/icon@hook.scss';
+@forward '../icon/icon@close.scss';
+
+$steps-a-co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$steps-a-sz: 'xs', 's', 'm', 'l', 'xl';
 
 [ui-steps~='@a'] {
   & {

package/components/steps/steps@v.scss

@@ -1,9 +1,9 @@
-@import '../icon/icon@hook.scss';
-@import '../icon/icon@close.scss';
-@import '../icon/icon@more.scss';
+@forward '../icon/icon@hook.scss';
+@forward '../icon/icon@close.scss';
+@forward '../icon/icon@more.scss';
 
-$co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+$steps-v-co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$steps-v-sz: 'xs', 's', 'm', 'l', 'xl';
 
 [ui-steps~='@v'] {
   & {

package/components/table/index.scss

@@ -0,0 +1,3 @@
+@forward './table@a.scss';
+@forward './table@b.scss';
+@forward './table@c.scss';

package/components/table/table@b.scss

@@ -1,5 +1,5 @@
 // 主题
-@import './base.scss';
+@forward './base.scss';
 
 [ui-table~='@b'] {
   // 固定头部

package/components/table/table@c.scss

@@ -1,5 +1,5 @@
 // 主题
-@import './base.scss';
+@forward './base.scss';
 
 [ui-table~='@c'] {
   & {

package/components/tabs/index.scss

@@ -0,0 +1,3 @@
+@forward './tabs@a.scss';
+@forward './tabs@b.scss';
+@forward './tabs@c.scss';

package/components/tabs/tabs@a.scss

@@ -1,5 +1,5 @@
-$co: 'main', 'well', 'warn', 'risk', 'info';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+$tabs-a-co: 'main', 'well', 'warn', 'risk', 'info';
+$tabs-a-sz: 'xs', 's', 'm', 'l', 'xl';
 
 [ui-tabs~='@a'] {
   position: relative;
@@ -51,7 +51,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
   // 尺寸
   $base: 2em;
-  @each $i in $sz {
+  @each $i in $tabs-a-sz {
     // @debug $i;
     &[ui-tabs~='#{$i}'] {
       height: $base;

package/components/tabs/tabs@b.scss

@@ -1,5 +1,5 @@
-$co: 'main', 'well', 'warn', 'risk', 'info';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+$tabs-b-co: 'main', 'well', 'warn', 'risk', 'info';
+$tabs-b-sz: 'xs', 's', 'm', 'l', 'xl';
 
 [ui-tabs~='@b'] {
   position: relative;
@@ -46,7 +46,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
   // 尺寸
   $base: 1.5em;
-  @each $i in $sz {
+  @each $i in $tabs-b-sz {
     &[ui-tabs~='#{$i}'] {
       height: $base;
 

package/components/tabs/tabs@c.scss

@@ -1,5 +1,5 @@
-$co: 'main', 'well', 'warn', 'risk', 'info';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+$tabs-c-co: 'main', 'well', 'warn', 'risk', 'info';
+$tabs-c-sz: 'xs', 's', 'm', 'l', 'xl';
 
 [ui-tabs~='@c'] {
   position: relative;
@@ -46,7 +46,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
   // 尺寸
   $base: 1.5em;
-  @each $i in $sz {
+  @each $i in $tabs-c-sz {
     &[ui-tabs~='#{$i}'] {
       height: $base;
 

package/components/tags/index.scss

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

package/components/tags/tags@a.scss

@@ -1,5 +1,5 @@
-$state: 'main', 'well', 'warn', 'risk', 'info', 'read', 'note', 'idle';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+$tag-a-co: 'main', 'well', 'warn', 'risk', 'info', 'read', 'note', 'idle';
+$tag-a-sz: 'xs', 's', 'm', 'l', 'xl';
 
 // 单个
 [ui-tag~='@a'] {
@@ -25,7 +25,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     border-radius: 1em 0.2em 0.2em 1em;
   }
 
-  @each $co in $state {
+  @each $co in $tag-a-co {
     @if ($co== 'main') {
       &,
       &[ui-tag~='#{$co}'] {
@@ -92,7 +92,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 主题
-  @each $co in $state {
+  @each $co in $tag-a-co {
     @if ($co== 'main') {
       & > *,
       &[ui-tags~='#{$co}'] > * {

package/components/tags/tags@b.scss

@@ -1,5 +1,5 @@
-$state: 'main', 'well', 'warn', 'risk', 'info', 'read', 'note', 'idle';
-$sz: 'xs', 's', 'm', 'l', 'xl';
+$tag-b-co: 'main', 'well', 'warn', 'risk', 'info', 'read', 'note', 'idle';
+$tag-b-sz: 'xs', 's', 'm', 'l', 'xl';
 
 // 单个
 [ui-tag~='@b'] {
@@ -35,7 +35,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 颜色
-  @each $co in $state {
+  @each $co in $tag-b-co {
     @if ($co== 'main') {
       &,
       &[ui-tag~='#{$co}'] {
@@ -100,7 +100,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 主题
-  @each $co in $state {
+  @each $co in $tag-b-co {
     @if ($co== 'main') {
       & > *,
       &[ui-tags~='#{$co}'] > * {

package/components/tips/index.scss

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

package/components/tips/tips@a.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
+@forward './base.scss';
 
 [ui-tips~='@a'] {
   // 按钮

package/components/title/index.scss

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

package/core/{base.scss → basic.scss}

@@ -1,3 +1,5 @@
+@use './media.scss' as *;
+
 @mixin base($d: '') {
   // BASE
   .#{$d}full,

package/core/border.scss

@@ -1,3 +1,5 @@
+@use './media.scss' as *;
+
 .b-solid {
   border-style: solid;
 }
@@ -8,7 +10,7 @@
   border-style: dotted;
 }
 
-@mixin trim($media: '') {
+@mixin border($media: '') {
   .#{$media}b-no {
     border-width: 0px;
   }
@@ -294,14 +296,14 @@
 }
 
 // 桌面
-@include trim();
+@include border();
 
 // 平板
 @include pad {
-  @include trim('pad\\:');
+  @include border('pad\\:');
 }
 
 // 移动
 @include mob {
-  @include trim('mob\\:');
+  @include border('mob\\:');
 }

package/core/cols.scss

@@ -1,6 +1,6 @@
 @use 'sass:list';
 @use 'sass:math';
-
+@use './media.scss' as *;
 @mixin cols($cols: 24, $base: 160, $space: 1) {
   [ui-row] {
     & {

package/core/cover.scss

@@ -35,6 +35,12 @@ $sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
   &[ui-cover~='1:1'] {
     padding-top: 100%;
   }
+  &[ui-cover~='2:1'] {
+    padding-top: 50%;
+  }
+  &[ui-cover~='1:2'] {
+    padding-top: 200%;
+  }
   &[ui-cover~='4:3'] {
     padding-top: 75%;
   }

package/core/flex.scss

@@ -1,4 +1,4 @@
-// @use './media.scss' as *;
+@use './media.scss' as *;
 
 [ui-flex] {
   display: flex;