@neatui/css 3.0.0-beta.9 → 3.0.0

package/core/grid.scss

@@ -0,0 +1,251 @@
+[ui-grid] {
+  display: grid;
+  gap: var(--gap);
+  justify-content: start;
+  grid-template-columns: repeat(auto-fill, minmax(calc((100% - (var(--col) - 1) * 1em) / var(--col)), 1fr));
+  --col: 12;
+  --gap: 12;
+}
+// 默认断点
+.n-no { --gap: 0; }
+.n-xs { --gap: 1px; }
+.n-ss { --gap: 0.25em; }
+.n-sm { --gap: 0.5em; }
+.n-sl { --gap: 0.75em; }
+.n-ms { --gap: 1em; }
+.n-mm { --gap: 1.5em; }
+.n-ml { --gap: 2em; }
+.n-ls { --gap: 2.5em; }
+.n-lm { --gap: 3em; }
+.n-ll { --gap: 4em; }
+.n-xl { --gap: 5em; }
+[ui-grid~='mob:1'],[ui-grid~='mob-s:1']   { --col: 1; }
+[ui-grid~='mob:2'],[ui-grid~='mob-s:2']   { --col: 2; }
+[ui-grid~='mob:3'],[ui-grid~='mob-s:3']   { --col: 3; }
+[ui-grid~='mob:4'],[ui-grid~='mob-s:4']   { --col: 4; }
+[ui-grid~='mob:5'],[ui-grid~='mob-s:5']   { --col: 5; }
+[ui-grid~='mob:6'],[ui-grid~='mob-s:6']   { --col: 6; }
+[ui-grid~='mob:7'],[ui-grid~='mob-s:7']   { --col: 7; }
+[ui-grid~='mob:8'],[ui-grid~='mob-s:8']   { --col: 8; }
+[ui-grid~='mob:9'],[ui-grid~='mob-s:9']   { --col: 9; }
+[ui-grid~='mob:10'],[ui-grid~='mob-s:10'] { --col: 10; }
+[ui-grid~='mob:11'],[ui-grid~='mob-s:11'] { --col: 11; }
+[ui-grid~='mob:12'],[ui-grid~='mob-s:12'] { --col: 12; }
+
+@media (min-width: 480px) {
+  .n-no, .mob\:n-no, .mob-s\:n-no { --gap: 0; }
+  .n-xs, .mob\:n-xs, .mob-s\:n-xs { --gap: 1px; }
+  .n-ss, .mob\:n-ss, .mob-s\:n-ss { --gap: 0.25em; }
+  .n-sm, .mob\:n-sm, .mob-s\:n-sm { --gap: 0.5em; }
+  .n-sl, .mob\:n-sl, .mob-s\:n-sl { --gap: 0.75em; }
+  .n-ms, .mob\:n-ms, .mob-s\:n-ms { --gap: 1em; }
+  .n-mm, .mob\:n-mm, .mob-s\:n-mm { --gap: 1.5em; }
+  .n-ml, .mob\:n-ml, .mob-s\:n-ml { --gap: 2em; }
+  .n-ls, .mob\:n-ls, .mob-s\:n-ls { --gap: 2.5em; }
+  .n-lm, .mob\:n-lm, .mob-s\:n-lm { --gap: 3em; }
+  .n-ll, .mob\:n-ll, .mob-s\:n-ll { --gap: 4em; }
+  .n-xl, .mob\:n-xl, .mob-s\:n-xl { --gap: 5em; }
+
+  [ui-grid~='mob-m:1']  { --col: 1; }
+  [ui-grid~='mob-m:2']  { --col: 2; }
+  [ui-grid~='mob-m:3']  { --col: 3; }
+  [ui-grid~='mob-m:4']  { --col: 4; }
+  [ui-grid~='mob-m:5']  { --col: 5; }
+  [ui-grid~='mob-m:6']  { --col: 6; }
+  [ui-grid~='mob-m:7']  { --col: 7; }
+  [ui-grid~='mob-m:8']  { --col: 8; }
+  [ui-grid~='mob-m:9']  { --col: 9; }
+  [ui-grid~='mob-m:10'] { --col: 10; }
+  [ui-grid~='mob-m:11'] { --col: 11; }
+  [ui-grid~='mob-m:12'] { --col: 12; }
+  
+}
+@media (min-width: 640px) {
+  // .mob\:n-no,.mob-l\:n-no { --gap: 0; }
+  // .mob\:n-xs,.mob-l\:n-xs { --gap: 1px; }
+  // .mob\:n-ss,.mob-l\:n-ss { --gap: 0.25em; }
+  // .mob\:n-sm,.mob-l\:n-sm { --gap: 0.5em; }
+  // .mob\:n-sl,.mob-l\:n-sl { --gap: 0.75em; }
+  // .mob\:n-ms,.mob-l\:n-ms { --gap: 1em; }
+  // .mob\:n-mm,.mob-l\:n-mm { --gap: 1.5em; }
+  // .mob\:n-ml,.mob-l\:n-ml { --gap: 2em; }
+  // .mob\:n-ls,.mob-l\:n-ls { --gap: 2.5em; }
+  // .mob\:n-lm,.mob-l\:n-lm { --gap: 3em; }
+  // .mob\:n-ll,.mob-l\:n-ll { --gap: 4em; }
+  // .mob\:n-xl,.mob-l\:n-xl { --gap: 5em; }
+
+  [ui-grid~='mob-l:1']  { --col: 1; }
+  [ui-grid~='mob-l:2']  { --col: 2; }
+  [ui-grid~='mob-l:3']  { --col: 3; }
+  [ui-grid~='mob-l:4']  { --col: 4; }
+  [ui-grid~='mob-l:5']  { --col: 5; }
+  [ui-grid~='mob-l:6']  { --col: 6; }
+  [ui-grid~='mob-l:7']  { --col: 7; }
+  [ui-grid~='mob-l:8']  { --col: 8; }
+  [ui-grid~='mob-l:9']  { --col: 9; }
+  [ui-grid~='mob-l:10'] { --col: 10; }
+  [ui-grid~='mob-l:11'] { --col: 11; }
+  [ui-grid~='mob-l:12'] { --col: 12; }
+}
+@media (min-width: 800px) {
+  // .n-no { --gap: 0; }
+  // .n-xs { --gap: 1px; }
+  // .n-ss { --gap: 0.25em; }
+  // .n-sm { --gap: 0.5em; }
+  // .n-sl { --gap: 0.75em; }
+  // .n-ms { --gap: 1em; }
+  // .n-mm { --gap: 1.5em; }
+  // .n-ml { --gap: 2em; }
+  // .n-ls { --gap: 2.5em; }
+  // .n-lm { --gap: 3em; }
+  // .n-ll { --gap: 4em; }
+  // .n-xl { --gap: 5em; }
+
+  [ui-grid~='pad:1'],[ui-grid~='pad-s:1']  { --col: 1; }
+  [ui-grid~='pad:2'],[ui-grid~='pad-s:2']  { --col: 2; }
+  [ui-grid~='pad:3'],[ui-grid~='pad-s:3']  { --col: 3; }
+  [ui-grid~='pad:4'],[ui-grid~='pad-s:4']  { --col: 4; }
+  [ui-grid~='pad:5'],[ui-grid~='pad-s:5']  { --col: 5; }
+  [ui-grid~='pad:6'],[ui-grid~='pad-s:6']  { --col: 6; }
+  [ui-grid~='pad:7'],[ui-grid~='pad-s:7']  { --col: 7; }
+  [ui-grid~='pad:8'],[ui-grid~='pad-s:8']  { --col: 8; }
+  [ui-grid~='pad:9'],[ui-grid~='pad-s:9']  { --col: 9; }
+  [ui-grid~='pad:10'],[ui-grid~='pad-s:10'] { --col: 10; }
+  [ui-grid~='pad:11'],[ui-grid~='pad-s:11'] { --col: 11; }
+  [ui-grid~='pad:12'],[ui-grid~='pad-s:12'] { --col: 12; }
+}
+@media (min-width: 960px) {
+  // .n-no { --gap: 0; }
+  // .n-xs { --gap: 1px; }
+  // .n-ss { --gap: 0.25em; }
+  // .n-sm { --gap: 0.5em; }
+  // .n-sl { --gap: 0.75em; }
+  // .n-ms { --gap: 1em; }
+  // .n-mm { --gap: 1.5em; }
+  // .n-ml { --gap: 2em; }
+  // .n-ls { --gap: 2.5em; }
+  // .n-lm { --gap: 3em; }
+  // .n-ll { --gap: 4em; }
+  // .n-xl { --gap: 5em; }
+
+  [ui-grid~='pad-m:1']  { --col: 1; }
+  [ui-grid~='pad-m:2']  { --col: 2; }
+  [ui-grid~='pad-m:3']  { --col: 3; }
+  [ui-grid~='pad-m:4']  { --col: 4; }
+  [ui-grid~='pad-m:5']  { --col: 5; }
+  [ui-grid~='pad-m:6']  { --col: 6; }
+  [ui-grid~='pad-m:7']  { --col: 7; }
+  [ui-grid~='pad-m:8']  { --col: 8; }
+  [ui-grid~='pad-m:9']  { --col: 9; }
+  [ui-grid~='pad-m:10'] { --col: 10; }
+  [ui-grid~='pad-m:11'] { --col: 11; }
+  [ui-grid~='pad-m:12'] { --col: 12; }
+}
+@media (min-width: 1120px) {
+  // .n-no { --gap: 0; }
+  // .n-xs { --gap: 1px; }
+  // .n-ss { --gap: 0.25em; }
+  // .n-sm { --gap: 0.5em; }
+  // .n-sl { --gap: 0.75em; }
+  // .n-ms { --gap: 1em; }
+  // .n-mm { --gap: 1.5em; }
+  // .n-ml { --gap: 2em; }
+  // .n-ls { --gap: 2.5em; }
+  // .n-lm { --gap: 3em; }
+  // .n-ll { --gap: 4em; }
+  // .n-xl { --gap: 5em; }
+
+  [ui-grid~='pad-l:1']  { --col: 1; }
+  [ui-grid~='pad-l:2']  { --col: 2; }
+  [ui-grid~='pad-l:3']  { --col: 3; }
+  [ui-grid~='pad-l:4']  { --col: 4; }
+  [ui-grid~='pad-l:5']  { --col: 5; }
+  [ui-grid~='pad-l:6']  { --col: 6; }
+  [ui-grid~='pad-l:7']  { --col: 7; }
+  [ui-grid~='pad-l:8']  { --col: 8; }
+  [ui-grid~='pad-l:9']  { --col: 9; }
+  [ui-grid~='pad-l:10'] { --col: 10; }
+  [ui-grid~='pad-l:11'] { --col: 11; }
+  [ui-grid~='pad-l:12'] { --col: 12; }
+}
+@media (min-width: 1280px) {
+  // .n-no { --gap: 0; }
+  // .n-xs { --gap: 1px; }
+  // .n-ss { --gap: 0.25em; }
+  // .n-sm { --gap: 0.5em; }
+  // .n-sl { --gap: 0.75em; }
+  // .n-ms { --gap: 1em; }
+  // .n-mm { --gap: 1.5em; }
+  // .n-ml { --gap: 2em; }
+  // .n-ls { --gap: 2.5em; }
+  // .n-lm { --gap: 3em; }
+  // .n-ll { --gap: 4em; }
+  // .n-xl { --gap: 5em; }
+
+  [ui-grid~='dpc:1'],[ui-grid~='dpc-s:1']  { --col: 1; }
+  [ui-grid~='dpc:2'],[ui-grid~='dpc-s:2']  { --col: 2; }
+  [ui-grid~='dpc:3'],[ui-grid~='dpc-s:3']  { --col: 3; }
+  [ui-grid~='dpc:4'],[ui-grid~='dpc-s:4']  { --col: 4; }
+  [ui-grid~='dpc:5'],[ui-grid~='dpc-s:5']  { --col: 5; }
+  [ui-grid~='dpc:6'],[ui-grid~='dpc-s:6']  { --col: 6; }
+  [ui-grid~='dpc:7'],[ui-grid~='dpc-s:7']  { --col: 7; }
+  [ui-grid~='dpc:8'],[ui-grid~='dpc-s:8']  { --col: 8; }
+  [ui-grid~='dpc:9'],[ui-grid~='dpc-s:9']  { --col: 9; }
+  [ui-grid~='dpc:10'],[ui-grid~='dpc-s:10'] { --col: 10; }
+  [ui-grid~='dpc:11'],[ui-grid~='dpc-s:11'] { --col: 11; }
+  [ui-grid~='dpc:12'],[ui-grid~='dpc-s:12'] { --col: 12; }
+}
+@media (min-width: 1440px) {
+  // .n-no { --gap: 0; }
+  // .n-xs { --gap: 1px; }
+  // .n-ss { --gap: 0.25em; }
+  // .n-sm { --gap: 0.5em; }
+  // .n-sl { --gap: 0.75em; }
+  // .n-ms { --gap: 1em; }
+  // .n-mm { --gap: 1.5em; }
+  // .n-ml { --gap: 2em; }
+  // .n-ls { --gap: 2.5em; }
+  // .n-lm { --gap: 3em; }
+  // .n-ll { --gap: 4em; }
+  // .n-xl { --gap: 5em; }
+
+  [ui-grid~='dpc-m:1']  { --col: 1; }
+  [ui-grid~='dpc-m:2']  { --col: 2; }
+  [ui-grid~='dpc-m:3']  { --col: 3; }
+  [ui-grid~='dpc-m:4']  { --col: 4; }
+  [ui-grid~='dpc-m:5']  { --col: 5; }
+  [ui-grid~='dpc-m:6']  { --col: 6; }
+  [ui-grid~='dpc-m:7']  { --col: 7; }
+  [ui-grid~='dpc-m:8']  { --col: 8; }
+  [ui-grid~='dpc-m:9']  { --col: 9; }
+  [ui-grid~='dpc-m:10'] { --col: 10; }
+  [ui-grid~='dpc-m:11'] { --col: 11; }
+  [ui-grid~='dpc-m:12'] { --col: 12; }
+}
+@media (max-width: 1600px) {
+  // .n-no { --gap: 0; }
+  // .n-xs { --gap: 1px; }
+  // .n-ss { --gap: 0.25em; }
+  // .n-sm { --gap: 0.5em; }
+  // .n-sl { --gap: 0.75em; }
+  // .n-ms { --gap: 1em; }
+  // .n-mm { --gap: 1.5em; }
+  // .n-ml { --gap: 2em; }
+  // .n-ls { --gap: 2.5em; }
+  // .n-lm { --gap: 3em; }
+  // .n-ll { --gap: 4em; }
+  // .n-xl { --gap: 5em; }
+
+  [ui-grid~='dpc-l:1']  { --col: 1; }
+  [ui-grid~='dpc-l:2']  { --col: 2; }
+  [ui-grid~='dpc-l:3']  { --col: 3; }
+  [ui-grid~='dpc-l:4']  { --col: 4; }
+  [ui-grid~='dpc-l:5']  { --col: 5; }
+  [ui-grid~='dpc-l:6']  { --col: 6; }
+  [ui-grid~='dpc-l:7']  { --col: 7; }
+  [ui-grid~='dpc-l:8']  { --col: 8; }
+  [ui-grid~='dpc-l:9']  { --col: 9; }
+  [ui-grid~='dpc-l:10'] { --col: 10; }
+  [ui-grid~='dpc-l:11'] { --col: 11; }
+  [ui-grid~='dpc-l:12'] { --col: 12; }
+}

