@neatui/css 3.11.0 → 3.13.0

package/core/basic.scss

@@ -1,4 +1,5 @@
 @use './media.scss' as *;
+@use './vars.scss' as *;
 
 @mixin base($d: '') {
   .#{$d}w-auto {
@@ -23,41 +24,29 @@
 
   // BASE
   .#{$d}full,
-  .#{$d}w-full,
-  .#{$d}full-sub > *,
-  .#{$d}w-full-sub > * {
+  .#{$d}w-full {
     width: 100%;
   }
   .#{$d}full,
-  .#{$d}h-full,
-  .#{$d}full-sub > *,
-  .#{$d}h-full-sub > * {
+  .#{$d}h-full {
     height: 100%;
   }
 
   .#{$d}min-full,
-  .#{$d}min-w-full,
-  .#{$d}min-full-sub > *,
-  .#{$d}min-w-full-sub > * {
+  .#{$d}min-w-full {
     min-width: 100%;
   }
   .#{$d}min-full,
-  .#{$d}min-h-full,
-  .#{$d}min-full-sub > *,
-  .#{$d}min-h-full-sub > * {
+  .#{$d}min-h-full {
     min-height: 100%;
   }
 
   .#{$d}max-full,
-  .#{$d}max-w-full,
-  .#{$d}max-full-sub > *,
-  .#{$d}max-w-full-sub > * {
+  .#{$d}max-w-full {
     max-width: 100%;
   }
   .#{$d}max-full,
-  .#{$d}max-h-full,
-  .#{$d}max-full-sub > *,
-  .#{$d}max-h-full-sub > * {
+  .#{$d}max-h-full {
     max-height: 100%;
   }
 
@@ -86,45 +75,19 @@
   }
 
   // 顶部对齐
-  .#{$d}vt,
-  .#{$d}vt-sub > * {
+  .#{$d}vt {
     vertical-align: top;
   }
   // 上下居中
-  .#{$d}vm,
-  .#{$d}vm-sub > * {
+  .#{$d}vm {
     vertical-align: middle;
   }
 
   // 底部对齐
-  .#{$d}vb,
-  .#{$d}vb-sub > * {
+  .#{$d}vb {
     vertical-align: bottom;
   }
 
-  // 横竖对齐
-  .#{$d}avc {
-    position: relative;
-    display: table;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    text-align: center;
-
-    & > * {
-      width: 100%;
-      height: 100%;
-      display: table-cell;
-      vertical-align: middle;
-
-      & > * {
-        display: inline-block;
-        text-align: left;
-      }
-    }
-  }
-
   /*定位*/
   .#{$d}pr,
   .#{$d}pr-sub > * {
@@ -143,32 +106,6 @@
     position: sticky;
   }
 
-  /*浮动*/
-  .#{$d}fl,
-  .#{$d}fl-sub > * {
-    float: left;
-  }
-  .#{$d}fr,
-  .#{$d}fr-sub > * {
-    float: right;
-  }
-  .#{$d}fn,
-  .#{$d}fn-sub > * {
-    float: none;
-  }
-
-  // 清除浮动
-  .#{$d}cb,
-  .#{$d}cb-sub > * {
-    clear: both;
-
-    &:after {
-      display: table;
-      content: '';
-      clear: both;
-    }
-  }
-
   // 字体粗细
   .#{$d}bold {
     font-weight: bold;
@@ -182,16 +119,6 @@
         -moz-osx-font-smoothing: auto;
       }
     }
-
-    // 宽度
-    .#{$d}w#{$i*10} {
-      width: $i * 10%;
-    }
-
-    // 缩小
-    .#{$d}sr#{$i} {
-      transform: scale(#{calc($i / 10)});
-    }
   }
   .#{$d}fw0 {
     font-weight: normal;
@@ -209,9 +136,7 @@
   }
 
   // 块级
-  .#{$d}b,
   .#{$d}block,
-  .#{$d}b-sub > *,
   .#{$d}block-sub > * {
     display: block;
   }
@@ -221,21 +146,15 @@
   .#{$d}inline-block-sub > * {
     display: inline-block;
   }
-  .#{$d}df,
   .#{$d}flex,
-  .#{$d}df-sub > *,
   .#{$d}flex-sub > * {
     display: flex;
   }
-  .#{$d}dif,
   .#{$d}inline-flex,
-  .#{$d}dif-sub > *,
   .#{$d}inline-flex-sub > * {
     display: inline-flex;
   }
-  .#{$d}di,
   .#{$d}inline,
