mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-01 06:49:32 +08:00
feat: @skeleton-to-color, @transfer-item-hover-bg, fix: progress style statusColor
This commit is contained in:
parent
e15b9c5f37
commit
34332116fb
@ -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 => {
|
||||||
|
@ -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%;
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
// ---
|
// ---
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user