ant-design/components/style/mixins/compact-item.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

171 lines
4.0 KiB
Plaintext

.compact-item-border-radius(@prefix-cls, @bordered-item-cls: null) {
& when (@bordered-item-cls = null) {
// border-radius
&-item:not(&-first-item):not(&-last-item).@{prefix-cls} {
border-radius: 0;
}
&-item.@{prefix-cls}&-first-item:not(&-item-rtl) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{prefix-cls}-sm & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&-item.@{prefix-cls}&-last-item:not(&-item-rtl) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.@{prefix-cls}-sm & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// ----------rtl for first item----------
&-item.@{prefix-cls}&-item-rtl&-first-item {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.@{prefix-cls}-sm & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// ----------rtl for last item----------
&-item.@{prefix-cls}&-item-rtl&-last-item {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{prefix-cls}-sm & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
& when (not (@bordered-item-cls = null)) {
// border-radius
&-item:not(&-first-item):not(&-last-item).@{prefix-cls} > .@{bordered-item-cls} {
border-radius: 0;
}
&-item&-first-item.@{prefix-cls}:not(&-item-rtl) > .@{bordered-item-cls} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{prefix-cls}-sm & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&-item&-last-item.@{prefix-cls}:not(&-item-rtl) > .@{bordered-item-cls} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.@{prefix-cls}-sm & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// ----------rtl for first item----------
&-item.@{prefix-cls}&-first-item&-item-rtl > .@{bordered-item-cls} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.@{prefix-cls}-sm & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// ----------rtl for last item----------
&-item.@{prefix-cls}&-last-item&-item-rtl > .@{bordered-item-cls} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{prefix-cls}-sm & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
}
.compact-item-border(@prefix-cls, @bordered-item-cls: null, @special-open-cls) {
& when (@bordered-item-cls = null) {
// border collapse
&-item:not(&-last-item):not(&-item-rtl) {
margin-right: -@border-width-base;
}
// rtl border collapse
&-item:not(&-last-item)&-item-rtl {
margin-left: -@border-width-base;
}
&-item {
&:hover,
&:focus,
&:active {
z-index: 2;
}
// Select has an extra focus className
& when (not (@special-item-cls = null)) {
&.@{special-item-cls} {
z-index: 2;
}
}
&[disabled] {
z-index: 0;
}
}
}
& when (not (@bordered-item-cls = null)) {
// border collapse
&-item:not(&-last-item) {
margin-right: -@border-width-base;
&.@{prefix-cls}-compact-item-rtl {
margin-right: 0;
margin-left: -@border-width-base;
}
}
&-item {
&:hover,
&:focus,
&:active {
> * {
z-index: 2;
}
}
// Select has an special focus-item
& when (not (@special-item-cls = null)) {
&.@{special-item-cls} > * {
z-index: 2;
}
}
&[disabled] > * {
z-index: 0;
}
}
}
}
.compact-item(@prefix-cls, @bordered-item-cls: null, @special-item-cls: null) {
&-compact {
.compact-item-border(@prefix-cls, @bordered-item-cls, @special-item-cls);
.compact-item-border-radius(@prefix-cls, @bordered-item-cls);
}
}