@neatui/css 1.0.2

package/form/base.scss

@@ -0,0 +1,425 @@
+// 颜色
+$cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'warn', 'risk';
+
+[ui-form~=':block'] {
+  display: flex;
+}
+
+// 提示
+[ui-form-tips] {
+  position: absolute !important;
+  bottom: 100%;
+  left: 0;
+  line-height: 1.5;
+  padding: 0.2em 0.5em;
+  border-radius: 0.25em;
+  margin-bottom: 0.3em;
+  opacity: 0;
+  font-size: 0.85em;
+  transform: translateY(-0.3em);
+  pointer-events: none;
+  transition:
+    transform 0s,
+    opacity 0s;
+  min-width: 2em;
+  min-height: 1.9em;
+
+  @include theme {
+    background: mix(co(main), co(fore), 85%);
+    color: co(fore);
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    box-sizing: content-box;
+    width: 0;
+    height: 0;
+    border: 3px solid transparent;
+    top: 100%;
+    left: 0.75em;
+    transition:
+      transform 0s,
+      opacity 0s;
+    @include theme {
+      border-top-color: mix(co(main), co(fore), 85%);
+    }
+  }
+
+  &[ui-form-tips~='rt'] {
+    left: auto;
+    right: 0;
+    &::after {
+      right: 1em;
+      left: auto;
+    }
+  }
+
+  &[ui-form-tips~=':round'] {
+    border-radius: 5em;
+  }
+  &[ui-form-tips~='show'] {
+    transform: translateY(0);
+    opacity: 0.95;
+    pointer-events: auto;
+    transition:
+      transform 0.5s,
+      opacity 0.5s;
+    &::after {
+      transition:
+        transform 0.5s,
+        opacity 0.5s;
+    }
+  }
+}
+@each $co in $cos {
+  [ui-form~='co:#{$co}'] {
+    [ui-form-tips] {
+      @include theme {
+        background: mix(co($co), co(fore), 85%);
+      }
+      &::after {
+        @include theme {
+          border-top-color: mix(co($co), co(fore), 85%);
+        }
+      }
+    }
+  }
+}
+[ui-form~='tips'],
+[ui-form~='tips:hover']:hover,
+[ui-form~='tips:focus']:focus-within {
+  [ui-form-tips] {
+    transform: translateY(0);
+    opacity: 0.95;
+    pointer-events: auto;
+    transition:
+      transform 0.5s,
+      opacity 0.5s;
+    &::after {
+      transition:
+        transform 0.5s,
+        opacity 0.5s;
+    }
+  }
+}
+
+// 验证
+[ui-form-verify] {
+  & {
+    position: absolute !important;
+    display: block;
+    width: 1em;
+    height: 1em;
+    right: -1.1em;
+    top: 50%;
+    margin-top: -0.5em;
+    transform: scale3d(0.8, 0.8, 1);
+
+    &:before,
+    &:after {
+      position: absolute;
+      content: '';
+      display: block;
+      background-color: currentColor;
+      border-radius: 10rem;
+    }
+  }
+
+  &[ui-form-verify~='ok'] {
+    @include theme {
+      color: co(well);
+    }
+
+    @keyframes am-verify-ok-1 {
+      0% {
+        transform: rotate(43deg) scale3d(0, 1, 1);
+      }
+      40%,
+      100% {
+        transform: rotate(43deg) scale3d(1, 1, 1);
+      }
+    }
+
+    @keyframes am-verify-ok-2 {
+      0%,
+      40% {
+        transform: rotate(-53deg) scale3d(0, 1, 1);
+      }
+      100% {
+        transform: rotate(-53deg) scale3d(1, 1, 1);
+      }
+    }
+
+    &::before {
+      width: 50%;
+      height: 15%;
+      left: 9%;
+      top: 32%;
+      transform: rotate(43deg);
+      background-color: currentColor;
+      transform-origin: 0% 100%;
+      animation: am-verify-ok-1 ease-out 0.5s both;
+    }
+
+    &::after {
+      width: 74%;
+      height: 15%;
+      left: 50%;
+      bottom: 22%;
+      transform-origin: 0% 100%;
+      transform: rotate(-53deg);
+      background-color: currentColor;
+      animation: am-verify-ok-2 ease-out 0.5s both;
+    }
+  }
+  &[ui-form-verify~='no'] {
+    @include theme {
+      color: co(risk);
+    }
+
+    @keyframes am-no-1 {
+      0% {
+        transform: rotate(45deg) scale3d(0, 1, 1);
+      }
+      70%,
+      100% {
+        transform: rotate(45deg) scale3d(1, 1, 1);
+      }
+    }
+
+    @keyframes am-no-2 {
+      0%,
+      50% {
+        transform: rotate(-45deg) scale3d(0, 1, 1);
+      }
+      100% {
+        transform: rotate(-45deg) scale3d(1, 1, 1);
+      }
+    }
+
+    &::before {
+      width: 92%;
+      height: 15%;
+      left: 13%;
+      top: 8%;
+      transform: rotate(45deg);
+      background-color: currentColor;
+      transform-origin: 0% 100%;
+      animation: am-no-1 ease 0.5s both;
+    }
+
+    &::after {
+      width: 92%;
+      height: 15%;
+      right: 13%;
+      top: 8%;
+      transform-origin: 100% 100%;
+      transform: rotate(45deg);
+      background-color: currentColor;
+      animation: am-no-2 ease 0.5s both;
+    }
+  }
+}
+
+// 前缀后缀
+[ui-form-prefix],
+[ui-form-suffix] {
+  position: relative;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  align-content: center;
+  flex-shrink: 0;
+  transform: scale3d(1, 1, 1);
+
+  & > * {
+    min-width: 1em;
+    margin: 0 0.25em;
+    height: 1em;
+    flex-shrink: 0;
+    transition:
+      transform 0.15s,
+      opacity 0.35s;
+    // opacity: 0.8;
+    // &:hover {
+    //   opacity: 1;
+    // }
+    // &:active,
+    // &:hover:active {
+    //   transform: scale3d(0.9, 0.9, 1);
+    // }
+  }
+}
+[ui-form-suffix] {
+  justify-content: end;
+}
+
+// 搜索
+[ui-form-search] {
+  position: relative;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 2em;
+    height: 2em;
+    left: 0;
+    top: 0;
+    margin: -0.5em auto auto -0.5em;
+    transform: scale3d(0.5, 0.5, 1);
+    background: radial-gradient(circle at 47% 45%, transparent 41%, currentColor 44%, currentColor 52%, transparent 55%),
+      radial-gradient(circle at 78% 78%, currentColor 5%, transparent 6%), radial-gradient(circle at 82% 82%, currentColor 5%, transparent 6%),
+      radial-gradient(circle at 85% 85%, currentColor 5%, transparent 6%);
+  }
+}
+
+// 清理
+[ui-form-clean] {
+  position: absolute;
+  display: none;
+  // opacity: 0.6;
+  right: 100%;
+  @include theme {
+    background: co(fore);
+    box-shadow:
+      -0.2em 0 0px 0.15em co(fore),
+      0.2em 0 0px 0.15em co(fore),
+      0 0 0px 0.15em co(fore);
+  }
+
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 2em;
+    height: 2em;
+    left: 0;
+    top: 0;
+    margin: -0.5em auto auto -0.5em;
+    transform: scale3d(0.4, 0.4, 1) rotate(45deg);
+    background:
+      linear-gradient(0deg, transparent 41%, currentColor 42%, currentColor 59%, transparent 60%) no-repeat center/50% 50%,
+      linear-gradient(90deg, transparent 41%, currentColor 42%, currentColor 59%, transparent 60%) no-repeat center/50% 50%;
+    border-radius: 50%;
+    color: currentColor;
+    box-shadow: inset 0 0 0 2px currentColor;
+  }
+}
+@keyframes am-form-clean {
+  0% {
+    opacity: 0;
+    transform: scale3d(0.5, 0.5, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+[ui-form] {
+  &:hover {
+    [ui-form-clean] {
+      display: inline-block;
+      animation: am-form-clean 0.2s;
+    }
+  }
+}
+
+// 查看密码
+[ui-form-cipher] {
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  &:before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 80%;
+    height: 80%;
+    top: 10%;
+    left: 10%;
+    border-radius: 70% 25%;
+    box-shadow: 0 0 0 1px currentColor;
+    transform: rotate(45deg) scale3d(0.95, 0.95, 1);
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 30%;
+    height: 30%;
+    top: 35%;
+    left: 35%;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px currentColor;
+    transform: rotate(45deg) scale3d(0.95, 0.95, 1);
+  }
+}
+[type='password'] + * > [ui-form-cipher] {
+  &:before {
+    background: linear-gradient(90deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center;
+  }
+}
+
+// 日期图标
+[ui-form-date] {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 86%;
+    height: 75%;
+    border: 1px solid currentColor;
+    left: 7%;
+    bottom: 10%;
+    border-radius: 0.15em;
+    background: linear-gradient(180deg, transparent 28%, currentColor 32%, currentColor 40%, transparent 42%) no-repeat 50% 0%;
+  }
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 50%;
+    height: 22%;
+    border-left: 1px solid currentColor;
+    border-right: 1px solid currentColor;
+    left: 25%;
+    top: 8%;
+  }
+}
+
+// 时间图标
+[ui-form-time] {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 96%;
+    height: 96%;
+    border: 1px solid currentColor;
+    left: 2%;
+    top: 2%;
+    border-radius: 50%;
+  }
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 32%;
+    height: 27%;
+    border-left: 1px solid currentColor;
+    border-bottom: 1px solid currentColor;
+    left: 44%;
+    top: 28%;
+    transform: skewX(-5deg);
+  }
+}