-  .#{$d}di-sub > *,
   .#{$d}inline-sub > * {
     display: inline;
   }
@@ -257,128 +176,6 @@
     white-space: nowrap;
   }
 
-  // 是否穿透
-  .#{$d}pe-auto {
-    pointer-events: auto;
-  }
-  .#{$d}pe-none {
-    pointer-events: none;
-  }
-
-  // 图层层级
-  .#{$d}z-no {
-    z-index: 0;
-  }
-  .#{$d}z-ss {
-    z-index: 1;
-  }
-  .#{$d}z-sm {
-    z-index: 2;
-  }
-  .#{$d}z-sl {
-    z-index: 3;
-  }
-  .#{$d}z-ms {
-    z-index: 4;
-  }
-  .#{$d}z-mm {
-    z-index: 5;
-  }
-  .#{$d}z-ml {
-    z-index: 6;
-  }
-  .#{$d}z-ls {
-    z-index: 7;
-  }
-  .#{$d}z-lm {
-    z-index: 8;
-  }
-  .#{$d}z-ll {
-    z-index: 9;
-  }
-
-  // 不透明度
-  .#{$d}o-no,
-  .#{$d}o-no\:hover:hover {
-    opacity: 0;
-  }
-  .#{$d}o-xs,
-  .#{$d}o-xs\:hover:hover {
-    opacity: 0.05;
-  }
-  .#{$d}o-ss,
-  .#{$d}o-ss\:hover:hover {
-    opacity: 0.1;
-  }
-  .#{$d}o-sm,
-  .#{$d}o-sm\:hover:hover {
-    opacity: 0.2;
-  }
-  .#{$d}o-sl,
-  .#{$d}o-sl\:hover:hover {
-    opacity: 0.3;
-  }
-  .#{$d}o-ms,
-  .#{$d}o-ms\:hover:hover {
-    opacity: 0.4;
-  }
-  .#{$d}o-mm,
-  .#{$d}o-mm\:hover:hover {
-    opacity: 0.5;
-  }
-  .#{$d}o-ml,
-  .#{$d}o-ml\:hover:hover {
-    opacity: 0.6;
-  }
-  .#{$d}o-ls,
-  .#{$d}o-ls\:hover:hover {
-    opacity: 0.7;
-  }
-  .#{$d}o-lm,
-  .#{$d}o-lm\:hover:hover {
-    opacity: 0.8;
-  }
-  .#{$d}o-ll,
-  .#{$d}o-ll\:hover:hover {
-    opacity: 0.9;
-  }
-  .#{$d}o-xl,
-  .#{$d}o-xl\:hover:hover {
-    opacity: 0.95;
-  }
-  .#{$d}o-xx,
-  .#{$d}o-xx\:hover:hover {
-    opacity: 1;
-  }
-
-  .#{$d}o-ss\+mm {
-    opacity: 0.15;
-  }
-  .#{$d}o-sm\+mm {
-    opacity: 0.25;
-  }
-  .#{$d}o-sl\+mm {
-    opacity: 0.35;
-  }
-  .#{$d}o-ms\+mm {
-    opacity: 0.45;
-  }
-  .#{$d}o-mm\+mm {
-    opacity: 0.55;
-  }
-  .#{$d}o-ml\+mm {
-    opacity: 0.65;
-  }
-  .#{$d}o-ls\+mm {
-    opacity: 0.75;
-  }
-  .#{$d}o-lm\+mm {
-    opacity: 0.85;
-  }
-  .#{$d}o-ll\+mm {
-    opacity: 0.95;
-  }
-
   .#{$d}upper {
     text-transform: uppercase;
   }
@@ -413,14 +210,13 @@ code,
     width: 100%;
     height: 100%;
   }
-}
 
-[layout='full'] {
   .box {
     width: 100%;
     max-width: 100%;
   }
 }
+
 // 容器
 .box,
 .box-base {
@@ -436,7 +232,7 @@ code,
 }
 .box-wide,
 [layout='wide'] .box {
-  width: 94%;
+  width: 92%;
   max-width: 100%;
 }
 .box-auto,
@@ -467,11 +263,11 @@ code,
 }
 
 // 文档
