@arco-design/mobile-react 2.28.2 → 2.29.0

package/dist/style.css

@@ -3075,6 +3075,10 @@ samp {
   display: none;
   /* Chrome Safari */
 }
+.arco-grid .arco-image-picker {
+  width: 100%;
+  /* 兼容grid和image-picker组合使用 */
+}
 
 .arco-image-picker {
   font-size:  0.28rem ;
@@ -4808,6 +4812,125 @@ samp {
   color:  #165dff ;
 }
 
+.arco-skeleton {
+  position: relative;
+  color:  rgba(255, 255, 255, 0.6) ;
+}
+.arco-skeleton-title {
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line {
+  width: 100%;
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
+  margin-top:  0.24rem ;
+}
+.arco-skeleton-avatar.arco-skeleton-item {
+  width:  0.64rem ;
+  height:  0.64rem ;
+  border-radius: 100%;
+  transform: translateZ(0);
+}
+.arco-skeleton-content {
+  width: 100%;
+}
+.arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
+  margin-top:  0.4rem ;
+}
+.arco-skeleton-with-avatar {
+  display: flex;
+  align-items: flex-start;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar {
+  flex: none;
+}
+.arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
+  margin-top:  0.16rem ;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left:  0.16rem ;
+}
+[dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
+.arco-skeleton-grid {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.arco-skeleton-grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.arco-skeleton-grid-icon {
+  width:  0.64rem ;
+  height:  0.64rem ;
+}
+.arco-skeleton-grid-text {
+  margin-top:  0.16rem ;
+  width:  1.28rem ;
+  height:  0.32rem ;
+}
+.arco-skeleton-node {
+  display: inline-block;
+}
+.arco-skeleton-item {
+  position: relative;
+  overflow: hidden;
+  border-radius:  0 ;
+  background-color:  #F2F3F5 ;
+}
+.arco-skeleton-animation-item {
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  transform-origin: top left;
+  animation-name: skeleton-gradient;
+  animation-iteration-count: infinite;
+  animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+  animation-duration:  1.5s ;
+}
+[dir="rtl"] .arco-skeleton-animation-item {
+  animation-name: skeleton-gradient-reverse;
+}
+.arco-skeleton-animation-breath {
+  animation: skeleton-breath linear infinite;
+  animation-duration:  1.5s ;
+}
+@keyframes skeleton-gradient {
+  0% {
+    transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    transform: translateX(135%) skewX(-45deg);
+  }
+}
+@keyframes skeleton-gradient-reverse {
+  0% {
+    transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    transform: translateX(-135%) skewX(45deg);
+  }
+}
+@keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 
 .arco-slider {
   position: relative;