@neatui/css 1.0.2

package/path/README.md

@@ -0,0 +1,142 @@
+# @neatui/core
+
+MCUI 核心组件，MCUI 全局架构性组件。官网 [https://mcui.fekit.cn/](https://mcui.fekit.cn/)
+
+## 安装
+
+### 安装核心
+
+```
+npm i @neatui/core
+```
+
+### 安装组件
+
+```
+npm i @neatui/btns
+```
+
+## 引用
+
+```scss
+// main.scss
+
+// 添加主题
+$theme: (
+  light: (
+    main: #d52932,
+    // 主体
+    vice: #67337d,
+    // 辅助
+    text: #000000,
+    // 文本
+    back: #ffffff,
+    // 底色
+    link: #0d66d0,
+    // 链接
+    code: #e23861,
+    // 代码
+    well: #4bbc73,
+    // 提倡
+    warn: #fb9a2a,
+    // 警告
+    risk: #f95850,
+    // 风险
+    info: #0889e4 // 信息
+  ),
+  dark: (
+    main: #91cc48,
+    vice: #ffa60f,
+    text: rgba(255, 255, 255, 0.9),
+    back: #262629,
+    link: #00b9ff,
+    code: #e23861,
+    well: #49ca74,
+    warn: #fb9a2a,
+    risk: #fd7466,
+    info: #949af9
+  )
+  // 添加更多主题...
+);
+
+// 引用框架核心
+@import '~@neatui/core';
+
+// 引用业务组件
+@import '~@neatui/btns';
+// 引用更多组件...
+```
+
+## 使用
+
+### 颜色
+
+```scss
+@import '~@neatui/core';
+
+.header {
+  position: fixed;
+  width: 100%;
+  height: 4rem;
+  left: 0;
+  top: 0;
+
+  @include theme {
+    background-color: co(back);
+    color: co(text);
+  }
+}
+```
+
+↓
+
+```css
+/* 编译成css: */
+.header {
+  position: fixed;
+  width: 100%;
+  height: 4rem;
+  left: 0;
+  top: 0;
+}
+[mcui~='light'] .header {
+  background-color: #ffffff;
+  color: #000000;
+}
+[mcui~='dark'] .header {
+  background-color: #262629;
+  color: rgba(255, 255, 255, 0.9);
+}
+```
+
+### 响应三端
+
+```scss
+@import '~@neatui/core';
+
+body {
+  font-size: 14px;
+
+  @include mob {
+    font-size: 12px;
+  }
+}
+```
+
+↓
+
+```css
+/* 编译成css: */
+body {
+  font-size: 14px;
+}
+@media screen and (max-width: 767px) {
+  body {
+    font-size: 12px;
+  }
+}
+```
+
+## 更多
+
+详细文档请到MCUI官网 [https://mcui.fekit.cn](https://mcui.fekit.cn)

package/path/mcui@path.scss

@@ -0,0 +1 @@
+@import './path@a.scss';

package/path/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/path",
+  "version": "1.0.0",
+  "description": "",
+  "main": "mcui@path.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/mcui/mcui.desktop.git"
+  },
+  "keywords": [
+    "mcui"
+  ],
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/mcui/mcui.desktop/issues"
+  },
+  "homepage": "https://gitlab.com/mcui/mcui.desktop#readme"
+}

package/path/path@a.scss

