refactor: input

refactor-input
tangjinzhou 2021-12-13 15:50:33 +08:00
parent 07ee749023
commit dddb55f47e
9 changed files with 462 additions and 208 deletions

View File

@ -0,0 +1,20 @@
// Fix Input component height issue in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.@{ant-prefix}-input {
height: @input-height-base;
&-lg {
height: @input-height-lg;
}
&-sm {
height: @input-height-sm;
}
&-affix-wrapper {
> input.@{ant-prefix}-input {
height: auto;
}
}
}
}

View File

@ -8,6 +8,19 @@
.input(); .input();
display: inline-flex; display: inline-flex;
&:not(&-disabled):hover {
.hover();
z-index: 1;
.@{ant-prefix}-input-search-with-button & {
z-index: 0;
}
}
&-focused,
&:focus {
z-index: 1;
}
&-disabled { &-disabled {
.@{ant-prefix}-input[disabled] { .@{ant-prefix}-input[disabled] {
background: transparent; background: transparent;

View File

@ -0,0 +1,42 @@
@import './index';
// ========================= Input =========================
.@{ant-prefix}-input-clear-icon {
margin: 0 @input-affix-margin;
color: @disabled-color;
font-size: @font-size-sm;
vertical-align: -1px;
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @text-color-secondary;
}
&:active {
color: @text-color;
}
&-hidden {
visibility: hidden;
}
&:last-child {
margin-right: 0;
}
}
// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
border: 0 !important;
.@{ant-prefix}-input-clear-icon {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
}

View File

@ -1,77 +1,60 @@
@import '../../style/themes/index'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@import './affix';
@import './mixin'; @import './mixin';
@import './affix';
@import './allow-clear';
// Input styles // Input styles
.@{ant-prefix}-input { .@{ant-prefix}-input {
.reset-component(); .reset-component();
.input(); .input();
}
//== Style for input-group: input with label, with button or dropdown... //== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group { &-group {
.reset-component(); .reset-component();
.input-group(~'@{ant-prefix}-input'); .input-group(~'@{ant-prefix}-input');
&-wrapper { &-wrapper {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
text-align: start; text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
}
} }
}
// Input with affix: prefix or suffix &-password-icon {
.@{ant-prefix}-input-affix-wrapper {
.reset-component();
.input-affix-wrapper(~'@{ant-prefix}-input');
}
.@{ant-prefix}-input-password-icon {
color: @text-color-secondary;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
}
}
.@{ant-prefix}-input-clear-icon {
.clear-icon();
vertical-align: 0;
}
.@{ant-prefix}-input-clear-icon-hidden {
visibility: hidden;
}
.@{ant-prefix}-input-textarea-clear-icon-hidden {
visibility: hidden;
}
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
.@{ant-prefix}-input {
padding: @input-padding-vertical-base @input-padding-horizontal-base;
}
}
.@{ant-prefix}-input-textarea-clear-icon {
.clear-icon();
position: absolute;
top: 0;
right: 0;
margin: 8px 8px 0 0;
}
.@{ant-prefix}-input-textarea {
&-show-count::after {
display: block;
color: @text-color-secondary; color: @text-color-secondary;
text-align: right; cursor: pointer;
content: attr(data-count); transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
}
}
&[type='color'] {
height: @input-height-base;
&.@{ant-prefix}-input-lg {
height: @input-height-lg;
}
&.@{ant-prefix}-input-sm {
height: @input-height-sm;
padding-top: 3px;
padding-bottom: 3px;
}
}
&-textarea {
&-show-count::after {
float: right;
color: @text-color-secondary;
white-space: nowrap;
content: attr(data-count);
pointer-events: none;
}
} }
} }
@import './search-input'; @import './search-input';
@import './rtl';
@import './IE11';

View File

