@neatui/css 1.0.2

package/tags/tags@b.scss

@@ -0,0 +1,131 @@
+$state: 'main', 'well', 'warn', 'risk', 'info', 'read', 'note', 'idle';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+// 单个
+[ui-tag~='@b'] {
+  display: inline-block;
+  padding: 0.5em 0.75em;
+  border-radius: 0.2rem;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+
+  // 圆角
+  &[ui-tag~=':round'] {
+    border-radius: 10em;
+  }
+  // 叶型
+  &[ui-tag~=':leaf'] {
+    border-radius: 0.5em 0;
+  }
+  // 弹头
+  &[ui-tag~=':bullet'] {
+    border-radius: 1em 0.2em 0.2em 1em;
+  }
+
+  // 尺寸
+  &[ui-tag~='sz:s'] {
+    padding: 0.25em 0.5em;
+  }
+  &[ui-tag~='sz:m'] {
+    padding: 0.5em 0.75em;
+  }
+  &[ui-tag~='sz:l'] {
+    padding: 0.75em 1em;
+  }
+
+  // 颜色
+  @each $key in $state {
+    @include theme {
+      $val: co($key);
+      $co: mix($val, co(text), 70%);
+      $bg: saturate(rgba($val, 0.2), 10%);
+      $bk: $val;
+
+      @if ($key== 'main') {
+        &,
+        &[ui-tag~='#{$key}'] {
+          color: $co;
+          background: $bg;
+        }
+      } @else {
+        &[ui-tag~='#{$key}'] {
+          color: $co;
+          background: $bg;
+        }
+      }
+    }
+  }
+}
+
+// 群组
+[ui-tags~='@b'] {
+  // 容器
+  & {
+    position: relative;
+    width: 100%;
+
+    &[ui-tags~='al'] {
+      & > * {
+        margin-right: 0.5rem;
+      }
+    }
+    &[ui-tags~='ac'] {
+      & > * {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+      }
+    }
+    &[ui-tags~='ar'] {
+      & > * {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+
+  // 子项
+  & > * {
+    display: inline-block;
+    padding: 0.5em 0.5em;
+    border-radius: 0.2rem;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  // 圆角
+  &[ui-tags~=':round'] > * {
+    border-radius: 10em;
+  }
+  // 叶型
+  &[ui-tags~=':leaf'] > * {
+    border-radius: 10em 0;
+  }
+  // 弹头
+  &[ui-tag~=':bullet'] > * {
+    padding: 0.5em 0.65em 0.5em 0.5em;
+    border-radius: 1em 0.2em 0.2em 1em;
+  }
+
+  // 主题
+  @each $key in $state {
+    @include theme {
+      $val: co($key);
+      $co: mix($val, co(text), 85%);
+      $bg: saturate(rgba($val, 0.08), 20%);
+      $bk: $val;
+
+      @if ($key== 'main') {
+        & > *,
+        &[ui-tags~='#{$key}'] > * {
+          color: $co;
+          background: $bg;
+        }
+      } @else {
+        &[ui-tags~='#{$key}'] > * {
+          color: $co;
+          background: $bg;
+        }
+      }
+    }
+  }
+}

package/tips/README.md

@@ -0,0 +1,62 @@
+# @neatui/core
+
+MCUI 选项卡组件。本组件依赖框架核心 @neatui/core 。更多详情请访问官网 [https://mcui.fekit.cn/](https://mcui.fekit.cn/)
+
+## 安装
+
+### 安装核心
+
+```
+npm i @neatui/core
+```
+
+### 安装组件
+
+```
+npm i @neatui/tabs
+```
+
+## 引用
+
+### scss
+
+```scss
+$theme: (
+  light: (
+    main: #d52932,
+    vice: #67337d,
+    text: #000000,
+    back: #ffffff,
+    link: #0d66d0,
+    code: #e23861,
+    well: #4bbc73,
+    warn: #fb9a2a,
+    risk: #f95850,
+    info: #0889e4
+  )
+  // 添加更多主题...
+);
+
+// 引用框架核心
+@import '~@neatui/core';
+
+// 引用业务组件
+@import '~@neatui/tabs/tabs@a';
+// 引用更多组件...
+```
+
+### html
+
+```html
+<div ui-tabs="@a">
+  <div class="active">选择卡1</div>
+  <div>选择卡2</div>
+  <div>选择卡3</div>
+</div>
+```
+
+## 使用
+
+## 更多
+
+详细文档请到 MCUI 官网 [https://mcui.fekit.cn](https://mcui.fekit.cn)

package/tips/base.scss

@@ -0,0 +1,351 @@
+// 位置
+[ui-tips] {
+  // 上
+  [ui-tips-box~='tl'] {
+    top: auto;
+    right: 0;
+    bottom: 120%;
+    left: auto;
+    transform: translate3d(0, -0.5em, 0);
+
+    &::before {
+      width: 100%;
+      height: 1em;
+      bottom: auto;
+      top: 100%;
+      left: 0;
+    }
+    &::after {
+      top: auto;
+      right: 0.75em;
+      bottom: -0.25em;
+      left: auto;
+      box-shadow: 1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='tc'] {
+    top: auto;
+    right: auto;
+    left: 50%;
+    bottom: 120%;
+    transform: translate3d(-50%, -0.5em, 0);
+
+    &::before {
+      width: 100%;
+      height: 1em;
+      bottom: auto;
+      top: 100%;
+      left: 0;
+    }
+    &::after {
+      top: auto;
+      right: auto;
+      bottom: -0.25em;
+      left: 50%;
+      margin-left: -0.25em;
+      box-shadow: 1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='tr'] {
+    top: auto;
+    right: auto;
+    bottom: 120%;
+    left: 0;
+    transform: translate3d(0, -0.5em, 0);
+
+    &::before {
+      width: 100%;
+      height: 1em;
+      bottom: auto;
+      top: 100%;
+      left: 0;
+    }
+    &::after {
+      top: auto;
+      right: auto;
+      bottom: -0.25em;
+      left: 0.75em;
+      box-shadow: 1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  // 左
+  [ui-tips-box~='lt'] {
+    top: auto;
+    right: 120%;
+    bottom: 0;
+    left: auto;
+    transform: translate3d(-0.5em, 0, 0);
+
+    &::before {
+      width: 1em;
+      height: 100%;
+      top: 0;
+      left: 100%;
+    }
+    &::after {
+      top: auto;
+      right: -0.25em;
+      bottom: 0.75em;
+      left: auto;
+      box-shadow: 1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='lm'] {
+    top: 50%;
+    right: 120%;
+    bottom: auto;
+    left: auto;
+    transform: translate3d(-0.5em, -50%, 0);
+
+    &::before {
+      width: 1em;
+      height: 100%;
+      top: 0;
+      left: 100%;
+    }
+    &::after {
+      top: 50%;
+      right: -0.25em;
+      bottom: auto;
+      left: auto;
+      margin-top: -0.25em;
+      box-shadow: 1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='lb'] {
+    top: 0;
+    right: 120%;
+    bottom: auto;
+    left: auto;
+    transform: translate3d(-0.5em, 0, 0);
+
+    &::before {
+      width: 1em;
+      height: 100%;
+      top: 0;
+      left: 100%;
+    }
+    &::after {
+      top: 0.75em;
+      right: -0.25em;
+      bottom: auto;
+      left: auto;
+      box-shadow: 1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  // 中
+  [ui-tips-box~='cm'] {
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0) scale(0.9);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  // 右
+  [ui-tips-box~='rt'] {
+    top: auto;
+    left: 120%;
+    bottom: 0;
+    right: auto;
+    transform: translate3d(0.5em, 0, 0);
+
+    &::before {
+      width: 1em;
+      height: 100%;
+      right: 100%;
+      top: 0;
+    }
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      top: auto;
+      left: -0.25em;
+      bottom: 0.75em;
+      right: auto;
+      box-shadow: -1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='rm'] {
+    top: 50%;
+    left: 120%;
+    bottom: auto;
+    right: auto;
+    transform: translate3d(0.5em, -50%, 0);
+
+    &::before {
+      width: 1em;
+      height: 100%;
+      right: 100%;
+      top: 0;
+    }
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      top: 50%;
+      left: -0.25em;
+      bottom: auto;
+      right: auto;
+      margin-top: -0.25em;
+      box-shadow: -1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='rb'] {
+    top: 0;
+    left: 120%;
+    bottom: auto;
+    right: auto;
+    transform: translate3d(0.5em, 0, 0);
+
+    &::before {
+      width: 1em;
+      height: 100%;
+      right: 100%;
+      top: 0;
+    }
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      top: 0.75em;
+      left: -0.25em;
+      bottom: auto;
+      right: auto;
+      box-shadow: -1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  // 下
+  [ui-tips-box~='bl'] {
+    bottom: auto;
+    right: 0;
+    top: 120%;
+    left: auto;
+    transform: translate3d(0, 0.5em, 0);
+
+    &::before {
+      width: 100%;
+      height: 1em;
+      bottom: auto;
+      bottom: 100%;
+      left: 0;
+    }
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      bottom: auto;
+      right: 1em;
+      top: -0.25em;
+      left: auto;
+      box-shadow: -1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='bc'] {
+    bottom: auto;
+    right: auto;
+    left: 50%;
+    top: 120%;
+    transform: translate3d(-50%, 0.5em, 0);
+
+    &::before {
+      width: 100%;
+      height: 1em;
+      bottom: auto;
+      bottom: 100%;
+      left: 0;
+    }
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      bottom: auto;
+      right: auto;
+      top: -0.25em;
+      left: 50%;
+      margin-left: -0.25em;
+      box-shadow: -1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+  [ui-tips-box~='br'] {
+    bottom: auto;
+    right: auto;
+    top: 120%;
+    left: 0;
+    transform: translate3d(0, 0.5em, 0);
+
+    &::before {
+      width: 100%;
+      height: 1em;
+      bottom: auto;
+      bottom: 100%;
+      left: 0;
+    }
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      bottom: auto;
+      right: auto;
+      top: -0.25em;
+      left: 1em;
+      box-shadow: -1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  // 展开
+  &[ui-tips~='ux:hover']:hover > *,
+  &[ui-tips~='ux:active']:active > *,
+  &[ui-tips-view~='1'] > * {
+    &[ui-tips-box] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    // 上
+    &[ui-tips-box~='tl'] {
+      transform: translate3d(0, 0, 0);
+    }
+    &[ui-tips-box~='tc'] {
+      transform: translate3d(-50%, 0, 0);
+    }
+    &[ui-tips-box~='tr'] {
+      transform: translate3d(0, 0, 0);
+    }
+
+    // 左
+    &[ui-tips-box~='lt'] {
+      transform: translate3d(0, 0, 0);
+    }
+    &[ui-tips-box~='lm'] {
+      transform: translate3d(0, -50%, 0);
+    }
+    &[ui-tips-box~='lb'] {
+      transform: translate3d(0, 0, 0);
+    }
+
+    // 中
+    &[ui-tips-box~='cm'] {
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0) scale(1);
+    }
+
+    // 右
+    &[ui-tips-box~='rt'] {
+      transform: translate3d(0, 0, 0);
+    }
+    &[ui-tips-box~='rm'] {
+      transform: translate3d(0, -50%, 0);
+    }
+    &[ui-tips-box~='rb'] {
+      transform: translate3d(0, 0, 0);
+    }
+
+    // 下
+    &[ui-tips-box~='bl'] {
+      transform: translate3d(0, 0, 0);
+    }
+    &[ui-tips-box~='bc'] {
+      transform: translate3d(-50%, 0, 0);
+    }
+    &[ui-tips-box~='br'] {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}

package/tips/mcui@tips.scss

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

package/tips/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/tips",
+  "version": "1.1.8",
+  "description": "",
+  "main": "mcui@tips.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/tips/tips@a.scss

@@ -0,0 +1,52 @@
+@import './base.scss';
+
+[ui-tips~='@a'] {
+  // 按钮
+  [ui-tips-btn] {
+    position: relative;
+  }
+  // 盒子
+  [ui-tips-box] {
+    position: absolute;
+    @include theme {
+      background: co(fore);
+    }
+    box-shadow: 0 0 0.2em 1px rgba(0, 0, 0, 0.08);
+    // padding: 0.5em;
+    border-radius: 0.25em;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      opacity 0.3s,
+      transform 0.3s;
+    z-index: 10;
+
+    &[ux-view='1'] {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      pointer-events: auto;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+    }
+
+    [ui-tips-arrow],
+    &[ui-tips-arrow~='true']::after {
+      content: '';
+      position: absolute;
+      width: 0.5em;
+      height: 0.5em;
+      transform: rotate(45deg);
+      @include theme {
+        background: co(fore);
+      }
+    }
+  }
+
+  & {
+    position: relative;
+    display: inline-block;
+  }
+}

package/title/mcui@title.scss

@@ -0,0 +1,2 @@
+@import './title@a.scss';
+@import './title@b.scss';

package/title/package.json

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

package/title/title@a.scss

@@ -0,0 +1,18 @@
+[ui-title~='@a'] {
+  & {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: block;
+      content: '';
+      width: 0.3em;
+      height: 0.95em;
+      border-radius: 0.1em;
+      margin-right: 0.2em;
+      @include theme {
+        background-color: co(main);
+      }
+    }
+  }
+}

package/title/title@b.scss

@@ -0,0 +1,7 @@
+[ui-title~='@b'] {
+  & {
+    @include theme {
+      box-shadow: inset 0 -1px 0 0 co(line);
+    }
+  }
+}

package/user/user@a.scss

@@ -0,0 +1,7 @@
+[ui-user~='@a'] {
+  & > * {
+    width: 2rem;
+    height: 2rem;
+    background-color: #f0f0f0;
+  }
+}