Browse Source

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

pull/20070/head
ycjcl868 5 years ago
parent
commit
34332116fb
  1. 12
      components/progress/Circle.tsx
  2. 2
      components/skeleton/style/index.less
  3. 4
      components/style/themes/dark.less
  4. 2
      components/style/themes/default.less
  5. 2
      components/transfer/style/index.less

12
components/progress/Circle.tsx

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

2
components/skeleton/style/index.less

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

4
components/style/themes/dark.less

@ -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),
0 5px 12px 4px rgba(0, 0, 0, 0.27);
// Transfer
// ---
@transfer-item-hover-bg: #262626;
// Comment
// ---
@comment-bg: @component-background;

2
components/style/themes/default.less

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

2
components/transfer/style/index.less

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

Loading…
Cancel
Save