-.doc {
-  p {
-    margin-bottom: 1rem;
-  }
-}
+// .doc {
+//   p {
+//     margin-bottom: 1em;
+//   }
+// }
 
 .bk {
   &-solid {
@@ -497,79 +293,34 @@ code,
 [ui-omit]:not([ui-omit~='1']) {
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line);
 }
 [ui-omit~='1'] {
   white-space: nowrap;
 }
 [ui-omit~='2'] {
-  -webkit-line-clamp: 2;
+  --line: 2;
 }
 [ui-omit~='3'] {
-  -webkit-line-clamp: 3;
+  --line: 3;
 }
 [ui-omit~='4'] {
-  -webkit-line-clamp: 4;
+  --line: 4;
 }
 [ui-omit~='5'] {
-  -webkit-line-clamp: 5;
+  --line: 5;
 }
 [ui-omit~='6'] {
-  -webkit-line-clamp: 6;
+  --line: 6;
 }
 [ui-omit~='7'] {
-  -webkit-line-clamp: 7;
+  --line: 7;
 }
 [ui-omit~='8'] {
-  -webkit-line-clamp: 8;
+  --line: 8;
 }
 [ui-omit~='9'] {
-  -webkit-line-clamp: 9;
-}
-// 等分
-.ew1,
-.ew1-sub > *,
-.ew1-sun > * > * {
-  width: 100%;
-}
-.ew2,
-.ew2-sub > *,
-.ew2-sun > * > * {
-  width: 50%;
-}
-.ew3,
-.ew3-sub > *,
-.ew3-sun > * > * {
-  width: 33.333333%;
-}
-.ew4,
-.ew4-sub > *,
-.ew4-sun > * > * {
-  width: 25%;
-}
-.ew5,
-.ew5-sub > *,
-.ew5-sun > * > * {
-  width: 20%;
-}
-.ew6,
-.ew6-sub > *,
-.ew6-sun > * > * {
-  width: 16.666666%;
-}
-.ew7,
-.ew7-sub > *,
-.ew7-sun > * > * {
-  width: 14.285714%;
-}
-.ew8,
-.ew8-sub > *,
-.ew8-sun > * > * {
-  width: 12.5%;
-}
-.ew9,
-.ew9-sub > *,
-.ew9-sun > * > * {
-  width: 11.111111%;
+  --line: 9;
 }
 
 // 符号与单位
@@ -596,3 +347,27 @@ code,
   width: 1em;
   height: 1em;
 }
+
+// 图层层级
+$zv: 0;
+@each $i in $grades {
+  .z-#{$i},
+  .z-#{$i}\:hover:hover {
+    z-index: $zv;
+  }
+  $zv: $zv + 1;
+}
+
+// 不透明度
+$ov: 0;
+@each $i in $grades {
+  .o-#{$i},
+  .o-#{$i}\:hover:hover {
+    opacity: $ov;
+  }
+  @if $ov < 0.1 or $ov >= 0.9 {
+    $ov: $ov + 0.05;
+  } @else {
+    $ov: $ov + 0.1;
+  }
+}

package/core/border.scss

@@ -1,4 +1,5 @@
 @use './media.scss' as *;
