mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

style: fix cascader RTL small icon (#22191)

Browse Source
This commit is contained in:
xrkffgg 2020-03-13 17:30:51 +08:00 committed by GitHub
parent b032344d81
commit 8d2c959711
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/cascader/style/index.less
View File

@ -3,8 +3,6 @@
@import '../../input/style/mixin';
@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl';
@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl';
.@{cascader-prefix-cls} {
.reset-component;
@ -19,12 +17,6 @@
// because input.less will compile after cascader.less
background-color: transparent !important;
cursor: pointer;
.@{picker-rtl-cls} & {
padding-right: @input-padding-horizontal-base;
padding-left: 24px;
text-align: right;
}
}
&-picker-show-search &-input.@{ant-prefix}-input {
@ -80,11 +72,6 @@
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
.@{picker-rtl-cls} & {
padding: 0 @control-padding-horizontal 0 20px;
text-align: right;
}
}
&-clear {
@ -105,11 +92,6 @@
&:hover {
color: @text-color-secondary;
}
.@{picker-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
&:hover &-clear {
@ -132,11 +114,6 @@
&&-expand {
transform: rotate(180deg);
}
.@{picker-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
}
@ -148,11 +125,6 @@
&-picker-small &-picker-clear,
&-picker-small &-picker-arrow {
right: @control-padding-horizontal-sm;
.@{picker-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
&-menus {
@ -215,17 +187,6 @@
&:only-child {
border-radius: @border-radius-base;
}
&-rtl {
direction: rtl;
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
&:last-child {
margin-right: 0;
margin-left: -1px;
border-left-color: transparent;
border-radius: 0 0 4px 4px;
}
}
}
&-menu-item {
padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
@ -253,11 +214,6 @@
&-expand {
position: relative;
padding-right: 24px;
.@{menu-rtl-cls} & {
padding-right: @control-padding-horizontal;
padding-left: 24px;
}
}
&-expand &-expand-icon,
@ -267,11 +223,6 @@
position: absolute;
right: @control-padding-horizontal;
color: @text-color-secondary;
.@{menu-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
& &-keyword {

1
components/cascader/style/index.tsx
View File

@ -1,5 +1,6 @@
import '../../style/index.less';
import './index.less';
import './rtl.less';
// style dependencies
import '../../empty/style';

79
components/cascader/style/rtl.less Normal file
View File

@ -0,0 +1,79 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl';
@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl';
.@{cascader-prefix-cls} {
&-input.@{ant-prefix}-input {
.@{picker-rtl-cls} & {
padding-right: @input-padding-horizontal-base;
padding-left: 24px;
text-align: right;
}
}
&-picker {
&-label {
.@{picker-rtl-cls} & {
padding: 0 @control-padding-horizontal 0 20px;
text-align: right;
}
}
&-clear {
.@{picker-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
&-arrow {
.@{picker-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
}
&-picker-small &-picker-clear,
&-picker-small &-picker-arrow {
.@{picker-rtl-cls}& {
right: auto;
left: @control-padding-horizontal-sm;
}
}
&-menu {
&-rtl {
direction: rtl;
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
&:last-child {
margin-right: 0;
margin-left: -1px;
border-left-color: transparent;
border-radius: 0 0 4px 4px;
}
}
}
&-menu-item {
&-expand {
.@{menu-rtl-cls} & {
padding-right: @control-padding-horizontal;
padding-left: 24px;
}
}
&-expand &-expand-icon,
&-loading-icon {
.@{menu-rtl-cls} & {
right: auto;
left: @control-padding-horizontal;
}
}
}
}