@neatui/css 3.10.6 → 3.12.0

package/core/trim.scss

@@ -376,36 +376,45 @@
       &\+ {
         width: #{$w_base + 1}em;
       }
-      &\* {
+      &\*s {
         width: #{$w_base * 2}em;
       }
-      &\*3 {
+      &\*m {
         width: #{$w_base * 3}em;
       }
+      &\*l {
+        width: #{$w_base * 4}em;
+      }
     }
     .#{$media}min-w-#{$sz} {
       min-width: #{$w_base}em;
       &\+ {
         min-width: #{$w_base + 1}em;
       }
-      &\* {
+      &\*s {
         min-width: #{$w_base * 2}em;
       }
-      &\*3 {
+      &\*m {
         min-width: #{$w_base * 3}em;
       }
+      &\*l {
+        min-width: #{$w_base * 4}em;
+      }
     }
     .#{$media}max-w-#{$sz} {
       max-width: #{$w_base}em;
       &\+ {
         max-width: #{$w_base + 1}em;
       }
-      &\* {
+      &\*s {
         max-width: #{$w_base * 2}em;
       }
-      &\*3 {
+      &\*m {
         max-width: #{$w_base * 3}em;
       }
+      &\*l {
+        max-width: #{$w_base * 4}em;
+      }
     }
     $w_base: $w_base + 2;
   }
@@ -418,36 +427,45 @@
       &\+ {
         height: #{$h_base + 1}em;
       }
-      &\* {
+      &\*s {
         height: #{$h_base * 2}em;
       }
-      &\*3 {
+      &\*m {
         height: #{$h_base * 3}em;
       }
+      &\*l {
+        height: #{$h_base * 4}em;
+      }
     }
     .#{$media}min-h-#{$sz} {
       min-height: #{$h_base}em;
       &\+ {
         min-height: #{$h_base + 1}em;
       }
-      &\* {
+      &\*s {
         min-height: #{$h_base * 2}em;
       }
-      &\*3 {
+      &\*m {
         min-height: #{$h_base * 3}em;
       }
+      &\*l {
+        min-height: #{$h_base * 4}em;
+      }
     }
     .#{$media}max-h-#{$sz} {
       max-height: #{$h_base}em;
       &\+ {
         max-height: #{$h_base + 1}em;
       }
-      &\* {
+      &\*s {
         max-height: #{$h_base * 2}em;
       }
-      &\*3 {
+      &\*m {
         max-height: #{$h_base * 3}em;
       }
+      &\*l {
+        max-height: #{$h_base * 4}em;
+      }
     }
     $h_base: $h_base + 2;
   }

package/core/vars.scss

@@ -1 +1,2 @@
-$sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
+// 分级
+$grades: no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl, xx;

package/neatui.scss

@@ -5,6 +5,8 @@
 @forward './core/reset.scss';
 // 主题
 @forward './core/theme.scss';
+// 颜色
+@forward './core/color.scss';
 // 响应
 @forward './core/media.scss';
 // 基础

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "@neatui/css",
-  "version": "3.10.6",
+  "version": "3.12.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",
   "author": "xiaojunbo",
+  "scripts": {
+    "build": "yarn build:scss && yarn build:optimize && yarn build:minify",
+    "build:scss": "sass neatui.scss dist/neatui.css --no-source-map",
+    "build:optimize": "postcss dist/neatui.css -o dist/neatui.css --no-map",
+    "build:minify": "cleancss -o dist/neatui.min.css dist/neatui.css"
+  },
   "peerDependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "sass": "^1.80.7",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "postcss-merge-rules": "^7.0.4",
+    "cssnano": "^7.0.6",
+    "clean-css-cli": "^5.6.3"
+  },
   "dependencies": {}
 }

package/postcss.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  plugins: [
+    require('cssnano')({
+      preset: ['default', {
+        mergeLonghand: true,
+        mergeRules: true,
+        discardComments: {
+          removeAll: false
+        },
+        normalizeWhitespace: false,
+        colormin: true,
+        minifySelectors: true,
+        minifyParams: true,
+        uniqueSelectors: true,
+        reduceIdents: false,
+        discardUnused: false
+      }]
+    })
+  ]
+};

package/core/cols@v2.scss

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

@@ -1,105 +0,0 @@
-/*
- * 模块：字号
- * 模块类型：b(基础模块)
- * 精度：9 +
- * 分级：3 +
- * 适配：桌面 | 平析 | 移动
- * 兼容：
- * 版本：v0.0.1
- * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
- */
-
-// 全局字号
-// @mixin baseSize($sz: 13) {
-//   $size: 'xs', 's', 'm', 'l', 'xl';
-
-//   @each $i in $size {
-//     [size='#{$i}'],
-//     [ui-size='#{$i}'] {
-//       $s: index($size, $i) + $sz;
-//       font-size: #{$s}px;
-//     }
-//   }
-// }
-
-// 分级字号
-@mixin randSize($d: '') {
-  $rank: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
-  // 分级字号
-  .#{$d}fs-no {
-    font-size: 0rem;
-  }
-  .#{$d}lh-no {
-    line-height: 0;
-  }
-
-  $sz: 0.2;
-
-  @each $k in $rank {
-    .#{$d}lh-#{$k} {
-      line-height: #{$sz * 5};
-    }
-
-    @if ($sz<0.2) {
-      $sz: $sz + 0.01;
-    } @else if ($sz<.28) {
-      $sz: $sz + 0.02;
-    } @else if($sz<.4) {
-      $sz: $sz + 0.04;
-    } @else if($sz<.6) {
-      $sz: $sz + 0.06;
-    } @else {
-      $sz: $sz + 0.08;
-    }
-
-    .#{$d}fs-#{$k},
-    .#{$d}fs-#{$k}-sub > *,
-    .#{$d}fs-#{$k}-sub\:sta > *::before,
-    .#{$d}fs-#{$k}-sub\:end > *::after,
-    .#{$d}fs-#{$k}\:sta::before,
-    .#{$d}fs-#{$k}\:end::after {
-      font-size: #{$sz}rem;
-    }
-  }
-
-  // 标题
-  $hsz: 1;
-
-  h1,
-  .h1 {
-    font-size: 2em;
-  }
-  h2,
-  .h2 {
-    font-size: 1.6em;
-  }
-  h3,
-  .h3 {
-    font-size: 1.4em;
-  }
-  h4,
-  .h4 {
-    font-size: 1.2em;
-  }
-  h5,
-  .h5 {
-    font-size: 1.1em;
-  }
-  h6,
-  .h6 {
-    font-size: 1em;
-  }
-}
-
-// 桌面
-@include randSize();
-
-// 平板
-@media screen and (max-width: 1024px) {
-  @include randSize('pad\\:');
-}
-
-// 移动
-@media screen and (max-width: 767px) {
-  @include randSize('mob\\:');
-}

package/core/var.scss

@@ -1,2 +0,0 @@
-$sz: 'xs', 's', 'm', 'l', 'xl';
-$co: 'main', 'vice', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';