@neatui/css 3.10.3 → 3.10.5

package/components/tags/tags@a.scss

@@ -29,13 +29,13 @@ $tag-a-sz: 'xs', 's', 'm', 'l', 'xl';
     @if ($co== 'main') {
       &,
       &[ui-tag~='#{$co}'] {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         box-shadow: inset 0 0 0 1px var(--co-#{$co}-ms);
         background: var(--co-#{$co}-sm);
       }
     } @else {
       &[ui-tag~='#{$co}'] {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         box-shadow: inset 0 0 0 1px var(--co-#{$co}-ms);
         background: var(--co-#{$co}-sm);
       }
@@ -96,13 +96,13 @@ $tag-a-sz: 'xs', 's', 'm', 'l', 'xl';
     @if ($co== 'main') {
       & > *,
       &[ui-tags~='#{$co}'] > * {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         box-shadow: inset 0 0 0 1px var(--co-#{$co}-ms);
         background: var(--co-#{$co}-sm);
       }
     } @else {
       &[ui-tags~='#{$co}'] > * {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         box-shadow: inset 0 0 0 1px var(--co-#{$co}-ms);
         background: var(--co-#{$co}-sm);
       }

package/components/tags/tags@b.scss

@@ -39,12 +39,12 @@ $tag-b-sz: 'xs', 's', 'm', 'l', 'xl';
     @if ($co== 'main') {
       &,
       &[ui-tag~='#{$co}'] {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         background: var(--co-#{$co}-sm);
       }
     } @else {
       &[ui-tag~='#{$co}'] {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         background: var(--co-#{$co}-sm);
       }
     }
@@ -104,12 +104,12 @@ $tag-b-sz: 'xs', 's', 'm', 'l', 'xl';
     @if ($co== 'main') {
       & > *,
       &[ui-tags~='#{$co}'] > * {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         background: var(--co-#{$co}-sm);
       }
     } @else {
       &[ui-tags~='#{$co}'] > * {
-        color: var(--co-#{$co}-text-xl);
+        color: var(--co-#{$co});
         background: var(--co-#{$co}-sm);
       }
     }

package/components/tips/base.scss

@@ -21,7 +21,7 @@
       right: 0.75em;
       bottom: -0.25em;
       left: auto;
-      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='tc'] {
@@ -45,7 +45,7 @@
       bottom: -0.25em;
       left: 50%;
       margin-left: -0.25em;
-      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='tr'] {
@@ -68,7 +68,7 @@
       right: auto;
       bottom: -0.25em;
       left: 0.75em;
-      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-o-ss);
     }
   }
 
@@ -92,7 +92,7 @@
       right: -0.25em;
       bottom: 0.75em;
       left: auto;
-      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='lm'] {
@@ -115,7 +115,7 @@
       bottom: auto;
       left: auto;
       margin-top: -0.25em;
-      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='lb'] {
@@ -137,7 +137,7 @@
       right: -0.25em;
       bottom: auto;
       left: auto;
-      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-o-ss);
     }
   }
 
@@ -173,7 +173,7 @@
       left: -0.25em;
       bottom: 0.75em;
       right: auto;
-      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='rm'] {
@@ -196,7 +196,7 @@
       bottom: auto;
       right: auto;
       margin-top: -0.25em;
-      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='rb'] {
@@ -218,7 +218,7 @@
       left: -0.25em;
       bottom: auto;
       right: auto;
-      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-o-ss);
     }
   }
 
@@ -243,7 +243,7 @@
       right: 1em;
       top: -0.25em;
       left: auto;
-      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='bc'] {
@@ -267,7 +267,7 @@
       top: -0.25em;
       left: 50%;
       margin-left: -0.25em;
-      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-o-ss);
     }
   }
   [ui-tips-box~='br'] {
@@ -290,11 +290,12 @@
       right: auto;
       top: -0.25em;
       left: 0.75em;
-      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-o-ss);
     }
   }
 
   // 展开
+  &[ui-tips~='ux:click'].clicked > *,
   &[ui-tips~='ux:hover']:hover > *,
   &[ui-tips~='ux:active']:active > *,
   &[ui-tips-view~='1'] > * {

package/components/tips/tips@a.scss

@@ -9,7 +9,7 @@
   [ui-tips-box] {
     position: absolute;
     background: var(--co-fore);
-    box-shadow: 0 0 0.2em 1px var(--co-text-ss);
+    box-shadow: 0 0 0.2em 1px var(--co-text-o-ss);
     border-radius: 0.35em;
     pointer-events: none;
     opacity: 0;

package/core/basic.scss

@@ -1,55 +1,63 @@
 @use './media.scss' as *;
 
 @mixin base($d: '') {
+  .#{$d}w-auto {
+    width: auto;
+  }
+  .#{$d}min-w-auto {
+    min-width: auto;
+  }
+  .#{$d}max-w-auto {
+    max-width: auto;
+  }
+
+  .#{$d}h-auto {
+    height: auto;
+  }
+  .#{$d}min-h-auto {
+    min-height: auto;
+  }
+  .#{$d}max-h-auto {
+    max-height: auto;
+  }
+
   // BASE
   .#{$d}full,
