test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Remove magic number of style align (#20869)

Browse Source 
* fix: Adjust baseline align

* clean up

* Select style

* fix lint
This commit is contained in:
二货机器人 2020-01-13 19:36:27 +08:00 committed by GitHub
parent a5cb32fd5b
commit 3fa274190e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 163 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/button/style/index.less
View File

@ -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;

29
components/button/style/mixin.less
View File

@ -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
);
}
}

125
components/input/style/affix.less Normal file
View File

@ -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;
// }
// }

3
components/input/style/mixin.less
View File

@ -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;

17
components/select/style/multiple.less
View File

@ -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 {

1
components/select/style/single.less
View File

@ -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;

16
components/style/themes/default.less
View File

@ -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;