@neatui/css 1.0.2

package/core/reset.scss

@@ -0,0 +1,165 @@
+*,
+:after,
+:before {
+  border: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  position: relative;
+}
+
+body,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+button,
+input,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Microsoft YaHei, PingFang SC, sans-serif;
+  line-height: 1.75;
+
+  &.sharp {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+button,
+input,
+select,
+textarea {
+  outline: none;
+}
+
+input,
+button,
+textarea {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+}
+
+// input:-webkit-autofill {
+//   box-shadow: 0 0 0 1000px white inset;
+// }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  transition: background-color 1s 500000s, color 1s 500000s;
+}
+html input:-internal-autofill-selected {
+  background-color: transparent !important;
+}
+
+input,
+button,
+textarea,
+select,
+optgroup,
+option,
+label,
+fieldset,
+legend {
+  font-family: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: normal;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+table {
+  border-spacing: 0;
+  font-size: inherit;
+
+  // 固定尺寸
+  &.fix {
+    table-layout: fixed;
+  }
+}
+th {
+  text-align: inherit;
+}
+
+address,
+cite,
+dfn,
+em,
+var {
+  font-style: normal;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  display: inline-block;
+  outline: none;
+  cursor: pointer;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+sup {
+  position: relative;
+  vertical-align: text-top;
+  font-size: 0.5em;
+  line-height: 1;
+  font-weight: bold;
+}
+
+// 移动端
+@media screen and (max-width: 1024px) {
+  * {
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+}

package/core/scale.scss

@@ -0,0 +1,24 @@
+@mixin scale($d: '') {
+  $rank: 'xxs', 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl', 'xxl';
+
+  $sz: 0;
+  @each $k in $rank {
+    [ui-scale~='#{$k}'] {
+      transform: scale($sz);
+
+      &[ui-scale~='ct'] {
+        transform-origin: 50% 0%;
+      }
+      &[ui-scale~='cb'] {
+        transform-origin: 50% 100%;
+      }
+      &[ui-scale~='lm'] {
+        transform-origin: 0% 50%;
+      }
+      &[ui-scale~='rm'] {
+        transform-origin: 100% 50%;
+      }
+    }
+    $sz: $sz + 0.1;
+  }
+}

package/core/scroll.scss

@@ -0,0 +1,178 @@
+%scroll {
+  & {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-gutter: auto;
+    @include theme {
+      scrollbar-color: rgba(co(text), 0.15) transparent;
+    }
+
+    &::-webkit-scrollbar {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border: 1px solid transparent;
+      border-radius: 10px;
+      @include theme {
+        background-color: rgba(co(text), 0.15) !important;
+      }
+      background-clip: content-box;
+    }
+
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-track-piece,
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+      background-color: transparent;
+    }
+  }
+
+  &[ui-scroll~='xs'] {
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+  }
+  &[ui-scroll~='s'] {
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+  }
+  &[ui-scroll~='m'] {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+  }
+  &[ui-scroll~='l'] {
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+  }
+  &[ui-scroll~='xl'] {
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+
+.ui-scroll,
+[ui-scroll] {
+  @extend %scroll;
+}
+
+.ui-scroll-x,
+[ui-scroll~=':x'] {
+  overflow-x: auto;
+}
+
+.ui-scroll-y,
+[ui-scroll~=':y'] {
+  overflow-y: auto;
+}
+.ui-scroll-x-hidden,
+[ui-scroll~='x:hidden'] {
+  overflow-x: hidden;
+}
+.ui-scroll-y-hidden,
+[ui-scroll~='y:hidden'] {
+  overflow-y: hidden;
+}
+
+.ui-scroll-unset,
+.ui-scroll-x-unset,
+[ui-scroll~='x:unset'] {
+  overflow-x: unset;
+}
+.ui-scroll-unset,
+.ui-scroll-y-unset,
+[ui-scroll~='y:unset'] {
+  overflow-y: unset;
+}
+
+::-webkit-scrollbar-thumb {
+  @include theme {
+    background-color: rgba(co(text), 0.15) !important;
+  }
+}
+
+@include med('>mob') {
+  %mob-scroll {
+    & {
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: thin;
+      scrollbar-gutter: auto;
+      @include theme {
+        scrollbar-color: rgba(co(text), 0.15) transparent;
+      }
+
+      &::-webkit-scrollbar {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border: 1px solid transparent;
+        border-radius: 10px;
+        @include theme {
+          background-color: rgba(co(text), 0.15) !important;
+        }
+        background-clip: content-box;
+      }
+
+      &::-webkit-scrollbar-track,
+      &::-webkit-scrollbar-button,
+      &::-webkit-scrollbar-track-piece,
+      &::-webkit-scrollbar-corner,
+      &::-webkit-resizer {
+        background-color: transparent;
+      }
+    }
+
+    &[ui-scroll~='xs'] {
+      &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+      }
+    }
+    &[ui-scroll~='s'] {
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+      }
+    }
+    &[ui-scroll~='m'] {
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+    }
+    &[ui-scroll~='l'] {
+      &::-webkit-scrollbar {
+        width: 7px;
+        height: 7px;
+      }
+    }
+    &[ui-scroll~='xl'] {
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+
+  html,
+  body {
+    @extend %mob-scroll;
+  }
+}

package/core/shadow.scss

@@ -0,0 +1,81 @@
+// 阴影
+$cos: main, read, case, line, back;
+$szs: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll;
+
+div {
+  width: 5em;
+  height: 2em;
+  margin: 1em;
+  background: #f0f0f0;
+}
+
+.bs {
+  box-shadow: inset 0 0 0 1px currentColor;
+}
+
+.bs-x {
+  box-shadow: inset 1px 0 0 0 currentColor, inset -1px 0 0 0 currentColor;
+}
+
+.bs-y {
+  box-shadow: inset 0 1px 0 0 currentColor, inset 0 -1px 0 0 currentColor;
+}
+
+.bs-l {
+  box-shadow: inset 1px 0 0 0 currentColor;
+}
+
+.bs-r {
+  box-shadow: inset -1px 0 0 0 currentColor;
+}
+
+.bs-t {
+  box-shadow: inset 0 1px 0 0 currentColor;
+}
+
+.bs-b {
+  box-shadow: inset 0 -1px 0 0 currentColor;
+}
+
+/* 主题色 */
+.bs-xs-main {
+  @include theme {
+    box-shadow: inset 0 0 0 1px co(main);
+  }
+}
+
+.bs-x-xs-main {
+  @include theme {
+    box-shadow: inset 1px 0 0 0 co(main), inset -1px 0 0 0 co(main);
+  }
+}
+
+.bs-y-xs-main {
+  @include theme {
+    box-shadow: inset 0 1px 0 0 co(main), inset 0 -1px 0 0 co(main);
+  }
+}
+
+.bs-l-xs-main {
+  @include theme {
+    box-shadow: inset 1px 0 0 0 co(main);
+  }
+}
+
+.bs-r-xs-main {
+  @include theme {
+    box-shadow: inset -1px 0 0 0 co(main);
+  }
+}
+
+.bs-t-xs-main {
+  @include theme {
+    box-shadow: inset 0 1px 0 0 co(main);
+  }
+}
+
+.bs-b-xs-main {
+  @include theme {
+    box-shadow: inset 0 -1px 0 0 co(main);
+  }
+}

package/core/size.mobile.scss

@@ -0,0 +1,105 @@
+/*
+ * 模块：字号
+ * 模块类型：b(基础模块)
+ * 精度：9 +
+ * 分级：3 +
+ * 适配：桌面 | 平析 | 移动
+ * 兼容：
+ * 版本：v0.0.1
+ * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
+ */
+
+// 全局字号
+// @mixin baseSize($sz: 13) {
+//   $size: 'xs', 's', 'm', 'l', 'xl';
+
+//   @each $i in $size {
+//     [size='#{$i}'],
+//     [ui-size='#{$i}'] {
+//       $s: index($size, $i) + $sz;
+//       font-size: #{$s}px;
+//     }
+//   }
+// }
+
+// 分级字号
+@mixin randSize($d: '') {
+  $rank: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
+  // 分级字号
+  .#{$d}fs-no {
+    font-size: 0rem;
+  }
+  .#{$d}lh-no {
+    line-height: 0;
+  }
+
+  $sz: 0.2;
+
+  @each $k in $rank {
+    .#{$d}lh-#{$k} {
+      line-height: #{$sz * 5};
+    }
+
+    @if ($sz<0.2) {
+      $sz: $sz + 0.01;
+    } @else if ($sz<.28) {
+      $sz: $sz + 0.02;
+    } @else if($sz<.4) {
+      $sz: $sz + 0.04;
+    } @else if($sz<.6) {
+      $sz: $sz + 0.06;
+    } @else {
+      $sz: $sz + 0.08;
+    }
+
+    .#{$d}fs-#{$k},
+    .#{$d}fs-#{$k}-sub > *,
+    .#{$d}fs-#{$k}-sub\:sta > *::before,
+    .#{$d}fs-#{$k}-sub\:end > *::after,
+    .#{$d}fs-#{$k}\:sta::before,
+    .#{$d}fs-#{$k}\:end::after {
+      font-size: #{$sz}rem;
+    }
+  }
+
+  // 标题
+  $hsz: 1;
+
+  h1,
+  .h1 {
+    font-size: 2em;
+  }
+  h2,
+  .h2 {
+    font-size: 1.6em;
+  }
+  h3,
+  .h3 {
+    font-size: 1.4em;
+  }
+  h4,
+  .h4 {
+    font-size: 1.2em;
+  }
+  h5,
+  .h5 {
+    font-size: 1.1em;
+  }
+  h6,
+  .h6 {
+    font-size: 1em;
+  }
+}
+
+// 桌面
+@include randSize();
+
+// 平板
+@media screen and (max-width: 1024px) {
+  @include randSize('pad\\:');
+}
+
+// 移动
+@media screen and (max-width: 767px) {
+  @include randSize('mob\\:');
+}