package/core/media copy.scss

@@ -0,0 +1,270 @@
+@use 'sass:list';
+@use 'sass:string';
+$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
+);
+
+// 桌面
+@mixin dpc() {
+  $this: #{list.nth(&, 1)};
+  @media screen and (min-width: 1120px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 平板
+@mixin pad() {
+  $this: #{list.nth(&, 1)};
+  @media screen and (max-width: 1119px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 移动
+@mixin mob() {
+  $this: #{list.nth(&, 1)};
+  @media screen and (max-width: 799px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 设备
+@mixin med($p) {
+  $this: #{list.nth(&, 1)};
+
+  $r: string.slice($p, 1, 1);
+  $_n: string.slice($p, 2, -1);
+
+  // 大于某节点时
+  @if ($r == '>') {
+    // 大于平板
+    @if ($p == '>pad') {
+      @media screen and (min-width: 1120px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    // 大于移动
+    @if ($p == '>mob') {
+      @media screen and (min-width: 800px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    @each $sz in $level {
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2)};
+      @if ($_n == $n) {
+        @media screen and (min-width: $v) {
+          @if ($this == '') {
+            @content;
+          } @else {
+            & {
+              @content;
+            }
+          }
+        }
+      }
+    }
+  }
+  // 小于某节点时
+  @if ($r == '<') {
+    // 小于桌面
+    @if ($p == '<dpc') {
+      @media screen and (max-width: 1119px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    // 小于平板
+    @if ($p == '<pad') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+
+    @each $sz in $level {
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2) - 1};
+      @if ($_n == $n) {
+        @media screen and (max-width: $v) {
+          @if ($this == '') {
+            @content;
+          } @else {
+            & {
+              @content;
+            }
+          }
+        }
+      }
+    }
+  }
+  // 仅在某节点时
+  @if ($r == '=') {
+    @if ($p == '=dpc') {
+      @media screen and (min-width: 1120px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    @if ($p == '=pad') {
+      @media screen and (min-width: 800px) and (max-width: 1119px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    @if ($p == '=mob') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    @each $sz in $level {
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2)};
+      $m: #{list.nth($sz, 2) + 159};
+      @if ($_n == $n) {
+        @if ($_n == 'mob-s') {
+          @media screen and (max-width: $m) {
+            @content;
+          }
+        } @else if($_n == 'dpc-l') {
+          @media screen and (min-width: $v) {
+            @content;
+          }
+        } @else {
+          @media screen and (min-width: $v) and (max-width: $m) {
+            @content;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 大于某节点时
+@each $sz in $level {
+  $n: #{list.nth($sz, 1)};
+  [ui-hide~='>#{$n}'] {
+    @include med('>#{$n}') {
+      display: none !important;
+    }
+  }
+}
+[ui-hide~='>mob'] {
+  @include med('>mob') {
+    display: none !important;
+  }
+}
+[ui-hide~='>pad'] {
+  @include med('>pad') {
+    display: none !important;
+  }
+}
+
+// 小于某节点时
+@each $sz in $level {
+  $n: #{list.nth($sz, 1)};
+  [ui-hide~='<#{$n}'] {
+    @include med('<#{$n}') {
+      display: none !important;
+    }
+  }
+}
+[ui-hide~='<pad'] {
+  @include med('<pad') {
+    display: none !important;
+  }
+}
+[ui-hide~='<dpc'] {
+  @include med('<dpc') {
+    display: none !important;
+  }
+}
+
+// 等于某节点时
+@each $sz in $level {
+  $n: #{list.nth($sz, 1)};
+  [ui-hide~='=#{$n}'] {
+    @include med('=#{$n}') {
+      display: none !important;
+    }
+  }
+}
+[ui-hide~='=mob'] {
+  @include med('=mob') {
+    display: none !important;
+  }
+}
+[ui-hide~='=pad'] {
+  @include med('=pad') {
+    display: none !important;
+  }
+}
+[ui-hide~='=dpc'] {
+  @include med('=dpc') {
+    display: none !important;
+  }
+}

package/core/media.scss

@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:string';
+
 $level: (
   mob-s: 320px,
   mob-m: 480px,

package/core/neatui.core.scss.backup

@@ -0,0 +1,34 @@
+// neatui.core.scss
+
+@charset "utf-8";
+@use 'sass:math';
+// 主题
+@forward './theme-v3.scss';
+// 色号
+// @use './color.scss';
+// 响应
+// @forward './media.scss';
+// 重置
+// @forward './reset.scss';
+// 基础
+// @forward './base.scss';
+// // 字号
+// @forward './size.scss';
+// // 栅格
+// @forward './cols.scss';
+// // 格子（新）
+// @forward './grid.scss';
+// // 微调
+// @forward './trim.scss';
+// // 边框
+// @forward './border.scss';
+// // 布局
+// @forward './flex.scss';
+// // 缩小
+// @forward './scale.scss';
+// // 滚动条
+// @forward './scroll.scss';
+// // 封面
+// @forward './cover.scss';
+// // 交互
+// @forward './ux.scss';

package/core/reset.scss

@@ -59,10 +59,6 @@ textarea {
   background-color: transparent;
 }
 
-// input:-webkit-autofill {
-//   box-shadow: 0 0 0 1000px white inset;
-// }
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,

package/core/scroll.scss

@@ -1,3 +1,5 @@
+@use './media.scss' as *;
+
 %scroll {
   & {
     -webkit-overflow-scrolling: touch;

package/core/size.scss

@@ -144,20 +144,11 @@
 @include randSize();
 
 // 平板
-@include pad {
+@media screen and (max-width: 1024px) {
   @include randSize('pad\\:');
 }
 
 // 移动
-// @media screen and (max-width: 767px) {
-// @include baseSize(15);
-// @include randSize('mob\\:');
-// }
-@include mob {
+@media screen and (max-width: 767px) {
   @include randSize('mob\\:');
 }
-
-// 超小屏
-// @media screen and (max-width: 374px) {
-// @include baseSize(9);
-// }