@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.1

package/dist/es/packages/signature/style/style.css

@@ -14,8 +14,8 @@
   justify-content: center;
   align-items: center;
   height: var(--nutui-signature-height, 10rem);
-  border: var(--nutui-signature-border-width, 1px) solid var(--nutui-signature-border-color, var(--nutui-black-3));
-  background-color: var(--nutui-signature-background-color, var(--nutui-gray-1));
+  border: var(--nutui-signature-border-width, 1px) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-signature-unsupport {
   font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14px));

package/dist/es/packages/signature/style/style.harmony.css

@@ -0,0 +1,22 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-signature .spcanvas_WEAPP {
+  width: 100%;
+  height: 100%;
+}
+.nut-signature .spcanvas_WEAPP Canvas {
+  width: 100%;
+}
+.nut-signature-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10rem;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+.nut-signature-unsupport {
+  font-size: 14px;
+}

package/dist/es/packages/skeleton/style/skeleton.scss

@@ -49,15 +49,6 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-
-    /* #ifndef rn */
-    background: linear-gradient(
-      90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.5) 50%,
-      hsla(0, 0%, 100%, 0) 80%
-    );
-    /* #endif */
     animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
@@ -83,15 +74,6 @@
   &-animation {
     left: auto;
     right: 0;
-
-    /* #ifndef rn */
-    background: linear-gradient(
-      -90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.5) 50%,
-      hsla(0, 0%, 100%, 0) 80%
-    );
-    /* #endif */
     animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
   }
 

package/dist/es/packages/skeleton/style/style.css

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 
@@ -148,12 +148,12 @@
 }
 .nut-skeleton-content-avatar {
   margin-right: 20px;
-  background: var(--nutui-skeleton-background, var(--nutui-gray-3)) !important;
+  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5)) !important;
 }
 .nut-skeleton-content-block {
   width: var(--nutui-skeleton-line-width, 100%);
   height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-gray-3));
+  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
   margin-top: 10px;
   border-radius: var(--nutui-skeleton-line-border-radius, 0);
 }
@@ -168,7 +168,7 @@
 .nut-skeleton-content-title {
   width: 30%;
   height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-gray-3));
