@neatui/css 1.0.2

package/form/form@c/date.scss

@@ -0,0 +1,125 @@
+@use 'sass:math';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-form~='@c'] {
+  &[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-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] {
+        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;
+    }
+  }
+}

package/form/form@c/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@c/input.scss

@@ -0,0 +1,169 @@
+/**
+属性	        描述
+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~='@c'] {
+  &[ui-form~='type:input'] {
+    position: relative;
+    min-width: 6em;
+    height: 100%;
+    height: 2.5em;
+    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: mix(co(weak), co(fore), 50%);
+    }
+
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > * {
+      position: relative;
+    }
+
+    &:hover {
+      @include theme {
+        box-shadow: inset 0 0 0 1px rgba(co(main), 0.5);
+      }
+    }
+
+    &.form-focus,
+    &:focus-within {
+      @include theme {
+        background-color: mix(co(weak), co(fore), 50%);
+        box-shadow:
+          inset 0 0 0 1px rgba(co(main), 0.5),
+          0 0 0 2px 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;
+
+      // 清除数字箭头
+      &[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 mix(co(weak), co(fore), 50%) 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 0 0 1px rgba(co($c), 0.6),
+            0 0 0 2px 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 0 0 1px rgba(co($c), 0.6),
+              0 0 0 2px 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 0 0 1px rgba(co($c), 0.6),
+              0 0 0 2px 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);
+        input {
+          padding: (($sz_base - 1) * 0.25) 0.25em;
+        }
+      }
+      $sz_base: $sz_base + 0.5;
+    }
+
+    // 搜索
+    [ui-form-search] {
+      background: radial-gradient(circle at 47% 45%, transparent 40%, currentColor 43%, currentColor 53%, transparent 56%),
+        radial-gradient(circle at 78% 78%, currentColor 5%, rgba(0, 0, 0, 0) 6%), radial-gradient(circle at 82% 82%, currentColor 5%, rgba(0, 0, 0, 0) 6%),
+        radial-gradient(circle at 85% 85%, currentColor 5%, rgba(0, 0, 0, 0) 6%);
+    }
+  }
+}

package/form/form@c/radio.scss

@@ -0,0 +1,84 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+
+// 动画
+@keyframes am-radio {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+[ui-form~='@c'] {
+  // 单选框
+  &[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;
+      @include theme {
+        background-color: mix(co(weak), co(fore), 50%);
+      }
+
+      &:checked {
+        background-image: radial-gradient(circle at 50% 50%, currentColor 38%, transparent 40%);
+        box-shadow: inset 0 0 0 1px currentColor;
+        animation: am-radio 0.3s;
+        &,
+        & + * {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      & + * {
+        margin-left: 0.2em;
+      }
+    }
+  }
+}

package/form/form@c/select.scss

@@ -0,0 +1,121 @@
+@use 'sass:math';
+$sz: 'xs', 's', 'm', 'l', 'xl';
+
+[ui-form~='@c'] {
+  &[ui-form~='type:select'] {
+    position: relative;
+    cursor: pointer;
+    min-width: 6em;
+    height: 2.5em;
+    line-height: 1.5em;
+    transition: all 0.5s;
+
+    // 下拉
+    [ui-form-select] {
+      width: 0.8em;
+      height: 0.8em;
+      display: inline-block;
+      border-radius: 35%;
+      @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@c/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~='@c'] {
+  &[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: mix(co(weak), co(fore), 50%);
+      }
+      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@c/textarea.scss

@@ -0,0 +1,85 @@
+/**
+属性	        描述
+disabled	   规定输入字段应该被禁用。
+max	         规定输入字段的最大值。
+maxlength	   规定输入字段的最大字符数。
+min          规定输入字段的最小值。
+pattern	     规定通过其检查输入值的正则表达式。
+readonly	   规定输入字段为只读（无法修改）。
+required	   规定输入字段是必需的（必需填写）。
+size	       规定输入字段的宽度（以字符计）。
+step	       规定输入字段的合法数字间隔。
+value	       规定输入字段的默认值。
+*/
+@use 'sass:math';
+$co: 'info', 'well', 'warn', 'risk';
+
+[ui-form~='@c'] {
+  &[ui-form~='type:textarea'] {
+    position: relative;
+    min-width: 6em;
+    line-height: 1.5em;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    transition: all 0.5s;
+    background-color: transparent;
+
+    @include theme {
+      box-shadow: inset 0 0 0 1px co(case);
+      background-color: mix(co(weak), co(fore), 50%);
+    }
+
+    &:hover {
+      @include theme {
+        box-shadow: inset 0 0 0 1px rgba(co(main), 0.5);
+      }
+    }
+
+    &.form-focus,
+    &:focus {
+      background-color: transparent;
+      @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);
+          }
+        }
+      }
+    }
+  }
+}