tianheng-ui 0.0.56 → 0.0.58

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

@@ -0,0 +1,598 @@
+// .th-upload {
+//   display: inline-block;
+//   text-align: center;
+//   cursor: pointer;
+//   outline: none;
+//   .th-upload-list__input {
+//     display: none;
+//   }
+
+//   .th-upload-list__tip {
+//     font-size: 12px;
+//     color: $color-text-regular;
+//     margin-top: 7px;
+//   }
+
+//   iframe {
+//     position: absolute;
+//     z-index: -1;
+//     top: 0;
+//     left: 0;
+//     opacity: 0;
+//     filter: alpha(opacity=0);
+//   }
+
+//   /* 照片墙模式 */
+//   .th-upload--picture-card {
+//     background-color: #fbfdff;
+//     border: 1px dashed #c0ccda;
+//     border-radius: 6px;
+//     box-sizing: border-box;
+//     width: 148px;
+//     height: 148px;
+//     cursor: pointer;
+//     line-height: 146px;
+//     vertical-align: top;
+
+//     i {
+//       font-size: 28px;
+//       color: #8c939d;
+//     }
+
+//     &:hover {
+//       border-color: $color-parimary;
+//       color: $color-parimary;
+//     }
+//   }
+//   &:focus {
+//     border-color: $color-parimary;
+//     color: $color-parimary;
+
+//     .th-upload-dragger {
+//       border-color: $color-parimary;
+//     }
+//   }
+// }
+
+// .th-upload-dragger {
+//   background-color: #fff;
+//   border: 1px dashed #d9d9d9;
+//   border-radius: 6px;
+//   box-sizing: border-box;
+//   width: 360px;
+//   height: 180px;
+//   text-align: center;
+//   cursor: pointer;
+//   position: relative;
+//   overflow: hidden;
+
+//   .th-icon-upload {
+//     font-size: 67px;
+//     color: $color-text-placeholder;
+//     margin: 40px 0 16px;
+//     line-height: 50px;
+//   }
+
+//   + .th-upload__tip {
+//     text-align: center;
+//   }
+
+//   ~ .th-upload__files {
+//     border-top: $border-color-base;
+//     margin-top: 7px;
+//     padding-top: 5px;
+//   }
+
+//   .th-upload__text {
+//     color: $color-text-regular;
+//     font-size: 14px;
+//     text-align: center;
+
+//     em {
+//       color: $color-parimary;
+//       font-style: normal;
+//     }
+//   }
+
+//   &:hover {
+//     border-color: $color-parimary;
+//   }
+
+//   .is-dragover {
+//     background-color: rgba(32, 159, 255, .06);
+//     border: 2px dashed $color-parimary;
+//   }
+// }
+
+// .th-upload-list {
+//   margin: 0;
+//   padding: 0;
+//   list-style: none;
+
+//   .th-upload-list__item {
+//     transition: all .5s cubic-bezier(.55,0,.1,1);
+//     font-size: 14px;
+//     color: $color-text-regular;
+//     line-height: 1.8;
+//     margin-top: 5px;
+//     position: relative;
+//     box-sizing: border-box;
+//     border-radius: 4px;
+//     width: 100%;
+
+//     .th-progress {
+//       position: absolute;
+//       top: 20px;
+//       width: 100%;
+//     }
+
+//     .th-progress__text {
+//       position: absolute;
+//       right: 0;
+//       top: -13px;
+//     }
+
+//     .th-progress-bar {
+//       margin-right: 0;
+//       padding-right: 0;
+//     }
+
+//     &:first-child {
+//       margin-top: 10px;
+//     }
+
+//     & .th-icon-upload-success {
+//       color: $color-success;
+//     }
+
+//     .th-icon-close {
+//       display: none;
+//       position: absolute;
+//       top: 5px;
+//       right: 5px;
+//       cursor: pointer;
+//       opacity: .75;
+//       color: $color-text-regular;
+//       //transform: scale(.7);
+
+//       &:hover {
+//         opacity: 1;
+//       }
+//     }
+
+//     & .th-icon-close-tip {
+//       display: none;
+//       position: absolute;
+//       top: 5px;
+//       right: 5px;
+//       font-size: 12px;
+//       cursor: pointer;
+//       opacity: 1;
+//       color: $color-parimary;
+//     }
+
+//     &:hover {
+//       background-color: $background-color-base;
+
+//       .th-icon-close {
+//         display: inline-block;
+//       }
+
+//       .th-progress__text {
+//         display: none;
+//       }
+//     }
+
+//     .is-success {
+//       .th-upload-list__item-status-label {
+//         display: block;
+//       }
+
+//       .th-upload-list__item-name:hover, .th-upload-list__item-name:focus {
+//         color: $color-parimary;
+//         cursor: pointer;
+//       }
+
+//       &:focus:not(:hover) {  /* 键盘focus */
+//         .th-icon-close-tip {
+//           display: inline-block;
+//         }
+//       }
+
+//       &:not(.focusing):focus, &:active { /* click时 */
+//         outline-width: 0;
+//         .th-icon-close-tip {
+//           display: none;
+//         }
+//       }
+
+//       &:hover, &:focus {
+//         .th-upload-list__item-status-label {
+//           display: none;
+//         }
+//       }
+//     }
+//   }
+
+//   .is-disabled {
+//     .th-upload-list__item:hover .th-upload-list__item-status-label {
+//       display: block;
+//     }
+//   }
+
+//   .th-upload-list__item-name {
+//     color: $color-text-regular;
+//     display: block;
+//     margin-right: 40px;
+//     overflow: hidden;
+//     padding-left: 4px;
+//     text-overflow: ellipsis;
+//     transition: color .3s;
+//     white-space: nowrap;
+
+//     [class^="th-icon"] {
+//       height: 100%;
+//       margin-right: 7px;
+//       color: $color-text-secondary;
+//       line-height: inherit;
+//     }
+//   }
+
+//   .th-upload-list__item-status-label {
+//     position: absolute;
+//     right: 5px;
+//     top: 0;
+//     line-height: inherit;
+//     display: none;
+//   }
+
+//   .th-upload-list__item-delete {
+//     position: absolute;
+//     right: 10px;
+//     top: 0;
+//     font-size: 12px;
+//     color: $color-text-regular;
+//     display: none;
+
+//     &:hover {
+//       color: $color-parimary;
+//     }
+//   }
+
+//   .th-upload-list--picture-card {
+//     margin: 0;
+//     display: inline;
+//     vertical-align: top;
+
+//     .th-upload-list__item {
+//       overflow: hidden;
+//       background-color: #fff;
+//       border: 1px solid #c0ccda;
+//       border-radius: 6px;
+//       box-sizing: border-box;
+//       width: 148px;
+//       height: 148px;
+//       margin: 0 8px 8px 0;
+//       display: inline-block;
+
+//       .th-icon-check,
+//       .th-icon-circle-check {
+//         color: $background-color-white;
+//       }
+
+//       .th-icon-close {
+//         display: none;
+//       }
+//       &:hover {
+//         .th-upload-list__item-status-label {
+//           display: none;
+//         }
+
+//         .th-progress__text {
+//           display: block;
+//         }
+//       }
+//     }
+
+//     .th-upload-list__item-name {
+//       display: none;
+//     }
+
+//     .th-upload-list__item-thumbnail {
+//       width: 100%;
+//       height: 100%;
+//     }
+
+//     .th-upload-list__item-status-label {
+//       position: absolute;
+//       right: -15px;
+//       top: -6px;
+//       width: 40px;
+//       height: 24px;
+//       background: #13ce66;
+//       text-align: center;
+//       transform: rotate(45deg);
+//       box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
+
+//       i {
+//         font-size: 12px;
+//         margin-top: 11px;
+//         transform: rotate(-45deg);
+//       }
+//     }
+
+//     .th-upload-list__item-actions {
+//       position: absolute;
+//       width: 100%;
+//       height: 100%;
+//       left: 0;
+//       top: 0;
+//       cursor: default;
+//       text-align: center;
+//       color: #fff;
+//       opacity: 0;
+//       font-size: 20px;
+//       background-color: rgba(0, 0, 0, .5);
+//       transition: opacity .3s;
+//       &::after {
+//         display: inline-block;
+//         content: "";
+//         height: 100%;
+//         vertical-align: middle
+//       }
+
+//       span {
+//         display: none;
+//         cursor: pointer;
+//       }
+
+//       span + span {
+//         margin-left: 15px;
+//       }
+
+//       .th-upload-list__item-delete {
+//         position: static;
+//         font-size: inherit;
+//         color: inherit;
+//       }
+
+//       &:hover {
+//         opacity: 1;
+//         span {
+//           display: inline-block;
+//         }
+//       }
+//     }
+
+//     .th-progress {
+//       top: 50%;
+//       left: 50%;
+//       transform: translate(-50%, -50%);
+//       bottom: auto;
+//       width: 126px;
+
+//       .th-progress__text {
+//         top: 50%;
+//       }
+//     }
+//   }
+
+//   .th-upload--picture {
+//     .th-upload-list__item {
+//       overflow: hidden;
+//       z-index: 0;
+//       background-color: #fff;
+//       border: 1px solid #c0ccda;
+//       border-radius: 6px;
+//       box-sizing: border-box;
+//       margin-top: 10px;
+//       padding: 10px 10px 10px 90px;
+//       height: 92px;
+
+//       .th-icon-check,
+//       .th-icon-circle-check {
+//         color: $background-color-white;
+//       }
+
+//       &:hover {
+//         .th-upload-list__item-status-label {
+//           background: transparent;
+//           box-shadow: none;
+//           top: -2px;
+//           right: -12px;
+//         }
+
+//         .th-progress__text {
+//           display: block;
+//         }
+//       }
+
+//       &.is-success {
+//         .th-upload-list__item-name {
+//           line-height: 70px;
+//           margin-top: 0;
+//           i {
+//             display: none;
+//           }
+//         }
+//       }
+//     }
+
+//     .th-upload-list__item-thumbnail {
+//       vertical-align: middle;
+//       display: inline-block;
+//       width: 70px;
+//       height: 70px;
+//       float: left;
+//       position: relative;
+//       z-index: 1;
+//       margin-left: -80px;
+//       background-color: $background-color-white
+//     }
+
+//     .th-upload-list__item-name {
+//       display: block;
+//       margin-top: 20px;
+
+//       i {
+//         font-size: 70px;
+//         line-height: 1;
+//         position: absolute;
+//         left: 9px;
+//         top: 10px;
+//       }
+//     }
+
+//     .th-upload-list__item-status-label {
+//       position: absolute;
+//       right: -17px;
+//       top: -7px;
+//       width: 46px;
+//       height: 26px;
+//       background: #13ce66;
+//       text-align: center;
+//       transform: rotate(45deg);
+//       box-shadow: 0 1px 1px #ccc;
+
+//       i {
+//         font-size: 12px;
+//         margin-top: 12px;
+//         transform: rotate(-45deg);
+//       }
+//     }
+
+//     .th-progress {
+//       position: relative;
+//       top: -7px;
+//     }
+//   }
+// }
+
+// .th-upload-cover {
+//   position: absolute;
+//   left: 0;
+//   top: 0;
+//   width: 100%;
+//   height: 100%;
+//   overflow: hidden;
+//   z-index: 10;
+//   cursor: default;
+//   // @include utils-vertical-center;
+
+//   img {
+//     display: block;
+//     width: 100%;
+//     height: 100%;
+//   }
+
+//   .th-upload-list__label {
+//     position: absolute;
+//     right: -15px;
+//     top: -6px;
+//     width: 40px;
+//     height: 24px;
+//     background: #13ce66;
+//     text-align: center;
+//     transform: rotate(45deg);
+//     box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
+
+//     i {
+//       font-size: 12px;
+//       margin-top: 11px;
+//       transform: rotate(-45deg);
+//       color: #fff;
+//     }
+//   }
+
+//   .th-upload-list__progress {
+//     display: inline-block;
+//     vertical-align: middle;
+//     position: static;
+//     width: 243px;
+
+//     + .th-upload__inner {
+//       opacity: 0;
+//     }
+//   }
+
+//   .th-upload-list__content {
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//   }
+
+//   .th-upload-list__interact {
+//     position: absolute;
+//     bottom: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(#000, .72);
+//     text-align: center;
+
+//     .btn {
+//       display: inline-block;
+//       color: $background-color-white;
+//       font-size: 14px;
+//       cursor: pointer;
+//       vertical-align: middle;
+//       transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !important;
+//       margin-top: 60px;
+//       i{
+//         margin-top: 0;
+//       }
+
+//       span {
+//         opacity: 0;
+//         transition: opacity .15s linear;
+//       }
+
+//       &:not(:first-child) {
+//         margin-left: 35px;
+//       }
+
+//       &:hover {
+//         transform: translateY(-13px);
+
+//         span {
+//           opacity: 1;
+//         }
+//       }
+
+//       i {
+//         color: $background-color-white;
+//         display: block;
+//         font-size: 24px;
+//         line-height: inherit;
+//         margin: 0 auto 5px;
+//       }
+//     }
+//   }
+
+//   .th-upload-list__title {
+//     position: absolute;
+//     bottom: 0;
+//     left: 0;
+//     background-color: $background-color-white;
+//     height: 36px;
+//     width: 100%;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     white-space: nowrap;
+//     font-weight: normal;
+//     text-align: left;
+//     padding: 0 10px;
+//     margin: 0;
+//     line-height: 36px;
+//     font-size: 14px;
+//     color: $color-text-primary;
+//   }
+
+//   + .th-upload__inner {
+//     opacity: 0;
+//     position: relative;
+//     z-index: 1;
+//   }
+// }

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

