From 71fd1eb305b29830a49ed876cd213b19068e0b84 Mon Sep 17 00:00:00 2001 From: mingruxia Date: Wed, 27 Jul 2022 18:41:54 +0800 Subject: [PATCH] feat(web): modify component border radius (#666) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add 999px border-radius token * feat: replace border-radius px to variable * style: replace calender/comment.. border-dadius * style: popup/menu/transfer... border-radius replace * style: range-input/radio-group border-radius * style: replace badge/buttom(round)... border-radius * style: add cascader menu border-radius * style: 设计走查修改 * style: 修复设计走查问题 * fix: fix cacascader横线问题 * fix: fix lint error * style: rename @border-radius-50 --- style/web/_global.less | 2 +- style/web/_variables.less | 3 ++- style/web/components/alert/_index.less | 2 +- style/web/components/anchor/_index.less | 2 +- style/web/components/avatar/_var.less | 4 ++-- style/web/components/badge/_index.less | 6 +++--- style/web/components/badge/_var.less | 1 + style/web/components/button/_index.less | 2 +- style/web/components/calendar/_index.less | 4 ++-- style/web/components/calendar/_var.less | 4 ++-- style/web/components/card/_var.less | 2 +- style/web/components/cascader/_index.less | 2 ++ style/web/components/color-picker/_index.less | 15 ++++++++------- style/web/components/comment/_index.less | 3 ++- style/web/components/dialog/_index.less | 4 ++-- style/web/components/dialog/_var.less | 4 ++-- style/web/components/drawer/_index.less | 1 + style/web/components/drawer/_var.less | 2 +- style/web/components/dropdown/_index.less | 1 - style/web/components/loading/_index.less | 2 +- style/web/components/menu/_docs.less | 2 +- style/web/components/menu/_index-v2.less | 2 +- style/web/components/menu/_index.less | 2 +- style/web/components/message/_index.less | 3 ++- style/web/components/message/_mixin.less | 2 +- style/web/components/message/_var.less | 2 +- style/web/components/notification/_index.less | 2 +- style/web/components/notification/_mixin.less | 2 +- style/web/components/notification/_var.less | 4 ++-- style/web/components/popconfirm/_var.less | 2 +- style/web/components/popup/_index.less | 2 +- style/web/components/progress/_index.less | 4 ++-- style/web/components/radio/_index.less | 8 ++++---- style/web/components/radio/_var.less | 2 +- style/web/components/range-input/_index.less | 1 + style/web/components/range-input/_mixin.less | 2 +- style/web/components/range-input/_var.less | 2 +- style/web/components/select/_index.less | 1 - style/web/components/skeleton/_var.less | 4 ++-- style/web/components/slider/_index.less | 2 +- style/web/components/slider/_var.less | 2 +- style/web/components/steps/_mixin.less | 4 ++-- style/web/components/switch/_index.less | 4 ++-- style/web/components/table/_docs.less | 4 ++-- style/web/components/table/_index.less | 2 +- style/web/components/tag/_var.less | 2 +- style/web/components/tooltip/_index.less | 2 +- style/web/components/transfer/_index.less | 2 +- style/web/components/transfer/_var.less | 2 +- style/web/components/tree/_docs.less | 4 ++-- style/web/components/upload/_docs.less | 2 +- style/web/components/upload/_var.less | 2 +- style/web/theme/_radius.less | 3 ++- 53 files changed, 80 insertions(+), 72 deletions(-) diff --git a/style/web/_global.less b/style/web/_global.less index 6707819f38..11374b0ad1 100644 --- a/style/web/_global.less +++ b/style/web/_global.less @@ -18,7 +18,7 @@ } &::-webkit-scrollbar-thumb { - border-radius: 6px; + border-radius: @border-radius-medium; border: 2px solid transparent; background-clip: content-box; background-color: @scrollbar-color; diff --git a/style/web/_variables.less b/style/web/_variables.less index 7d5572caff..622059fdb1 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -229,7 +229,8 @@ @border-radius-medium: var(--td-radius-medium); // 圆角-6 @border-radius-large: var(--td-radius-large); // 圆角-9 @border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12 -@border-radius-50: var(--td-radius-round); // 圆角-全圆角 +@border-radius-round: var(--td-radius-round); // 圆角-999 +@border-radius-circle: var(--td-radius-circle); // 圆角-全圆角 // 表单相关 @form-height: 30px; diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less index 2a08639dc8..635d05d846 100644 --- a/style/web/components/alert/_index.less +++ b/style/web/components/alert/_index.less @@ -16,7 +16,7 @@ padding: @alert-padding; opacity: 1; transition: opacity .2s; - border-radius: @border-radius-default; + border-radius: @border-radius-medium; &.@{prefix}-is-hidden { /* 隐藏 */ display: none; diff --git a/style/web/components/anchor/_index.less b/style/web/components/anchor/_index.less index 8b544f01b2..e64b1f53c2 100644 --- a/style/web/components/anchor/_index.less +++ b/style/web/components/anchor/_index.less @@ -133,7 +133,7 @@ content: ""; width: @anchor-target-width; height: @anchor-target-width; - border-radius: 50%; + border-radius: @border-radius-circle; background-color: @anchor-text-color-hover; vertical-align: middle; animation: @anchor-target-animation; diff --git a/style/web/components/avatar/_var.less b/style/web/components/avatar/_var.less index c7adb6cf9a..5b0127ee65 100644 --- a/style/web/components/avatar/_var.less +++ b/style/web/components/avatar/_var.less @@ -18,8 +18,8 @@ @avatar-icon-large: @icon-l; //边框 -@avatar-border-radius-circle: @border-radius-50; -@avatar-border-radius-round: 3px; +@avatar-border-radius-circle: @border-radius-circle; +@avatar-border-radius-round: @border-radius-default; @avatar-border-color: @bg-color-container; //组合头像偏移量 diff --git a/style/web/components/badge/_index.less b/style/web/components/badge/_index.less index 58503a1e60..d66aaa566f 100644 --- a/style/web/components/badge/_index.less +++ b/style/web/components/badge/_index.less @@ -40,7 +40,7 @@ margin-top: 1px; width: @badge-dot-size; height: @badge-dot-size; - border-radius: @border-radius-50; + border-radius: @border-radius-circle; background-color: @badge-color; } @@ -48,7 +48,7 @@ &--round { padding-right: @badge-padding; padding-left: @badge-padding; - min-width: @badge-height; + min-width: @badge-min-width; height: @badge-height; border-radius: (@badge-height / 2); background-color: @badge-color; @@ -64,6 +64,6 @@ } &--round { - border-radius: @border-radius-default; + border-radius: @border-radius-round; } } diff --git a/style/web/components/badge/_var.less b/style/web/components/badge/_var.less index db26904eb0..e647ceee4c 100644 --- a/style/web/components/badge/_var.less +++ b/style/web/components/badge/_var.less @@ -23,6 +23,7 @@ // dot 宽/高 @badge-dot-size: 6px; // @badge-status-size: 6px; +@badge-min-width: 8px; // 字体 @badge-font-size: @font-size-s; diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less index ffc9910b77..c88654f01d 100644 --- a/style/web/components/button/_index.less +++ b/style/web/components/button/_index.less @@ -307,7 +307,7 @@ } &--shape-round { - border-radius: @btn-shape-border-radius-default; + border-radius: @border-radius-round; &.@{prefix}-size-s { border-radius: @btn-shape-border-radius-s; diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less index 105dbc2ed3..c494428036 100644 --- a/style/web/components/calendar/_index.less +++ b/style/web/components/calendar/_index.less @@ -11,7 +11,7 @@ border: 1px solid @calendar-border-color; background-color: @calendar-bg; - + border-radius: @border-radius-large; .@{prefix}-is-disabled { &.@{prefix}-calendar__table-body-cell { @@ -110,7 +110,7 @@ &--card { width: @calendar-card-width; - + border-radius: @border-radius-medium; .@{prefix}-calendar__control { padding: @calendar-card-calendar-control-padding; border-bottom: 1px solid @calendar-border-color; diff --git a/style/web/components/calendar/_var.less b/style/web/components/calendar/_var.less index 588d05b391..dd6b975952 100644 --- a/style/web/components/calendar/_var.less +++ b/style/web/components/calendar/_var.less @@ -99,9 +99,9 @@ @calendar-body-row-flex:1; // 边框弧度 -@calendar-card-body-cell-display-border-radius: @border-radius-50; +@calendar-card-body-cell-display-border-radius: @border-radius-circle; @calendar-scrollbar-thumb-border-radius: @border-radius-default; -@calendar-card-checked-pointer-border-radius: 6px; +@calendar-card-checked-pointer-border-radius: @border-radius-medium; // 动画 @calendar-transition-duration: @anim-duration-base; diff --git a/style/web/components/card/_var.less b/style/web/components/card/_var.less index 0ec74f379c..0844af44fc 100644 --- a/style/web/components/card/_var.less +++ b/style/web/components/card/_var.less @@ -1,4 +1,4 @@ -@card-border-radius: @border-radius-default; +@card-border-radius: @border-radius-medium; // medium @card-body-padding: @spacer-2 @spacer-3; diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less index 4174445e29..48283476e8 100644 --- a/style/web/components/cascader/_index.less +++ b/style/web/components/cascader/_index.less @@ -20,6 +20,7 @@ &__popup { padding: 0; + box-shadow: @shadow-2; } &__panel { @@ -56,6 +57,7 @@ box-sizing: content-box; padding: @cascader-menu-padding; background: @bg-color-container; + border-radius: @border-radius-medium; &--segment { border-right: .5px solid @cascader-menu-segment-color; diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less index 8b6f6653ab..03d2f23a86 100644 --- a/style/web/components/color-picker/_index.less +++ b/style/web/components/color-picker/_index.less @@ -17,6 +17,7 @@ @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left; + border-radius: @border-radius-medium; user-select: none; } @@ -101,7 +102,7 @@ border-color: currentcolor; width: @color-picker-slider-thumb-size; height: @color-picker-slider-thumb-size; - border-radius: 50%; + border-radius: @border-radius-circle; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 15%); background: white; color: @text-color-brand; @@ -113,7 +114,7 @@ width: 100%; height: 100%; background: currentcolor; - border-radius: 50%; + border-radius: @border-radius-circle; display: block; } } @@ -146,7 +147,7 @@ .@{prefix}-color-picker__thumb { width: @color-picker-saturation-thumb-size; height: @color-picker-saturation-thumb-size; - border-radius: 50%; + border-radius: @border-radius-circle; transform: translate(-50%, -50%); } } @@ -270,7 +271,7 @@ display: block; width: 100%; height: 100%; - border-radius: 50%; + border-radius: @border-radius-circle; overflow: hidden; background-size: 4px 4px; background-position: 0 0, 2px 2px; @@ -443,7 +444,7 @@ display: flex; width: @color-picker-swatch-width; height: @color-picker-swatch-height; - border-radius: 50%; + border-radius: @border-radius-circle; padding: @color-picker-swatch-padding; border: @color-picker-swatch-border-size solid transparent; overflow: hidden; @@ -462,7 +463,7 @@ position: relative; overflow: hidden; border: 1px solid @component-border; - border-radius: 50%; + border-radius: @border-radius-circle; flex-shrink: 0; } @@ -490,7 +491,7 @@ position: relative; overflow: hidden; border: 1px solid @component-border; - border-radius: 50%; + border-radius: @border-radius-circle; box-sizing: border-box; } diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less index ae4fa392ee..84a8f8e133 100644 --- a/style/web/components/comment/_index.less +++ b/style/web/components/comment/_index.less @@ -27,7 +27,7 @@ &__avatar-image { width: 56px; height: 56px; - border-radius: 50%; + border-radius: @border-radius-circle; } &__content { @@ -94,6 +94,7 @@ margin-top: @comment-reply-margin-top; margin-left: @comment-reply-margin-left; background-color: @comment-bg-color-secondary; + border-radius: @border-radius-medium; padding: 16px 24px; } } diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less index 901cda89b8..11999f2c81 100644 --- a/style/web/components/dialog/_index.less +++ b/style/web/components/dialog/_index.less @@ -17,7 +17,7 @@ width: @dialog-width; background-color: @dialog-bg-color; position: relative; - border-radius: @dialog-border-radius; + border-radius: @border-radius-large; // icon theme .@{prefix}-icon.t-is-info { @@ -112,7 +112,7 @@ height: @dialog-close-icon-size; align-items: center; justify-content: center; - border-radius: @dialog-close-border-radius; + border-radius: @border-radius-default; background: @dialog-bg-color; transition: all @anim-duration-base linear; diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less index 62dea6551b..9a59a52d9d 100644 --- a/style/web/components/dialog/_var.less +++ b/style/web/components/dialog/_var.less @@ -55,8 +55,8 @@ // 边框 @dialog-border: 1px solid @border-level-1-color; -@dialog-border-radius: @border-radius-default; -@dialog-close-border-radius: @border-radius-default; +@dialog-border-radius: @border-radius-medium; +@dialog-close-border-radius: @border-radius-medium; // 位置 @dialog-close-position-top: @spacer-3; diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less index b752700ffb..4a956d58a4 100644 --- a/style/web/components/drawer/_index.less +++ b/style/web/components/drawer/_index.less @@ -167,6 +167,7 @@ right: @drawer-close-btn-position-right; color: @drawer-close-btn-color; background-color: @drawer-close-btn-bg-color; + border-radius: @border-radius-default; cursor: pointer; transition: background-color @anim-duration-base; diff --git a/style/web/components/drawer/_var.less b/style/web/components/drawer/_var.less index 692c318936..a16d177fca 100644 --- a/style/web/components/drawer/_var.less +++ b/style/web/components/drawer/_var.less @@ -68,4 +68,4 @@ /** * 边框弧度 */ -@drawer-header-border-radius: 2px 2px 0 0; +@drawer-header-border-radius: @border-radius-small @border-radius-small 0 0; diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less index d5f5684716..9ea81b5405 100644 --- a/style/web/components/dropdown/_index.less +++ b/style/web/components/dropdown/_index.less @@ -13,7 +13,6 @@ background-color: @dropdown-bg-color; position: relative; - border-radius: @border-radius-default; padding: 0; &__menu { diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less index 718a1c4137..f00ff7004f 100644 --- a/style/web/components/loading/_index.less +++ b/style/web/components/loading/_index.less @@ -98,7 +98,7 @@ width: 100%; height: 100%; background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); - border-radius: 50%; + border-radius: @border-radius-circle; /* stylelint-disable-next-line */ mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); diff --git a/style/web/components/menu/_docs.less b/style/web/components/menu/_docs.less index e35ebe2dd1..14c8a6202f 100644 --- a/style/web/components/menu/_docs.less +++ b/style/web/components/menu/_docs.less @@ -14,7 +14,7 @@ width: 140px; height: 24px; background: #5b6270; - border-radius: 3px; + border-radius: @border-radius-default; } [class*="@{d-prefix}-demo-menu__sidelogo"] { diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less index 048c411b31..7571118e01 100644 --- a/style/web/components/menu/_index-v2.less +++ b/style/web/components/menu/_index-v2.less @@ -776,7 +776,7 @@ a.@{prefix}-menu__item { position: absolute; background: @menu-theme-light; z-index: @menu-outer-zindex; - border-radius: @border-radius-default; + border-radius: @border-radius-medium; opacity: 0; .list-style-none(); diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less index dccb355e62..b00839b402 100644 --- a/style/web/components/menu/_index.less +++ b/style/web/components/menu/_index.less @@ -802,7 +802,7 @@ a.@{prefix}-menu__item { position: absolute; background: @menu-theme-light; z-index: @menu-outer-zindex; - border-radius: @border-radius-default; + border-radius: @border-radius-medium; opacity: 0; .list-style-none(); diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less index a6b61920aa..c61bae2827 100644 --- a/style/web/components/message/_index.less +++ b/style/web/components/message/_index.less @@ -59,10 +59,11 @@ right: @msg-icon-position-right; cursor: pointer; color: @msg-close-icon-color; + border-radius: @border-radius-default; .@{prefix}-icon-close { font-size: @msg-close-font-size; - border-radius: @msg-border-radius; + border-radius: @border-radius-default; transition: all @anim-duration-base linear; &:hover { diff --git a/style/web/components/message/_mixin.less b/style/web/components/message/_mixin.less index 8e62266c1f..6741215c8e 100644 --- a/style/web/components/message/_mixin.less +++ b/style/web/components/message/_mixin.less @@ -1,7 +1,7 @@ .message() { width: fit-content; outline: 0; - border-radius: @border-radius-default; + border-radius: @border-radius-medium; background-color: @msg-color-block; box-shadow: @msg-shadow; box-sizing: border-box; diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less index 7601a80c98..9548cfb54f 100644 --- a/style/web/components/message/_var.less +++ b/style/web/components/message/_var.less @@ -33,7 +33,7 @@ @msg-content-line-height: @text-line-height-base; // 圆角 -@msg-border-radius: @border-radius-default; +@msg-border-radius: @border-radius-medium; // 阴影 @msg-shadow: @shadow-3-inset; diff --git a/style/web/components/notification/_index.less b/style/web/components/notification/_index.less index 4bc27da5cf..cba4ed4dca 100644 --- a/style/web/components/notification/_index.less +++ b/style/web/components/notification/_index.less @@ -57,7 +57,7 @@ .@{prefix}-icon-close { cursor: pointer; font-size: @notification-icon-close-font-size; - border-radius: @notification-close-border-radius; + border-radius: @border-radius-default; color: @notification-close-icon-color; &:hover { diff --git a/style/web/components/notification/_mixin.less b/style/web/components/notification/_mixin.less index 7b71768691..b3362621b8 100644 --- a/style/web/components/notification/_mixin.less +++ b/style/web/components/notification/_mixin.less @@ -6,7 +6,7 @@ display: flex; box-shadow: @notification-shadow; box-sizing: border-box; - border-radius: @border-radius-default; + border-radius: @border-radius-medium; width: @notification-width-default; padding: @notification-padding-default; } diff --git a/style/web/components/notification/_var.less b/style/web/components/notification/_var.less index fa91204260..c6e953e67c 100644 --- a/style/web/components/notification/_var.less +++ b/style/web/components/notification/_var.less @@ -37,8 +37,8 @@ @notification-title-line-height: 24px; // 圆角 -@notification-detail-item-border-radius: @border-radius-default; -@notification-close-border-radius: @border-radius-default; +@notification-detail-item-border-radius: @border-radius-medium; +@notification-close-border-radius: @border-radius-medium; // 阴影 @notification-shadow: @shadow-2; diff --git a/style/web/components/popconfirm/_var.less b/style/web/components/popconfirm/_var.less index c94103d0ee..5ad43688d2 100644 --- a/style/web/components/popconfirm/_var.less +++ b/style/web/components/popconfirm/_var.less @@ -55,7 +55,7 @@ // 尺寸 @popconfirm-icon-size: @font-size-xl; // 圆角 -@popconfirm-border-radius: 6px; +@popconfirm-border-radius: @border-radius-medium; // 颜色 @popconfirm-icon-warning: @warning-color; diff --git a/style/web/components/popup/_index.less b/style/web/components/popup/_index.less index fd7699a2a8..88419f3da0 100644 --- a/style/web/components/popup/_index.less +++ b/style/web/components/popup/_index.less @@ -21,7 +21,7 @@ position: relative; background: @popup-bg; box-shadow: @popup-shadow; - border-radius: @border-radius-default; + border-radius: @border-radius-medium; padding: @popup-padding; font-size: @popup-content-font-size; line-height: @popup-content-line-height; diff --git a/style/web/components/progress/_index.less b/style/web/components/progress/_index.less index 3076d40fad..76b5bf6f5c 100644 --- a/style/web/components/progress/_index.less +++ b/style/web/components/progress/_index.less @@ -16,7 +16,7 @@ position: relative; height: 100%; background: @progress-inner-color; - border-radius: @progress-inner-border-radius; + border-radius: @border-radius-round; transition: @progress-inner-transition; } @@ -36,7 +36,7 @@ height: 6px; overflow: hidden; background: @progress-track-color; - border-radius: 3px; + border-radius: @border-radius-round; } //标准进度条 diff --git a/style/web/components/radio/_index.less b/style/web/components/radio/_index.less index 4e1c5be487..6e702eb0a8 100644 --- a/style/web/components/radio/_index.less +++ b/style/web/components/radio/_index.less @@ -20,7 +20,7 @@ max-width: 100%; overflow-x: auto; overflow-y: hidden; - + border-radius: @border-radius-default; .scrollbar(4px); .@{radio-cls} { @@ -49,7 +49,7 @@ &.@{radio-cls}-group--filled { border-color: @radio-button-group-background-color-filled; padding: @radio-group-padding; - border-radius: @radio-button-border-radius; + border-radius: @border-radius-default; background-color: @radio-button-group-background-color-filled; position: relative; @@ -270,7 +270,7 @@ width: @radio-size; height: @radio-size; vertical-align: middle; - border-radius: @border-radius-50; + border-radius: @border-radius-circle; border: @radio-input-border; background-color: @radio-input-color; transition: @radio-input-transition; @@ -286,7 +286,7 @@ margin-left: -@radio-dot-size; transform: scale(.5); opacity: @radio-opacity-transparent; - border-radius: @border-radius-50; + border-radius: @border-radius-circle; background-color: @radio-dot-color; transition: all @anim-duration-base @anim-time-fn-ease-out; } diff --git a/style/web/components/radio/_var.less b/style/web/components/radio/_var.less index ee6b7cc919..8cb02fef04 100644 --- a/style/web/components/radio/_var.less +++ b/style/web/components/radio/_var.less @@ -51,7 +51,7 @@ @radio-size: 16px; @radio-dot-size: (@radio-size / 2); @radio-margin-right: (@spacer * 3); -@radio-button-border-radius: @border-radius-default; +@radio-button-border-radius: @border-radius-small; @radio-height-small: @spacer-3 - 4px; @radio-height-medium: @spacer-4 - 4px; @radio-height-large: @spacer-5 - 4px; diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less index 59c29daea6..adf3a32cbb 100644 --- a/style/web/components/range-input/_index.less +++ b/style/web/components/range-input/_index.less @@ -56,6 +56,7 @@ .@{prefix}-input__wrap { height: 100%; + border-radius: @border-radius-small; } .@{prefix}-input { diff --git a/style/web/components/range-input/_mixin.less b/style/web/components/range-input/_mixin.less index 363a48cc0e..e14a34ad16 100644 --- a/style/web/components/range-input/_mixin.less +++ b/style/web/components/range-input/_mixin.less @@ -1,7 +1,7 @@ .range-input-base() { border-width: 1px; border-style: solid; - border-radius: @range-input-border-radius; + border-radius: @border-radius-default; border-color: @range-input-border-color-default; padding: @range-input-padding-default; background-color: @range-input-bg-color-default; diff --git a/style/web/components/range-input/_var.less b/style/web/components/range-input/_var.less index 85979f6bc3..2c09976f9f 100644 --- a/style/web/components/range-input/_var.less +++ b/style/web/components/range-input/_var.less @@ -50,7 +50,7 @@ @range-input-extra-font-size: @font-size-s; // 边框 -@range-input-border-radius: @border-radius-default; +@range-input-border-radius: @border-radius-small; // box @range-input-box-shadow-color-default-focus: @brand-color-focus; diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less index 77b1fbac5b..777aaad234 100644 --- a/style/web/components/select/_index.less +++ b/style/web/components/select/_index.less @@ -253,7 +253,6 @@ max-height: @select-dropdown-max-height; overflow-y: auto; box-shadow: @select-dropdown-shadow; - border-radius: @select-border-radius; &-inner { padding: @select-dropdown-padding; diff --git a/style/web/components/skeleton/_var.less b/style/web/components/skeleton/_var.less index 0c5db3ff9a..caf6f276f4 100644 --- a/style/web/components/skeleton/_var.less +++ b/style/web/components/skeleton/_var.less @@ -17,8 +17,8 @@ @rect-height-default: 88px; // 基础变量 -@border-radius-square: 3px; -@border-radius-circle: 50%; +@border-radius-square: @border-radius-default; +@border-radius-circle: @border-radius-circle; // skeleton 变量 @skeleton-type-text-height: @font-size-l; diff --git a/style/web/components/slider/_index.less b/style/web/components/slider/_index.less index fdd724d73a..0745758bc7 100644 --- a/style/web/components/slider/_index.less +++ b/style/web/components/slider/_index.less @@ -85,7 +85,7 @@ height: @slider-control-bar-size; border: 2px solid @slider-control-bar-border; background-color: @slider-control-bar-background; - border-radius: 50%; + border-radius: @border-radius-circle; transition: .2s; user-select: none; box-sizing: border-box; diff --git a/style/web/components/slider/_var.less b/style/web/components/slider/_var.less index 32c515a1bf..7d1059df4d 100644 --- a/style/web/components/slider/_var.less +++ b/style/web/components/slider/_var.less @@ -47,7 +47,7 @@ @slider-text-line-height: 20px; // 边框 -@slider-border-radius: 4px; +@slider-border-radius: @border-radius-round; // 定位 @slider-text-top: 13px; diff --git a/style/web/components/steps/_mixin.less b/style/web/components/steps/_mixin.less index e12d2b1e5f..e48d72f05c 100644 --- a/style/web/components/steps/_mixin.less +++ b/style/web/components/steps/_mixin.less @@ -85,7 +85,7 @@ width: @steps-circle-width; height: @steps-circle-height; text-align: center; - border-radius: 50%; + border-radius: @border-radius-circle; margin-top: @steps-item-default-icon-margin-top; font-size: @steps-default-step-icon-font-size; } @@ -186,7 +186,7 @@ width: @steps-dot-item-icon-width; height: @steps-dot-item-icon-height; border: 2px solid @steps-item-icon-dot-border-color-default; - border-radius: 50%; + border-radius: @border-radius-circle; margin-bottom: @steps-dot-item-icon-margin-bottom; position: relative; box-sizing: border-box; diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less index 9d81841ea7..89fc1dee26 100644 --- a/style/web/components/switch/_index.less +++ b/style/web/components/switch/_index.less @@ -35,7 +35,7 @@ left: @switch-width-border-default; width: (@switch-height-default - 2px * @switch-width-border-default); height: (@switch-height-default - 2px * @switch-width-border-default); - border-radius: 12px; + border-radius: @border-radius-extraLarge; transition: @switch-handle-transition; .@{prefix}-icon { @@ -50,7 +50,7 @@ left: 0; right: 0; bottom: 0; - border-radius: 12px; + border-radius: @border-radius-extraLarge; background-color: @switch-handle-bg-color; transition: @switch-handle-transition; } diff --git a/style/web/components/table/_docs.less b/style/web/components/table/_docs.less index 27cdbed36d..09c51100cb 100644 --- a/style/web/components/table/_docs.less +++ b/style/web/components/table/_docs.less @@ -26,7 +26,7 @@ width: 6px; height: 6px; margin-left: -10px; - border-radius: 50%; + border-radius: @border-radius-circle; } } @@ -68,7 +68,7 @@ width: 6px; height: 6px; margin-left: -10px; - border-radius: 50%; + border-radius: @border-radius-circle; } } diff --git a/style/web/components/table/_index.less b/style/web/components/table/_index.less index 687f16d6c7..e5934cdc8e 100644 --- a/style/web/components/table/_index.less +++ b/style/web/components/table/_index.less @@ -579,7 +579,7 @@ &:hover { color: @table-icon-active-color; background-color: @table-highlight-bg-color--hover; - border-radius: 50%; + border-radius: @border-radius-circle; } } diff --git a/style/web/components/tag/_var.less b/style/web/components/tag/_var.less index d7686f2609..1d616c6387 100644 --- a/style/web/components/tag/_var.less +++ b/style/web/components/tag/_var.less @@ -47,7 +47,7 @@ // shape @tag-border-radius-square: @border-radius-default; -@tag-border-radius-round: 12px; +@tag-border-radius-round: @border-radius-extraLarge; // width @tag-default-border-width: 1px; diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less index 97ae118c96..07e6e05a41 100644 --- a/style/web/components/tooltip/_index.less +++ b/style/web/components/tooltip/_index.less @@ -14,7 +14,7 @@ max-width: @tooltip-max-width; word-break: break-word; box-sizing: border-box; - + border-radius: @border-radius-medium; &:not(.@{prefix}-tooltip--light) { color: @tooltip-text-color; } diff --git a/style/web/components/transfer/_index.less b/style/web/components/transfer/_index.less index f8ed71d6bc..59f7c4414c 100644 --- a/style/web/components/transfer/_index.less +++ b/style/web/components/transfer/_index.less @@ -117,7 +117,7 @@ display: flex; cursor: pointer; margin: @transfer-list-item-margin; - border-radius: @transfer-border-radius; + border-radius: @border-radius-default; transition: background-color @anim-duration-base @anim-time-fn-easing; &:first-child { diff --git a/style/web/components/transfer/_var.less b/style/web/components/transfer/_var.less index c0e23c99cd..53b64ee0d4 100644 --- a/style/web/components/transfer/_var.less +++ b/style/web/components/transfer/_var.less @@ -70,7 +70,7 @@ @transfer-border: 1px solid @transfer-border-color; @transfer-list-border: 0; @transfer-list-with-search-border: 0; -@transfer-border-radius: @border-radius-default; +@transfer-border-radius: @border-radius-medium; // 阴影 @transfer-box-shadow: @shadow-1; diff --git a/style/web/components/tree/_docs.less b/style/web/components/tree/_docs.less index ed9b27f80f..3d5767996f 100644 --- a/style/web/components/tree/_docs.less +++ b/style/web/components/tree/_docs.less @@ -57,7 +57,7 @@ box-sizing: border-box; width: 16px; height: 16px; - border-radius: 16px; + border-radius: @border-radius-circle; border: 1px solid #0052d9; background-color: #fff; justify-content: center; @@ -74,7 +74,7 @@ z-index: 1; width: 8px; height: 8px; - border-radius: 2px; + border-radius: @border-radius-small; border: 1px solid #0052d9; background-color: #fff; transform: rotate(45deg); diff --git a/style/web/components/upload/_docs.less b/style/web/components/upload/_docs.less index 8f4411c91a..68e8acaac1 100644 --- a/style/web/components/upload/_docs.less +++ b/style/web/components/upload/_docs.less @@ -38,7 +38,7 @@ .@{d-prefix}-demo-upload-table { border: 1px dashed #f0f0f0; - border-radius: 2px 2px 0 0; + border-radius: @border-radius-small @border-radius-small 0 0; font-size: @font-size-base; min-height: 252px; overflow-y: auto; diff --git a/style/web/components/upload/_var.less b/style/web/components/upload/_var.less index 8799094dbd..5b464c0ab4 100644 --- a/style/web/components/upload/_var.less +++ b/style/web/components/upload/_var.less @@ -103,7 +103,7 @@ @upload-card-box-border-radius: @border-radius-default; @upload-card-content-border: 1px solid @component-border; @upload-dragger-border: 1px dashed @component-border; -@upload-dragger-border-radius: 2px; +@upload-dragger-border-radius: @border-radius-small; @upload-flow-table-border: 1px dashed @component-border; @upload-flow-table-tr-border-top: 1px solid @component-border; @upload-flow-table-th-border: 1px solid @component-border; diff --git a/style/web/theme/_radius.less b/style/web/theme/_radius.less index 81da0c7989..ae55f19fcd 100644 --- a/style/web/theme/_radius.less +++ b/style/web/theme/_radius.less @@ -5,5 +5,6 @@ --td-radius-medium: 6px; --td-radius-large: 9px; --td-radius-extraLarge: 12px; - --td-radius-round: 50%; + --td-radius-round: 999px; + --td-radius-circle: 50%; }