@neatui/css 1.0.2

package/btns/btns@c.scss

@@ -0,0 +1,169 @@
+@use 'sass:math';
+$size: 'xs', 's', 'm', 'l', 'xl';
+$type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
+
+// 按钮
+[ui-btn~='@c'] {
+  // 基础样式
+  & {
+    position: relative;
+    display: inline-table;
+    height: 2.5em;
+    line-height: 2.5em;
+    padding: 0 1em;
+    border-radius: 0.25em;
+    cursor: pointer;
+    transition: all 50ms;
+    text-align: center;
+    vertical-align: middle;
+    border: 0;
+    user-select: none;
+    white-space: nowrap;
+    @include theme {
+      color: co(text);
+      background: co(weak);
+      box-shadow: inset 0 0 0 1px co(line);
+    }
+  }
+
+  & > * {
+    &.icon {
+      display: inline-block;
+      & + * {
+        margin-left: 0.2em;
+      }
+    }
+  }
+
+  // 绝对尺寸
+  &[ui-btn~=':abs'] {
+    height: 2.5rem;
+    line-height: 2.5rem;
+    padding: 0 1rem;
+    border-radius: 0.25rem;
+  }
+  // 圆弧按钮
+  &[ui-btn~=':round'] {
+    border-radius: 100em;
+  }
+
+  // 移入状态
+  &:hover {
+    @include theme {
+      box-shadow:
+        inset 0 0 0 1px co(line),
+        inset 0 0 0 100em rgba(co(text), 0.04);
+    }
+  }
+
+  // 按下状态
+  &:active {
+    transform: scale(0.98, 0.95);
+  }
+
+  // 正方形按钮
+  &[ui-btn~=':square'] {
+    width: 2.5em;
+    padding: 0;
+  }
+
+  // 禁用按钮
+  &[ui-btn~=':disabled'] {
+    &,
+    &:hover {
+      opacity: 0.65;
+      box-shadow:
+        inset 0 0 0 1px transparent,
+        inset 0 0 0 100em rgba(0, 0, 0, 0);
+      cursor: not-allowed;
+    }
+    &:active {
+      transform: scale(1, 1);
+      cursor: not-allowed;
+    }
+  }
+
+  // 按钮尺寸
+  $base: 1.5;
+  @each $i in $size {
+    &[ui-btn~='#{$i}'] {
+      height: #{$base}em;
+      line-height: #{$base}em;
+      padding: 0 #{calc(($base - 1) / 2)}em;
+
+      // 方形按钮
+      &[ui-btn~=':square'] {
+        width: #{$base}em;
+        padding: 0;
+      }
+
+      &[ui-btn~=':block'] {
+        width: 100%;
+      }
+
+      &[ui-btn~=':abs'] {
+        height: #{$base}rem;
+        line-height: #{$base}rem;
+        padding: 0 #{calc(($base - 1) / 2)}rem;
+      }
+    }
+    $base: $base + 0.5;
+  }
+
+  // 按钮颜色
+  @each $name in $type {
+    &[ui-btn~='#{$name}'] {
+      @if ($name == 'none' or $name == 'weak' or $name == 'back') {
+        @include theme {
+          background: co($name);
+        }
+        color: inherit;
+      } @else {
+        @include theme {
+          color: co(back);
+          background-image: linear-gradient(90deg, mix(co($name), #fff, 70%) 0%, co($name) 100%);
+        }
+      }
+      box-shadow: inset 0 0 0 1px transparent;
+
+      &:hover {
+        @include theme {
+          box-shadow:
+            inset 0 0 0 1px transparent,
+            inset 0 0 0 100em rgba(co(text), 0.04);
+        }
+      }
+
+      // 边框式
+      &[ui-btn~=':border'] {
+        background: transparent;
+        @include theme {
+          color: co($name);
+          box-shadow: inset 0 0 0 1px co($name);
+        }
+
+        &:hover {
+          @include theme {
+            box-shadow:
+              inset 0 0 0 1px co($name),
+              inset 0 0 0 100em rgba(co($name), 0.08);
+          }
+        }
+      }
+
+      // 下划线
+      &[ui-btn~=':underline'] {
+        @include theme {
+          color: co($name);
+        }
+        background: transparent;
+        box-shadow: inset 0 0 0 1px transparent;
+
+        &:hover {
+          box-shadow: inset 0 0 0 1px transparent;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}

package/btns/mcui@btns.scss

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

package/btns/package.json

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

package/card/card@a.scss

@@ -0,0 +1,238 @@
+$co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+@mixin card_a($name: 'ui-card', $group: 0, $path: '') {
+  &#{$path} {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.3em;
+    transition: box-shadow 0.3s;
+    // &:hover {
+    // @include theme {
+    // box-shadow: 0 1px 6px co(deep);
+    // box-shadow: 0 1px 0.2em 1px rgba(0, 0, 0, 0.07);
+    // }
+    // }
+    &.active {
+      @include theme {
+        border: 1px solid co(read);
+      }
+    }
+
+    & > * {
+      @include theme {
+        background-color: co(fore);
+      }
+
+      &:first-child {
+        border-top-left-radius: 0.3em;
+        border-top-right-radius: 0.3em;
+      }
+      &:last-child {
+        border-bottom-left-radius: 0.3em;
+        border-bottom-right-radius: 0.3em;
+      }
+    }
+
+    // 标题
+    [ui-card-head],
+    [ui-card-foot] {
+      position: relative;
+      padding: 1em 1.5em;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      z-index: 5;
+    }
+    [ui-card-head~='xm'],
+    [ui-card-foot~='xm'] {
+      justify-content: space-between;
+    }
+    [ui-card-head~='cm'],
+    [ui-card-foot~='cm'] {
+      justify-content: center;
+    }
+    [ui-card-head~='lm'],
+    [ui-card-foot~='lm'] {
+      justify-content: flex-start;
+    }
+    [ui-card-head~='rm'],
+    [ui-card-foot~='rm'] {
+      justify-content: flex-end;
+    }
+
+    // 工具
+    [ui-card-tool] {
+      & {
+        position: relative;
+        pointer-events: auto;
+        max-height: 1000px;
+        opacity: 1;
+        z-index: 2;
+        transition:
+          all 0.2s,
+          padding 0.35s,
+          margin 0.35s;
+        @include theme {
+          background: rgba(co(fore), 0.8);
+        }
+        padding: 1em 1.5em;
+        margin-bottom: 1px;
+      }
+
+      &[ui-card-tool~='hide'] {
+        pointer-events: none;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        margin-bottom: 0 !important;
+        max-height: 0 !important;
+        opacity: 0;
+        transition:
+          all 0.25s,
+          padding ease 0.35s,
+          margin ease 0.35s;
+      }
+    }
+
+    // 主体
+    [ui-card-body] {
+      position: relative;
+      padding: 1.5em;
+      flex-grow: 1;
+      height: auto;
+    }
+
+    // 头部
+    [ui-card-head] {
+      margin-bottom: 2px;
+    }
+
+    // 底部
+    [ui-card-foot] {
+      margin-top: 1px;
+    }
+  }
+
+  @each $i in $co {
+    // 背景
+    &[#{$name}~='bg:#{$i}']#{$path} {
+      & > * {
+        @include theme {
+          background-color: co($i);
+        }
+
+        &[ui-card-tool] {
+          @include theme {
+            background-color: rgba(co($i), 0.8);
+          }
+        }
+      }
+    }
+
+    // 边框
+    &[#{$name}~='bk:#{$i}']#{$path} {
+      @include theme {
+        border: 1px solid co($i);
+      }
+    }
+
+    // 颜色
+    &[#{$name}~='co:#{$i}']#{$path} {
+      @include theme {
+        color: co($i);
+      }
+    }
+  }
+  // 交互
+  &[#{$name}~='ux:hover']#{$path} {
+    &:hover {
+      @include theme {
+        box-shadow: 0 1px 6px co(deep);
+      }
+    }
+  }
+
+  // 尺寸
+  $sz_base: 0.5em;
+  @each $i in $sz {
+    &[#{$name}~='sz:#{$i}']#{$path} {
+      [ui-card-head],
+      [ui-card-foot] {
+        padding: $sz_base ($sz_base + 0.5);
+      }
+      [ui-card-body] {
+        padding: $sz_base ($sz_base + 0.5);
+      }
+    }
+    $sz_base: $sz_base + 0.25;
+  }
+}
+
+// 单个卡片
+[ui-card~='@a'] {
+  @include card_a('ui-card', 0, '');
+  // 撑满
+  &[ui-card~=':full'] {
+    flex-grow: 1;
+    height: auto;
+  }
+
+  &[ui-card~=':inline'] {
+    display: inline-flex;
+  }
+
+  // 放大
+  &[ui-card~=':max'] {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    overflow: auto;
+    @include theme {
+      background-color: co(back);
+    }
+
+    [ui-card-body] {
+      overflow: auto;
+    }
+  }
+}
+
+// 群组卡片
+[ui-cards~='@a'] {
+  @include card_a('ui-cards', 1, '>*>*');
+
+  // 撑满
+  &[ui-cards~=':full'] {
+    & > * {
+      flex-grow: 1;
+      height: auto;
+    }
+  }
+
+  // 放大
+  [ui-card~=':max'] {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    overflow: auto;
+    @include theme {
+      background-color: co(back);
+    }
+
+    [ui-card-body] {
+      overflow: auto;
+    }
+  }
+
+  & > * > * {
+    height: 100%;
+  }
+}

package/card/card@b.scss

@@ -0,0 +1,75 @@
+@mixin card_b($name) {
+  & {
+    position: relative;
+
+    & > * {
+      position: relative;
+      transition: box-shadow 0.3s;
+      border-radius: 0.3em;
+      @include theme {
+        background: co(fore);
+        &:hover {
+          box-shadow: 0 1px 6px co(line);
+        }
+      }
+      &.active {
+        @include theme {
+          border: 1px solid co(read);
+        }
+      }
+
+      // 标题
+      [ui-card-head] {
+        padding: 0 1.5rem;
+        line-height: 4rem;
+        @include med('<dpc') {
+          padding: 0 1rem;
+          line-height: 3.5rem;
+        }
+        @include theme {
+          border-bottom: 1px solid rgba(co(line), 0.5);
+        }
+      }
+      // 主体
+      [ui-card-body] {
+        padding: 1.5rem;
+        @include med('<dpc') {
+          padding: 1.5rem;
+        }
+      }
+    }
+  }
+
+  @at-root {
+    // 最大化
+    &[#{$name}~='max'] {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      overflow: auto;
+    }
+  }
+}
+
+// 单个卡片
+[ui-card~='@b'] {
+  @include card_b('ui-card');
+}
+
+// 多个卡片
+[ui-cards~='@b'] {
+  & {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: flex-start;
+    align-content: stretch;
+  }
+  & > * {
+    @include card_b('ui-cards');
+  }
+}

package/card/mcui@card.scss

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

package/card/package.json

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

package/chat/chat@a.scss

@@ -0,0 +1,139 @@
+$cos: 'main', 'well', 'warn', 'risk', 'info';
+[ui-chats~='@a'] {
+  // 基础
+  & > * {
+    position: relative;
+    display: flex;
+    max-width: 80%;
+    margin-bottom: 1em;
+  }
+
+  // 用户
+  // [ui-chat-user] {
+
+  // }
+
+  // 主体
+  [ui-chat-body] {
+    position: relative;
+    padding: 0.75em 1rem;
+    border-radius: 0.5rem;
+    margin-left: 1rem;
+    line-height: 1.6em;
+
+    @include theme {
+      color: co(read);
+      background: co(weak);
+      box-shadow: 0 1px 2px co(deep);
+    }
+
+    &::before {
+      position: absolute;
+      content: '';
+      display: block;
+      -webkit-box-sizing: content-box;
+      box-sizing: content-box;
+      width: 0;
+      height: 0;
+      right: 100%;
+      margin-right: -1px;
+      top: 0.8em;
+      border-style: solid;
+      border-width: 0.3em 0.6em 0.6em;
+
+      @include theme {
+        border-color: transparent co(weak) transparent transparent;
+      }
+    }
+  }
+
+  &[ui-chats~='bg:fore'] {
+    [ui-chat-body] {
+      @include theme {
+        color: co(read);
+        background: co(fore);
+      }
+
+      &::before {
+        @include theme {
+          border-color: transparent co(fore) transparent transparent;
+        }
+      }
+    }
+  }
+
+  &[ui-chats~='bg:main'] {
+    [ui-chat-body] {
+      @include theme {
+        color: co(fore);
+        background: co(main);
+      }
+
+      &::before {
+        @include theme {
+          border-color: transparent co(main) transparent transparent;
+        }
+      }
+    }
+  }
+
+  &[ui-chats~='bg:read'] {
+    [ui-chat-body] {
+      @include theme {
+        color: co(fore);
+        background: co(read);
+      }
+
+      &::before {
+        @include theme {
+          border-color: transparent co(read) transparent transparent;
+        }
+      }
+    }
+  }
+
+  &[ui-chats~='bg:well'] {
+    [ui-chat-body] {
+      @include theme {
+        color: co(fore);
+        background: co(well);
+      }
+
+      &::before {
+        @include theme {
+          border-color: transparent co(well) transparent transparent;
+        }
+      }
+    }
+  }
+
+  &[ui-chats~='bg:warn'] {
+    [ui-chat-body] {
+      @include theme {
+        color: co(fore);
+        background: co(warn);
+      }
+
+      &::before {
+        @include theme {
+          border-color: transparent co(warn) transparent transparent;
+        }
+      }
+    }
+  }
+
+  &[ui-chats~='bg:risk'] {
+    [ui-chat-body] {
+      @include theme {
+        color: co(fore);
+        background: co(risk);
+      }
+
+      &::before {
+        @include theme {
+          border-color: transparent co(risk) transparent transparent;
+        }
+      }
+    }
+  }
+}

package/chat/mcui@chat.scss

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

package/chat/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@neatui/chat",
+  "version": "1.0.2",
+  "description": "",
+  "main": "mcui@chat.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT"
+}

package/cite/cite@a.scss

@@ -0,0 +1,33 @@
+$state: 'main', 'read', 'well', 'warn', 'risk', 'info';
+
+[ui-cite~='@a'] {
+  width: 100%;
+  padding: 1em;
+  border-radius: 0.25em;
+
+  @mixin cite($co, $bk) {
+    color: inherit;
+    border-left: 0.3em solid rgba($co, 0.8);
+    box-shadow:
+      inset -1px 0 0 0 $bk,
+      inset 0 1px 0 0 $bk,
+      inset 0 -1px 0 0 $bk;
+  }
+
+  @each $key in $state {
+    @include theme {
+      $co: co($key);
+      $bk: co(line);
+      @if ($key== 'main') {
+        &,
+        &[ui-cite~='#{$key}'] {
+          @include cite($co, $bk);
+        }
+      } @else {
+        &[ui-cite~='#{$key}'] {
+          @include cite($co, $bk);
+        }
+      }
+    }
+  }
+}