@neatui/css 3.10.6 → 3.12.0

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/color.scss

@@ -3,63 +3,107 @@
   background-color: var(--co-main);
 }
 
-.bg-1 {
+.bg-1,
+.bg-a {
   background-color: #0084ff;
 }
-.bg-2 {
+.bg-2,
+.bg-b {
   background-color: #30d158;
 }
-.bg-3 {
+.bg-3,
+.bg-c {
   background-color: #5e5ce6;
 }
-.bg-4 {
+.bg-4,
+.bg-d {
   background-color: #ff9f0a;
 }
-.bg-5 {
+.bg-5,
+.bg-e {
   background-color: #ff375f;
 }
-.bg-6 {
+.bg-6,
+.bg-f {
   background-color: #af52de;
 }
-.bg-7 {
+.bg-7,
+.bg-g {
   background-color: #ff453a;
 }
-.bg-8 {
+.bg-8,
+.bg-h {
   background-color: #af52de;
 }
-.bg-9 {
+.bg-9,
+.bg-i {
   background-color: #5ac8fa;
 }
-.bg-10 {
+.bg-10,
+.bg-j {
   background-color: #ffcc00;
 }
-.bg-11 {
+.bg-11,
+.bg-k {
   background-color: #8e8e93;
 }
-.bg-12 {
+.bg-12,
+.bg-l {
   background-color: #bad80a;
 }
-.bg-13 {
+.bg-13,
+.bg-m {
   background-color: #1d6fa3;
 }
-.bg-14 {
+.bg-14,
+.bg-n {
   background-color: #fd6585;
 }
-.bg-15 {
+.bg-15,
+.bg-o {
   background-color: #df5900;
 }
-.bg-16 {
+.bg-16,
+.bg-p {
   background-color: #3388ff;
 }
-.bg-17 {
+.bg-17,
+.bg-q {
   background-color: #623aa2;
 }
-.bg-18 {
+.bg-18,
+.bg-r {
   background-color: #d939cd;
 }
-.bg-19 {
+.bg-19,
+.bg-s {
   background-color: #f55555;
 }
-.bg-20 {
+.bg-20,
+.bg-t {
   background-color: #bb4e75;
 }
+.bg-21,
+.bg-u {
+  background-color: #00b4d8;
+}
+.bg-22,
+.bg-v {
+  background-color: #e63946;
+}
+.bg-23,
+.bg-w {
+  background-color: #2a9d8f;
+}
+.bg-24,
+.bg-x {
+  background-color: #f77f00;
+}
+.bg-25,
+.bg-y {
+  background-color: #06a77d;
+}
+.bg-26,
+.bg-z {
+  background-color: #d946ef;
+}

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

@@ -2,7 +2,6 @@ $sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
 
 [ui-cover] {
   position: relative;
-  // width: 100%;
   height: 0;
   box-sizing: content-box;
   padding-top: 100%;
@@ -73,7 +72,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 +86,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;
+        }
+      }
     }
   }
 }