@neatui/css 2.0.10 → 3.0.0-beta.0

package/components/path/README.md

@@ -82,8 +82,8 @@ $theme: (
   top: 0;
 
   @include theme {
-    background-color: co(back);
-    color: co(text);
+    background-color: var(--co-back);
+    color: var(--co-text);
   }
 }
 ```

package/components/table/base.scss

@@ -24,7 +24,7 @@
         right: -5px;
         top: 0;
         // @include theme {
-        //   box-shadow: inset 5px 0 5px -5px rgba(co(text), 0.15);
+        //   box-shadow: inset 5px 0 5px -5px rgba(var(--co-text), 0.15);
         // }
         box-shadow: inset 5px 0 5px -5px var(--co-text-ss);
       }
@@ -40,7 +40,7 @@
         left: -5px;
         top: 0;
         // @include theme {
-        //   box-shadow: inset -5px 0 5px -5px rgba(co(text), 0.15);
+        //   box-shadow: inset -5px 0 5px -5px rgba(var(--co-text), 0.15);
         // }
         box-shadow: inset -5px 0 5px -5px var(--co-text-ss);
       }

package/components/table/table@a.scss

@@ -208,7 +208,7 @@
       transition: all 0.3s;
       &:hover {
         // @include theme {
-        //   background-color: rgba(co(weak), 0.5);
+        //   background-color: rgba(var(--co-weak), 0.5);
         // }
         background-color: var(-co-weak-mm);
       }

package/components/table/table@b.scss

@@ -50,7 +50,7 @@
           &:hover {
             // @include theme {
             box-shadow:
-              0 0 0 2px co(weak),
+              0 0 0 2px var(--co-weak),
               0 0 0 3px var(--co-line);
             z-index: 1;
             position: relative;

package/components/tips/base.scss

@@ -20,7 +20,7 @@
       right: 0.75em;
       bottom: -0.25em;
       left: auto;
-      box-shadow: 1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='tc'] {
@@ -43,7 +43,7 @@
       bottom: -0.25em;
       left: 50%;
       margin-left: -0.25em;
-      box-shadow: 1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='tr'] {
@@ -65,7 +65,7 @@
       right: auto;
       bottom: -0.25em;
       left: 0.75em;
-      box-shadow: 1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
 
@@ -88,7 +88,7 @@
       right: -0.25em;
       bottom: 0.75em;
       left: auto;
-      box-shadow: 1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='lm'] {
@@ -110,7 +110,7 @@
       bottom: auto;
       left: auto;
       margin-top: -0.25em;
-      box-shadow: 1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='lb'] {
@@ -131,7 +131,7 @@
       right: -0.25em;
       bottom: auto;
       left: auto;
-      box-shadow: 1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
 
@@ -167,7 +167,7 @@
       left: -0.25em;
       bottom: 0.75em;
       right: auto;
-      box-shadow: -1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='rm'] {
@@ -190,7 +190,7 @@
       bottom: auto;
       right: auto;
       margin-top: -0.25em;
-      box-shadow: -1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='rb'] {
@@ -212,7 +212,7 @@
       left: -0.25em;
       bottom: auto;
       right: auto;
-      box-shadow: -1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
 
@@ -237,7 +237,7 @@
       right: 1em;
       top: -0.25em;
       left: auto;
-      box-shadow: -1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='bc'] {
@@ -261,7 +261,7 @@
       top: -0.25em;
       left: 50%;
       margin-left: -0.25em;
-      box-shadow: -1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='br'] {
@@ -284,7 +284,7 @@
       right: auto;
       top: -0.25em;
       left: 0.75em;
-      box-shadow: -1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
 

package/components/tips/tips@a.scss

@@ -12,7 +12,7 @@
     background: var(--co-fore);
     // }
     // box-shadow: 0 0 0.2em 1px rgba(0, 0, 0, 0.08);
-    box-shadow: 0 0 0.2em 1px var(--co-deep);
+    box-shadow: 0 0 0.2em 1px var(--co-text-ss);
     // padding: 0.5em;
     border-radius: 0.25em;
     pointer-events: none;

package/core/README.md

@@ -82,8 +82,8 @@ $theme: (
   top: 0;
 
   @include theme {
-    background-color: co(back);
-    color: co(text);
+    background-color: var(--co-back);
+    color: var(--co-text);
   }
 }
 ```

