@neatui/css 3.0.0-beta.1 → 3.0.0-beta.10

package/core/base.scss

@@ -288,42 +288,58 @@
   }
 
   // 不透明度
-  .#{$d}o-no {
+  .#{$d}o-no,
+  .#{$d}o-no\:hover:hover {
     opacity: 0;
   }
-  .#{$d}o-xs {
+  .#{$d}o-xs,
+  .#{$d}o-xs\:hover:hover {
     opacity: 0.05;
   }
-  .#{$d}o-ss {
+  .#{$d}o-ss,
+  .#{$d}o-ss\:hover:hover {
     opacity: 0.1;
   }
-  .#{$d}o-sm {
+  .#{$d}o-sm,
+  .#{$d}o-sm\:hover:hover {
     opacity: 0.2;
   }
-  .#{$d}o-sl {
+  .#{$d}o-sl,
+  .#{$d}o-sl\:hover:hover {
     opacity: 0.3;
   }
-  .#{$d}o-ms {
+  .#{$d}o-ms,
+  .#{$d}o-ms\:hover:hover {
     opacity: 0.4;
   }
-  .#{$d}o-mm {
+  .#{$d}o-mm,
+  .#{$d}o-mm\:hover:hover {
     opacity: 0.5;
   }
-  .#{$d}o-ml {
+  .#{$d}o-ml,
+  .#{$d}o-ml\:hover:hover {
     opacity: 0.6;
   }
-  .#{$d}o-ls {
+  .#{$d}o-ls,
+  .#{$d}o-ls\:hover:hover {
     opacity: 0.7;
   }
-  .#{$d}o-lm {
+  .#{$d}o-lm,
+  .#{$d}o-lm\:hover:hover {
     opacity: 0.8;
   }
-  .#{$d}o-ll {
+  .#{$d}o-ll,
+  .#{$d}o-ll\:hover:hover {
     opacity: 0.9;
   }
-  .#{$d}o-xl {
+  .#{$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;

package/core/color.scss

@@ -1,7 +1,8 @@
 @use 'sass:list';
 
 @mixin color() {
-  html {
+  html,
+  [theme] {
     color: var(--co-read);
     fill: var(--co-read);
     background-color: var(--co-back);

package/core/cols@v2.scss

@@ -0,0 +1,128 @@
+@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/flex.scss

@@ -322,6 +322,10 @@
 
 @include flex();
 
+@include med('<dpc') {
+  @include flex('pad\\:');
+}
+
 @include med('<pad') {
   @include flex('mob\\:');
 }

package/core/scale.scss

@@ -4,6 +4,7 @@
   $sz: 0;
   @each $k in $rank {
     .s-#{$k},
+    .s-#{$k}\:hover:hover,
     [ui-scale~='#{$k}'] {
       transform: scale($sz);
 

package/core/size.scss

@@ -9,7 +9,7 @@
  * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
  */
 
- @use 'sass:list';
+@use 'sass:list';
 
 // 全局字号
 @mixin baseSize($sz: 13) {
@@ -150,11 +150,5 @@
 
 // 移动
 @media screen and (max-width: 767px) {
-  // @include baseSize(15);
   @include randSize('mob\\:');
 }
-
-// 超小屏
-@media screen and (max-width: 374px) {
-  // @include baseSize(9);
-}

package/core/theme.scss

@@ -172,7 +172,8 @@ $theme: if(
     $n: list.nth($i, 1);
     $s: list.nth($i, 2);
     @if ($n == $f) {
-      :root {
+      :root,
+      [theme~='#{$n}'] {
         @each $c in $s {
           $k: list.nth($c, 1);
           $v: list.nth($c, 2);

package/core/ux.scss

@@ -348,3 +348,14 @@
     }
   }
 }
+
+.ev-none,
+.ev-none-sub > *,
+.ev-none-sun > * > * {
+  pointer-events: none;
+}
+.ev-auto,
+.ev-auto-sub > *,
+.ev-auto-sun > * > * {
+  pointer-events: auto;
+}

package/package.json

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