diff --git a/examples/sites/demos/pc/app/pop-upload/size.spec.ts b/examples/sites/demos/pc/app/pop-upload/size.spec.ts index aec181907c..12bf2439a2 100644 --- a/examples/sites/demos/pc/app/pop-upload/size.spec.ts +++ b/examples/sites/demos/pc/app/pop-upload/size.spec.ts @@ -9,5 +9,5 @@ test('PopUpload 设置组件大小', async ({ page }) => { await expect(modalAppearBtn).toHaveClass(/tiny-button--medium/) await expect(modalAppearBtn).toHaveCSS('height', '40px') - await expect(modalAppearBtn).toHaveCSS('min-width', '88px') + await expect(modalAppearBtn).toHaveCSS('min-width', '112px') }) diff --git a/packages/theme/src/pop-upload/index.less b/packages/theme/src/pop-upload/index.less index 1db8a4d985..ba03c0189d 100644 --- a/packages/theme/src/pop-upload/index.less +++ b/packages/theme/src/pop-upload/index.less @@ -19,14 +19,14 @@ @alert-prefix-cls: ~'@{css-prefix}alert'; .@{popupload__modal-prefix-cls} { - .component-css-vars-pop-upload(); + .inject-PopUpload-vars(); } .@{popupload-prefix-cls} { - .component-css-vars-pop-upload(); + .inject-PopUpload-vars(); display: flex; align-items: center; - font-size: var(--ti-popupload-font-size); + font-size: var(--tv-PopUpload-font-size); &__dialog { width: 100%; @@ -36,12 +36,12 @@ &__dialog-header { .@{alert-prefix-cls} { - margin-bottom: var(--ti-popupload-dialog-header-alert-margin-bottom); + margin-bottom: 10px; } } &__dialog-body { - padding-bottom: var(--ti-popupload-dialog-table-body-padding-bottom); + padding-bottom: 10px; .@{upload-list-prefix-cls} { display: none; @@ -53,7 +53,7 @@ display: flex; align-items: center; justify-content: center; - padding-bottom: var(--ti-popupload-dialog-footer-padding-bottom); + padding-bottom: 24px; } &__dialog-tips { @@ -67,17 +67,16 @@ } &__dialog-table { - font-size: var(--ti-popupload-dialog-table-font-size); - height: var(--ti-popupload-dialog-table-height); + font-size: var(--tv-PopUpload-dialog-table-font-size); + height: var(--tv-PopUpload-dialog-table-height); width: 100%; - margin-top: var(--ti-popupload-dialog-margin-top); + margin-top: 10px; .header-col { position: relative; - padding: var(--ti-popupload-table-header-col-padding-vertical) - var(--ti-popupload-table-header-col-padding-horizontal); + padding: 0 12px; - &:not(:last-child)::after { + &:not(:last-child):after { position: absolute; top: 50%; transform: translateY(-50%); @@ -85,15 +84,15 @@ display: inline-block; content: ''; width: 1px; - height: var(--ti-popupload-dialog-table-line-height); - background-color: var(--ti-popupload-dialog-table-line-bg-color); + height: var(--tv-PopUpload-dialog-table-line-height); + background-color: transparent; } } .body-col { - padding: var(--ti-popupload-table-body-col-padding-vertical) var(--ti-popupload-table-body-col-padding-horizontal); - margin: var(--ti-popupload-table-body-col-margin-vertical) var(--ti-popupload-table-body-col-margin-horizontal); - line-height: var(--ti-popupload-table-body-col-line-height); + padding: 8px 12px; + margin: 0; + line-height: var(--tv-PopUpload-table-body-col-line-height); } .col1 { @@ -114,22 +113,20 @@ } &__dialog-table-header { - height: var(--ti-popupload-dialog-table-header-height); + height: var(--tv-PopUpload-dialog-table-header-height); width: 100%; - color: var(--ti-popupload-dialog-table-header-text-color); - font-weight: var(--ti-popupload-dialog-table-header-font-weight); + color: var(--tv-PopUpload-dialog-table-header-text-color); + font-weight: var(--tv-PopUpload-dialog-table-header-font-weight); display: flex; align-items: center; justify-content: space-between; - background: var(--ti-popupload-dialog-table-header-bg-color); - border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color); + background: var(--tv-PopUpload-dialog-table-header-bg-color); } &__dialog-table-body { width: 100%; - height: calc(100% - var(--ti-popupload-dialog-table-header-height)); + height: calc(100% - var(--tv-PopUpload-dialog-table-header-height)); overflow-y: auto; - border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color); } &__dialog-table-list { @@ -139,7 +136,7 @@ margin-top: 12px; & > .footer-error-tip { - color: var(--ti-popupload-status-fail-icon-color); + color: var(--tv-PopUpload-status-fail-icon-color); } } } @@ -149,14 +146,13 @@ display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid var(--ti-popupload-table-item-border-color); &:nth-child(even) { - background: var(--ti-popupload-table-item-even-bg-color); + background: var(--tv-PopUpload-table-item-even-bg-color); } .del-col { - color: var(--ti-popupload-dialog-delete-text-color); + color: var(--tv-PopUpload-dialog-delete-text-color); width: 100%; cursor: pointer; } @@ -184,15 +180,15 @@ margin-right: 7px; height: 8px; width: 8px; - border: 2px solid var(--ti-popupload-status-icon-color); + border: 2px solid var(--tv-PopUpload-status-icon-border-color); border-radius: 50%; &&-success { - border-color: var(--ti-popupload-status-success-icon-color); + border-color: var(--tv-PopUpload-status-success-icon-border-color); } &&-fail { - border-color: var(--ti-popupload-status-fail-icon-color); + border-color: var(--tv-PopUpload-status-fail-icon-color); } } } diff --git a/packages/theme/src/pop-upload/vars.less b/packages/theme/src/pop-upload/vars.less index d0113f5642..d9b47cff67 100644 --- a/packages/theme/src/pop-upload/vars.less +++ b/packages/theme/src/pop-upload/vars.less @@ -10,59 +10,33 @@ * */ -.component-css-vars-pop-upload() { - // 上传按钮文字大小(hide) - --ti-popupload-font-size: var(--ti-common-font-size-base, 14px); - // 弹窗头部alert提示底部外边距 - --ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10, 10px); +.inject-PopUpload-vars() { + // 上传按钮文字大小 + --tv-PopUpload-font-size: var(--tv-font-size-md); // 弹窗表格高度 - --ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x, 140px) * 2); + --tv-PopUpload-dialog-table-height: 280px; // 弹窗表格字号 - --ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1, 14px); - // 弹窗表格顶部外边距 - --ti-popupload-dialog-margin-top: var(--ti-common-space-10, 10px); - // 弹窗表格头部横向分割线颜色 - --ti-popupload-dialog-table-border-color: var(--ti-common-color-transparent, transparent); - // 弹窗表格头部竖向分割线颜色(new) - --ti-popupload-dialog-table-line-bg-color: var(--ti-common-bg-color-transparent-15, var(--ti-base-bg-color-transparent-15)); + --tv-PopUpload-dialog-table-font-size: var(--tv-font-size-md); // 弹窗表格头部竖向分割线高度(new) - --ti-popupload-dialog-table-line-height: var(--ti-common-size-4x, 16px); + --tv-PopUpload-dialog-table-line-height: 16px; // 弹窗表格头部高度 - --ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small, 24px); + --tv-PopUpload-dialog-table-header-height: var(--tv-size-height-xs); // 弹窗表格头部文本色 - --ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary, #191919); + --tv-PopUpload-dialog-table-header-text-color: var(--tv-color-text); // 弹窗表格头部字重 - --ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold, 600); + --tv-PopUpload-dialog-table-header-font-weight: var(--tv-font-weight-bold); // 弹窗表格头部背景色 - --ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal, #f5f5f5); - // 弹窗表格头部item垂直内边距 - --ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0, 0px); - // 弹窗表格头部item水平内边距 - --ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x, 12px); - // 弹窗表格内容item垂直内边距 - --ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x, 8px); - // 弹窗表格内容item水平内边距 - --ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x, 12px); - // 弹窗表格内容item垂直外边距 - --ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0, 0px); - // 弹窗表格内容item水平外边距 - --ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0, 0px); + --tv-PopUpload-dialog-table-header-bg-color: var(--tv-color-bg); // 弹窗表格内容item行高 - --ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4, 30px); + --tv-PopUpload-table-body-col-line-height: 30px; // 弹窗表格内容偶数行背景色 - --ti-popupload-table-item-even-bg-color: var(--ti-common-color-bg-white-normal, #ffffff); - // 弹窗表格每行底部边框色(new) - --ti-popupload-table-item-border-color: var(--ti-common-border-color-transparent-8, var(--ti-base-bg-color-transparent-8)); - // 弹窗表格底部内边距 - --ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10, 10px); - // 弹窗底部内边距 - --ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x, 24px); + --tv-PopUpload-table-item-even-bg-color: var(--tv-color-bg-secondary); // 弹窗已上传文件的删除文本色 - --ti-popupload-dialog-delete-text-color: var(--ti-common-color-text-link, #1476ff); + --tv-PopUpload-dialog-delete-text-color: var(--tv-color-text-link); // 弹窗文件列表等待上传圆圈色 - --ti-popupload-status-icon-color: var(--ti-common-color-line-normal, #c2c2c2); + --tv-PopUpload-status-icon-border-color: var(--tv-color-border); // 弹窗文件列表上传成功圆圈色 - --ti-popupload-status-success-icon-color: var(--ti-common-color-success, #5cb300); + --tv-PopUpload-status-success-icon-border-color: var(--tv-color-success-border); // 弹窗文件列表上传失败圆圈色 - --ti-popupload-status-fail-icon-color: var(--ti-common-color-error-border, #f23030); + --tv-PopUpload-status-fail-icon-color: var(--tv-color-error-border); }