package/core/color.scss

@@ -1,12 +1,13 @@
-html {
-  color: var(--co-read);
-  fill: var(--co-read);
-  background-color: var(--co-back);
-}
+@use 'sass:list';
 
-@mixin color($n, $v) {
-  $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
+@mixin color() {
+  html {
+    color: var(--co-read);
+    fill: var(--co-read);
+    background-color: var(--co-back);
+  }
 
+  // 自动颜色
   .co-auto,
   .co-auto\:hover:hover,
   .co-auto\:active:active {
@@ -25,129 +26,118 @@ html {
     border-color: currentColor !important;
   }
 
-  .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;
+  // 随机颜色
+  .bg-0 {
+    background-color: var(--co-main);
   }
 
-  @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-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;
   }
-}
 
-@mixin colors($d: '') {
-  $f: nth(nth($theme, 1), 1);
+  $f: list.nth(list.nth($theme, 1), 1);
   @each $i in $theme {
-    $n: nth($i, 1);
-    $s: nth($i, 2);
-    @if ($n == $f) {
-      html {
-        @each $c in $s {
-          @include color(nth($c, 1), nth($c, 2));
-        }
+    $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;
       }
-    } @else {
-      [theme~='#{$n}'] {
-        @each $c in $s {
-          @include color(nth($c, 1), nth($c, 2));
+      .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);
-}
-
-.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;
-}
-
-// 桌面
-@include colors();
+@include color();

package/core/cols.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:math';
+
 @mixin cols($cols: 24, $base: 160, $space: 1) {
   [ui-row] {
     & {
@@ -93,14 +96,14 @@
   $level2: 'mob', '', '', 'pad', '', '', 'dpc', '', '';
 
   @each $i in $level {
-    $d: nth($level2, index($level, $i));
+    $d: list.nth($level2, list.index($level, $i));
     // 遍历断点
     $base: $base + 160;
     // 基础
     @if ($i == 'mob-s') {
       @for $n from 0 through $cols {
         // 宽度
-        $w: calc(floor(calc(100% / $cols * $n) * 100000) / 100000);
+        $w: calc(math.floor(calc(100% / $cols * $n) * 100000) / 100000);
         [ui-row~='mob-#{$n}'] > *,
         [ui-row~='#{$i}-#{$n}'] > *,
         [ui-row] [ui-col~='mob-#{$n}'],
@@ -112,7 +115,7 @@
       @media (min-width: #{$base}px) {
         @for $n from 0 through $cols {
           // 宽度
-          $w: calc((floor((calc(100% / $cols) * $n) * 100000) / 100000));
+          $w: calc((math.floor((calc(100% / $cols) * $n) * 100000) / 100000));
           @if ($d != '') {
             // 三端
             [ui-row~='#{$d}-#{$n}'] > *,

package/core/media.scss

@@ -1,6 +1,20 @@
+@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: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
   @media screen and (min-width: 1120px) {
     @if ($this == '') {
       @content;
@@ -14,7 +28,7 @@
 
 // 平板
 @mixin pad() {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
   @media screen and (max-width: 1119px) {
     @if ($this == '') {
       @content;
@@ -28,7 +42,7 @@
 
 // 移动
 @mixin mob() {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
   @media screen and (max-width: 799px) {
     @if ($this == '') {
       @content;
@@ -40,24 +54,12 @@
   }
 }
 
-$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 med($p) {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
 
-  $r: str-slice($p, 1, 1);
-  $_n: str-slice($p, 2, -1);
+  $r: string.slice($p, 1, 1);
+  $_n: string.slice($p, 2, -1);
 
   // 大于某节点时
   @if ($r == '>') {
@@ -86,8 +88,8 @@ $level: (
       }
     }
     @each $sz in $level {
-      $n: #{nth($sz, 1)};
-      $v: #{nth($sz, 2)};
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2)};
       @if ($_n == $n) {
         @media screen and (min-width: $v) {
           @if ($this == '') {
@@ -129,8 +131,8 @@ $level: (
     }
 
     @each $sz in $level {
-      $n: #{nth($sz, 1)};
-      $v: #{nth($sz, 2) - 1};
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2) - 1};
       @if ($_n == $n) {
         @media screen and (max-width: $v) {
           @if ($this == '') {
@@ -180,9 +182,9 @@ $level: (
       }
     }
     @each $sz in $level {
-      $n: #{nth($sz, 1)};
-      $v: #{nth($sz, 2)};
-      $m: #{nth($sz, 2) + 159};
+      $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) {
@@ -204,7 +206,7 @@ $level: (
 
 // 大于某节点时
 @each $sz in $level {
-  $n: #{nth($sz, 1)};
+  $n: #{list.nth($sz, 1)};
   [ui-hide~='>#{$n}'] {
     @include med('>#{$n}') {
       display: none !important;
@@ -224,7 +226,7 @@ $level: (
 
 // 小于某节点时
 @each $sz in $level {
-  $n: #{nth($sz, 1)};
+  $n: #{list.nth($sz, 1)};
   [ui-hide~='<#{$n}'] {
     @include med('<#{$n}') {
       display: none !important;
@@ -244,7 +246,7 @@ $level: (
 
 // 等于某节点时
 @each $sz in $level {
-  $n: #{nth($sz, 1)};
+  $n: #{list.nth($sz, 1)};
   [ui-hide~='=#{$n}'] {
     @include med('=#{$n}') {
       display: none !important;

package/core/neatui@core.scss

@@ -2,7 +2,9 @@
 @use 'sass:math';
 // 主题
 @import './theme.scss';
-// 媒体查询
+// 色号
+@import './color.scss';
+// 响应
 @import './media.scss';
 // 重置
 @import './reset.scss';
@@ -10,18 +12,16 @@
 @import './base.scss';
 // 字号
 @import './size.scss';
-// 色号
-@import './color.scss';
 // 栅格
 @import './cols.scss';
 // 微调
 @import './trim.scss';
 // 边框
 @import './border.scss';
-// 弹性布局
+// 布局
 @import './flex.scss';
 // 缩小
-// @import './scale.scss';
+@import './scale.scss';
 // 滚动条
 @import './scroll.scss';
 // 封面

package/core/scale.scss

@@ -1,24 +1,29 @@
-// @mixin scale($d: '') {
-//   $rank: 'xxs', 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl', 'xxl';
+@mixin scale($d: '') {
+  $rank: 'xxs', 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl', 'xxl';
 
-//   $sz: 0;
-//   @each $k in $rank {
-//     [ui-scale~='#{$k}'] {
-//       transform: scale($sz);
+  $sz: 0;
+  @each $k in $rank {
+    .s-#{$k},
+    [ui-scale~='#{$k}'] {
+      transform: scale($sz);
 
-//       &[ui-scale~='ct'] {
-//         transform-origin: 50% 0%;
-//       }
-//       &[ui-scale~='cb'] {
-//         transform-origin: 50% 100%;
-//       }
-//       &[ui-scale~='lm'] {
-//         transform-origin: 0% 50%;
-//       }
-//       &[ui-scale~='rm'] {
-//         transform-origin: 100% 50%;
-//       }
-//     }
-//     $sz: $sz + 0.1;
-//   }
-// }
+      &.s-ct,
+      &[ui-scale~='ct'] {
+        transform-origin: 50% 0%;
+      }
+      &.s-cb,
+      &[ui-scale~='cb'] {
+        transform-origin: 50% 100%;
+      }
+      &.s-cl,
+      &[ui-scale~='lm'] {
+        transform-origin: 0% 50%;
+      }
+      &.s-cr,
+      &[ui-scale~='rm'] {
+        transform-origin: 100% 50%;
+      }
+    }
+    $sz: $sz + 0.1;
+  }
+}