refactor: input
parent
07ee749023
commit
dddb55f47e
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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';
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
// ---
|
// ---
|
||||||
|
|
Loading…
Reference in New Issue