-  .#{$d}full-x,
-  .#{$d}full-w,
+  .#{$d}w-full,
   .#{$d}full-sub > *,
-  .#{$d}full-x-sub > *,
-  .#{$d}full-w-sub > * {
+  .#{$d}w-full-sub > * {
     width: 100%;
   }
   .#{$d}full,
-  .#{$d}full-h,
-  .#{$d}full-y,
+  .#{$d}h-full,
   .#{$d}full-sub > *,
-  .#{$d}full-h-sub > *,
-  .#{$d}full-y-sub > * {
+  .#{$d}h-full-sub > * {
     height: 100%;
   }
 
   .#{$d}min-full,
-  .#{$d}min-full-x,
-  .#{$d}min-full-w,
+  .#{$d}min-w-full,
   .#{$d}min-full-sub > *,
-  .#{$d}min-full-x-sub > *,
-  .#{$d}min-full-w-sub > * {
+  .#{$d}min-w-full-sub > * {
     min-width: 100%;
   }
   .#{$d}min-full,
-  .#{$d}min-full-h,
-  .#{$d}min-full-y,
+  .#{$d}min-h-full,
   .#{$d}min-full-sub > *,
-  .#{$d}min-full-h-sub > *,
-  .#{$d}min-full-y-sub > * {
+  .#{$d}min-h-full-sub > * {
     min-height: 100%;
   }
 
   .#{$d}max-full,
-  .#{$d}max-full-x,
-  .#{$d}max-full-w,
+  .#{$d}max-w-full,
   .#{$d}max-full-sub > *,
-  .#{$d}max-full-x-sub > *,
-  .#{$d}max-full-w-sub > * {
+  .#{$d}max-w-full-sub > * {
     max-width: 100%;
   }
   .#{$d}max-full,
-  .#{$d}max-full-h,
-  .#{$d}max-full-y,
+  .#{$d}max-h-full,
   .#{$d}max-full-sub > *,
-  .#{$d}max-full-h-sub > *,
-  .#{$d}max-full-y-sub > * {
+  .#{$d}max-h-full-sub > * {
     max-height: 100%;
   }
 