package/form/form@a/base.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+// 全局共用
+@import '../base.scss';
+
+// 主题共用
+[ui-form~='@a'] {
+  // 禁用
+  &[ui-form~='disabled'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  // 撑满
+  &[ui-form~=':block'] {
+    display: flex;
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  // 圆弧
+  &[ui-form~=':round'] {
+    border-radius: 50em;
+  }
+
+  input:-webkit-autofill {
+    @include theme {
+      box-shadow: 0 0 0 1000px co(fore) inset;
+      color: co(read);
+      -webkit-text-fill-color: co(read);
+    }
+  }
+}

package/form/form@a/checkbox.scss

@@ -0,0 +1,194 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+
+[ui-form~='@a'] {
+  // 复选框
+  &[ui-form~='type:checkbox'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    align-content: center;
+    flex-wrap: nowrap;
+    vertical-align: middle;
+
+    &[ui-form~='lt'] {
+      align-items: baseline;
+      [type='checkbox'] {
+        position: relative;
+        top: 0.15em;
+      }
+    }
+
+    [type='checkbox'] {
+      appearance: none;
+      font-size: inherit;
+      width: 1em;
+      height: 1em;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      box-shadow: inset 0 0 0 1px currentColor;
+      border-radius: 0.2em;
+      flex-shrink: 0;
+      transform: scale3d(0.95, 0.95, 1);
+
+      // &.part-selected {
+      //   @include theme {
+      //     box-shadow: inset 0 0 0 1px co(main);
+      //   }
+      //   &::before {
+      //     width: 50%;
+      //     height: 18%;
+      //     left: 24%;
+      //     border-radius: 1em;
+      //     @include theme {
+      //       background: co(main) !important;
+      //     }
+      //     bottom: 41%;
+      //   }
+      // }
+
+      &:before,
+      &:after {
+        position: absolute;
+        content: '';
+        display: block;
+        @include theme {
+          background-color: co(fore);
+        }
+        border-radius: 10rem;
+      }
+
+      &:checked {
+        @include theme {
+          background-color: co(main);
+        }
+
+        @keyframes am-checkbox-a-1 {
+          0% {
+            transform: rotate(43deg) scale3d(0, 1, 1);
+          }
+          40%,
+          100% {
+            transform: rotate(43deg) scale3d(1, 1, 1);
+          }
+        }
+
+        @keyframes am-checkbox-a-2 {
+          0%,
+          40% {
+            transform: rotate(-53deg) scale3d(0, 1, 1);
+          }
+          100% {
+            transform: rotate(-53deg) scale3d(1, 1, 1);
+          }
+        }
+
+        &::before {
+          width: 35%;
+          height: 13%;
+          left: 20%;
+          top: 36%;
+          transform: rotate(43deg);
+          @include theme {
+            background-color: co(fore);
+          }
+          transform-origin: 0% 100%;
+          animation: am-checkbox-a-1 ease-out 0.35s both;
+        }
+
+        &::after {
+          width: 60%;
+          height: 13%;
+          left: 50%;
+          bottom: 25%;
+          transform-origin: 0% 100%;
+          transform: rotate(-53deg);
+          @include theme {
+            background-color: co(fore);
+          }
+          animation: am-checkbox-a-2 ease-out 0.35s both;
+        }
+
+        &,
+        & + * {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      // 半选
+      &.part-checked,
+      &[part-checked] {
+        @include theme {
+          background-color: co(main);
+          box-shadow: inset 0 0 0 1px co(main);
+        }
+
+        &::before {
+          width: 50%;
+          height: 18%;
+          left: 24%;
+          border-radius: 1em;
+          @include theme {
+            background: co(fore) !important;
+          }
+          bottom: 41%;
+        }
+
+        // &::before {
+        //   width: 35%;
+        //   height: 13%;
+        //   left: 20%;
+        //   top: 36%;
+        //   transform: rotate(43deg);
+        //   @include theme {
+        //     background-color: co(fore);
+        //   }
+        //   transform-origin: 0% 100%;
+        //   animation: am-checkbox-a-1 ease-out 0.35s both;
+        // }
+
+        // &::after {
+        //   width: 60%;
+        //   height: 13%;
+        //   left: 50%;
+        //   bottom: 25%;
+        //   transform-origin: 0% 100%;
+        //   transform: rotate(-53deg);
+        //   @include theme {
+        //     background-color: co(fore);
+        //   }
+        //   animation: am-checkbox-a-2 ease-out 0.35s both;
+        // }
+
+        // &,
+        // & + * {
+        //   @include theme {
+        //     color: co(main);
+        //   }
+        // }
+      }
+
+      & + * {
+        margin-left: 0.2em;
+        user-select: none;
+      }
+    }
+  }
+}