test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

style: add rtl.less of Select\Transfer\Upload (#22307)

Browse Source
This commit is contained in:
xrkffgg 2020-03-17 17:43:14 +08:00 committed by GitHub
parent eea959b2e9
commit 862cbbceec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 423 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/select/style/index.less
View File

@ -4,6 +4,7 @@
@import './single';
@import './multiple';
@import './rtl';
@select-prefix-cls: ~'@{ant-prefix}-select';
@select-height-without-border: @input-height-base - 2 * @border-width-base;
@ -60,10 +61,6 @@
.hover();
}
&-rtl {
direction: rtl;
}
// ======================== Selection ========================
&-selection-item {
flex: 1;
@ -110,11 +107,6 @@
transform: rotate(180deg);
}
}
.@{select-prefix-cls}-rtl & {
right: initial;
left: @control-padding-horizontal - 1px;
}
}
// ========================== Clear ==========================
@ -148,20 +140,11 @@
.@{select-prefix-cls}:hover & {
opacity: 1;
}
.@{select-prefix-cls}-rtl & {
right: initial;
left: @control-padding-horizontal - 1px;
}
}
// ========================== Popup ==========================
&-dropdown {
.reset-component;
&-rtl {
direction: rtl;
}
position: absolute;
top: -9999px;
left: -9999px;

31
components/select/style/multiple.less
View File

@ -1,4 +1,5 @@
@import './index';
@import './multiple.rtl.less';
@select-multiple-item-border-width: 1px;
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
@ -65,11 +66,6 @@
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
user-select: none;
.@{select-prefix-cls}-rtl& {
margin-right: 0;
margin-left: @input-padding-vertical-base;
text-align: right;
}
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
&-content {
display: inline-block;
@ -77,12 +73,6 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.@{select-prefix-cls}-rtl& {
margin-right: 0;
margin-left: @padding-xs / 2;
text-align: right;
}
}
&-remove {
@ -106,11 +96,6 @@
position: relative;
margin-left: @select-multiple-padding / 2;
.@{select-prefix-cls}-rtl& {
margin-right: @select-multiple-padding / 2;
margin-left: @input-padding-vertical-base;
}
&-input,
&-mirror {
font-family: @font-family;
@ -129,11 +114,6 @@
z-index: 999;
white-space: nowrap;
visibility: hidden;
.@{select-prefix-cls}-rtl& {
right: 0;
left: auto;
}
}
}
@ -145,11 +125,6 @@
left: @input-padding-horizontal;
transform: translateY(-50%);
transition: all 0.3s;
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal;
left: auto;
}
}
// ============================================================
@ -189,10 +164,6 @@
&.@{select-prefix-cls}-sm {
.@{select-prefix-cls}-selection-placeholder {
left: @input-padding-horizontal-sm;
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-sm;
}
}
}
}

69
components/select/style/multiple.rtl.less Normal file
View File

@ -0,0 +1,69 @@
@import './index';
@select-multiple-item-border-width: 1px;
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
@select-multiple-padding: max(
@input-padding-vertical-base - @select-multiple-item-border-width -
@select-multiple-item-spacing-half,
0
);
/**
* Do not merge `height` & `line-height` under style with `selection` & `search`,
* since chrome may update to redesign with its align logic.
*/
.@{select-prefix-cls}-multiple {
// ======================== Selections ========================
.@{select-prefix-cls}-selection-item {
.@{select-prefix-cls}-rtl& {
margin-right: 0;
margin-left: @input-padding-vertical-base;
text-align: right;
}
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
&-content {
.@{select-prefix-cls}-rtl& {
margin-right: 0;
margin-left: @padding-xs / 2;
text-align: right;
}
}
}
// ========================== Input ==========================
.@{select-prefix-cls}-selection-search {
.@{select-prefix-cls}-rtl& {
margin-right: @select-multiple-padding / 2;
margin-left: @input-padding-vertical-base;
}
&-mirror {
.@{select-prefix-cls}-rtl& {
right: 0;
left: auto;
}
}
}
// ======================= Placeholder =======================
.@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal;
left: auto;
}
}
// ============================================================
// == Size ==
// ============================================================
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
.@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-sm;
}
}
}
}

34
components/select/style/rtl.less Normal file
View File

@ -0,0 +1,34 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@select-prefix-cls: ~'@{ant-prefix}-select';
.@{select-prefix-cls} {
&-rtl {
direction: rtl;
}
// ========================== Arrow ==========================
&-arrow {
.@{select-prefix-cls}-rtl & {
right: initial;
left: @control-padding-horizontal - 1px;
}
}
// ========================== Clear ==========================
&-clear {
.@{select-prefix-cls}-rtl & {
right: initial;
left: @control-padding-horizontal - 1px;
}
}
// ========================== Popup ==========================
&-dropdown {
&-rtl {
direction: rtl;
}
}
}

