@neatui/css 1.0.2

package/menu/menu@theme=ab.scss

@@ -0,0 +1,282 @@
+// 平板
+//@media screen and (min-width: 768px) and (max-width: 1024px) {}
+
+// 桌面
+// @media screen and (min-width: 769px) {
+.mc-menu {
+  position: relative;
+  display: inline-block;
+
+  // 切换状态
+  .mc-menu-switch {
+    display: none;
+  }
+
+  // 导航列表
+  .mc-menu-list {
+    & > label {
+      display: none;
+    }
+
+    & > * {
+      position: relative;
+      display: inline-block;
+
+      & > * {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+
+        & > a {
+          padding: 0 1em;
+        }
+
+        &:hover,
+        & .active {
+          & > a {
+            color: #d52932;
+          }
+
+          .mc-menu-list-two {
+            text-align: left;
+            opacity: 1;
+            transform: translate3d(-50%, 0.5rem, 0);
+            pointer-events: auto;
+            transition: all 0.5s;
+          }
+        }
+      }
+    }
+
+    .mc-menu-list-two {
+      position: absolute;
+      min-width: 10rem;
+      left: 50%;
+      padding: 2rem;
+      background: #fff;
+      line-height: 3rem;
+      transform: translate3d(-50%, 1rem, 0);
+      opacity: 0;
+      pointer-events: none;
+      border-radius: 0.1rem;
+      transition: all 0.2s;
+
+      & > * {
+        white-space: nowrap;
+
+        &:hover {
+          color: #d52932;
+        }
+      }
+
+      &:before {
+        position: absolute;
+        content: "";
+        display: block;
+        border: 0.5rem solid transparent;
+        border-bottom-color: #fff;
+        width: 1rem;
+        height: 1rem;
+        left: 50%;
+        top: -1rem;
+        margin-left: -0.5rem;
+      }
+
+      &:after {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 1rem;
+        top: -1rem;
+        left: 0;
+      }
+    }
+
+    // 搜索框
+    & > .head-search {
+      display: none;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      left: 0;
+      top: 0;
+      background: #fff;
+
+      & > input {
+        width: 8rem;
+        height: 2.5rem;
+        background: #f8f8f8;
+        border-radius: 2.5rem;
+      }
+    }
+  }
+
+  // 导航按钮
+  .mc-menu-icon {
+    display: none;
+  }
+}
+// }
+
+// 移动
+@media screen and (max-width: 768px) {
+  .mc-menu {
+    position: static;
+    display: inline-block;
+
+    // 切换状态
+    .mc-menu-switch {
+      display: none;
+
+      // 开启状态
+      &:checked + .mc-menu-icon {
+        &:after {
+          border-radius: 30%;
+          background: linear-gradient(45deg, transparent 45%, #454545 45%, #454545 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #454545 45%, #454545 55%, transparent 55%);
+        }
+
+        & + .mc-menu-list {
+          transition: transform 0.35s;
+          transform: translate3d(-100%, 0, 1px);
+          pointer-events: auto;
+
+          & > * {
+            opacity: 1;
+            transform: translate3d(0, 0, 1px);
+          }
+        }
+      }
+    }
+
+    // 导航主体
+    .mc-menu-list {
+      position: fixed;
+      display: block;
+      width: 100%;
+      left: 100%;
+      top: 5rem;
+      bottom: 0;
+      z-index: 10;
+      text-align: center;
+      //height: 100%;
+      line-height: 3.5rem;
+      pointer-events: none;
+      transition: transform 0.2s;
+      transform: translate3d(0, 0, 1px);
+      //background: rgba(0, 0, 0, .85);
+      background: #fff;
+      padding: 1rem 3rem;
+      //color: #fff;
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      border-top: 1px solid #dfdfdf;
+
+      // 开关按钮
+      //& > label {
+      //  width: 100%;
+      //  height: 100%;
+      //  position: absolute;
+      //  top: 0;
+      //  right: 16rem;
+      //  z-index: 12;
+      //
+      //  &:after {
+      //    position: absolute;
+      //    right: -15rem;
+      //    top: 1rem;
+      //    border-radius: 30%;
+      //    background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
+      //    transform: scale3d(1, 1, 1);
+      //    transition: all .1s;
+      //  }
+      //
+      //  &:active {
+      //    &:after {
+      //      transform: scale3d(.75, .75, 1);
+      //    }
+      //  }
+      //}
+
+      // 搜索框
+      & > .head-search {
+        padding-top: 3rem;
+        border-top: 1px solid #dfdfdf;
+
+        .head-search-list {
+          padding: 1em 0;
+
+          & > * {
+            border-bottom: 1px dotted #dfdfdf;
+          }
+        }
+
+        input {
+          width: 100%;
+          height: 3rem;
+          border-radius: 3px;
+          background: #f8f8f8;
+          padding: 1em;
+        }
+      }
+
+      // 导航列表
+      & > * {
+        position: relative;
+        width: 100%;
+        z-index: 11;
+        margin-bottom: 2rem;
+
+        & > * {
+          display: block;
+          text-align: left;
+          border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+
+    // 开关按钮
+    .mc-menu-icon {
+      position: relative;
+      //height: 100%;
+      display: inline-block;
+      padding: 0.25rem;
+      //top: 1px;
+      z-index: 11;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 1px solid #252525;
+      border-radius: 0.25rem;
+      vertical-align: middle;
+      top: -0.1rem;
+      right: 0.3em;
+
+      &:before {
+        content: "";
+        display: block;
+        width: 300%;
+        height: 300%;
+        position: absolute;
+        left: -100%;
+        top: -100%;
+      }
+
+      &:after {
+        width: 100%;
+        height: 100%;
+        content: "";
+        display: block;
+        background: linear-gradient(0deg, transparent 42%, #454545 0%, #454545 57%, transparent 0%), linear-gradient(90deg, transparent 75%, #fff 76%), linear-gradient(0deg, transparent 10%, #454545 0%, #454545 25%, transparent 0%), linear-gradient(0deg, transparent 75%, #454545 0%, #454545 90%, transparent 0%);
+        transform: scale3d(1, 1, 1);
+        transition: all 0.1s;
+      }
+
+      &:active & .active {
+        &:after {
+          transform: scale3d(0.75, 0.75, 1);
+        }
+      }
+    }
+  }
+}

package/menu/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@neatui/menu",
+  "version": "1.0.6",
+  "description": "",
+  "main": "menu@b.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/navs/README.md

@@ -0,0 +1,30 @@
+# @neatui/navs
+
+MCUI导航组件，基于MCUI核心@neatui/core, 官网 https://mcui.fekit.cn/
+
+## 安装组件
+
+```
+npm i @neatui/navs
+```
+
+或
+
+```
+yarn add @neatui/navs
+```
+
+## 可选主题
+
+- navs@a.scss
+- navs@b.scss
+
+## 使用示例
+
+```html
+<ul ui-navs="@a">
+  <li class="active"><span>导航一</span></li>
+  <li><span>导航二</span></li>
+  <li><span>导航三</span></li>
+</ul>
+```

package/navs/mcui@navs.scss

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

package/navs/navs@a.scss

@@ -0,0 +1,113 @@
+[ui-navs~='@a'] {
+  position: relative;
+  & > * {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      & > *:first-child {
+        text-decoration: underline;
+        opacity: 0.8;
+      }
+    }
+    &:active {
+      & > *:first-child {
+        display: inline-block;
+        transform: scale3d(0.95, 0.9, 1);
+      }
+    }
+  }
+
+  // 主题
+  &,
+  &[ui-navs~='text'] {
+    & > * {
+      @include theme {
+        color: co(text);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+    }
+  }
+
+  &[ui-navs~='read'] {
+    & > * {
+      @include theme {
+        color: co(read);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            color: mix(co(main), co(read), 45%);
+          }
+        }
+      }
+    }
+  }
+
+  &[ui-navs~='note'] {
+    & > * {
+      @include theme {
+        color: co(note);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            // color: co(main);
+            color: mix(co(main), co(back), 45%);
+          }
+        }
+      }
+    }
+  }
+
+  &[ui-navs~='back'] {
+    & > * {
+      @include theme {
+        color: rgba(co(back), 0.9);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            color: co(back);
+          }
+        }
+      }
+    }
+  }
+
+  // 对齐
+  & {
+    &,
+    &[ui-navs~='al'] {
+      text-align: left;
+      & > * {
+        margin-left: 0;
+        margin-right: 2em;
+      }
+    }
+
+    &[ui-navs~='ac'] {
+      text-align: center;
+      & > * {
+        margin-left: 1em;
+        margin-right: 1em;
+      }
+    }
+
+    &[ui-navs~='ar'] {
+      text-align: right;
+      & > * {
+        margin-left: 2em;
+        margin-right: 0;
+      }
+    }
+  }
+}

