@neatui/css 1.0.2

package/core/border.scss

@@ -0,0 +1,307 @@
+.b-solid {
+  border-style: solid;
+}
+.b-dashed {
+  border-style: dashed;
+}
+.b-dotted {
+  border-style: dotted;
+}
+
+@mixin trim($media: '') {
+  .#{$media}b-no {
+    border-width: 0px;
+  }
+  .#{$media}b-xs {
+    border-width: 1px;
+  }
+  .#{$media}b-ss {
+    border-width: 2px;
+  }
+  .#{$media}b-sm {
+    border-width: 3px;
+  }
+  .#{$media}b-sl {
+    border-width: 4px;
+  }
+  .#{$media}b-ms {
+    border-width: 5px;
+  }
+  .#{$media}b-mm {
+    border-width: 0.5rem;
+  }
+  .#{$media}b-ml {
+    border-width: 0.6rem;
+  }
+  .#{$media}b-ls {
+    border-width: 0.7rem;
+  }
+  .#{$media}b-lm {
+    border-width: 0.8rem;
+  }
+  .#{$media}b-ll {
+    border-width: 0.9rem;
+  }
+  .#{$media}b-xl {
+    border-width: 1rem;
+  }
+
+  .#{$media}bx-no {
+    border-left-width: 0px;
+    border-right-width: 0px;
+  }
+  .#{$media}bx-xs {
+    border-left-width: 1px;
+    border-right-width: 1px;
+  }
+  .#{$media}bx-ss {
+    border-left-width: 2px;
+    border-right-width: 2px;
+  }
+  .#{$media}bx-sm {
+    border-left-width: 3px;
+    border-right-width: 3px;
+  }
+  .#{$media}bx-sl {
+    border-left-width: 4px;
+    border-right-width: 4px;
+  }
+  .#{$media}bx-ms {
+    border-left-width: 5px;
+    border-right-width: 5px;
+  }
+  .#{$media}bx-mm {
+    border-left-width: 0.5rem;
+    border-right-width: 0.5rem;
+  }
+  .#{$media}bx-ml {
+    border-left-width: 0.6rem;
+    border-right-width: 0.6rem;
+  }
+  .#{$media}bx-ls {
+    border-left-width: 0.7rem;
+    border-right-width: 0.7rem;
+  }
+  .#{$media}bx-lm {
+    border-left-width: 0.8rem;
+    border-right-width: 0.8rem;
+  }
+  .#{$media}bx-ll {
+    border-left-width: 0.9rem;
+    border-right-width: 0.9rem;
+  }
+  .#{$media}bx-xl {
+    border-left-width: 1rem;
+    border-right-width: 1rem;
+  }
+
+  .#{$media}by-no {
+    border-top-width: 0px;
+    border-bottom-width: 0px;
+  }
+  .#{$media}by-xs {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+  .#{$media}by-ss {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+  .#{$media}by-sm {
+    border-top-width: 3px;
+    border-bottom-width: 3px;
+  }
+  .#{$media}by-sl {
+    border-top-width: 4px;
+    border-bottom-width: 4px;
+  }
+  .#{$media}by-ms {
+    border-top-width: 5px;
+    border-bottom-width: 5px;
+  }
+  .#{$media}by-mm {
+    border-top-width: 0.5rem;
+    border-bottom-width: 0.5rem;
+  }
+  .#{$media}by-ml {
+    border-top-width: 0.6rem;
+    border-bottom-width: 0.6rem;
+  }
+  .#{$media}by-ls {
+    border-top-width: 0.7rem;
+    border-bottom-width: 0.7rem;
+  }
+  .#{$media}by-lm {
+    border-top-width: 0.8rem;
+    border-bottom-width: 0.8rem;
+  }
+  .#{$media}by-ll {
+    border-top-width: 0.9rem;
+    border-bottom-width: 0.9rem;
+  }
+  .#{$media}by-xl {
+    border-top-width: 1rem;
+    border-bottom-width: 1rem;
+  }
+
+  .#{$media}bt-no {
+    border-top-width: 0px;
+  }
+  .#{$media}bt-xs {
+    border-top-width: 1px;
+  }
+  .#{$media}bt-ss {
+    border-top-width: 2px;
+  }
+  .#{$media}bt-sm {
+    border-top-width: 3px;
+  }
+  .#{$media}bt-sl {
+    border-top-width: 4px;
+  }
+  .#{$media}bt-ms {
+    border-top-width: 5px;
+  }
+  .#{$media}bt-mm {
+    border-top-width: 0.5rem;
+  }
+  .#{$media}bt-ml {
+    border-top-width: 0.6rem;
+  }
+  .#{$media}bt-ls {
+    border-top-width: 0.7rem;
+  }
+  .#{$media}bt-lm {
+    border-top-width: 0.8rem;
+  }
+  .#{$media}bt-ll {
+    border-top-width: 0.9rem;
+  }
+  .#{$media}bt-xl {
+    border-top-width: 1rem;
+  }
+
+  .#{$media}br-no {
+    border-right-width: 0px;
+  }
+  .#{$media}br-xs {
+    border-right-width: 1px;
+  }
+  .#{$media}br-ss {
+    border-right-width: 2px;
+  }
+  .#{$media}br-sm {
+    border-right-width: 3px;
+  }
+  .#{$media}br-sl {
+    border-right-width: 4px;
+  }
+  .#{$media}br-ms {
+    border-right-width: 5px;
+  }
+  .#{$media}br-mm {
+    border-right-width: 0.5rem;
+  }
+  .#{$media}br-ml {
+    border-right-width: 0.6rem;
+  }
+  .#{$media}br-ls {
+    border-right-width: 0.7rem;
+  }
+  .#{$media}br-lm {
+    border-right-width: 0.8rem;
+  }
+  .#{$media}br-ll {
+    border-right-width: 0.9rem;
+  }
+  .#{$media}br-xl {
+    border-right-width: 1rem;
+  }
+
+  .#{$media}bb-no {
+    border-bottom-width: 0px;
+  }
+  .#{$media}bb-xs {
+    border-bottom-width: 1px;
+  }
+  .#{$media}bb-ss {
+    border-bottom-width: 2px;
+  }
+  .#{$media}bb-sm {
+    border-bottom-width: 3px;
+  }
+  .#{$media}bb-sl {
+    border-bottom-width: 4px;
+  }
+  .#{$media}bb-ms {
+    border-bottom-width: 5px;
+  }
+  .#{$media}bb-mm {
+    border-bottom-width: 0.5rem;
+  }
+  .#{$media}bb-ml {
+    border-bottom-width: 0.6rem;
+  }
+  .#{$media}bb-ls {
+    border-bottom-width: 0.7rem;
+  }
+  .#{$media}bb-lm {
+    border-bottom-width: 0.8rem;
+  }
+  .#{$media}bb-ll {
+    border-bottom-width: 0.9rem;
+  }
+  .#{$media}bb-xl {
+    border-bottom-width: 1rem;
+  }
+
+  .#{$media}bl-no {
+    border-left-width: 0px;
+  }
+  .#{$media}bl-xs {
+    border-left-width: 1px;
+  }
+  .#{$media}bl-ss {
+    border-left-width: 2px;
+  }
+  .#{$media}bl-sm {
+    border-left-width: 3px;
+  }
+  .#{$media}bl-sl {
+    border-left-width: 4px;
+  }
+  .#{$media}bl-ms {
+    border-left-width: 5px;
+  }
+  .#{$media}bl-mm {
+    border-left-width: 0.5rem;
+  }
+  .#{$media}bl-ml {
+    border-left-width: 0.6rem;
+  }
+  .#{$media}bl-ls {
+    border-left-width: 0.7rem;
+  }
+  .#{$media}bl-lm {
+    border-left-width: 0.8rem;
+  }
+  .#{$media}bl-ll {
+    border-left-width: 0.9rem;
+  }
+  .#{$media}bl-xl {
+    border-left-width: 1rem;
+  }
+}
+
+// 桌面
+@include trim();
+
+// 平板
+@include pad {
+  @include trim('pad\\:');
+}
+
+// 移动
+@include mob {
+  @include trim('mob\\:');
+}

