From 3a3cf474723efa0705483780d0d6f6532ceafbde Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 17:48:10 +0800 Subject: [PATCH 1/8] :lipstick: Optimize danger Button design --- components/button/style/mixin.less | 22 +--------------------- components/style/themes/default.less | 6 +++--- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 1aec902ef2..9e378f4f4c 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -66,26 +66,6 @@ } .button-disabled(); } -.button-variant-danger(@color; @background; @border) { - .button-color(@color; @background; @border); - &:hover { - .button-color( - @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) ` - ); - } - &:focus { - .button-color( - ~`colorPalette('@{color}', 5) `; @component-background; ~`colorPalette('@{color}', 5) ` - ); - } - &:active, - &.active { - .button-color( - @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) ` - ); - } - .button-disabled(); -} .button-variant-ghost(@color; @border: @color) { .button-color(@color; transparent; @border); text-shadow: none; @@ -230,7 +210,7 @@ } // danger button style .btn-danger() { - .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border); + .button-variant-primary(@btn-danger-color, @btn-danger-bg); } // link button style .btn-link() { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index f9c51a11be..4ecd6d2f41 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -156,9 +156,9 @@ @btn-default-bg: @component-background; @btn-default-border: @border-color-base; -@btn-danger-color: @error-color; -@btn-danger-bg: @background-color-base; -@btn-danger-border: @border-color-base; +@btn-danger-color: #fff; +@btn-danger-bg: color(~`colorPalette('@{error-color}', 5) `); +@btn-danger-border: color(~`colorPalette('@{error-color}', 5) `); @btn-disable-color: @disabled-color; @btn-disable-bg: @disabled-bg; From 75ba74c23d067a7867b4b46712ac1855f464e637 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 17:51:26 +0800 Subject: [PATCH 2/8] :lipstick: should use @border-radius-sm --- components/slider/style/index.less | 2 +- components/tree-select/style/index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 62259c591c..9688c12331 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -24,7 +24,7 @@ width: 100%; height: 4px; background-color: @slider-rail-background-color; - border-radius: 2px; + border-radius: @border-radius-sm; transition: background-color 0.3s; } diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 51e73bcd9f..126a401858 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -36,7 +36,7 @@ padding: 3px 5px; color: @text-color; text-decoration: none; - border-radius: 2px; + border-radius: @border-radius-sm; cursor: pointer; transition: all 0.3s; &:hover { From 2add8007be885347a83aba062efe87e7b3f7460b Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 17:57:50 +0800 Subject: [PATCH 3/8] code style improve --- components/slider/style/index.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 9688c12331..189bd52b3d 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -25,7 +25,7 @@ height: 4px; background-color: @slider-rail-background-color; border-radius: @border-radius-sm; - transition: background-color 0.3s; + transition: background-color .3s; } &-track { @@ -33,7 +33,7 @@ height: 4px; background-color: @slider-track-background-color; border-radius: @border-radius-base; - transition: background-color 0.3s ease; + transition: background-color .3s; } &-handle { @@ -47,8 +47,8 @@ border-radius: 50%; box-shadow: 0; cursor: pointer; - transition: border-color 0.3s, box-shadow 0.6s, - transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + transition: border-color .3s, box-shadow .6s, + transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); &:focus { border-color: @slider-handle-color-focus; From 2ad61d6ceb78167f02a7013abe22ee7336c358e8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:04:13 +0800 Subject: [PATCH 4/8] :wrench: Add less variables for Slider handler --- components/slider/style/index.less | 14 +++++++------- components/style/themes/default.less | 3 +++ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 189bd52b3d..a8c65647bc 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -25,7 +25,7 @@ height: 4px; background-color: @slider-rail-background-color; border-radius: @border-radius-sm; - transition: background-color .3s; + transition: background-color 0.3s; } &-track { @@ -33,7 +33,7 @@ height: 4px; background-color: @slider-track-background-color; border-radius: @border-radius-base; - transition: background-color .3s; + transition: background-color 0.3s; } &-handle { @@ -42,13 +42,13 @@ height: 14px; margin-top: -5px; margin-left: -7px; - background-color: @component-background; - border: solid 2px @slider-handle-color; + background-color: @slider-handle-background-color; + border: solid @slider-handle-border-width @slider-handle-color; border-radius: 50%; - box-shadow: 0; + box-shadow: @slider-handle-shadow; cursor: pointer; - transition: border-color .3s, box-shadow .6s, - transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + transition: border-color 0.3s, box-shadow 0.6s, + transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); &:focus { border-color: @slider-handle-color-focus; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4ecd6d2f41..ad5ec6064b 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -548,11 +548,14 @@ @slider-rail-background-color-hover: #e1e1e1; @slider-track-background-color: @primary-3; @slider-track-background-color-hover: @primary-4; +@slider-handle-border-width: 2px; +@slider-handle-background-color: @component-background; @slider-handle-color: @primary-3; @slider-handle-color-hover: @primary-4; @slider-handle-color-focus: tint(@primary-color, 20%); @slider-handle-color-focus-shadow: fade(@primary-color, 20%); @slider-handle-color-tooltip-open: @primary-color; +@slider-handle-shadow: 0; @slider-dot-border-color: @border-color-split; @slider-dot-border-color-active: tint(@primary-color, 50%); @slider-disabled-color: @disabled-color; From 6d76292b29cb23fdb09406f3c9ad3c88c3ed57f5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:28:02 +0800 Subject: [PATCH 5/8] :wrench: Add less var @progress-radius --- components/progress/Line.tsx | 4 +-- .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++++---------- .../__snapshots__/index.test.js.snap | 20 ++++++------- components/progress/style/index.less | 3 +- components/style/themes/default.less | 1 + 5 files changed, 29 insertions(+), 27 deletions(-) diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx index 077d0264f9..e033c1b44f 100644 --- a/components/progress/Line.tsx +++ b/components/progress/Line.tsx @@ -78,13 +78,13 @@ const Line: React.SFC = props => { const percentStyle = { width: `${validProgress(percent)}%`, height: strokeWidth || (size === 'small' ? 6 : 8), - borderRadius: strokeLinecap === 'square' ? 0 : '100px', + borderRadius: strokeLinecap === 'square' ? 0 : '', ...backgroundProps, }; const successPercentStyle = { width: `${validProgress(successPercent)}%`, height: strokeWidth || (size === 'small' ? 6 : 8), - borderRadius: strokeLinecap === 'square' ? 0 : '100px', + borderRadius: strokeLinecap === 'square' ? 0 : '', }; const successSegment = successPercent !== undefined ? ( diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index 2a46083d21..fea5273804 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -491,7 +491,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = ` >
@@ -664,7 +664,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = ` >
@@ -688,7 +688,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = ` >
@@ -854,7 +854,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -878,7 +878,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -902,7 +902,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -943,7 +943,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -984,7 +984,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -1009,7 +1009,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1033,7 +1033,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1057,7 +1057,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1098,7 +1098,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1257,11 +1257,11 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = ` >
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap index ff6ea3bebd..68c03f9102 100644 --- a/components/progress/__tests__/__snapshots__/index.test.js.snap +++ b/components/progress/__tests__/__snapshots__/index.test.js.snap @@ -13,11 +13,11 @@ exports[`Progress render format 1`] = ` >
@@ -44,7 +44,7 @@ exports[`Progress render negetive progress 1`] = ` >
@@ -71,11 +71,11 @@ exports[`Progress render negetive successPercent 1`] = ` >
@@ -102,7 +102,7 @@ exports[`Progress render normal progress 1`] = ` >
@@ -129,7 +129,7 @@ exports[`Progress render out-of-range progress 1`] = ` >
@@ -173,7 +173,7 @@ exports[`Progress render out-of-range progress with info 1`] = ` >
@@ -296,7 +296,7 @@ exports[`Progress render strokeColor 2`] = ` style={ Object { "backgroundImage": "linear-gradient(to right, #108ee9, #87d068)", - "borderRadius": "100px", + "borderRadius": "", "height": 8, "width": "50%", } @@ -363,7 +363,7 @@ exports[`Progress render strokeColor 3`] = ` style={ Object { "backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)", - "borderRadius": "100px", + "borderRadius": "", "height": 8, "width": "50%", } diff --git a/components/progress/style/index.less b/components/progress/style/index.less index d56ef16fac..86375becca 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -36,7 +36,7 @@ width: 100%; vertical-align: middle; background-color: @progress-remaining-color; - border-radius: 100px; + border-radius: @progress-radius; } &-circle-trail { @@ -52,6 +52,7 @@ &-bg { position: relative; background-color: @progress-default-color; + border-radius: @progress-radius; transition: all 0.4s @ease-out-circ 0s; } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index ad5ec6064b..a4a6f38791 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -370,6 +370,7 @@ @progress-default-color: @processing-color; @progress-remaining-color: @background-color-base; @progress-text-color: @text-color; +@progress-radius: 100px; // Menu // --- From b09d59e9fe7d9ed29561d5cc440135539fdfb473 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:43:10 +0800 Subject: [PATCH 6/8] :wrench: Add less variables for Timeline --- components/style/themes/default.less | 8 ++++++++ components/timeline/style/index.less | 9 +++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index a4a6f38791..832cfaf510 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -631,3 +631,11 @@ // --- @drawer-header-padding: 16px 24px; @drawer-body-padding: 24px; + +// Timeline +// --- +@timeline-width: 2px; +@timeline-color: @border-color-split; +@timeline-dot-border-width: 2px; +@timeline-dot-color: @primary-color; +@timeline-dot-bg: @component-background; diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 995c828379..70307f2e85 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -2,7 +2,6 @@ @import '../../style/mixins/index'; @timeline-prefix-cls: ~'@{ant-prefix}-timeline'; -@timeline-color: @border-color-split; .@{timeline-prefix-cls} { .reset-component; @@ -23,7 +22,7 @@ top: 0.75em; left: 4px; height: 100%; - border-left: 2px solid @timeline-color; + border-left: @timeline-width solid @timeline-color; } &-pending &-head { @@ -38,18 +37,20 @@ position: absolute; width: 10px; height: 10px; - background-color: @component-background; - border: 2px solid transparent; + background-color: @timeline-dot-bg; + border: @timeline-dot-border-width solid transparent; border-radius: 100px; &-blue { color: @primary-color; border-color: @primary-color; } + &-red { color: @error-color; border-color: @error-color; } + &-green { color: @success-color; border-color: @success-color; From c15c0fc199fa56e9c4202dabadea15e543b69206 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:58:30 +0800 Subject: [PATCH 7/8] :wrench: Add less variables for Tabs[type="card"] --- components/style/themes/default.less | 2 ++ components/tabs/style/card-style.less | 6 +++++- components/tabs/style/index.less | 12 ++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 832cfaf510..e519704569 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -490,6 +490,8 @@ @tabs-highlight-color: @primary-color; @tabs-hover-color: @primary-5; @tabs-active-color: @primary-7; +@tabs-card-gutter: 2px; +@tabs-card-tab-active-border-top: 2px solid transparent; // BackTop // --- diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index ea100406e5..8582c41180 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -14,7 +14,7 @@ &&-card &-card-bar &-tab { height: @tabs-card-height; margin: 0; - margin-right: 2px; + margin-right: @tabs-card-gutter; padding: 0 16px; line-height: @tabs-card-height - 2px; background: @tabs-card-head-background; @@ -28,6 +28,10 @@ background: @component-background; border-color: @border-color-split; border-bottom: @border-width-base solid @component-background; + + &::before { + border-top: @tabs-card-tab-active-border-top; + } } &&-card &-card-bar &-tab-disabled { color: @tabs-card-active-color; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index bd2f5f203f..957d4b3c15 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -181,6 +181,18 @@ cursor: pointer; transition: color 0.3s @ease-in-out; + &::before { + position: absolute; + top: -1px; + left: 0; + width: 100%; + border-top: 2px solid transparent; + border-radius: @border-radius-base @border-radius-base 0 0; + transition: all 0.3s; + content: ''; + pointer-events: none; + } + &:last-child { margin-right: 0; } From 37784bc8a2d849b50d373bf14feb893256ca7e9c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 19:04:40 +0800 Subject: [PATCH 8/8] :white_check_mark: fix snapshot --- .../__tests__/__snapshots__/components.test.js.snap | 6 +++--- .../upload/__tests__/__snapshots__/uploadlist.test.js.snap | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index 9157ace9c4..3e81296784 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -9607,7 +9607,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = ` >
@@ -9634,7 +9634,7 @@ exports[`ConfigProvider components Progress normal 1`] = ` >
@@ -9661,7 +9661,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = ` >
diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index b264e7decc..f6f21ed7ac 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -97,7 +97,7 @@ exports[`Upload List handle error 1`] = ` >
@@ -206,7 +206,7 @@ exports[`Upload List should be uploading when upload a file 1`] = ` >
@@ -315,7 +315,7 @@ exports[`Upload List should be uploading when upload a file 2`] = ` >