package/navs/navs@b.scss

@@ -0,0 +1,111 @@
+[ui-navs~='@b'] {
+  position: relative;
+  & > * {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      & > * {
+        @include theme {
+          text-decoration: underline;
+          opacity: 0.8;
+        }
+      }
+    }
+    &:active {
+      & > * {
+        display: inline-block;
+        transform: scale3d(0.95, 0.9, 1);
+      }
+    }
+
+    &:not(:last-child):after {
+      display: inline-block;
+      content: '|';
+      margin-left: 1.2em;
+      margin-right: 1em;
+      opacity: 0.3;
+    }
+  }
+
+  // 主题
+  &,
+  &[ui-navs~='text'] {
+    & > * {
+      @include theme {
+        color: co(text);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+    }
+  }
+
+  &[ui-navs~='read'] {
+    & > * {
+      @include theme {
+        color: co(read);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            color: mix(co(main), co(read), 45%);
+          }
+        }
+      }
+    }
+  }
+
+  &[ui-navs~='note'] {
+    & > * {
+      @include theme {
+        color: co(note);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            // color: co(main);
+            color: mix(co(main), co(back), 45%);
+          }
+        }
+      }
+    }
+  }
+
+  &[ui-navs~='back'] {
+    & > * {
+      @include theme {
+        color: rgba(co(back), 0.7);
+      }
+      &.active {
+        & > *:first-child {
+          @include theme {
+            color: co(back);
+          }
+        }
+      }
+    }
+  }
+
+  // 对齐
+  & {
+    &,
+    &[ui-navs~='al'] {
+      text-align: left;
+    }
+
+    &[ui-navs~='ac'] {
+      text-align: center;
+    }
+
+    &[ui-navs~='ar'] {
+      text-align: right;
+    }
+  }
+}

