@arco-design/mobile-react 2.19.0

package/esm/button/style/css/index.css

@@ -0,0 +1,454 @@
+.arco-button {
+  cursor: pointer;
+  text-align: center;
+  line-height: 1.2;
+  font-size: 0;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius:  2PX ;
+  border: 1PX solid #165dff ;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  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 {
+  width: auto;
+  display: inline-block;
+}
+.arco-button.type-ghost {
+  border: 1PX solid transparent ;
+  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 {
+  background: #165dff;
+}
+.arco-button.type-ghost .stop-color-with-config {
+  stop-color: #165dff;
+}
+.arco-button.type-ghost .fill-color-with-config {
+  fill: #165dff;
+}
+.arco-button.type-ghost .stroke-color-with-config {
+  stroke: #165dff;
+}
+.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 {
+  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 ;
+  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 {
+  background: #165dff;
+}
+.arco-button.type-default .stop-color-with-config {
+  stop-color: #165dff;
+}
+.arco-button.type-default .fill-color-with-config {
+  fill: #165dff;
+}
+.arco-button.type-default .stroke-color-with-config {
+  stroke: #165dff;
+}
+.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 {
+  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 ;
+  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 {
+  background: #fff;
+}
+.arco-button.type-primary .stop-color-with-config {
+  stop-color: #fff;
+}
+.arco-button.type-primary .fill-color-with-config {
+  fill: #fff;
+}
+.arco-button.type-primary .stroke-color-with-config {
+  stroke: #fff;
+}
+.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 {
+  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.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.size-mini {
+  padding:  0 0.16rem ;
+  height:  0.48rem ;
+}
+.arco-button.size-mini.is-round {
+  border-radius:  0.48rem ;
+}
+.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 {
+  font-size:  0.24rem ;
+}
+.arco-button.size-small {
+  padding:  0 0.16rem ;
+  height:  0.56rem ;
+}
+.arco-button.size-small.is-round {
+  border-radius:  0.56rem ;
+}
+.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 {
+  font-size:  0.28rem ;
+}
+.arco-button.size-medium {
+  padding:  0 0.32rem ;
+  height:  0.64rem ;
+}
+.arco-button.size-medium.is-round {
+  border-radius:  0.64rem ;
+}
+.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 {
+  font-size:  0.28rem ;
+}
+.arco-button.size-large {
+  padding:  0 0.32rem ;
+  height:  0.72rem ;
+}
+.arco-button.size-large.is-round {
+  border-radius:  0.72rem ;
+}
+.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 {
+  font-size:  0.3rem ;
+}
+.arco-button.size-huge {
+  padding:  0 0.32rem ;
+  height:  0.88rem ;
+}
+.arco-button.size-huge.is-round {
+  border-radius:  0.88rem ;
+}
+.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 {
+  font-size:  0.32rem ;
+}
+.arco-button.android .btn-text {
+  padding-top: 0.04rem;
+}
+.arco-button .btn-icon {
+  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}
+.arco-button .btn-text {
+  font-size: 0.3rem;
+  display: inline-block;
+  vertical-align: middle;
+}
+.arco-button .btn-text.has-icon {
+  margin-left: 0.08rem;
+}
+.arco-button .loading-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.arco-button .loading-icon + .btn-text {
+  margin-left: 0.16rem;
+}

package/esm/button/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../loading/style/css';
+import './index.css';

package/esm/button/style/css/index.js

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../loading/style/css';
+import './index.css';

package/esm/button/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../loading/style';
+import './index.less';

package/esm/button/style/index.js

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../loading/style';
+import './index.less';

package/esm/button/style/index.less

@@ -0,0 +1,136 @@
+@import '../../../style/mixin.less';
+
+@size-map: huge, large, medium, small, mini;
+
+@type-map: primary, default, ghost;
+
+.button-has-border(@color) {
+    .use-var(border, @color, 1PX solid);
+    &.half-border:not(.has-custom-border) {
+        border-width: 0;
+        .hairline-var(@color);
+    }
+}
+
+.button-no-border() {
+    border-width: 0;
+    box-shadow: none;
+}
+
+.button-text-size(@font-size) {
+    .btn-icon,
+    i,
+    .btn-text,
+    svg {
+        .use-var(font-size, @font-size);
+    }
+}
+
+.button-size-height(@height) {
+    .use-var(height, @height);
+    &.is-round {
+        .use-var(border-radius, @height);
+    }
+    &.is-square {
+        .rem(border-radius, 0);
+    }
+}
+
+.@{prefix}-button {
+    cursor: pointer;
+    text-align: center;
+    line-height: 1.2;
+    font-size: 0;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    .use-var(border-radius, button-radius);
+    .button-has-border(button-border-color);
+    .noselect();
+
+    &.inline {
+        width: auto;
+        display: inline-block;
+    }
+
+    .set-button-type(length(@type-map));
+
+    .set-button-size(length(@size-map));
+
+    &.android .btn-text {
+        .rem(padding-top, 2);
+    }
+
+    .btn-icon {
+        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .btn-text {
+        .rem(font-size, 15);
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .btn-text.has-icon {
+        .rem(margin-left, 4);
+    }
+
+    .loading-icon {
+        display: inline-block;
+        vertical-align: middle;
+
+        & + .btn-text {
+            .rem(margin-left, 8);
+        }
+    }
+}
+
+
+.set-button-type(@index) when (@index > 0) {
+    @type: extract(@type-map, @index);
+
+    &.type-@{type} {
+        .button-has-border('button-@{type}-background');
+        .use-var(background, 'button-@{type}-background');
+        .use-var(color, 'button-@{type}-text-color');
+        .set-loading-color-var('button-@{type}-text-color');
+        &.disabled {
+            &.ios,
+            &.android {
+                .button-no-border();
+            }
+            .use-var(background, 'button-@{type}-disabled-background');
+            .use-var(color, 'button-@{type}-disabled-text-color')
+        }
+        &.active {
+            .use-var(background, 'button-@{type}-clicked-background');
+            .button-has-border('button-@{type}-clicked-background');
+        }
+    }
+
+    &.type-ghost {
+        &, &.active {
+            .button-has-border(button-ghost-text-color);
+        }
+        &.disabled {
+            &.ios, &.android {
+                .button-has-border(button-ghost-disabled-text-color);
+            }
+        }
+    }
+
+    .set-button-type(@index - 1);
+}
+
+.set-button-size(@index) when (@index > 0) {
+    @size: extract(@size-map, @index);
+
+    &.size-@{size} {
+        .use-var(padding, "button-@{size}-padding");
+        .button-size-height("button-@{size}-height");
+        .button-text-size("button-@{size}-text-size");
+    }
+
+    .set-button-size(@index - 1);
+}

package/esm/carousel/demo/style/css/mobile.css

@@ -0,0 +1,27 @@
+#demo-carousel .radius-num-indicator {
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 0.4rem;
+  font-size: 0.24rem;
+  padding: 0.04rem 0.12rem;
+  margin-right: -0.16rem;
+  margin-bottom: -0.08rem;
+  color: #ffffff;
+}
+#demo-carousel .vertical-text {
+  font-size: 0.32rem;
+  line-height: 0.44rem;
+}
+#demo-carousel .arco-carousel-indicator.outside {
+  padding-bottom: 0;
+}
+#demo-carousel .arco-carousel-item > img,
+#demo-carousel .arco-carousel-item-inner > img,
+#demo-carousel .arco-carousel-item .carousel-item-img {
+  height: 140px;
+}
+#demo-carousel #demo-order-11 .arco-carousel-item > img,
+#demo-carousel #demo-order-11 .arco-carousel-item-inner > img,
+#demo-carousel #demo-order-11 .arco-carousel-item .carousel-item-img {
+  height: auto;
+}

package/esm/carousel/demo/style/mobile.less

@@ -0,0 +1,29 @@
+@import '../../../../style/mixin.less';
+
+#demo-carousel {
+    .radius-num-indicator {
+        display: inline-block;
+        background: rgba(0, 0, 0, 0.3);
+        .rem(border-radius, 20);
+        .rem(font-size, 12);
+        .rem(padding, 2, 6);
+        .rem(margin-right, -8);
+        .rem(margin-bottom, -4);
+        color: #ffffff;
+    }
+    .vertical-text {
+        .rem(font-size, 16);
+        .rem(line-height, 22);
+    }
+    .@{prefix}-carousel-indicator.outside {
+        padding-bottom: 0;
+    }
+    .@{prefix}-carousel-item > img, .@{prefix}-carousel-item-inner > img, .@{prefix}-carousel-item .carousel-item-img {
+        height: 140px;
+    }
+    #demo-order-11 {
+        .@{prefix}-carousel-item > img, .@{prefix}-carousel-item-inner > img, .@{prefix}-carousel-item .carousel-item-img {
+            height: auto;
+        }
+    }
+}