oops-ui 0.0.12 → 1.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;
+}

package/styles/loading-keyframes.scss

@@ -0,0 +1,242 @@
+@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%;
+  }
+}

package/styles/reset.css

@@ -0,0 +1 @@
+*,*::before,*::after{box-sizing:border-box;position:relative}html,body,figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}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;scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}a{text-decoration:none}img,picture{display:block;max-width:100%}em{font-variation-settings:"slnt"-10}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(--en-text-primary)}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}}

package/styles/reset.scss

@@ -0,0 +1,94 @@
+@use './vars-color.scss' as *;
+
+/* 盒模型 规则 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* 移除默认的 margin 外边距 */
+html,
+body,
+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; // 文本渲染，是快速还是清晰
+  scroll-behavior: smooth;
+}
+
+/*  链接元素没有 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(--en-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;
+  }
+}

package/styles/root-normal-dark.scss

@@ -0,0 +1,85 @@
+@use './vars-color.scss' as color;
+
+@mixin dark {
+  // 主要文本色（正文、标题）
+  --en-text-primary: var(--en-color-beige);
+  --en-text-primary-rgb: var(--en-color-beige-rgb);
+  // 次要文本色（辅助说明）
+  --en-text-secondary: var(--en-color-darkness-20);
+  --en-text-secondary-rgb: var(--en-color-darkness-20-rgb);
+  // 备注、浇注的文本色
+  --en-text-tertiary: var(--en-color-darkness-40);
+  --en-text-tertiary-rgb: var(--en-color-darkness-40-rgb);
+  --en-text-active: var(--en-color-darkness-50);
+  --en-text-active-rgb: var(--en-color-darkness-50-rgb);
+  --en-text-inactive: rgba(var(--en-color-darkness-20-rgb), 0.76);
+  --en-text-inactive-rgb: var(--en-color-darkness-20-rgb);
+  --en-text-link: var(--en-color-blue-30);
+  --en-text-link-rgb: var(--en-color-blue-30-rgb);
+  --en-text-invert: var(--en-color-darkness-90); // 文本反转色
+  --en-text-invert-rgb: var(--en-color-darkness-90-rgb); // 文本反转色
+  --en-text-muted: var(--en-color-darkness-60); // 温和文本色
+  --en-text-muted-rgb: var(--en-color-darkness-60-rgb); // 温和文本色
+  // 背景色
+  --en-background-primary: var(--en-color-darkness-90);
+  --en-background-primary-rgb: var(--en-color-darkness-90-rgb);
+  --en-background-secondary: var(--en-color-darkness-75);
+  --en-background-secondary-rgb: var(--en-color-darkness-75-rgb);
+  --en-background-tertiary: var(--en-color-darkness-60);
+  --en-background-tertiary-rgb: var(--en-color-darkness-60-rgb);
+  --en-background-weird: var(--en-color-darkness-70);
+  --en-background-weird-rgb: var(--en-color-darkness-70-rgb);
+  // 边框
+  --en-border-primary: var(--en-color-darkness-50);
+  --en-border-primary-rgb: var(--en-color-darkness-50-rgb);
+  --en-border-secondary: var(--en-color-darkness-60);
+  --en-border-secondary-rgb: var(--en-color-darkness-60-rgb);
+  // 成功盒子的提示框
+  --en-border-success: var(--en-color-green-20);
+  --en-border-success-rgb: var(--en-color-green-20-rgb);
+  // 按钮
+  --en-button-primary: var(--en-color-darkness-10);
+  --en-button-primary-rgb: var(--en-color-darkness-10-rgb);
+  --en-button-primary-hover: var(--en-color-darkness-15);
+  --en-button-primary-hover-rgb: var(--en-color-darkness-15-rgb);
+  --en-button-primary-active: var(--en-color-darkness-30);
+  --en-button-primary-active-rgb: var(--en-color-darkness-30-rgb);
+  --en-button-primary-inactive: var(--en-color-white);
+  --en-button-primary-inactive-rgb: var(--en-color-white-rgb);
+  --en-button-secondary: var(--en-color-darkness-70);
+  --en-button-secondary-rgb: var(--en-color-darkness-70-rgb);
+  --en-button-secondary-hover: var(--en-color-darkness-50);
+  --en-button-secondary-hover-rgb: var(--en-color-darkness-50-rgb);
+  --en-button-secondary-active: var(--en-color-darkness-40);
+  --en-button-secondary-active-rgb: var(--en-color-darkness-40-rgb);
+  --en-button-secondary-inactive: var(--en-color-darkness-70);
+  --en-button-secondary-inactive-rgb: var(--en-color-darkness-70-rgb);
+  --en-button-secondary-border-focus: var(--en-color-blue-60);
+  --en-button-secondary-border-focus-rgb: var(--en-color-blue-60-rgb);
+  // 红框按钮
+  --en-button-secondary-border-red: var(--en-color-red-30);
+  --en-button-secondary-border-red-rgb: var(--en-color-red-30-rgb);
+  --en-button-secondary-border-red-focus: var(--en-color-red-10);
+  --en-button-secondary-border-red-focus-rgb: var(--en-color-red-10-rgb);
+  --en-box-shadow-light: 0 1px 2px rgba(var(--en-color-darkness-10), 0.2);
+  --en-box-shadow-dark: 0 1px 6px rgba(var(--en-color-darkness-10), 0.2);
+  // ios 风格的按钮组
+  --en-close-button: var(--en-color-close-button);
+  // 输入框
+  --en-input-primary-text: var(--en-text-primary);
+  --en-input-primary-text-rgb: var(--en-text-primary-rgb);
+  --en-input-primary-background: var(--en-color-darkness-80);
+  --en-input-primary-background-rgb: var(--en-color-darkness-80-rgb);
+  --en-input-primary-placeholder-text: var(--en-color-darkness-45);
+  --en-input-primary-focus-visible-outline: var(--en-color-green-60) outset 1.5px;
+  --en-input-revers-text: var(--en-color-green-30);
+  --en-input-revers-text-rgb: var(--en-color-green-30-rgb);
+  --en-input-revers-background: var(--en-color-darkness-80);
+  --en-input-revers-background-rgb: var(--en-color-darkness-80-rgb);
+  --en-input-revers-placeholder-text: var(--en-color-darkness-45);
+  --en-input-revers-focus-visible-outline: var(--en-color-green-80) solid 2px;
+
+  color-scheme: dark;
+  color: var(--en-text-primary, #f0f2e5);
+  background-color: var(--en-background-primary, #333333);
+}