@neatui/css 2.0.0-beta.2 → 2.0.1

package/components/btns/btns@a.scss

@@ -54,7 +54,8 @@ body [ui-btn~='@a'] {
   }
 
   // 移入状态
-  &:hover {
+  &:hover,
+  &.active {
     box-shadow:
       inset 0 0 0 1px var(--co-line),
       inset 0 0 0 100em var(--co-text-xs);
@@ -173,7 +174,8 @@ body [ui-btn~='@a'] {
       }
       box-shadow: inset 0 0 0 1px transparent;
 
-      &:hover {
+      &:hover,
+      &.active {
         box-shadow:
           inset 0 0 0 1px transparent,
           inset 0 0 0 100em var(--co-text-xs);
@@ -189,7 +191,8 @@ body [ui-btn~='@a'] {
         }
         box-shadow: inset 0 0 0 1px var(--co-#{$name});
 
-        &:hover {
+        &:hover,
+        &.active {
           box-shadow:
             inset 0 0 0 1px var(--co-#{$name}),
             inset 0 0 0 100em var(--co-#{$name}-xs);
@@ -268,7 +271,8 @@ body [ui-btn~='@a'] {
   }
 
   // 移入状态
-  & > *:hover {
+  & > *:hover,
+  & > *.active {
     box-shadow:
       inset 0 0 0 1px var(--co-line),
       inset 0 0 0 100em var(--co-text-xs);
@@ -293,7 +297,8 @@ body [ui-btn~='@a'] {
   // 禁用按钮
   &[ui-btns~=':disabled'] > * {
     &,
-    &:hover {
+    &:hover,
+    &.active {
       opacity: 0.65;
       box-shadow:
         inset 0 0 0 1px transparent,
@@ -384,7 +389,8 @@ body [ui-btn~='@a'] {
 
         box-shadow: inset 0 0 0 1px transparent;
 
-        &:hover {
+        &:hover,
+        &.active {
           box-shadow:
             inset 0 0 0 1px transparent,
             inset 0 0 0 100em var(--co-text-xs);
@@ -401,7 +407,8 @@ body [ui-btn~='@a'] {
         }
         box-shadow: inset 0 0 0 1px var(--co-#{$name});
 
-        &:hover {
+        &:hover,
+        &.active {
           box-shadow:
             inset 0 0 0 1px var(--co-#{$name}),
             inset 0 0 0 100em var(--co-#{$name}-xs);
@@ -414,7 +421,8 @@ body [ui-btn~='@a'] {
         background: transparent;
         box-shadow: inset 0 0 0 1px transparent;
 
-        &:hover {
+        &:hover,
+        &.active {
           box-shadow: inset 0 0 0 1px transparent;
           text-decoration: underline;
         }

package/core/reset.scss

@@ -156,7 +156,7 @@ img {
 sup {
   position: relative;
   vertical-align: text-top;
-  font-size: 0.5em;
+  font-size: 0.6em;
   line-height: 1;
   font-weight: bold;
 }

package/core/theme.scss

@@ -59,9 +59,7 @@ $theme: if(
       read: mix(map-get($s, 'text'), map-get($s, 'fore'), 85%),
       desc: mix(map-get($s, 'text'), map-get($s, 'fore'), 55%),
       note: mix(map-get($s, 'text'), map-get($s, 'fore'), 35%),
-      // idle: mix(map-get($s, 'text'), map-get($s, 'fore'), 25%),
-      case:
-        mix(map-get($s, 'text'), map-get($s, 'fore'), 20%),
+      case: mix(map-get($s, 'text'), map-get($s, 'fore'), 20%),
       line: mix(map-get($s, 'text'), map-get($s, 'fore'), 10%),
       weak: mix(map-get($s, 'text'), map-get($s, 'fore'), 3%),
       // deep:
@@ -202,53 +200,29 @@ $theme: if(
             }
           }
         }
-
-        // 文本颜色
-        // --co-main-text: #{mix(map-get($s, 'main'), map-get($s, 'text'), 85%)};
-        // --co-well-text: #{mix(map-get($s, 'well'), map-get($s, 'text'), 85%)};
-        // --co-warn-text: #{mix(map-get($s, 'warn'), map-get($s, 'text'), 85%)};
-        // --co-risk-text: #{mix(map-get($s, 'risk'), map-get($s, 'text'), 85%)};
-
-        // --co-line-fore: #{mix(map-get($s, 'line'), map-get($s, 'fore'), 70%)};
-        // --bg-main: #{saturate(rgba(map-get($s, 'main'), 0.05), 20%)};
-        // --bg-weak: #{mix(map-get($s, 'weak'), map-get($s, 'fore'), 75%)};
-        // --bg-well: #{saturate(rgba(map-get($s, 'well'), 0.05), 20%)};
-        // --bg-warn: #{saturate(rgba(map-get($s, 'warn'), 0.05), 20%)};
-        // --bg-risk: #{saturate(rgba(map-get($s, 'risk'), 0.05), 20%)};
-        // --bg-info: #{saturate(rgba(map-get($s, 'info'), 0.05), 20%)};
-        // --bg-well: #{rgba(map-get($s, 'well'), 0.08)};
-        // --bg-warn: #{rgba(map-get($s, 'warn'), 0.08)};
-        // --bg-risk: #{rgba(map-get($s, 'risk'), 0.08)};
-
-        // @each $k in $colors {
-        //   $v: map-get($s, $k);
-        //   $ls: 0.05;
-        //   @each $l in $levels {
-        //     // 透明度
-        //     --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-        //     // 增亮度
-        //     --bg-#{$k}-#{$l}: #{saturate(rgba($v, $ls), 20%)};
-        //     @if ($ls == 0.05 or $ls == 0.9) {
-        //       $ls: $ls + 0.05;
-        //     } @else {
-        //       $ls: $ls + 0.1;
-        //     }
-        //   }
-        // }
       }
     } @else {
       [theme~='#{$n}'] {
         @each $c in $s {
           $k: nth($c, 1);
           $v: nth($c, 2);
-          @if ($k != 'none') {
-            --co-#{$k}: #{$v};
-          }
+          --#{$k}: #{red($v), green($v), blue($v)};
+          --co-#{$k}: #{$v};
 
           $ls: 0.05;
           @each $l in $levels {
             // 透明度
-            --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+            @if ($k != 'none') {
+              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+
+              @if ($k != 'w' and $k != 'b') {
+                --co-#{$k}-fore-#{$l}: #{mix($v, map-get($s, 'fore'), $ls * 100%)};
+              }
+
+              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
+                --co-#{$k}-text-#{$l}: #{mix($v, map-get($s, 'text'), $ls * 100%)};
+              }
+            }
             @if ($ls <= 0.1 or $ls >= 0.8) {
               $ls: $ls + 0.05;
             } @else {
@@ -256,28 +230,6 @@ $theme: if(
             }
           }
         }
-
-        // 文本颜色
-        // --co-main-text: #{mix(map-get($s, 'main'), map-get($s, 'text'), 85%)};
-        // --co-well-text: #{mix(map-get($s, 'well'), map-get($s, 'text'), 85%)};
-        // --co-warn-text: #{mix(map-get($s, 'warn'), map-get($s, 'text'), 85%)};
-        // --co-risk-text: #{mix(map-get($s, 'risk'), map-get($s, 'text'), 85%)};
-
-        // @each $k in $colors {
-        //   $v: map-get($s, $k);
-        //   $ls: 0.05;
-        //   @each $l in $levels {
-        //     // 透明度
-        //     --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-        //     // 增亮度
-        //     --bg-#{$k}-#{$l}: #{saturate(rgba($v, $ls), 20%)};
-        //     @if ($ls == 0.05 or $ls == 0.9) {
-        //       $ls: $ls + 0.05;
-        //     } @else {
-        //       $ls: $ls + 0.1;
-        //     }
-        //   }
-        // }
       }
     }
   }

package/core/ux.scss

@@ -163,7 +163,7 @@
   &::after {
     border-top-color: currentColor;
     transform: translateY(120%);
-    opacity: 0.6;
+    opacity: 0.3;
   }
 
   &[ui-sort~='0'] {
@@ -171,12 +171,20 @@
       opacity: 0.3;
     }
     &::after {
-      opacity: 0.6;
+      opacity: 0.3;
     }
   }
   &[ui-sort~='1'] {
     &::before {
-      opacity: 0.6;
+      opacity: 0.3;
+    }
+    &::after {
+      opacity: 0.9;
+    }
+  }
+  &[ui-sort~='2'] {
+    &::before {
+      opacity: 0.9;
     }
     &::after {
       opacity: 0.3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/css",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.1",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",