@arco-design/mobile-react 2.27.5 → 2.28.0

package/dist/style.css

@@ -327,11 +327,12 @@ samp {
 .arco-tab-cell.vertical.tag-divide {
   flex: 1;
 }
-.arco-tab-cell.vertical:not(.custom).line {
+.arco-tab-cell.vertical:not(.custom).line:not(.last) {
   margin-right:  0.8rem ;
 }
-.arco-tab-cell.vertical:not(.custom).line.last {
-  margin-right: 0;
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).line:not(.last) {
+  margin-right: initial;
+  margin-left:  0.8rem ;
 }
 .arco-tab-cell.vertical:not(.custom).line.active,
 .arco-tab-cell.vertical:not(.custom).line-divide.active {
@@ -366,29 +367,53 @@ samp {
 .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
   border-right: 1PX solid #165dff ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
+  border-right: initial;
+  border-left: 1PX solid #165dff ;
+}
 .arco-tab-cell.vertical:not(.custom).card:first-of-type {
   border-top-left-radius:  2PX ;
   border-bottom-left-radius:  2PX ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
+  border-top-left-radius: initial;
+  border-top-right-radius:  2PX ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
+  border-bottom-left-radius: initial;
+  border-bottom-right-radius:  2PX ;
+}
 .arco-tab-cell.vertical:not(.custom).card:last-of-type {
   border-top-right-radius:  2PX ;
   border-bottom-right-radius:  2PX ;
 }
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
+  border-top-right-radius: initial;
+  border-top-left-radius:  2PX ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
+  border-bottom-right-radius: initial;
+  border-bottom-left-radius:  2PX ;
+}
 .arco-tab-cell.vertical:not(.custom).card.android,
 .arco-tab-cell.vertical:not(.custom).tag-divide.android {
   padding-top: 0.04rem;
 }
 .arco-tab-cell.vertical:not(.custom).tag,
 .arco-tab-cell.vertical:not(.custom).tag-divide {
-  margin-right:  0.32rem ;
   padding:  0 0.32rem ;
   border-radius: 2rem;
   background:  #f7f8fA ;
   color:  #1d2129 ;
 }
-.arco-tab-cell.vertical:not(.custom).tag.last,
-.arco-tab-cell.vertical:not(.custom).tag-divide.last {
-  margin-right: 0;
+.arco-tab-cell.vertical:not(.custom).tag:not(.last),
+.arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
+  margin-right:  0.32rem ;
+}
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag:not(.last),
+[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
+  margin-right: initial;
+  margin-left:  0.32rem ;
 }
 .arco-tab-cell.vertical:not(.custom).tag.active,
 .arco-tab-cell.vertical:not(.custom).tag-divide.active {
@@ -620,6 +645,9 @@ samp {
   -webkit-box-orient: vertical;
   white-space: normal;
 }
+[dir="rtl"] .arco-cell .cell-content .cell-text {
+  text-align: left;
+}
 .arco-cell .cell-label-icon {
   margin-right:  0.24rem ;
   font-size: 0;
@@ -637,6 +665,9 @@ samp {
   margin-left:  0.16rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  transform: scale(-1);
+}
 [dir="rtl"] .arco-cell .cell-arrow-icon {
   margin-left: initial;
   margin-right:  0.16rem ;
@@ -1503,10 +1534,22 @@ samp {
   margin-left:  -8PX ;
   margin-top:  -8PX ;
 }
+[dir="rtl"] .arco-badge-absolute {
+  left: initial;
+  right: 100%;
+}
+[dir="rtl"] .arco-badge-absolute {
+  margin-left: initial;
+  margin-right:  -8PX ;
+}
 .arco-badge-absolute.arco-badge-dot {
   margin-left:  -4PX ;
   margin-top:  -4PX ;
 }
+[dir="rtl"] .arco-badge-absolute.arco-badge-dot {
+  margin-left: initial;
+  margin-right:  -4PX ;
+}
 
 .arco-button {
   cursor: pointer;
@@ -1715,6 +1758,10 @@ samp {
 .arco-button-text-has-icon {
   margin-left:  0.08rem ;
 }
+[dir="rtl"] .arco-button-text-has-icon {
+  margin-left: initial;
+  margin-right:  0.08rem ;
+}
 .arco-button-loading-icon {
   display: inline-block;
   vertical-align: middle;
@@ -1950,6 +1997,10 @@ samp {
 .arco-checkbox .checkbox-icon + .checkbox-text {
   margin-left:  0.16rem ;
 }
+[dir="rtl"] .arco-checkbox .checkbox-icon + .checkbox-text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-checkbox.disabled .checkbox-text {
   opacity:  0.5 ;
 }
@@ -1963,10 +2014,19 @@ samp {
 .arco-checkbox-group .arco-checkbox:not(:last-child) {
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child) {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-checkbox-group .arco-checkbox:not(:last-child).block,
 .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
   margin-right: 0;
 }
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).block,
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
+  margin-right: initial;
+  margin-left: 0;
+}
 
 .arco-circle-progress {
   position: relative;
@@ -2854,6 +2914,10 @@ samp {
   padding-right:  0.32rem ;
   width:  1.92rem ;
 }
+[dir="rtl"] .arco-form-label-item {
+  padding-right: initial;
+  padding-left:  0.32rem ;
+}
 .arco-form-label-item-required-asterisk {
   position: absolute;
   left: -0.6em;
@@ -2862,6 +2926,10 @@ samp {
   line-height:  1.08rem ;
   color:  #f53f3f ;
 }
+[dir="rtl"] .arco-form-label-item-required-asterisk {
+  left: initial;
+  right: -0.6em;
+}
 .disabled .arco-form-label-item {
   color:  #c9cdd4 ;
 }
@@ -2893,6 +2961,10 @@ samp {
 .arco-form-item-message svg {
   margin-right: 0.08rem;
 }
+[dir="rtl"] .arco-form-item-message svg {
+  margin-right: initial;
+  margin-left: 0.08rem;
+}
 .arco-form-item-error-message {
   color:  #f53f3f ;
 }
@@ -2905,6 +2977,10 @@ samp {
 .arco-form-item.arco-form-item-vertical .arco-input-wrap {
   padding-left: 0;
 }
+[dir="rtl"] .arco-form-item.arco-form-item-vertical .arco-input-wrap {
+  padding-left: initial;
+  padding-right: 0;
+}
 .arco-form-item.arco-form-item-vertical .arco-form-label-item {
   width: auto;
   margin-top: 16px;
@@ -4531,6 +4607,10 @@ samp {
 .arco-radio .radio-icon + .radio-text {
   margin-left:  0.16rem ;
 }
+[dir="rtl"] .arco-radio .radio-icon + .radio-text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-radio.disabled .radio-text {
   opacity:  0.5 ;
 }
@@ -4544,6 +4624,10 @@ samp {
 .arco-radio-group .arco-radio:not(:last-child, .block) {
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-radio-group .arco-radio:not(:last-child, .block) {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 
 .arco-rate {
   display: inline-flex;
@@ -4579,6 +4663,9 @@ samp {
   position: absolute;
   z-index: 1;
 }
+[dir="rtl"] .arco-rate-icon.half-active {
+  transform: scaleX(-1);
+}
 .arco-rate-icon-click-half {
   width: 50%;
   height: 100%;
@@ -5375,14 +5462,28 @@ samp {
   right: auto;
   left:  5PX ;
 }
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
+  right: initial;
+  left: auto;
+}
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
+  left: initial;
+  right:  5PX ;
+}
 .arco-switch.type-android.checked .arco-switch-inner {
   transform:  translateX(16PX) ;
 }
+[dir="rtl"] .arco-switch.type-android.checked .arco-switch-inner {
+  transform: rotate(180deg) translateX(16PX) ;
+}
 .arco-switch.type-android .arco-switch-inner {
   width:  20PX ;
   height:  20PX ;
   box-shadow:  0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
 }
+[dir="rtl"] .arco-switch.type-android .arco-switch-inner {
+  transform: rotate(180deg);
+}
 .arco-switch.type-android.disabled.checked {
   background-color:  #94bfff ;
 }
@@ -5393,6 +5494,10 @@ samp {
   font-size:  12PX ;
   right:  5PX ;
 }
+[dir="rtl"] .arco-switch.type-android .arco-switch-text {
+  right: initial;
+  left:  5PX ;
+}
 .arco-switch.type-ios {
   width:  1.02rem ;
   height:  0.62rem ;
@@ -5413,10 +5518,21 @@ samp {
   right: auto;
   left:  0.12rem ;
 }
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
+  right: initial;
+  left: auto;
+}
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
+  left: initial;
+  right:  0.12rem ;
+}
 .arco-switch.type-ios.checked .arco-switch-inner {
   transform:  translateX(0.4rem) ;
   box-shadow:  0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
 }
+[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-inner {
+  transform: rotate(180deg) translateX(0.4rem) ;
+}
 .arco-switch.type-ios.disabled.checked {
   opacity:  0.3 ;
 }
@@ -5424,6 +5540,10 @@ samp {
   font-size:  0.28rem ;
   right:  0.12rem ;
 }
+[dir="rtl"] .arco-switch.type-ios .arco-switch-text {
+  right: initial;
+  left:  0.12rem ;
+}
 .arco-switch.type-ios .arco-switch-inner {
   width:  0.54rem ;
   height:  0.54rem ;
@@ -5465,6 +5585,9 @@ samp {
     border-radius: 150%;
   }
 }
+[dir="rtl"] .arco-switch.type-ios .arco-switch-inner {
+  transform: rotate(180deg);
+}
 .arco-switch.type-ios.disabled.checked {
   background-color:  #4DD865 ;
 }
@@ -5490,6 +5613,10 @@ samp {
   background-color:  #FFFFFF ;
   transition:  all 0.2s ;
 }
+[dir="rtl"] .arco-switch-inner {
+  left: initial;
+  right: 0;
+}
 .fully .arco-switch-inner {
   border-radius:  50% ;
 }