+@use './vars.scss' as *;
 
 .b-solid {
   border-style: solid;
@@ -11,287 +12,37 @@
 }
 
 @mixin border($media: '') {
-  .#{$media}b-no {
-    border-width: 0px;
-  }
-  .#{$media}b-xs {
-    border-width: 1px;
-  }
-  .#{$media}b-ss {
-    border-width: 2px;
-  }
-  .#{$media}b-sm {
-    border-width: 3px;
-  }
-  .#{$media}b-sl {
-    border-width: 4px;
-  }
-  .#{$media}b-ms {
-    border-width: 5px;
-  }
-  .#{$media}b-mm {
-    border-width: 0.5rem;
-  }
-  .#{$media}b-ml {
-    border-width: 0.6rem;
-  }
-  .#{$media}b-ls {
-    border-width: 0.7rem;
-  }
-  .#{$media}b-lm {
-    border-width: 0.8rem;
-  }
-  .#{$media}b-ll {
-    border-width: 0.9rem;
-  }
-  .#{$media}b-xl {
-    border-width: 1rem;
-  }
-
-  .#{$media}bx-no {
-    border-left-width: 0px;
-    border-right-width: 0px;
-  }
-  .#{$media}bx-xs {
-    border-left-width: 1px;
-    border-right-width: 1px;
-  }
-  .#{$media}bx-ss {
-    border-left-width: 2px;
-    border-right-width: 2px;
-  }
-  .#{$media}bx-sm {
-    border-left-width: 3px;
-    border-right-width: 3px;
-  }
-  .#{$media}bx-sl {
-    border-left-width: 4px;
-    border-right-width: 4px;
-  }
-  .#{$media}bx-ms {
-    border-left-width: 5px;
-    border-right-width: 5px;
-  }
-  .#{$media}bx-mm {
-    border-left-width: 0.5rem;
-    border-right-width: 0.5rem;
-  }
-  .#{$media}bx-ml {
-    border-left-width: 0.6rem;
-    border-right-width: 0.6rem;
-  }
-  .#{$media}bx-ls {
-    border-left-width: 0.7rem;
-    border-right-width: 0.7rem;
-  }
-  .#{$media}bx-lm {
-    border-left-width: 0.8rem;
-    border-right-width: 0.8rem;
-  }
-  .#{$media}bx-ll {
-    border-left-width: 0.9rem;
-    border-right-width: 0.9rem;
-  }
-  .#{$media}bx-xl {
-    border-left-width: 1rem;
-    border-right-width: 1rem;
-  }
-
-  .#{$media}by-no {
-    border-top-width: 0px;
-    border-bottom-width: 0px;
-  }
-  .#{$media}by-xs {
-    border-top-width: 1px;
-    border-bottom-width: 1px;
-  }
-  .#{$media}by-ss {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-  .#{$media}by-sm {
-    border-top-width: 3px;
-    border-bottom-width: 3px;
-  }
-  .#{$media}by-sl {
-    border-top-width: 4px;
-    border-bottom-width: 4px;
-  }
-  .#{$media}by-ms {
-    border-top-width: 5px;
-    border-bottom-width: 5px;
-  }
-  .#{$media}by-mm {
-    border-top-width: 0.5rem;
-    border-bottom-width: 0.5rem;
-  }
-  .#{$media}by-ml {
-    border-top-width: 0.6rem;
-    border-bottom-width: 0.6rem;
-  }
-  .#{$media}by-ls {
-    border-top-width: 0.7rem;
-    border-bottom-width: 0.7rem;
-  }
-  .#{$media}by-lm {
-    border-top-width: 0.8rem;
-    border-bottom-width: 0.8rem;
-  }
-  .#{$media}by-ll {
-    border-top-width: 0.9rem;
-    border-bottom-width: 0.9rem;
-  }
-  .#{$media}by-xl {
-    border-top-width: 1rem;
-    border-bottom-width: 1rem;
-  }
-
-  .#{$media}bt-no {
-    border-top-width: 0px;
-  }
-  .#{$media}bt-xs {
-    border-top-width: 1px;
-  }
-  .#{$media}bt-ss {
-    border-top-width: 2px;
-  }
-  .#{$media}bt-sm {
-    border-top-width: 3px;
-  }
-  .#{$media}bt-sl {
-    border-top-width: 4px;
-  }
-  .#{$media}bt-ms {
-    border-top-width: 5px;
-  }
-  .#{$media}bt-mm {
-    border-top-width: 0.5rem;
-  }
-  .#{$media}bt-ml {
-    border-top-width: 0.6rem;
-  }
-  .#{$media}bt-ls {
-    border-top-width: 0.7rem;
-  }
-  .#{$media}bt-lm {
-    border-top-width: 0.8rem;
-  }
-  .#{$media}bt-ll {
-    border-top-width: 0.9rem;
-  }
-  .#{$media}bt-xl {
-    border-top-width: 1rem;
-  }
-
-  .#{$media}br-no {
-    border-right-width: 0px;
-  }
-  .#{$media}br-xs {
-    border-right-width: 1px;
-  }
-  .#{$media}br-ss {
-    border-right-width: 2px;
-  }
-  .#{$media}br-sm {
-    border-right-width: 3px;
-  }
-  .#{$media}br-sl {
-    border-right-width: 4px;
-  }
-  .#{$media}br-ms {
-    border-right-width: 5px;
-  }
-  .#{$media}br-mm {
-    border-right-width: 0.5rem;
-  }
-  .#{$media}br-ml {
-    border-right-width: 0.6rem;
-  }
-  .#{$media}br-ls {
-    border-right-width: 0.7rem;
-  }
-  .#{$media}br-lm {
-    border-right-width: 0.8rem;
-  }
-  .#{$media}br-ll {
-    border-right-width: 0.9rem;
-  }
-  .#{$media}br-xl {
-    border-right-width: 1rem;
-  }
-
-  .#{$media}bb-no {
-    border-bottom-width: 0px;
-  }
-  .#{$media}bb-xs {
-    border-bottom-width: 1px;
-  }
-  .#{$media}bb-ss {
-    border-bottom-width: 2px;
-  }
-  .#{$media}bb-sm {
-    border-bottom-width: 3px;
-  }
-  .#{$media}bb-sl {
-    border-bottom-width: 4px;
-  }
-  .#{$media}bb-ms {
-    border-bottom-width: 5px;
-  }
-  .#{$media}bb-mm {
-    border-bottom-width: 0.5rem;
-  }
-  .#{$media}bb-ml {
-    border-bottom-width: 0.6rem;
-  }
-  .#{$media}bb-ls {
-    border-bottom-width: 0.7rem;
-  }
-  .#{$media}bb-lm {
-    border-bottom-width: 0.8rem;
-  }
-  .#{$media}bb-ll {
-    border-bottom-width: 0.9rem;
-  }
-  .#{$media}bb-xl {
-    border-bottom-width: 1rem;
-  }
-
-  .#{$media}bl-no {
-    border-left-width: 0px;
-  }
-  .#{$media}bl-xs {
-    border-left-width: 1px;
-  }
-  .#{$media}bl-ss {
-    border-left-width: 2px;
-  }
-  .#{$media}bl-sm {
-    border-left-width: 3px;
-  }
-  .#{$media}bl-sl {
-    border-left-width: 4px;
-  }
-  .#{$media}bl-ms {
-    border-left-width: 5px;
-  }
-  .#{$media}bl-mm {
-    border-left-width: 0.5rem;
-  }
-  .#{$media}bl-ml {
-    border-left-width: 0.6rem;
-  }
-  .#{$media}bl-ls {
-    border-left-width: 0.7rem;
-  }
-  .#{$media}bl-lm {
-    border-left-width: 0.8rem;
-  }
-  .#{$media}bl-ll {
-    border-left-width: 0.9rem;
-  }
-  .#{$media}bl-xl {
-    border-left-width: 1rem;
+  // 第1层：四个方向（优先级最低）
+  $bv: 0;
+  @each $i in $grades {
+    .#{$media}b-#{$i} {
+      border-width: #{$bv}px;
+    }
+    $bv: $bv + 1;
+  }
+
+  // 第2层：双方向（中等优先级）
+  $bv: 0;
+  @each $i in $grades {
+    .#{$media}bx-#{$i} {
+      border-left-width: #{$bv}px;
+      border-right-width: #{$bv}px;
+    }
+    .#{$media}by-#{$i} {
+      border-top-width: #{$bv}px;
+      border-bottom-width: #{$bv}px;
+    }
+    $bv: $bv + 1;
+  }
+
+  // 第3层：单方向（优先级最高）
+  $bv: 0;
+  @each $i in $grades {
+    .#{$media}bt-#{$i} { border-top-width: #{$bv}px; }
+    .#{$media}br-#{$i} { border-right-width: #{$bv}px; }
+    .#{$media}bb-#{$i} { border-bottom-width: #{$bv}px; }
+    .#{$media}bl-#{$i} { border-left-width: #{$bv}px; }
+    $bv: $bv + 1;
   }
 }
 

