diff --git a/components/button/style/index.less b/components/button/style/index.less index d68f06986f..f0d345307a 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -15,12 +15,11 @@ // Fixing https://github.com/ant-design/ant-design/issues/12978 // Fixing https://github.com/ant-design/ant-design/issues/20058 // Fixing https://github.com/ant-design/ant-design/issues/19972 - // Fixing https://github.com/ant-design/ant-design/issues/12978 // Fixing https://github.com/ant-design/ant-design/issues/18107 // Fixing https://github.com/ant-design/ant-design/issues/13214 // It is a render problem of chrome, which is only happened in the codesandbox demo // 0.001px solution works and I don't why - line-height: @line-height-base - 0.001; + line-height: @line-height-base; .btn; .btn-default; diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index b316f0f79a..a009493cee 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -1,8 +1,11 @@ // mixins for button // ------------------------ -.button-size(@height; @padding; @font-size; @border-radius) { +.button-size(@height; @padding-horizontal; @font-size; @border-radius) { + @padding-vertical: round((@height - @font-size * @line-height-base) / 2 * 10) / 10 - + @border-width-base; + height: @height; - padding: @padding; + padding: @padding-vertical @padding-horizontal; font-size: @font-size; border-radius: @border-radius; } @@ -181,7 +184,7 @@ // size &-lg > .@{btnClassName}, &-lg > span > .@{btnClassName} { - .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0); + .button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; 0); line-height: @btn-height-lg - 2px; } &-lg > .@{btnClassName}.@{btnClassName}-icon-only { @@ -191,7 +194,7 @@ } &-sm > .@{btnClassName}, &-sm > span > .@{btnClassName} { - .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0); + .button-size(@btn-height-sm; @btn-padding-horizontal-sm; @font-size-base; 0); line-height: @btn-height-sm - 2px; > .@{iconfont-css-prefix} { font-size: @font-size-base; @@ -218,7 +221,9 @@ transition: all 0.3s @ease-in-out; user-select: none; touch-action: manipulation; - .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base); + .button-size( + @btn-height-base; @btn-padding-horizontal-base; @font-size-base; @btn-border-radius-base + ); > .@{iconfont-css-prefix} { line-height: 1; } @@ -242,10 +247,14 @@ } } &-lg { - .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base); + .button-size( + @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base + ); } &-sm { - .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm); + .button-size( + @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm + ); } } // primary button style @@ -347,15 +356,15 @@ } // round button .btn-round(@btnClassName: btn) { - .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size); + .button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size); &.@{btnClassName}-lg { .button-size( - @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg + @btn-circle-size-lg; @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg ); } &.@{btnClassName}-sm { .button-size( - @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm + @btn-circle-size-sm; @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm ); } } diff --git a/components/input/style/affix.less b/components/input/style/affix.less new file mode 100644 index 0000000000..7bef620e25 --- /dev/null +++ b/components/input/style/affix.less @@ -0,0 +1,125 @@ +@import './index'; +@import './mixin'; + +.@{ant-prefix}-input { + &-affix-wrapper { + .input(); + display: inline-flex; + + > .@{ant-prefix}-input { + padding: 0; + border: none; + } + } + + &-prefix, + &-suffix { + flex: none; + } +} + +// // Input with affix: prefix or suffix +// .@{ant-prefix}-input-affix-wrapper { +// .reset-component; +// .input-affix-wrapper(~'@{ant-prefix}-input'); + +// // https://github.com/ant-design/ant-design/issues/6144 +// .@{ant-prefix}-input { +// min-height: 100%; // use min-height, assume that no smaller height to override +// } +// } + +// .input-affix-wrapper(@inputClass) { +// position: relative; +// display: inline-block; +// width: 100%; +// text-align: start; + +// &:hover .@{inputClass}:not(.@{inputClass}-disabled) { +// .hover(); +// } + +// .@{inputClass} { +// position: relative; +// text-align: inherit; +// } + +// // Should not break align of icon & text +// // https://github.com/ant-design/ant-design/issues/18087 +// // https://github.com/ant-design/ant-design/issues/17414 +// // https://github.com/ant-design/ant-design/pull/17684 +// // https://codesandbox.io/embed/pensive-paper-di2wk +// // https://codesandbox.io/embed/nifty-benz-gb7ml +// .@{inputClass}-prefix, +// .@{inputClass}-suffix { +// position: absolute; +// top: 50%; +// z-index: 2; +// display: flex; +// align-items: center; +// color: @input-icon-color; +// line-height: 0; +// transform: translateY(-50%); + +// :not(.anticon) { +// line-height: @line-height-base; +// } +// } + +// .@{inputClass}-disabled ~ .@{inputClass}-suffix { +// .anticon { +// color: @disabled-color; +// cursor: not-allowed; +// } +// } + +// .@{inputClass}-prefix { +// left: @input-padding-horizontal-base + 1px; + +// .@{inputClass}-affix-wrapper-rtl& { +// right: @input-padding-horizontal-base + 1px; +// left: auto; +// } +// } + +// .@{inputClass}-suffix { +// right: @input-padding-horizontal-base + 1px; + +// .@{inputClass}-affix-wrapper-rtl& { +// right: auto; +// left: @input-padding-horizontal-base + 1px; +// } +// } + +// .@{inputClass}:not(:first-child) { +// padding-left: @input-padding-horizontal-base + @input-affix-width; +// } + +// .@{inputClass}:not(:last-child) { +// padding-right: @input-padding-horizontal-base + @input-affix-width; +// } + +// // Needed to change priority of classes in rtl direction (last-child comes before first-child) +// .@{inputClass}-affix-wrapper-rtl& .@{inputClass}:not(:last-child) { +// padding-right: @input-padding-horizontal-base; +// padding-left: @input-padding-horizontal-base + @input-affix-width; +// } + +// .@{inputClass}-affix-wrapper-rtl& .@{inputClass}:not(:first-child) { +// padding-right: @input-padding-horizontal-base + @input-affix-width; +// padding-left: @input-padding-horizontal-base; +// } + +// &.@{inputClass}-affix-wrapper-input-with-clear-btn .@{inputClass}:not(:last-child) { +// padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width; + +// .@{inputClass}-affix-wrapper-rtl& { +// padding-right: @input-padding-horizontal-base; +// padding-left: @input-padding-horizontal-base + @input-affix-with-clear-btn-width; +// } +// } + +// &.@{inputClass}-affix-wrapper-textarea-with-clear-btn .@{inputClass} { +// padding-right: 22px; +// } +// } diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index a9e995beea..667198df7c 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -8,13 +8,11 @@ // size mixins for input .input-lg() { - height: @input-height-lg; padding: @input-padding-vertical-lg @input-padding-horizontal-lg; font-size: @font-size-lg; } .input-sm() { - height: @input-height-sm; padding: @input-padding-vertical-sm @input-padding-horizontal-sm; } @@ -64,7 +62,6 @@ position: relative; display: inline-block; width: 100%; - height: @input-height-base; padding: @input-padding-vertical-base @input-padding-horizontal-base; color: @input-color; font-size: @font-size-base; diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 09542e4711..7685fe1833 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -1,7 +1,10 @@ @import './index'; @select-selection-height: @input-height-base - @input-padding-vertical-base * 2; -@select-multiple-padding: @input-padding-vertical-base - @border-width-base; +@select-multiple-padding: @input-padding-vertical-base; +@select-multiple-item-margin-vertical: round( + (@select-selection-height - @font-size-base * @line-height-base) / 2 * 10 + ) / 10; /** * Do not merge `height` & `line-height` under style with `selection` & `search`, @@ -18,7 +21,7 @@ flex-wrap: wrap; align-items: center; // Multiple is little different that horizontal is follow the vertical - padding: 0 @select-multiple-padding @select-multiple-padding; + padding: @select-multiple-padding @select-multiple-padding; .@{select-prefix-cls}-show-search& { cursor: text; @@ -34,15 +37,13 @@ max-width: 100%; height: @select-selection-height; - margin-top: @select-multiple-padding; + margin-top: -@select-multiple-item-margin-vertical; margin-right: @input-padding-vertical-base; + margin-bottom: -@select-multiple-item-margin-vertical; padding: 0 (@padding-xs / 2) 0 @padding-xs; line-height: @select-selection-height - @border-width-base * 2; background: @select-selection-item-bg; border: 1px solid @select-selection-item-border-color; - // strange align fix for chrome but works - // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif - border-top-width: @border-width-base + 0.4px; border-radius: @border-radius-base; cursor: default; transition: font-size 0.3s, line-height 0.3s, height 0.3s; @@ -97,15 +98,13 @@ &-input, &-mirror { - height: @select-selection-height; font-family: @font-family; - line-height: @select-selection-height - @border-width-base * 2; + line-height: @line-height-base; transition: all 0.3s; } &-input { width: 100%; - margin-top: @select-multiple-padding; } &-mirror { diff --git a/components/select/style/single.less b/components/select/style/single.less index 6e9fd84169..4a8b83ad30 100644 --- a/components/select/style/single.less +++ b/components/select/style/single.less @@ -4,7 +4,6 @@ // ========================= Selector ========================= .@{select-prefix-cls}-selector { display: flex; - border-top-width: @border-width-base + 0.375px; .@{select-prefix-cls}-selection-search { position: absolute; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4015019739..134f1015ca 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -178,11 +178,11 @@ @btn-default-ghost-bg: transparent; @btn-default-ghost-border: @component-background; -@btn-padding-base: 0 @padding-md - 1px; @btn-font-size-lg: @font-size-lg; @btn-font-size-sm: @font-size-base; -@btn-padding-lg: @btn-padding-base; -@btn-padding-sm: 0 @padding-xs - 1px; +@btn-padding-horizontal-base: @padding-md - 1px; +@btn-padding-horizontal-lg: @btn-padding-horizontal-base; +@btn-padding-horizontal-sm: @padding-xs - 1px; @btn-height-base: 32px; @btn-height-lg: 40px; @@ -340,9 +340,13 @@ @input-padding-horizontal-base: @input-padding-horizontal; @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; @input-padding-horizontal-lg: @input-padding-horizontal; -@input-padding-vertical-base: 4px; -@input-padding-vertical-sm: 1px; -@input-padding-vertical-lg: 6px; +@input-padding-vertical-base: round( + (@input-height-base - @font-size-base * @line-height-base) / 2 * 10 + ) / 10 - @border-width-base; +@input-padding-vertical-sm: round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) / + 10 - @border-width-base; +@input-padding-vertical-lg: round((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) / + 10 - @border-width-base; @input-placeholder-color: hsv(0, 0, 75%); @input-color: @text-color; @input-icon-color: @input-color;