28
components/select/style/single.less
View File

@ -1,4 +1,5 @@
@import './index';
@import './single.rtl.less';
@selection-item-padding: ceil(@font-size-base * 1.25);
@ -32,11 +33,6 @@
line-height: @select-height-without-border;
}
}
.@{select-prefix-cls}-rtl& {
right: 0;
left: 9px;
text-align: right;
}
}
// For common baseline align
@ -55,21 +51,11 @@
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
right: @input-padding-horizontal-base + @font-size-base;
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-base;
left: @input-padding-horizontal-base + @font-size-base;
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
padding-right: @selection-item-padding;
.@{select-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @selection-item-padding;
}
}
// Opacity selection if open
@ -90,9 +76,6 @@
height: @input-height-base;
padding: 0 @input-padding-horizontal-base;
.@{select-prefix-cls}-rtl& {
padding: 0 @input-padding-horizontal-base;
}
.@{select-prefix-cls}-selection-search-input {
height: @select-height-without-border;
}
@ -166,20 +149,11 @@
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
right: @input-padding-horizontal-sm + @font-size-base * 1.5;
.@{select-prefix-cls}-rtl& {
right: 0;
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
padding-right: @font-size-base * 1.5;
.@{select-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @font-size-base * 1.5;
}
}
}
}

69
components/select/style/single.rtl.less Normal file
View File

@ -0,0 +1,69 @@
@import './index';
@selection-item-padding: ceil(@font-size-base * 1.25);
.@{select-prefix-cls}-single {
// ========================= Selector =========================
.@{select-prefix-cls}-selector {
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
right: 0;
left: 9px;
text-align: right;
}
}
}
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-base;
left: @input-padding-horizontal-base + @font-size-base;
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @selection-item-padding;
}
}
// ========================== Input ==========================
// We only change the style of non-customize input which is only support by `combobox` mode.
// Not customize
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
.@{select-prefix-cls}-rtl& {
padding: 0 @input-padding-horizontal-base;
}
}
}
// ============================================================
// == Size ==
// ============================================================
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
&:not(.@{select-prefix-cls}-customize-input) {
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
.@{select-prefix-cls}-rtl& {
right: 0;
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @font-size-base * 1.5;
}
}
}
}
}

43
components/transfer/style/index.less
View File