package/core/cols.scss

@@ -47,39 +47,6 @@
     }
   }
 
-  // 两种模块 普通模式和flex模式，普通模式废弃！
-  // [ui-row~='float'] {
-  //   & {
-  //     display: block;
-  //   }
-
-  //   // 清除浮动
-  //   &::after {
-  //     content: '';
-  //     display: table;
-  //     clear: both;
-  //   }
-
-  //   & > * {
-  //     position: relative;
-  //     height:100%;
-  //   }
-
-  //   // 向左浮动（默认）
-  //   & > *,
-  //   &[ui-row~='fl'] > * {
-  //     float: left;
-  //   }
-  //   // 向右浮动
-  //   &[ui-row~='fr'] > * {
-  //     float: right;
-  //   }
-  //   // 不要浮动
-  //   &[ui-row~='fn'] > * {
-  //     float: none !important;
-  //   }
-  // }
-
   // 表格使用栅格
   tr[ui-row] {
     display: table-row;

package/core/cover.scss

@@ -1,8 +1,8 @@
 $sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
 
 [ui-cover] {
+  display: block;
   position: relative;
-  // width: 100%;
   height: 0;
   box-sizing: content-box;
   padding-top: 100%;
@@ -73,7 +73,6 @@ $sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
   }
 }
 
-$base_br: 0;
 $base_max: 100%;
 $base_min: 100%;
 @each $s in $sz {
@@ -88,13 +87,4 @@ $base_min: 100%;
     padding-top: $base_min;
   }
   $base_min: ($base_min - 5);
