Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(theme): [pop-upload] refactor pop-upload theme vars #2290

Merged
merged 1 commit into from
Oct 18, 2024
Merged

refactor(theme): [pop-upload] refactor pop-upload theme vars #2290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/pop-upload/size.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
58 changes: 27 additions & 31 deletions packages/theme/src/pop-upload/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -67,33 +67,32 @@
}

&__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%);
right: 0;
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 {
Expand All @@ -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 {
Expand All @@ -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);
}
}
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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);
}
}
}
58 changes: 16 additions & 42 deletions packages/theme/src/pop-upload/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Loading