@neatui/css 1.0.2

package/core/theme.scss

@@ -0,0 +1,156 @@
+$default: (
+  '_sys': (
+    main: #d52932,
+    vice: #67337d,
+    text: #111,
+    fore: #fff,
+    back: #f7f7f7,
+    land: #ff9900,
+    link: #0d66d0,
+    code: #e23861,
+    well: #4bbc73,
+    warn: #fb9a2a,
+    risk: #f95850,
+    info: #0889e4
+  )
+);
+
+// 检测
+@if (global-variable-exists(theme)) {
+  // 检测关键的基础颜色是否完整
+  @each $var in $theme {
+    $n: nth($var, 1);
+    $s: nth($var, 2);
+    @debug '检测到主题色卡[theme=#{$n}]';
+
+    // @debug '检查主题关键颜色是否完整!';
+    $baseColor: 'main', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk', 'info';
+    @each $baseColorItem in $baseColor {
+      @if (map-has-key($s, $baseColorItem)) {
+      } @else {
+        @error '[theme=#{$n}]主题缺少一个关键的基础颜色#{$baseColorItem}';
+      }
+    }
+  }
+} @else {
+  @debug '未定义基础色卡，请遵循MCUI设计规范建立主题色卡；https://mcui.asnowsoft.com/#/start/design';
+  @debug '尝试修复错误...';
+  @debug '创建系统默认色卡[theme=_sys]';
+  $theme: $default !global;
+}
+
+// 扩展颜色
+@each $i in $theme {
+  $n: nth($i, 1);
+  $s: nth($i, 2);
+  $m: (
+    read: mix(map-get($s, 'text'), map-get($s, 'fore'), 80%),
+    desc: mix(map-get($s, 'text'), map-get($s, 'fore'), 60%),
+    note: mix(map-get($s, 'text'), map-get($s, 'fore'), 40%),
+    idle: mix(map-get($s, 'text'), map-get($s, 'fore'), 25%),
+    case: mix(map-get($s, 'text'), map-get($s, 'fore'), 20%),
+    line: mix(map-get($s, 'text'), map-get($s, 'fore'), 8%),
+    weak: mix(map-get($s, 'text'), map-get($s, 'fore'), 3%),
+    deep:
+      rgb(
+        red(map-get($s, 'back')) - (red(map-get($s, 'back')) * 0.05 + 5),
+        green(map-get($s, 'back')) - (green(map-get($s, 'back')) * 0.05 + 5),
+        blue(map-get($s, 'back')) - (blue(map-get($s, 'back')) * 0.05 + 5)
+      ),
+    none: transparent,
+    w: #fff,
+    b: #000
+  );
+  // 将扩展颜色加入放题色卡中
+  $theme: map-merge(
+    $theme,
+    (
+      $n: map-merge($m, $s)
+    )
+  ) !global;
+}
+
+// 主题
+@mixin theme($themeName: null) {
+  $hasTheme: map-get($theme, $themeName);
+  @if ($themeName != null) {
+    @if ($hasTheme != null) {
+      $t: $hasTheme;
+      $first: nth(nth($theme, 1), 1);
+      $n: $themeName;
+      $this: #{nth(&, 1)};
+      @if ($this == 'html' or $this == '' or $this == null) {
+        @if ($n == $first) {
+          @at-root html,
+            [theme],
+            [theme='#{$n}'] {
+            @content;
+          }
+        } @else {
+          @at-root [theme='#{$n}'] {
+            @content;
+          }
+        }
+      } @else {
+        @if ($n == $first) {
+          @content;
+        } @else {
+          [theme='#{$n}'] & {
+            @content;
+          }
+        }
+      }
+    } @else {
+      @debug '没有指定主题#{$hasTheme}';
+    }
+  } @else {
+    $first: nth(nth($theme, 1), 1);
+    @each $t in $theme {
+      $n: nth($t, 1);
+      $this: #{nth(&, 1)};
+      @if ($this == 'html' or $this == ':root' or $this == '' or $this == null) {
+        @if ($n == $first) {
+          @at-root html,
+            [theme],
+            [theme='#{$n}'] {
+            @content;
+          }
+        } @else {
+          @at-root [theme='#{$n}'] {
+            @content;
+          }
+        }
+      } @else {
+        @if ($n == $first) {
+          @content;
+        } @else {
+          [theme='#{$n}'] & {
+            @content;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 颜色
+@function co($a: '') {
+  @if (& != null) {
+    $r: nth(nth(&, 1), 1);
+    $n: str-slice($r, 8, -2);
+    $s: map-get($theme, $n);
+    @if ($s == null) {
+      $n: nth(nth($theme, 1), 1);
+      $s: nth(nth($theme, 1), 2);
+    }
+
+    @if ($s != null) {
+      @if (map-has-key($s, $a)) {
+        $a: map-get($s, $a);
+      } @else {
+        @debug '当前主题[theme=#{$n}]没有定义颜色名 #{$a}';
+      }
+    }
+    @return $a;
+  }
+}

package/core/trim.mobile.scss

@@ -0,0 +1,327 @@
+@mixin trim($media: '') {
+  $size: (no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl);
+
+  // 栅格
+  $col_base: 0;
+  $col_unit: rem;
+  @each $sz in $size {
+    @if ($sz == xs) {
+      $col_base: 1;
+      $col_unit: px;
+    } @else {
+      $col_unit: rem;
+    }
+
+    // 栅格系统配套
+    [ui-row] {
+      // 左右内边距
+      &.#{$media}n-#{$sz}-sub,
+      &.#{$media}nx-#{$sz}-sub,
+      &.#{$media}nl-#{$sz}-sub {
+        margin-left: -$col_base + $col_unit;
+      }
+      &.#{$media}n-#{$sz}-sub,
+      &.#{$media}nx-#{$sz}-sub,
+      &.#{$media}nr-#{$sz}-sub {
+        margin-right: -$col_base + $col_unit;
+      }
+    }
+
+    @if ($sz == xs) {
+      $col_base: 0;
+    }
+    @if ($col_base >= 1) {
+      $col_base: $col_base + 0.4;
+    } @else if($col_base >= 0.6) {
+      $col_base: $col_base + 0.2;
+    } @else {
+      $col_base: $col_base + 0.1;
+    }
+  }
+
+  // 边距
+  $base: 0;
+  $unit: rem;
+  @each $sz in $size {
+    @if ($sz == xs) {
+      $base: 1;
+      $unit: px;
+    } @else {
+      $unit: rem;
+    }
+
+    // 内边距
+    .#{$media}n {
+      &,
+      &x,
+      &l {
+        &-#{$sz} {
+          @at-root {
+            & {
+              padding-left: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              padding-left: $base + $unit;
+            }
+          }
+        }
+      }
+
+      &,
+      &x,
+      &r {
+        &-#{$sz} {
+          @at-root {
+            & {
+              padding-right: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              padding-right: $base + $unit;
+            }
+          }
+        }
+      }
+
+      &,
+      &y,
+      &t {
+        &-#{$sz} {
+          @at-root {
+            & {
+              padding-top: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              padding-top: $base + $unit;
+            }
+          }
+        }
+      }
+
+      &,
+      &y,
+      &b {
+        &-#{$sz} {
+          @at-root {
+            & {
+              padding-bottom: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              padding-bottom: $base + $unit;
+            }
+          }
+        }
+      }
+    }
+
+    // 外边距
+    .#{$media}m {
+      &,
+      &x,
+      &l {
+        &-#{$sz} {
+          @at-root {
+            & {
+              margin-left: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              margin-left: $base + $unit;
+            }
+          }
+
+          // 子集
+          &-sub > *,
+          &-sun > * > * {
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+        }
+      }
+
+      &,
+      &x,
+      &r {
+        &-#{$sz} {
+          @at-root {
+            & {
+              margin-right: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              margin-right: $base + $unit;
+            }
+          }
+
+          // 子集
+          &-sub > *,
+          &-sun > * > * {
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+
+      &,
+      &y,
+      &t {
+        &-#{$sz} {
+          @at-root {
+            & {
+              margin-top: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              margin-top: $base + $unit;
+            }
+          }
+        }
+      }
+
+      &,
+      &y,
+      &b {
+        &-#{$sz} {
+          @at-root {
+            & {
+              margin-bottom: $base + $unit !important;
+            }
+
+            html body &-sub > *,
+            &-sun > * > * {
+              margin-bottom: $base + $unit;
+            }
+          }
+        }
+      }
+    }
+
+    @if ($sz == xs) {
+      $base: 0;
+    }
+    @if ($base >= 1) {
+      $base: $base + 0.4;
+    } @else if($base >= 0.6) {
+      $base: $base + 0.2;
+    } @else {
+      $base: $base + 0.1;
+    }
+  }
+
+  // 圆角
+  $br_base: 0;
+  @each $sz in $size {
+    .#{$media}br-#{$sz} {
+      border-radius: #{$br_base}em;
+    }
+    $br_base: $br_base + 0.1;
+  }
+
+  // 边框
+  $bk_base: 0;
+  @each $sz in $size {
+    // 边框
+    .#{$media}b {
+      &,
+      &x,
+      &l {
+        &-#{$sz} {
+          &,
+          &-sub > *,
+          &-sun > * > * {
+            border-left-width: #{$bk_base}px;
+          }
+        }
+      }
+
+      &,
+      &x,
+      &r {
+        &-#{$sz} {
+          &,
+          &-sub > *,
+          &-sun > * > * {
+            border-right-width: #{$bk_base}px;
+          }
+        }
+      }
+
+      &,
+      &y,
+      &t {
+        &-#{$sz} {
+          &,
+          &-sub > *,
+          &-sun > * > * {
+            border-top-width: #{$bk_base}px;
+          }
+        }
+      }
+
+      &,
+      &y,
+      &b {
+        &-#{$sz} {
+          &,
+          &-sub > *,
+          &-sun > * > * {
+            border-bottom-width: #{$bk_base}px;
+          }
+        }
+      }
+    }
+
+    $bk_base: $bk_base + 1;
+  }
+
+  // 宽度
+  $w_base: 0;
+  @each $sz in $size {
+    .#{$media}w-#{$sz} {
+      width: #{$w_base}em;
+      max-width: 100%;
+    }
+    $w_base: $w_base + 1;
+    @if ($w_base > 5) {
+      $w_base: $w_base + 2;
+    }
+  }
+
+  // 高度
+  $h_base: 0;
+  @each $sz in $size {
+    .#{$media}h-#{$sz} {
+      height: #{$h_base}em;
+      max-height: 100%;
+    }
+    $h_base: $h_base + 2;
+    @if ($h_base > 5) {
+      $h_base: $h_base + 2;
+    }
+  }
+}
+
+// 桌面
+@include trim();
+
+// 平板
+@include pad {
+  @include trim('pad\:');
+}
+
+// 移动
+@include mob {
+  @include trim('mob\:');
+}