-
-  // 圆角
-  // [ui-cover~='br:#{$s}'] {
-  //   border-radius: #{$base_br}em;
-  //   & > * {
-  //     border-radius: #{$base_br * 0.5}em;
-  //   }
-  // }
-  $base_br: $base_br + 0.1;
 }

package/core/reset.scss

@@ -32,10 +32,7 @@ ul {
 }
 
 body {
-  font-family:
-    PingFang SC,
-    Microsoft YaHei,
-    sans-serif;
+  font-family: PingFang SC, Microsoft YaHei, sans-serif;
   line-height: 1.75;
 
   &.sharp {
@@ -68,9 +65,7 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  transition:
-    background-color 1s 500000s,
-    color 1s 500000s;
+  transition: background-color 1s 500000s, color 1s 500000s;
 }
 html input:-internal-autofill-selected {
   background-color: transparent !important;
@@ -85,12 +80,8 @@ option,
 label,
 fieldset,
 legend {
-  font-family: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  font-size: inherit;
+  font: inherit;
   color: inherit;
-  line-height: inherit;
 }
 
 h1,
@@ -161,7 +152,7 @@ sup {
 @media screen and (max-width: 1024px) {
   * {
     -webkit-touch-callout: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
   }
 }
 

package/core/theme.scss

@@ -142,10 +142,10 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
             // @TODO 最新版本规划
             --co-#{$k}-o-#{$l}: #{rgba($v, $ls)};
 
-            // @if not list.index($exclude-keys, $k) {
-            --co-#{$k}-w-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
-            --co-#{$k}-b-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
-            // }
+            @if not list.index($exclude-keys, $k) {
+              --co-#{$k}-w-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
+              --co-#{$k}-b-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
+            }
           }
 
           @if ($ls == 0.035) {
@@ -218,40 +218,62 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
     @each $i in $levels {
       .co-#{$n}-o-#{$i},
       .co-#{$n}-o-#{$i}\:hover:hover,
-      .co-#{$n}-o-#{$i}\:active:active,
-      .co-#{$n}-w-#{$i},
-      .co-#{$n}-w-#{$i}\:hover:hover,
-      .co-#{$n}-w-#{$i}\:active:active,
-      .co-#{$n}-b-#{$i},
-      .co-#{$n}-b-#{$i}\:hover:hover,
-      .co-#{$n}-b-#{$i}\:active:active {
+      .co-#{$n}-o-#{$i}\:active:active {
         color: var(--co-#{$n}-o-#{$i}) !important;
         fill: var(--co-#{$n}-o-#{$i}) !important;
       }
 
       .bg-#{$n}-o-#{$i},
       .bg-#{$n}-o-#{$i}\:hover:hover,
-      .bg-#{$n}-o-#{$i}\:active:active,
-      .bg-#{$n}-w-#{$i},
-      .bg-#{$n}-w-#{$i}\:hover:hover,
-      .bg-#{$n}-w-#{$i}\:active:active,
-      .bg-#{$n}-b-#{$i},
-      .bg-#{$n}-b-#{$i}\:hover:hover,
-      .bg-#{$n}-b-#{$i}\:active:active {
+      .bg-#{$n}-o-#{$i}\:active:active {
         background-color: var(--co-#{$n}-o-#{$i}) !important;
       }
 
       .bk-#{$n}-o-#{$i},
       .bk-#{$n}-o-#{$i}\:hover:hover,
-      .bk-#{$n}-o-#{$i}\:active:active,
-      .bk-#{$n}-w-#{$i},
-      .bk-#{$n}-w-#{$i}\:hover:hover,
-      .bk-#{$n}-w-#{$i}\:active:active,
-      .bk-#{$n}-b-#{$i},
-      .bk-#{$n}-b-#{$i}\:hover:hover,
-      .bk-#{$n}-b-#{$i}\:active:active {
+      .bk-#{$n}-o-#{$i}\:active:active {
         border-color: var(--co-#{$n}-o-#{$i}) !important;
       }
+
+      @if not list.index($exclude-keys, $n) {
+        .co-#{$n}-w-#{$i},
+        .co-#{$n}-w-#{$i}\:hover:hover,
+        .co-#{$n}-w-#{$i}\:active:active {
+          color: var(--co-#{$n}-w-#{$i}) !important;
+          fill: var(--co-#{$n}-w-#{$i}) !important;
+        }
+
+        .co-#{$n}-b-#{$i},
+        .co-#{$n}-b-#{$i}\:hover:hover,
+        .co-#{$n}-b-#{$i}\:active:active {
+          color: var(--co-#{$n}-b-#{$i}) !important;
+          fill: var(--co-#{$n}-b-#{$i}) !important;
+        }
+
+        .bg-#{$n}-w-#{$i},
+        .bg-#{$n}-w-#{$i}\:hover:hover,
+        .bg-#{$n}-w-#{$i}\:active:active {
+          background-color: var(--co-#{$n}-w-#{$i}) !important;
+        }
+
+        .bg-#{$n}-b-#{$i},
+        .bg-#{$n}-b-#{$i}\:hover:hover,
+        .bg-#{$n}-b-#{$i}\:active:active {
+          background-color: var(--co-#{$n}-b-#{$i}) !important;
+        }
+
+        .bk-#{$n}-w-#{$i},
+        .bk-#{$n}-w-#{$i}\:hover:hover,
+        .bk-#{$n}-w-#{$i}\:active:active {
+          border-color: var(--co-#{$n}-w-#{$i}) !important;
+        }
+
+        .bk-#{$n}-b-#{$i},
+        .bk-#{$n}-b-#{$i}\:hover:hover,
+        .bk-#{$n}-b-#{$i}\:active:active {
+          border-color: var(--co-#{$n}-b-#{$i}) !important;
+        }
+      }
     }
   }
 }

package/core/vars.scss

@@ -1 +1,2 @@
-$sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
+// 分级
+$grades: no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl, xx;

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "@neatui/css",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",
   "author": "xiaojunbo",
+  "scripts": {
+    "build": "yarn build:scss && yarn build:optimize && yarn build:minify",
+    "build:scss": "sass neatui.scss dist/neatui.css --no-source-map",
+    "build:optimize": "postcss dist/neatui.css -o dist/neatui.css --no-map",
+    "build:minify": "cleancss -o dist/neatui.min.css dist/neatui.css"
+  },
   "peerDependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "sass": "^1.80.7",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "postcss-merge-rules": "^7.0.4",
+    "cssnano": "^7.0.6",
+    "clean-css-cli": "^5.6.3"
+  },
   "dependencies": {}
 }

package/postcss.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  plugins: [
+    require('cssnano')({
+      preset: ['default', {
+        mergeLonghand: true,
+        mergeRules: true,
+        discardComments: {
+          removeAll: false
+        },
+        normalizeWhitespace: false,
+        colormin: true,
+        minifySelectors: true,
+        minifyParams: true,
+        uniqueSelectors: true,
+        reduceIdents: false,
+        discardUnused: false
+      }]
+    })
+  ]
+};

package/core/cols@v2.scss

@@ -1,128 +0,0 @@
-@use 'sass:list';
-@use 'sass:math';
-
-@mixin cols($cols: 24, $base: 160, $space: 1) {
-  $level: (
-    mob-s: 320px,
-    mob-m: 480px,
-    mob-l: 640px,
-    pad-s: 800px,
-    pad-m: 960px,
-    pad-l: 1120px,
-    dpc-s: 1280px,
-    dpc-m: 1440px,
-    dpc-l: 1600px
-  );
-
-  [ui-row] {
-    & {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      & > * {
-        position: relative;
-      }
-    }
-
-    // 间距
-    &[ui-row~='space'] {
-      margin: -1rem;
-      & > * {
-        padding: 1rem;
-      }
-    }
-
-    @include mob {
-      // 间距
-      &[ui-row~='space'] {
-        margin: -0.5rem;
-        & > * {
-          padding: 0.5rem;
-        }
-      }
-    }
-
-    // 撑满
-    &[ui-row~=':full'] {
-      & > * > * {
-        height: 100%;
-      }
-    }
-
-    // 用于容器需要居中对齐
-    &[ui-row~='inline'] {
-      display: inline-flex;
-    }
-    // 反向
-    &[ui-row~='reverse'] {
-      flex-direction: row-reverse;
-    }
-  }
-
-  // 表格使用栅格
-  tr[ui-row] {
-    display: table-row;
-  }
-  td,
-  th {
-    &[ui-col] {
-      display: table-cell;
-    }
-  }
-
-  // 响应断点
-  $level: 'mob-s', 'mob-m', 'mob-l', 'pad-s', 'pad-m', 'pad-l', 'dpc-s', 'dpc-m', 'dpc-l';
-  $level2: 'mob', '', '', 'pad', '', '', 'dpc', '', '';
-
-  @each $i in $level {
-    $d: list.nth($level2, list.index($level, $i));
-    // 遍历断点
-    $base: $base + 160;
-    // 基础
-    @if ($i == 'mob-s') {
-      @for $n from 0 through $cols {
-        // 宽度
-        $w: calc(math.floor(calc(100% / $cols * $n) * 100000) / 100000);
-        [ui-row~='mob-#{$n}'] > *,
-        [ui-row~='#{$i}-#{$n}'] > *,
-        [ui-row] [ui-col~='mob-#{$n}'],
-        [ui-row] [ui-col~='#{$i}-#{$n}'] {
-          width: #{$w};
-        }
-      }
-    } @else {
-      @media (min-width: #{$base}px) {
-        @for $n from 0 through $cols {
-          // 宽度
-          $w: calc((math.floor((calc(100% / $cols) * $n) * 100000) / 100000));
-          @if ($d != '') {
-            // 三端
-            [ui-row~='#{$d}-#{$n}'] > *,
-           [ui-row] [ui-col~='#{$d}-#{$n}'],
-            // 细分三端
-            [ui-row~='#{$i}-#{$n}'] > *,
-           [ui-row] [ui-col~='#{$i}-#{$n}'] {
-              width: #{$w};
-            }
-          } @else {
-            [ui-row~='#{$i}-#{$n}'] > *,
-            [ui-row] [ui-col~='#{$i}-#{$n}'] {
-              width: #{$w};
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // 自动
-  [ui-row~='mob-auto'],
-  [ui-row~='pad-auto'],
-  [ui-row~='dpc-auto'] {
-    justify-content: space-between;
-    & > * {
-      flex-grow: 1;
-    }
-  }
-}
-@include cols();

package/core/size.mobile.scss

@@ -1,105 +0,0 @@
-/*
- * 模块：字号
- * 模块类型：b(基础模块)
- * 精度：9 +
- * 分级：3 +
- * 适配：桌面 | 平析 | 移动
- * 兼容：
- * 版本：v0.0.1
- * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
- */
-
-// 全局字号
-// @mixin baseSize($sz: 13) {
-//   $size: 'xs', 's', 'm', 'l', 'xl';
-
-//   @each $i in $size {
-//     [size='#{$i}'],
-//     [ui-size='#{$i}'] {
-//       $s: index($size, $i) + $sz;
-//       font-size: #{$s}px;
-//     }
-//   }
-// }
-
-// 分级字号
-@mixin randSize($d: '') {
-  $rank: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
-  // 分级字号
-  .#{$d}fs-no {
-    font-size: 0rem;
-  }
-  .#{$d}lh-no {
-    line-height: 0;
-  }
-
-  $sz: 0.2;
-
-  @each $k in $rank {
-    .#{$d}lh-#{$k} {
-      line-height: #{$sz * 5};
-    }
-
-    @if ($sz<0.2) {
-      $sz: $sz + 0.01;
-    } @else if ($sz<.28) {
-      $sz: $sz + 0.02;
-    } @else if($sz<.4) {
-      $sz: $sz + 0.04;
-    } @else if($sz<.6) {
-      $sz: $sz + 0.06;
-    } @else {
-      $sz: $sz + 0.08;
-    }
-
-    .#{$d}fs-#{$k},
-    .#{$d}fs-#{$k}-sub > *,
-    .#{$d}fs-#{$k}-sub\:sta > *::before,
-    .#{$d}fs-#{$k}-sub\:end > *::after,
-    .#{$d}fs-#{$k}\:sta::before,
-    .#{$d}fs-#{$k}\:end::after {
-      font-size: #{$sz}rem;
-    }
-  }
-
-  // 标题
-  $hsz: 1;
-
-  h1,
-  .h1 {
-    font-size: 2em;
-  }
-  h2,
-  .h2 {
-    font-size: 1.6em;
-  }
-  h3,
-  .h3 {
-    font-size: 1.4em;
-  }
-  h4,
-  .h4 {
-    font-size: 1.2em;
-  }
-  h5,
-  .h5 {
-    font-size: 1.1em;
-  }
-  h6,
-  .h6 {
-    font-size: 1em;
-  }
-}
-
-// 桌面
-@include randSize();
-
-// 平板
-@media screen and (max-width: 1024px) {
-  @include randSize('pad\\:');
-}
-
-// 移动
-@media screen and (max-width: 767px) {
-  @include randSize('mob\\:');
-}

package/core/var.scss

@@ -1,2 +0,0 @@
-$sz: 'xs', 's', 'm', 'l', 'xl';
-$co: 'main', 'vice', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';