@arco-design/mobile-react 2.20.0 → 2.21.0

package/dist/style.css

@@ -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;