enr 0.2.3-alpha.2

package/styles/common.scss

@@ -0,0 +1,453 @@
+@use "./vars-color.scss" as *;
+@use "./respond" as rp;
+@use "root.scss";
+
+.en-full-container {
+  width: 100%;
+  height: 100%;
+}
+
+@for $i from 1 through 10 {
+  $v: #{calc($i * 4)};
+  // 水平方向的 padding
+  .en-padding-horizontal-#{$v} {
+    padding-left: #{$v}px;
+    padding-right: #{$v}px;
+  }
+
+  // 垂直方向的 padding
+  .en-padding-vertical-#{$v} {
+    padding-top: #{$v}px;
+    padding-bottom: #{$v}px;
+  }
+
+  // 全方向的 padding 值
+  .en-padding-#{$v} {
+    padding: #{$v}px;
+  }
+
+  // 水平方向的 margin
+  .en-margin-horizontal-#{$v} {
+    margin-left: #{$v}px;
+    margin-right: #{$v}px;
+  }
+
+  // 垂直方向的 margin
+  .en-margin-vertical-#{$v} {
+    margin-top: #{$v}px;
+    margin-bottom: #{$v}px;
+  }
+
+  // 全方向的 margin 值
+  .en-margin-#{$v} {
+    margin: #{$v}px;
+  }
+
+  // 圆角
+  .en-border-radius-#{$v} {
+    border-radius: #{$v}px;
+  }
+}
+
+.en-inline-block {
+  display: inline-block;
+}
+
+.en-relative {
+  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;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.en-dust {
+  color: var(--primary-dust);
+}
+
+/** 文本显示一行，超出点点点 */
+.en-text-in-one-line {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.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;
+}
+
+.en-float-left {
+  float: left;
+}
+
+.en-float-right,
+.en-float {
+  float: right;
+}
+
+.en-clear-float,
+.en-clear {
+  clear: both;
+}
+
+.en-loading {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-image:
+    radial-gradient(#f00, #f00 50%, transparent 50%, transparent),
+    radial-gradient(#af1, #af1 50%, transparent 50%, transparent),
+    radial-gradient(#0ff, #0ff 50%, transparent 50%, transparent),
+    radial-gradient(#f0f, #f0f 50%, transparent 50%, transparent);
+  background-repeat: no-repeat;
+  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;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.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/reset.scss

@@ -0,0 +1,93 @@
+@use "./vars-color.scss" as *;
+
+/* 盒模型 规则 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 移除默认的 margin 外边距 */
+html,
+body,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* 设置根元素 html 默认样式 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* 设置默认的 body 元素的样式 */
+body {
+  font-family: var(--en-font-body);
+  font-size: var(--en-base-font-size);
+  line-height: var(--en-font-content-line-height);
+  text-rendering: optimizeSpeed; // 文本渲染，是快速还是清晰
+}
+
+/*  链接元素没有 class 类时的展示 */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* 设置图片样式 */
+img,
+picture {
+  display: block;
+  max-width: 100%;
+}
+
+/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */
+em {
+  font-variation-settings: "slnt" -10;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 自动填充的密码的背景色设置动画已取消背景色  */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition-delay: 99999s;
+  transition:
+    color 99999s ease-out,
+    background-color 99999s ease-out;
+  -webkit-transition-delay: 99999s;
+  -webkit-transition:
+    color 99999s ease-out,
+    background-color 99999s ease-out;
+  -webkit-text-fill-color: var(--text-primary);
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/styles/respond.scss

@@ -0,0 +1,54 @@
+@use "./vars-color.scss" as *;
+
+//  响应式断点变量
+$breakpoints: (
+  // 手机竖屏
+  sm: 576px,
+  // 平板，大手机
+  md: 768px,
+  // 小桌面
+  lg: 992px,
+  // 标准桌面
+  xl: 1200px,
+  // 大桌面
+  xxl: 1400px
+);
+
+// 移动优先
+// 基础媒体查询混入
+@mixin respond-to($breakpoint) {
+  $value: map-get($breakpoints, $breakpoint);
+
+  @if $value {
+    @media screen and (min-width: $value) {
+      @content;
+    }
+  } @else {
+    @error "为定义的断点：`#{$breakpoint}`。";
+  }
+}
+
+// 悬停能力检测混入  - 移动优先
+@mixin hover-supported {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+// 混合响应式和悬停的复合混入
+@mixin respond-with-hover($breakpoint) {
+  @include respond-to($breakpoint) {
+    @include hover-supported {
+      @content;
+    }
+  }
+}
+
+// 禁用动画
+@mixin hover-forbidden {
+  @media (hover: none) {
+    @content;
+  }
+}