@ -1,8 +1,6 @@
@import '../../style/themes/index'; @import '../../style/themes/index';
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@input-affix-margin: 4px;
@input-affix-width: 19px;
@input-affix-with-clear-btn-width: 38px; @input-affix-with-clear-btn-width: 38px;
// size mixins for input // size mixins for input
@ -18,10 +16,15 @@
// input status // input status
// == when focus or actived // == when focus or actived
.active(@color: @outline-color) { .active(@color: @outline-color) {
border-color: ~`colorPalette('@{color}', 5) `; & when (@theme = dark) {
border-color: @color;
}
& when not (@theme = dark) {
border-color: ~`colorPalette('@{color}', 5) `;
}
border-right-width: @border-width-base !important; border-right-width: @border-width-base !important;
outline: 0; outline: 0;
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%); box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, @outline-fade);
} }
// == when hoverd // == when hoverd
@ -31,7 +34,7 @@
} }
.disabled() { .disabled() {
color: @disabled-color; color: @input-disabled-color;
background-color: @input-disabled-bg; background-color: @input-disabled-bg;
cursor: not-allowed; cursor: not-allowed;
opacity: 1; opacity: 1;
@ -46,6 +49,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
min-width: 0;
padding: @input-padding-vertical-base @input-padding-horizontal-base; padding: @input-padding-vertical-base @input-padding-horizontal-base;
color: @input-color; color: @input-color;
font-size: @font-size-base; font-size: @font-size-base;
@ -61,7 +65,8 @@
.hover(); .hover();
} }
&:focus { &:focus,
&-focused {
.active(); .active();
} }
@ -73,6 +78,19 @@
.disabled(); .disabled();
} }
&-borderless {
&,
&:hover,
&:focus,
&-focused,
&-disabled,
&[disabled] {
background-color: transparent;
border: none;
box-shadow: none;
}
}
// Reset height for `textarea`s // Reset height for `textarea`s
textarea& { textarea& {
max-width: 100%; // prevent textearea resize from coming out of its container max-width: 100%; // prevent textearea resize from coming out of its container
@ -151,6 +169,9 @@
&:hover { &:hover {
z-index: 1; z-index: 1;
border-right-width: 1px; border-right-width: 1px;
.@{ant-prefix}-input-search-with-button & {
z-index: 0;
}
} }
} }
@ -184,17 +205,6 @@
} }
} }
} }
// Expand addon icon click area
// https://github.com/ant-design/ant-design/issues/3714
> i:only-child::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
}
} }
// Reset rounded corners // Reset rounded corners
@ -262,6 +272,22 @@
height: @input-height-sm; height: @input-height-sm;
} }
.@{inputClass}-affix-wrapper {
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{ant-prefix}-input-search & {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
}
}
&&-compact { &&-compact {
display: block; display: block;
.clearfix(); .clearfix();
@ -293,6 +319,10 @@
display: inline-flex; display: inline-flex;
} }
& > .@{ant-prefix}-picker-range {
display: inline-flex;
}
& > *:not(:last-child) { & > *:not(:last-child) {
margin-right: -@border-width-base; margin-right: -@border-width-base;
border-right-width: @border-width-base; border-right-width: @border-width-base;
@ -305,11 +335,8 @@
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector, & > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input, & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input,
& > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input { & > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
border-right-width: @border-width-base; border-right-width: @border-width-base;
border-radius: 0; border-radius: 0;
@ -327,25 +354,23 @@
z-index: 1; z-index: 1;
} }
// update z-index for arrow icon
& > .@{ant-prefix}-select > .@{ant-prefix}-select-arrow {
z-index: 1; // https://github.com/ant-design/ant-design/issues/20371
}
& > *:first-child, & > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector, & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input, & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
border-top-left-radius: @border-radius-base; border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base;
} }
& > *:last-child, & > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector, & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
border-right-width: @border-width-base; border-right-width: @border-width-base;
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base;
@ -355,107 +380,24 @@
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input { & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
vertical-align: top; vertical-align: top;
} }
}
}
.input-affix-wrapper(@inputClass) { .@{ant-prefix}-input-group-wrapper + .@{ant-prefix}-input-group-wrapper {
position: relative; margin-left: -1px;
display: inline-flex; .@{ant-prefix}-input-affix-wrapper {
border: @border-width-base @border-style-base @input-border-color; border-radius: 0;
border-radius: @border-radius-base; }
padding: @input-padding-vertical-base @input-padding-horizontal-base; }
width: 100%;
text-align: start;
background-color: @input-bg;
background-image: none;
color: @input-color;
font-size: @font-size-base;
line-height: @line-height-base;
&:hover { .@{ant-prefix}-input-group-wrapper:not(:last-child) {
.hover(); &.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
} & > .@{ant-prefix}-input-group-addon > .@{ant-prefix}-input-search-button {
border-radius: 0;
}
&-disabled { & > .@{ant-prefix}-input {
.disabled(); border-radius: @border-radius-base 0 0 @border-radius-base;
} }
}
&-focused {
.active();
}
// Size
&-lg {
.input-lg();
}
&-sm {
.input-sm();
}
.@{inputClass} {
position: relative;
text-align: inherit;
border: none;
padding: 0;
&:focus {
border: none;
outline: none;
box-shadow: none;
} }
} }
// 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 {
display: flex;
align-items: center;
color: @input-color;
white-space: nowrap;
:not(.anticon) {
line-height: @line-height-base;
}
}
.@{inputClass}-disabled ~ .@{inputClass}-suffix {
.anticon {
color: @disabled-color;
cursor: not-allowed;
}
}
.@{inputClass}-prefix {
margin-right: @input-affix-margin;
}
.@{inputClass}-suffix {
margin-left: @input-affix-margin;
}
}
.clear-icon() {
color: @disabled-color;
font-size: @font-size-sm;
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: pointer;
transition: color 0.3s;
margin: 0 @input-affix-margin;
&:hover {
color: @text-color-secondary;
}
&:active {
color: @text-color;
}
+ i {
margin-left: 6px;
}
} }