package/navs/package.json

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

package/note/mcui@note.scss

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

package/note/note@a.scss

@@ -0,0 +1,26 @@
+$cos: 'main', 'well', 'warn', 'risk', 'info';
+[ui-note~='@a'] {
+  // 基础
+  & {
+    width: 100%;
+    padding: 0.5em 1em;
+    border-radius: 0.25rem;
+
+    @include theme {
+      color: co(read);
+      box-shadow: inset 0 0 0 1px co(line);
+      background: co(weak);
+    }
+  }
+
+  // 颜色
+  @each $key in $cos {
+    &[ui-note~='#{$key}'] {
+      @include theme {
+        color: mix(co($key), co(text), 85%);
+        box-shadow: inset 0 0 0 1px rgba(co($key), 0.3);
+        background: saturate(rgba(co($key), 0.06), 20%);
+      }
+    }
+  }
+}

package/note/note@b.scss

@@ -0,0 +1,33 @@
+$co: 'main', 'text', 'read', 'well', 'warn', 'risk', 'info';
+
+[ui-note~='@b'] {
+  width: 100%;
+  padding: 0.5em 1em;
+  border-radius: 0.1em;
+
+  @mixin note($co, $bg, $bk) {
+    color: $co;
+    border-left: 0.15em solid $bk;
+    background: $bg;
+  }
+
+  @each $key in $co {
+    @include theme {
+      $val: co($key);
+      $co: mix($val, co(text), 85%);
+      $bg: saturate(rgba($val, 0.1), 20%);
+      $bk: $val;
+
+      @if ($key== 'main') {
+        &,
+        &[ui-note~='#{$key}'] {
+          @include note($co, $bg, $bk);
+        }
+      } @else {
+        &[ui-note~='#{$key}'] {
+          @include note($co, $bg, $bk);
+        }
+      }
+    }
+  }
+}

package/note/package.json

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

package/opts/mcui@opts.scss

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

package/opts/opts@a.scss

@@ -0,0 +1,52 @@
+[ui-opts~='@a'] {
+  & {
+    position: relative;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    cursor: pointer;
+    @include theme {
+      box-shadow: inset 0 0 0 1px co(case);
+    }
+
+    &.active {
+      @include theme {
+        box-shadow: inset 0 0 0 1px co(main);
+      }
+
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        width: 0.6rem;
+        height: 0.6rem;
+        max-width: 1rem;
+        max-height: 1rem;
+        top: 0.2em;
+        right: 0.2em;
+        border-radius: 0.15rem;
+        background-image: radial-gradient(circle at 26% 56%, currentColor 8%, transparent 9%), radial-gradient(circle at 32% 62%, currentColor 8%, transparent 9%),
+          radial-gradient(circle at 35% 65%, currentColor 8%, transparent 9%), radial-gradient(circle at 41% 71%, currentColor 8%, transparent 9%),
+          radial-gradient(circle at 47% 70%, currentColor 9%, transparent 10%), radial-gradient(circle at 53% 62%, currentColor 9%, transparent 10%),
+          radial-gradient(circle at 59% 54%, currentColor 9%, transparent 10%), radial-gradient(circle at 65% 46%, currentColor 9%, transparent 10%),
+          radial-gradient(circle at 71% 38%, currentColor 8%, transparent 9%);
+        @include theme {
+          background-color: co(main);
+          color: co(fore);
+        }
+        -webkit-animation: am-selected 0.2s 0.1s both;
+        animation: am-selected 0.2s 0.1s both;
+      }
+    }
+  }
+
+  & > * {
+    transform: scale(1);
+    transition: all 0.3s;
+  }
+
+  &:hover {
+    & > * {
+      transform: scale(0.9);
+    }
+  }
+}