@ -2,6 +2,7 @@
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@import './customize.less';
@import './rtl.less';
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
@ -14,10 +15,6 @@
position: relative;
&-rtl {
direction: rtl;
}
&-disabled {
.@{transfer-prefix-cls}-list {
background: @transfer-disabled-bg;
@ -51,11 +48,6 @@
line-height: @input-height-base;
text-align: center;
.@{transfer-prefix-cls}-rtl & {
right: auto;
left: 12px;
}
.@{iconfont-css-prefix} {
color: @disabled-color;
transition: all 0.3s;
@ -83,27 +75,13 @@
border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
.@{transfer-prefix-cls}-rtl & {
right: 0;
left: auto;
}
&-title {
position: absolute;
right: 12px;
.@{transfer-prefix-cls}-rtl & {
right: auto;
left: 12px;
}
}
.@{ant-prefix}-checkbox-wrapper + span {
padding-left: 8px;
.@{transfer-prefix-cls}-rtl & {
padding-right: 8px;
padding-left: 0;
}
}
}
@ -118,11 +96,6 @@
left: 0;
width: 100%;
padding: 12px;
.@{transfer-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
}
@ -145,18 +118,9 @@
transition: all 0.3s;
> span {
padding-right: 0;
.@{transfer-prefix-cls}-rtl & {
padding-left: 0;
}
}
&-text {
padding-left: 8px;
.@{transfer-prefix-cls}-rtl & {
padding-right: 8px;
padding-left: 0;
}
}
}
@ -197,11 +161,6 @@
width: 100%;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
.@{transfer-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
}

74
components/transfer/style/rtl.less Normal file
View File

@ -0,0 +1,74 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
.@{transfer-prefix-cls} {
&-rtl {
direction: rtl;
}
&-list {
&-search {
&-action {
.@{transfer-prefix-cls}-rtl & {
right: auto;
left: 12px;
}
}
}
&-header {
.@{transfer-prefix-cls}-rtl & {
right: 0;
left: auto;
}
&-title {
.@{transfer-prefix-cls}-rtl & {
right: auto;
left: 12px;
}
}
.@{ant-prefix}-checkbox-wrapper + span {
.@{transfer-prefix-cls}-rtl & {
padding-right: 8px;
padding-left: 0;
}
}
}
&-body {
&-search-wrapper {
.@{transfer-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
}
&-content {
&-item {
> span {
.@{transfer-prefix-cls}-rtl & {
padding-left: 0;
}
}
&-text {
.@{transfer-prefix-cls}-rtl & {
padding-right: 8px;
padding-left: 0;
}
}
}
}
&-footer {
.@{transfer-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
}
}

111
components/upload/style/index.less
View File

@ -1,5 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './rtl';
@upload-prefix-cls: ~'@{ant-prefix}-upload';
@upload-item: ~'@{ant-prefix}-upload-list-item';
@ -11,10 +12,6 @@
outline: 0;
&-rtl {
direction: rtl;
}
p {
margin: 0;
}
@ -52,11 +49,6 @@
cursor: pointer;
transition: border-color 0.3s ease;
.@{upload-prefix-cls}-rtl& {
float: right;
margin-right: 0;
margin-left: 8px;
}
> .@{upload-prefix-cls} {
display: table-cell;
width: 100%;
@ -153,19 +145,9 @@
&:hover {
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
padding-right: 14px;
.@{upload-prefix-cls}-list-rtl & {
padding-right: 22px;
padding-left: 14px;
}
}
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
padding-right: 28px;
.@{upload-prefix-cls}-list-rtl & {
padding-right: 22px;
padding-left: 28px;
}
}
}
}
@ -181,19 +163,10 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.@{upload-prefix-cls}-list-rtl & {
padding-right: @font-size-base + 8px;
padding-left: 0;
}
}
&-name-icon-count-1 {
padding-right: 14px;
.@{upload-prefix-cls}-list-rtl & {
padding-left: 14px;
}
}
&-card-actions {
@ -201,11 +174,6 @@
right: 0;
opacity: 0;
.@{upload-prefix-cls}-list-rtl & {
right: auto;
left: 0;
}
&.picture {
top: 25px;
line-height: 1;
@ -214,11 +182,6 @@
.@{iconfont-css-prefix} {
padding-right: 6px;
color: @upload-actions-color;
.@{upload-prefix-cls}-list-rtl & {
padding-right: 0;
padding-left: 5px;
}
}
}
@ -227,10 +190,6 @@
padding: 0 12px 0 4px;
transition: background-color 0.3s;
.@{upload-prefix-cls}-list-rtl & {
padding: 0 4px 0 12px;
}
> span {
display: block;
width: 100%;
@ -260,11 +219,6 @@
opacity: 0;
transition: all 0.3s;
.@{upload-prefix-cls}-list-rtl & {
right: auto;
left: 4px;
}
&:hover {
color: @text-color;
}
@ -291,11 +245,6 @@
&-error &-card-actions {
.@{iconfont-css-prefix} {
color: @error-color;
.@{upload-prefix-cls}-list-rtl & {
padding-right: 0;
padding-left: 5px;
}
}
opacity: 1;
}
@ -307,11 +256,6 @@
padding-left: @font-size-base + 12px;
font-size: @font-size-base;
line-height: 0;
.@{upload-prefix-cls}-list-rtl & {
padding-right: @font-size-base + 12px;
padding-left: 0;
}
}
}
@ -356,11 +300,6 @@
.@{iconfont-css-prefix} {
font-size: 26px;
}
.@{upload-prefix-cls}-list-rtl& {
right: 8px;
left: auto;
}
}
.@{upload-item}-icon {
@ -373,12 +312,6 @@
.@{iconfont-css-prefix} {
font-size: 26px;
}
.@{upload-prefix-cls}-list-rtl& {
right: 50%;
left: auto;
transform: translate(50%, -50%);
}
}
.@{upload-item}-image {
@ -404,30 +337,14 @@
white-space: nowrap;
text-overflow: ellipsis;
transition: all 0.3s;
.@{upload-prefix-cls}-list-rtl& {
margin: 0 8px 0 0;
padding-right: 48px;
padding-left: 8px;
}
}
.@{upload-item}-name-icon-count-1 {
padding-right: 18px;
.@{upload-prefix-cls}-list-rtl& {
padding-right: 48px;
padding-left: 18px;
}
}
.@{upload-item}-name-icon-count-2 {
padding-right: 36px;
.@{upload-prefix-cls}-list-rtl& {
padding-right: 48px;
padding-left: 36px;
}
}
.@{upload-item}-uploading .@{upload-item}-name {
@ -439,11 +356,6 @@
width: ~'calc(100% - 24px)';
margin-top: 0;
padding-left: 56px;
.@{upload-prefix-cls}-list-rtl& {
padding-right: 56px;
padding-left: 0;
}
}
.@{iconfont-css-prefix}-close {
@ -452,11 +364,6 @@
right: 8px;
line-height: 1;
opacity: 1;
.@{upload-prefix-cls}-list-rtl& {
right: auto;
left: 8px;
}
}
}
@ -475,11 +382,6 @@
width: @upload-picture-card-size;
height: @upload-picture-card-size;
margin: 0 8px 8px 0;
.@{upload-prefix-cls}-list-rtl& {
float: right;
margin: 0 0 8px 8px;
}
}
.@{upload-item}-info {
@ -513,12 +415,6 @@
opacity: 0;
transition: all 0.3s;
.@{upload-prefix-cls}-list-rtl& {
right: 50%;
left: auto;
transform: translate(50%, -50%);
}
.@{iconfont-css-prefix}-eye,
.@{iconfont-css-prefix}-download,
.@{iconfont-css-prefix}-delete {
@ -561,11 +457,6 @@
position: absolute;
bottom: 10px;
display: block;
.@{upload-prefix-cls}-list-rtl& {
margin: 8px 0 0;
padding: 0;
}
}
.@{upload-item}-uploading {

172
components/upload/style/rtl.less Normal file
View File

@ -0,0 +1,172 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@upload-prefix-cls: ~'@{ant-prefix}-upload';
@upload-item: ~'@{ant-prefix}-upload-list-item';
.@{upload-prefix-cls} {
&-rtl {
direction: rtl;
}
&&-select-picture-card {
.@{upload-prefix-cls}-rtl& {
float: right;
margin-right: 0;
margin-left: 8px;
}
}
}
.@{upload-prefix-cls}-list {
&-item-list-type-text {
&:hover {
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
.@{upload-prefix-cls}-list-rtl & {
padding-right: 22px;
padding-left: 14px;
}
}
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
.@{upload-prefix-cls}-list-rtl & {
padding-right: 22px;
padding-left: 28px;
}
}
}
}
&-item {
&-name {
.@{upload-prefix-cls}-list-rtl & {
padding-right: @font-size-base + 8px;
padding-left: 0;
}
}
&-name-icon-count-1 {
.@{upload-prefix-cls}-list-rtl & {
padding-left: 14px;
}
}
&-card-actions {
.@{upload-prefix-cls}-list-rtl & {
right: auto;
left: 0;
}
.@{iconfont-css-prefix} {
.@{upload-prefix-cls}-list-rtl & {
padding-right: 0;
padding-left: 5px;
}
}
}
&-info {
.@{upload-prefix-cls}-list-rtl & {
padding: 0 4px 0 12px;
}
}
.@{iconfont-css-prefix}-close {
.@{upload-prefix-cls}-list-rtl & {
right: auto;
left: 4px;
}
}
&-error &-card-actions {
.@{iconfont-css-prefix} {
.@{upload-prefix-cls}-list-rtl & {
padding-right: 0;
padding-left: 5px;
}
}
}
&-progress {
.@{upload-prefix-cls}-list-rtl & {
padding-right: @font-size-base + 12px;
padding-left: 0;
}
}
}
&-picture,
&-picture-card {
.@{upload-item}-thumbnail {
.@{upload-prefix-cls}-list-rtl& {
right: 8px;
left: auto;
}
}
.@{upload-item}-icon {
.@{upload-prefix-cls}-list-rtl& {
right: 50%;
left: auto;
transform: translate(50%, -50%);
}
}
.@{upload-item}-name {
.@{upload-prefix-cls}-list-rtl& {
margin: 0 8px 0 0;
padding-right: 48px;
padding-left: 8px;
}
}
.@{upload-item}-name-icon-count-1 {
.@{upload-prefix-cls}-list-rtl& {
padding-right: 48px;
padding-left: 18px;
}
}
.@{upload-item}-name-icon-count-2 {
.@{upload-prefix-cls}-list-rtl& {
padding-right: 48px;
padding-left: 36px;
}
}
.@{upload-item}-progress {
.@{upload-prefix-cls}-list-rtl& {
padding-right: 56px;
padding-left: 0;
}
}
.@{iconfont-css-prefix}-close {
.@{upload-prefix-cls}-list-rtl& {
right: auto;
left: 8px;
}
}
}
&-picture-card {
.@{upload-item} {
.@{upload-prefix-cls}-list-rtl& {
float: right;
margin: 0 0 8px 8px;
}
}
.@{upload-item}-actions {
.@{upload-prefix-cls}-list-rtl& {
right: 50%;
left: auto;
transform: translate(50%, -50%);
}
}
.@{upload-item}-file + .@{upload-item}-name {
.@{upload-prefix-cls}-list-rtl& {
margin: 8px 0 0;
padding: 0;
}
}
}
}