@kdcloudjs/kdesign 1.5.7 → 1.5.10

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+## [1.5.9](https://github.com/kdcloudone/kdesign/compare/v1.5.8...v1.5.9) (2022-08-18)
+
+
+### Bug Fixes
+
+* [dropdown]选项传入自定义类名点击事件失效的问题 ([16b1744](https://github.com/kdcloudone/kdesign/commit/16b1744a79eed85476824da74e86d252af487b07))
+* [progress] 修复视觉走查问题点 ([fff4898](https://github.com/kdcloudone/kdesign/commit/fff4898f3255dfba9e0b86da0a098ce1ea263708))
+* [tabs] 修复页签组件视觉走查问题 ([82fffbf](https://github.com/kdcloudone/kdesign/commit/82fffbfbbd703cde69603832309479db0dec3d8c))
+* [token] 修复组件token变量 ([3d00fb4](https://github.com/kdcloudone/kdesign/commit/3d00fb485fc5f87a5a2524b8b53e9ef1004d721f))
+* [tree] 修复树控件视觉走查问题 ([6d4792b](https://github.com/kdcloudone/kdesign/commit/6d4792bc9e5e745b07eba79e7d7b52aae3144135))
+* [tree] 修复异步加载时loading按钮显示不全问题 ([92bc2d7](https://github.com/kdcloudone/kdesign/commit/92bc2d791c81712859b4fd92a62845c1a0ca2e30))
+* [usePopper]修复浮层贴右侧边缘时导致的问题 ([07c72ca](https://github.com/kdcloudone/kdesign/commit/07c72ca86844d6fdc6c27e114997950d30fc33aa))
+
+
+### Features
+
+* [modal] 修复视觉走查问题点 ([3d88d74](https://github.com/kdcloudone/kdesign/commit/3d88d746d73149620ae0d103f84153fa25ea368c))
+* [upload] 修复视觉走查问题点 ([8838d3a](https://github.com/kdcloudone/kdesign/commit/8838d3aa897f6a0a0fb5313a4cbc1391ae8a9cfd))
+
+
+
+## [1.5.8](https://github.com/kdcloudone/kdesign/compare/v1.5.7...v1.5.8) (2022-08-12)
+
+
+### Bug Fixes
+
+* [usePopper] 修复贴左侧边缘时导致的报错问题 ([ca4686d](https://github.com/kdcloudone/kdesign/commit/ca4686d670b448ba9c22774e016e38d33e6e0bbd))
+
+
+
+## [1.5.7](https://github.com/kdcloudone/kdesign/compare/v1.5.6...v1.5.7) (2022-08-12)
+
+
+### Reverts
+
+* Revert "fix: [Tooltip] 修复当触发元素在右上角，trigger=top时，浮层超出显示边界的问题" ([16dde4e](https://github.com/kdcloudone/kdesign/commit/16dde4e71654bd8a6b4c44d6472ac28aa44ee007))
+
+
+
+## [1.5.6](https://github.com/kdcloudone/kdesign/compare/v1.5.5...v1.5.6) (2022-08-11)
+
+
+### Bug Fixes
+
+* [Tooltip] 修复当触发元素在右上角，trigger=top时，浮层超出显示边界的问题 ([f487389](https://github.com/kdcloudone/kdesign/commit/f487389d95ca759658b5bf7ff988de30aa485f9c))
+
+
+
 ## [1.5.5](https://github.com/kdcloudone/kdesign/compare/v1.5.4...v1.5.5) (2022-08-11)
 
 

package/dist/default-theme.js

@@ -26,7 +26,7 @@ module.exports = {
   "warning-border-color": "#ffcb78",
   "error-color": "#fb2323",
   "error-bg-color": "#fff2f4",
-  "error-border-color": "#ff8088",
+  "error-border-color": "#fc808B",
   "ongoing-color": "#276ff5",
   "ongoing-bg-color": "#f2f9ff",
   "ongoing-border-color": "#85b8ff",

package/dist/kdesign-complete.less

@@ -6460,14 +6460,8 @@ textarea {
     // });
   }
 
-  &-ok-btn,
-  &-cancel-btn {
-    min-width: 88px;
-    min-height: 32px;
-    font-size: @modal-footer-font-size;
-  }
   &-margin-btn {
-    margin-right: 20px;
+    margin-right: @modal-footer-button-spacing;
   }
 }
 
@@ -6533,12 +6527,15 @@ textarea {
 @icon-circle-radiu: var(~'@{modal-prefix}-icon-circle-sizing', 6px);
 @modal-border-width: var(~'@{modal-prefix}-sizing-border', 1px);
 @modal-close-icon-size: var(~'@{modal-prefix}-close-icon-font-size', 16px);
-@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
-@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
 @modal-header-sizing-height: var(~'@{modal-prefix}-header-sizing-height', 50px);
-@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);
 @modal-footer-sizing-height: var(~'@{modal-prefix}-footer-sizing-height', 50px);
+
+// spacing
+@modal-footer-button-spacing: var(~'@{modal-prefix}-footer-button-spacing', 12px);
 @modal-title-icon-sizing-margin-right: var(~'@{modal-prefix}-title-icon-sizing-margin-right', 8px);
+@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
+@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
+@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);
 
 
 
@@ -7463,11 +7460,21 @@ textarea {
 
   &-type-line {
     width: 100%;
+    color: @progress-line-font-color;
+
+    .@{progress-prefix-cls}-special-text {
+      margin-top: @progress-line-text-margin-top;
+      line-height: 24px;
+    }
   }
 
   &-type-circle {
+    color: @progress-circle-font-color;
+
     .@{progress-prefix-cls}-special-text {
+      margin-top: @progress-circle-text-margin-top;
       padding: 0;
+      line-height: 24px;
     }
   }
 
@@ -7480,9 +7487,9 @@ textarea {
     padding-right: 0;
     font-size: 0;
 
-    .@{progress-prefix-cls}-show-info & {
-      margin-right: calc(-1 * @progress-line-text-font-size * 3 - 8px);
-      padding-right: calc(@progress-line-text-font-size * 3 + 8px);
+    .@{progress-prefix-cls}-show-info:not(.@{progress-prefix-cls}-position-bottom) & {
+      margin-right: calc(-1 * @progress-line-text-font-size * 2 - 8px);
+      padding-right: calc(@progress-line-text-font-size * 2 + 8px);
     }
   }
 
@@ -7520,7 +7527,7 @@ textarea {
   &-text {
     display: inline-block;
     box-sizing: border-box;
-    width: calc(@progress-line-text-font-size*3);
+    width: calc(@progress-line-text-font-size*2);
     margin-left: @progress-line-text-margin-left;
     // font-size: @progress-line-text-font-size;
     // line-height: 1;
@@ -7534,7 +7541,11 @@ textarea {
     font-size: @progress-line-special-text-font-size;
     text-align: center;
     overflow: hidden;
-    padding-right: calc(@progress-line-text-font-size*3 + 8px);
+    padding-right: calc(@progress-line-text-font-size*2 + 8px);
+
+    .@{progress-prefix-cls}-position-bottom & {
+      padding-right: 0;
+    }
   }
 
   &-status-success {
@@ -7653,6 +7664,8 @@ textarea {
 
 // color
 @progress-remaining-color: var(~'@{progress-prefix}-color-remaining', #e5e5e5);//背景色
+@progress-line-font-color: var(~'@{progress-prefix}-line-color-font', #212121);
+@progress-circle-font-color: var(~'@{progress-prefix}-circle-color-font', #666);
 @progress-default-color: var(~'@{progress-prefix}-color-default', #5582f3);//进度条 默认色
 @progress-success-color: var(~'@{progress-prefix}-color-success', @color-success);//进度条 成功
 @progress-failure-color: var(~'@{progress-prefix}-color-failure', @color-error);//进度条 失败
@@ -7676,8 +7689,10 @@ textarea {
 
 
 // spacing
-@progress-circle-unit-margin-top: var(~'@{progress-prefix}-circle-unit-spacing-margin-top', 18px);
+@progress-circle-unit-margin-top: var(~'@{progress-prefix}-circle-unit-spacing-margin-top', 18px); // 百分比符号距离顶部的距离
 @progress-line-text-margin-left: var(~'@{progress-prefix}-line-text-spacing-margin-left', 8px); //进度与文字或者图标的间距
+@progress-line-text-margin-top: var(~'@{progress-prefix}-line-text-spacing-margin-top', 12px);
+@progress-circle-text-margin-top: var(~'@{progress-prefix}-circle-text-spacing-margin-top', 8px);
 
 
 
@@ -11328,7 +11343,7 @@ template {
 @warning-border-color: #ffcb78; // 警示反馈浮层的容器边框色
 @error-color: #fb2323; // 失败色(深)
 @error-bg-color: #fff2f4; // 失败反馈浮层的底色
-@error-border-color: #ff8088; // 失败反馈浮层的容器边框色
+@error-border-color: #fc808B; // 失败反馈浮层的容器边框色
 @ongoing-color: #276ff5; // 进行中(深)
 @ongoing-bg-color: #f2f9ff; // 进行中反馈浮层的底色
 @ongoing-border-color: #85b8ff; // 进行中反馈浮层的容器边框色
@@ -12340,6 +12355,9 @@ template {
 
   &-left-arrows {
     box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
+    height: 100%;
+    display: flex;
+    align-items: center;
     &-line {
       background-color: #fff;
     }
@@ -12349,6 +12367,9 @@ template {
   }
   &-right-arrows {
     box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
+    height: 100%;
+    display: flex;
+    align-items: center;
     &-line {
       background-color: #fff;
       .@{tabs-prefix-cls}-more-btn {
@@ -12372,18 +12393,7 @@ template {
   }
   &-left-operations {
     position: relative;
-    line-height: 40px;
-    margin-right: 8px;
-    &::after {
-      position: absolute;
-      content: '';
-      width: 1px;
-      height: 28px;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: @tabs-border-color;
-    }
+    margin-right: 2px;
     &-item {
       padding: 0 12px;
       cursor: pointer;
@@ -12391,19 +12401,9 @@ template {
   }
   &-right-operations {
     position: relative;
-    line-height: 40px;
-    &::before {
-      position: absolute;
-      content: '';
-      width: 1px;
-      height: 100%;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: @tabs-border-color;
-    }
+    padding-right: 18px;
     &-item {
-      padding: 0 12px;
+      padding-left: 12px;
       cursor: pointer;
     }
   }
@@ -12412,8 +12412,6 @@ template {
     display: inline-block;
     box-sizing: border-box;
     width: 48px;
-    height: 100%;
-    line-height: 46px;
     text-align: center;
     cursor: pointer;
     &:hover {
@@ -12432,6 +12430,20 @@ template {
 .@{tabs-prefix-cls}-navs {
   .tabNavs;
   &-line {
+    &.@{tabs-prefix-cls}-navs-middle {
+      height: @tab-pane-type-line-height-middle;
+    }
+    &.@{tabs-prefix-cls}-navs-small {
+      height: @tab-pane-type-line-height-small !important;
+    }
+    .@{tabPane-prefix-cls}-middle {
+      line-height: @tab-pane-type-line-height-middle;
+      height: @tab-pane-type-line-height-middle;
+    }
+    .@{tabPane-prefix-cls}-small {
+      line-height: @tab-pane-type-line-height-small;
+      height: @tab-pane-type-line-height-small;
+    }
     &.@{tabs-prefix-cls}-navs-bottom {
       border-top: 1px solid @tabs-border-color;
       border-bottom: unset;
@@ -12454,12 +12466,14 @@ template {
       top: -1px;
       height: ~'calc(100% + 2px)';
     }
-    &.@{tabs-prefix-cls}-navs-left, &.@{tabs-prefix-cls}-navs-right {
+    &.@{tabs-prefix-cls}-navs-left,
+    &.@{tabs-prefix-cls}-navs-right {
       min-width: 120px;
       height: 100%;
       font-size: 0;
       border-top: 1px solid transparent;
-      &::before, &::after {
+      &::before,
+      &::after {
         position: absolute;
         content: '';
         display: inline-block;
@@ -12498,12 +12512,12 @@ template {
   &-dynamic {
     background-color: @tabs-card-bg;
     border-bottom: unset;
-    height: 40px;
+    height: @tab-pane-type-dynamic-height;
     .@{tabs-prefix-cls}-tab-wrap {
-      height:  40px;
+      height: @tab-pane-type-dynamic-height;
     }
     .@{tabs-prefix-cls}-more-btn {
-      line-height: 40px;
+      line-height: @tab-pane-type-dynamic-height;
     }
   }
   &-small:not(.@{tabs-prefix-cls}-navs-left):not(.@{tabs-prefix-cls}-navs-right) {
@@ -12519,7 +12533,8 @@ template {
   &-text {
     display: inline-block;
     transition: color @tab-g-motion-duration;
-    &-active, &:hover {
+    &-active,
+    &:hover {
       color: @tabPane-font-color-active;
     }
     &-disabled {
@@ -12535,35 +12550,28 @@ template {
       color: @tabPane-font-color-disabled;
     }
   }
+  &-type-line {
+    padding: 0 @tab-pane-line-paddinng-horizontal;
+  }
   &-type-card {
     margin-right: 0;
-    .@{tabPane-prefix-cls}-text {
-      padding: 0 24px;
-    }
+    padding: 0 @tab-pane-card-paddinng-horizontal;
+    border: 1px solid transparent;
     &.@{tabPane-prefix-cls}-box-active {
       background-color: #fff;
       border: 1px solid @tabs-border-color;
       border-top: 2px solid;
       border-color: @tab-line-color-active @tabs-border-color transparent @tabs-border-color;
-      transition: background-color .2s @tab-transition-fn;
+      transition: background-color 0.2s @tab-transition-fn;
       &:first-of-type {
-        border-left: unset;
-      }
-    }
-    &.@{tabPane-prefix-cls}-left, &.@{tabPane-prefix-cls}-right {
-      width: 100%;
-      padding: 0;
-      text-align: center;
-      border-top: 1px solid @tabs-border-color;
-      &:last-of-type {
-        border-bottom: 1px solid @tabs-border-color;
+        border-left-color: transparent;
       }
     }
     &.@{tabPane-prefix-cls}-left {
-      border-left: 1px solid transparent;
+      border-left: 2px solid transparent;
       &.@{tabPane-prefix-cls}-box-active {
-        border-left: 2px solid @tab-line-color-active;
-        border-right: 1px solid transparent;
+        border-left: 2px solid;
+        border-color: @tabs-border-color transparent transparent @tab-line-color-active;
       }
     }
     &.@{tabPane-prefix-cls}-right {
@@ -12573,20 +12581,43 @@ template {
         border-left: 1px solid transparent;
       }
     }
+    &.@{tabPane-prefix-cls}-left,
+    &.@{tabPane-prefix-cls}-right {
+      width: 100%;
+      border-top: 1px solid @tabs-border-color;
+      &:last-of-type {
+        border-bottom: 1px solid @tabs-border-color;
+      }
+    }
     &.@{tabPane-prefix-cls}-bottom {
+      border-top: 1px solid transparent;
+      border-bottom: 2px solid transparent;
       &.@{tabPane-prefix-cls}-box-active {
         border-bottom: 2px solid;
-        border-color:  transparent @tabs-border-color @tab-line-color-active @tabs-border-color;
+        border-color: transparent @tabs-border-color @tab-line-color-active @tabs-border-color;
+        &:first-of-type {
+          border-left-color: transparent;
+        }
+      }
+    }
+    &.@{tabPane-prefix-cls}-top {
+      border-top: 2px solid transparent;
+      &.@{tabPane-prefix-cls}-box-active {
+        border-top: 2px solid;
+        border-color: @tab-line-color-active @tabs-border-color transparent @tabs-border-color;
+        &:first-of-type {
+          border-left-color: transparent;
+        }
       }
     }
   }
   &-type-dynamic {
-    height: 40px;
-    line-height: 40px;
-    margin: 0 0 0 8px;
+    height: @tab-pane-type-dynamic-height;
+    line-height: @tab-pane-type-dynamic-height;
+    margin: 0 0 0 4px;
     display: inline-flex;
     align-items: center;
-    &:hover {
+    &:not(.@{tabPane-prefix-cls}-disabled):hover {
       .@{tabPane-prefix-cls}-operations {
         span:first-child {
           opacity: 1;
@@ -12595,13 +12626,13 @@ template {
       }
     }
     .@{tabPane-prefix-cls}-operations .@{icon-prefix-cls} {
-      font-size: 14px;
+      font-size: 16px;
     }
   }
   &-type-grid {
     height: 24px;
     line-height: 22px;
-    padding: 0 19px;
+    padding: 0 @tab-pane-grid-paddinng-horizontal;
     border: 1px solid @tabs-border-color;
     margin-right: -1px;
     &:first-of-type {
@@ -12615,7 +12646,7 @@ template {
       z-index: 2;
       background-color: @tab-line-color-active;
       border: 1px solid @tab-line-color-active;
-      transition: background-color .2s @tab-transition-fn;
+      transition: background-color 0.2s @tab-transition-fn;
       .@{tabPane-prefix-cls}-text-active {
         color: #fff;
       }
@@ -12631,24 +12662,13 @@ template {
     position: relative;
     display: inline-block;
     line-height: 1;
-    padding: 0 18px 0 8px;
+    padding: 0 4px;
     span:first-child {
       display: inline-block;
       vertical-align: top;
       font-size: 0;
       opacity: 0;
     }
-    &::after {
-      position: absolute;
-      content: '';
-      width: 1px;
-      height: 14px;
-      background-color: @tabs-border-color;
-      right: 0;
-      top: 50%;
-      opacity: 1;
-      transform: translateY(-50%);
-    }
   }
   &-small {
     height: 36px;
@@ -12672,8 +12692,6 @@ template {
   display: inline-block;
   box-sizing: border-box;
   width: 48px;
-  height: 100%;
-  line-height: 46px;
   text-align: center;
   cursor: pointer;
   &:hover {
@@ -12684,7 +12702,7 @@ template {
   }
   &-dynamic {
     width: 24px;
-    line-height: 40px;
+    line-height: @tab-pane-type-dynamic-height;
   }
   &-disabled {
     color: @tabPane-font-color-disabled;
@@ -12699,16 +12717,12 @@ template {
 }
 
 
+
 .tabs() {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;
-  // box-sizing: border-box;
-  // width: 100%;
-  // height: @tabs-height;
-  // color: @tabs-font-color;
-  // border-bottom: @tabs-border-width solid @tabs-border-color;
 }
 .tabNavs() {
   position: relative;
@@ -12728,7 +12742,6 @@ template {
   color: @tabs-font-color;
   height: @tab-pane-height;
   line-height: @tab-pane-line-height;
-  margin-right: @tab-pane-margin-right;
   cursor: pointer;
 }
 
@@ -12739,7 +12752,7 @@ template {
 @tabs-border-color: var(~'@{tabs-custom-prefix}-color-border', @color-border-strong);
 @tab-line-color-active: var(~'@{tabs-custom-prefix}-line-color-active', @color-theme);
 @tabs-card-bg: var(~'@{tabs-custom-prefix}-card-color-background', @color-background-contain-disabled);
-@tab-disabled-bg: var(~'@{tabs-custom-prefix}-color-background-disabled', @color-background-2);
+@tab-disabled-bg: var(~'@{tabs-custom-prefix}-color-background-disabled', transparent);
 @tabs-font-color: var(~'@{tabs-custom-prefix}-color-text', @color-text-secondary);
 @tabPane-font-color-active: var(~'@{tabs-custom-prefix}-color-text-active', @color-theme);
 @tabPane-font-color-hover: var(~'@{tabs-custom-prefix}-color-text-hover', @color-theme);
@@ -12749,7 +12762,7 @@ template {
 @tabPane-font-size: var(~'@{tabs-custom-prefix}-pane-font-size', @font-size-middle);
 
 // line-height
-@tab-pane-line-height: var(~'@{tabs-custom-prefix}-pane-line-height', 48px);
+@tab-pane-line-height: var(~'@{tabs-custom-prefix}-pane-height', 48px);
 
 // motion
 @tab-transition-fn: var(~'@{tabs-custom-prefix}-motion-timing-function', cubic-bezier(0.42, 0, 1, 1));
@@ -12759,10 +12772,15 @@ template {
 @tabs-height: var(~'@{tabs-custom-prefix}-sizing-height', 48px);
 @tabs-border-width: var(~'@{tabs-custom-prefix}-sizing-border', 1px);
 @tab-pane-height: var(~'@{tabs-custom-prefix}-pane-sizing-height', 48px);
+@tab-pane-type-line-height-small: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-small', 32px);
+@tab-pane-type-line-height-middle: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-middle', 32px);
+@tab-pane-type-dynamic-height: var(~'@{tabs-custom-prefix}-pane-type-dynamic-sizing-height', 32px);
 
 
 // spacing
-@tab-pane-margin-right: var(~'@{tabs-custom-prefix}-pane-spacing-margin-right', 24px);
+@tab-pane-line-paddinng-horizontal: var(~'@{tabs-custom-prefix}-pane-line-paddinng-horizontal', 20px);
+@tab-pane-card-paddinng-horizontal: var(~'@{tabs-custom-prefix}-pane-card-paddinng-horizontal', 18px);
+@tab-pane-grid-paddinng-horizontal: var(~'@{tabs-custom-prefix}-pane-grid-paddinng-horizontal', 20px);
 
 
 
@@ -13551,6 +13569,7 @@ template {
   flex-grow: 1;
   font-size: @tree-font-size;
   color: @tree-color-text;
+  margin-left: @tree-margin-left;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -13570,7 +13589,7 @@ template {
     align-items: center;
 
     .@{kd-prefix}-spin-dot-spin {
-      border: none;
+      border: 2px solid transparent;
       width: @tree-expand-icon-loading-width;
       height: @tree-expand-icon-loading-height;
 
@@ -13587,7 +13606,7 @@ template {
     display: flex;
     align-items: center;
 
-    .node-hover()
+    .node-hover();
   }
 
   &-indent {
@@ -13655,14 +13674,14 @@ template {
     .node-hover();
 
     &-selected {
-      .node-selected()
+      .node-selected();
     }
   }
   &-title {
     white-space: nowrap;
   }
   &-selected {
-    .node-selected()
+    .node-selected();
   }
 
   &-draggabled {
@@ -13756,6 +13775,7 @@ template {
 @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
 @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
+@tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 16px);
 
 // font
 @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);
@@ -13766,6 +13786,7 @@ template {
 
 
 
+
 @typography-prefix-cls: ~'@{kd-prefix}-typography';
 .@{typography-prefix-cls} {
   color: @typography-color-text-primary;
@@ -14085,13 +14106,14 @@ template {
 
   .@{upload-prefix-text-list-cls} {
     .reset-component;
-    margin-top: 16px;
+    margin-top: @upload-text-list-margin-top;
     font-size: @upload-font-size;
     border-top: 1px dashed @upload-border-color-strong;
 
     &-item {
       position: relative;
-      padding: 12px 20px;
+      padding: 0 @upload-text-list-item-padding-horizontal;
+      height: @upload-list-item-height;
       overflow: hidden;
       white-space: nowrap;
       display: flex;
@@ -14116,9 +14138,13 @@ template {
         }
       }
 
+      &-icon > i {
+        font-size: @upload-font-size;
+      }
+
       &-name {
         display: inline-block;
-        margin: 0 5px;
+        margin: 0 @upload-text-list-item-name-padding-right 0 @upload-text-list-item-name-padding-left;
         .ellipsis;
         color: @upload-panel-color;
       }
@@ -14131,7 +14157,9 @@ template {
         position: absolute;
         top: 0;
         right: 0;
-        padding: 12px 20px;
+        padding: 0 @upload-text-list-item-padding-horizontal;
+        height: @upload-list-item-height;
+        line-height: @upload-list-item-height;
         background-color: transparent;
         opacity: 0;
         visibility: hidden;
@@ -14211,6 +14239,7 @@ template {
 
       &.error {
         border-color: @upload-border-error-color;
+        background-color: @upload-background-error-color;
       }
 
       &-loading {
@@ -14235,7 +14264,7 @@ template {
         justify-content: center;
 
         &-text {
-          margin-bottom: 5px;
+          margin-bottom: 4px;
           color: @upload-text-error-color;
         }
 
@@ -14246,6 +14275,11 @@ template {
           }
         }
       }
+
+      &-action > a {
+        color: @upload-panel-button-color;
+        font-size: @upload-picture-action-font-size;
+      }
     }
   }
 }
@@ -14258,6 +14292,7 @@ template {
 @upload-text-color: var(~'@{upload-prefix}-color', @color-text-third);
 
 @upload-text-error-color: var(~'@{upload-prefix}-error-color', @color-error);
+@upload-background-error-color: var(~'@{upload-prefix}-color-background-error', @color-background-error);
 @upload-border-error-color: var(~'@{upload-prefix}-color-border-error', @color-border-error);
 @upload-border-color: var(~'@{upload-prefix}-color-border', @color-border-weak);
 @upload-border-color-strong: var(~'@{upload-prefix}-division-color', @color-border-strong);
@@ -14274,8 +14309,18 @@ template {
 
 // font
 @upload-font-size: var(~'@{upload-prefix}-font-size', @font-size-middle);
+@upload-picture-action-font-size: var(~'@{upload-prefix}-picture-action-font-size', @font-size-small);
 
 // radius
 @upload-border-radius: var(~'@{upload-prefix}-radius-border', @radius-border);
 
+// sizing
+@upload-list-item-height: var(~'@{upload-prefix}-list-item-height', 44px);
+
+//spacing
+@upload-text-list-margin-top: var(~'@{upload-prefix}-text-list-margin-top', 16px);
+@upload-text-list-item-padding-horizontal: var(~'@{upload-prefix}-text-list-item-padding-horizontal', 20px);
+@upload-text-list-item-name-padding-left: var(~'@{upload-prefix}-text-list-item-name-padding-left', 4px);
+@upload-text-list-item-name-padding-right: var(~'@{upload-prefix}-text-list-item-name-padding-right', 8px);
+