ant-design/components/input/style/search-input.less
Yuki Zhang c3e51506cc
feat: add Space.Compact (#37652)
* feat: add Space.Compact

* feat: update input style

* feat: add CompactItem for context memoize

* feat: add demo

* feat: update button style

* feat: update input style

* feat: 提取 getCompactClassNames 公用方法

* feat: update button style

* feat: update picker

* feat: add block prop for Space.Compact

* feat: use Space.Compact for Input#addonBefore/After

* feat: update addon

* refactor: compact

* feat: update

* feat: update

* feat: migrate styles to compact for new Input/Input.Search

* feat: organize input demo

* feat: add more button compact demo

* feat: resolve select border collapse

* feat: fix input addon select style

* feat: add input addon demo in Space

* feat: add  useCompactItemContext hook

* feat: update compact-item style

* feat: rollback input#addon implements

* feat: rollback input#addon and input.search style

* feat: select border collapse

* feat: add Space.Compact demo

* feat: Space.Compact vertical for Button

* refactor: useCompactItemContext

* feat: update Button vertical demo

* feat: rtl for compact mixin

* feat: rtl for compact button

* feat: input rtl

* feat: add docs for Space.Compact

* test: add some tests for Space.Compact

* test: add tests

* feat: select style

* feat: handle select focus style

* feat: add useCompactItemContext for Picker and Cascader

* style: add compact-item style for cascader

* feat: support nested Space.Compact

* style: Input.Search in Space.Compact

* chore: clean

* feat: add useCompactItemContext for TreeSelect

* fix: lint issues

* fix: style lint

* docs: update demos for Space.Compact

* docs: update demo

* fix: add deps-lint-skip for space

* fix: add deps-lint-skip for space

* fix: handle edge case for useCompactItemContext

* test: add search test case

* chore: + bundlesize

* style: merge button compact style into one file

* style: improve style for nested compact

* fix: stylelint

* docs: update Space.Compact docs

* test: update demo snapshot

* test: update input debug test snapshot

* docs: update doccs for Space.Compact

* test: improve test cases for Compact

* docs: clean demos for Compact

* refactor: improve Space.Compact

* fix: add useCompactItemContext for Input.Search

* style: improve compact border-radius implementation

* refactor: use context to make nested compact works

* fix: input-number focused style

* refactor: remove useless style

* refactor: improve style for vertical compact

* test: update snapshot

* test: update snapshot for input

* refactor: improve compact-item-border-radius

* fix: search group in RTL

* style: improve style for button compact

* style: use after

* fix: stylelint

* chore: update snapshot

* style: improve button compact

* refactor: improve btn-icon-only style in compact
2022-10-18 16:23:10 +08:00

118 lines
2.7 KiB
Plaintext

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../button/style/mixin';
@import './mixin';
@search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} {
.@{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;
}
}
}
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
// 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 {
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;
}
// ===================== Compact Item Customized Styles =====================
&.@{input-prefix-cls}-compact-item {
&:not(.@{input-prefix-cls}-compact-item-rtl) {
&:not(.@{input-prefix-cls}-compact-last-item) {
.@{input-prefix-cls}-group-addon {
.@{input-prefix-cls}-search-button {
margin-right: -@border-width-base;
border-radius: 0;
}
}
}
}
&:not(.@{input-prefix-cls}-compact-first-item) {
.@{input-prefix-cls},
.@{input-prefix-cls}-affix-wrapper {
border-radius: 0;
}
}
> .@{input-prefix-cls}-group-addon .@{input-prefix-cls}-search-button,
> .@{input-prefix-cls},
.@{input-prefix-cls}-affix-wrapper {
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
> .@{input-prefix-cls}-affix-wrapper-focused {
z-index: 2;
}
}
// ===================== For RTL Compact Item Customized Styles =====================
&.@{input-prefix-cls}-compact-item-rtl {
&:not(.@{input-prefix-cls}-compact-last-item) {
.@{input-prefix-cls}-group-addon:last-child {
.@{input-prefix-cls}-search-button {
margin-left: -@border-width-base;
border-radius: 0;
}
}
}
}
}