@neatui/css 1.0.2

package/form/form@d/input.scss

@@ -0,0 +1,346 @@
+/**
+属性	        描述
+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~='@d'] {
+  &[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);
+      background-color: co(fore);
+    }
+
+    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;
+
+      // 清除数字箭头
+      &[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-prefix],
+    [ui-form-suffix] {
+      position: relative;
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      align-content: center;
+      flex-shrink: 0;
+
+      & > * {
+        min-width: 1em;
+        margin: 0 0.25em;
+        height: 1em;
+        flex-shrink: 0;
+        transition:
+          transform 0.15s,
+          opacity 0.5s;
+        opacity: 0.8;
+        // &:hover {
+        //   opacity: 1;
+        //   transform: scale3d(1.1, 1.1, 1);
+        // }
+        // &:active,
+        // &:hover:active {
+        //   transform: scale3d(0.95, 0.95, 1);
+        // }
+      }
+    }
+    [ui-form-suffix] {
+      justify-content: end;
+    }
+
+    // 查看密码
+    [ui-form-cipher] {
+      @include theme {
+        color: co(note);
+      }
+      background:
+        radial-gradient(at 50% 50%, transparent 53%, currentColor 56%, currentColor 67%, transparent 70%) no-repeat center / 100% 75%,
+        radial-gradient(circle at 50% 50%, transparent 15%, currentColor 18%, currentColor 27%, transparent 30%),
+        linear-gradient(-45deg, transparent 44%, currentColor 47%, currentColor 53%, transparent 56%) no-repeat center / 75% 75%;
+    }
+    [type='password'] + * > [ui-form-cipher] {
+      background:
+        radial-gradient(at 50% 50%, transparent 53%, currentColor 56%, currentColor 67%, transparent 70%) no-repeat center / 100% 75%,
+        radial-gradient(circle at 50% 50%, transparent 15%, currentColor 18%, currentColor 27%, transparent 30%);
+    }
+
+    // 验证
+    [ui-form-verify] {
+      & {
+        position: absolute;
+        display: block;
+        width: 1em;
+        height: 1em;
+        right: -1.5em;
+        top: 50%;
+        margin-top: -0.5em;
+
+        &: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: 10%;
+          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: 10%;
+          left: 46.5%;
+          bottom: 24.5%;
+          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%,
+          50% {
+            transform: rotate(45deg) scale3d(0, 1, 1);
+          }
+          100% {
+            transform: rotate(45deg) scale3d(1, 1, 1);
+          }
+        }
+
+        @keyframes am-no-2 {
+          0% {
+            transform: rotate(-45deg) scale3d(0, 1, 1);
+          }
+          50%,
+          100% {
+            transform: rotate(-45deg) scale3d(1, 1, 1);
+          }
+        }
+
+        &::before {
+          width: 90%;
+          height: 10%;
+          left: 15%;
+          top: 11.5%;
+          transform: rotate(45deg);
+          background-color: currentColor;
+          transform-origin: 0% 100%;
+          animation: am-no-1 ease 0.6s both;
+        }
+
+        &::after {
+          width: 90%;
+          height: 10%;
+          right: 15%;
+          top: 11.5%;
+          transform-origin: 100% 100%;
+          transform: rotate(45deg);
+          background-color: currentColor;
+          animation: am-no-2 ease 0.6s both;
+        }
+      }
+    }
+
+    // 清理
+    [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%);
+      }
+    }
+
+    // 禁用
+    &[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: transparent;
+        }
+      }
+
+      &[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: transparent;
+          }
+        }
+      }
+
+      &[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: transparent;
+          }
+        }
+      }
+    }
+
+    // 尺寸
+    $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;
+    }
+
+    // 搜索
+    [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@d/radio.scss

@@ -0,0 +1,81 @@
+/**
+属性	        描述
+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~='@d'] {
+  // 单选框
+  &[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 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@d/select.scss

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