@neatui/css 1.0.2

package/form/form@a/upload.scss

@@ -0,0 +1,162 @@
+@use 'sass:math';
+
+[ui-form~='@a'] {
+  &[ui-form~='type:upload'] {
+    position: relative;
+    display: inline-flex;
+
+    &[ui-form~=':block'] {
+      display: flex;
+    }
+
+    %item {
+      position: relative;
+      width: 7.5rem;
+      height: 7.5rem;
+      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(case);
+        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,
+        svg,
+        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,
+          svg,
+          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@b/base.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+// 全局共用
+@import '../base.scss';
+
+// 主题共用
+[ui-form~='@b'] {
+  // 禁用
+  &[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@b/checkbox.scss

@@ -0,0 +1,86 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+
+@keyframes am-b-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:checkbox'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    align-content: center;
+    flex-wrap: nowrap;
+    vertical-align: middle;
+    user-select: none;
+
+    &[ui-form~='lt'] {
+      align-items: baseline;
+      [type='checkbox'] {
+        position: relative;
+        top: 0.15em;
+      }
+    }
+
+    [type='checkbox'] {
+      appearance: none;
+      font-size: inherit;
+      width: 0.95em;
+      height: 0.95em;
+      border: 0;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      box-shadow: inset 0 0 0 1px currentColor;
+      border-radius: 0.2em;
+      flex-shrink: 0;
+
+      &:checked {
+        background: radial-gradient(circle at 23% 43.3%, currentColor 5%, transparent 6%), radial-gradient(circle at 26% 46%, currentColor 5.5%, transparent 6.5%),
+          radial-gradient(circle at 29% 49%, currentColor 6%, transparent 7%), radial-gradient(circle at 32% 51.5%, currentColor 6.5%, transparent 7.5%),
+          radial-gradient(circle at 35% 54.4%, currentColor 7%, transparent 8%), radial-gradient(circle at 38% 57.5%, currentColor 7.5%, transparent 8.5%),
+          radial-gradient(circle at 42% 61%, currentColor 8%, transparent 9%), radial-gradient(circle at 45% 63%, currentColor 9%, transparent 10%),
+          radial-gradient(circle at 47% 69.8%, currentColor 5%, transparent 6%), radial-gradient(circle at 50.8% 63.8%, currentColor 5%, transparent 6%),
+          radial-gradient(circle at 52.5% 57%, currentColor 8%, transparent 9%), radial-gradient(circle at 55.8% 52%, currentColor 7.5%, transparent 8.5%),
+          radial-gradient(circle at 59% 47.5%, currentColor 7%, transparent 8%), radial-gradient(circle at 62.8% 42%, currentColor 6%, transparent 7%),
+          radial-gradient(circle at 66.8% 37%, currentColor 5%, transparent 6%), radial-gradient(circle at 70% 32.5%, currentColor 4.5%, transparent 5.5%),
+          radial-gradient(circle at 73.8% 28%, currentColor 3.9%, transparent 4.9%), radial-gradient(circle at 77.5% 23.7%, currentColor 3.4%, transparent 4.4%),
+          radial-gradient(circle at 81% 19.5%, currentColor 3%, transparent 4%), radial-gradient(circle at 85% 15.2%, currentColor 2.5%, transparent 3.5%);
+        animation: am-b-checked 0.3s;
+        &,
+        & + * {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      & + * {
+        margin-left: 0.2em;
+      }
+    }
+  }
+}

package/form/form@b/date.scss

@@ -0,0 +1,107 @@
+@use 'sass:math';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-form~='@b'] {
+  &[ui-form~='type:date'] {
+    position: relative;
+    cursor: pointer;
+    min-width: 6em;
+    height: 2.5em;
+    line-height: 1.5em;
+    transition: all 0.5s;
+
+    // 日历
+    [ui-form-date] {
+      background:
+        linear-gradient(
+            180deg,
+            transparent 6%,
+            currentColor 8%,
+            currentColor 15%,
+            transparent 17%,
+            transparent 37%,
+            currentColor 39%,
+            currentColor 45%,
+            transparent 47%,
+            transparent 88%,
+            currentColor 90%
+          )
+          no-repeat center / 70% 70%,
+        linear-gradient(90deg, currentColor 10%, transparent 11%, transparent 89%, currentColor 90%) no-repeat center 55% / 70% 58%,
+        linear-gradient(90deg, currentColor 23%, transparent 25%, transparent 75%, currentColor 77%) no-repeat center 16% / 30% 22%;
+    }
+
+    // 下拉菜单活动
+    &[ui-form-open~='show'],
+    &[ui-form~='ux:hover']:hover {
+      [ui-form-select] {
+        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;
+    }
+  }
+}
+
+// 下拉菜单
+[ui-form-dropdown='@b'] {
+  position: absolute;
+  top: 100%;
+  @include theme {
+    background: co(fore);
+  }
+  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;
+  }
+}

package/form/form@b/index.scss

@@ -0,0 +1,9 @@
+@import './base.scss';
+@import './input.scss';
+@import './textarea.scss';
+@import './radio.scss';
+@import './checkbox.scss';
+@import './switch.scss';
+@import './select.scss';
+@import './date.scss';
+@import './upload.scss';

package/form/form@b/input.scss

@@ -0,0 +1,163 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'warn', 'risk';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-form~='@b'] {
+  &[ui-form~='type:input'] {
+    position: relative;
+    min-width: 6em;
+    height: 100%;
+    height: 2.5em;
+    line-height: 1.5em;
+    padding: 0.5em 0;
+    transition: all 0.5s;
+    @include theme {
+      box-shadow: inset 0 -1px 0 0 co(case);
+    }
+
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > * {
+      position: relative;
+    }
+
+    &:hover {
+      @include theme {
+        box-shadow: inset 0 -1px 0 0 rgba(co(main), 0.5);
+      }
+    }
+
+    &.form-focus,
+    &:focus-within {
+      @include theme {
+        background-color: co(fore);
+        box-shadow:
+          inset 0 -1px 0 0 rgba(co(main), 0.5),
+          0 2px 0 0 rgba(co(main), 0.15);
+      }
+    }
+
+    input {
+      flex-shrink: 1;
+      flex-grow: 1;
+      // 未知原因如果不设宽度会把 ui-form-subffix 挤出框外
+      width: 100%;
+      height: 100%;
+      // padding: 0 0.25em;
+      border: 0;
+      background-color: transparent;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      // 清除数字箭头
+      &[type='number'] {
+        // 火狐内核
+        appearance: textfield;
+        // 谷歌内核
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+          appearance: none;
+          margin: 0;
+        }
+      }
+
+      &:-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);
+        }
+      }
+    }
+
+    // 禁用
+    &[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;
+    }
+
+    // 颜色
+    @each $c in $co {
+      &[ui-form~='co:#{$c}'] {
+        @include theme {
+          color: mix(co($c), co(text), 85%);
+          box-shadow:
+            inset 0 -1px 0 0 rgba(co($c), 0.6),
+            0 2px 0 0 rgba(co($c), 0.15) !important;
+          // background-color: rgba(co($c), 0.03);
+        }
+      }
+
+      &[ui-form~='co:hover:#{$c}'] {
+        &:hover {
+          @include theme {
+            color: mix(co($c), co(text), 85%);
+            box-shadow:
+              inset 0 -1px 0 0 rgba(co($c), 0.6),
+              0 2px 0 0 rgba(co($c), 0.15) !important;
+            // background-color: rgba(co($c), 0.03);
+          }
+        }
+      }
+
+      &[ui-form~='co:focus:#{$c}'] {
+        &:focus-within {
+          @include theme {
+            color: mix(co($c), co(text), 85%);
+            box-shadow:
+              inset 0 -1px 0 0 rgba(co($c), 0.6),
+              0 2px 0 0 rgba(co($c), 0.15) !important;
+            // background-color: rgba(co($c), 0.03);
+          }
+        }
+      }
+    }
+
+    // 尺寸
+    $sz_base: 1.5em;
+    @each $s in $sz {
+      &[ui-form~='sz:#{$s}'] {
+        height: $sz_base;
+        padding: (($sz_base - 1) * 0.25) 0;
+        input {
+          padding: (($sz_base - 1) * 0.25) 0;
+        }
+      }
+      $sz_base: $sz_base + 0.5;
+    }
+  }
+}

