earthnut 0.2.3-alpha.3 → 1.0.0

package/styles/common.scss

@@ -1,6 +1,12 @@
-@use "./vars-color.scss" as *;
-@use "./respond" as rp;
-@use "root.scss";
+@use "./vars-color.scss"as *;
+@use "./respond"as rp;
+@use "./root.scss";
+@use "./loading-keyframes.scss";
+@use "./flex.scss";
+@use "./header.scss";
+@use "./image.scss";
+@use "./text.scss";
+@use './input.scss';
 
 .en-full-container {
   width: 100%;
@@ -17,6 +23,7 @@
 
 @for $i from 1 through 10 {
   $v: #{calc($i * 4)};
+
   // 水平方向的 padding
   .en-padding-horizontal-#{$v} {
     padding-left: #{$v}px;
@@ -66,43 +73,6 @@
   position: relative;
 }
 
-.en-flex,
-.en-flex-row,
-.en-flex-column,
-.en-flex-row-reverse,
-.en-flex-column-reverse {
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.en-flex,
-.en-flex-row {
-  flex-direction: row;
-}
-
-.en-flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.en-flex-column {
-  flex-direction: column;
-}
-
-.en-flex-column {
-  flex-direction: column-reverse;
-}
-
-.en-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.en-flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.en-flex-warp-reverse {
-  flex-wrap: wrap-reverse;
-}
 
 .en-center {
   position: absolute;
@@ -112,46 +82,12 @@
 }
 
 .en-dust {
-  color: var(--primary-dust);
-}
-
-/** 文本显示一行，超出点点点 */
-.en-text-in-one-line {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
+  color: var(---en-text-dust);
 }
 
-.en-text-in-one-line-hide {
-  white-space: nowrap;
-  text-overflow: clip;
-  overflow: hidden;
-  word-break: break-all;
-}
-
-/** 文本显示两行，超出点点点 */
-.en-text-in-two-line {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-/*  彩色字 */
-.en-color-text {
-  color: transparent;
-  background-image: linear-gradient(45deg, #ff0, #0f0, #f00, #0ff, #00f, #f0f, #ff0);
-  background-position: 0% 0%;
-  background-size: 400% 200%;
-  background-clip: text;
-  animation: 6s ease-in 0s infinite colorText alternate;
-}
 
 .en-red-bg {
-  background-color: #f12;
+  background-color: var(--en-color-red-70);
 }
 
 .en-float-left {
@@ -182,20 +118,6 @@
   animation: 2.4s ease-in-out 0s infinite loading;
 }
 
-// 文本剧中
-.en-text-center {
-  text-align: center;
-}
-
-// 文本靠右
-.en-text-right {
-  text-align: end;
-}
-//小文本
-.en-text-small {
-  font-size: 0.6rem;
-}
-
 // 用户可操作
 .en-user-select-text {
   -khtml-user-select: text;
@@ -206,257 +128,4 @@
 
 .en-cursor-pointer {
   cursor: pointer;
-}
-
-@keyframes loading {
-  //  45 - 25 * Math.sin((Math.PI * 5) / 12)
-  //  位置公式 35 - 25 * Math.cos((Math.PI * 5) / 12)
-
-  100%,
-  0% {
-    background-size:
-      10% 10%,
-      10% 10%,
-      10% 10%,
-      10% 10%;
-    background-position:
-      25% 45%,
-      41.7% 45%,
-      58.3% 45%,
-      75% 45%;
-  }
-
-  20%,
-  80% {
-    background-size: 2.5% 2.5%;
-    background-position: 25% 45%;
-  }
-
-  22% {
-    background-size:
-      3.75% 3.75%,
-      2.5% 2.5%,
-      2.5% 2.5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 1
-      25.85% 38.53%,
-      25% 45%,
-      25% 45%,
-      25% 45%;
-  }
-
-  24% {
-    background-size:
-      5% 5%,
-      2.5% 2.5%,
-      2.5% 2.5%,
-      2.5% 2.5%;
-    background-position:
-    // 位置 2
-      28.35% 32.5%,
-      25% 45%,
-      25% 45%,
-      25% 45%;
-  }
-
-  26% {
-    background-size:
-      6.25% 6.25%,
-      2.5% 2.5%,
-      2.5% 2.5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 3
-      32.32% 27.32%,
-      25% 45%,
-      25% 45%,
-      25% 45%;
-  }
-
-  28% {
-    background-size:
-      7.5% 7.5%,
-      3.75% 3.75%,
-      2.5% 2.5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 4
-      37.5% 23.35%,
-      // 位置 1
-      25.85% 38.53%,
-      25% 45%,
-      25% 45%;
-  }
-
-  30% {
-    background-size:
-      8.75% 8.75%,
-      5% 5%,
-      2.5% 2.5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 5
-      43.53% 20.85%,
-      // 位置 2
-      28.35% 32.5%,
-      25% 45%,
-      25% 45%;
-  }
-
-  32% {
-    background-size:
-      10% 10%,
-      6.25% 6.25%,
-      3.75% 3.75%,
-      2.5% 2.5%;
-    background-position:
-        // 位置 6
-      50% 20%,
-      // 位置 3
-      32.32% 27.32%,
-      // 位置 1
-      25.85% 38.53%,
-      25% 45%;
-  }
-
-  34% {
-    background-size:
-      10% 10%,
-      7.5% 7.5%,
-      5% 5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 7
-      56.47% 20.85%,
-      // 位置 4
-      37.32% 23.35%,
-      // 位置 2
-      28.35% 32.5%,
-      // 位置 1
-      25.85% 38.53%;
-  }
-
-  $Pi: 3.1415926;
-
-  @for $i from 18 through 33 {
-    #{calc($i / 50 * 100%)} {
-      background-position:
-        #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) * 1%},
-        #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) * 1%},
-        #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) * 1%},
-        #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) * 1%};
-    }
-  }
-
-  68% {
-    background-size:
-      10% 10%,
-      7.5% 7.5%,
-      5% 5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 0
-      25% 45%,
-      // 位置  22
-      28.35% 57.45%,
-      // 位置 20
-      37.45% 66.65%,
-      // 位置 18
-      48% 70%;
-  }
-
-  70% {
-    background-size:
-      8.75% 8.75%,
-      7.5% 7.5%,
-      5% 5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 0
-      25% 45%,
-      // 位置  23
-      25.85% 51.47%,
-      // 位置 21
-      32.32% 62.68%,
-      // 位置 19
-      43.53% 69.15%;
-  }
-
-  72% {
-    background-size:
-      7.5% 7.5%,
-      7.5% 7.5%,
-      5% 5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 0
-      25% 45%,
-      // 位置 0
-      25% 45%,
-      // 位置  22
-      28.35% 57.45%,
-      // 位置 20
-      37.45% 66.65%;
-  }
-  74% {
-    background-size:
-      6.25% 6.25%,
-      6.25% 6.25%,
-      5% 5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 0
-      25% 45%,
-      // 位置 0
-      25% 45%,
-      // 位置  23
-      25.85% 51.47%,
-      // 位置 21
-      32.32% 62.68%;
-  }
-
-  76% {
-    background-size:
-      5% 5%,
-      5% 5%,
-      5% 5%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 0
-      25% 45%,
-      // 位置 0
-      25% 45%,
-      // 位置 0
-      25% 45%,
-      // 位置  22
-      28.35% 57.45%;
-  }
-
-  78% {
-    background-size:
-      3.75% 3.75%,
-      3.75% 3.75%,
-      3.75% 3.75%,
-      2.5% 2.5%;
-    background-position:
-      // 位置 0
-      25% 45%,
-      // 位置 0
-      25% 45%,
-      // 位置 0
-      25% 45%,
-      // 位置  23
-      25.85% 51.47%;
-  }
-}
-
-@keyframes colorText {
-  0% {
-    background-position: 400% 0%;
-  }
-
-  100% {
-    background-position: 0% 0%;
-  }
-}
+}

package/styles/flex.scss

@@ -0,0 +1,38 @@
+.en-flex,
+.en-flex-row,
+.en-flex-column,
+.en-flex-row-reverse,
+.en-flex-column-reverse {
+  display: flex;
+  flex-wrap: nowrap;
+  flex: 1;
+}
+
+.en-flex,
+.en-flex-row {
+  flex-direction: row;
+}
+
+.en-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.en-flex-column {
+  flex-direction: column;
+}
+
+.en-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.en-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.en-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.en-flex-warp-reverse {
+  flex-wrap: wrap-reverse;
+}

package/styles/header.scss

@@ -0,0 +1,54 @@
+.en-h1,
+h1.en-h1,
+.en-style h1 {
+  font-size: 2.8rem;
+  line-height: 3rem;
+  margin-block: 0.87rem;
+  font-weight: 800;
+  text-align: center;
+}
+
+.en-h2,
+h2.en-h2,
+.en-style h2 {
+  font-size: 2.2rem;
+  line-height: 2.4rem;
+  margin-block: 0.94rem;
+  font-weight: 700;
+}
+
+.en-h3,
+h3.en-h3,
+.en-style h3 {
+  font-size: 1.6rem;
+  line-height: 1.8rem;
+  margin-block: 1rem;
+  font-weight: 600;
+}
+
+.en-h4,
+h4.en-h4,
+.en-style h4 {
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  margin-block: 1.02rem;
+  font-weight: 600;
+}
+
+.en-h5,
+h5.en-h5,
+.en-style h5 {
+  font-size: 0.94rem;
+  line-height: 1.14rem;
+  margin-block: 1.42rem;
+  font-weight: 600;
+}
+
+.en-h6,
+h6.en-h6,
+.en-style h6 {
+  font-size: 0.84rem;
+  line-height: 1.04rem;
+  margin-block: 2.12rem;
+  font-weight: 600;
+}

package/styles/image.scss

@@ -0,0 +1,10 @@
+img.en-img,
+.en-img,
+.en-style img {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

package/styles/input.scss

@@ -0,0 +1,131 @@
+.en-input-focus-visible-none,
+input.en-input-focus-visible-none,
+.en-style input:focus-visible {
+  outline: none;
+}
+
+.en-style input[type='button'],
+.cursor-pointer input[type='button'].cursor-pointer {
+  cursor: pointer;
+}
+
+.en-input-type-text-revers,
+input[type='text'].en-input-type-text-revers,
+.en-input-type-text-primary,
+input[type='text'].en-input-type-text-primary,
+.en-style input[type='text'] {
+  width: calc(var(--en-spacing) * 40);
+  border-radius: var(--en-spacing-3);
+  padding: var(--en-spacing-1) var(--en-spacing-3);
+
+  &:focus::placeholder {
+    color: transparent;
+  }
+}
+
+.en-input-type-text-primary,
+input[type='text'].en-input-type-text-primary,
+.en-style input[type='text'] {
+  background-color: var(--en-input-primary-background);
+  color: var(--en-input-primary-text);
+  border-style: outset;
+
+  &::placeholder {
+    color: var(--en-input-primary-placeholder-text);
+  }
+
+  &:focus-visible {
+    outline: var(--en-input-primary-focus-visible-outline);
+    border-color: transparent;
+    box-shadow: 0 2px 24px rgba(var(--en-input-primary-text-rgb), 0.6);
+  }
+}
+
+input[type='text'].en-input-type-text-revers,
+.en-input-type-text-revers {
+  background-color: var(--en-input-revers-background);
+  color: var(--en-input-revers-text);
+  border-style: outset;
+
+  &::placeholder {
+    color: var(--en-input-revers-placeholder-text);
+  }
+
+  &:focus-visible {
+    outline: var(--en-input-revers-focus-visible-outline);
+    border-color: transparent;
+    box-shadow: 0 2px 12px rgba(var(--en-input-revers-text-rgb), 0.6);
+  }
+}
+
+.en-input-type-radio-primary,
+.en-style input[type='radio'] {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+
+  + label {
+    padding-left: 15px;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      top: 50%;
+      transform: translate(0, -50%);
+      overflow: hidden;
+    }
+
+    $with: var(--en-spacing-base);
+
+    // 默认/未选中的前置
+    &::before {
+      left: 0px;
+      height: $with;
+      width: $with;
+      box-shadow: 1px 1px 3px var(--en-text-primary);
+      z-index: 1;
+    }
+
+    // 选中的项的额外涂色
+    &::after {
+      font-size: $with;
+      line-height: $with;
+      z-index: 2;
+      left: 0px;
+      height: $with;
+      width: $with;
+      color: var(--en-background-primary);
+      background-color: var(--en-text-primary);
+      clip-path: circle(0%);
+      transition: all var(--en-transition-slow);
+    }
+  }
+
+  &:checked {
+    color: #f00;
+
+    & + label {
+      color: var(--en-color-green-30);
+
+      &::before {
+        box-shadow:
+          1px 1px 3px var(--en-color-green-10),
+          -1px -1px 3px var(--en-color-green-10);
+      }
+
+      &::after {
+        background-color: var(--en-color-green-30);
+        clip-path: circle(100%);
+        transition: all 0.8s;
+      }
+    }
+  }
+}
+
+.en-input-type-image-primary,
+.en-style input[type='image'] {
+  -webkit-user-select: none;
+  user-select: none;
+}