Skip to content

Commit

Permalink
feat: table popup tag tooltip size token. fix: table tooltip style bug (
Browse files Browse the repository at this point in the history 
#1003)
  • Loading branch information
@Wen1kang
Wen1kang committed Nov 14, 2022
1 parent 02992a1 commit effa0ab
Show file tree
Hide file tree
Showing 17 changed files with 242 additions and 154 deletions.
53 changes: 29 additions & 24 deletions style/web/components/image-viewer/_index.less
View file
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
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
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
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
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
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
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
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
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

0 comments on commit effa0ab

Please sign in to comment.