package/form/form@b/radio.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-b-radio {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+[ui-form~='@b'] {
+  // 单选框
+  &[ui-form~='type:radio'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    align-content: center;
+    flex-wrap: nowrap;
+
+    &[ui-form~='lt'] {
+      align-items: baseline;
+      [type='radio'] {
+        position: relative;
+        top: 0.15em;
+      }
+    }
+
+    &[ui-form~=':block'] {
+      display: flex;
+    }
+
+    [type='radio'] {
+      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: 50%;
+      flex-shrink: 0;
+
+      &:checked {
+        background: radial-gradient(circle at 23% 43.3%, currentColor 5%, transparent 6%), radial-gradient(circle at 26% 46%, currentColor 5.5%, transparent 6.5%),
+          radial-gradient(circle at 29% 49%, currentColor 6%, transparent 7%), radial-gradient(circle at 32% 51.5%, currentColor 6.5%, transparent 7.5%),
+          radial-gradient(circle at 35% 54.4%, currentColor 7%, transparent 8%), radial-gradient(circle at 38% 57.5%, currentColor 7.5%, transparent 8.5%),
+          radial-gradient(circle at 42% 61%, currentColor 8%, transparent 9%), radial-gradient(circle at 45% 63%, currentColor 9%, transparent 10%),
+          radial-gradient(circle at 47% 69.8%, currentColor 5%, transparent 6%), radial-gradient(circle at 50.8% 63.8%, currentColor 5%, transparent 6%),
+          radial-gradient(circle at 52.5% 57%, currentColor 8%, transparent 9%), radial-gradient(circle at 55.8% 52%, currentColor 7.5%, transparent 8.5%),
+          radial-gradient(circle at 59% 47.5%, currentColor 7%, transparent 8%), radial-gradient(circle at 62.8% 42%, currentColor 6%, transparent 7%),
+          radial-gradient(circle at 66.8% 37%, currentColor 5%, transparent 6%), radial-gradient(circle at 70% 32.5%, currentColor 4.5%, transparent 5.5%),
+          radial-gradient(circle at 73.8% 28%, currentColor 3.9%, transparent 4.9%), radial-gradient(circle at 77.5% 23.7%, currentColor 3.4%, transparent 4.4%),
+          radial-gradient(circle at 81% 19.5%, currentColor 3%, transparent 4%), radial-gradient(circle at 85% 15.2%, currentColor 2.5%, transparent 3.5%);
+        box-shadow: inset 0 0 0 1px currentColor;
+        animation: am-b-radio 0.3s;
+        &,
+        & + * {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      & + * {
+        margin-left: 0.2em;
+      }
+    }
+  }
+}