feat: @skeleton-to-color, @transfer-item-hover-bg, fix: progress style statusColor

This commit is contained in:
ycjcl868 2019-12-04 20:45:12 +08:00
parent e15b9c5f37
commit 34332116fb
5 changed files with 10 additions and 12 deletions

View File

@ -10,12 +10,6 @@ interface CircleProps extends ProgressProps {
progressStatus: string; progressStatus: string;
} }
const statusColorMap: Record<string, string> = {
normal: '#108ee9',
exception: '#ff5500',
success: '#87d068',
};
function getPercentage({ percent, successPercent }: CircleProps) { function getPercentage({ percent, successPercent }: CircleProps) {
const ptg = validProgress(percent); const ptg = validProgress(percent);
if (!successPercent) { if (!successPercent) {
@ -26,12 +20,12 @@ function getPercentage({ percent, successPercent }: CircleProps) {
return [successPercent, validProgress(ptg - successPtg)]; return [successPercent, validProgress(ptg - successPtg)];
} }
function getStrokeColor({ progressStatus, successPercent, strokeColor }: CircleProps) { function getStrokeColor({ successPercent, strokeColor }: CircleProps) {
const color = strokeColor || statusColorMap[progressStatus]; const color = strokeColor || null;
if (!successPercent) { if (!successPercent) {
return color; return color;
} }
return [statusColorMap.success, color]; return [null, color];
} }
const Circle: React.SFC<CircleProps> = props => { const Circle: React.SFC<CircleProps> = props => {

View File

@ -7,8 +7,6 @@
@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph'; @skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
@skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button'; @skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button';
@skeleton-to-color: shade(@skeleton-color, 5%);
.@{skeleton-prefix-cls} { .@{skeleton-prefix-cls} {
display: table; display: table;
width: 100%; width: 100%;

View File

@ -353,6 +353,10 @@
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36), @card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36),
0 5px 12px 4px rgba(0, 0, 0, 0.27); 0 5px 12px 4px rgba(0, 0, 0, 0.27);
// Transfer
// ---
@transfer-item-hover-bg: #262626;
// Comment // Comment
// --- // ---
@comment-bg: @component-background; @comment-bg: @component-background;

View File

@ -680,12 +680,14 @@
// Skeleton // Skeleton
// --- // ---
@skeleton-color: #f2f2f2; @skeleton-color: #f2f2f2;
@skeleton-to-color: shade(@skeleton-color, 5%);
// Transfer // Transfer
// --- // ---
@transfer-header-height: 40px; @transfer-header-height: 40px;
@transfer-disabled-bg: @disabled-bg; @transfer-disabled-bg: @disabled-bg;
@transfer-list-height: 200px; @transfer-list-height: 200px;
@transfer-item-hover-bg: @item-hover-bg;
// Message // Message
// --- // ---

View File

@ -122,7 +122,7 @@
} }
&-item:not(&-item-disabled):hover { &-item:not(&-item-disabled):hover {
background-color: @item-hover-bg; background-color: @transfer-item-hover-bg;
cursor: pointer; cursor: pointer;
} }