@neatui/css 1.0.2

package/form/form@b/select.scss

@@ -0,0 +1,124 @@
+@use 'sass:math';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-form~='@b'] {
+  &[ui-form~='type:select'] {
+    position: relative;
+    cursor: pointer;
+    min-width: 6em;
+    height: 2.5em;
+    line-height: 1.5em;
+    transition: all 0.5s;
+
+    * {
+      cursor: pointer;
+    }
+
+    // 下拉
+    [ui-form-select] {
+      width: 0.8em;
+      height: 0.8em;
+      display: inline-block;
+      @include theme {
+        color: co(note);
+      }
+      background:
+        linear-gradient(45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 23.5% 65% / 35% 50%,
+        linear-gradient(-45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 76.5% 65% / 35% 50%;
+    }
+
+    // 下拉菜单
+    [ui-form-dropdown] {
+      position: absolute;
+      top: 100%;
+      @include theme {
+        background: co(fore);
+      }
+      min-width: 100%;
+      max-height: 20rem;
+      left: 0;
+      margin-top: 0.5em;
+      padding: 0.5em;
+      border-radius: 0.25em;
+      box-shadow: 0 1px 0.3em 1px rgba(0, 0, 0, 0.1);
+      transform: translate3d(0, 1rem, 0);
+      pointer-events: none;
+      opacity: 0;
+      transition: all 0.35s;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        left: 0;
+        height: 1em;
+        bottom: 100%;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        box-sizing: content-box;
+        width: 0.5em;
+        height: 0.5em;
+        @include theme {
+          background: co(fore);
+        }
+        top: -0.25em;
+        left: 50%;
+        margin-left: -0.25em;
+        transform: rotate(45deg);
+        box-shadow: -1px -1px 0.15em 0 rgba(0, 0, 0, 0.07);
+        z-index: -1;
+      }
+
+      // &[ui-form-dropdown~='show'] {
+      //   opacity: 1;
+      //   transform: translate3d(0, 0, 0);
+      //   pointer-events: auto;
+      // }
+
+      & > * {
+        padding: 0.5em;
+        transition: all 0.35s;
+        border-radius: 0.2em;
+        &:hover {
+          @include theme {
+            background: co(weak);
+          }
+        }
+      }
+    }
+    // 下拉菜单活动
+    &[ui-form-open~='show'],
+    &[ui-form~='ux:hover']:hover {
+      [ui-form-select],
+      .icon.icon-dropdown {
+        transform: rotate(180deg);
+      }
+      [ui-form-dropdown] {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        pointer-events: auto;
+      }
+    }
+
+    // 尺寸
+    $sz_base: 1.5em;
+    @each $s in $sz {
+      &[ui-form~='sz:#{$s}'] {
+        height: $sz_base;
+      }
+      $sz_base: $sz_base + 0.5;
+    }
+
+    & > *,
+    [ui-form~='type:input'] {
+      width: 100%;
+      height: 100%;
+      min-width: auto;
+      vertical-align: middle;
+    }
+  }
+}

package/form/form@b/switch.scss

@@ -0,0 +1,83 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+
+@keyframes am-checked {
+  0% {
+    transform: scale3d(0.9, 0.9, 1);
+  }
+  50% {
+    transform: scale3d(1, 1, 1);
+  }
+  100% {
+    transform: scale3d(0.9, 0.9, 1);
+  }
+}
+
+// 复选框
+[ui-form~='@b'] {
+  &[ui-form~='type:switch'] {
+    position: relative;
+    display: inline-flex;
+    align-items: baseline;
+    flex-wrap: nowrap;
+
+    &[ui-form~=':block'] {
+      display: flex;
+    }
+
+    [type='checkbox'] {
+      appearance: none;
+      font-size: inherit;
+      width: 1.5em;
+      height: 1em;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      box-shadow: inset 0 0 0 1px currentColor;
+      border-radius: 10em;
+      flex-shrink: 0;
+      position: relative;
+      top: 0.15em;
+      @include theme {
+        background-color: co(fore);
+      }
+      background-image: radial-gradient(circle at 50% 50%, currentColor 28%, transparent 30%);
+      background-position-x: -0.2em;
+      transition:
+        all 0.3s,
+        background-position-x ease-out 0.3s;
+
+      &:checked {
+        @include theme {
+          background-color: co(main);
+          background-image: radial-gradient(circle at 50% 50%, co(fore) 28%, transparent 30%);
+        }
+        background-position-x: 0.2em;
+        &,
+        & + * {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      & + * {
+        margin-left: 0.2em;
+      }
+    }
+  }
+}

package/form/form@b/textarea.scss

@@ -0,0 +1,105 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-form~='@b'] {
+  &[ui-form~='type:textarea'] {
+    position: relative;
+    min-width: 6em;
+    line-height: 1.5em;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    transition: all 0.5s;
+
+    @include theme {
+      box-shadow: inset 0 0 0 1px co(case);
+      background-color: co(fore);
+    }
+
+    &:hover {
+      @include theme {
+        box-shadow: inset 0 0 0 1px rgba(co(main), 0.5);
+      }
+    }
+
+    &.form-focus,
+    &:focus {
+      @include theme {
+        box-shadow:
+          inset 0 0 0 1px rgba(co(main), 0.5),
+          0 0 0 2px rgba(co(main), 0.15);
+      }
+    }
+
+    // 颜色
+    @each $c in $co {
+      &[ui-form~='co:#{$c}'] {
+        @include theme {
+          color: mix(co($c), co(text), 85%);
+          box-shadow:
+            inset 0 0 0 1px rgba(co($c), 0.6),
+            0 0 0 2px rgba(co($c), 0.15) !important;
+          background-color: rgba(co($c), 0.035);
+        }
+      }
+
+      &[ui-form~='co:hover:#{$c}'] {
+        &:hover {
+          @include theme {
+            color: mix(co($c), co(text), 85%);
+            box-shadow:
+              inset 0 0 0 1px rgba(co($c), 0.6),
+              0 0 0 2px rgba(co($c), 0.15) !important;
+            background-color: rgba(co($c), 0.035);
+          }
+        }
+      }
+
+      &[ui-form~='co:focus:#{$c}'] {
+        &:focus-within {
+          @include theme {
+            color: mix(co($c), co(text), 85%);
+            box-shadow:
+              inset 0 0 0 1px rgba(co($c), 0.6),
+              0 0 0 2px rgba(co($c), 0.15) !important;
+            background-color: rgba(co($c), 0.035);
+          }
+        }
+      }
+    }
+
+    &,
+    textarea {
+      &:-webkit-autofill {
+        @include theme {
+          box-shadow: 0 0 0 1000px co(fore) inset;
+          color: co(read);
+          -webkit-text-fill-color: co(read);
+        }
+      }
+
+      &::-webkit-input-placeholder {
+        @include theme {
+          color: rgba(co(read), 0.5);
+        }
+      }
+    }
+
+    textarea {
+      width: 100%;
+    }
+  }
+}

package/form/form@b/upload.scss

@@ -0,0 +1,160 @@
+@use 'sass:math';
+
+[ui-form~='@b'] {
+  &[ui-form~='type:upload'] {
+    position: relative;
+    display: inline-flex;
+
+    &[ui-form~=':block'] {
+      display: flex;
+    }
+
+    %item {
+      position: relative;
+      width: 10rem;
+      height: 10rem;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      justify-items: center;
+      border-radius: 0.25em;
+      padding: 0.5em;
+      text-align: center;
+      overflow: hidden;
+      transition: all 0.5s;
+      border-style: solid;
+      border-width: 1px;
+      @include theme {
+        border-color: co(line);
+        background-color: co(fore);
+      }
+    }
+
+    @keyframes am-file-add {
+      0% {
+      }
+      100% {
+      }
+    }
+    @keyframes am-file-del {
+      0% {
+        opacity: 1;
+      }
+      30% {
+        margin: 0.5em 1.5em 1.5em 0.5em;
+        opacity: 0;
+      }
+      100% {
+        width: 0;
+        height: 0;
+        margin: 0;
+        opacity: 0;
+        padding: 0;
+      }
+    }
+
+    [ui-form-files] {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      & > * {
+        @extend %item;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 100%;
+          height: 0.5em;
+          top: 0;
+          left: 0;
+
+          @include theme {
+            background-color: co(fore);
+          }
+        }
+
+        img,
+        video {
+          max-width: 100%;
+          max-height: 100%;
+          border-radius: 0.15em;
+          transform: translate3d(0, 0, 0);
+          transition: all 0.5s;
+          transform-origin: 50% 0%;
+        }
+        // 进度条
+        [ui-form-file-progress] {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          @include theme {
+            background-color: rgba(co(fore), 0.85);
+          }
+          top: 0;
+          right: 0;
+        }
+
+        // 工具栏
+        [ui-form-file-tools] {
+          position: absolute;
+          height: 1.5em;
+          width: 100%;
+          opacity: 0;
+          pointer-events: none;
+          transition: all 0.5s;
+          bottom: 0em;
+          left: 0;
+          transform: translate3d(0, 2em, 0);
+
+          & > * {
+            width: 1.5em;
+            height: 1.5em;
+            border-radius: 50%;
+          }
+        }
+        &:hover {
+          [ui-form-file-tools] {
+            opacity: 1;
+            pointer-events: auto;
+            transform: translate3d(0, -0.5em, 0);
+          }
+          img,
+          video {
+            border-radius: 1em;
+            transform: translate3d(0, -2em, 0);
+          }
+        }
+
+        // 删除时
+        &.deling {
+          animation: am-file-del 0.35s forwards;
+        }
+      }
+    }
+
+    [ui-form-input] {
+      @extend %item;
+      border-style: dashed;
+      @include theme {
+        border-color: co(case);
+      }
+      input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        opacity: 0;
+
+        &:-webkit-autofill {
+          @include theme {
+            box-shadow: 0 0 0 1000px co(fore) inset;
+          }
+        }
+      }
+    }
+  }
+}