+  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-skeleton-content-block-last-child {
   width: 55%;
@@ -180,9 +180,6 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  /* #ifndef rn */
-  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
-  /* #endif */
   animation: nut-skeleton 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton {
@@ -203,9 +200,6 @@
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
-  /* #ifndef rn */
-  background: linear-gradient(-90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
-  /* #endif */
   animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
 }
 @keyframes nut-skeleton-rtl {

package/dist/es/packages/skeleton/style/style.harmony.css

@@ -0,0 +1,79 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-skeleton {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+  width: 100%;
+}
+.nut-skeleton-content {
+  display: flex;
+  flex-direction: row;
+}
+.nut-skeleton-content-avatar {
+  margin-right: 20px;
+  background: #f2f3f5 !important;
+}
+.nut-skeleton-content-block {
+  width: 100%;
+  height: 15px;
+  background: #f2f3f5;
+  margin-top: 10px;
+  border-radius: 0;
+}
+.nut-skeleton-content-line {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
+  width: 70%;
+}
+.nut-skeleton-content-title {
+  width: 30%;
+  height: 15px;
+  background: #f2f3f5;
+}
+.nut-skeleton-content-block-last-child {
+  width: 55%;
+}
+.nut-skeleton-animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  animation: nut-skeleton 2s ease-in-out 0s infinite;
+}
+@keyframes nut-skeleton {
+  0% {
+    background-position-x: -500px;
+  }
+  to {
+    background-position-x: calc(500px + 100%);
+  }
+}
+
+[dir=rtl] .nut-skeleton-content .nut-avatar,
+.nut-rtl .nut-skeleton-content .nut-avatar {
+  margin-right: 0;
+  margin-left: 20px;
+}
+[dir=rtl] .nut-skeleton-animation,
+.nut-rtl .nut-skeleton-animation {
+  left: auto;
+  right: 0;
+  animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+}
+@keyframes nut-skeleton-rtl {
+  0% {
+    background-position-x: calc(500px + 100%);
+  }
+  to {
+    background-position-x: -500px;
+  }
+}

package/dist/es/packages/space/style/style.harmony.css

@@ -0,0 +1,83 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-space {
+  display: flex;
+}
+.nut-space-item {
+  flex: none;
+}
+.nut-space-vertical {
+  flex-direction: column;
+}
+.nut-space-vertical-item {
+  margin-bottom: 8px;
+}
+.nut-space-vertical-item-last {
+  margin-bottom: 0;
+}
+.nut-space-horizontal {
+  flex-direction: row;
+}
+.nut-space-horizontal-item {
+  margin-right: 8px;
+}
+.nut-space-horizontal-item-last {
+  margin-right: 0;
+}
+.nut-space-horizontal-wrap {
+  flex-wrap: wrap;
+  margin-bottom: calc(8px * -1);
+}
+.nut-space-horizontal-wrap-item {
+  padding-bottom: 8px;
+}
+.nut-space-align-center {
+  align-items: center;
+}
+.nut-space-align-start {
+  align-items: flex-start;
+}
+.nut-space-align-end {
+  align-items: flex-end;
+}
+.nut-space-align-baseline {
+  align-items: baseline;
+}
+.nut-space-justify-center {
+  justify-content: center;
+}
+.nut-space-justify-start {
+  justify-content: flex-start;
+}
+.nut-space-justify-end {
+  justify-content: flex-end;
+}
+.nut-space-justify-between {
+  justify-content: space-between;
+}
+.nut-space-justify-around {
+  justify-content: space-around;
+}
+.nut-space-justify-evenly {
+  justify-content: space-evenly;
+}
+.nut-space-justify-stretch {
+  justify-content: stretch;
+}
+
+[dir=rtl] .nut-space-horizontal > .nut-space-item {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+.nut-rtl .nut-space-horizontal > .nut-space-item {
+  margin-right: 0;
+  margin-left: 8px;
+}
+[dir=rtl] .nut-space-horizontal > .nut-space-item:last-child,
+.nut-rtl .nut-space-horizontal > .nut-space-item:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}

package/dist/es/packages/step/style/style.css

@@ -21,7 +21,7 @@
   left: calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
   height: var(--nutui-steps-base-line-height, 1px);
   width: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-gray-5));
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
 }
 .nut-step-icon {
   position: relative;
@@ -32,8 +32,8 @@
   height: var(--nutui-steps-base-icon-height, 25px);
   line-height: var(--nutui-steps-base-icon-line-height, 25px);
   font-size: var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-s, 12px));
-  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5));
-  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5));
+  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
+  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
   color: var(--nutui-steps-wait-icon-color, #ffffff);
   z-index: 1;
 }
@@ -62,48 +62,48 @@
   display: block;
   margin-bottom: var(--nutui-steps-base-title-margin-bottom, 10px);
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-steps-base-title-color, var(--nutui-gray-7));
+  color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-step-description {
   display: block;
   font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-steps-base-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-base-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step:last-child .nut-step-line {
   display: none;
 }
 .nut-step.nut-step-process .nut-step-icon {
-  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-6));
-  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-6));
+  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
   color: var(--nutui-steps-process-icon-color, #ffffff);
 }
 .nut-step.nut-step-process .nut-step-title {
-  color: var(--nutui-steps-process-title-color, var(--nutui-brand-6));
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23));
   font-size: var(--nutui-steps-process-title-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-step.nut-step-process .nut-step-description {
-  color: var(--nutui-steps-process-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step.nut-step-wait .nut-step-title {
-  color: var(--nutui-steps-wait-title-color, var(--nutui-gray-7));
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-step.nut-step-wait .nut-step-description {
-  color: var(--nutui-steps-wait-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step.nut-step-finish .nut-step-icon {
   background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-brand-6)));
-  color: var(--nutui-steps-finish-icon-color, var(--nutui-brand-6));
+  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
+  color: var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-line {
-  background: var(--nutui-steps-finish-line-background, var(--nutui-brand-6));
+  background: var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-title {
-  color: var(--nutui-steps-finish-title-color, var(--nutui-brand-6));
+  color: var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-description {
-  color: var(--nutui-steps-finish-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-finish-description-color, var(--nutui-color-text, #505259));
 }
 
 .nut-steps-dot .nut-step-head {
@@ -120,11 +120,11 @@
   box-sizing: content-box;
 }
 .nut-steps-dot .nut-step-wait .nut-step-icon {
-  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5)));
+  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94)));
 }
 .nut-steps-dot .nut-step-finish .nut-step-icon {
   background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-brand-6)));
