From 9db8c9f59bb8d6953d8748f97841897a71b8537b Mon Sep 17 00:00:00 2001 From: Liuzj <530604689@qq.com> Date: Tue, 21 Jun 2022 15:54:20 +0800 Subject: [PATCH] fix(comp:button): style error (#968) --- packages/components/button/docs/Index.zh.md | 6 +++- packages/components/button/style/index.less | 4 --- packages/components/button/style/mixin.less | 29 +++++++++++-------- .../button/style/themes/default.variable.less | 6 +++- .../button/style/themes/seer.variable.less | 6 ++++ packages/components/table/docs/Index.zh.md | 3 +- 6 files changed, 35 insertions(+), 19 deletions(-) diff --git a/packages/components/button/docs/Index.zh.md b/packages/components/button/docs/Index.zh.md index 5947ffde3..39d773188 100644 --- a/packages/components/button/docs/Index.zh.md +++ b/packages/components/button/docs/Index.zh.md @@ -104,6 +104,10 @@ subtitle: 按钮 | `@button-text-active-color` | `@color-primary-d10` | - | - | | `@button-text-hover-background-color` | `transparent` | - | - | | `@button-icon-color` | `@color-graphite-d20` | - | - | -| `@button-icon-font-size` | `@font-size-lg` | - | - | +| `@button-icon-font-size-xs` | `@font-size-xs` | `@font-size-lg` | - | +| `@button-icon-font-size-sm` | `@font-size-sm` | `@font-size-lg` | - | +| `@button-icon-font-size-md` | `@font-size-md` | `@font-size-lg` | - | +| `@button-icon-font-size-lg` | `@font-size-md` | `@font-size-lg` | - | +| `@button-icon-font-size-xl` | `@font-size-lg` | `@font-size-lg` | - | | `@button-icon-margin` | `0 @spacing-xs` | - | - | diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less index 2bf7c5803..233fe18c1 100644 --- a/packages/components/button/style/index.less +++ b/packages/components/button/style/index.less @@ -130,10 +130,6 @@ } } - .@{icon-prefix} { - font-size: @button-icon-font-size; - } - > .@{icon-prefix} + span { margin: @button-icon-margin; } diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less index 155a48507..d7728cb17 100644 --- a/packages/components/button/style/mixin.less +++ b/packages/components/button/style/mixin.less @@ -1,10 +1,14 @@ @button-danger-border-color: color(~`colorPalette('@{button-danger-background-color}', 10) `); -.button-size(@height; @font-size; @spacing-horizontal; @border-radius) { +.button-size(@height; @font-size; @spacing-horizontal; @border-radius; @icon-font-size) { height: @height; padding: 0 @spacing-horizontal; font-size: @font-size; border-radius: @border-radius; + + .@{icon-prefix} { + font-size: @icon-font-size; + } } .button-disabled(@color: @button-disable-color; @background: @button-disable-background-color; @border: @button-disable-border) { @@ -115,6 +119,7 @@ .button() { position: relative; display: inline-flex; + vertical-align: bottom; flex-wrap: nowrap; align-items: center; justify-content: center; @@ -140,31 +145,31 @@ } &-xs { - .button-size(@button-height-xs; @button-font-size-xs; @button-padding-xs; @button-border-radius); + .button-size(@button-height-xs; @button-font-size-xs; @button-padding-xs; @button-border-radius; @button-icon-font-size-xs); min-width: @button-min-width-xs; } &-sm { - .button-size(@button-height-sm; @button-font-size-sm; @button-padding-sm; @button-border-radius); + .button-size(@button-height-sm; @button-font-size-sm; @button-padding-sm; @button-border-radius; @button-icon-font-size-sm); min-width: @button-min-width-sm; } &-md { - .button-size(@button-height-md; @button-font-size-md; @button-padding-md; @button-border-radius); + .button-size(@button-height-md; @button-font-size-md; @button-padding-md; @button-border-radius; @button-icon-font-size-md); min-width: @button-min-width-md; } &-lg { - .button-size(@button-height-lg; @button-font-size-lg; @button-padding-lg; @button-border-radius); + .button-size(@button-height-lg; @button-font-size-lg; @button-padding-lg; @button-border-radius; @button-icon-font-size-lg); min-width: @button-min-width-lg; } &-xl { - .button-size(@button-height-xl; @button-font-size-xl; @button-padding-xl; @button-border-radius); + .button-size(@button-height-xl; @button-font-size-xl; @button-padding-xl; @button-border-radius; @button-icon-font-size-xl); min-width: @button-min-width-xl; } @@ -315,21 +320,21 @@ } .button-round(@buttonPrefix) { - .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md); + .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md; @button-icon-font-size-md); &.@{buttonPrefix}-xs { - .button-size(@button-height-xs; @button-font-size-xs; @button-height-xs / 2; @button-height-xs); + .button-size(@button-height-xs; @button-font-size-xs; @button-height-xs / 2; @button-height-xs; @button-icon-font-size-xs); } &.@{buttonPrefix}-sm { - .button-size(@button-height-sm; @button-font-size-sm; @button-height-sm / 2; @button-height-sm); + .button-size(@button-height-sm; @button-font-size-sm; @button-height-sm / 2; @button-height-sm; @button-icon-font-size-sm); } &.@{buttonPrefix}-md { - .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md); + .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md; @button-icon-font-size-md); } &.@{buttonPrefix}-lg { - .button-size(@button-height-lg; @button-font-size-lg; @button-height-lg / 2; @button-height-lg); + .button-size(@button-height-lg; @button-font-size-lg; @button-height-lg / 2; @button-height-lg; @button-icon-font-size-lg); } &.@{buttonPrefix}-xl { - .button-size(@button-height-xl; @button-font-size-xl; @button-height-xl / 2; @button-height-xl); + .button-size(@button-height-xl; @button-font-size-xl; @button-height-xl / 2; @button-height-xl; @button-icon-font-size-xl); } } diff --git a/packages/components/button/style/themes/default.variable.less b/packages/components/button/style/themes/default.variable.less index 9e37d140a..8f183b5e2 100644 --- a/packages/components/button/style/themes/default.variable.less +++ b/packages/components/button/style/themes/default.variable.less @@ -76,5 +76,9 @@ @button-text-hover-background-color: transparent; @button-icon-color: @color-graphite-d20; -@button-icon-font-size: @font-size-lg; +@button-icon-font-size-xs: @font-size-xs; +@button-icon-font-size-sm: @font-size-sm; +@button-icon-font-size-md: @font-size-md; +@button-icon-font-size-lg: @font-size-md; +@button-icon-font-size-xl: @font-size-lg; @button-icon-margin: 0 @spacing-xs; diff --git a/packages/components/button/style/themes/seer.variable.less b/packages/components/button/style/themes/seer.variable.less index 4bc7e4ff1..2bd74497d 100644 --- a/packages/components/button/style/themes/seer.variable.less +++ b/packages/components/button/style/themes/seer.variable.less @@ -2,3 +2,9 @@ @button-height-xs: 24px; @button-height-sm: 32px; + +@button-icon-font-size-xs: @font-size-lg; +@button-icon-font-size-sm: @font-size-lg; +@button-icon-font-size-md: @font-size-lg; +@button-icon-font-size-lg: @font-size-lg; +@button-icon-font-size-xl: @font-size-lg; diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md index 5d283cb21..c3589fb61 100644 --- a/packages/components/table/docs/Index.zh.md +++ b/packages/components/table/docs/Index.zh.md @@ -244,7 +244,8 @@ export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomSta | `@table-body-hover-background` | `@background-color-light` | `@color-graphite-l50` | - | | `@table-pagination-margin` | `@spacing-lg 0` | - | - | | `@table-icon-margin` | `@spacing-xs` | - | - | -| `@table-expandable-icon-size` | `@font-size-md` | - | - | +| `@table-filterable-trigger-font-size` | `@font-size-md` | `@font-size-sm` | - | +| `@table-expandable-icon-size` | `@font-size-lg` | `@font-size-md` | - | | `@table-expandable-icon-color` | `@color-black` | `@color-graphite` | - | | `@table-sticky-scroll-bar-background` | `fade(#000, 35%)` | - | - | | `@table-sticky-scroll-bar-radius` | `4px` | - | - |