@@ -0,0 +1,38 @@
+[ui-path~='@a'] {
+  & > * {
+    display: inline-flex;
+    align-items: center;
+    align-content: center;
+
+    &:not(:last-child) {
+      cursor: pointer;
+      transition: all 0.3s;
+      @include dpc {
+        &:hover {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      @include pad {
+        &:active {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      // 分隔符
+      &:after {
+        content: '';
+        width: 1em;
+        height: 1em;
+        background:
+          linear-gradient(225deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 70% 23.5% / 50% 35%,
+          linear-gradient(-45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 70% 76.5% / 50% 35%;
+        opacity: 0.5;
+      }
+    }
+  }
+}

package/side/side.scss

@@ -0,0 +1,2 @@
+[ui-side~='@a'] {
+}

package/steps/mcui@steps.scss

@@ -0,0 +1,2 @@
+@import './steps@a.scss';
+@import './steps@v.scss';

package/steps/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@neatui/steps",
+  "version": "1.0.8",
+  "description": "",
+  "main": "mcui@steps.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "steps"
+  ],
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {
+    "@neatui/icon": "^1.0.2"
+  }
+}

package/steps/steps@a.scss

@@ -0,0 +1,89 @@
+@import '../icon/icon@hook.scss';
+@import '../icon/icon@close.scss';
+$co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-steps~='@a'] {
+  & {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  &[ui-steps~=':block'] {
+    display: flex;
+  }
+
+  // 宽度撑满
+  &[ui-steps~=':full'] {
+    width: 100%;
+  }
+
+  & > * {
+    position: relative;
+    padding-top: 2em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    flex-grow: 1;
+    text-align: center;
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 1px;
+      border-radius: 2px;
+      left: 0;
+      top: 0.75em;
+      @include theme {
+        background: radial-gradient(circle at 50% 50%, transparent 2%, co(case) 2.1%) no-repeat center / 100em 100%;
+      }
+    }
+    &::after {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 1.5em;
+      height: 1.5em;
+      left: 50%;
+      margin-left: -0.75em;
+      top: 0;
+      border-radius: 50%;
+      @include theme {
+        border: 1px solid co(case);
+      }
+    }
+
+    &.done {
+      @include theme {
+        color: co(well);
+      }
+      &::before {
+        @include theme {
+          background: radial-gradient(circle at 50% 50%, transparent 2%, co(well) 2.1%) no-repeat center / 100em 100%;
+        }
+      }
+      &::after {
+        @include theme {
+          border: 1px solid co(well);
+        }
+        @extend %icon-hook;
+      }
+    }
+
+    &.fail {
+      @include theme {
+        color: co(risk);
+      }
+      &::before {
+        @include theme {
+          background: radial-gradient(circle at 50% 50%, transparent 2%, co(risk) 2.1%) no-repeat center / 100em 100%;
+        }
+      }
+      &::after {
+        border: 1px solid co(risk);
+        @extend %icon-close;
+      }
+    }
+  }
+}

package/steps/steps@v.scss

@@ -0,0 +1,122 @@
+@import '../icon/icon@hook.scss';
+@import '../icon/icon@close.scss';
+@import '../icon/icon@more.scss';
+
+$co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-steps~='@v'] {
+  & {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  // 宽度撑满
+  &[ui-steps~=':full'] {
+    width: 100%;
+  }
+
+  & > * {
+    position: relative;
+    padding-left: 2em;
+    padding-bottom: 1.5em;
+    flex-grow: 1;
+    @include theme {
+      color: co(note);
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    & > *:first-child {
+      line-height: 1.2;
+      margin-bottom: 0.2em;
+    }
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 1px;
+      border-radius: 2px;
+      left: 0.55em;
+      top: 1.5em;
+      bottom: 0.3em;
+      @include theme {
+        background: co(case);
+      }
+    }
+    &::after {
+      position: absolute;
+      display: block;
+      content: attr(data-num);
+      width: 1.2em;
+      height: 1.2em;
+      text-align: center;
+      line-height: 1em;
+      left: 0%;
+      top: 0;
+      border-radius: 50%;
+      @include theme {
+        color: co(note);
+        border: 1px solid co(note);
+      }
+    }
+
+    &.done {
+      @include theme {
+        color: co(main);
+      }
+      &::before {
+        @include theme {
+          background: co(main);
+        }
+      }
+      &::after {
+        content: '';
+        @include theme {
+          color: co(main);
+          border: 1px solid co(main);
+        }
+        @extend %icon-hook;
+      }
+    }
+
+    &.fail {
+      @include theme {
+        color: co(risk);
+      }
+      &::before {
+        @include theme {
+          background: co(risk);
+        }
+      }
+      &::after {
+        content: '';
+        @include theme {
+          color: co(risk);
+          border: 1px solid co(risk);
+        }
+        @extend %icon-close;
+      }
+    }
+
+    &.curr {
+      &::before {
+        @include theme {
+          background: co(read);
+        }
+      }
+      &::after {
+        content: '';
+        @include theme {
+          color: co(read);
+          border: 1px solid co(read);
+        }
+        @extend %icon-more;
+      }
+    }
+  }
+}

package/table/base.scss

@@ -0,0 +1,140 @@
+[ui-table] {
+  width: 100%;
+
+  th,
+  td {
+    &[col-fixed] {
+      position: sticky !important;
+      z-index: 1;
+    }
+
+    &[min-width] {
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    &[col-fixed-side='l'] {
+      position: sticky;
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 5px;
+        height: 100%;
+        right: -5px;
+        top: 0;
+        @include theme {
+          box-shadow: inset 5px 0 5px -5px rgba(co(text), 0.15);
+        }
+      }
+    }
+    &[col-fixed-side='r'] {
+      position: sticky;
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 5px;
+        height: 100%;
+        left: -5px;
+        top: 0;
+        @include theme {
+          box-shadow: inset -5px 0 5px -5px rgba(co(text), 0.15);
+        }
+      }
+    }
+  }
+
+  // 固宽
+  &[ui-table~=':fix'],
+  &[ui-table~=':fixed'] {
+    table-layout: fixed;
+  }
+
+  // 对齐
+  &[ui-table~=':vt'] {
+    th,
+    td {
+      vertical-align: top;
+    }
+  }
+  &[ui-table~=':vb'] {
+    th,
+    td {
+      vertical-align: bottom;
+    }
+  }
+
+  // 尺寸
+  &[ui-table~='sz:xs'] {
+    th,
+    td {
+      padding: 0.25em;
+    }
+  }
+  &[ui-table~='sz:s'] {
+    th,
+    td {
+      padding: 0.5em;
+    }
+  }
+  &,
+  &[ui-table~='sz:m'] {
+    th,
+    td {
+      padding: 0.75em;
+    }
+  }
+  &[ui-table~='sz:l'] {
+    th,
+    td {
+      padding: 1em;
+    }
+  }
+  &[ui-table~='sz:xl'] {
+    th,
+    td {
+      padding: 1.25em;
+    }
+  }
+
+  // 固定头部
+  .table-head-fixed {
+    @include theme {
+      background: co(fore);
+      box-shadow:
+        2px 0 0 co(fore),
+        -2px 0 0 co(fore),
+        0 -2px 0 co(fore),
+        0 1px 3px rgba(co(deep), 0.5);
+    }
+    position: sticky;
+    top: 0;
+    z-index: 3;
+  }
+}
+
+[scroll-side-l='1'] {
+  [ui-table] {
+    th,
+    td {
+      &[col-fixed-side='l'] {
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+[scroll-side-r='1'] {
+  [ui-table] {
+    th,
+    td {
+      &[col-fixed-side='r'] {
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/table/mcui@table.scss

@@ -0,0 +1,3 @@
+@import './table@a.scss';
+@import './table@b.scss';
+@import './table@c.scss';

package/table/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/table",
+  "version": "1.1.22",
+  "description": "",
+  "main": "mcui@table.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/mcui/mcui.desktop.git"
+  },
+  "keywords": [
+    "mcui"
+  ],
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/mcui/mcui.desktop/issues"
+  },
+  "homepage": "https://gitlab.com/mcui/mcui.desktop#readme"
+}