@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

package/dist/style.css

@@ -731,28 +731,28 @@ samp {
   min-width: 8PX;
   padding: 0 4PX ;
 }
-.arco-badge .badge-text {
+.arco-badge-text {
   display: block;
   font-weight: 500;
   font-size: 12PX;
 }
-.arco-badge.dot {
+.arco-badge-dot {
   width:  8PX ;
   height:  8PX ;
   padding: 0;
   min-width: auto;
 }
-.arco-badge.bordered {
+.arco-badge-bordered {
   border: 1PX solid #FFFFFF ;
 }
-.arco-badge.absolute {
+.arco-badge-absolute {
   position: absolute;
   top: 0;
   left: 100%;
   margin-left:  -8PX ;
   margin-top:  -8PX ;
 }
-.arco-badge.absolute.dot {
+.arco-badge-absolute.arco-badge-dot {
   margin-left:  -4PX ;
   margin-top:  -4PX ;
 }
@@ -815,7 +815,8 @@ samp {
 }
 .arco-image .image-container.static-label,
 .arco-image .image-container.loaded,
-.arco-image .image-container.error {
+.arco-image .image-container.error,
+.arco-image .image-container.has-loaded {
   opacity: 1;
 }
 .arco-image .image-container.animate {
@@ -898,73 +899,6 @@ samp {
   stroke: #e6e8eb;
 }
 
-.arco-avatar-wrapper {
-  display: inline-block;
-}
-.arco-avatar-wrapper.with-info.ultra-small {
-  height:  1.12rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-name {
-  font-size:  0.26rem ;
-  line-height:  0.36rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.2rem ;
-  line-height:  0.28rem ;
-}
-.arco-avatar-wrapper.with-info.smaller {
-  height:  1.28rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-name {
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.small {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-name {
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.medium {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info.large {
-  height:  1.76rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info {
-  display: flex;
-  align-items: center;
-}
 .arco-avatar {
   position: relative;
   font-size: 0;
@@ -974,104 +908,134 @@ samp {
   color:  #fff ;
   background-color:  #4080FF ;
 }
-.arco-avatar.arco-image-avatar {
+.arco-avatar-mode-image {
   background-color: transparent;
 }
-.arco-avatar.default-overlap {
+.arco-avatar-default-overlap {
   background-color:  #c9cdd4 ;
 }
-.arco-avatar.circle {
+.arco-avatar-shape-circle {
   border-radius: 50%;
 }
-.arco-avatar.circle .arco-avatar-img .image-content {
+.arco-avatar-shape-circle .arco-avatar-img .image-content {
   border-radius: 50%;
 }
-.arco-avatar.square {
+.arco-avatar-shape-square {
   border-radius: 0.08rem;
 }
-.arco-avatar.square .arco-avatar-img .image-content {
+.arco-avatar-shape-square .arco-avatar-img .image-content {
   border-radius: 0.08rem;
 }
-.arco-avatar.group-ultra-small .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
-}
-.arco-avatar.group-ultra-small .arco-avatar {
-  border-width:  0.02rem ;
-}
-.arco-avatar.ultra-small {
+.arco-avatar-size-ultra-small {
   width:  0.48rem ;
   height:  0.48rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-default {
+.arco-avatar-default-icon-size-ultra-small {
   font-size:  0.24rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-text {
+.arco-avatar-text-size-ultra-small {
   font-size:  0.2rem ;
 }
-.arco-avatar.group-smaller .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
+.arco-avatar-wrapper-with-info-size-ultra-small {
+  height:  1.12rem ;
 }
-.arco-avatar.group-smaller .arco-avatar {
-  border-width:  0.02rem ;
+.arco-avatar-name-size-ultra-small {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
 }
-.arco-avatar.smaller {
+.arco-avatar-desc-size-ultra-small {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-avatar-size-smaller {
   width:  0.64rem ;
   height:  0.64rem ;
 }
-.arco-avatar.smaller .arco-avatar-default {
+.arco-avatar-default-icon-size-smaller {
   font-size:  0.32rem ;
 }
-.arco-avatar.smaller .arco-avatar-text {
+.arco-avatar-text-size-smaller {
   font-size:  0.24rem ;
 }
-.arco-avatar.group-small .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-smaller {
+  height:  1.28rem ;
 }
-.arco-avatar.group-small .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-smaller {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
+.arco-avatar-desc-size-smaller {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.small {
+.arco-avatar-size-small {
   width:  0.8rem ;
   height:  0.8rem ;
 }
-.arco-avatar.small .arco-avatar-default {
+.arco-avatar-default-icon-size-small {
   font-size:  0.4rem ;
 }
-.arco-avatar.small .arco-avatar-text {
+.arco-avatar-text-size-small {
   font-size:  0.28rem ;
 }
-.arco-avatar.group-medium .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-small {
+  height:  1.6rem ;
 }
-.arco-avatar.group-medium .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-small {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-desc-size-small {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.medium {
+.arco-avatar-size-medium {
   width:  0.96rem ;
   height:  0.96rem ;
 }
-.arco-avatar.medium .arco-avatar-default {
+.arco-avatar-default-icon-size-medium {
   font-size:  0.48rem ;
 }
-.arco-avatar.medium .arco-avatar-text {
+.arco-avatar-text-size-medium {
   font-size:  0.32rem ;
 }
-.arco-avatar.group-large .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-medium {
+  height:  1.6rem ;
 }
-.arco-avatar.group-large .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-medium {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-medium {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.large {
+.arco-avatar-size-large {
   width:  1.12rem ;
   height:  1.12rem ;
 }
-.arco-avatar.large .arco-avatar-default {
+.arco-avatar-default-icon-size-large {
   font-size:  0.56rem ;
 }
-.arco-avatar.large .arco-avatar-text {
+.arco-avatar-text-size-large {
   font-size:  0.32rem ;
 }
+.arco-avatar-wrapper-with-info-size-large {
+  height:  1.76rem ;
+}
+.arco-avatar-name-size-large {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-large {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
 .arco-avatar-img {
   width: 100%;
   height: 100%;
@@ -1083,6 +1047,13 @@ samp {
   flex: 0 0 auto;
   font-weight: bold;
 }
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper-with-info {
+  display: flex;
+  align-items: center;
+}
 .arco-avatar-info {
   display: flex;
   justify-content: center;
@@ -1095,44 +1066,44 @@ samp {
 .arco-avatar-desc {
   color:  #86909c ;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle {
   position: relative;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
   margin-left: 0;
 }
 .arco-avatar-group .arco-avatar {
   border-style: solid;
   border-color:  #ffffff ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar {
+.arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+.arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar {
+.arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-small .arco-avatar-wrapper {
+.arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-small .arco-avatar {
+.arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar-wrapper {
+.arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar {
+.arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-large .arco-avatar-wrapper {
+.arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-large .arco-avatar {
+.arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }
 
@@ -1144,8 +1115,8 @@ samp {
   display: block;
   width: 100%;
   box-sizing: border-box;
+  line-height:  1.2 ;
   border-radius:  2PX ;
-  border: 1PX solid #165dff ;
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
@@ -1157,433 +1128,198 @@ samp {
   user-select: none;
   /* Non-prefixed version, currently*/
 }
-.arco-button.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.half-border:not(.has-custom-border),
-.arco-button.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.inline {
+.arco-button-inline {
   width: auto;
   display: inline-block;
 }
-.arco-button.type-ghost {
-  border: 1PX solid transparent ;
+.arco-button-type-ghost {
   background:  transparent ;
   color:  #165dff ;
 }
-.arco-button.type-ghost.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX transparent inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX transparent inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid transparent;
-}
-.arco-button.type-ghost .bg-color-with-config {
+.arco-button-type-ghost .bg-color-with-config {
   background: #165dff;
 }
-.arco-button.type-ghost .stop-color-with-config {
+.arco-button-type-ghost .stop-color-with-config {
   stop-color: #165dff;
 }
-.arco-button.type-ghost .fill-color-with-config {
+.arco-button-type-ghost .fill-color-with-config {
   fill: #165dff;
 }
-.arco-button.type-ghost .stroke-color-with-config {
+.arco-button-type-ghost .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button.type-ghost.disabled {
+.arco-button-type-ghost-disabled {
   background:  transparent ;
   color:  #94bfff ;
 }
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-ghost.active {
+.arco-button-type-ghost-active {
   background:  #e8f3ff ;
-  border: 1PX solid #e8f3ff ;
-}
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #e8f3ff inset;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #e8f3ff inset;
-  }
-}
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #e8f3ff;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
-}
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-default {
-  border: 1PX solid #E8F3FF ;
+.arco-button-type-default {
   background:  #E8F3FF ;
   color:  #165dff ;
 }
-.arco-button.type-default.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #E8F3FF inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-default.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #E8F3FF inset;
-  }
-}
-.ios .arco-button.type-default.half-border:not(.has-custom-border),
-.arco-button.type-default.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #E8F3FF;
-}
-.arco-button.type-default .bg-color-with-config {
+.arco-button-type-default .bg-color-with-config {
   background: #165dff;
 }
-.arco-button.type-default .stop-color-with-config {
+.arco-button-type-default .stop-color-with-config {
   stop-color: #165dff;
 }
-.arco-button.type-default .fill-color-with-config {
+.arco-button-type-default .fill-color-with-config {
   fill: #165dff;
 }
-.arco-button.type-default .stroke-color-with-config {
+.arco-button-type-default .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button.type-default.disabled {
+.arco-button-type-default-disabled {
   background:  #E8F3FF ;
   color:  #94bfff ;
 }
-.arco-button.type-default.disabled.ios,
-.arco-button.type-default.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-default.active {
+.arco-button-type-default-active {
   background:  #94bfff ;
-  border: 1PX solid #94bfff ;
 }
-.arco-button.type-default.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-default.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-default.active.half-border:not(.has-custom-border),
-.arco-button.type-default.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
-}
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-primary {
-  border: 1PX solid #165dff ;
+.arco-button-type-primary {
   background:  #165dff ;
   color:  #fff ;
 }
-.arco-button.type-primary.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-primary.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-primary.half-border:not(.has-custom-border),
-.arco-button.type-primary.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-primary .bg-color-with-config {
+.arco-button-type-primary .bg-color-with-config {
   background: #fff;
 }
-.arco-button.type-primary .stop-color-with-config {
+.arco-button-type-primary .stop-color-with-config {
   stop-color: #fff;
 }
-.arco-button.type-primary .fill-color-with-config {
+.arco-button-type-primary .fill-color-with-config {
   fill: #fff;
 }
-.arco-button.type-primary .stroke-color-with-config {
+.arco-button-type-primary .stroke-color-with-config {
   stroke: #fff;
 }
-.arco-button.type-primary.disabled {
+.arco-button-type-primary-disabled {
   background:  #94bfff ;
   color:  #E8F3FF ;
 }
-.arco-button.type-primary.disabled.ios,
-.arco-button.type-primary.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-primary.active {
+.arco-button-type-primary-active {
   background:  #0E42D2 ;
-  border: 1PX solid #0E42D2 ;
-}
-.arco-button.type-primary.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #0E42D2 inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-primary.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #0E42D2 inset;
-  }
-}
-.ios .arco-button.type-primary.active.half-border:not(.has-custom-border),
-.arco-button.type-primary.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #0E42D2;
 }
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
+.arco-button-type-ghost {
+  border: 1PX solid currentColor;
 }
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
+.arco-button-type-ghost.half-border {
   border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
+  box-shadow: 0 0 0 1PX currentColor inset;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
+  .arco-button-type-ghost.half-border {
+    box-shadow: 0 0 0 0.5PX currentColor inset;
   }
 }
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
+.ios .arco-button-type-ghost.half-border,
+.arco-button-type-ghost.half-border.ios {
   box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
+  border: 0.5PX solid currentColor;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.size-mini {
+.arco-button-size-mini {
   padding:  0 0.16rem ;
   height:  0.48rem ;
 }
-.arco-button.size-mini.is-round {
+.arco-button-size-mini-is-round {
   border-radius:  0.48rem ;
 }
-.arco-button.size-mini.is-square {
+.arco-button-size-mini-is-square {
   border-radius: 0;
 }
-.arco-button.size-mini .btn-icon,
-.arco-button.size-mini i,
-.arco-button.size-mini .btn-text,
-.arco-button.size-mini svg {
+.arco-button-size-mini .arco-button-icon,
+.arco-button-size-mini i,
+.arco-button-size-mini .arco-button-text,
+.arco-button-size-mini svg {
   font-size:  0.24rem ;
 }
-.arco-button.size-small {
+.arco-button-size-small {
   padding:  0 0.16rem ;
   height:  0.56rem ;
 }
-.arco-button.size-small.is-round {
+.arco-button-size-small-is-round {
   border-radius:  0.56rem ;
 }
-.arco-button.size-small.is-square {
+.arco-button-size-small-is-square {
   border-radius: 0;
 }
-.arco-button.size-small .btn-icon,
-.arco-button.size-small i,
-.arco-button.size-small .btn-text,
-.arco-button.size-small svg {
+.arco-button-size-small .arco-button-icon,
+.arco-button-size-small i,
+.arco-button-size-small .arco-button-text,
+.arco-button-size-small svg {
   font-size:  0.28rem ;
 }
-.arco-button.size-medium {
+.arco-button-size-medium {
   padding:  0 0.32rem ;
   height:  0.64rem ;
 }
-.arco-button.size-medium.is-round {
+.arco-button-size-medium-is-round {
   border-radius:  0.64rem ;
 }
-.arco-button.size-medium.is-square {
+.arco-button-size-medium-is-square {
   border-radius: 0;
 }
-.arco-button.size-medium .btn-icon,
-.arco-button.size-medium i,
-.arco-button.size-medium .btn-text,
-.arco-button.size-medium svg {
+.arco-button-size-medium .arco-button-icon,
+.arco-button-size-medium i,
+.arco-button-size-medium .arco-button-text,
+.arco-button-size-medium svg {
   font-size:  0.28rem ;
 }
-.arco-button.size-large {
+.arco-button-size-large {
   padding:  0 0.32rem ;
   height:  0.72rem ;
 }
-.arco-button.size-large.is-round {
+.arco-button-size-large-is-round {
   border-radius:  0.72rem ;
 }
-.arco-button.size-large.is-square {
+.arco-button-size-large-is-square {
   border-radius: 0;
 }
-.arco-button.size-large .btn-icon,
-.arco-button.size-large i,
-.arco-button.size-large .btn-text,
-.arco-button.size-large svg {
+.arco-button-size-large .arco-button-icon,
+.arco-button-size-large i,
+.arco-button-size-large .arco-button-text,
+.arco-button-size-large svg {
   font-size:  0.3rem ;
 }
-.arco-button.size-huge {
+.arco-button-size-huge {
   padding:  0 0.32rem ;
   height:  0.88rem ;
 }
-.arco-button.size-huge.is-round {
+.arco-button-size-huge-is-round {
   border-radius:  0.88rem ;
 }
-.arco-button.size-huge.is-square {
+.arco-button-size-huge-is-square {
   border-radius: 0;
 }
-.arco-button.size-huge .btn-icon,
-.arco-button.size-huge i,
-.arco-button.size-huge .btn-text,
-.arco-button.size-huge svg {
+.arco-button-size-huge .arco-button-icon,
+.arco-button-size-huge i,
+.arco-button-size-huge .arco-button-text,
+.arco-button-size-huge svg {
   font-size:  0.32rem ;
 }
-.arco-button.android .btn-text {
+.arco-button-text-android {
   padding-top: 0.04rem;
 }
-.arco-button .btn-icon {
+.arco-button-icon {
   vertical-align: middle;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.arco-button .btn-text {
-  font-size: 0.3rem;
+.arco-button-text {
   display: inline-block;
   vertical-align: middle;
 }
-.arco-button .btn-text.has-icon {
-  margin-left: 0.08rem;
+.arco-button-text-has-icon {
+  margin-left:  0.08rem ;
 }
-.arco-button .loading-icon {
+.arco-button-loading-icon {
   display: inline-block;
   vertical-align: middle;
 }
-.arco-button .loading-icon + .btn-text {
-  margin-left: 0.16rem;
+.arco-button.has-custom-border {
+  border: 1PX solid;
 }
 
 .arco-carousel {