@@ -395,6 +403,8 @@
 code,
 .code {
   font-family: Menlo, Monaco, 'Courier New', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 [layout='full'] {

package/core/color.scss

@@ -1,149 +1,65 @@
-@use 'sass:list';
-
-@mixin color() {
-  html,
-  [theme] {
-    color: var(--co-text);
-    fill: var(--co-text);
-    background-color: var(--co-back);
-  }
-
-  body {
-    color: var(--co-read);
-    fill: var(--co-read);
-  }
-
-  // 自动颜色
-  .co-auto,
-  .co-auto\:hover:hover,
-  .co-auto\:active:active {
-    color: currentColor !important;
-    fill: currentColor !important;
-  }
-
-  .bg-auto,
-  .bg-auto\:hover:hover,
-  .bg-auto\:active:active {
-    background-color: currentColor !important;
-  }
-  .bk-auto,
-  .bk-auto\:hover:hover,
-  .bk-auto\:active:active {
-    border-color: currentColor !important;
-  }
-
-  // 随机颜色
-  .bg-0 {
-    background-color: var(--co-main);
-  }
-
-  .bg-1 {
-    background-color: #0084ff;
-  }
-  .bg-2 {
-    background-color: #30d158;
-  }
-  .bg-3 {
-    background-color: #5e5ce6;
-  }
-  .bg-4 {
-    background-color: #ff9f0a;
-  }
-  .bg-5 {
-    background-color: #ff375f;
-  }
-  .bg-6 {
-    background-color: #af52de;
-  }
-  .bg-7 {
-    background-color: #ff453a;
-  }
-  .bg-8 {
-    background-color: #af52de;
-  }
-  .bg-9 {
-    background-color: #5ac8fa;
-  }
-  .bg-10 {
-    background-color: #ffcc00;
-  }
-  .bg-11 {
-    background-color: #8e8e93;
-  }
-  .bg-12 {
-    background-color: #bad80a;
-  }
-  .bg-13 {
-    background-color: #1d6fa3;
-  }
-  .bg-14 {
-    background-color: #fd6585;
-  }
-  .bg-15 {
-    background-color: #df5900;
-  }
-  .bg-16 {
-    background-color: #3388ff;
-  }
-  .bg-17 {
-    background-color: #623aa2;
-  }
-  .bg-18 {
-    background-color: #d939cd;
-  }
-  .bg-19 {
-    background-color: #f55555;
-  }
-  .bg-20 {
-    background-color: #bb4e75;
-  }
-
-  $f: list.nth(list.nth($theme, 1), 1);
-  @each $i in $theme {
-    $s: list.nth($i, 2);
-    @each $c in $s {
-      $n: list.nth($c, 1);
-      $v: list.nth($c, 2);
-      // @include color(list.nth($c, 1), list.nth($c, 2));
-      $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
-
-      .co-#{$n},
-      .co-#{$n}\:hover:hover,
-      .co-#{$n}\:active:active {
-        color: var(--co-#{$n}) !important;
-        fill: var(--co-#{$n}) !important;
-      }
-      .bg-#{$n},
-      .bg-#{$n}\:hover:hover,
-      .bg-#{$n}\:active:active {
-        background-color: var(--co-#{$n}) !important;
-      }
-      .bk-#{$n},
-      .bk-#{$n}\:hover:hover,
-      .bk-#{$n}\:active:active {
-        border-color: var(--co-#{$n}) !important;
-      }
-
-      @each $i in $levels {
-        .co-#{$n}-#{$i},
-        .co-#{$n}-#{$i}\:hover:hover,
-        .co-#{$n}-#{$i}\:active:active {
-          color: var(--co-#{$n}-#{$i}) !important;
-          fill: var(--co-#{$n}-#{$i}) !important;
-        }
-        .bg-#{$n}-#{$i},
-        .bg-#{$n}-#{$i}\:hover:hover,
-        .bg-#{$n}-#{$i}\:active:active {
-          background-color: var(--co-#{$n}-#{$i}) !important;
-        }
-        .bk-#{$n}-#{$i},
-        .bk-#{$n}-#{$i}\:hover:hover,
-        .bk-#{$n}-#{$i}\:active:active {
-          border-color: var(--co-#{$n}-#{$i}) !important;
-        }
-      }
-    }
-  }
+// 随机颜色
+.bg-0 {
+  background-color: var(--co-main);
 }
 
-@include color();
+.bg-1 {
+  background-color: #0084ff;
+}
+.bg-2 {
+  background-color: #30d158;
+}
+.bg-3 {
+  background-color: #5e5ce6;
+}
+.bg-4 {
+  background-color: #ff9f0a;
+}
+.bg-5 {
+  background-color: #ff375f;
+}
+.bg-6 {
+  background-color: #af52de;
+}
+.bg-7 {
+  background-color: #ff453a;
+}
+.bg-8 {
+  background-color: #af52de;
+}
+.bg-9 {
+  background-color: #5ac8fa;
+}
+.bg-10 {
+  background-color: #ffcc00;
+}
+.bg-11 {
+  background-color: #8e8e93;
+}
+.bg-12 {
+  background-color: #bad80a;
+}
+.bg-13 {
+  background-color: #1d6fa3;
+}
+.bg-14 {
+  background-color: #fd6585;
+}
+.bg-15 {
+  background-color: #df5900;
+}
+.bg-16 {
+  background-color: #3388ff;
+}
+.bg-17 {
+  background-color: #623aa2;
+}
+.bg-18 {
+  background-color: #d939cd;
+}
+.bg-19 {
+  background-color: #f55555;
+}
+.bg-20 {
+  background-color: #bb4e75;
+}

package/core/cover.scss

@@ -2,7 +2,7 @@ $sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
 
 [ui-cover] {
   position: relative;
-  width: 100%;
+  // width: 100%;
   height: 0;
   box-sizing: content-box;
   padding-top: 100%;

package/core/grid.scss

@@ -87,6 +87,15 @@
   [ui-grid~='#{$med}xl'] {
     --gap: 5em;
   }
+
+  // 容器撑满
+  [ui-grid~='#{$med}block'] {
+    align-items: stretch;
+  }
+  // 自身撑满
+  .grid-block {
+    align-self: stretch;
+  }
 }
 
 @include _grid('');

package/core/scroll.scss

@@ -5,7 +5,7 @@
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scrollbar-gutter: auto;
-    scrollbar-color: var(--co-text-ss) transparent;
+    scrollbar-color: var(--co-text-o-ss) transparent;
 
     &::-webkit-scrollbar {
       position: absolute;
@@ -17,7 +17,7 @@
     &::-webkit-scrollbar-thumb {
       border: 1px solid transparent;
       border-radius: 10px;
-      background-color: var(--co-text-ss) !important;
+      background-color: var(--co-text-o-ss) !important;
       background-clip: content-box;
     }
 
@@ -105,7 +105,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--co-text-ss) !important;
+  background-color: var(--co-text-o-ss) !important;
 }
 
 @include med('>mob') {
@@ -114,7 +114,7 @@
       -webkit-overflow-scrolling: touch;
       scrollbar-width: thin;
       scrollbar-gutter: auto;
-      scrollbar-color: var(--co-text-ss) transparent;
+      scrollbar-color: var(--co-text-o-ss) transparent;
 
       &::-webkit-scrollbar {
         position: absolute;
@@ -126,7 +126,7 @@
       &::-webkit-scrollbar-thumb {
         border: 1px solid transparent;
         border-radius: 10px;
-        background-color: var(--co-text-ss) !important;
+        background-color: var(--co-text-o-ss) !important;
         background-clip: content-box;
       }