+  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
 }
 .nut-steps-dot .nut-step-process .nut-step-icon {
   position: relative;
@@ -158,7 +158,7 @@
   display: inline-block;
   width: 1px;
   height: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-gray-5));
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
   top: calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);
   left: calc(50% - 1px);
 }

package/dist/es/packages/step/style/style.harmony.css

@@ -0,0 +1,201 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-step {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex: 1;
+  text-align: center;
+  font-size: 0;
+}
+.nut-step-head {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+.nut-step-line {
+  position: absolute;
+  top: calc(25px / 2);
+  left: calc(50% + (100% - 70%) / 2);
+  height: 1px;
+  width: 70%;
+  background: #888b94;
+}
+.nut-step-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  background-color: #888b94;
+  border-color: #888b94;
+  color: #ffffff;
+  z-index: 1;
+}
+.nut-step-icon .nut-icon {
+  width: 100%;
+  height: 100%;
+}
+.nut-step-icon.is-text {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-icon.is-icon {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-main {
+  padding: 0 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-step-title {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #1a1a1a;
+}
+.nut-step-description {
+  display: block;
+  font-size: 12px;
+  color: #505259;
+}
+.nut-step:last-child .nut-step-line {
+  display: none;
+}
+.nut-step.nut-step-process .nut-step-icon {
+  background-color: #ff0f23;
+  border-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-step.nut-step-process .nut-step-title {
+  color: #ff0f23;
+  font-size: 14px;
+  font-weight: 600;
+}
+.nut-step.nut-step-process .nut-step-description {
+  color: #505259;
+}
+.nut-step.nut-step-wait .nut-step-title {
+  color: #1a1a1a;
+}
+.nut-step.nut-step-wait .nut-step-description {
+  color: #505259;
+}
+.nut-step.nut-step-finish .nut-step-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+  color: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-line {
+  background: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-title {
+  color: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-description {
+  color: #505259;
+}
+
+.nut-steps-dot .nut-step-head {
+  margin: 10px 0;
+}
+.nut-steps-dot .nut-step-line {
+  top: 7px;
+}
+.nut-steps-dot .nut-step-icon {
+  width: 6px;
+  height: 6px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+.nut-steps-dot .nut-step-wait .nut-step-icon {
+  background-color: #888b94;
+}
+.nut-steps-dot .nut-step-finish .nut-step-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon {
+  position: relative;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon:before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -7px;
+  margin-top: -7px;
+  width: 14px;
+  height: 14px;
+  background-color: #ff0f23;
+  border-radius: 50%;
+  opacity: 0.23;
+}
+
+.nut-steps-horizontal.nut-steps-dot .nut-step-line {
+  top: 50%;
+  bottom: -50%;
+}
+
+.nut-steps-vertical .nut-step {
+  display: flex;
+  height: 33.34%;
+}
+.nut-steps-vertical .nut-step-line {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 70%;
+  background: #888b94;
+  top: calc(25px + (100% - 70% - 12px) / 2);
+  left: calc(50% - 1px);
+}
+.nut-steps-vertical.nut-steps-dot .nut-step-line {
+  top: calc(6px + (100% - 70%) / 2);
+}
+.nut-steps-vertical .nut-step-main {
+  display: inline-block;
+  padding-left: 6%;
+  text-align: start;
+}
+
+[dir=rtl] .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+.nut-rtl .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,
+.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before {
+  left: auto;
+  right: 50%;
+  margin-left: 0;
+  margin-right: -7px;
+}
+
+[dir=rtl] .nut-steps-vertical .nut-step-line,
+.nut-rtl .nut-steps-vertical .nut-step-line {
+  left: auto;
+  right: calc(50% - 1px);
+}
+[dir=rtl] .nut-steps-vertical .nut-step-main,
+.nut-rtl .nut-steps-vertical .nut-step-main {
+  padding-left: 0;
+  padding-right: 6%;
+}