@arco-design/mobile-react 2.20.0 → 2.21.2

package/dist/style.css

@@ -1128,14 +1128,21 @@ samp {
   user-select: none;
   /* Non-prefixed version, currently*/
 }
-.arco-button-inline {
+.arco-button.arco-button-inline {
   width: auto;
   display: inline-block;
 }
-.arco-button-type-ghost {
+.arco-button.arco-button-type-ghost {
   background:  transparent ;
   color:  #165dff ;
 }
+.arco-button.arco-button-type-ghost-disabled {
+  background:  transparent ;
+  color:  #94bfff ;
+}
+.arco-button.arco-button-type-ghost-active {
+  background:  #e8f3ff ;
+}
 .arco-button-type-ghost .bg-color-with-config {
   background: #165dff;
 }
@@ -1148,17 +1155,17 @@ samp {
 .arco-button-type-ghost .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button-type-ghost-disabled {
-  background:  transparent ;
-  color:  #94bfff ;
-}
-.arco-button-type-ghost-active {
-  background:  #e8f3ff ;
-}
-.arco-button-type-default {
+.arco-button.arco-button-type-default {
   background:  #E8F3FF ;
   color:  #165dff ;
 }
+.arco-button.arco-button-type-default-disabled {
+  background:  #E8F3FF ;
+  color:  #94bfff ;
+}
+.arco-button.arco-button-type-default-active {
+  background:  #94bfff ;
+}
 .arco-button-type-default .bg-color-with-config {
   background: #165dff;
 }
@@ -1171,16 +1178,16 @@ samp {
 .arco-button-type-default .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button-type-default-disabled {
-  background:  #E8F3FF ;
-  color:  #94bfff ;
+.arco-button.arco-button-type-primary {
+  background:  #165dff ;
+  color:  #fff ;
 }
-.arco-button-type-default-active {
+.arco-button.arco-button-type-primary-disabled {
   background:  #94bfff ;
+  color:  #E8F3FF ;
 }
-.arco-button-type-primary {
-  background:  #165dff ;
-  color:  #fff ;
+.arco-button.arco-button-type-primary-active {
+  background:  #0E42D2 ;
 }
 .arco-button-type-primary .bg-color-with-config {
   background: #fff;
@@ -1194,108 +1201,101 @@ samp {
 .arco-button-type-primary .stroke-color-with-config {
   stroke: #fff;
 }
-.arco-button-type-primary-disabled {
-  background:  #94bfff ;
-  color:  #E8F3FF ;
-}
-.arco-button-type-primary-active {
-  background:  #0E42D2 ;
-}
-.arco-button-type-ghost {
+.arco-button.arco-button-type-ghost {
   border: 1PX solid currentColor;
 }
-.arco-button-type-ghost.half-border {
+.arco-button.arco-button-type-ghost.half-border {
   border-width: 0;
   box-shadow: 0 0 0 1PX currentColor inset;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button-type-ghost.half-border {
+  .arco-button.arco-button-type-ghost.half-border {
     box-shadow: 0 0 0 0.5PX currentColor inset;
   }
 }
-.ios .arco-button-type-ghost.half-border,
-.arco-button-type-ghost.half-border.ios {
+.ios .arco-button.arco-button-type-ghost.half-border,
+.arco-button.arco-button-type-ghost.half-border.ios {
   box-shadow: none;
   border: 0.5PX solid currentColor;
 }
-.arco-button-size-mini {
+.arco-button.arco-button-size-mini {
   padding:  0 0.16rem ;
   height:  0.48rem ;
 }
-.arco-button-size-mini-is-round {
+.arco-button.arco-button-size-mini-is-round {
   border-radius:  0.48rem ;
 }
-.arco-button-size-mini-is-square {
+.arco-button.arco-button-size-mini-is-square {
   border-radius: 0;
 }
-.arco-button-size-mini .arco-button-icon,
-.arco-button-size-mini i,
-.arco-button-size-mini .arco-button-text,
-.arco-button-size-mini svg {
+.arco-button.arco-button-size-mini .arco-button-icon,
+.arco-button.arco-button-size-mini i,
+.arco-button.arco-button-size-mini .arco-button-text,
+.arco-button.arco-button-size-mini svg {
   font-size:  0.24rem ;
 }
-.arco-button-size-small {
+.arco-button.arco-button-size-small {
   padding:  0 0.16rem ;
   height:  0.56rem ;
 }
-.arco-button-size-small-is-round {
+.arco-button.arco-button-size-small-is-round {
   border-radius:  0.56rem ;
 }
-.arco-button-size-small-is-square {
+.arco-button.arco-button-size-small-is-square {
   border-radius: 0;
 }
-.arco-button-size-small .arco-button-icon,
-.arco-button-size-small i,
-.arco-button-size-small .arco-button-text,
-.arco-button-size-small svg {
+.arco-button.arco-button-size-small .arco-button-icon,
+.arco-button.arco-button-size-small i,
+.arco-button.arco-button-size-small .arco-button-text,
+.arco-button.arco-button-size-small svg {
   font-size:  0.28rem ;
 }
-.arco-button-size-medium {
+.arco-button.arco-button-size-medium {
   padding:  0 0.32rem ;
   height:  0.64rem ;
 }
-.arco-button-size-medium-is-round {
+.arco-button.arco-button-size-medium-is-round {
   border-radius:  0.64rem ;
 }
-.arco-button-size-medium-is-square {
+.arco-button.arco-button-size-medium-is-square {
   border-radius: 0;
 }
-.arco-button-size-medium .arco-button-icon,
-.arco-button-size-medium i,
-.arco-button-size-medium .arco-button-text,
-.arco-button-size-medium svg {
+.arco-button.arco-button-size-medium .arco-button-icon,
+.arco-button.arco-button-size-medium i,
+.arco-button.arco-button-size-medium .arco-button-text,
+.arco-button.arco-button-size-medium svg {
   font-size:  0.28rem ;
 }
-.arco-button-size-large {
+.arco-button.arco-button-size-large {
   padding:  0 0.32rem ;
   height:  0.72rem ;
 }
-.arco-button-size-large-is-round {
+.arco-button.arco-button-size-large-is-round {
   border-radius:  0.72rem ;
 }
-.arco-button-size-large-is-square {
+.arco-button.arco-button-size-large-is-square {
   border-radius: 0;
 }
-.arco-button-size-large .arco-button-icon,
-.arco-button-size-large i,
-.arco-button-size-large .arco-button-text,
-.arco-button-size-large svg {
+.arco-button.arco-button-size-large .arco-button-icon,
+.arco-button.arco-button-size-large i,
+.arco-button.arco-button-size-large .arco-button-text,
+.arco-button.arco-button-size-large svg {
   font-size:  0.3rem ;
 }
-.arco-button-size-huge {
+.arco-button.arco-button-size-huge {
   padding:  0 0.32rem ;
   height:  0.88rem ;
 }
-.arco-button-size-huge-is-round {
+.arco-button.arco-button-size-huge-is-round {
   border-radius:  0.88rem ;
 }
-.arco-button-size-huge-is-square {
+.arco-button.arco-button-size-huge-is-square {
   border-radius: 0;
 }
-.arco-button-size-huge .arco-button-icon,
-.arco-button-size-huge i,
-.arco-button-size-huge .arco-button-text,
-.arco-button-size-huge svg {
+.arco-button.arco-button-size-huge .arco-button-icon,
+.arco-button.arco-button-size-huge i,
+.arco-button.arco-button-size-huge .arco-button-text,
+.arco-button.arco-button-size-huge svg {
   font-size:  0.32rem ;
 }
 .arco-button-text-android {
@@ -2890,6 +2890,8 @@ samp {
 }
 .arco-dropdown-options-item-icon {
   position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   right:  0.32rem ;
   color: transparent;
 }
@@ -4718,6 +4720,133 @@ samp {
   opacity:  0.8 ;
 }
 
+.arco-search-bar-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding:  0.32rem ;
+  background-color:  #FFFFFF ;
+}
+.arco-search-bar-square .arco-search-bar-wrap {
+  border-radius:  0.04rem ;
+}
+.arco-search-bar-round .arco-search-bar-wrap {
+  border-radius:  199.98rem ;
+}
+.arco-search-bar-wrap {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height:  0.72rem ;
+  font-size:  0.28rem ;
+  padding:  0.16rem 0.28rem ;
+  background-color:  #F2F3F5 ;
+}
+.arco-search-bar-input {
+  flex: 1;
+  background-color: transparent;
+  height:  0.4rem ;
+  caret-color:  #165dff ;
+}
+.arco-search-bar-input-left {
+  text-align: left;
+}
+.arco-search-bar-input-right {
+  text-align: right;
+}
+.arco-search-bar-input-center {
+  text-align: center;
+}
+.arco-search-bar-input::-moz-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::-webkit-search-cancel-button {
+  display: none;
+}
+.arco-search-bar-prefix,
+.arco-search-bar-suffix,
+.arco-search-bar-clear {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.arco-search-bar-prefix {
+  margin-right:  0.18rem ;
+}
+.arco-search-bar-clear {
+  color:  #C9CDD4 ;
+}
+.arco-search-bar-search-icon {
+  color:  #86909C ;
+  font-size:  0.32rem ;
+}
+.arco-search-bar-cancel-btn {
+  margin-left:  0.32rem ;
+  color:  #165dff ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color:  #FFFFFF ;
+  top: 100%;
+  display: none;
+}
+.arco-search-bar-association-visible {
+  display: block;
+}
+.arco-search-bar-association-item {
+  height:  1.04rem ;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color:  #1d2129 ;
+  padding:  0.32rem ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-search-bar-association-item:not(:last-child)::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-search-bar-association-item-highlight {
+  color:  #165dff ;
+}
+
 .arco-steps {
   display: flex;
   padding:  0.32rem 0 ;
@@ -4889,6 +5018,80 @@ samp {
 }
 
 
+.arco-swipe-action {
+  position: relative;
+  transition: transform 0s;
+  font-size:  0.32rem ;
+}
+.arco-swipe-action.action-open,
+.arco-swipe-action-menu.action-open {
+  transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
+}
+.arco-swipe-action.action-close,
+.arco-swipe-action-menu.action-close {
+  transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
+}
+.arco-swipe-action-content {
+  width: 100%;
+}
+.arco-swipe-action-menu {
+  display: flex;
+  position: absolute;
+  height: 100%;
+  overflow: visible;
+  flex-wrap: nowrap;
+  top: 0;
+  transition: width 0s;
+}
+.arco-swipe-action-menu-left {
+  right: 100%;
+}
+.arco-swipe-action-menu-right {
+  left: 100%;
+}
+.arco-swipe-action-menu-action-left::after {
+  right: 100%;
+  margin-right: -1PX;
+}
+.arco-swipe-action-menu-action-right::after {
+  left: 100%;
+  margin-left: -1PX;
+}
+.arco-swipe-action-menu-action-info {
+  height: 100%;
+  padding:  0.32rem ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.arco-swipe-action-menu-action-info-container {
+  position: relative;
+}
+.arco-swipe-action-menu-action-info-container.open-style-layer {
+  position: absolute;
+  height: 100%;
+}
+.arco-swipe-action-menu-action-info-container::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width:  0.6rem ;
+  background: inherit;
+}
+.arco-swipe-action-menu-action-info-text {
+  white-space: nowrap;
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  color:  #ffffff ;
+}
+.arco-swipe-action-menu-action-info-icon {
+  margin-right:  0.08rem ;
+  height:  0.4rem ;
+  width:  0.4rem ;
+  color:  #ffffff ;
+}
+
 .arco-swipe-load {
   position: relative;
   display: inline-flex;