@@ -0,0 +1,80 @@
+// 主体色
+$color-parimary: #1890ff;
+$color-parimary-active: #257fe2;
+$color-parimary-hover: #66b1ff;
+$color-parimary-disabled: #a0cfff;
+$color-parimary-light: #a3d3ff;
+$color-parimary-lighter: #e8f4ff;
+
+// 成功色
+$color-success: #13ce66;
+$color-success-active: #5daf34;
+$color-success-hover: #85ce61;
+$color-success-disabled: #b3e19d;
+$color-success-light: #a1ebc2;
+$color-success-lighter: #e7faf0;
+
+// 警告色
+$color-warning: #ffba00;
+$color-warning-active: #cf9236;
+$color-warning-hover: #ebb563;
+$color-warning-disabled: #f3d19e;
+$color-warning-light: #ffe399;
+$color-warning-lighter: #fff8e6;
+
+// 危险色
+$color-danger: #ff4949;
+$color-danger-active: #dd6161;
+$color-danger-hover: #f78989;
+$color-danger-disabled: #fab6b6;
+$color-danger-light: #ffb6b6;
+$color-danger-lighter: #ffeded;
+
+// 信息色
+$color-info: #909399;
+$color-info-active: #82848a;
+$color-info-hover: #a6a9ad;
+$color-info-disabled: #c8c9cc;
+$color-info-light: #d3d4d6;
+$color-info-lighter: #f4f4f5;
+
+// 暗黑色
+$color-darkly: #304156;
+
+// 文字颜色
+$color-text-primary: #222d46;
+$color-text-regular: #535d70;
+$color-text-secondary: #858a96;
+$color-text-placeholder: #caced7;
+
+// 文字大小
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 20px;
+$font-size-xxl: 22px;
+
+// 边框颜色
+$border-color-base: #dcdfe6;
+$border-color-light: #e4e7ed;
+$border-color-lighter: #ebeef5;
+$border-color-extra-light: #f2f6fc;
+
+// 边框弧度
+$border-radius-xs: 4px;
+$border-radius-sm: 8px;
+$border-radius-md: 12px;
+$border-radius-lg: 16px;
+$border-radius-xl: 20px;
+
+// 背景颜色
+$background-color-base: #f5f7f9;
+$background-color-white: #ffffff;
+$background-color-black: #000000;
+
+// 阴影效果
+$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+// 过场时长
+$transition: 0.3s;