package/form/form@c/base.scss

@@ -0,0 +1,44 @@
+@use 'sass:math';
+// 全局共用
+@import '../base.scss';
+
+// 主题共用
+[ui-form~='@c'] {
+  // 禁用
+  &[ui-form~='disabled'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  // 撑满
+  &[ui-form~=':block'] {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  // 圆弧
+  &[ui-form~=':round'] {
+    border-radius: 50em;
+  }
+
+  // 清理
+  [ui-form-clean] {
+    display: inline-block;
+    @include theme {
+      color: co(case);
+      background:
+        linear-gradient(45deg, transparent 40%, co(fore) 45%, co(fore) 55%, transparent 60%) no-repeat center / 38% 38%,
+        linear-gradient(-45deg, transparent 40%, co(fore) 45%, co(fore) 55%, transparent 60%) no-repeat center / 38% 38%,
+        radial-gradient(circle at 50% 50%, currentColor 53%, transparent 58%);
+    }
+  }
+
+  input:-webkit-autofill {
+    @include theme {
+      box-shadow: 0 0 0 1000px mix(co(weak), co(fore), 50%) inset;
+      color: co(read);
+      -webkit-text-fill-color: co(read);
+    }
+  }
+}

package/form/form@c/checkbox.scss

@@ -0,0 +1,90 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+
+@keyframes am-checked {
+  0% {
+    transform: scale3d(0.9, 0.9, 1);
+  }
+  50% {
+    transform: scale3d(1, 1, 1);
+  }
+  100% {
+    transform: scale3d(0.9, 0.9, 1);
+  }
+}
+
+[ui-form~='@c'] {
+  // 复选框
+  &[ui-form~='type:checkbox'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    align-content: center;
+    flex-wrap: nowrap;
+
+    &[ui-form~='lt'] {
+      align-items: baseline;
+      [type='checkbox'] {
+        position: relative;
+        top: 0.15em;
+      }
+    }
+
+    &[ui-form~=':block'] {
+      display: flex;
+    }
+
+    [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: 25%;
+      transform: scale3d(0.9, 0.9, 1);
+      flex-shrink: 0;
+      @include theme {
+        background-color: mix(co(weak), co(fore), 50%);
+      }
+
+      &:checked {
+        background:
+          linear-gradient(0deg, transparent 29%, currentColor 31%) no-repeat 39.5% 0% / 5% 79%,
+          linear-gradient(47deg, currentColor 33%, transparent 34%) no-repeat,
+          linear-gradient(-50deg, currentColor 42%, transparent 43%) no-repeat,
+          linear-gradient(-50deg, transparent 73%, currentColor 74%) no-repeat,
+          linear-gradient(43deg, transparent 59%, currentColor 60%) no-repeat -32% 18% / 55% 80%,
+          linear-gradient(-45deg, transparent 59%, currentColor 60%) no-repeat 133% -20% / 70% 80%,
+          linear-gradient(45deg, transparent 65%, currentColor 66%) no-repeat 125% 0% / 50% 80%;
+        animation: am-checked 0.3s;
+        &,
+        & + * {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      & + * {
+        margin-left: 0.2em;
+      }
+    }
+  }
+}