View File

@ -0,0 +1,205 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
&-wrapper {
&-rtl {
direction: rtl;
}
}
&-rtl {
direction: rtl;
}
}
// affix
@input-affix-margin: 4px;
.@{ant-prefix}-input {
&-affix-wrapper&-affix-wrapper-rtl {
> input.@{ant-prefix}-input {
border: none;
outline: none;
}
}
&-affix-wrapper-rtl {
.@{ant-prefix}-input-prefix {
margin: 0 0 0 @input-affix-margin;
}
.@{ant-prefix}-input-suffix {
margin: 0 @input-affix-margin 0 0;
}
}
&-textarea {
&-rtl {
direction: rtl;
}
&-rtl&-show-count::after {
text-align: left;
}
}
}
// allow-clear
.@{ant-prefix}-input-clear-icon {
&:last-child {
.@{ant-prefix}-input-affix-wrapper-rtl & {
margin-right: @input-affix-margin;
margin-left: 0;
}
}
.@{ant-prefix}-input-affix-wrapper-rtl & {
right: auto;
left: 8px;
}
}
// mixin
@input-rtl-cls: ~'@{ant-prefix}-input-rtl';
.active() {
.@{input-rtl-cls} & {
border-right-width: 0;
border-left-width: @border-width-base !important;
}
}
.hover() {
.@{input-rtl-cls} & {
border-right-width: 0;
border-left-width: @border-width-base !important;
}
}
.input() {
&-rtl {
direction: rtl;
}
}
// label input
.input-group(@inputClass) {
> .@{inputClass}-rtl:first-child,
&-rtl &-addon:first-child {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
&-addon:first-child {
.@{inputClass}-group-rtl & {
border-right: @border-width-base @border-style-base @input-border-color;
border-left: 0;
}
}
&-addon:last-child {
.@{inputClass}-group-rtl & {
border-right: 0;
border-left: @border-width-base @border-style-base @input-border-color;
}
}
> .@{inputClass}:last-child,
&-addon:last-child {
.@{inputClass}-group-rtl& {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.@{inputClass}-affix-wrapper {
&:not(:first-child) {
.@{inputClass}-group-rtl& {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
&:not(:last-child) {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
}
&&-compact {
& > *:not(:last-child) {
.@{inputClass}-group-rtl& {
margin-right: 0;
margin-left: -@border-width-base;
border-left-width: @border-width-base;
}
}
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-left-width: @border-width-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl {
margin-right: -1px;
margin-left: 0;
}
.@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) {
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
& > .@{ant-prefix}-input {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
}
}
}
// search-input
@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';
.@{search-prefix}-rtl {
direction: rtl;
.@{ant-prefix}-input {
&:hover,
&:focus {
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-right-color: @input-hover-border-color;
border-left-color: @border-color-base;
}
}
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-affix-wrapper {
&:hover,
&-focused {
border-right-color: @input-hover-border-color;
}
}
> .@{ant-prefix}-input-group-addon {
right: -1px;
left: auto;
.@{search-prefix}-button {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}

View File

@ -6,29 +6,66 @@
@search-prefix: ~'@{ant-prefix}-input-search'; @search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} { .@{search-prefix} {
&-icon { .@{ant-prefix}-input {
color: @text-color-secondary; &:hover,
cursor: pointer; &:focus {
transition: all 0.3s; border-color: @input-hover-border-color;
&:hover {
color: @input-icon-hover-color; + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-left-color: @input-hover-border-color;
}
} }
} }
&-enter-button { .@{ant-prefix}-input-affix-wrapper {
input { border-radius: 0;
border-right: 0; }
}
& + .@{ant-prefix}-input-group-addon, // fix slight height diff in Firefox:
input + .@{ant-prefix}-input-group-addon { // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
.@{ant-prefix}-input-lg {
line-height: @line-height-base - 0.0002;
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-group-addon:last-child {
left: -1px;
padding: 0; padding: 0;
border: 0; border: 0;
.@{search-prefix}-button { .@{search-prefix}-button {
border-top-left-radius: 0; padding-top: 0;
border-bottom-left-radius: 0; padding-bottom: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
.@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
color: @text-color-secondary;
&.@{ant-prefix}-btn-loading::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
} }
} }
} }
&-button {
height: @input-height-base;
&:hover,
&:focus {
z-index: 1;
}
}
&-large &-button {
height: @input-height-lg;
}
&-small &-button {
height: @input-height-sm;
}
} }

View File

@ -141,6 +141,7 @@
@outline-blur-size: 0; @outline-blur-size: 0;
@outline-width: 2px; @outline-width: 2px;
@outline-color: @primary-color; @outline-color: @primary-color;
@outline-fade: 20%;
@background-color-light: hsv(0, 0, 98%); // background of header and selected item @background-color-light: hsv(0, 0, 98%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%); // Default grey background color @background-color-base: hsv(0, 0, 96%); // Default grey background color
@ -377,16 +378,26 @@
// Input // Input
// --- // ---
@input-height-base: 32px; @input-height-base: @height-base;
@input-height-lg: 40px; @input-height-lg: @height-lg;
@input-height-sm: 24px; @input-height-sm: @height-sm;
@input-padding-horizontal: @control-padding-horizontal - 1px; @input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal; @input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg: @input-padding-horizontal; @input-padding-horizontal-lg: @input-padding-horizontal;
@input-padding-vertical-base: 4px; @input-padding-vertical-base: max(
@input-padding-vertical-sm: 0px; (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
@input-padding-vertical-lg: 6.5px; @border-width-base,
3px
);
@input-padding-vertical-sm: max(
(round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
@border-width-base,
0
);
@input-padding-vertical-lg: (
ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
) - @border-width-base;
@input-placeholder-color: hsv(0, 0, 75%); @input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color; @input-color: @text-color;
@input-icon-color: @input-color; @input-icon-color: @input-color;
@ -402,6 +413,7 @@
@input-disabled-bg: @disabled-bg; @input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0; @input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%); @input-icon-hover-color: fade(@black, 85%);
@input-disabled-color: @disabled-color;
// Mentions // Mentions
// --- // ---