package/core/color.scss

@@ -0,0 +1,245 @@
+html {
+  @include theme {
+    color: co(read);
+    fill: co(read);
+    background-color: co(back);
+  }
+}
+
+@mixin color($n, $v) {
+  .co-#{$n},
+  .hover-co-#{$n}:hover {
+    color: #{$v} !important;
+    fill: #{$v} !important;
+  }
+  // 透明度
+  .co-#{$n}\+o-xs {
+    color: rgba($v, 0.05) !important;
+    fill: rgba($v, 0.05) !important;
+  }
+  .co-#{$n}\+o-ss {
+    color: rgba($v, 0.1) !important;
+    fill: rgba($v, 0.1) !important;
+  }
+  .co-#{$n}\+o-sm {
+    color: rgba($v, 0.2) !important;
+    fill: rgba($v, 0.2) !important;
+  }
+  .co-#{$n}\+o-sl {
+    color: rgba($v, 0.3) !important;
+    fill: rgba($v, 0.3) !important;
+  }
+  .co-#{$n}\+o-ms {
+    color: rgba($v, 0.4) !important;
+    fill: rgba($v, 0.4) !important;
+  }
+  .co-#{$n}\+o-mm {
+    color: rgba($v, 0.5) !important;
+    fill: rgba($v, 0.5) !important;
+  }
+  .co-#{$n}\+o-ml {
+    color: rgba($v, 0.6) !important;
+    fill: rgba($v, 0.6) !important;
+  }
+  .co-#{$n}\+o-ls {
+    color: rgba($v, 0.7) !important;
+    fill: rgba($v, 0.7) !important;
+  }
+  .co-#{$n}\+o-lm {
+    color: rgba($v, 0.8) !important;
+    fill: rgba($v, 0.8) !important;
+  }
+  .co-#{$n}\+o-ll {
+    color: rgba($v, 0.9) !important;
+    fill: rgba($v, 0.9) !important;
+  }
+  .co-#{$n}\+o-xl {
+    color: rgba($v, 0.95) !important;
+    fill: rgba($v, 0.95) !important;
+  }
+
+  .bg-#{$n},
+  .hover-bg-#{$n}:hover {
+    background-color: #{$v} !important;
+  }
+  // 透明度
+  .bg-#{$n}\+o-xs {
+    background-color: rgba($v, 0.05) !important;
+  }
+  .bg-#{$n}\+o-ss {
+    background-color: rgba($v, 0.1) !important;
+  }
+  .bg-#{$n}\+o-sm {
+    background-color: rgba($v, 0.2) !important;
+  }
+  .bg-#{$n}\+o-sl {
+    background-color: rgba($v, 0.3) !important;
+  }
+  .bg-#{$n}\+o-ms {
+    background-color: rgba($v, 0.4) !important;
+  }
+  .bg-#{$n}\+o-mm {
+    background-color: rgba($v, 0.5) !important;
+  }
+  .bg-#{$n}\+o-ml {
+    background-color: rgba($v, 0.6) !important;
+  }
+  .bg-#{$n}\+o-ls {
+    background-color: rgba($v, 0.7) !important;
+  }
+  .bg-#{$n}\+o-lm {
+    background-color: rgba($v, 0.8) !important;
+  }
+  .bg-#{$n}\+o-ll {
+    background-color: rgba($v, 0.9) !important;
+  }
+  .bg-#{$n}\+o-xl {
+    background-color: rgba($v, 0.95) !important;
+  }
+
+  .b-#{$n},
+  .bk-#{$n},
+  .hover-b-#{$n}:hover,
+  .hover-bk-#{$n}:hover {
+    border-color: #{$v} !important;
+  }
+  // 透明度
+  .bk-#{$n}\+o-xs {
+    border-color: rgba($v, 0.05) !important;
+  }
+  .bk-#{$n}\+o-ss {
+    border-color: rgba($v, 0.1) !important;
+  }
+  .bk-#{$n}\+o-sm {
+    border-color: rgba($v, 0.2) !important;
+  }
+  .bk-#{$n}\+o-sl {
+    border-color: rgba($v, 0.3) !important;
+  }
+  .bk-#{$n}\+o-ms {
+    border-color: rgba($v, 0.4) !important;
+  }
+  .bk-#{$n}\+o-mm {
+    border-color: rgba($v, 0.5) !important;
+  }
+  .bk-#{$n}\+o-ml {
+    border-color: rgba($v, 0.6) !important;
+  }
+  .bk-#{$n}\+o-ls {
+    border-color: rgba($v, 0.7) !important;
+  }
+  .bk-#{$n}\+o-lm {
+    border-color: rgba($v, 0.8) !important;
+  }
+  .bk-#{$n}\+o-ll {
+    border-color: rgba($v, 0.9) !important;
+  }
+  .bk-#{$n}\+o-xl {
+    border-color: rgba($v, 0.95) !important;
+  }
+}
+
+@mixin colors($d: '') {
+  $f: nth(nth($theme, 1), 1);
+  @each $i in $theme {
+    $n: nth($i, 1);
+    $s: nth($i, 2);
+    @if ($n == $f) {
+      html,
+      [theme] {
+        @each $c in $s {
+          @include color(nth($c, 1), nth($c, 2));
+        }
+      }
+    } @else {
+      [theme~='#{$n}'] {
+        @each $c in $s {
+          @include color(nth($c, 1), nth($c, 2));
+        }
+      }
+    }
+    @each $c in $s {
+      $cn: nth($c, 1);
+      $cv: nth($c, 2);
+      .#{$n}-co-#{$cn} {
+        color: $cv !important;
+      }
+      .#{$n}-bg-#{$cn} {
+        background-color: $cv !important;
+      }
+      .#{$n}-bk-#{$cn} {
+        border-color: $cv !important;
+      }
+    }
+  }
+}
+
+// 随机背景色
+.bg-0 {
+  @include theme {
+    background-color: 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();

package/core/cols.scss

@@ -0,0 +1,148 @@
+@mixin cols($cols: 24, $base: 160, $space: 1) {
+  [ui-row] {
+    & {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      & > * {
+        position: relative;
+      }
+    }
+
+    // 间距
+    &[ui-row~='space'] {
+      margin-left: -1rem;
+      margin-right: -1rem;
+      & > * {
+        padding: 1rem;
+      }
+    }
+
+    @include mob {
+      // 间距
+      &[ui-row~='space'] {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+        & > * {
+          padding: 0.5rem;
+        }
+      }
+    }
+
+    // 撑满
+    &[ui-row~=':full'] {
+      & > * > * {
+        height: 100%;
+      }
+    }
+
+    // 用于容器需要居中对齐
+    &[ui-row~='inline'] {
+      display: inline-flex;
+    }
+    // 反向
+    &[ui-row~='reverse'] {
+      flex-direction: row-reverse;
+    }
+  }
+
+  // 两种模块 普通模式和flex模式，普通模式废弃！
+  // [ui-row~='float'] {
+  //   & {
+  //     display: block;
+  //   }
+
+  //   // 清除浮动
+  //   &::after {
+  //     content: '';
+  //     display: table;
+  //     clear: both;
+  //   }
+
+  //   & > * {
+  //     position: relative;
+  //     height:100%;
+  //   }
+
+  //   // 向左浮动（默认）
+  //   & > *,
+  //   &[ui-row~='fl'] > * {
+  //     float: left;
+  //   }
+  //   // 向右浮动
+  //   &[ui-row~='fr'] > * {
+  //     float: right;
+  //   }
+  //   // 不要浮动
+  //   &[ui-row~='fn'] > * {
+  //     float: none !important;
+  //   }
+  // }
+
+  // 表格使用栅格
+  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: nth($level2, 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);
+        [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((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();