tianheng-ui 0.1.0 → 0.1.2

package/lib/theme-chalk/styles/imagePreview.scss

@@ -0,0 +1,113 @@
+.th-image-preview {
+  display: flex;
+}
+.th-preview-item-out {
+  margin-right: 10px;
+  display: inline-block;
+}
+.th-preview-item-image-out {
+  width: 90px;
+  height: 100px;
+  object-fit: cover;
+}
+.th-preview-item-image-ins {
+  width: 90px;
+  height: 100px;
+  object-fit: cover;
+}
+.th-image-viewer__wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2014;
+}
+.th-image-viewer__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.8;
+  background: #000;
+}
+.th-image-viewer__item {
+  position: absolute;
+  display: flex;
+  top: 10px;
+  left: 10px;
+}
+.th-preview-item-ins {
+  margin-right: 10px;
+  display: inline-block;
+  transition: $transition;
+}
+.th-preview-item-ins:hover {
+  transform: scale(1.1);
+}
+.th-image-viewer__btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: 0.8;
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+}
+.th-image-viewer__prev {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+  border-color: #fff;
+  left: 40px;
+}
+.th-image-viewer__next {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+  border-color: #fff;
+  right: 40px;
+}
+.th-image-viewer__actions {
+  left: 50%;
+  bottom: 30px;
+  transform: translateX(-50%);
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: #606266;
+  border-color: #fff;
+  border-radius: 22px;
+  z-index: 2016;
+}
+.th-image-viewer__canvas {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.th-image-viewer__close {
+  top: 40px;
+  right: 40px;
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+}
+.zindex {
+  z-index: 2016;
+}

package/lib/theme-chalk/styles/img.scss

@@ -0,0 +1,35 @@
+.th-img {
+  vertical-align: middle;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.th-image__placeholder {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 14px;
+}
+.th-image__error {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #c0c4cc;
+  vertical-align: middle;
+}
+.th-image--inline-block {
+  display: inline-block;
+}
+.th-image--block {
+  display: block;
+}

package/lib/theme-chalk/styles/reset.scss

@@ -0,0 +1,17 @@
+body {
+  font-family: "Microsoft YaHei", "微软雅黑", Arial;
+  font-size: 14px;
+}
+div p {
+  padding: 0;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: bold;
+}
+
+

package/lib/theme-chalk/styles/root.css

@@ -0,0 +1,64 @@
+:root {
+  --th-black: #000;
+  --th-white: #fff;
+  --th-gray-1: #f5f7f9;
+  --th-gray-2: #f2f3f5;
+  --th-gray-3: #ebedf0;
+  --th-gray-4: #dcdee0;
+  --th-gray-5: #c8c9cc;
+  --th-gray-6: #969799;
+  --th-gray-7: #646566;
+  --th-gray-8: #323233;
+  --th-red: #ee0a24;
+  --th-blue: #1989fa;
+  --th-orange: #ff976a;
+  --th-orange-dark: #ed6a0c;
+  --th-orange-light: #fffbe8;
+  --th-green: #67c23a;
+  --th-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+  --th-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+  --th-primary-color: var(--th-blue);
+  --th-success-color: var(--th-green);
+  --th-danger-color: var(--th-red);
+  --th-warning-color: var(--th-orange);
+  --th-text-color: var(--th-gray-8);
+  --th-text-color-2: var(--th-gray-6);
+  --th-text-color-3: var(--th-gray-5);
+  --th-text-link-color: #576b95;
+  --th-active-color: var(--th-gray-2);
+  --th-active-opacity: 0.6;
+  --th-disabled-opacity: 0.5;
+  --th-background-color: var(--th-gray-1);
+  --th-background-color-light: var(--th-white);
+  --th-padding-base: 4px;
+  --th-padding-xs: 8px;
+  --th-padding-sm: 12px;
+  --th-padding-md: 16px;
+  --th-padding-lg: 24px;
+  --th-padding-xl: 32px;
+  --th-font-size-xs: 10px;
+  --th-font-size-sm: 12px;
+  --th-font-size-md: 14px;
+  --th-font-size-lg: 16px;
+  --th-font-weight-bold: 500;
+  --th-line-height-xs: 14px;
+  --th-line-height-sm: 18px;
+  --th-line-height-md: 20px;
+  --th-line-height-lg: 22px;
+  --th-base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
+    Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
+    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  --th-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
+    Arial, sans-serif;
+  --th-animation-duration-base: 0.3s;
+  --th-animation-duration-fast: 0.2s;
+  --th-animation-timing-function-enter: ease-out;
+  --th-animation-timing-function-leave: ease-in;
+  --th-border-color: var(--th-gray-3);
+  --th-border-width-base: 1px;
+  --th-border-radius-sm: 2px;
+  --th-border-radius-md: 4px;
+  --th-border-radius-lg: 8px;
+  --th-border-radius-max: 999px;
+  --th-box-shadow: 0 2px 12px 0 rgb(0, 0, 0, 0.1);
+}

package/lib/theme-chalk/styles/row.scss

@@ -0,0 +1,23 @@
+.th-row {
+  position: relative;
+  box-sizing: border-box;
+}
+.th-row::after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.th-row::before {
+  content: " ";
+  display: table;
+}
+
+.th-row-flex {
+  display: flex;
+}
+.th-row-flex::after {
+  display: none;
+}
+.th-row-flex::before {
+  display: none;
+}