@neatui/css 1.0.2

package/core/mcui@core.scss

@@ -0,0 +1,36 @@
+@charset "utf-8";
+@use 'sass:math';
+// 主题
+@import './theme.scss';
+// 媒体查询
+@import './media.scss';
+// 重置
+@import './reset.scss';
+// 基础
+@import './base.scss';
+// 对齐
+@import './pos.scss';
+// 字号
+@import './size.scss';
+// 色号
+@import './color.scss';
+// 栅格
+@import './cols.scss';
+// 微调
+@import './trim.scss';
+// 边距
+@import './padding.scss';
+// 外边距
+@import './margin.scss';
+// 边框
+@import './border.scss';
+// 弹性布局
+@import './flex.scss';
+// 缩小
+@import './scale.scss';
+// 滚动条
+@import './scroll.scss';
+// 封面
+@import './cover.scss';
+// 交互
+@import './ux.scss';

package/core/mcui@mobile.scss

@@ -0,0 +1,37 @@
+@charset "utf-8";
+@use 'sass:math';
+// 主题
+@import './theme.scss';
+// 媒体查询
+@import './media.scss';
+// 重置
+@import './reset.scss';
+// 基础
+@import './base.scss';
+// 对齐
+@import './pos.scss';
+// 字号
+@import './size.mobile.scss';
+
+// 色号
+@import './color.scss';
+// 栅格
+@import './cols.scss';
+// 微调
+@import './trim.mobile.scss';
+// 边距
+@import './padding.scss';
+// 外边距
+@import './margin.scss';
+// 边框
+@import './border.scss';
+// 弹性布局
+@import './flex.scss';
+// 缩小
+@import './scale.scss';
+// 滚动条
+@import './scroll.scss';
+// 封面
+@import './cover.scss';
+// 交互
+@import './ux.scss';

package/core/media.scss

@@ -0,0 +1,268 @@
+// 桌面
+@mixin dpc() {
+  $this: #{nth(&, 1)};
+  @media screen and (min-width: 1120px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 平板
+@mixin pad() {
+  $this: #{nth(&, 1)};
+  @media screen and (max-width: 1119px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+// 移动
+@mixin mob() {
+  $this: #{nth(&, 1)};
+  @media screen and (max-width: 799px) {
+    @if ($this == '') {
+      @content;
+    } @else {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
+$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)};
+
+  $r: str-slice($p, 1, 1);
+  $_n: str-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: #{nth($sz, 1)};
+      $v: #{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: #{nth($sz, 1)};
+      $v: #{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: #{nth($sz, 1)};
+      $v: #{nth($sz, 2)};
+      $m: #{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: #{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: #{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: #{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/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@neatui/core",
+  "version": "1.12.12",
+  "description": "MCUI 核心组件，MCUI 全局架构性组件。官网 https://mcui.fekit.cn",
+  "main": "mcui@core.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {},
+  "keywords": [
+    "mcui",
+    "ui"
+  ]
+}

package/core/pos.scss

@@ -0,0 +1,252 @@
+[ui-pos] {
+  position: relative;
+  display: flex;
+  // pointer-events: none;
+  flex-wrap: wrap;
+
+  // 行列
+  &,
+  &[ui-pos~=':row'] {
+    flex-direction: row;
+
+    &[ui-pos~='lt'] {
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='ct'] {
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='rt'] {
+      justify-content: flex-end;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='xt'] {
+      justify-content: space-between;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+    &[ui-pos~='at'] {
+      justify-content: space-around;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='lm'] {
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='cm'] {
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='rm'] {
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='xm'] {
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='am'] {
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='lb'] {
+      justify-content: flex-start;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='cb'] {
+      justify-content: center;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='rb'] {
+      justify-content: flex-end;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='xb'] {
+      justify-content: space-between;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='ab'] {
+      justify-content: space-around;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+  }
+  &[ui-pos~=':col'] {
+    flex-direction: column;
+
+    &[ui-pos~='lt'] {
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='ct'] {
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='rt'] {
+      justify-content: flex-start;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='xt'] {
+      justify-content: flex-start;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &[ui-pos~='at'] {
+      justify-content: flex-start;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &[ui-pos~='lm'] {
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='cm'] {
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='rm'] {
+      justify-content: center;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='xm'] {
+      justify-content: center;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &[ui-pos~='am'] {
+      justify-content: center;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &[ui-pos~='lb'] {
+      justify-content: flex-end;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='cb'] {
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-pos~='rb'] {
+      justify-content: flex-end;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-pos~='xb'] {
+      justify-content: flex-end;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &[ui-pos~='ab'] {
+      justify-content: flex-end;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &[ui-pos~='ly'] {
+      justify-content: space-between;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+    &[ui-pos~='la'] {
+      justify-content: space-around;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-pos~='cy'] {
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+    }
+    &[ui-pos~='ca'] {
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+    }
+    &[ui-pos~='ry'] {
+      justify-content: space-between;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+    &[ui-pos~='ra'] {
+      justify-content: space-around;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+    &[ui-pos~='xy'] {
+      justify-content: space-between;
+      align-items: space-between;
+      align-content: space-between;
+    }
+    &[ui-pos~='aa'] {
+      justify-content: space-around;
+      align-items: space-around;
+      align-content: space-around;
+    }
+  }
+
+  // 撑满
+  &[ui-pos~=':full'] {
+    flex-grow: 1;
+  }
+
+  // 行内
+  &[ui-pos~=':inline'] {
+    display: inline-flex;
+  }
+
+  // 不换行
+  &[ui-pos~=':nowrap'] {
+    flex-wrap: nowrap;
+  }
+
+  & > * {
+    position: relative !important;
+  }
+}