package/core/size.scss

@@ -0,0 +1,178 @@
+/*
+ * 模块：字号
+ * 模块类型：b(基础模块)
+ * 精度：9 +
+ * 分级：3 +
+ * 适配：桌面 | 平析 | 移动
+ * 兼容：
+ * 版本：v0.0.1
+ * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
+ */
+
+// 全局字号
+@mixin baseSize($sz: 13) {
+  $size: 'xs', 's', 'm', 'l', 'xl';
+
+  @each $i in $size {
+    [size='#{$i}'],
+    [ui-size='#{$i}'] {
+      $s: index($size, $i) + $sz;
+      font-size: #{$s}px;
+    }
+  }
+}
+
+// 分级字号
+@mixin randSize($d: '') {
+  $rank: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
+  // 分级字号
+  .#{$d}fs-no {
+    font-size: 0rem;
+  }
+  .#{$d}lh-no {
+    line-height: 0;
+  }
+
+  $sz: 0.7;
+  @each $k in $rank {
+    @if ($sz<1.2) {
+      $sz: $sz + 0.1;
+    } @else if ($sz<1.4) {
+      $sz: $sz + 0.2;
+    } @else if($sz<2.4) {
+      $sz: $sz + 0.4;
+    } @else if($sz<3.4) {
+      $sz: $sz + 0.6;
+    } @else {
+      $sz: $sz + 0.8;
+    }
+
+    .#{$d}fs-#{$k},
+    .#{$d}fs-#{$k}-sub > *,
+    .#{$d}fs-#{$k}-sub\:sta > *::before,
+    .#{$d}fs-#{$k}-sub\:end > *::after,
+    .#{$d}fs-#{$k}\:sta::before,
+    .#{$d}fs-#{$k}\:end::after {
+      font-size: #{$sz}rem;
+    }
+    // 双倍
+    .#{$d}fs-#{$k}\*2,
+    .#{$d}fs-#{$k}-sub\*2 > *,
+    .#{$d}fs-#{$k}-sub\*2\:sta > *::before,
+    .#{$d}fs-#{$k}-sub\*2\:end > *::after,
+    .#{$d}fs-#{$k}\*2\:sta::before,
+    .#{$d}fs-#{$k}\*2\:end::after {
+      font-size: #{$sz * 2}rem;
+    }
+    // 三倍
+    .#{$d}fs-#{$k}\*3,
+    .#{$d}fs-#{$k}-sub\*3 > *,
+    .#{$d}fs-#{$k}-sub\*3\:sta > *::before,
+    .#{$d}fs-#{$k}-sub\*3\:end > *::after,
+    .#{$d}fs-#{$k}\*3\:sta::before,
+    .#{$d}fs-#{$k}\*3\:end::after {
+      font-size: #{$sz * 3}rem;
+    }
+  }
+
+  .#{$d}lh-no {
+    line-height: 1;
+  }
+  .#{$d}lh-xs {
+    line-height: 1;
+  }
+  .#{$d}lh-ss {
+    line-height: 1.25;
+  }
+  .#{$d}lh-sm {
+    line-height: 1.5;
+  }
+  .#{$d}lh-ms {
+    line-height: 1.75;
+  }
+  .#{$d}lh-mm {
+    line-height: 2;
+  }
+  .#{$d}lh-ml {
+    line-height: 2.25;
+  }
+  .#{$d}lh-ls {
+    line-height: 2.5;
+  }
+  .#{$d}lh-lm {
+    line-height: 2.75;
+  }
+  .#{$d}lh-ll {
+    line-height: 3;
+  }
+  .#{$d}lh-xl {
+    line-height: 3.5;
+  }
+
+  // 标题
+  $hsz: 1;
+  // @for $i from 1 through 6 {}
+  // $h_sz: 1;
+  // @for $i from 1 through 6 {
+  //   $sz: 1 + (4 - $i)/10 + $h_sz;
+  //   $sz: round($sz * 10) / 10;
+
+  //   @if ($d == '') {
+  //     h#{$i},
+  //     .#{$d}h#{$i} {
+  //       font-size: #{$sz}em;
+  //     }
+  //   } @else {
+  //     .#{$d}h#{$i} {
+  //       font-size: #{$sz}em;
+  //     }
+  //   }
+
+  //   $h_sz: $h_sz - ($h_sz/3);
+  // }
+
+  h1,
+  .h1 {
+    font-size: 2em;
+  }
+  h2,
+  .h2 {
+    font-size: 1.6em;
+  }
+  h3,
+  .h3 {
+    font-size: 1.4em;
+  }
+  h4,
+  .h4 {
+    font-size: 1.2em;
+  }
+  h5,
+  .h5 {
+    font-size: 1.1em;
+  }
+  h6,
+  .h6 {
+    font-size: 1em;
+  }
+}
+
+// 桌面
+@include baseSize(11);
+@include randSize();
+
+// 平板
+@media screen and (max-width: 1024px) {
+  @include randSize('pad\\:');
+}
+
+// 移动
+@media screen and (max-width: 767px) {
+  // @include baseSize(9);
+  @include randSize('mob\\:');
+}
+
+// 超小屏
+@media screen and (max-width: 374px) {
+  @include baseSize(9);
+}