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

Jump to bottom

style: replace table popup tag tooltip size token and fix table tooltip style bug #1003

Merged
merged 1 commit into from Nov 14, 2022
Merged

style: replace table popup tag tooltip size token and fix table tooltip style bug #1003

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
53 changes: 29 additions & 24 deletions style/web/components/image-viewer/_index.less
View file
Open in desktop
Expand Up @@ -25,10 +25,10 @@
justify-content: center;
align-items: center;
align-content: center;
font-size: 14px;
font-size: @image-viewer-error-font;

.@{prefix}-image-viewer__img-error-text {
margin-top: 10px;
margin-top: @comp-margin-s;
}
}
}
Expand Down Expand Up @@ -100,8 +100,8 @@
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 40%);
border-radius: 3px;
padding: 4px 8px;
border-radius: @border-radius-default;
padding: @image-viewer-modal-padding;
z-index: 1;
}

Expand Down Expand Up @@ -154,7 +154,7 @@
align-items: center;
justify-content: center;
background-color: @bg-color-container;
padding-bottom: 8px;
padding-bottom: @image-viewer-modal-header-padding-bottom;

@keyframes preview-icon-range {
0% {
Expand All @@ -179,15 +179,20 @@
.@{prefix}-image-viewer__header-pre-bt {
width: auto;
height: auto;
padding: @image-viewer-modal-header-pre-bt-padding;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
background-color: @bg-color-container;
color: @text-color-primary;
border-radius: 50%;
border: .5px solid @bg-color-secondarycontainer;
animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-icon-unrange;
box-shadow: @shadow-inset;
animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-unrange;

> .t-icon {
font-size: @font-size-l;
}

&:hover {
background-color: inherit;
Expand All @@ -200,13 +205,13 @@
}

to {
height: 54px;
height: @image-viewer-modal-header-size;
}
}

@keyframes preview-image-hide {
0% {
height: 54px;
height: @image-viewer-modal-header-size;
}

to {
Expand All @@ -216,11 +221,11 @@

&.@{prefix}-is-show {
.@{prefix}-image-viewer__header-prev {
animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-image-show;
animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-show;
}

.@{prefix}-image-viewer__header-pre-bt {
animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-icon-range;
animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-icon-range;
}
}

Expand All @@ -231,7 +236,7 @@

.@{prefix}-image-viewer__header-prev {
width: @header-box-all-width * 7;
animation: @anim-duration-base ease-out 0s 1 normal forwards running preview-image-hide;
animation: @anim-duration-base @anim-time-fn-easing 0s 1 normal forwards running preview-image-hide;
overflow: auto hidden;
display: flex;
position: relative;
Expand Down Expand Up @@ -263,12 +268,12 @@
margin-left: @header-box-all-width * 3;

.@{prefix}-image-viewer__header-box {
width: @header-box-width;
height: 32px;
margin: 16px @header-box-margin 10px;
width: 100%;
height: @image-viewer-modal-header-image-box-size;
margin: @image-viewer-modal-header-image-box-margin;
transition: @anim-duration-base;
overflow: hidden;
border-radius: 3px;
border-radius: @border-radius-default;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -318,8 +323,8 @@
color: @text-color-anti;
background-color: rgba(0, 0, 0, 40%);
border-radius: 50%;
width: 40px;
height: 40px;
width: @image-viewer-modal-button-size;
height: @image-viewer-modal-button-size;
display: flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -372,13 +377,13 @@
height: 50px;
line-height: 100%;
background: @bg-color-container;
border-radius: 6px;
padding: 0 5px;
border-radius: @border-radius-medium;
padding: @image-viewer-utils-content-padding;

.@{prefix}-image-viewer__modal-icon {
margin: 0 4px;
width: 32px;
height: 32px;
margin: @image-viewer-utils-modal-icon-margin;
width: @image-viewer-utils-modal-icon-size;
height: @image-viewer-utils-modal-icon-size;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -391,7 +396,7 @@
}

.@{prefix}-image-viewer__utils-scale {
width: 40px;
width: @image-viewer-utils-modal-utils-scale-width;
text-align: center;
cursor: inherit;

Expand Down
18 changes: 16 additions & 2 deletions style/web/components/image-viewer/_var.less
View file
Open in desktop
Expand Up @@ -13,6 +13,20 @@

@import "../../_variables.less";

@image-viewer__icon-color--disabled: rgba(255, 255, 255, 22%);
@image-viewer__image--background-color__error: #E7E7E7;
@image-viewer__icon-color--disabled: @text-color-disabled;
@image-viewer__image--background-color__error: @bg-color-component-disabled;
@image-viewer__image-text--error: #000000;

@image-viewer-error-font: @font-body-medium;

@image-viewer-modal-padding: @comp-paddingTB-xs @comp-paddingLR-s;
@image-viewer-modal-header-pre-bt-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs;
@image-viewer-modal-header-padding-bottom: @comp-margin-s;
@image-viewer-modal-header-size: @comp-size-xxxl;
@image-viewer-modal-header-image-box-size: @comp-size-xl;
@image-viewer-modal-header-image-box-margin: @comp-margin-l @comp-margin-xs @comp-margin-s;
@image-viewer-modal-button-size: @comp-size-xl;
@image-viewer-utils-content-padding: 0 @comp-paddingLR-xs;
@image-viewer-utils-modal-icon-margin: 0 @comp-margin-xs;
@image-viewer-utils-modal-icon-size: @comp-size-m;
@image-viewer-utils-modal-utils-scale-width: @comp-size-xl;
5 changes: 3 additions & 2 deletions style/web/components/list/_index.less
View file
Open in desktop
Expand Up @@ -48,12 +48,12 @@

&__meta {
display: flex;
padding: @list-meta-padding;
// padding: @list-meta-padding;

&-avatar {
width: @list-avatar-size;
height: @list-avatar-size;
border-radius: (@list-avatar-size / 2);
border-radius: calc(@list-avatar-size / 2);
overflow: hidden;
background: @list-avatar-bg-color;
margin-right: @list-avatar-margin-right;
Expand Down Expand Up @@ -174,6 +174,7 @@

.@{prefix}-loading {
font-size: @list-load-font-size;
margin-right: @list-load-icon-margin;
}

.@{prefix}-loading.@{prefix}-is-load-more {
Expand Down
38 changes: 19 additions & 19 deletions style/web/components/list/_var.less
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@
@list-item-split-color: @border-level-1-color;
@list-avatar-bg-color: @bg-color-page;
@list-text-color-loading: @text-color-placeholder;
@list-icon-color-loading: @brand-color-5;
// @list-icon-color-loading: @brand-color-5;
@list-text-color-load-more: @text-color-placeholder;
@list-meta-title-color: @text-color-primary;
@list-meta-description-color: @text-color-primary;
Expand All @@ -29,29 +29,29 @@
@list-font-color: @text-color-primary;

// 间距
@list-padding: @spacer-2 @spacer-3;
@list-item-spacer-small: @spacer @spacer-2;
@list-item-spacer-default: @spacer-l @spacer-3;
@list-item-spacer-large: @spacer-2 @spacer-4;
@list-meta-padding: @spacer-s 0;
@list-avatar-margin-right: @spacer-2;
@list-meta-title-margin: 0 0 @spacer;
@list-meta-description-margin-right: @spacer-3;
@list-action-margin-right: @spacer-3;
@list-extra-margin: @spacer 0 @spacer @spacer-2;
@list-load-not-empty-padding: @spacer-4;
@list-load-icon-margin: @spacer;
@list-padding: @comp-paddingTB-m @comp-paddingLR-l;
@list-item-spacer-small: @comp-paddingTB-s @comp-paddingLR-m;
@list-item-spacer-default: @comp-paddingTB-m @comp-paddingLR-l;
@list-item-spacer-large: @comp-paddingTB-l @comp-paddingLR-xl;
// @list-meta-padding: @spacer-s 0;
@list-avatar-margin-right: @comp-margin-l;
@list-meta-title-margin: 0 0 @comp-margin-s;
@list-meta-description-margin-right: @comp-margin-xxl;
@list-action-margin-right: @comp-margin-l;
@list-extra-margin: @spacer 0 @spacer @spacer-2; //?
@list-load-not-empty-padding: @comp-paddingTB-m @comp-paddingLR-l;
@list-load-icon-margin: @comp-margin-s;

// 尺寸
@list-item-line-height: 22px;
@list-avatar-size: 56px;
@list-icon-size: @font-size-l;
@list-item-line-height: @text-line-height-base;
@list-avatar-size: @comp-size-xxxl;
@list-icon-size: @comp-size-xxxs;

// 字体
@list-item-font: @font-body-medium;
@list-meta-title-font: @font-title-medium;
@list-load-font-size: @font-size-l;
@list-load-more-font-size: @font-size-l;
@list-load-font-size: @comp-size-xxxs;
@list-load-more-font-size: @comp-size-xxxs;

// 行号
@list-load-line-height: @text-line-height-s;
@list-load-line-height: @text-line-height-base;
14 changes: 7 additions & 7 deletions style/web/components/loading/_var.less
View file
Open in desktop
Expand Up @@ -18,21 +18,21 @@

// 字号
@loading-text-size: @font-body-medium;
@loading-icon-size: @font-size-xxl;
@loading-icon-size-small: @font-size-l;
@loading-icon-size-large: 56px;
@loading-icon-size: @comp-size-l;
@loading-icon-size-small: @comp-size-xxxs;
@loading-icon-size-large: @comp-size-xxxl;
@loading-fullscreen-icon-size: @loading-icon-size;

// 间距
@loading-text-margin-left: 5px;
@loading-text-margin-left: @comp-margin-xs;
@loading-gradient-padding-s: 1px;
@loading-gradient-padding-m: 3px;
@loading-gradient-padding-l: 5px;

// Size
@loading-gradient-size-s: 16px;
@loading-gradient-size-m: 40px;
@loading-gradient-size-l: 56px;
@loading-gradient-size-s: @comp-size-xxxs;
@loading-gradient-size-m: @comp-size-xl;
@loading-gradient-size-l: @comp-size-xxxl;

@loading-gradient-mask-size-s: 5.5px;
@loading-gradient-mask-size-m: 11.5px;
Expand Down
8 changes: 4 additions & 4 deletions style/web/components/popup/_var.less
View file
Open in desktop
Expand Up @@ -4,15 +4,15 @@
@popup-text-color: @text-color-primary;

// 间距
@popup-padding: 4px @spacer;
@popup-padding: @comp-paddingTB-xs @comp-paddingLR-s;
@popup-content-line-height: @text-line-height-base;
@popup-arrow-width: 8px;
@popup-arrow-height: 8px;
@popup-content-arrow-spacer: @spacer-2;
@popup-content-margin: @spacer;
@popup-content-arrow-spacer: @comp-margin-l;
@popup-content-margin: @comp-margin-s;

// 箭头位置偏移量
@popup-arrow-position: (@popup-arrow-width / 2);
@popup-arrow-position: @popup-arrow-width;
@popup-content-font-size: @font-size-base;

// 阴影
Expand Down
8 changes: 5 additions & 3 deletions style/web/components/progress/_index.less
View file
Open in desktop
Expand Up @@ -24,6 +24,7 @@
margin-left: @progress-info-spacer;
color: @progress-info-dark-color;
white-space: nowrap;
display: inline-flex;
}

&__icon {
Expand All @@ -33,7 +34,7 @@

.@{prefix}-progress__bar {
width: 100%;
height: 6px;
height: @progress-line-stroke-width;
overflow: hidden;
background: @progress-track-color;
border-radius: @border-radius-round;
Expand All @@ -49,7 +50,7 @@
//条形进度条 百分比内置
.@{prefix}-progress--plump {
height: @progress-stroke-plump-width;
border-radius: (@progress-stroke-plump-width / 2);
border-radius: calc(@progress-stroke-plump-width / 2);
display: flex;
align-items: center;
.@{prefix}-progress__info {
Expand Down Expand Up @@ -85,12 +86,13 @@

.@{prefix}-progress__info {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 100%;
margin: 0;
font-size: @progress-circle-font-size;
font-weight: 500;
font-weight: 600;
line-height: 1;
text-align: center;
transform: translate(-50%, -50%);
Expand Down
8 changes: 4 additions & 4 deletions style/web/components/progress/_var.less
View file
Open in desktop
Expand Up @@ -30,19 +30,19 @@

// 尺寸
// line 进度条线宽
@progress-line-stroke-width: 6px;
@progress-line-stroke-width: @size-3;
// plump 进度条线宽
@progress-stroke-plump-width: 18px;
@progress-stroke-plump-width: @comp-size-xxs;

// 字体
@progress-icon-font-size: 1.25em;
@progress-icon-font-size: calc(@font-size-base + 2px);
@progress-icon-circle-font-size: 2.4em;
@progress-plump-font-size: @font-size-s;
@progress-circle-font-size: inherit;
@progress-circle-font-weight: 500;

// 间距
@progress-info-spacer: @spacer-1;
@progress-info-spacer: @comp-margin-s;

@progress-inner-border-radius: 50px;

Expand Down
4 changes: 2 additions & 2 deletions style/web/components/skeleton/_index.less
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@

&__row {
display: flex;
margin-bottom: 10px;
margin-bottom: @comp-margin-l;
align-items: center;
}

Expand All @@ -27,7 +27,7 @@
justify-content: center;
background-color: @bg-color-secondarycontainer;
color: @text-color-disabled;
margin-right: 15px;
margin-right: @comp-margin-l;

&:first-child:last-child,
&:last-child {
Expand Down