github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/input/style/IE11.less Normal file
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;
}
}
}
}

13
components/input/style/affix.less
View File

@ -8,6 +8,19 @@
.input();
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 {
.@{ant-prefix}-input[disabled] {
background: transparent;

42
components/input/style/allow-clear.less Normal file
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;
}
}

105
components/input/style/index.less
View File

@ -1,77 +1,60 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './affix';
@import './mixin';
@import './affix';
@import './allow-clear';
// Input styles
.@{ant-prefix}-input {
.reset-component();
.input();
}
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
.reset-component();
.input-group(~'@{ant-prefix}-input');
&-wrapper {
display: inline-block;
width: 100%;
text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
//== Style for input-group: input with label, with button or dropdown...
&-group {
.reset-component();
.input-group(~'@{ant-prefix}-input');
&-wrapper {
display: inline-block;
width: 100%;
text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
}
}
}
// Input with affix: prefix or suffix
.@{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;
&-password-icon {
color: @text-color-secondary;
text-align: right;
content: attr(data-count);
cursor: pointer;
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 './rtl';
@import './IE11';

0
components/input/style/index.ts → components/input/style/index.tsx
View File

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

@ -1,8 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@input-affix-margin: 4px;
@input-affix-width: 19px;
@input-affix-with-clear-btn-width: 38px;
// size mixins for input
@ -18,10 +16,15 @@
// input status
// == when focus or actived
.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;
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
@ -31,7 +34,7 @@
}
.disabled() {
color: @disabled-color;
color: @input-disabled-color;
background-color: @input-disabled-bg;
cursor: not-allowed;
opacity: 1;
@ -46,6 +49,7 @@
position: relative;
display: inline-block;
width: 100%;
min-width: 0;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
color: @input-color;
font-size: @font-size-base;
@ -61,7 +65,8 @@
.hover();
}
&:focus {
&:focus,
&-focused {
.active();
}
@ -73,6 +78,19 @@
.disabled();
}
&-borderless {
&,
&:hover,
&:focus,
&-focused,
&-disabled,
&[disabled] {
background-color: transparent;
border: none;
box-shadow: none;
}
}
// Reset height for `textarea`s
textarea& {
max-width: 100%; // prevent textearea resize from coming out of its container
@ -151,6 +169,9 @@
&:hover {
z-index: 1;
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
@ -262,6 +272,22 @@
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 {
display: block;
.clearfix();
@ -293,6 +319,10 @@
display: inline-flex;
}
& > .@{ant-prefix}-picker-range {
display: inline-flex;
}
& > *:not(:last-child) {
margin-right: -@border-width-base;
border-right-width: @border-width-base;
@ -305,11 +335,8 @@
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete .@{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 {
border-right-width: @border-width-base;
border-radius: 0;
@ -327,25 +354,23 @@
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,
& > .@{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}-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 {
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
& > *:last-child,
& > .@{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-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 {
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
@ -355,107 +380,24 @@
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
vertical-align: top;
}
}
}
.input-affix-wrapper(@inputClass) {
position: relative;
display: inline-flex;
border: @border-width-base @border-style-base @input-border-color;
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;
.@{ant-prefix}-input-group-wrapper + .@{ant-prefix}-input-group-wrapper {
margin-left: -1px;
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
}
&:hover {
.hover();
}
.@{ant-prefix}-input-group-wrapper:not(:last-child) {
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
& > .@{ant-prefix}-input-group-addon > .@{ant-prefix}-input-search-button {
border-radius: 0;
}
&-disabled {
.disabled();
}
&-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;
& > .@{ant-prefix}-input {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}
// 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;
}
}

205
components/input/style/rtl.less Normal file
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;
}
}
}
}

65
components/input/style/search-input.less
View File

@ -6,29 +6,66 @@
@search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} {
&-icon {
color: @text-color-secondary;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
.@{ant-prefix}-input {
&:hover,
&:focus {
border-color: @input-hover-border-color;
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-left-color: @input-hover-border-color;
}
}
}
&-enter-button {
input {
border-right: 0;
}
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
& + .@{ant-prefix}-input-group-addon,
input + .@{ant-prefix}-input-group-addon {
// fix slight height diff in Firefox:
// 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;
border: 0;
.@{search-prefix}-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-top: 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;
}
}

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

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